/* superAppSkytale — feuille de style autonome (aucune dépendance).
 *
 * La palette sort de Nimbus : l'encre bleu nuit de son contour, le cyan de
 * l'étincelle, le corail de ses mains. L'intérieur de l'outil porte la même
 * identité que les pages publiques, au lieu de l'indigo générique d'avant.
 * Les variantes « deep » existent parce que le cyan et le corail de la
 * mascotte, posés tels quels sur du blanc, plafonnent à 2:1 de contraste :
 * elles servent au texte et aux boutons, les teintes vives aux aplats.
 */
:root {
  color-scheme: light;
  /* marque */
  --ink: #152b3a; --ink-soft: #1e3c4f; --ink-line: #2c5366;
  --cyan: #31bdf2; --cyan-deep: #0a7ca8; --cyan-dark: #086888; --cyan-wash: #e9f7fe;
  --coral: #ee7f75; --coral-deep: #c9483c; --coral-wash: #fdeeec;
  /* surfaces, de la plus haute a la plus enfoncee */
  --bg: #f4f7fa; --panel: #ffffff; --panel-2: #fafafc; --soft: #f6f7fc;
  --sunken: #eceef5; --sunken-2: #e2e5ef; --track: #e8eaf2;
  --hover: #f3f4f6; --chip: #e7edf3; --chip-hover: #dbe4ec;
  --text: #16232e; --muted: #63768a; --faint: #9aa1b1;
  --border: #dfe6ee; --border-soft: #cbe9f8;
  /* roles */
  --primary: var(--cyan-deep); --primary-dark: var(--cyan-dark);
  --on-primary: #fff;
  --accent: var(--coral-deep);
  --danger: #dc2626; --ok: #16a34a; --warn: #d97706;
  /* pastilles d'etat : fond puis texte, toujours par paire */
  --ok-bg: #ecfdf5; --ok-fg: #065f46;
  --err-bg: #fef2f2; --err-fg: #991b1b;
  --warn-bg: #fffbeb; --warn-fg: #92400e;
  --age-ok-bg: #dcfce7; --age-ok-fg: #166534;
  --age-warn-bg: #fef9c3; --age-warn-fg: #854d0e;
  --age-late-bg: #ffedd5; --age-late-fg: #9a3412;
  --age-crit-bg: #fee2e2; --age-crit-fg: #991b1b;
  --badge-bg: #fef3c7; --badge-fg: #92400e;
  --danger-zone-bg: #fff5f5; --danger-zone-line: #fecaca;
  /* bouton Google : couleurs de charte, elles ne suivent pas la palette */
  --google-bg: #fff; --google-fg: #3c4043; --google-line: #dadce0;
  --google-bg-hover: #f8f9fa; --google-line-hover: #c6cacd;
  /* remplissage d'un creneau, du vide au complet */
  --fill-1-bg: #d4f5df; --fill-1-fg: #14532d; --fill-1-line: #4ca772;
  --fill-2-bg: #eaf6c4; --fill-2-fg: #3f4d10; --fill-2-line: #a3b545;
  --fill-3-bg: #fdf0b8; --fill-3-fg: #6b4b06; --fill-3-line: #d9a92a;
  --fill-4-bg: #ffe0bd; --fill-4-fg: #8a3d05; --fill-4-line: #e08a3c;
  --fill-5-bg: #ffd4d0; --fill-5-fg: #8c1d18; --fill-5-line: #d75d54;
  --bar-fill: #0a7ca8;

  --radius: 10px; --shadow: 0 1px 3px rgba(21, 43, 58, .09);
  --shadow-lift: 0 6px 16px rgba(21, 43, 58, .13);
  --shadow-drop: 0 8px 24px rgba(16, 24, 40, .18);
  --focus-ring: 0 0 0 3px rgba(49, 189, 242, .28);
  font-size: 15px;
}

/* ---------- mode sombre ----------
 * Un seul bloc, accroche a [data-theme="dark"] pose sur <html>. Le serveur
 * ecrit la preference memorisee (cookie `srh_theme`, valeur du compte), et
 * `theme.js`, charge en tete de page donc avant le premier rendu, resout le
 * cas « auto » en interrogeant le systeme. Passer par une media query
 * obligerait a ecrire deux fois les memes trente variables, avec la
 * certitude qu'elles divergeront un jour.
 *
 * Le cyan profond sert au texte sur blanc ; sur un fond sombre il tombe a
 * 2:1 et devient illisible. En sombre, c'est donc le cyan vif de Nimbus qui
 * prend le role --primary, et le texte pose dessus redevient sombre : d'ou
 * --on-primary, qui existe pour ne pas avoir a chercher un par un les
 * « color: #fff » poses sur un aplat de marque.
 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #0b151c; --ink-soft: #16242f; --ink-line: #294050;
  --cyan: #31bdf2; --cyan-deep: #45c6f5; --cyan-dark: #6ed3f7; --cyan-wash: #12303e;
  --coral: #ee7f75; --coral-deep: #f0938a; --coral-wash: #3a221f;
  --bg: #101b23; --panel: #17252f; --panel-2: #1c2c37; --soft: #1a2833;
  --sunken: #13202a; --sunken-2: #22333f; --track: #22333f;
  --hover: #22333f; --chip: #1e2e3a; --chip-hover: #273a48;
  --text: #e3edf4; --muted: #93a8b8; --faint: #6d8394;
  --border: #2a3f4e; --border-soft: #2f5568;
  --primary: var(--cyan); --primary-dark: var(--cyan-dark);
  --on-primary: #04212d;
  --accent: var(--coral);
  --danger: #f87171; --ok: #4ade80; --warn: #fbbf24;
  --ok-bg: #123026; --ok-fg: #7ee2b0;
  --err-bg: #3a1a1c; --err-fg: #fca5a5;
  --warn-bg: #362713; --warn-fg: #fcd34d;
  --age-ok-bg: #12301f; --age-ok-fg: #86efac;
  --age-warn-bg: #33290e; --age-warn-fg: #fde047;
  --age-late-bg: #3a2512; --age-late-fg: #fdba74;
  --age-crit-bg: #3d1a1a; --age-crit-fg: #fca5a5;
  --badge-bg: #3a2c10; --badge-fg: #fcd34d;
  --danger-zone-bg: #2a1618; --danger-zone-line: #5b2b2e;
  --google-bg: #131314; --google-fg: #e3e3e3; --google-line: #8e918f;
  --google-bg-hover: #1e1f20; --google-line-hover: #adb0af;
  --fill-1-bg: #10301f; --fill-1-fg: #8fe3b0; --fill-1-line: #2f6c4b;
  --fill-2-bg: #232f10; --fill-2-fg: #cfe07a; --fill-2-line: #5c6d2a;
  --fill-3-bg: #33290e; --fill-3-fg: #f3d377; --fill-3-line: #7d6320;
  --fill-4-bg: #38240f; --fill-4-fg: #f6bd85; --fill-4-line: #86552a;
  --fill-5-bg: #3a1a18; --fill-5-fg: #f5a9a2; --fill-5-line: #8a4039;
  /* Le texte d'une barre passe par-dessus son remplissage : en sombre il
     est clair, l'aplat doit donc rester fonce, pas s'eclaircir. */
  --bar-fill: #1c5c78;
  /* Sur fond sombre une ombre portee ne se voit pas : c'est le contraste de
     surface qui detache les cartes, renforce par un trait tres discret. */
  --shadow: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-lift: 0 6px 18px rgba(0, 0, 0, .55);
  --shadow-drop: 0 10px 30px rgba(0, 0, 0, .6);
  --focus-ring: 0 0 0 3px rgba(49, 189, 242, .38);
}
/* En sombre, l'ombre seule ne suffit plus a poser une carte sur le fond. */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .userchip,
:root[data-theme="dark"] .pitch-item,
:root[data-theme="dark"] .lien-card,
:root[data-theme="dark"] .kanban-card,
:root[data-theme="dark"] .cal,
:root[data-theme="dark"] .job-card,
:root[data-theme="dark"] .mu-pop,
:root[data-theme="dark"] .mu-queue,
:root[data-theme="dark"] .mu-stat,
:root[data-theme="dark"] .mu-chip,
:root[data-theme="dark"] .rec,
:root[data-theme="dark"] .quick,
:root[data-theme="dark"] .fc,
:root[data-theme="dark"] .table-wrap { border: 1px solid var(--border); }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.4rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }

/* ---------- layout back-office ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 226px; flex-shrink: 0; color: #b9ccd9; position: relative; overflow: hidden;
  background: var(--ink);
  display: flex; flex-direction: column; padding: 1rem .75rem 1.1rem; gap: .12rem;
}
/* Halo cyan en haut de la colonne : la marque se voit avant même de lire.
   Taille en pixels et non en pourcentages : la colonne s'étire sur toute la
   hauteur de la page, donc des pourcentages faisaient grandir le halo avec le
   nombre de lignes du tableau. Passé une certaine longueur, le dégradé
   n'avait plus la place d'atteindre la transparence avant le bord de son
   propre bloc, et se faisait couper net : d'où la couture verticale visible
   dans la colonne sur les longues listes.
   `closest-side` garantit que le cercle s'éteint exactement sur le bord, quoi
   qu'il arrive. */
.sidebar::before {
  content: ""; position: absolute; pointer-events: none;
  top: -150px; left: -130px; width: 430px; height: 430px;
  background: radial-gradient(circle closest-side, rgba(49, 189, 242, .32), transparent);
}
.sidebar > * { position: relative; }
.sidebar .brand { color: #fff; font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em;
                 padding: .3rem .5rem .55rem; display: flex; align-items: center; gap: .55rem; }
.sidebar .brand:hover { text-decoration: none; }
.sidebar .brand img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.sidebar .brand span { line-height: 1.1; }
.sidebar .brand em { display: block; font-style: normal; font-size: .68rem; font-weight: 600;
                     letter-spacing: .09em; text-transform: uppercase; color: var(--cyan); }
.sidebar a {
  color: #b9ccd9; padding: .44rem .6rem; border-radius: 8px; display: flex; align-items: center;
  gap: .55rem; font-size: .92rem; border-left: 3px solid transparent;
}
.sidebar a:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.sidebar a.active { background: rgba(49, 189, 242, .16); color: #fff; font-weight: 600;
                    border-left-color: var(--cyan); }
.sidebar .nav-ico { width: 1.15rem; text-align: center; flex-shrink: 0; font-size: .95rem; }
/* Compteur à droite d'un lien du menu (messages de candidats non lus) */
.sidebar .nav-count { margin-left: auto; background: #c9483c; color: #fff; font-size: .72rem;
                      font-weight: 700; min-width: 1.35rem; padding: .05rem .4rem; border-radius: 999px;
                      text-align: center; }
.sidebar .spacer { flex: 1; min-height: .6rem; }
.sidebar .who { font-size: .8rem; color: #7b93a5; padding: .5rem .6rem 0; word-break: break-all; }
/* Titre de rubrique dans la colonne */
.nav-group { font-size: .66rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
             color: #6f8a9d; padding: .95rem .6rem .3rem; }

/* Bascule entre les modules de la superApp (RH / Musique) */
.module-switch { display: flex; gap: .3rem; background: rgba(0, 0, 0, .26); border-radius: 10px;
                 padding: .22rem; margin: .1rem .1rem .35rem; }
.module-switch a { flex: 1; justify-content: center; padding: .35rem .3rem; font-size: .82rem;
                   border-radius: 8px; border-left: none; color: #9fb6c6; gap: .3rem; }
.module-switch a:hover { background: rgba(255, 255, 255, .08); }
.module-switch a.on { background: #0a7ca8; color: #fff; font-weight: 700; border-left: none; }
.module-switch a.on-music { background: #c9483c; }

/* Nimbus veille en bas de la colonne, discret */
.sidebar-mascot { margin-top: .5rem; padding: 0 .4rem; opacity: .5; }
.sidebar-mascot img { width: 100%; max-width: 130px; display: block; margin: 0 auto; }

.main { flex: 1; padding: 1.4rem 1.8rem; max-width: 1500px; min-width: 0; }

@media (max-width: 800px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sidebar .spacer, .sidebar .who { display: none; }
  .main { padding: 1rem; }
}
@media (max-width: 700px) {
  /* Sur mobile, le tableau garde l'essentiel : nom, poste, statut */
  .hide-sm { display: none !important; }
  .bulkbar { position: static; }
}

/* ---------- composants ---------- */
/* Contours minimaux : l'élévation suffit à détacher la carte du fond */
.card { background: var(--panel); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 1.1rem 1.3rem; margin-bottom: 1.1rem; }
.flash { padding: .65rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .93rem; }
.flash.ok { background: var(--ok-bg); color: var(--ok-fg); }
.flash.err { background: var(--err-bg); color: var(--err-fg); }
.flash.warn { background: var(--warn-bg); color: var(--warn-fg); }

.badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px;
         font-size: .78rem; font-weight: 600; color: #fff; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; }
.chip .dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }

.btn {
  display: inline-block; border: 1px solid var(--border); background: var(--panel); color: var(--text);
  padding: .42rem .9rem; border-radius: 8px; cursor: pointer; font-size: .9rem; font-family: inherit;
}
.btn:hover { background: var(--hover); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-primary); }
.btn-danger:hover { filter: brightness(.9); }
.btn-sm { padding: .2rem .6rem; font-size: .8rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

input[type=text], input[type=email], input[type=date], input[type=time], input[type=number],
input[type=url], select, textarea {
  width: 100%; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: .92rem; background: var(--panel); color: var(--text);
}
textarea { min-height: 90px; resize: vertical; }
label { font-size: .85rem; font-weight: 600; display: block; margin: .6rem 0 .2rem; }
label.inline { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; margin: .3rem 0; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row > div { flex: 1; min-width: 180px; }
.hint { font-size: .8rem; color: var(--muted); margin-top: .15rem; }

/* ---------- tableaux ---------- */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--border);
              border-radius: var(--radius); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border);
         vertical-align: middle; }
th { background: var(--panel-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
     color: var(--muted); white-space: nowrap; }
th a { color: var(--muted); }
tbody tr:hover { background: var(--cyan-wash); }
tr.clickable { cursor: pointer; }
td.num { text-align: right; }

.toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar input[type=text] { max-width: 260px; }
.toolbar select { width: auto; }

.pagination { display: flex; gap: .4rem; align-items: center; justify-content: flex-end;
              margin-top: .8rem; font-size: .88rem; flex-wrap: wrap; }
.pagination .btn { padding: .25rem .7rem; }

/* barre d'actions de masse */
.bulkbar {
  position: sticky; bottom: 12px; display: none; align-items: center; gap: .7rem;
  background: var(--ink); color: #fff; border-radius: 12px; padding: .6rem 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); margin-top: 1rem; flex-wrap: wrap;
}
.bulkbar.visible { display: flex; }
.bulkbar select { width: auto; }

/* ---------- historique / timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: .5rem 0 .5rem 1.2rem; border-left: 2px solid var(--border);
               margin-left: .4rem; position: relative; font-size: .9rem; }
.timeline li::before {
  content: ""; width: .55rem; height: .55rem; background: var(--primary);
  border-radius: 50%; position: absolute; left: -.36rem; top: .95rem;
}
.timeline .when { color: var(--muted); font-size: .78rem; }
/* Les détails sont repliés par défaut (bouton « Tout afficher ») et, une fois
   dépliés, restent en retrait pour ne pas se confondre avec le parcours. */
.timeline li.minor { display: none; }
.timeline.show-all li.minor { display: block; color: var(--muted); font-size: .82rem; padding-top: .3rem; padding-bottom: .3rem; }
.timeline.show-all li.minor::before { background: var(--border); width: .4rem; height: .4rem; left: -.29rem; top: .7rem; }
.timeline li.status::before { background: var(--cyan-deep); }

/* ---------- onglets ---------- */
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem;
        border-bottom: 1px solid var(--border); }
.tabs a { padding: .45rem .9rem; border-radius: 8px 8px 0 0; color: var(--muted); font-size: .92rem; }
.tabs a.active { background: var(--panel); border: 1px solid var(--border); border-bottom-color: var(--panel);
                 color: var(--text); font-weight: 600; margin-bottom: -1px; }
.tabs a:hover { text-decoration: none; color: var(--text); }

/* ---------- pages publiques ---------- */
.public-wrap { max-width: 660px; margin: 0 auto; padding: 2.2rem 1.2rem 3rem; }
.public-header { text-align: center; margin-bottom: 1.6rem; }
.public-header .logo { font-size: 1.7rem; font-weight: 800; color: var(--primary); }
.public-footer { text-align: center; color: var(--muted); font-size: .8rem; margin-top: 2.5rem; }
.slot-list { display: grid; gap: .5rem; }
.slot-option { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--border);
               border-radius: 10px; padding: .7rem .9rem; background: var(--panel); cursor: pointer; }
.slot-option:hover { border-color: var(--primary); }
.job-card { display: block; border-radius: var(--radius); box-shadow: var(--shadow);
            background: var(--panel); padding: 1rem 1.2rem; margin-bottom: .8rem; color: var(--text); }
.job-card:hover { text-decoration: none; box-shadow: var(--shadow-lift); }
.big-ok { font-size: 2.6rem; text-align: center; }

/* ---------- onboarding ---------- */
.progress-track { height: 10px; background: var(--track); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary); border-radius: 999px;
                 transition: width .6s cubic-bezier(.22,1,.36,1); }
.check-toggle {
  width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--border);
  background: var(--panel); cursor: pointer; font-size: 1rem; line-height: 1; color: var(--on-primary);
  transition: background .25s, border-color .25s, transform .15s;
}
.check-toggle:hover { transform: scale(1.1); border-color: var(--primary); }
.check-toggle.checked { background: var(--ok); border-color: var(--ok); }
.onboarding-step.done { opacity: .75; }
.onboarding-step.done h2 { text-decoration: line-through; text-decoration-thickness: 1px; }

/* ---------- animations & micro-interactions ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .card, .job-card, .flash { animation: fade-up .35s ease-out both; }
  .card:nth-of-type(2) { animation-delay: .05s; }
  .card:nth-of-type(3) { animation-delay: .1s; }
  .card:nth-of-type(4) { animation-delay: .15s; }
}
.btn { transition: background .18s, border-color .18s, transform .12s; }
.btn:active { transform: translateY(1px); }
tbody tr { transition: background .15s; }
.sidebar a { transition: background .18s, color .18s; }
.job-card { transition: border-color .18s, box-shadow .18s, transform .18s; }
.job-card:hover { transform: translateY(-2px); }
.slot-option { transition: border-color .18s, box-shadow .18s; }
input, select, textarea { transition: border-color .18s, box-shadow .18s; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: var(--focus-ring);
}

/* Tri des colonnes : icône discrète, plus marquée quand actif */
.sort-ico { font-size: .72rem; opacity: .35; margin-left: .1rem; }
a.sort-link { color: var(--muted); }
a.sort-link.sorted { color: var(--text); font-weight: 700; }
a.sort-link.sorted .sort-ico { opacity: 1; color: var(--primary); }
a.sort-link:hover .sort-ico { opacity: .8; }

/* Pastille « mails du candidat en attente » */
.mail-badge {
  display: inline-block; background: var(--badge-bg); color: var(--badge-fg); border-radius: 999px;
  padding: .05rem .45rem; font-size: .75rem; font-weight: 700; margin-left: .25rem;
}

/* Guide du recruteur : étapes numérotées */
.guide-step { display: flex; gap: .9rem; margin: 1.1rem 0; align-items: flex-start; }
.guide-num {
  flex-shrink: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.guide-step h3 { margin: .15rem 0 .3rem; }
.guide-box { background: var(--soft); border-radius: 10px; padding: .9rem 1.1rem; margin: 1rem 0; }

/* Indicateurs d'âge des candidatures (timer par étape) */
.age { display: inline-block; padding: .1rem .5rem; border-radius: 999px;
       font-size: .78rem; font-weight: 700; white-space: nowrap; }
.age-ok { background: var(--age-ok-bg); color: var(--age-ok-fg); }
.age-warn { background: var(--age-warn-bg); color: var(--age-warn-fg); }
.age-late { background: var(--age-late-bg); color: var(--age-late-fg); }
.age-crit { background: var(--age-crit-bg); color: var(--age-crit-fg); }

/* Filtre déroulant multi-sélection (métiers) */
.filter-drop { position: relative; }
.filter-drop summary {
  list-style: none; cursor: pointer; padding: .45rem .8rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel); font-size: .9rem; white-space: nowrap;
}
.filter-drop summary::-webkit-details-marker { display: none; }
.filter-drop[open] summary { border-color: var(--primary); }
.filter-drop-panel {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 230px;
  max-height: 300px; overflow-y: auto; background: var(--panel); border-radius: 10px;
  box-shadow: var(--shadow-drop); padding: .6rem .9rem;
}
.filter-drop-wide { min-width: 270px; max-height: 420px; }
.filter-drop-group { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                     color: var(--muted); margin: .55rem 0 .1rem; }

.mono { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.danger-zone { border: 1px solid var(--danger-zone-line); background: var(--danger-zone-bg); }
details.box { border: 1px solid var(--border); border-radius: 8px; padding: .5rem .8rem;
              margin: .5rem 0; background: var(--panel); }
details.box summary { cursor: pointer; font-weight: 600; font-size: .9rem; }

/* ---------- kanban de suivi (une colonne par statut) ---------- */
.kanban { display: flex; gap: .75rem; align-items: flex-start; overflow-x: auto;
          padding-bottom: .9rem; }
.kanban-col { flex: 0 0 232px; background: var(--sunken); border-radius: var(--radius);
              display: flex; flex-direction: column; max-height: 74vh; }
.kanban-col-final { background: var(--sunken-2); }
.kanban-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem;
               border-radius: var(--radius) var(--radius) 0 0; }
/* La couleur du statut se lit sur une pastille, plus sur un liseret. */
.kanban-dot { width: .6rem; height: .6rem; border-radius: 50%; flex-shrink: 0; }
.kanban-title { font-size: .78rem; font-weight: 700; text-transform: uppercase;
                letter-spacing: .03em; color: var(--muted); }
.kanban-count { margin-left: auto; background: var(--panel); border-radius: 999px;
                padding: 0 .45rem; font-size: .76rem; font-weight: 700; color: var(--muted); }
.kanban-drop { flex: 1; overflow-y: auto; min-height: 84px; padding: 0 .5rem .6rem;
               display: flex; flex-direction: column; gap: .45rem; }
.kanban-drop:not(:has(.kanban-card))::after {
  content: "Colonne vide"; display: block; text-align: center; color: var(--faint);
  font-size: .78rem; padding: 1.3rem .4rem; }
.kanban-drop.over { background: rgba(49, 189, 242, .16); border-radius: 8px; }
.kanban-card { background: var(--panel); border-radius: 8px; box-shadow: var(--shadow);
               padding: .55rem .65rem; cursor: grab; }
.kanban-card:hover { box-shadow: 0 2px 8px rgba(16, 24, 40, .14); }
.kanban-card.dragging { opacity: .45; }
.kanban-card.saving { opacity: .55; }
.kanban-name { display: block; font-weight: 600; font-size: .9rem; color: var(--text);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-name:hover { color: var(--primary); text-decoration: none; }
.kanban-sub { margin: .1rem 0 .45rem; font-size: .79rem; color: var(--muted);
              display: flex; align-items: center; gap: .3rem;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-foot { display: flex; align-items: center; gap: .35rem; font-size: .78rem; }
.kanban-resp { color: var(--muted); font-size: .74rem; max-width: 94px;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.age-none { background: var(--track); color: var(--muted); }

/* ---------- fiche candidat : visionneuse CV et portfolio ---------- */
/* Haut de la fiche : ce qu'on remplit à gauche, le document à droite.
   Seules quatre cartes restent ici, pour que la colonne de gauche fasse à peu
   près la hauteur de la visionneuse. Tout le reste, qui se lit au lieu de se
   remplir, part dans la grille pleine largeur juste en dessous : empilé ici,
   ça laissait la moitié droite de la page vide sur des milliers de pixels. */
.detail-cols { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-start; }
.detail-main { flex: 1 1 380px; min-width: 320px; }
.detail-side { flex: 1.1 1 420px; min-width: 320px; }

/* Historique, mails, créneaux, autres candidatures, liens candidat.
   Deux colonnes dès qu'il y a la place, une seule en dessous : trois
   colonnes écraseraient le tableau des mails. */
.detail-grid { display: grid; gap: 1.2rem; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 1050px) {
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* La visionneuse suit le défilement, mais sans conteneur défilant à elle :
   un scroll imbriqué dans la page rend la fiche impossible à parcourir. */
.doc-viewer { position: sticky; top: 1rem; padding: .75rem .85rem .9rem; }
.doc-tabs { display: flex; align-items: center; gap: .35rem; margin-bottom: .6rem; }
.doc-tab { border: none; background: var(--sunken); color: var(--muted); font-family: inherit;
           font-size: .88rem; font-weight: 600; padding: .38rem .95rem; border-radius: 8px;
           cursor: pointer; transition: background .18s, color .18s; }
.doc-tab:hover { background: var(--sunken-2); color: var(--text); }
.doc-tab-active { background: var(--primary); color: var(--on-primary); }
.doc-pane { display: none; }
.doc-pane-active { display: block; }
.doc-frame { width: 100%; height: min(58vh, 620px); border: 1px solid var(--border);
             border-radius: 8px; background: #fff; display: block; }
.doc-actions { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }
.doc-empty { text-align: center; color: var(--muted); font-size: .88rem;
             background: var(--soft); border-radius: 8px; padding: 1.7rem 1.1rem; }
.doc-empty p { margin: .3rem 0; }
.doc-links { display: grid; gap: .4rem; margin-bottom: .6rem; }
.doc-link { display: block; background: var(--soft); border-radius: 8px; padding: .5rem .7rem;
            font-size: .88rem; color: var(--text); }
.doc-link:hover { background: var(--sunken); text-decoration: none; }
.doc-link-url { display: block; color: var(--muted); font-size: .75rem;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-viewer.doc-expanded { position: fixed; inset: 1.2rem; z-index: 80; margin: 0;
                           overflow-y: auto; box-shadow: 0 18px 50px rgba(16, 24, 40, .35); }
.doc-viewer.doc-expanded .doc-frame { height: calc(100vh - 11rem); }
body.doc-expanded-open { overflow: hidden; }

@media (max-width: 800px) {
  .doc-viewer { position: static; }
  .doc-frame { height: 70vh; }
  .kanban-col { max-height: none; }
}

/* ---------- jauge de progression (tableau des candidatures) ---------- */
.gauge-cell { min-width: 116px; }
.gauge { display: inline-flex; gap: 2px; width: 104px; vertical-align: middle; }
.gauge-seg { flex: 1; height: 9px; background: var(--track); border-radius: 2px;
             transition: background .35s ease; }
.gauge-seg:first-child { border-radius: 999px 2px 2px 999px; }
.gauge-seg:last-child { border-radius: 2px 999px 999px 2px; }
.gauge-lg { width: 100%; max-width: 420px; gap: 3px; }
.gauge-lg .gauge-seg { height: 14px; }
.gauge-arrete .gauge-seg { opacity: .8; }

.page-footer-actions { display: flex; align-items: center; gap: .8rem;
                       margin: 1.2rem 0 3.5rem; flex-wrap: wrap; }

/* ---------- calendrier des présentations ---------- */
.cal-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
               margin-bottom: .8rem; }
.cal-nav { display: flex; gap: .4rem; }
.cal-title { margin: 0; flex: 1; text-transform: capitalize; }
.cal { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
       overflow: hidden; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-head span { padding: .5rem .6rem; font-size: .75rem; font-weight: 600;
                 color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cal-grid { gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.cal-day { background: var(--panel); min-height: 92px; padding: .35rem .4rem;
           display: flex; flex-direction: column; gap: .25rem; cursor: pointer; }
.cal-day:hover { background: var(--panel-2); }
.cal-day-num { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-out { background: var(--panel-2); }
.cal-out .cal-day-num { opacity: .45; }
.cal-today { box-shadow: inset 0 0 0 2px var(--primary); }
.cal-today .cal-day-num { color: var(--primary); font-weight: 700; }
.cal-picked { background: var(--cyan-wash); }
.cal-slot { display: flex; align-items: baseline; justify-content: space-between; gap: .3rem;
            background: var(--primary); color: var(--on-primary); border-radius: 6px;
            padding: .18rem .4rem; font-size: .76rem; line-height: 1.3; }
.cal-slot:hover { background: var(--primary-dark); text-decoration: none; }
.cal-slot-count { font-size: .7rem; opacity: .85; font-variant-numeric: tabular-nums; }
.cal-slot-full { background: #6b7280; color: #fff; }
.upcoming-row { margin: .5rem 0; }

/* ---------- graphiques, dessinés en CSS, aucune dépendance ---------- */
.stats-cols { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: flex-start; }
.stats-cols > .card { flex: 1 1 380px; min-width: 300px; }

.hero-block { display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
.hero-label { margin: 0; font-size: .82rem; color: var(--muted); }
.hero-figure { margin: .1rem 0 .2rem; font-size: 3.2rem; font-weight: 600; line-height: 1;
               color: var(--text); }
.hero-unit { font-size: 1.4rem; font-weight: 500; color: var(--muted); margin-left: .15rem; }
.kpi-row { display: flex; gap: 1.6rem; flex-wrap: wrap; flex: 1; }
.kpi { min-width: 130px; }
.kpi-label { margin: 0; font-size: .78rem; color: var(--muted); max-width: 12rem; }
.kpi-value { margin: .1rem 0 0; font-size: 1.5rem; font-weight: 600; }
.kpi p.small { margin: .1rem 0 0; }

.chart { display: grid; gap: .45rem; }
.bar-row { display: grid; grid-template-columns: 11rem 1fr 11rem; gap: .7rem;
           align-items: center; }
.bar-label { font-size: .85rem; }
.bar-track { position: relative; display: flex; align-items: center; gap: .5rem;
             background: var(--track); border-radius: 4px; min-height: 20px; }
.bar-fill { display: block; height: 20px; background: var(--primary);
            border-radius: 0 4px 4px 0; min-width: 2px;
            transition: width .5s cubic-bezier(.22, 1, .36, 1); }
.bar-stack { display: flex; height: 20px; gap: 2px; min-width: 2px; }
.bar-seg { display: block; height: 100%; }
.bar-seg-last { border-radius: 0 4px 4px 0; }
.bar-value { font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-note { font-size: .78rem; color: var(--muted); text-align: right; }

.chart-legend { display: flex; gap: 1rem; margin-bottom: .7rem; font-size: .8rem;
                color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.legend-swatch { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }


.meter { display: inline-block; width: 100%; min-width: 60px; height: 8px;
         background: var(--track); border-radius: 999px; overflow: hidden; vertical-align: middle; }
.meter-sm { width: 46px; }
.meter-fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

/* ---------- guide en deux parcours ---------- */
.guide-split { display: flex; gap: 1.2rem; align-items: flex-start; }
.guide-track { flex: 1 1 0; min-width: 0; }
.guide-track-title { margin: 0 0 .6rem; font-size: 1.25rem; padding-bottom: .35rem;
                     border-bottom: 3px solid var(--border); }
.guide-track-benevole { border-bottom-color: var(--primary); }
.guide-track-stagiaire { border-bottom-color: var(--warn); }

@media (max-width: 900px) {
  .guide-split { flex-direction: column; }
  .bar-row { grid-template-columns: 8rem 1fr; }
  .bar-note { grid-column: 2; text-align: left; }
  .cal-day { min-height: 70px; }
}

/* ---------- bouton Google (charte de marque : fond clair, logo à gauche) ---------- */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%;
  background: var(--google-bg); color: var(--google-fg); border: 1px solid var(--google-line); border-radius: 8px;
  padding: .65rem 1rem; font-size: .95rem; font-weight: 600;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.btn-google:hover { background: var(--google-bg-hover); border-color: var(--google-line-hover); text-decoration: none;
                    box-shadow: var(--shadow); }
.btn-google:active { transform: translateY(1px); }
.google-g { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- barre du haut, identité de la personne connectée ---------- */
.topbar { display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
          margin-bottom: 1.1rem; flex-wrap: wrap; }
.topbar-note { margin-right: auto; font-size: .8rem; background: var(--warn-bg); color: var(--warn-fg);
               border-radius: 999px; padding: .3rem .85rem; }
.userchip { display: flex; align-items: center; gap: .6rem; background: var(--panel);
            border-radius: 999px; padding: .3rem .4rem; box-shadow: var(--shadow); }
.userchip-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
                  display: block; flex-shrink: 0; }
.userchip-initials { display: flex; align-items: center; justify-content: center;
                     background: var(--primary); color: var(--on-primary); font-weight: 700;
                     font-size: .82rem; letter-spacing: .02em; }
.userchip-text { display: flex; flex-direction: column; line-height: 1.15; }
.userchip-hello { font-size: .68rem; color: var(--muted); }
.userchip-name { font-size: .88rem; }
.userchip-out { font-size: .78rem; color: var(--muted); padding: .35rem .75rem;
                border-radius: 999px; white-space: nowrap; }
.userchip-out:hover { background: var(--hover); color: var(--text); text-decoration: none; }

@media (max-width: 700px) {
  .topbar-note { display: none; }
  .userchip-hello { display: none; }
}
.slot-option-picked { border-color: var(--cyan); background: var(--cyan-wash); box-shadow: 0 0 0 1px var(--cyan-deep); }

/* ---------- pages publiques : mise en avant visuelle ---------- */
.public-wrap { max-width: 760px; }
.brand-mark { display: inline-flex; align-items: center; gap: .6rem; color: var(--text); }
.brand-mark:hover { text-decoration: none; }
.brand-mark img { width: 46px; height: 46px; object-fit: contain; display: block; }
.brand-name { font-size: 1.65rem; font-weight: 800; letter-spacing: -.01em; color: var(--primary); }

.hero { margin: 0 0 1.5rem; }
.hero img { width: 100%; aspect-ratio: 2 / 1; height: auto; object-fit: cover;
            object-position: center 38%; border-radius: 16px; display: block; }
.hero-short img { aspect-ratio: 5 / 2; }
.hero-title { font-size: 1.85rem; text-align: center; margin: 0 0 .5rem; letter-spacing: -.01em; }
.lede { font-size: 1.02rem; color: var(--muted); text-align: center; max-width: 54ch;
        margin: 0 auto 1.5rem; }

.facts { display: flex; justify-content: center; gap: 2.2rem; flex-wrap: wrap;
         margin: 0 0 2rem; font-size: .88rem; color: var(--muted); }
.fact strong { display: inline-block; color: var(--text); font-size: 1.15rem; font-weight: 700; }

.section-title { font-size: 1.1rem; margin: 2.2rem 0 .9rem; }

.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.showcase-duo { grid-template-columns: repeat(2, 1fr); }
.showcase figure { margin: 0; }
.showcase img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover;
                border-radius: 12px; display: block; }
.showcase figcaption { font-size: .78rem; color: var(--muted); padding-top: .45rem; line-height: 1.35; }

.pitch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pitch-item { background: var(--panel); border-radius: 12px; padding: 1rem 1.1rem;
              box-shadow: var(--shadow); }
.pitch-item p { margin: .5rem 0 0; font-size: .88rem; line-height: 1.45; }
.pitch-num { display: inline-flex; align-items: center; justify-content: center;
             width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--primary);
             color: var(--on-primary); font-weight: 700; font-size: .85rem; }

.reassure { font-size: .8rem; color: var(--muted); text-align: center; max-width: 56ch;
            margin: 2rem auto 0; line-height: 1.5; }

.public-footer { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; }

@media (max-width: 640px) {
  .showcase-grid, .showcase-duo, .pitch-grid { grid-template-columns: 1fr; }
  .hero img { aspect-ratio: 16 / 10; }
  .hero-title { font-size: 1.4rem; }
  .job-title-lg { font-size: 1.35rem; }
}

/* ---------- Nimbus en fond, de part et d'autre du contenu ---------- */
.nimbus-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.nimbus-bg img { position: absolute; width: 340px; opacity: .16; }
.nimbus-left { left: -70px; top: 14vh; transform: rotate(-9deg); }
.nimbus-right { right: -70px; bottom: 8vh; transform: rotate(9deg) scaleX(-1); }
.public-wrap { position: relative; z-index: 1; }

/* Sous 1180px la place manque : les mascottes passeraient sous le contenu. */
@media (max-width: 1180px) { .nimbus-bg { display: none; } }

/* ---------- titres d'annonce : le type d'engagement monte dans le titre ---------- */
.job-title { font-size: 1.12rem; font-weight: 700; display: block; margin-bottom: .35rem; }
.job-title-lg { font-size: 1.7rem; line-height: 1.25; }
.job-sep { color: var(--muted); font-weight: 400; }
.job-engagement { color: var(--text); font-weight: 700; }

/* ---------- page de connexion ---------- */
.login-intro { font-size: .92rem; margin: 0 0 .9rem; text-align: center; }
/* Porte de secours : presente, mais discrete. Ce n'est pas une information
   dont un membre a besoin, seulement un depannage. */
/* ---------- lignes cliquables : la ligne EST le bouton d'édition ----------
 * Un bouton « Éditer » posé au bout d'une ligne déjà survolée en entier est
 * une cible minuscule pour une action qui vaut pour toute la ligne. Partout où
 * cliquer ouvre l'édition, la ligne porte data-href et affiche un chevron ;
 * les vraies actions (supprimer, dupliquer, basculer) gardent leur bouton,
 * parce qu'elles ne sont pas des éditions.
 */
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--cyan-wash); }
tr.clickable:focus-visible { outline: 2px solid var(--cyan-deep); outline-offset: -2px; }
td.row-go { width: 2rem; text-align: right; color: transparent; font-weight: 700;
            transition: color .15s, transform .15s; }
tr.clickable:hover td.row-go, tr.clickable:focus-visible td.row-go {
  color: var(--cyan-deep); transform: translateX(2px); }
.row-actions { white-space: nowrap; display: flex; gap: .35rem; justify-content: flex-end; }

/* Rangée éditable sur place (référentiels, étapes d'onboarding) */
.inline-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
              padding: .4rem .55rem; border-radius: 8px; border: 1px solid transparent; }
.inline-row:hover, .inline-row:focus-within { background: var(--cyan-wash);
                                              border-color: var(--border-soft); }
.inline-row .save { opacity: 0; transition: opacity .15s; }
.inline-row:hover .save, .inline-row:focus-within .save { opacity: 1; }

/* ---------- accueil : le choix du module ---------- */
.hub-wrap { min-height: 100vh; display: flex; flex-direction: column;
            align-items: center; justify-content: center; padding: 2rem 1.2rem 3rem;
            position: relative; z-index: 1; }
.hub-head { text-align: center; margin-bottom: 2rem; }
.hub-head img { width: 96px; height: 96px; object-fit: contain; }
.hub-title { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; margin: .5rem 0 .2rem; }
.hub-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 1.2rem; }
.hub-card { position: relative; overflow: hidden; display: flex; flex-direction: column;
            justify-content: flex-end; aspect-ratio: 1 / 1; padding: 1.3rem;
            border-radius: 20px; color: #fff; box-shadow: 0 10px 30px rgba(21, 43, 58, .18); }
.hub-card:hover { text-decoration: none; transform: translateY(-4px);
                  box-shadow: 0 16px 40px rgba(21, 43, 58, .26); }
.hub-card { transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s; }
.hub-rh { background: linear-gradient(155deg, #2aa9dc, #0a7ca8 55%, #075a7a); }
.hub-music { background: linear-gradient(155deg, #f19a92, #c9483c 55%, #8f2f26); }
.hub-card-ico { position: absolute; top: -.6rem; right: -.6rem; font-size: 6.5rem;
                opacity: .22; line-height: 1; pointer-events: none; }
.hub-card h2 { margin: 0; font-size: 1.35rem; color: #fff; }
.hub-card p { margin: .3rem 0 0; font-size: .87rem; line-height: 1.4; color: rgba(255, 255, 255, .88); }
.hub-foot { margin-top: 2rem; font-size: .82rem; color: var(--muted); text-align: center; }
@media (max-width: 620px) { .hub-cards { grid-template-columns: minmax(0, 1fr); } }

/* Cartes entièrement cliquables (créneaux, cartes kanban) : même règle que les
 * lignes de tableau, appliquée à autre chose qu'un <tr>. */
.clickable { cursor: pointer; }
.card-clickable { transition: border-color .18s, box-shadow .18s, transform .18s; }
.card-clickable:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(21, 43, 58, .13); }

/* ---------- navigation publique ---------- */
/* Les offres restent l'entree principale : la nav eclaire le reste du
   parcours candidat sans prendre le pas sur la liste des postes. */
.public-nav { display: flex; justify-content: center; gap: .3rem; flex-wrap: wrap;
              margin: 0 0 1.6rem; }
.public-nav a { font-size: .84rem; color: var(--muted); padding: .38rem .7rem;
                border-radius: 999px; text-decoration: none; white-space: nowrap;
                transition: background .15s, color .15s; }
.public-nav a:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.public-nav a.on { background: var(--primary); color: var(--on-primary); font-weight: 600; }

/* ---------- filtre par pole (vitrine publique) ---------- */
/* Purement visuel et sans rechargement : la liste est deja groupee par pole,
   le filtre ne fait que masquer ce qui ne correspond pas. */
.filtres { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
/* Pastilles sans contour : c'est l'aplat qui les detache du fond, pas un
   trait. Le fond legerement teinte suffit a montrer qu'elles se cliquent. */
.filtre { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
          font-size: .82rem; font-family: inherit; color: var(--muted);
          background: var(--chip); border: 0; border-radius: 999px; padding: .38rem .8rem;
          transition: color .15s, background .15s; }
.filtre:hover { background: var(--chip-hover); color: var(--text); }
.filtre.on { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.filtre .dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.filtre-n { font-size: .74rem; opacity: .7; font-variant-numeric: tabular-nums; }
.filtre-vide { text-align: center; color: var(--muted); font-size: .88rem; margin: 1rem 0; }

/* ---------- listes des fiches de poste ---------- */
.liste { margin: .5rem 0 1.1rem; padding-left: 1.15rem; }
.liste li { margin: .3rem 0; line-height: 1.5; }

/* ---------- pages de presentation (forces, stages, devenir) ---------- */
.bloc { margin-bottom: 2rem; }
.bloc-titre { font-size: .98rem; margin: 1.3rem 0 .4rem; }

.lien-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.lien-card { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem;
             background: var(--panel); border-radius: 12px; text-decoration: none;
             color: inherit; box-shadow: var(--shadow);
             transition: box-shadow .18s, transform .18s; }
.lien-card:hover { box-shadow: var(--shadow-lift);
                   transform: translateY(-2px); text-decoration: none; }
.lien-card strong { font-size: .95rem; }
.lien-card span { font-size: .82rem; color: var(--muted); line-height: 1.45; }

.citation { margin: 1.2rem 0; padding: .9rem 1.1rem; background: var(--panel);
            border-radius: 12px; }
.citation p { margin: 0; font-style: italic; line-height: 1.55; }
.citation footer { margin-top: .5rem; font-size: .82rem; color: var(--muted);
                   font-style: normal; }

.etape { margin-bottom: 2.2rem; }
.etape-titre { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem;
               margin: 0 0 .5rem; }
.etape-meta { font-size: .84rem; color: var(--muted); margin: 0 0 .7rem; }
.etape-note { font-size: .86rem; color: var(--muted); background: var(--panel);
              border-radius: 10px; padding: .7rem .9rem; }

.showcase-links { font-size: .84rem; color: var(--muted); margin-top: .9rem;
                  line-height: 1.7; }
.job-meta { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.job-resume { font-size: 1rem; line-height: 1.6; }
.welcome { margin: 2.4rem 0; }
.welcome p { line-height: 1.6; }
.cta-bas { text-align: center; margin: 2.2rem 0 1rem; }

@media (max-width: 640px) {
  .lien-grid { grid-template-columns: 1fr; }
  .public-nav { gap: .2rem; }
  .public-nav a { font-size: .78rem; padding: .32rem .55rem; }
}

/* `.job-card` est en display:block : sans cette regle, l'attribut hidden pose
   par le filtre serait ignore (une regle auteur bat le [hidden] du navigateur). */
.job-card[hidden] { display: none; }

/* ---------- illustrations reprises de la plateforme de benevolat ---------- */
/* Les visuels d'origine portaient une bonne part du propos : chaque section
   garde le sien. Les sources sont petites (300 px de large pour certaines),
   d'ou des vignettes contenues plutot que des bandeaux pleine largeur. */
/* Ce sont des illustrations plates sur fond blanc, pas des photos : pas de
   recadrage, pas de coins arrondis, et surtout jamais d'agrandissement.
   Comme sur le site d'origine, l'illustration se cale dans la marge gauche et
   le texte l'enveloppe. Centree et large, elle coupait la lecture en deux et
   pesait plus lourd que le paragraphe qu'elle accompagne. */
.illu { float: left; width: 260px; max-width: 42%; height: auto;
        margin: .3rem 1.4rem .8rem 0; }

/* Un flottant ne rallonge pas son parent : sans ces reprises, le titre ou la
   liste qui suit remonterait le long de l'image, et la section suivante
   chevaucherait la precedente. */
.bloc, .welcome { overflow: hidden; }
.section-title, .bloc-titre, .liste, .pitch-grid, .cta-bas { clear: both; }

/* Sous 560 px il ne reste que quelques mots de large a cote de l'image :
   l'habillage devient illisible, l'illustration redevient un bloc centre. */
@media (max-width: 560px) {
  .illu { float: none; width: auto; max-width: 100%; max-height: 240px;
          margin: .7rem auto 1.2rem; }
}

/* Dans une carte, l'illustration est contenue a hauteur fixe : les visuels
   n'ont pas tous le meme format et doivent s'aligner. */
.vignette { display: block; width: 100%; height: 96px; object-fit: contain;
            object-position: center; margin-bottom: .8rem; }

/* Portrait rond d'un temoignage, a cote de sa citation. */
.citation { display: flex; gap: 1rem; align-items: flex-start; }
.citation-avatar { width: 68px; height: 68px; border-radius: 50%; object-fit: cover;
                   flex-shrink: 0; }
.citation-texte { min-width: 0; }
/* Les deux reperes d'une etape sont deux blocs espaces, pas une ligne
   ponctuee d'un separateur decoratif. */
.etape-meta { display: flex; gap: 1.4rem; flex-wrap: wrap; }
/* Liens de bas de page : des reperes de navigation, espaces. */
.reassure { display: flex; justify-content: center; gap: 1.4rem; flex-wrap: wrap; }
/* Citation sans portrait : pas de rangee flex a alimenter. */
.citation-seule { display: block; }

/* ---------- albums dans la colonne de gauche (module musique) ---------- */
/* Un titre d'album peut etre long : il se coupe plutot que de pousser la
   colonne. La pastille reprend la teinte de l'album, comme sur sa page. */
.nav-album { font-size: .86rem; }
.nav-album span:not(.nav-album-dot), .nav-album { overflow: hidden; text-overflow: ellipsis;
                                                  white-space: nowrap; }
.nav-album-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block;
                 flex-shrink: 0; }

/* ---------- bascule d'apparence, dans la barre du haut ----------
 * Trois états et non deux : « auto » n'est pas une troisième couleur, c'est
 * le refus de choisir à la place du système. Sans lui, une personne dont
 * l'ordinateur passe en sombre le soir devrait revenir cliquer ici.
 * Le groupe est caché sous 700 px, où la barre n'a déjà plus la place
 * d'afficher la note de sandbox ni le « Bienvenue ».
 */
.theme-switch { display: inline-flex; gap: .15rem; background: var(--sunken);
                border-radius: 999px; padding: .18rem; }
.theme-switch button {
  border: none; background: none; font-family: inherit; font-size: .76rem;
  color: var(--muted); padding: .28rem .62rem; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s;
}
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] {
  background: var(--panel); color: var(--text); font-weight: 600; box-shadow: var(--shadow);
}
.theme-switch button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 700px) { .theme-switch { display: none; } }

/* Jours d'envoi : sept cases sur une ligne, repliées quand la carte rétrécit. */
.jours-envoi { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: .2rem 0 .4rem; }
.jours-envoi label.inline { margin: 0; }

/* Aperçu de l'espace adhésion : le contenu est du HTML libre écrit par les RH,
   il est contenu ici pour ne pas déborder de sa carte. */
.adhesion-apercu { font-size: .92rem; }
.adhesion-apercu h2 { font-size: 1.02rem; margin: 1.1rem 0 .4rem; }
.adhesion-apercu h2:first-child { margin-top: 0; }
.adhesion-apercu h3 { font-size: .95rem; }
.adhesion-apercu ul { padding-left: 1.2rem; }
.adhesion-apercu li { margin: .25rem 0; }

/* Compteur d'adhésions servant de filtre : l'état actif se voit sur le bord,
   pas par un changement de fond qui ferait perdre la lecture du chiffre. */
.quick-on { box-shadow: var(--shadow), inset 3px 0 0 var(--primary); }

/* Règlement général sur la page publique d'adhésion : un texte long, qu'il
   faut pouvoir lire d'une traite. */
.adhesion-reglement { font-size: .93rem; line-height: 1.6; max-height: 46vh;
                      overflow-y: auto; padding-right: .6rem; }
.adhesion-reglement h2 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.adhesion-reglement h2:first-child { margin-top: 0; }
.adhesion-reglement h3 { font-size: .94rem; margin: .9rem 0 .3rem; }
.adhesion-reglement ul { padding-left: 1.2rem; }
.adhesion-reglement li { margin: .3rem 0; }

/* Le règlement intérieur, lu dans la page d'adhésion. Une hauteur fixe plutôt
   qu'un PDF pleine page : la personne doit pouvoir lire ET voir le formulaire
   qui suit, sinon elle signe sans avoir su qu'il y avait quelque chose à
   remplir en dessous. */
.adhesion-pdf { display: block; width: 100%; height: min(62vh, 680px);
                border: 1px solid var(--border); border-radius: 8px; background: #fff; }
@media (max-width: 640px) { .adhesion-pdf { height: 52vh; } }

/* Messages reçus des candidats (page Messages et fiche candidat) */
.msg { background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
       padding: .9rem 1.1rem; margin-bottom: .8rem; }
.msg-unread { border-left: 4px solid #c9483c; }
.msg-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.msg-subject { font-weight: 600; }
.msg-meta { white-space: nowrap; text-align: right; }
.msg-new { display: inline-block; margin-left: .4rem; background: #c9483c; color: #fff;
           border-radius: 999px; padding: 0 .5rem; font-size: .72rem; font-weight: 700; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: .55rem; font-size: .93rem; }
.msg-quote { margin-top: .4rem; }
.msg-quote summary { cursor: pointer; }
.msg-foot { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .7rem; }
.msg-foot form { margin: 0; }
@media (max-width: 640px) {
  .msg-head { flex-direction: column; gap: .3rem; }
  .msg-meta { text-align: left; }
}

/* Éditeur des templates de mails : bascule visuel / HTML */
.tpl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: .6rem;
            flex-wrap: wrap; margin-top: .6rem; margin-bottom: .3rem; }
.tpl-mode { display: inline-flex; gap: .3rem; }
.tpl-toolbar { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .4rem;
               border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0;
               background: var(--panel-2); }
.tpl-toolbar select { width: auto; padding: .2rem .4rem; font-size: .8rem; }
.tpl-editor { min-height: 16rem; padding: .6rem .9rem; border: 1px solid var(--border);
              border-radius: 0 0 8px 8px; background: var(--panel); color: var(--text);
              line-height: 1.5; overflow-wrap: anywhere; }
.tpl-editor:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.tpl-editor p { margin: 0 0 .7rem; }
.tpl-editor a { text-decoration: underline; }