/* ═══════════════════════════════════════════════════════════════
   FASUP' Interne — le peu de style propre à cette application.

   Tout le reste vient de fasup-ui.css, le kit partagé par les trois
   applications. Règle : si un style peut servir aux autres apps, il va
   dans le kit, pas ici.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   Deux teintes en plus du kit.

   Le tableau de bord compte huit blocs et le kit n'offre que six
   couleurs sémantiques : il en manquait deux pour qu'aucun bloc n'ait
   la couleur d'un autre. Construites comme celles du kit — vif, fond,
   texte — et remappées en mode sombre.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --teal:#0E8C99;  --teal-soft:#E2F3F5;  --teal-ink:#0A6B75;
  --rose:#D6457F;  --rose-soft:#FCE8F0;  --rose-ink:#A62D5F;
  /* Les teintes des TYPES d'action des frises : chaque action a la
     sienne, aucune ne se répète (cyan=réunion, prune=conseil,
     olive=BTS blanc, bronze=fiches). */
  --cyan:#0E86C9;   --cyan-soft:#E3F1FB;   --cyan-ink:#085E8F;
  --prune:#A648B8;  --prune-soft:#F6E9F9;  --prune-ink:#7B2E8A;
  --olive:#6E8F1F;  --olive-soft:#EFF4DC;  --olive-ink:#4E6714;
  --bronze:#9A6B3F; --bronze-soft:#F4EBE1; --bronze-ink:#6F4B29;
  /* La couleur de L'AVANCÉE DU TEMPS sur la frise : ORANGE. Le vert
     reste réservé à « c'est fait » — un trait vert ne se voit donc que
     sous une étape réellement effectuée. */
  --avance:#F0A02C;
  /* Le fond de la vue « brief » du panneau : un crème plus sourd que
     les cartes, pour qu'elles se détachent. */
  --fond-brief:#F3EEE4;
}
body[data-theme="dark"]{
  --teal:#3FBFC9;  --teal-soft:#123338;  --teal-ink:#7FDCE4;
  --rose:#F07AA8;  --rose-soft:#3A1B29;  --rose-ink:#FFA8C8;
  --cyan:#4FB3EA;   --cyan-soft:#12293A;   --cyan-ink:#93D3F5;
  --prune:#CE7EDD;  --prune-soft:#331238;  --prune-ink:#E5B0F0;
  --olive:#A5C24E;  --olive-soft:#26300F;  --olive-ink:#CBE08A;
  --bronze:#C99A6B; --bronze-soft:#332415; --bronze-ink:#E3C4A3;
  --avance:#F5B459;
  --fond-brief:#241C15;
}

/* — Barre du haut —
     Le logo à gauche, puis le fil d'ariane, la recherche, les actions.
     La recherche tient sur UNE ligne : sans nowrap, un libellé un peu long
     la fait doubler de hauteur et toute la barre grandit avec elle. — */
.topbar .brand{margin-right:4px}
.topbar .brand .bw{font-size:1.24rem}
.topbar .brand .bs{font-size:.56rem;letter-spacing:.2em}
.topbar .searchbar{padding:7px 13px;max-width:320px;margin-left:auto}
.topbar .searchbar>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.topbar .tb-actions{margin-left:0}
@media(max-width:1100px){
  .topbar .tb-crumb{display:none}
}
@media(max-width:860px){
  .topbar .brand .bs{display:none}
}

/* — Tableau de bord —
     Le contenu est centré dans la hauteur réellement disponible plutôt
     que collé en haut avec un grand vide en dessous.

     Deux pièges évités, dans cet ordre :

     1. le centrage porte sur .page elle-même, qui occupe déjà toute la
        hauteur restante sous la barre du haut. Un calc() sur 100vh
        retombe toujours à côté et fait apparaître une barre de
        défilement pour quelques pixels ;

     2. il se fait par MARGES AUTOMATIQUES, pas par
        justify-content:center — qui rogne le haut du contenu, sans
        moyen de le faire réapparaître, dès que la page devient plus
        haute que l'écran. Les marges auto retombent à zéro dans ce cas
        et laissent la page défiler normalement. — */
.page[data-vue="dashboard"]{display:flex;flex-direction:column;padding-bottom:26px}
.dash{display:flex;flex-direction:column;gap:20px;width:100%}

/* ══════════════════════════════════════════════════════════════════
   LE TABLEAU DE BORD TIENT DANS L'ÉCRAN. TOUJOURS.
   ══════════════════════════════════════════════════════════════════
   Ce n'est plus une intention tenue à coups de media queries : c'est
   une CONTRAINTE de mise en page. La colonne fait exactement la
   hauteur de l'écran, et tout ce qui pourrait grandir a le droit de
   rétrécir (`min-height:0`) puis de défiler chez lui (`overflow`).

   Conséquence, et c'est le but : AJOUTER UNE LIGNE À UN BLOC NE PEUT
   PLUS RALLONGER LA PAGE. Le bloc se resserre, ou défile à l'intérieur
   de lui-même. Rien ne passe sous le bord de l'écran.

   ⚠️ TOUTE ÉVOLUTION DU TABLEAU DE BORD PASSE PAR ICI. Si un nouveau
   contenu ne tient pas, c'est LUI qu'on raccourcit — jamais la page
   qu'on rallonge. C'est ce qui s'était perdu à force de retouches. */
/* 1. L'APPLICATION NE DÉPASSE JAMAIS L'ÉCRAN. */
.main:has(> .page[data-vue="dashboard"]){height:100dvh;min-height:0;overflow:hidden}
/* 2. Si vraiment le contenu ne tient pas — écran minuscule —, c'est LA
      PAGE qui défile chez elle. Rien n'est coupé sans recours : on ne
      perd jamais le bloc du bas, on va le chercher. */
.page[data-vue="dashboard"]{min-height:0;overflow:auto}
.dash{flex:1;min-height:0}
/* 3. LA RANGÉE DU MILIEU NE MANGE PLUS TOUT L'ESPACE.
      Avec `flex:1` elle s'étirait jusqu'en bas de l'écran et poussait
      « Le centre doit s'améliorer » sous le pli. Elle prend maintenant
      la hauteur qu'il lui faut — bornée, pour qu'une longue liste ne la
      rallonge pas —, et la place qui reste tombe en bas de la colonne.
      C'est ce qui fait remonter le bloc du bas. */
.dash > .g23{flex:0 1 auto;min-height:0;max-height:min(46vh, 400px)}
.dash > .g23 > *{min-height:0;overflow:hidden}

/* 3 bis. LE BLOC DU BAS PREND LA PLACE QUI RESTE. Il laissait un vide
   sous lui ; il respire maintenant, et la colonne est pleine du haut en
   bas — sans que rien ne dépasse, la contrainte du point 1 tenant
   toujours. */
.dash > :last-child{flex:1 1 auto;min-height:0}
.dash > .card:last-child{display:flex;flex-direction:column}
.dash > .card:last-child > :not(h4){min-height:0;overflow:auto}
/* Les trois indicateurs se posent AU MILIEU de la place qui reste :
   autant d'air au-dessus d'eux qu'en dessous, au lieu d'être collés
   sous le filet du titre. */
.dash > .card:last-child .am-grille{flex:1;align-content:center}
/* 4. LE BLOC TOURNANT est pincé à la hauteur de sa colonne : changer de
      bloc ne déplace plus rien, et une liste trop longue défile CHEZ
      ELLE au lieu de pousser la page. C'est là que les ajouts
      successifs allongeaient le tableau de bord. */
/* ⚠️ LE BLOC TOURNANT NE DÉCIDE PAS DE SA PROPRE HAUTEUR.
   Il est SORTI DU FLUX : en position absolue, il ne compte pas dans le
   calcul de la rangée. C'est donc la carte « Financement », en face, qui
   fixe la hauteur — et le bloc tournant la remplit, exactement, quel que
   soit son contenu.

   Sans ça, chaque panneau imposait la sienne : « Prochaines échéances »
   tenait sur trois lignes, mais l'état vide de « Messages reçus » — une
   icône et deux phrases centrées — est bien plus haut, et la rangée
   entière descendait d'un coup en basculant. Les deux font maintenant
   rigoureusement la même taille. */
#bloc-tournant{min-height:0;position:relative}
#bloc-tournant > .card{position:absolute;inset:0;min-height:0;
  display:flex;flex-direction:column;overflow:hidden}
#bloc-tournant > .card h4{flex:none}
#bloc-tournant .ri-liste{flex:1;min-height:0;overflow:auto}
/* Le bloc « Financement » est borné par la même rangée : si ses
   chiffres ne tiennent pas, ils défilent chez eux plutôt que de
   déborder de la carte. */
.dash > .g23 > .card{display:flex;flex-direction:column}
.dash > .g23 > .card > :not(h4){min-height:0;overflow:auto}

/* ── LES FLÈCHES DU BLOC TOURNANT ──
   Deux chevrons et des points : on voit combien il y a de blocs, lequel
   on regarde, et on passe au suivant sans attendre le tour. */
.bloc-bascule{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.rond-fl{display:inline-flex;align-items:center;justify-content:center;
  width:23px;height:23px;padding:0;border:1px solid var(--border);
  border-radius:50%;background:var(--surface);color:var(--ink-mute);
  cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.rond-fl:hover{border-color:var(--border-2);color:var(--ink);background:var(--bg-2)}
.rond-fl svg{width:13px;height:13px}
.bloc-points{display:inline-flex;align-items:center;gap:4px;margin:0 1px}
.bloc-points i{width:5px;height:5px;border-radius:50%;background:var(--border-2);
  transition:background .18s,transform .18s}
.bloc-points i.on{background:var(--brand);transform:scale(1.35)}

/* Le tableau de bord doit tenir en une page, sans défilement : ses
   cartes sont plus serrées que partout ailleurs, et ses deux blocs du
   milieu restent côte à côte bien plus longtemps que la grille du kit
   ne le prévoit. */
/* Un cran de moins qu'ailleurs : sur le tableau de bord, chaque
   millimètre repris aux marges est un millimètre gagné pour le bloc du
   bas. */
.page[data-vue="dashboard"] .card{padding:16px 19px 17px}

/* Le titre d'une carte est séparé de son contenu par un filet : sans lui,
   « Vue d'ensemble » et le premier chiffre se touchent et se lisent comme
   une seule ligne. */
.dash .card h4{font-size:.95rem;padding-bottom:13px;margin-bottom:16px;
  border-bottom:1px solid var(--border)}
.dash .row-item{padding:12px}
.dash .g23{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:18px}
@media(max-width:880px){
  .dash .g23{grid-template-columns:1fr}
}

/* Écran peu haut (portable 13 pouces, fenêtre réduite) : on resserre
   l'échelle plutôt que de laisser la page défiler. Le tableau de bord
   doit se lire d'un seul regard, c'est tout son intérêt. */
@media(max-height:800px){
  .page[data-vue="dashboard"]{padding-top:18px;padding-bottom:18px}
  .dash{gap:15px}
  .dash .g23{gap:14px}
  .tuiles{gap:14px}
  .tuile{padding:13px 16px 14px}
  .tuile b{font-size:1.95rem}
  .tuile span{margin-top:5px}
  .tuile .t-ic{top:11px;right:11px;width:24px;height:24px;border-radius:8px}
  .page[data-vue="dashboard"] .card{padding:15px 18px 16px}
  .dash .card h4{padding-bottom:11px;margin-bottom:13px}
  .dash .row-item{padding:10px 12px}
  .chiffre b{font-size:1.4rem}
}
/* Écran vraiment bas : un cran de plus, pour que la page tienne encore. */
@media(max-height:690px){
  .page[data-vue="dashboard"]{padding-top:12px;padding-bottom:12px}
  .dash{gap:11px}
  .dash .g23{gap:11px}
  .tuiles{gap:11px}
  .tuile{padding:10px 13px 11px}
  .tuile b{font-size:1.6rem}
  .tuile span{margin-top:3px;font-size:.8rem}
  .tuile small{font-size:.68rem}
  .page[data-vue="dashboard"] .card{padding:12px 15px}
  .dash .card h4{padding-bottom:9px;margin-bottom:10px}
  .dash .row-item{padding:8px 10px}
  .chiffre b{font-size:1.2rem}
}
.dash-barre{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* Le bonjour à gauche, les outils à droite : on entre par son nom, on
   agit par la droite. La zone du salut reste en place même vide, pour
   que la date ne saute pas d'un côté à l'autre selon les comptes. */
.dash-salut{display:flex;align-items:center;min-height:38px}
.dash-salut b{font-size:1.24rem;letter-spacing:-.01em}
.dash-outils{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media(max-width:640px){
  .dash-barre{justify-content:flex-start}
  .dash-salut{width:100%}
}
/* La date se présente comme un bouton, mais n'en est pas un : rien à
   cliquer, donc pas de curseur ni d'effet de survol trompeur. */
/* La puce de date est un BOUTON : elle ouvre le réglage de la date de
   démonstration (« se placer au 15 décembre pour voir »). Quand une
   date est posée, elle se teinte et le dit franchement. */
/* Pas de `capitalize` : il met une majuscule à CHAQUE mot — « Jeudi 20
   Août 2026 ». En français, seul le premier mot en prend une, et c'est
   la date elle-même qui s'en charge (voir dashboard.js). */
.chip-date{cursor:pointer;font:inherit}
.chip-date:hover{border-color:var(--ink-mute);color:var(--ink)}
.chip-date.est-demo{background:var(--warn-soft);color:var(--warn-ink);
  border-color:var(--warn)}
.chip-demo-tag{margin-left:9px;font-size:.6rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;background:var(--warn);color:#fff;border-radius:99px;padding:2px 7px}

/* — Tuiles chiffrées, la rangée du haut du tableau de bord —
     Le chiffre d'abord, le libellé ensuite : on lit l'état du campus en
     une seconde, sans avoir à parcourir des listes. — */
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:18px}

/* Chaque tuile porte sa couleur : un liseré à gauche, le chiffre et la
   pastille d'icône dans la même teinte. C'est ce qui les distingue au
   premier coup d'œil, sans ajouter une seule ligne de texte.
   La teinte arrive par --accent, posée à l'affichage. */
.tuile{position:relative;background:var(--surface);
  border:1px solid var(--border);border-left:3px solid var(--accent,var(--border-2));
  border-radius:var(--r-lg);padding:18px 20px 19px;box-shadow:var(--sh-sm);
  cursor:pointer;text-align:left;font:inherit;color:inherit;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s}
.tuile:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
/* padding/margin remis à zéro : la règle .tuile span ci-dessous vise le
   libellé, mais elle attrape aussi cette pastille — son padding-right
   décalait l'icône hors du carré. */
.tuile .t-ic{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0;margin:0;
  background:var(--accent-doux,var(--bg-2));color:var(--accent,var(--ink-soft))}
.tuile .t-ic svg{width:14px;height:14px}
.tuile b{display:block;font-size:2.35rem;font-weight:800;letter-spacing:-.04em;
  line-height:1.02;color:var(--accent-texte,var(--ink))}
/* Pas de réserve à droite : la pastille d'icône est au-dessus du libellé,
   pas à côté. Lui garder 26 px faisait passer « Étudiants en maintien »
   sur deux lignes pour rien. */
.tuile span{display:block;font-size:.86rem;font-weight:700;color:var(--ink-2);margin-top:8px}
.tuile small{display:block;font-size:.72rem;color:var(--ink-mute);margin-top:3px;line-height:1.35}
/* La tuile de tête : celle qui résume le campus. */
.tuile-phare{background:var(--brand-50);border-color:var(--brand-100);border-left-color:var(--brand)}

/* Les cartes du bas portent le même code couleur, en plus discret. */
.dash .card[data-accent]{border-left:3px solid var(--accent)}
.dash .card[data-accent] h4::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent);flex:none;margin-right:2px}
.dash .card h4{gap:9px;justify-content:flex-start}
.dash .card h4 .see{margin-left:auto}
.dash .card h4 .badge{margin-left:2px}

/* — Trois chiffres côte à côte dans une carte (vue d'ensemble) —
     Séparés par un simple trait : plus léger que trois sous-cartes, et
     ça se lit comme une seule information en trois volets. — */
.chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.chiffre{padding:0 16px;border-left:1px solid var(--border)}
.chiffre:first-child{padding-left:0;border-left:none}
.chiffre b{display:block;font-size:1.62rem;font-weight:800;letter-spacing:-.03em;
  line-height:1.15;font-variant-numeric:tabular-nums}
.chiffre span{display:block;font-size:.8rem;font-weight:700;color:var(--ink-soft);margin-top:6px}
.chiffre small{display:block;font-size:.7rem;color:var(--ink-mute);margin-top:2px;line-height:1.35}
@media(max-width:600px){
  .chiffres{grid-template-columns:1fr;gap:14px}
  .chiffre{padding:0;border-left:none}
}

/* — Point d'urgence : un point rouge discret sur l'icône, jamais
     d'étiquette « priorité haute » écrite en toutes lettres. — */
.urgent-dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;
  background:var(--danger);border:2px solid var(--surface)}
.ri-ic,.k-ic{position:relative}

/* — Kanban —
     Les colonnes se partagent la largeur disponible au lieu d'avoir une
     largeur fixe : les cinq tiennent à l'écran sans défilement latéral.
     Le nombre de colonnes est passé par --cols (5 pour la to do list,
     3 pour la page « À valider »). Sous 1000 px, on revient au
     défilement horizontal, seule solution lisible sur un écran étroit. — */
.kanban{grid-auto-flow:row;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));
  grid-auto-columns:auto;gap:12px;overflow-x:visible}
.kanban .kb-col{padding:10px}
.kanban .kb-card{padding:11px 12px}
@media(max-width:1000px){
  .kanban{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:250px;overflow-x:auto}
}
.kb-h .kb-pt{width:9px;height:9px;border-radius:50%;flex:none}

/* — Filtre par collaborateur : des visages, pas une liste déroulante.
     On clique sur quelqu'un pour ne voir que ses missions. — */
.filtre-qui{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.filtre-qui .fq{padding:0;border:none;background:none;line-height:0;border-radius:99px;
  cursor:pointer;opacity:.5;transition:opacity .15s var(--ease),transform .15s var(--ease)}
.filtre-qui .fq:hover{opacity:1;transform:translateY(-1px)}
.filtre-qui .fq.on{opacity:1}
.filtre-qui .fq.on .ava{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--brand)}
.filtre-qui .fq-tous{opacity:1;line-height:1;font-size:.78rem;font-weight:700;
  padding:8px 14px;border-radius:99px;background:var(--surface);
  border:1.5px solid var(--border-2);color:var(--ink-soft)}
.filtre-qui .fq-tous:hover{border-color:var(--ink-mute);color:var(--ink);transform:none}
.filtre-qui .fq-tous.on{background:var(--ink);border-color:var(--ink);color:#fff}
.kb-card{position:relative}
/* Une carte qui mène à son étape se donne à cliquer ; une mission
   ajoutée à la main ne fait rien au clic. */
.kb-card.kb-mene{cursor:pointer}
.kb-card.kb-inerte{cursor:default}
.kb-card.kb-inerte:hover{box-shadow:none;transform:none}
/* La croix de suppression : discrète, franche au survol. */
.kb-suppr{position:absolute;top:7px;right:7px;width:24px;height:24px;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:7px;
  border:0;background:transparent;color:var(--ink-mute);cursor:pointer;opacity:0;
  transition:opacity .12s,background .12s,color .12s}
.kb-card:hover .kb-suppr,.kb-suppr:focus-visible{opacity:1}
.kb-suppr:hover{background:var(--danger-doux,var(--bg-2));color:var(--danger)}
.kb-suppr svg.ico{width:14px;height:14px}
@media (hover:none){.kb-suppr{opacity:1}}
.kb-card .kb-type{font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-mute);display:block;margin-bottom:3px}
.kb-card .kb-qui{display:flex;align-items:center;gap:6px;margin-top:9px}
.kb-card .kb-qui .ava{width:22px;height:22px;font-size:.58rem}
.kb-card .kb-qui small{font-size:.7rem;color:var(--ink-soft);font-weight:600}

/* — To do list : chaque colonne prend la couleur de son statut —
     La couleur habille l'encart complet (fond doux + liseré haut) ET ses
     cartes (liseré à gauche), pour qu'on lise l'état d'une tâche sans lire
     un mot. « En retard » est en rouge : le retard saute aux yeux.
     La teinte arrive par les classes .t-* posées sur la colonne ; les
     cartes héritent des variables --k* par la cascade.

     ⚠️ LA PAGE « À VALIDER » LES PORTE AUSSI, depuis le 14 sept 2026.
     Elle en était exclue « pour rester neutre » : ses quatre colonnes
     étaient donc du même gris, et « Validée » ne se distinguait pas de
     « Preuve manquante ». Les fonds sont des teintes douces, pas des
     aplats : on se repère sans que la page crie. */
.kb-col.kb-statut{background:var(--k-soft);border:1px solid var(--k-bord);
  border-top:3px solid var(--k)}
.kb-col.kb-statut .kb-h{color:var(--k-ink)}
.kb-col.kb-statut .kb-h .cnt{background:var(--surface);color:var(--k-ink)}
.kb-col.kb-statut .kb-card{border-left:3px solid var(--k)}
/* La cible de dépôt garde sa propre teinte, avec un liseré franc en plus. */
.kb-col.kb-statut.dragover{background:var(--k-soft);outline:2px dashed var(--k);outline-offset:-2px}

.kb-col.t-neutral{--k:var(--ink-mute);--k-soft:var(--bg-2);   --k-ink:var(--ink-2);     --k-bord:var(--border)}
.kb-col.t-info   {--k:var(--info);    --k-soft:var(--info-soft);  --k-ink:var(--info-ink);  --k-bord:transparent}
.kb-col.t-brand  {--k:var(--brand);   --k-soft:var(--brand-50);   --k-ink:var(--brand-800); --k-bord:var(--brand-100)}
.kb-col.t-ok     {--k:var(--ok);      --k-soft:var(--ok-soft);    --k-ink:var(--ok-ink);    --k-bord:transparent}
.kb-col.t-danger {--k:var(--danger);  --k-soft:var(--danger-soft);--k-ink:var(--danger-ink);--k-bord:transparent}
/* « À revoir », sur la page de validation : l'ambre du renvoi. */
.kb-col.t-warn   {--k:var(--warn);    --k-soft:var(--warn-soft);  --k-ink:var(--warn-ink);  --k-bord:transparent}

/* — Frise : le rail du kit, plus une pastille d'état de contrat. — */
.statut-contrat{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:99px;
  font-size:.78rem;font-weight:700}

/* — Frise agrandie : un cran plus grande, réservée à la fiche contrat —
     Même frise que partout ailleurs, mais rail plus épais, pastilles et
     libellés plus lisibles : elle tient mieux sa place dans la page. */
.frise-large .frise-rail{height:6px;margin-bottom:22px}
.frise-large .frise-etape{min-width:150px;padding:15px 15px 16px;gap:7px}
.frise-large .fe-pastille{width:30px;height:30px;border-radius:10px}
.frise-large .fe-pastille svg{width:17px;height:17px}
.frise-large .fe-date{font-size:.72rem}
.frise-large .fe-titre{font-size:.9rem}

/* — Fiche contrat : les trois actions, en petits boutons, en haut à droite —
     Une colonne serrée, calée à droite du profil, donc juste au-dessus de
     « Financement total prévu ». Les boutons prennent la même largeur (celle
     du plus long) pour former un bloc net. Sur écran étroit, la colonne passe
     en pleine largeur sous le profil et les boutons se mettent côte à côte. */
.contrat-actions{display:flex;flex-direction:column;gap:8px;flex:none}
.contrat-actions .btn{white-space:nowrap}
@media(max-width:640px){
  .contrat-actions{flex-basis:100%;flex-direction:row;flex-wrap:wrap;margin-top:4px}
  .contrat-actions .btn{flex:1 1 auto;min-width:160px}
}

/* — Planification d'une prochaine visite / d'un prochain mentorat —
     Bloc affiché sous la frise. « En attente » (ambre) tant que la date
     n'est qu'un délai proposé ; « planifié » (bleu, comme la colonne
     « Planifié » de la to do list) une fois validé par l'autre partie. */
.planif{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 14px;
  border-radius:14px;border:1px solid var(--border)}
.planif .pf-ic{width:34px;height:34px;border-radius:10px;flex:none;display:flex;
  align-items:center;justify-content:center;background:var(--surface)}
.planif .pf-ic svg{width:17px;height:17px}
.planif .pf-b{flex:1;min-width:0}
.planif .pf-b b{display:block;font-size:.88rem}
.planif .pf-b b .tag{vertical-align:1px;margin-left:6px}
.planif .pf-b small{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:2px;line-height:1.45}
.planif .pf-act{display:flex;gap:8px;flex:none;flex-wrap:wrap}
.planif-attente{background:var(--warn-soft);border-color:transparent}
.planif-attente .pf-ic{color:var(--warn)}
.planif-ok{background:var(--info-soft);border-color:transparent}
.planif-ok .pf-ic{color:var(--info)}
@media(max-width:640px){
  .planif{flex-wrap:wrap}
  .planif .pf-act{width:100%}
  .planif .pf-act .btn{flex:1 1 auto}
}

/* — Référent d'un étudiant : petit bouton modifiable —
     Volontairement plus discret qu'un .btn : sur la fiche étudiant il vit
     à côté du nom, sur la fiche contrat sous le tuteur, il ne doit jamais
     rivaliser avec eux. Le contour en pointillés invite à cliquer quand
     rien n'est encore choisi.

     Une fois un référent choisi, le bouton prend SA couleur — la même que
     partout ailleurs dans l'application (to do list, à valider) — pour
     qu'on ne le confonde jamais avec le tuteur juste à côté, resté en
     texte neutre. */
.btn-referent{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 9px;
  border-radius:999px;border:1.5px solid var(--border-2);background:var(--surface);
  color:var(--ink-soft);font:inherit;font-size:.74rem;font-weight:700;cursor:pointer;
  transition:all .15s var(--ease);line-height:1.7;vertical-align:middle}
.btn-referent svg{width:12px;height:12px;flex:none}
.btn-referent:hover{border-color:var(--brand);color:var(--brand-700);background:var(--brand-50)}
.btn-referent.vide{border-style:dashed;color:var(--ink-mute)}
/* HÉRITÉ DE LA CLASSE : le trait pointillé dit que rien n'a été décidé
   POUR CET ALTERNANT. Il porte le référent de sa classe, comme les
   autres. Le bouton garde la couleur de la personne — c'est bien elle
   qui le suit —, seule la bordure change. */
.btn-referent.est-herite{border-style:dashed}
.btn-referent.vide:hover{border-color:var(--brand)}

.btn-referent.t-brand{border-color:var(--brand-100);background:var(--brand-50);color:var(--brand-800)}
.btn-referent.t-brand:hover{background:var(--brand-100);border-color:var(--brand)}
.btn-referent.t-info{border-color:transparent;background:var(--info-soft);color:var(--info-ink)}
.btn-referent.t-info:hover{background:var(--info-soft);border-color:var(--info)}
.btn-referent.t-violet{border-color:transparent;background:var(--violet-soft);color:var(--violet-ink)}
.btn-referent.t-violet:hover{background:var(--violet-soft);border-color:var(--violet)}
.btn-referent.t-ok{border-color:transparent;background:var(--ok-soft);color:var(--ok-ink)}
.btn-referent.t-ok:hover{background:var(--ok-soft);border-color:var(--ok)}

/* — Boîte mail : deux colonnes, liste + lecture, pleine hauteur.
     Le tout est centré et borné en largeur : sur un grand écran, la
     conversation reste une colonne lisible, pas une nappe blanche. — */
.mail-wrap{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:stretch;
  width:100%;max-width:1180px;margin:0 auto;
  height:calc(100vh - 248px);height:calc(100dvh - 248px);min-height:440px}
.mail-col{display:flex;flex-direction:column;min-height:0;gap:10px}
.mail-cherche{display:flex;align-items:center;gap:8px;padding:9px 13px;flex:none;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  color:var(--ink-mute);box-shadow:var(--sh-sm)}
.mail-cherche svg{width:14px;height:14px;flex:none}
.mail-cherche input{border:none;background:transparent;outline:none;width:100%;
  font:inherit;font-size:.84rem;color:var(--ink)}
/* La liste s'arrête à sa dernière conversation : pas de grande carte
   blanche vide sous une liste courte. */
.mail-liste{flex:0 1 auto;min-height:0;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--sh-sm)}
.mail-item{display:flex;align-items:center;gap:11px;padding:12px 14px;cursor:pointer;
  border-bottom:1px solid var(--border);transition:background .13s}
.mail-item:last-child{border-bottom:none}
.mail-item:hover{background:var(--surface-2)}
.mail-item.on{background:var(--brand-50)}
.mail-item.nonlu b{font-weight:800}
.mail-item.nonlu small{color:var(--ink);font-weight:600}
.mail-item .ava{flex:none}
.mail-item .mi-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mail-item .mi-l1{display:flex;align-items:center;gap:6px;min-width:0}
.mail-item .mi-l1 b{flex:1;min-width:0;font-size:.86rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-item .mi-l2{display:flex;align-items:center;gap:8px;min-width:0}
.mail-item .mi-l2 small{flex:1;min-width:0;font-size:.76rem;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-item .mi-d{font-size:.68rem;color:var(--ink-mute);font-weight:600;white-space:nowrap;flex:none}

/* ═══════════════════════════════════════════════════════════════
   PAGE CAMPUS
   Elle reproduit exactement ce que voient les étudiants et les
   entreprises. Ici, chaque bloc porte en plus ses commandes d'édition :
   c'est le même écran, en mode auteur.
   ═══════════════════════════════════════════════════════════════ */

.camp-hero{margin-bottom:20px}
.camp-hero .ch-haut{display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap}
.camp-hero h1{font-size:1.9rem;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.camp-hero .ch-sous{color:var(--ink-soft);font-size:.92rem;margin-top:7px}
.camp-hero .ch-actions{display:flex;gap:10px;flex-wrap:wrap;flex:none}

/* ── LE BOUTON « MESSAGE DE RENTRÉE » ──
   Blanc, à gauche du numéro. Il se distingue des autres boutons blancs
   de la rangée par son encre orange et son cerne un peu plus marqué :
   c'est le seul de la page qui parle à tous les étudiants d'un coup. */
.btn-lettre{background:var(--surface);border:1.5px solid var(--brand);
  color:var(--brand-700,var(--brand));font-weight:800}
.btn-lettre:hover{background:var(--brand-50,var(--fa-beige-clair));
  border-color:var(--brand)}

/* ── LE FORMULAIRE DE LA LETTRE ── */
/* Les destinataires ne se choisissent pas : on les ANNONCE. */
.lt-dest{display:flex;align-items:center;gap:12px;margin-top:14px;
  padding:12px 14px;border-radius:var(--r-md);
  background:var(--fa-beige-clair);border:1px solid var(--fa-beige)}
.lt-dest svg.ico{width:20px;height:20px;flex:none;color:var(--brand)}
.lt-dest b{display:block;font-size:.86rem;color:var(--ink)}
.lt-dest small{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:2px}
.lt-zone{min-height:190px;line-height:1.6;font-size:.92rem}
/* La signature est posée par l'application, jamais retapée. */

/* L'aperçu : le texte tel qu'il se lira, rien de plus. L'écriture
   manuscrite et l'animation vivent dans l'application Étudiante. */
.lt-apercu{margin-top:16px}
.lt-eti{display:block;font-size:.63rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-mute);margin-bottom:7px}
.lt-lettre{background:var(--fa-beige-clair);border:1px solid var(--fa-beige);
  border-radius:var(--r-lg);padding:20px 22px;font-size:.9rem;line-height:1.7;
  color:var(--ink);white-space:normal}
.lt-lettre p{margin:0 0 12px}
.lt-lettre p:last-of-type{margin-bottom:0}
.lt-para{margin-top:18px;padding-top:14px;border-top:1px solid var(--fa-beige);
  font-size:.86rem}
.lt-para b{display:block;color:var(--ink)}
.lt-para small{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:2px}

/* ── L'HISTORIQUE, sous la fiche du campus ──
   Une trace, pas le sujet de la page : le bloc est REPLIÉ par défaut,
   son titre dit combien de messages sont partis, et on l'ouvre quand
   on veut vérifier quelque chose. */
.camp-lettres{margin-bottom:18px;padding-top:0;padding-bottom:0}
.lt-tete{display:flex;align-items:center;gap:10px;width:100%;
  padding:16px 0;border:0;background:none;font:inherit;cursor:pointer;text-align:left}
.lt-tete svg.ico{width:16px;height:16px;flex:none;color:var(--ink-mute)}
.lt-tete b{font-size:.95rem;font-weight:800;color:var(--ink)}
.lt-tete em{font-style:normal;font-size:.72rem;font-weight:800;
  background:var(--bg-2);color:var(--ink-soft);border-radius:999px;padding:2px 9px}
.lt-chev{margin-left:auto;display:flex;color:var(--ink-mute);
  transition:transform .18s}
.camp-lettres.est-ouvert .lt-chev{transform:rotate(180deg)}
.lt-corps{display:none;padding-bottom:6px}
.camp-lettres.est-ouvert .lt-corps{display:block}

.lt-ligne{display:flex;align-items:center;gap:18px;padding:12px 0;
  border-top:1px solid var(--border)}
.lt-l-txt{flex:1;min-width:0}
.lt-l-txt b{display:block;font-size:.86rem;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-l-txt small{display:block;font-size:.75rem;color:var(--ink-soft);margin-top:2px}
.lt-l-n{flex:none;text-align:center;min-width:74px}
.lt-l-n b{display:block;font-size:1rem;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums}
.lt-l-n small{display:block;font-size:.63rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-soft);margin-top:1px}
/* Les deux gestes d'une ligne : lire le message en entier, ou le
   retirer. Un aperçu tronqué ne dit rien — c'est le bouton qui montre. */
.lt-l-b{display:flex;align-items:center;gap:6px;flex:none}
@media (max-width:820px){
  .lt-ligne{flex-wrap:wrap;gap:12px}
  .lt-l-txt{flex:1 1 100%}
  .lt-l-b{margin-left:auto}
}
@media (max-width:620px){
  .lt-l-n{min-width:58px}
}

/* Deux colonnes, deux rangées, et les quatre blocs posés directement
   dedans. Chaque rangée n'a qu'une hauteur : les blocs commencent et
   finissent au même trait. C'est pour cela qu'il n'y a pas
   d'align-items:start ici — la valeur par défaut (stretch) est
   exactement ce qu'on veut. */
.camp-grille{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:18px}
/* Un bloc étiré par sa rangée garde son contenu en haut ; seul un état
   vide se centre dans la place qui reste, plutôt que de laisser un
   grand blanc sous lui. */
.camp-grille > .card{display:flex;flex-direction:column}
.camp-grille > .card > .empty{margin-top:auto;margin-bottom:auto}
@media(max-width:980px){ .camp-grille{grid-template-columns:1fr} }

/* Titre de bloc avec son icône et son bouton d'ajout à droite. */
.camp-titre{display:flex;align-items:center;gap:9px;font-size:1.02rem;font-weight:800;
  margin-bottom:14px}
.camp-titre .ct-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;background:var(--bg-2);color:var(--ink-soft);flex:none}
.camp-titre .ct-ic svg{width:15px;height:15px}
.camp-titre .ct-txt{flex:1;min-width:0}
.camp-titre .ct-plus{margin-left:auto;flex:none}

/* — L'équipe — */
.equipe-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:620px){ .equipe-grille{grid-template-columns:1fr} }
.membre{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--border);cursor:pointer;
  transition:all .16s var(--ease);text-align:left;font:inherit;color:inherit;width:100%}
.membre:hover{border-color:var(--brand);background:var(--brand-50);transform:translateY(-1px)}
.membre .m-txt{flex:1;min-width:0}
.membre .m-txt b{display:block;font-size:.92rem;line-height:1.3}
.membre .m-txt small{display:block;font-size:.78rem;color:var(--ink-soft);line-height:1.4;margin-top:2px}
/* Le numéro, troisième ligne : chiffres alignés, sans icône — le
   contexte suffit à savoir que c'est un téléphone. */
.membre .m-tel{font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600}
.membre .m-vide{color:var(--ink-mute);font-weight:600}

/* — Le bon réflexe — */
.camp-conseil{display:flex;gap:11px;margin-top:16px;padding:14px 16px;border-radius:14px;
  background:var(--brand-50);border:1px solid var(--brand-100);font-size:.87rem;line-height:1.6}
.camp-conseil .cc-txt{flex:1;min-width:0}
.camp-conseil b{font-weight:800}

/* — Actualités : la pastille de date, puis le texte — */
.actu{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:14px;
  transition:background .13s}
.actu:hover{background:var(--surface-2)}
.actu .a-date{width:52px;flex:none;text-align:center;border-radius:12px;padding:7px 4px;
  background:var(--brand-50);color:var(--brand-800)}
.actu .a-date b{display:block;font-size:1.15rem;font-weight:800;line-height:1}
.actu .a-date small{display:block;font-size:.68rem;font-weight:700;margin-top:2px}
.actu .a-txt{flex:1;min-width:0}
.actu .a-txt b{display:block;font-size:.92rem}
.actu .a-txt p{font-size:.82rem;color:var(--ink-soft);margin-top:2px;line-height:1.5}
.actu .a-cmd{display:flex;gap:2px;opacity:0;transition:opacity .15s;flex:none}
.actu:hover .a-cmd{opacity:1}

/* — Documents — */
.doc-ligne{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:13px;
  transition:background .13s}
.doc-ligne:hover{background:var(--surface-2)}
.doc-ligne .d-ic{width:38px;height:38px;border-radius:11px;flex:none;display:flex;
  align-items:center;justify-content:center;background:var(--bg-2);color:var(--ink-soft)}
.doc-ligne .d-ic svg{width:17px;height:17px}
.doc-ligne .d-txt{flex:1;min-width:0}
.doc-ligne .d-txt b{display:block;font-size:.89rem;line-height:1.35}
.doc-ligne .d-txt small{font-size:.75rem;color:var(--ink-mute)}
.doc-ligne .d-cmd{display:flex;gap:2px;opacity:0;transition:opacity .15s;flex:none}
.doc-ligne:hover .d-cmd{opacity:1}

/* — Questions fréquentes — */
.faq{border-bottom:1px solid var(--border)}
.faq:last-of-type{border-bottom:none}
.faq summary{display:flex;align-items:center;gap:10px;padding:13px 2px;cursor:pointer;
  font-size:.9rem;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .f-chev{margin-left:auto;color:var(--ink-mute);transition:transform .2s var(--ease);flex:none}
.faq[open] summary .f-chev{transform:rotate(180deg)}
.faq .f-rep{padding:0 2px 14px;font-size:.85rem;line-height:1.65;color:var(--ink-2)}
.faq .f-cmd{display:flex;gap:2px;opacity:0;transition:opacity .15s;flex:none}
.faq:hover .f-cmd{opacity:1}
.faq-pied{text-align:center;padding-top:14px;margin-top:6px;border-top:1px solid var(--border)}

/* ⚠️ SANS SURVOL, PAS DE SURVOL. Sur tablette et téléphone, `:hover`
   ne se produit jamais : les commandes de la page Campus restaient
   invisibles, et avec elles « Ouvrir le fichier », qui vit dans le même
   groupe que Modifier et Supprimer — un document du campus ne pouvait
   tout simplement pas s'ouvrir au doigt. On les montre toujours là où
   il n'y a pas de souris, comme on le fait déjà ailleurs. */
@media (hover:none){
  .actu .a-cmd, .doc-ligne .d-cmd, .faq .f-cmd{opacity:1}
}

/* Un élément non publié reste visible côté interne, mais grisé : on doit
   voir ce qui existe et ce qui est encore caché aux étudiants. */
.non-publie{opacity:.5}
.non-publie::after{content:"brouillon";font-size:.62rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-mute);margin-left:8px}

/* — Encart cliquable (documents d'une frise de classe) — */
.encart{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-lg);
  border:1.5px dashed var(--border-2);background:var(--surface-2);cursor:pointer;
  transition:all .18s var(--ease);width:100%;text-align:left;font:inherit;color:inherit}
.encart:hover{border-color:var(--brand);background:var(--brand-50)}
.encart .en-ic{width:44px;height:44px;border-radius:13px;background:var(--brand-50);color:var(--brand-700);
  display:flex;align-items:center;justify-content:center;flex:none}
.encart .en-ic svg{width:20px;height:20px}
.encart .en-b{flex:1;min-width:0}
.encart .en-b b{font-size:.9rem;display:block}
.encart .en-b small{font-size:.78rem;color:var(--ink-soft)}

/* — Écran de connexion : quelques ajustements sur le patron du kit — */
.auth-side .as-points{display:flex;flex-direction:column;gap:14px;margin-top:30px;position:relative;z-index:2}
.auth-side .as-pt{display:flex;gap:12px;align-items:flex-start}
.auth-side .as-pt .as-ic{width:32px;height:32px;border-radius:10px;flex:none;
  background:rgba(245,157,0,.16);color:var(--brand);display:flex;align-items:center;justify-content:center}
.auth-side .as-pt .as-ic svg{width:15px;height:15px}
.auth-side .as-pt b{font-size:.88rem;display:block}
.auth-side .as-pt small{font-size:.78rem;color:rgba(255,255,255,.58);line-height:1.5}
.auth-aide{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:14px 16px;margin-top:22px;font-size:.8rem;color:var(--ink-soft);line-height:1.6}
.auth-aide b{color:var(--ink)}

/* Petit écran : un seul panneau à la fois — la liste, OU le fil ouvert
   (plein écran, avec un bouton retour dans son en-tête). */
@media(max-width:1020px){
  .mail-wrap{grid-template-columns:1fr;height:calc(100vh - 218px);height:calc(100dvh - 218px)}
  .mail-wrap.fil-ouvert .mail-col{display:none}
  .mail-wrap:not(.fil-ouvert) #lecture-mail{display:none}
  .mail-wrap.fil-ouvert .ml-retour{display:inline-flex}
  .msg{max-width:92%}
}

/* ═══════════════════════════════════════════════════════════════
   LES DEUX PUBLICS — étudiants, entreprises
   Une ligne s'adresse à l'un, à l'autre, aux deux, ou à personne.
   L'état se lit sans cliquer, et se change en cliquant.
   ═══════════════════════════════════════════════════════════════ */

.pub-etats{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
.pub-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;
  border-radius:999px;border:1px solid var(--border);background:var(--surface);
  color:var(--ink-mute);font:inherit;font-size:.68rem;font-weight:700;cursor:pointer;
  transition:all .15s var(--ease);line-height:1.6}
.pub-chip svg{width:12px;height:12px;flex:none}
.pub-chip:hover{border-color:var(--border-2);color:var(--ink-2)}
.pub-chip.on.t-brand{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-700)}
.pub-chip.on.t-info{background:var(--info-soft);border-color:transparent;color:var(--info)}
.pub-brouillon{font-size:.66rem;font-weight:800;color:var(--ink-mute);
  text-transform:uppercase;letter-spacing:.04em;margin-left:2px}

/* Les deux cases du formulaire : assez grandes pour qu'on voie
   d'un coup lesquelles sont cochées. */
.pub-choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pub-case{position:relative;display:flex;align-items:center;gap:10px;padding:12px 13px;
  border:1.5px solid var(--border);border-radius:14px;background:var(--surface);
  cursor:pointer;transition:all .16s var(--ease)}
.pub-case input{position:absolute;opacity:0;pointer-events:none}
.pub-case .pc-ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;background:var(--bg-2);color:var(--ink-soft);flex:none}
.pub-case .pc-ic svg{width:17px;height:17px}
.pub-case b{flex:1;font-size:.88rem}
.pub-case .pc-etat{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;color:transparent;flex:none;
  transition:all .16s var(--ease)}
.pub-case .pc-etat svg{width:12px;height:12px;stroke-width:3}
.pub-case:hover{border-color:var(--border-2)}
.pub-case.on{border-color:var(--brand);background:var(--brand-50)}
.pub-case.on .pc-ic{background:var(--brand);color:#fff}
.pub-case.on .pc-etat{background:var(--brand);border-color:var(--brand);color:#fff}
@media(max-width:520px){ .pub-choix{grid-template-columns:1fr} }

/* La question de la FAQ et son public, en colonne dans le résumé. */
.faq summary .f-q{flex:1;min-width:0;display:flex;flex-direction:column;gap:0}

/* ═══════════════════════════════════════════════════════════════
   DÉPOSER UN FICHIER
   ═══════════════════════════════════════════════════════════════ */

.doc-panneau{margin-top:10px}
.depot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:22px 18px;border:1.5px dashed var(--border-2);border-radius:16px;
  background:var(--bg-2);cursor:pointer;text-align:center;transition:all .16s var(--ease)}
.depot input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.depot .dp-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;background:var(--surface);color:var(--brand);
  border:1px solid var(--border);margin-bottom:4px}
.depot .dp-ic svg{width:19px;height:19px}
.depot b{font-size:.86rem}
.depot small{font-size:.75rem;color:var(--ink-soft)}
.depot:hover,.depot.survol{border-color:var(--brand);background:var(--brand-50)}

.fichier-ligne{display:flex;align-items:center;gap:11px;margin-top:10px;padding:11px 13px;
  border:1px solid var(--border);border-radius:13px;background:var(--surface)}
.fichier-ligne.neuf{border-color:var(--brand);background:var(--brand-50)}
.fichier-ligne .fl-ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;background:var(--bg-2);color:var(--ink-soft);flex:none}
.fichier-ligne .fl-ic svg{width:16px;height:16px}
.fichier-ligne .fl-txt{flex:1;min-width:0}
.fichier-ligne .fl-txt b{display:block;font-size:.85rem;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.fichier-ligne .fl-txt small{display:block;font-size:.74rem;color:var(--ink-soft);margin-top:1px}

/* ═══════════════════════════════════════════════════════════════
   BOÎTE MAIL
   ═══════════════════════════════════════════════════════════════ */

.mail-barre{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  width:100%;max-width:1180px;margin:0 auto 16px}
.mail-vues{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mail-vues .mv{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);color:var(--ink-soft);
  font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .16s var(--ease)}
.mail-vues .mv svg{width:15px;height:15px}
.mail-vues .mv:hover{border-color:var(--border-2);color:var(--ink)}
.mail-vues .mv.on{background:var(--brand-50);border-color:var(--brand);color:var(--brand-700)}
.mail-vues .mv-n{min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--brand);
  color:#fff;font-size:.68rem;font-weight:800;display:inline-flex;align-items:center;
  justify-content:center}
.mail-vues .mv:not(.on) .mv-n{background:var(--ink-mute)}

.mail-item .mi-cl{font-size:.66rem;font-weight:700;color:var(--ink-mute);flex:none}
.mail-item .mi-n{display:inline-flex;align-items:center;justify-content:center;flex:none;
  min-width:19px;height:19px;padding:0 6px;border-radius:999px;background:var(--brand);
  color:#fff;font-size:.66rem;font-weight:800}

.ml-tete{display:flex;align-items:center;gap:12px;padding-bottom:13px;
  border-bottom:1px solid var(--border);margin-bottom:4px;flex:none}
.ml-retour{display:none;flex:none;padding:6px}
.ml-corps{white-space:pre-wrap;line-height:1.7;font-size:.9rem;color:var(--ink-2)}
.ml-pied{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}

/* ── Le fil d'une conversation : les siens à droite, les autres à gauche.
     La carte occupe toute la hauteur : en-tête fixe, messages qui
     défilent, barre d'écriture en bas. ── */

.fil-carte{display:flex;flex-direction:column;min-height:0;height:100%}
#lecture-mail{min-height:0;display:flex;flex-direction:column}
#lecture-mail>.card{flex:1;min-height:0}
#lecture-mail>.card-flat{display:flex;align-items:center;justify-content:center}

/* La zone de conversation a son propre fond, comme toute messagerie :
   les bulles s'y détachent. AUCUN espace inutile à droite : chaque
   rangée est poussée contre son bord par ses MARGES AUTOMATIQUES —
   les vôtres à droite, les leurs à gauche — la seule méthode qui tient
   dans tous les navigateurs, Safari compris, même quand il calcule mal
   la largeur des rangées. La colonne se cale en bas : une conversation
   courte s'affiche près de la zone d'écriture. */
.fil{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;
  align-items:stretch;background:var(--bg);border-radius:14px;margin:10px 0 0;
  padding:14px 18px}
.fil-colonne{width:100%;min-width:100%;margin-top:auto;
  display:flex;flex-direction:column;align-items:stretch}
.fil::-webkit-scrollbar{width:5px}
.fil::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px}
.fil::-webkit-scrollbar-track{background:transparent}
.fil-jour{display:flex;justify-content:center;margin:14px auto 10px;flex:none;align-self:center}
.fil-jour span{font-size:.68rem;font-weight:700;color:var(--ink-mute);
  background:var(--bg-2);border-radius:999px;padding:3px 12px}

/* LA LARGEUR MAXIMALE EST SUR LA RANGÉE, PAS SUR LA BULLE.

   C'est le bogue de la bulle debout : `TEST` s'affichait en colonne, une
   lettre par ligne, dans un ruban vertical. La bulle portait
   `max-width:72%` — 72 % de la rangée, qui n'a elle-même aucune largeur
   définie (elle se règle sur son contenu). Un pourcentage rapporté à une
   largeur indéfinie, Safari le résout contre la largeur MINIMALE du
   contenu : la bulle recevait donc la largeur de sa lettre la plus large,
   et le texte n'avait plus qu'à descendre.

   La rangée, elle, est dans une colonne qui fait 100 % : son pourcentage
   a un sens. On plafonne donc la rangée, et la bulle prend ce qu'il lui
   faut dedans. */
.msg{display:flex;align-items:flex-end;gap:8px;margin-top:10px;flex:none;
  max-width:82%;animation:msg-in .18s var(--ease, ease)}
.msg.suite{margin-top:2px}
.msg.eux{margin-right:auto}
.msg.moi{margin-left:auto;justify-content:flex-end}
.msg .msg-ava{width:28px;flex:none;align-self:flex-end}
@keyframes msg-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.bulle{max-width:100%;min-width:0;background:var(--surface);border:1px solid var(--border);
  border-radius:16px 16px 16px 5px;padding:8px 12px 6px;
  box-shadow:0 1px 2px rgba(16,24,40,.05)}
.msg.suite .bulle{border-radius:8px 16px 16px 5px}
.bulle.moi{background:var(--brand);border-color:var(--brand);
  border-radius:16px 16px 5px 16px}
.msg.suite .bulle.moi{border-radius:16px 8px 5px 16px}
.bulle p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;
  font-size:.88rem;color:var(--ink-2)}
.bulle.moi p{color:#fff}
.bulle .bl-objet{display:block;margin-bottom:2px;font-size:.85rem}
.bulle.moi .bl-objet{color:#fff}
.bulle .bl-qui{display:block;font-size:.68rem;font-weight:800;margin-bottom:1px}
.qui-1{color:var(--brand-700)}
.qui-2{color:var(--violet)}
.qui-3{color:var(--info)}
.qui-4{color:var(--ok)}
.qui-5{color:var(--rose,var(--danger))}
.bulle small{display:block;margin-top:1px;font-size:.6rem;color:var(--ink-mute);
  text-align:right}
.bulle.moi small{color:rgba(255,255,255,.75)}
/* — Supprimer un de ses messages —
     Le bouton vit DANS la bulle, en haut à l'extérieur du côté opposé au
     bord de l'écran, et n'apparaît qu'au survol de la rangée : un fil se
     lit, il ne s'administre pas. Il ne s'affiche que sur ses propres
     messages — on ne supprime pas la parole de l'autre. */
.bulle{position:relative}
.bl-suppr{position:absolute;top:-7px;left:-9px;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);color:var(--ink-mute);
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  opacity:0;transform:scale(.85);transition:opacity .13s,transform .13s,color .13s;
  box-shadow:var(--sh-sm)}
.bl-suppr svg{width:12px;height:12px}
.msg:hover .bl-suppr,.bl-suppr:focus-visible{opacity:1;transform:none}
.bl-suppr:hover{color:var(--danger);border-color:var(--danger)}
/* Doigt sur un écran tactile : pas de survol, le bouton reste visible. */
@media(hover:none){ .bl-suppr{opacity:1;transform:none} }


/* La barre d'écriture, collée en bas du fil */
.fil-repondre{display:flex;gap:9px;align-items:flex-end;flex:none;
  padding-top:12px}
.fr-champ{flex:1;min-width:0;resize:none;font:inherit;font-size:.88rem;
  line-height:1.45;color:var(--ink);background:var(--surface-2);
  border:1.5px solid var(--border);border-radius:19px;padding:9px 15px;
  max-height:120px;overflow-y:auto;transition:border-color .15s}
.fr-champ:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.fr-envoyer{width:40px;height:40px;flex:none;border:none;border-radius:50%;
  background:var(--brand);color:#fff;cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:filter .15s,transform .1s}
.fr-envoyer svg{width:17px;height:17px}
.fr-envoyer:hover{filter:brightness(.94)}
.fr-envoyer:active{transform:scale(.94)}
.fr-envoyer:disabled{opacity:.5;cursor:default}

/* ── Rédiger : les questions dans l'ordre où on se les pose ── */

.redac{display:flex;flex-direction:column;gap:20px}
.etape{display:flex;gap:13px}
.etape .et-n{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;
  font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;
  margin-top:1px}
.etape .et-c{flex:1;min-width:0}
.etape .et-t{display:block;font-size:.92rem;font-weight:800;margin-bottom:11px}
.etape .field{margin-bottom:10px}
.etape .field:last-child{margin-bottom:0}

/* Quatre destinataires depuis le 14 sept 2026 : l'équipe du campus a
   rejoint les étudiants, les entreprises et « tout le monde ». */
.camps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:900px){ .camps{grid-template-columns:repeat(4,minmax(0,1fr))} }
.camp{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px;
  border:1.5px solid var(--border);border-radius:15px;background:var(--surface);
  cursor:pointer;text-align:left;font:inherit;color:inherit;transition:all .16s var(--ease)}
.camp .cp-ic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:var(--bg-2);color:var(--ink-soft);margin-bottom:7px;
  transition:all .16s var(--ease)}
.camp .cp-ic svg{width:18px;height:18px}
.camp b{font-size:.88rem}
.camp small{font-size:.75rem;color:var(--ink-soft);line-height:1.35}
.camp:hover{border-color:var(--border-2);transform:translateY(-1px)}
.camp.sel{border-color:var(--brand);background:var(--brand-50)}
.camp.sel .cp-ic{background:var(--brand);color:#fff}
@media(max-width:620px){ .camps{grid-template-columns:1fr} }

.modes{display:flex;flex-direction:column;gap:8px}
.mode{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1.5px solid var(--border);
  border-radius:13px;background:var(--surface);cursor:pointer;text-align:left;font:inherit;
  color:inherit;transition:all .16s var(--ease)}
.mode .md-p{width:17px;height:17px;border-radius:50%;border:2px solid var(--border-2);flex:none;
  transition:all .16s var(--ease)}
.mode .md-t{flex:1;min-width:0}
.mode .md-t b{display:block;font-size:.85rem}
.mode .md-t small{display:block;font-size:.75rem;color:var(--ink-soft);margin-top:1px}
.mode:hover{border-color:var(--border-2)}
.mode.sel{border-color:var(--brand);background:var(--brand-50)}
.mode.sel .md-p{border-color:var(--brand);border-width:5px}

/* Choisir un par un : chercher, cocher, voir ce qu'on a pris. */
.picker{margin-top:10px;border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:var(--surface)}
.picker .pk-cherche{display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-bottom:1px solid var(--border);color:var(--ink-mute)}
.picker .pk-cherche svg{width:15px;height:15px;flex:none}
.picker .pk-cherche .input{border:none;background:transparent;padding:2px 0;height:auto;
  box-shadow:none;font-size:.85rem}
.picker .pk-cherche .input:focus{box-shadow:none;outline:none}
.picker .pk-liste{max-height:210px;overflow-y:auto}
.picker .pk-ligne{display:flex;align-items:center;gap:10px;padding:9px 13px;cursor:pointer;
  border-bottom:1px solid var(--border);transition:background .14s var(--ease)}
.picker .pk-ligne:last-child{border-bottom:none}
.picker .pk-ligne input{position:absolute;opacity:0;pointer-events:none}
.picker .pk-ligne:hover{background:var(--bg-2)}
.picker .pk-ligne.on{background:var(--brand-50)}
.picker .pk-t{flex:1;min-width:0}
.picker .pk-t b{display:block;font-size:.84rem}
.picker .pk-t small{display:block;font-size:.73rem;color:var(--ink-soft)}
.picker .pk-c{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;color:transparent;flex:none;
  transition:all .16s var(--ease)}
.picker .pk-c svg{width:11px;height:11px;stroke-width:3}
.picker .pk-ligne.on .pk-c{background:var(--brand);border-color:var(--brand);color:#fff}
.picker .pk-pied{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;background:var(--bg-2);
  border-top:1px solid var(--border)}
.jeton{display:inline-flex;align-items:center;gap:5px;padding:3px 4px 3px 10px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);font-size:.75rem;font-weight:700}
.jeton button{width:17px;height:17px;border-radius:50%;border:none;background:var(--bg-2);
  color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0}
.jeton button svg{width:11px;height:11px}
.jeton button:hover{background:var(--danger-soft);color:var(--danger)}

/* Le compte, écrit en toutes lettres avant d'envoyer. */
.redac-bilan{flex:1;min-width:0;font-size:.8rem;font-weight:700;color:var(--ink-mute);
  text-align:left;line-height:1.4}
.redac-bilan.pret{color:var(--ok)}
@media(max-width:620px){ .redac-bilan{flex-basis:100%;margin-bottom:8px} }

/* ── La rangée du milieu du tableau de bord ──
   Les deux cartes partagent la même hauteur : leur contenu se répartit
   sur TOUTE la carte — rien ne s'entasse en haut, pas de vide en bas,
   et les titres des deux cartes restent alignés au même niveau. */
.dash .g23 > .card,
.dash #bloc-tournant > .card{display:flex;flex-direction:column;
  justify-content:space-between;gap:12px}
.dash .g23 .empty{margin:auto 0}
#bloc-tournant{display:grid}

/* Les lignes d'une carte-liste (messages, réponses) se lisent depuis le
   HAUT : la première réponse arrive en première place, la suivante juste
   dessous — l'espace restant attend les prochaines, on ne centre pas une
   ligne seule au milieu de la carte. Seul l'état vide se centre. */
/* ⚠️ LA PLACE EN TROP SE RÉPARTIT, ELLE NE S'EMPILE PAS EN BAS.
   Les lignes étaient collées sous le filet du titre, tout l'espace
   restant tombant d'un bloc sous la dernière : la carte avait l'air
   à moitié vide alors qu'elle est pleine.

   Des marges automatiques sur CHAQUE ligne : le navigateur partage
   l'espace libre à parts égales entre toutes — au-dessus de la
   première, entre chacune, sous la dernière. L'écart est le même
   partout, et il grandit ou disparaît avec la place disponible.

   Des marges plutôt que `justify-content:space-evenly` : quand il n'y a
   PAS assez de place, les marges automatiques retombent à zéro et la
   liste défile normalement, là où `space-evenly` rend le haut
   inatteignable. */
.dash .ri-liste{flex:1;display:flex;flex-direction:column;
  justify-content:flex-start;gap:10px}
.dash .ri-liste > *{margin-block:auto}
.dash .ri-liste .empty{margin:auto 0}

/* Un bloc du tableau de bord garde SA largeur, quel que soit son contenu.
   Sans cela, un message un peu long (un objet de mail à rallonge) pousse
   la carte hors de l'écran : une case de grille vaut `min-width:auto` par
   défaut, et la grille imbriquée du bloc tournant se crée en plus une
   colonne implicite « auto » calée sur le max-content. On borne les deux :
   la ligne de message est alors coupée par ses points de suspension,
   comme prévu. */
.grid > *{min-width:0}
#bloc-tournant{min-width:0;grid-template-columns:minmax(0,1fr)}
/* Une fois la carte bornée, c'est son en-tête qui peut déborder sur un
   écran très étroit (titre + badge + liens ne se compriment pas) : on
   l'autorise à passer à la ligne plutôt qu'à sortir de la carte. */
.card h4{flex-wrap:wrap}

/* Une ligne de réponse accepte le retour à la ligne : sur un écran
   étroit, les boutons passent dessous au lieu de déborder. */
.rep-item{flex-wrap:wrap}

/* « Messages reçus » ⟷ « Réponses des entreprises » : un fondu discret
   à chaque bascule, pour que le changement se voie sans surprendre. */
#bloc-tournant > .card{animation:bloc-fondu .3s ease}
@keyframes bloc-fondu{from{opacity:.3}to{opacity:1}}

/* Les mini-boutons d'une réponse d'entreprise : on répond depuis le
   tableau de bord, sans ouvrir la fiche. TOUT PETITS, empilés l'un sur
   l'autre à droite de la ligne — deux réponses au moins tiennent dans
   le bloc. */
.rep-act{display:flex;flex-direction:column;gap:4px;flex:none;
  margin-left:auto;align-items:stretch}
.rep-act .btn{padding:3px 9px;font-size:.68rem;border-radius:7px;
  min-height:0;justify-content:center}
.rep-act .btn svg{width:11px;height:11px}

/* Le texte d'une réponse se lit EN ENTIER : il passe sur deux lignes
   s'il le faut, au lieu d'être coupé par des points de suspension. */
.rep-item .ri-body b,
.rep-item .ri-body small{white-space:normal;overflow:visible;text-overflow:clip}

/* Le pied « en colonne » d'une modale : de grands boutons empilés,
   pleine largeur — chaque choix se lit en entier, rien ne déborde. */
.pied-colonne{display:flex;flex-direction:column;gap:8px;width:100%}
.pied-colonne .btn{width:100%;justify-content:center}

/* La bascule du bloc tournant : deux RONDS dans l'en-tête — le plein
   dit où l'on est, cliquer sur l'autre y va sans attendre le manège. */
.bloc-bascule{display:inline-flex;gap:6px;margin-left:auto;align-items:center}
.bloc-bascule ~ .see{margin-left:12px}
.bloc-bascule .rond{width:9px;height:9px;border-radius:50%;padding:0;
  border:1.5px solid var(--ink-mute);background:transparent;cursor:pointer;
  transition:all .15s var(--ease)}
.bloc-bascule .rond.on{background:var(--brand);border-color:var(--brand)}
.bloc-bascule .rond:hover:not(.on){border-color:var(--ink)}


/* ═══════════════════════════════════════════════════════════════
   FRISE ÉTUDIANT — les mini-cartes du parcours (la mise en page est
   l'affaire du moteur rendreTemps, bloc « frise compacte » plus bas).

   Le code couleur, exactement celui du cahier des charges :
     gris ... future, ni débloquée ni planifiée
     orange grisé ... visite planifiée mais verrouillée
     orange ... visite planifiée et débloquée
     vert ... effectuée · rouge ... en retard
   Une étape débloquée porte le vert doux de l'avancée (contour +
   cadenas ouvert) — le vert plein reste celui de l'effectuée.
   ═══════════════════════════════════════════════════════════════ */

/* ---- La mini-carte ---- */
.fet-carte{position:relative;background:var(--surface);
  border:1.5px solid var(--border-2);border-radius:var(--r-md);
  padding:11px 12px 12px;display:flex;flex-direction:column;gap:5px;
  cursor:pointer;text-align:left;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),
    border-color .15s var(--ease)}
.fet-carte:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.fet-num{font-size:.66rem;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink-mute)}
.fet-titre{font-size:.83rem;line-height:1.32;padding-right:24px;color:var(--ink)}
.fet-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.fet-actions .btn{padding:4px 10px;font-size:.72rem;min-height:0}
.fet-actions .btn svg{width:12px;height:12px}

/* ---- La bille de statut, en haut à droite, avec son infobulle ---- */
.fet-bille{position:absolute;top:8px;right:8px;width:22px;height:22px;
  border-radius:50%;display:flex;align-items:center;justify-content:center}
.fet-bille svg{width:13px;height:13px}
.fet-bille::after{content:attr(data-tip);position:absolute;
  bottom:calc(100% + 8px);right:-4px;background:var(--ink);color:var(--surface);
  font-size:.7rem;font-weight:600;padding:5px 9px;border-radius:8px;
  white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .15s var(--ease);z-index:20;box-shadow:var(--sh-md)}
.fet-bille:hover::after{opacity:1}
.fb-verrou{background:var(--bg-2);color:var(--ink-soft)}
.fb-action{background:var(--info-soft);color:var(--info)}
.fb-debloque{background:var(--ok-soft);color:var(--ok-ink)}
.fb-planif{background:var(--warn-soft);color:var(--warn)}
.fb-fait{background:var(--ok);color:#fff}
.fb-retard{background:var(--danger);color:#fff}

/* ---- Le code couleur des cartes ---- */
.fet-carte.est-verrouillee{background:var(--bg-2);border-color:var(--border)}
.fet-carte.est-verrouillee .fet-titre{color:var(--ink-soft)}

/* Visite planifiée mais verrouillée : orange légèrement grisé — le
   repli (sans color-mix) reste un orange doux tout à fait lisible. */
.fet-carte.est-planifiee-verrouillee{background:var(--warn-soft);
  background:color-mix(in srgb,var(--warn-soft) 55%,var(--bg-2));
  border-color:var(--border-2);
  border-color:color-mix(in srgb,var(--warn) 35%,var(--border-2))}
.fet-carte.est-planifiee-verrouillee .fet-titre{color:var(--ink-2)}
.fet-carte.est-planifiee-verrouillee .fet-num{color:var(--warn-ink);opacity:.75}

.fet-carte.est-planifiee{background:var(--warn-soft);border-color:var(--warn)}
.fet-carte.est-planifiee .fet-num{color:var(--warn-ink)}

.fet-carte.est-effectuee{background:var(--ok-soft);border-color:var(--ok)}
.fet-carte.est-effectuee .fet-num{color:var(--ok-ink)}

.fet-carte.est-retard{background:var(--danger-soft);border-color:var(--danger)}
.fet-carte.est-retard .fet-num{color:var(--danger-ink)}

/* Visites SUSPENDUES (étudiant en maintien) : barrées, grisées — la
   carte reste cliquable pour expliquer pourquoi, mais sans bouton. */
.fet-carte.est-suspendue,.fet-carte.est-arretee{background:var(--bg-2);border-color:var(--border)}
.fet-carte.est-suspendue .fet-titre,.fet-carte.est-arretee .fet-titre{color:var(--ink-mute);text-decoration:line-through}
.fet-carte.est-suspendue .fet-num,.fet-carte.est-arretee .fet-num{color:var(--ink-mute)}

/* La petite ligne de contexte d'une carte (état + date d'un événement). */
.fet-sousdate{font-size:.68rem;font-weight:600;color:var(--ink-soft)}

/* Les médiations / rendez-vous de la frise Contrat : mêmes cartes, un
   liseré pointillé à gauche pour dire « action ponctuelle », pas une
   étape du parcours. */
.fet-carte.fet-evenement{border-left-width:3px}

/* L'enquête de satisfaction : un petit événement automatique accroché
   sous sa visite — discret, sans bouton. */
.fet-carte.fet-enquete-carte{padding:9px 11px 10px;gap:3px;cursor:pointer}
.fet-carte.fet-enquete-carte .fet-titre{font-size:.76rem;padding-right:22px}
.fet-carte.fet-enquete-carte.est-envoyee{background:var(--info-soft);border-color:var(--info)}
.fet-carte.fet-enquete-carte.est-envoyee .fet-num{color:var(--info-ink)}
.fet-carte.fet-enquete-carte.est-reponse{background:var(--ok-soft);border-color:var(--ok)}
.fet-carte.fet-enquete-carte.est-reponse .fet-num{color:var(--ok-ink)}
.fet-carte.fet-enquete-carte.est-erreur{background:var(--danger-soft);border-color:var(--danger)}
.fet-carte.fet-enquete-carte.est-erreur .fet-num{color:var(--danger-ink)}

/* La fin du parcours : pas de numéro, pas de statut, pas de bouton. */
.fet-carte.est-fin{background:var(--bg-2);border-style:dashed;cursor:default}
.fet-carte.est-fin:hover{transform:none;box-shadow:none}
.fet-carte.est-fin .fet-titre{color:var(--ink-soft);padding-right:0}
.fet-fin-ic{width:26px;height:26px;border-radius:9px;background:var(--surface);
  color:var(--ink-soft);display:flex;align-items:center;justify-content:center}
.fet-fin-ic svg{width:15px;height:15px}
.fet-fin-note{font-size:.7rem;color:var(--ink-mute);font-weight:600}

/* ═══════════ Le grand panneau d'une étape ═══════════
   Le tiroir du kit, sur les TROIS QUARTS de la page et sur le FOND DOUX
   de l'application : une bande de statut en tête qui dit l'essentiel en
   gros (le temps restant, le retard, la disponibilité), puis DEUX VUES
   qu'on choisit par des onglets pleine largeur — « Le brief » (objectif,
   consignes, dates) et « Réaliser » (le questionnaire, ou la preuve à
   fournir quand l'action ne se fait pas dans l'application). Le fond
   change de couleur d'une vue à l'autre : on sait où on est sans lire. */

.drawer-large{top:0;right:0;bottom:0;left:25%;width:auto;border-radius:0}
.drawer-large .drawer-b{padding:0;background:var(--bg)}
/* L'en-tête et le pied gardent leur bandeau pleine largeur, mais leur
   CONTENU se cale sur la colonne centrale : titre, cartes et boutons
   tombent tous sur le même axe, sans décrochage. */
.drawer-large .drawer-h,
.drawer-large .drawer-f{padding-left:max(26px, calc((100% - 720px) / 2));
  padding-right:max(26px, calc((100% - 720px) / 2))}
.drawer-large .drawer-f{background:var(--surface)}
@media(max-width:1100px){ .drawer-large{left:0} }

/* ── LA VUE ÉLARGIE ──
   Le même panneau, ouvert vers la gauche, et sa colonne centrale ouverte
   d'autant : c'est la place qu'il faut pour un questionnaire de visite,
   dont les grilles se serrent sur 720 px. Rien d'autre ne change, ni le
   fond, ni les cartes, ni les onglets. Réservée aux grands écrans : en
   dessous, le tiroir occupe déjà toute la page.

   ⚠️ `body .drawer` PLAFONNE TOUS LES TIROIRS À 760 px, et cette règle
   est à la fois plus forte que `.drawer-large` et écrite plus bas : sans
   sélecteur au moins aussi précis, la classe s'appliquait et le panneau
   ne bougeait pas d'un pixel. D'où `body .drawer.drawer-xl`, et non
   `.drawer-xl` seul.

   `left:auto` : le panneau normal se cale par sa gauche, l'élargi par sa
   largeur. Laisser les deux posés donnerait un tiroir qui part à 25 %
   ET fait 1180 px, donc qui déborde par la droite. */
body .drawer.drawer-large.drawer-xl{left:auto;right:0;
  width:min(1180px, calc(100vw - 48px))}
.drawer-xl .fep-vue-in{max-width:1120px}
.drawer-xl .drawer-h,
.drawer-xl .drawer-f{padding-left:max(26px, calc((100% - 1120px) / 2));
  padding-right:max(26px, calc((100% - 1120px) / 2))}
@media(max-width:1100px){
  body .drawer.drawer-large.drawer-xl{left:0;width:auto}
}

/* Le geste se pose en haut à droite de la vue, là où l'on cherche une
   commande de fenêtre, et il ne prend pas de ligne à lui seul. */
.fep-largeur{display:flex;justify-content:flex-end;margin:-4px 0 8px}
.fep-largeur .btn{padding:5px 10px}
@media(max-width:1100px){ .fep-largeur{display:none} }

/* La décision déjà prise, rappelée en tête du panneau « À valider ».
   Le corps du grand tiroir n'a pas de marge — celle-ci est la sienne. */
.vd-bandeau{margin:18px 26px 0}
@media(max-width:640px){ .vd-bandeau{margin:14px 16px 0} }

/* ---- La bande de statut, en tête ---- */
.fep-bande{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:15px 18px;border-radius:var(--r-lg);margin:0 auto 16px;
  max-width:1240px;background:var(--surface);border:1px solid var(--border)}
.fep-bande .fb-ic{width:42px;height:42px;border-radius:13px;flex:none;
  display:flex;align-items:center;justify-content:center}
.fep-bande .fb-ic svg{width:20px;height:20px}
.fep-bande .fb-txt{flex:1;min-width:180px}
.fep-bande .fb-txt b{display:block;font-size:1.05rem;line-height:1.25}
.fep-bande .fb-txt small{font-size:.78rem;color:var(--ink-soft);font-weight:600}
/* Le retard, lui, doit sauter aux yeux : il garde son aplat rouge. */
.fep-bande.est-retard{background:var(--danger-soft);border-color:var(--danger)}
.fep-bande.est-retard .fb-txt b{color:var(--danger-ink)}
/* EFFECTUÉE — l'allure d'un procès-verbal : fond neutre, un liseré vert
   à gauche, la pastille en vert doux. Le vert dit « c'est fait » sans
   repeindre toute la bande. */
.fep-bande.est-effectuee{background:var(--surface);border-color:var(--border);
  border-left:5px solid var(--ok)}
.fep-bande.est-effectuee .fb-txt b{color:var(--ink)}
.fep-bande.est-effectuee .fb-ic{background:var(--ok-soft);color:var(--ok-ink)}
.fep-bande.est-planifiee{background:var(--warn-soft);border-color:var(--warn)}
.fep-bande.est-planifiee .fb-txt b{color:var(--warn-ink)}
/* DÉBLOQUÉE — bande NEUTRE : seuls le cadenas ouvert et la pastille de
   statut portent le vert, une seule couleur à l'écran. */
.fep-bande.est-aeffectuer{background:var(--surface);border-color:var(--border)}
.fep-bande.est-aeffectuer .fb-txt b{color:var(--ink)}

/* ---- Les deux vues ----
   Les onglets tiennent toute la largeur, collés sous l'en-tête ; le fond
   de la vue change (crème pour le brief, blanc pour la réalisation) et
   le contenu reste dans une colonne centrée, jamais étalé. */
.fep{display:flex;flex-direction:column;min-height:100%}
.fep-onglets{display:flex;background:var(--surface);
  border-bottom:1px solid var(--border);margin:0;position:sticky;top:0;z-index:2}
.fep-onglets .tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:14px 10px;font-size:.87rem;
  font-weight:700;color:var(--ink-soft);border-bottom:3px solid transparent;
  cursor:pointer;transition:color .13s,border-color .13s}
.fep-onglets .tab svg{flex:none;width:15px;height:15px}
/* Une icône posée DANS un texte s'aligne sinon sur la ligne de base et
   flotte 4 px trop haut : on la recale. ⚠️ Cette règle ne touche QUE
   l'alignement — lui donner une taille écraserait toutes les tailles
   voulues du panneau (le cadenas de 32 px, la pastille de 20 px, les
   icônes de bouton de 16 px…), qui sont posées par des sélecteurs plus
   faibles ou écrits plus haut. */
.fep svg.ico{vertical-align:-.17em}
/* Là où le conteneur est déjà flex, il centre lui-même : pas de calage. */
.fep .fep-carte h5 svg.ico,.fep .fep-onglets svg.ico,
.fep .fep-date-ligne svg.ico,.fep .btn svg.ico,
.fep .fep-bande svg.ico,.fep .fep-enquete svg.ico,
.fep .badge svg.ico{vertical-align:0}
/* Les icônes restées en plein texte, elles, se calent sur la taille du
   texte qui les porte plutôt que sur les 18 px par défaut du kit. */
.fep p svg.ico,.fer-demande b svg.ico{width:14px;height:14px}
.fep-onglets .tab.on{color:var(--ink);border-bottom-color:var(--brand)}
.fep-vue{flex:1;padding:20px 26px 26px}
.fep-vue-in{max-width:720px;margin:0 auto}
.fep:not(.voir-droite) .fep-droite{display:none}
.fep.voir-droite .fep-gauche{display:none}
/* Le FOND d'une vue ne doit jamais valoir le blanc des cartes, sinon
   elles disparaissent. Deux fonds distincts, tous deux plus sourds que
   la carte — et pris sur des jetons, pour que le mode sombre suive. */
.fep:not(.voir-droite) .fep-vue{background:var(--fond-brief)}
.fep.voir-droite .fep-vue{background:var(--bg)}
.fep-gauche,.fep-droite{min-width:0}

/* ---- La réalisation : questionnaire ou preuve ---- */
.fer-onglets{display:flex;gap:5px;background:var(--bg-2);border-radius:99px;
  padding:4px;width:max-content;max-width:100%;margin:0 0 14px}
.fer-onglets span{display:flex;align-items:center;gap:6px;padding:7px 15px;
  border-radius:99px;font-size:.8rem;font-weight:700;color:var(--ink-soft);cursor:pointer}
.fer-onglets span svg{width:14px;height:14px}
.fer-onglets span.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
.fer-vue.est-cache{display:none}
.fer-demande{background:var(--info-soft);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:12px}
.fer-demande b{display:flex;align-items:center;gap:7px;font-size:.82rem;
  color:var(--info-ink);margin-bottom:3px}
.fer-demande b svg.ico{flex:none;vertical-align:0}
.fer-demande p{font-size:.81rem;line-height:1.5;color:var(--ink-2);margin:0}
/* La capture d'exemple : montrer l'écran attendu vaut mieux que le
   décrire. Cliquer l'ouvre en grand dans un onglet. */
.fer-exemple{margin:12px 0 0}
.fer-exemple img{display:block;width:100%;border-radius:var(--r-md);
  border:1px solid var(--border-2);background:var(--surface);cursor:zoom-in}

.fer-exemple figcaption{font-size:.72rem;color:var(--ink-soft);margin-top:6px;line-height:1.4}

/* Le compte rendu de réunion : les matières se lisent en deux paquets —
   les enseignements communs, puis les blocs professionnels du BTS. */
.fc-groupe{display:block;font-size:.68rem;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink-mute);margin:18px 0 10px;
  padding-bottom:5px;border-bottom:1px solid var(--border)}
.fc-groupe:first-child{margin-top:0}
/* ══════════ LES GRILLES DE CARTES DES TROIS LISTES ══════════
   Étudiants, Contrats et Suivi des classes s'affichent en cartes. La
   couleur vit sur le BORD GAUCHE, jamais en haut : c'est la grammaire
   de l'application (les étapes de frise sont déjà bordées à gauche).

   LES TROIS TEINTES DE FORMATION viennent de la DA FASUP' :
   l'orange de la marque, le brun de l'encre, le beige de la marque —
   ce dernier assombri juste ce qu'il faut pour rester visible sur
   blanc comme sur fond sombre. */
:root{
  /* La palette FASUP', telle que fournie. */
  --fa-orange:#F69D00;
  --fa-marron:#2E2017;
  --fa-beige:#FBDEAA;
  --fa-beige-clair:#FFF6E2;
  --fa-blanc:#F7F6F5;

  --f-mco:var(--fa-orange);
  --f-ndrc:var(--fa-marron);
  --f-gpme:var(--fa-beige);

  /* LE ROUGE DE L'URGENCE — un rouge VIF, et non le rouge brique de
     `--danger` (#D64545) qui tire sur le brun et se fondait dans les
     teintes chaudes de la DA. Il ne sert qu'au bloc « À solutionner » :
     `--danger` reste inchangé partout ailleurs, il porte trop de choses
     dans le kit pour être touché. */
  --urgence:#E4231A;
  --urgence-fond:#FFECEA;
  --urgence-encre:#A81109;
}
body[data-theme="dark"]{
  --urgence:#FF4A3D;
  --urgence-fond:#3A1512;
  --urgence-encre:#FFA79E;
}
/* Chaque teinte porte AUSSI son encre : ce qu'on écrit PAR-DESSUS elle
   quand elle sert de fond plein (les cartes de contrat). Du brun sur
   l'orange et sur le beige, du crème sur le brun. `--f-doux` est la
   même encre affaiblie (les lignes secondaires), `--f-voile` un voile
   pour les filets et les pastilles posés sur la couleur. */
.t-mco{--f:var(--f-mco);--f-encre:#2E2017;
  --f-doux:rgba(46,32,23,.66);--f-voile:rgba(46,32,23,.12)}
.t-ndrc{--f:var(--f-ndrc);--f-encre:#FBDEAA;
  --f-doux:rgba(251,222,170,.72);--f-voile:rgba(251,222,170,.16)}
.t-gpme{--f:var(--f-gpme);--f-encre:#2E2017;
  --f-doux:rgba(46,32,23,.62);--f-voile:rgba(46,32,23,.11)}
/* Sur fond sombre, le brun de l'encre disparaît : NDRC prend un brun
   éclairci, qui reste le même brun à l'œil — et son encre se retourne,
   puisque le fond est devenu clair. La bande crème des en-têtes de
   colonnes doit s'assombrir, sinon elle éblouit. */
body[data-theme="dark"]{
  --f-ndrc:#C9A98F;
  --fa-beige-clair:#241C15;
}
body[data-theme="dark"] .t-ndrc{--f-encre:#2E2017;
  --f-doux:rgba(46,32,23,.66);--f-voile:rgba(46,32,23,.12)}

/* Un sélecteur discret, à côté du titre : il ne doit pas peser plus
   qu'un bouton d'action. */
.select-sm{font-size:.78rem;padding:6px 26px 6px 10px;min-width:0;width:auto;
  background-position:right 8px center}

/* ── LE RUBAN DES CLASSES ──
   Les classes se CLIQUENT, elles ne se déroulent pas : elles sont six,
   on doit les voir toutes et en changer d'un geste. La liste déroulante
   est réservée aux référents, qui sont nombreux et qu'on cherche par
   son nom. Ordre MCO, NDRC, GPME ; la pastille porte la teinte du BTS.
   La classe active se remplit de crème, cerclée de sa teinte : lisible
   sur les trois couleurs, y compris le beige de GPME sur lequel du
   blanc ne se verrait pas. */
/* LA LIGNE DES CLASSES : les pastilles à gauche, les filtres à droite —
   recherche et référent. Tout ce qui filtre est sur la même ligne, à la
   même hauteur ; la barre du titre ne garde que les actions de la page. */
.cl-barre{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:4px 0 22px}
.cl-ruban{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.cl-outils{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
/* Les filtres prennent la forme des pastilles : même hauteur, mêmes
   bouts ronds — sinon la ligne se voit en trois morceaux. */
.cl-outils .input,.cl-outils .select{height:31px;border-radius:999px;
  font-size:.79rem}
.cl-outils .select{padding:0 30px 0 14px;background-position:right 11px center}
.cl-chip{display:inline-flex;align-items:center;gap:7px;height:31px;padding:0 13px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);
  font:inherit;font-size:.79rem;font-weight:700;color:var(--ink-2);cursor:pointer;
  white-space:nowrap;transition:border-color .12s,background .12s,color .12s}
.cl-chip i{width:9px;height:9px;border-radius:50%;background:var(--f);flex:none}
.cl-chip:hover{border-color:var(--border-2);color:var(--ink)}
.cl-chip.on{background:var(--fa-beige-clair);color:var(--ink);
  border-color:var(--f);box-shadow:inset 0 0 0 1px var(--f)}
/* « Rupture » : la pastille de queue, après les classes. Elle porte le
   rouge de l'urgence — un contrat rompu n'est pas une classe de plus.
   Un filet la sépare des classes, comme « Tous » en tête. */
.cl-rupture{margin-left:6px;position:relative;color:var(--urgence-encre)}
.cl-rupture::before{content:'';position:absolute;left:-9px;top:6px;bottom:6px;
  width:1px;background:var(--border)}
.cl-rupture i{background:var(--urgence)}
.cl-rupture em{font-style:normal;color:var(--ink-mute);margin-left:2px}
.cl-rupture.on{background:var(--urgence);border-color:var(--urgence);color:#fff;
  box-shadow:none}
.cl-rupture.on i{background:rgba(255,255,255,.85)}
.cl-rupture.on em{color:rgba(255,255,255,.8)}

/* « Tous les contrats » : la pastille de tête, sans teinte puisqu'elle
   ne désigne aucune formation. Un filet la sépare des classes. */
.cl-tout{margin-right:6px;position:relative}
.cl-tout::after{content:'';position:absolute;right:-9px;top:6px;bottom:6px;
  width:1px;background:var(--border)}
.cl-tout.on{background:var(--ink);border-color:var(--ink);color:var(--surface);
  box-shadow:none}

/* ══════════ LES PAGES DE LISTE : 24 LIGNES À L'ÉCRAN ══════════
   Une classe compte 24 alternants : on doit pouvoir en voir une entière
   sans toucher à la molette. Tout ce qui est au-dessus de la première
   ligne est donc rogné — titre resserré, filtres remontés dans la barre
   du titre (plus de rangée de pastilles), en-têtes de colonnes fins. */
.page[data-liste] .page-h{margin-bottom:12px;align-items:center}
.page[data-liste] .ph-actions{gap:8px;flex-wrap:wrap}
.page[data-liste]{padding-top:18px}

.gc{display:grid;gap:12px;align-items:start}
.gc-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.gc-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* ── LA PISTE DES CLASSES ──
   Le damier en trois colonnes a laissé place à UNE SEULE RANGÉE qu'on
   fait défiler soi-même : les classes se suivent dans l'ordre MCO,
   NDRC, GPME, et celle qui passe au centre se détache. Rien ne bouge
   tout seul — c'est une page de travail, on va chercher sa classe.
   La page s'élargit au-delà des 1240 px habituels (`data-damier`, posé
   par la liste des classes et retiré à chaque changement de page) pour
   qu'on voie trois cartes entières plutôt que deux et demie. */
/* ⚠️ PAS d'élargissement au-delà des 1240 px des autres pages : le
   carrousel ne montre que trois cartes, il n'a pas besoin de toute la
   largeur de l'écran, et une page plus large que les autres décale son
   titre vers la gauche — « moins collé à gauche, les cartes ne prennent
   pas énormément de place ». Colonne centrée, comme partout ailleurs. */
.page[data-damier]{display:flex;flex-direction:column}
/* Le carrousel se CENTRE dans la hauteur restante — mêmes marges auto
   que le tableau de bord : elles retombent à zéro si la page devient
   plus haute que l'écran, donc rien n'est jamais rogné. Avant, tout
   était collé sous le titre et le bas de page restait vide. */
.page[data-damier] #zone-classes{width:100%;margin-top:auto;margin-bottom:auto}

/* ══════════ LA BARRE AU-DESSUS DE LA PISTE ══════════
   À gauche les années — celle de la carte du milieu est allumée, et un
   clic saute à l'autre. À droite, le compte et l'invitation à faire
   défiler : sans elle, on croit que les trois cartes visibles sont tout
   ce que le campus possède. */
/* ── LA LÉGENDE SOUS LA CARTE DU MILIEU ──
   Elle DIT l'année de la carte centrée, elle ne la commande pas : pas
   de bordure, pas de fond, rien qui ressemble à un bouton. Le chevron
   pointe vers le haut, sur la carte dont elle parle. */
.cl-vue{position:relative;display:flex;align-items:center;justify-content:center;
  gap:9px;margin:2px 0 0;padding-top:13px;text-align:center;min-height:22px}
.cl-vue-fleche{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;
  border-bottom:7px solid var(--border-2)}
.cl-vue-an{font-size:.92rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}

/* L'invitation à défiler. La flèche pousse doucement vers la droite —
   c'est le seul mouvement de la page, et il dit exactement le geste
   qu'on attend. */
/* Le sous-titre porte la phrase entière : la ligne du titre ne se
   contente plus de trois mots au-dessus d'un vide. Elle a donc le droit
   de s'étendre, contrairement aux autres pages. */
.page[data-damier] .page-h{margin-bottom:14px}
.page[data-damier] .page-h p{max-width:none}
.cl-defiler{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  color:var(--ink-mute);font-weight:600}
.cl-defiler svg{width:15px;height:15px;opacity:.55;
  animation:cl-pousse 2.4s ease-in-out infinite}
@keyframes cl-pousse{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.cl-defiler svg{animation:none}}

/* TROIS CARTES À L'ÉCRAN, pas une de plus : leur largeur est une
   fraction de la piste, on fait défiler pour voir les suivantes. */
.cl-piste{--ecart:26px;
  display:flex;gap:var(--ecart);overflow-x:auto;overflow-y:hidden;
  padding:26px 2px 24px;
  /* ⚠️ `proximity`, PAS `mandatory`. Avec `mandatory` on ne peut pas
     s'arrêter entre deux cartes : le navigateur ramène TOUJOURS à la
     plus proche, et un défilement lent se faisait renvoyer en arrière
     au moindre relâchement. `proximity` laisse glisser tranquillement
     et ne raccroche que si l'on s'arrête tout près d'une carte. */
  scroll-snap-type:x proximity;
  /* ⚠️ PAS DE BARRE DE DÉFILEMENT. Ce n'est pas une question de goût :
     tirer sur le curseur d'une barre native pendant que le rattrapage
     déplace `scrollLeft` sous elle, c'est deux mains sur le même volant.
     La barre gagnait, et la piste sautait. On fait défiler à la
     molette, au doigt ou au trackpad ; l'invitation au-dessus le dit. */
  scrollbar-width:none;-ms-overflow-style:none;
  perspective:1400px}
.cl-piste::-webkit-scrollbar{display:none}
.cl-piste > .gcarte{flex:0 0 calc((100% - 2 * var(--ecart)) / 3);scroll-snap-align:center}
/* Un campus d'UNE seule classe : rien à faire tourner, la carte se pose
   au milieu plutôt que collée au bord gauche. */
.cl-piste.seule{justify-content:center}
@media (max-width:1000px){
  .cl-piste > .gcarte{flex:0 0 calc((100% - var(--ecart)) / 2)}
}
@media (max-width:680px){
  .cl-piste > .gcarte{flex:0 0 86%}
}
@media (max-width:1180px){.gc-5{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:980px){.gc-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gc-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.gc-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gc-3{grid-template-columns:1fr}}
@media (max-width:460px){.gc-5{grid-template-columns:1fr}}

.gcarte{background:var(--surface);border:1px solid var(--border);
  border-radius:22px;overflow:hidden;cursor:pointer;min-width:0;
  display:flex;flex-direction:column;
  /* `--loin` vaut 0 pour la carte du milieu, 1 pour ses voisines
     (posé par suivreCentre) : toute la profondeur en découle.
     Celle du milieu est plus GRANDE, plus HAUTE, plus NETTE et de
     face ; les autres reculent, redescendent et s'inclinent vers
     l'intérieur, comme des pages qu'on feuillette. */
  --loin:1; --cote:0;
  transform-origin:50% 60%;
  transform:scale(calc(1 - .09 * var(--loin)))
            translateY(calc(var(--loin) * 14px))
            rotateY(calc(var(--cote) * var(--loin) * 9deg));
  opacity:calc(1 - .3 * var(--loin));
  box-shadow:0 4px 14px rgba(46,32,23,.06);
  transition:box-shadow .3s,opacity .3s,transform .3s}
.gcarte.au-centre{box-shadow:0 22px 48px rgba(46,32,23,.18)}
.gcarte:hover{opacity:1;box-shadow:0 22px 48px rgba(46,32,23,.18)}
/* Sans mouvement demandé par le système, tout reste à plat. */
@media (prefers-reduced-motion:reduce){
  .gcarte{transform:none;opacity:1;transition:box-shadow .2s}
}

/* L'intertitre d'un groupe de cartes : le nom, le compte, un filet. */
.gc-groupe{display:flex;align-items:center;gap:8px;margin:11px 0 6px;
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-soft)}
.gc-groupe:first-child{margin-top:0}
.gc-groupe i{width:10px;height:10px;border-radius:3px;background:var(--f);flex:none}
.gc-groupe em{font-style:normal;color:var(--ink-mute);font-weight:700}
.gc-groupe s{flex:1;height:1px;background:var(--border);text-decoration:none}

/* ── LA LISTE DES ÉTUDIANTS ──
   Une classe, 25 alternants au plus. Sur une seule colonne, la liste
   fait un ruban maigre au milieu du vide ; en DEUX COLONNES elle occupe
   la page, tient sur un écran, et se lit comme un annuaire — la
   première moitié de l'alphabet à gauche, la seconde à droite. */
/* ── LE TABLEAU DES ÉTUDIANTS ──
   Une carte blanche, des colonnes, une ligne par alternant. Le visage
   et le nom tiennent la première colonne ; le statut ferme la ligne en
   pastille. Pas de filets pleine largeur : un trait en retrait sous
   l'en-tête, rien entre les lignes — c'est le survol qui découpe.
   Les galets et leurs rangées défilantes ont été essayés puis
   abandonnés : jolis, mais on ne balaye pas une colonne avec. */
.tbl{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:8px 10px 10px}
.tbl-tetes,.tbl-l{display:grid;align-items:center;gap:14px;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1.4fr) minmax(0,1.2fr) 108px 128px;
  padding:0 12px}
.tbl-tous .tbl-tetes,.tbl-tous .tbl-l{
  grid-template-columns:minmax(0,1.5fr) 88px minmax(0,1.4fr) minmax(0,1.2fr) 108px 128px}
.tbl-tetes{height:38px;font-size:.67rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-mute);
  border-bottom:1px dashed var(--border);margin-bottom:4px}
.tbl-l{height:52px;cursor:pointer;border-radius:12px;
  transition:background .1s,box-shadow .1s}
.tbl-l:hover{background:var(--fa-beige-clair);box-shadow:inset 0 0 0 1px var(--fa-beige)}
/* ── LE BLOC « À SOLUTIONNER » ──
   Ce ne sont pas des alternants à surveiller, ce sont des situations à
   RÉGLER : un maintien ne doit pas durer. Un simple fond teinté sur la
   ligne se voyait trop peu (« c'est quand même assez clair le fond ») ;
   il faut un ENCADRÉ, avec son bandeau ROUGE plein en haut. C'est la
   seule chose de la page qui crie, et c'est voulu. ⚠️ Pas de barre de
   couleur à gauche des lignes : Théo n'en veut pas.
   Le cadre est une ombre INTÉRIEURE et non une bordure : une bordure
   décalerait les lignes du bloc de 1,5 px et les colonnes ne seraient
   plus alignées avec celles du reste du tableau. */
.tbl-urgent{border:0;border-radius:14px;overflow:hidden;
  box-shadow:inset 0 0 0 1.5px var(--urgence);
  background:var(--urgence-fond);margin:4px 0 6px}
.tbl-urgent-h{display:flex;align-items:center;gap:9px;padding:9px 14px;
  background:var(--urgence);color:#fff;
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.tbl-urgent-h svg.ico{width:16px;height:16px;flex:none}
.tbl-urgent-n{background:rgba(255,255,255,.28);border-radius:999px;
  padding:1px 9px;font-size:.72rem;font-variant-numeric:tabular-nums}
.tbl-urgent .tbl-l{border-radius:0}
.tbl-urgent .tbl-l:hover{background:rgba(255,255,255,.6);box-shadow:none}
.tbl-urgent .tbl-l + .tbl-l{box-shadow:inset 0 1px 0 rgba(168,17,9,.15)}
.tbl-urgent .tbl-qui b{font-weight:800}
/* Le statut, ici, est plein : c'est le mot qu'on doit lire de loin.
   Maintien et rupture sont tous deux en rouge — c'est le mot lui-même
   qui les distingue, pas la couleur. */
.tbl-urgent .pastille{background:var(--urgence);color:#fff}
.tbl-urgent .pastille i{display:none}
.tbl-urgent .tbl-vide{color:var(--urgence-encre);font-weight:600}
/* Le corps défile, l'en-tête reste : les colonnes ne s'échappent
   jamais par le haut. */
.tbl-corps{max-height:min(62vh,760px);overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin}
.tbl-corps::-webkit-scrollbar{width:8px}
.tbl-corps::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:999px}
.tbl-corps::-webkit-scrollbar-track{background:transparent}
.tbl-qui{display:flex;align-items:center;gap:11px;min-width:0}
.tbl-qui .ava{width:32px;height:32px;font-size:.66rem;flex:none}
.tbl-qui b{font-size:.85rem;font-weight:700;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl-classe{font-size:.78rem;font-weight:800;color:var(--ink-2);white-space:nowrap}
.tbl-c{font-size:.82rem;color:var(--ink-2);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl-vide{font-style:normal;color:var(--ink-mute)}
/* Le compteur « sans contrat depuis N jours » : VIDE pour les alternants
   sous contrat, net et rouge dans le bloc d'urgence — c'est le seul
   endroit où il veut dire quelque chose. */
.tbl-duree{font-size:.8rem;color:var(--ink-2);white-space:nowrap}
.tbl-j{font-weight:700;font-variant-numeric:tabular-nums}
.tbl-urgent .tbl-j{color:var(--urgence-encre);font-weight:800}

/* Le trait qui sépare les classes des pastilles de queue (Abandons,
   Rupture) sur la ligne du ruban. */
.cl-sep{width:1.5px;align-self:stretch;background:var(--border);
  margin:2px 6px;flex:none;border-radius:1px}

/* Le bandeau « Ruptures » de la vue Tous les contrats : rouge. */
.gc-groupe.gc-rupture{color:var(--danger)}
.gc-groupe.gc-rupture i{background:var(--danger)}

/* ── Le bloc BLEU « En recherche », jumeau du bloc rouge (8 sept 2026) :
   on rebrande les jetons d'urgence en bleu à l'intérieur du bloc, et
   toutes les règles ci-dessus suivent d'elles-mêmes. ── */
.tbl-recherche{--urgence:var(--info);--urgence-fond:var(--info-soft);
  --urgence-encre:var(--info-ink)}
.tbl-recherche .tbl-l + .tbl-l{box-shadow:inset 0 1px 0 rgba(36,80,168,.15)}
/* LE SÉPARATEUR entre les deux blocs : ceux qu'il faut regarder
   d'abord, puis tout le monde. Un filet le prolonge à droite, pour
   qu'il tranche la colonne sans peser. */
.tbl-bande{display:flex;align-items:center;gap:8px;padding:16px 12px 8px;
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-soft)}
.tbl-bande:first-child{padding-top:6px}
.tbl-bande svg.ico{width:14px;height:14px;flex:none}
.tbl-bande em{font-style:normal;color:var(--ink-mute)}
.tbl-bande::after{content:'';flex:1;height:1px;background:var(--border)}


/* La pastille de statut : un point de couleur et le mot. */
.pastille{display:inline-flex;align-items:center;gap:6px;
  background:var(--bg-2);border-radius:999px;padding:4px 10px;
  font-size:.68rem;font-weight:800;color:var(--ink-2);white-space:nowrap}
.pastille i{width:6px;height:6px;border-radius:50%;flex:none}

/* La recherche, sur la ligne des classes. */
.rech{flex:none}
.rech .input{width:250px;padding-left:36px}
.rech svg{left:13px;width:15px;height:15px}

@media (max-width:900px){
  .tbl-tetes,.tbl-l,.tbl-tous .tbl-tetes,.tbl-tous .tbl-l{
    grid-template-columns:minmax(0,1fr) 116px}
  .tbl-tetes span:nth-child(n+2),.tbl-classe,.tbl-l .tbl-c,.tbl-duree{display:none}
  .tbl-tetes span:last-child{display:block}
  .rech .input{width:100%}
}

/* ── LES CONTRATS EN PETITES CARTES ──
   Six par ligne, quatre étages : une classe entière tient à l'écran.
   La forme dit la page : les ÉTUDIANTS sont un annuaire en lignes et
   colonnes, les CONTRATS un jeu de cartes — on ne confond plus les
   deux d'un coup d'œil. Sur chaque carte, quatre informations et pas
   une de plus : l'entreprise, l'alternant, le tuteur, le statut ; la
   teinte du BTS de l'alternant borde à gauche. */
.gk-cartes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px}
/* LA CARTE EST BLANCHE, ET C'EST SON PIED QUI PORTE LA COULEUR —
   l'orange MCO, le brun NDRC, le beige GPME. L'inverse avait été
   essayé (tout le carton coloré, bande blanche en bas) ; Théo a
   demandé l'inversion. Angles très arrondis, aucune bordure. */
.gkc{background:var(--surface);color:var(--ink);
  border:1px solid var(--border);border-radius:18px;overflow:hidden;
  padding:12px 13px 0;cursor:pointer;min-width:0;display:flex;flex-direction:column;
  transition:box-shadow .12s,transform .12s}
.gkc:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
/* Le nom d'entreprise peut tenir sur deux lignes — « Groupe Lefèvre &
   Fils » ne rentre pas dans 180 px — mais la hauteur reste la même
   pour toutes les cartes, sinon la grille se dérègle. */
.gkc-ent{font-size:.85rem;font-weight:800;color:var(--ink);line-height:1.25;
  min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word}
.gkc-alt{font-size:.79rem;font-weight:600;color:var(--ink-2);margin-top:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gkc-tut{font-size:.72rem;color:var(--ink-soft);margin:2px 0 11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gkc-tut em{font-style:normal;color:var(--ink-mute)}
/* LE PIED DE LA CARTE PORTE LA COULEUR : une bande pleine largeur,
   collée au bas du carton blanc, à la teinte du BTS et avec son encre.
   `margin-top:auto` la colle en bas même quand la carte est étirée par
   sa voisine. */
.gkc-bas{margin:auto -13px 0;padding:9px 13px;
  background:var(--f,var(--bg-2));color:var(--f-encre,var(--ink));
  display:flex;align-items:center;gap:8px}
/* ⚠️ SUR LE PIED ORANGE (MCO), L'ÉCRITURE EST EN BEIGE, pas en brun —
   demandé tel quel. Le beige clair est le plus lisible des beiges sur
   cet orange ; le brun reste sur le pied BEIGE de GPME, où du beige sur
   du beige ne se verrait pas du tout. */
.t-mco .gkc-bas{color:var(--fa-beige-clair)}
.t-mco .gkc-bas .pastille{background:rgba(46,32,23,.22);color:var(--fa-beige-clair)}
.t-mco .gkc-classe{color:rgba(255,246,226,.8)}
/* La classe, seulement en vue « tous les contrats » : discrète, à
   droite du statut. */
.gkc-classe{margin-left:auto;font-size:.68rem;font-weight:800;
  color:var(--f-doux,var(--ink-soft));white-space:nowrap}
/* Les pastilles posées SUR la couleur : un voile de l'encre, jamais les
   badges habituels — leurs couleurs se battraient avec le fond. Le
   point garde, lui, la couleur du statut. */
.gkc-pilule{display:inline-flex;align-items:center;gap:6px;flex:none;
  background:var(--f-voile,var(--bg-2));border-radius:999px;padding:3px 9px;
  font-size:.66rem;font-weight:800;white-space:nowrap}
.gkc-bas .pastille{background:var(--f-voile,var(--bg-2));color:inherit}
.gkc-pilule i{width:6px;height:6px;border-radius:50%;flex:none}
/* Le « +1 » est, lui, sur le blanc du haut : fond neutre. */
.gkc-alt .gkc-pilule{margin-left:6px;padding:1px 7px;font-size:.62rem;
  background:var(--warn-soft);color:var(--warn-ink)}
/* ── « TOUS LES CONTRATS » : UNE RANGÉE PAR BTS ──
   Une ligne MCO, une ligne NDRC, une ligne GPME, et dans chacune les
   cartes se poussent vers la droite : on fait défiler la rangée pour
   parcourir tout un diplôme, sans jamais quitter les deux autres des
   yeux. Trois rangées, trois couleurs, la page se lit d'un regard. */
.gk-rangs{display:flex;flex-direction:column;gap:20px}
.gk-piste{position:relative}
/* Un voile au bord droit : il dit qu'il reste des cartes derrière. */
.gk-piste::after{content:'';position:absolute;top:0;bottom:12px;right:0;width:34px;
  pointer-events:none;border-radius:0 18px 18px 0;
  background:linear-gradient(90deg,transparent,var(--bg))}
.gk-file{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
  padding:2px 34px 12px 2px;scroll-snap-type:x proximity;
  scrollbar-width:thin}
.gk-file > .gkc{flex:0 0 196px;scroll-snap-align:start}
.gk-file::-webkit-scrollbar{height:8px}
.gk-file::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:999px}
.gk-file::-webkit-scrollbar-track{background:transparent}

/* On tient les SIX colonnes le plus longtemps possible : c'est ce qui
   fait entrer une classe entière — vingt-quatre contrats — en quatre
   étages sur un seul écran. */
@media (max-width:1040px){.gk-cartes{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:900px){.gk-cartes{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.gk-cartes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:580px){.gk-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.gk-cartes{grid-template-columns:1fr}}

/* Le coin haut-droit d'une fiche de classe : la date de rentrée, et
   dessous l'alerte. Empilés et alignés à droite. */
.cl-coin{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.cl-coin .badge{white-space:nowrap}

/* ── LA CARTE D'UNE CLASSE ──
   De haut en bas : la couverture teintée (le diplôme et l'état), le
   nom, la rentrée, la prochaine étape, les trois chiffres, la jauge,
   puis le référent. Rien d'autre — c'est l'essentiel qu'on garde. */
/* La couverture porte LE NOM DE LA CLASSE — « MCO 1 », pas « MCO »
   avec « MCO 1 » répété juste dessous — et l'état, à droite. */
.gcl-couv{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:20px 22px;min-height:86px;background:var(--f,var(--bg-2));
  color:var(--f-encre,var(--ink))}
.gcl-bts{font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
.gcl-etat{background:var(--f-voile,var(--bg-2));border-radius:999px;
  padding:4px 11px;font-size:.66rem;font-weight:800;white-space:nowrap}
.gcl-etat.r{background:var(--danger);color:#fff}

.gcl-corps{padding:16px 20px 16px;display:flex;flex-direction:column;flex:1}
.gcl-rentree{display:flex;align-items:center;gap:6px;font-size:.75rem;
  color:var(--ink-soft);font-weight:500}
.gcl-rentree svg.ico{width:13px;height:13px;flex:none}

/* LA PROCHAINE ÉTAPE, dans son propre encart : c'est l'action à mener,
   elle ne doit pas se confondre avec le reste de la carte. */
.gcl-suite{margin-top:13px;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--bg-2);min-width:0}
.gcl-suite .gcl-lab{display:block;font-size:.6rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:2px}
.gcl-suite b{display:block;font-size:.83rem;font-weight:700;color:var(--ink);
  line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcl-suite small{display:block;font-size:.72rem;color:var(--ink-soft);margin-top:1px}
.gcl-suite.r{border-color:var(--danger-soft);background:var(--danger-soft)}
.gcl-suite.r b,.gcl-suite.r small{color:var(--danger)}

/* LES TROIS CHIFFRES, comme les trois mesures d'une carte de voyage. */
.gcl-mesures{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.gcl-m{text-align:center;min-width:0}
.gcl-m b{display:block;font-size:1.05rem;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums}
.gcl-m small{display:block;font-size:.63rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--ink-soft);margin-top:2px}
.gcl-m.alerte b{color:var(--warn)}

.gcl-jauge{height:6px;border-radius:999px;background:var(--bg-2);
  overflow:hidden;margin-top:14px}
.gcl-jauge i{display:block;height:100%;border-radius:999px;background:var(--f,var(--brand))}

/* ══ LE BROUILLON D'UN QUESTIONNAIRE (14 sept 2026) ══
   La saisie part en base au fil de la frappe : une ligne discrète le dit,
   pour qu'on sache qu'on peut fermer le panneau sans rien perdre. */
.bd-etat{display:flex;align-items:center;gap:7px;margin:0 0 12px;font-size:.74rem;
  color:var(--ink-mute);min-height:18px}
.bd-etat.enregistre{color:var(--ok-ink)}
.bd-etat.rate{color:var(--danger)}
.bd-etat svg.ico{width:13px;height:13px;flex:none}

/* ══ LES ENQUÊTES DE SATISFACTION (14 sept 2026) ══
   L'onglet « Satisfaction » des fiches classe et alternant : une carte
   par enquête, ses compteurs, ses moyennes, et — repliés — les
   commentaires anonymes puis le suivi nominatif des envois. */
.sat-carte{margin-bottom:14px}
.sat-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sat-tete h4{margin:0 0 2px}
.sat-jauge{height:8px;border-radius:999px;background:var(--bg-2);overflow:hidden;margin:12px 0 10px}
.sat-jauge i{display:block;height:100%;border-radius:999px;background:var(--ok)}
.sat-compteurs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.sat-c{border:1px solid var(--border);border-radius:var(--r-md);padding:9px 12px;background:var(--bg)}
.sat-c b{display:block;font-size:1.05rem;line-height:1.2}
.sat-c b small{font-size:.72rem;font-weight:600;color:var(--ink-mute)}
.sat-c span{font-size:.72rem;color:var(--ink-soft)}
.sat-c.t-ok b{color:var(--ok-ink)} .sat-c.t-brand b{color:var(--brand-700)} .sat-c.t-info b{color:var(--info-ink)}
.sat-mat{border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden}
.sat-mat > b{display:block;padding:9px 13px;background:var(--brand-50);font-size:.84rem;
  border-bottom:1px solid var(--brand-100)}
.sat-q{display:grid;grid-template-columns:minmax(0,1fr) 92px 96px;gap:10px;align-items:center;
  padding:9px 13px;border-bottom:1px solid var(--border);font-size:.82rem}
.sat-q:last-child{border-bottom:0}
.sat-q small{font-size:.7rem;color:var(--ink-mute);text-align:right}
.sat-note{font-weight:800;text-align:center;border-radius:999px;padding:3px 0;font-size:.78rem}
.sat-note.bien{background:var(--ok-soft);color:var(--ok-ink)}
.sat-note.moyen{background:var(--warn-soft);color:var(--warn-ink)}
.sat-note.faible{background:var(--danger-soft);color:var(--danger-ink)}
.sat-com{margin:8px 0 0;padding:9px 12px;background:var(--bg-2);border-radius:var(--r-md);
  font-size:.83rem;line-height:1.5;font-style:italic}
.sat-plus{margin-top:10px}
.sat-plus summary{cursor:pointer;font-size:.8rem;font-weight:700;color:var(--brand-700);
  padding:6px 0}
.sat-suivi{display:flex;flex-direction:column;margin-top:6px}
.sat-l{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:10px;
  padding:8px 0;border-bottom:1px solid var(--border);font-size:.78rem;color:var(--ink-soft)}
.sat-l:last-child{border-bottom:0}
.sat-l b{font-size:.82rem;color:var(--ink)}
.sat-ok{color:var(--ok-ink);font-weight:700}
.sat-attente{color:var(--ink-mute)}
.sat-signature{display:flex;align-items:center;gap:12px;margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--border)}
/* Le détail NOMINATIF : qui a répondu quoi, et sa signature. */
.sat-h{margin:16px 0 8px;font-size:.84rem;font-weight:800}
.sat-personnes{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.sat-pers{border-bottom:1px solid var(--border)}
.sat-pers:last-child{border-bottom:0}
.sat-pers > summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto) 78px;gap:10px;
  align-items:center;padding:10px 13px;cursor:pointer;font-size:.83rem;list-style:none}
.sat-pers > summary::-webkit-details-marker{display:none}
.sat-pers > summary:hover{background:var(--bg)}
.sat-pers.a-repondu > summary{background:var(--ok-soft)}
.sat-pers[open] > summary{background:var(--brand-50)}
.sat-etat{font-size:.76rem}
.sat-detail{padding:4px 13px 14px;background:var(--bg)}
.sat-note.vide{background:var(--bg-2);color:var(--ink-mute)}
/* Le résumé de la satisfaction d'un alternant, en tête de son onglet. */
.sat-resume{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.sat-gros{font-size:1.7rem;font-weight:800;line-height:1.1;color:var(--brand-700)}
.sat-gros small{font-size:.9rem;color:var(--ink-mute);font-weight:700}
.sat-r-txt{font-size:.84rem;color:var(--ink-soft);flex:1;min-width:180px}
/* La pastille posée en haut de la fiche de l'alternant. */
.sat-pastille-zone:empty{display:none}
.sat-pastille-zone{margin:10px 0 2px}
.sat-badge{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:800;
  padding:6px 12px;border-radius:999px}
.sat-badge svg.ico{width:14px;height:14px}
.sat-badge.bien{background:var(--ok-soft);color:var(--ok-ink)}
.sat-badge.moyen{background:var(--warn-soft);color:var(--warn-ink)}
.sat-badge.faible{background:var(--danger-soft);color:var(--danger-ink)}
@media (max-width:640px){
  .sat-pers > summary{grid-template-columns:1fr auto;gap:6px}
  .sat-etat{grid-column:1/-1}
}
@media (max-width:640px){
  .sat-compteurs{grid-template-columns:1fr}
  .sat-q{grid-template-columns:1fr auto;gap:6px}
  .sat-q small{display:none}
  .sat-l{grid-template-columns:1fr;gap:2px}
}

/* ══ LES SIGNATURES DES MISSIONS (11 sept 2026) ══
   Le bloc « Signatures » à la fin de chaque mission : une ligne par
   participant (nom, rôle, case de signature, date), le compteur en
   tête, la feuille papier au pied. Vert quand tout le monde a signé. */
.sig-bloc{margin-top:18px;border:1.5px solid var(--border);border-radius:14px;
  padding:14px 16px 12px;background:var(--surface)}
.sig-bloc.complet{border-color:var(--ok)}
.sig-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.sig-tete b{font-size:.92rem}
.sig-compte i{font-style:normal;font-size:.72rem;font-weight:800;border-radius:999px;padding:3px 10px}
.sig-ok{background:var(--ok-soft);color:var(--ok-ink)}
.sig-manque{background:var(--warn-soft);color:var(--warn-ink)}
.sig-l{display:grid;grid-template-columns:minmax(0,1fr) 160px minmax(0,140px);gap:12px;
  align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.sig-qui b{display:block;font-size:.84rem}
.sig-qui small{display:block;font-size:.72rem;color:var(--ink-mute);margin-top:1px}
.sig-apercu{height:54px;border:1.5px dashed var(--border-2);border-radius:10px;display:flex;
  align-items:center;justify-content:center;background:var(--bg-2);overflow:hidden}
.sig-apercu small{color:var(--ink-mute);font-size:.72rem}
.sig-l.signe .sig-apercu{border-style:solid;border-color:var(--ok);background:#fff}
.sig-trace{width:100%;height:100%}
.sig-quand small{display:block;font-size:.7rem;color:var(--ink-soft);line-height:1.35}
.sig-retirer{font-size:.72rem;color:var(--ink-mute);font-weight:600}
.sig-ajout{margin-top:8px}
.sig-feuille{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:10px;padding:8px 12px;border-radius:10px;background:var(--ok-soft);color:var(--ok-ink);
  font-size:.78rem;font-weight:700}
.sig-feuille svg.ico{width:14px;height:14px;vertical-align:-2px}
.sig-feuille-g{display:flex;align-items:center;gap:8px}
/* Le nom se corrige d'un double-clic : il le laisse deviner au survol.
   `manipulation` : la double touche ne zoome pas la page sur tablette. */
.sig-nom{cursor:text;touch-action:manipulation;border-radius:4px;margin:-1px -4px;padding:1px 4px}
.sig-nom:hover{background:var(--bg-2)}
.sig-nom-champ{height:32px;font-size:.84rem;font-weight:700;padding:4px 8px;width:100%;max-width:260px}
.sig-astuce{margin:8px 0 0;font-size:.72rem;color:var(--ink-mute)}
/* Une réponse reprise du mentorat précédent : dite, discrètement. */
.fv-repris{display:block;margin:-2px 0 6px;font-size:.72rem;font-weight:600;color:var(--ink-soft)}
.sig-alerte{animation:sigAlerte .8s ease 2}
@keyframes sigAlerte{50%{box-shadow:0 0 0 4px var(--danger-soft);border-color:var(--danger)}}
/* Le pavé : une zone blanche où l'on signe du doigt ou à la souris. */
.modal.sig-modale{max-width:640px;width:calc(100vw - 24px)}
.sig-pave{position:relative;width:100%;aspect-ratio:3/1;border:1.5px solid var(--border-2);
  border-radius:14px;background:#fff;overflow:hidden;touch-action:none}
.sig-pave canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.sig-pave-ligne{position:absolute;left:8%;right:8%;bottom:26%;border-bottom:1.5px dashed #d8cfc4;
  pointer-events:none}
.sig-pave-aide{position:absolute;left:0;right:0;bottom:12%;text-align:center;font-size:.76rem;
  color:#a2988e;pointer-events:none}
@media (max-width:560px){
  .sig-l{grid-template-columns:1fr 1fr}
  .sig-quand{grid-column:1/-1}
}

/* ══ LE FINANCEMENT DÉTAILLÉ (11 sept 2026) ══
   Échéancier OPCO de huit échéances au plus, reste à charge à part.
   Sur la frise : chaque échéance à son mois de facturation — verte
   une fois échue, blanche à venir, barrée (est-suspendue) quand une
   rupture l'empêche d'être encaissée. */
.fet-carte.fet-finance{padding:9px 11px 10px;gap:3px;cursor:default;border-left-width:3px}
.fet-carte.fet-finance .fet-titre{font-size:.76rem;padding-right:22px}
.fet-carte.fet-finance:hover{transform:none;box-shadow:none}
.fet-carte.est-finance-passee{background:var(--ok-soft);border-color:var(--ok)}
.fet-carte.est-finance-avenir{background:var(--surface);border-color:var(--border)}
/* La fenêtre de saisie : trois sections, les huit lignes d'échéance. */
.fc-sec{margin:16px 0 8px;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-soft)}
.fc-sec small{font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-mute);margin-left:6px}
.fc-ech-l{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1fr) 34px;gap:8px;
  align-items:center;margin-bottom:6px}
.fc-ech-n{font-size:.72rem;font-weight:800;color:var(--ink-soft)}
.fc-ech-pied{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:4px}
/* ── LA FENÊTRE FINANCEMENT, VERSION LISIBLE (11 sept 2026) ──
   Deux étapes numérotées (ce que paie l'OPCO, ce que paie
   l'entreprise), un sélecteur du kit pour le mode, l'unité dans les
   champs, un récapitulatif en direct au-dessus des boutons. */
.modal.fc-modale{max-width:700px;width:calc(100vw - 32px)}
.fc-modale input[type=number]{-moz-appearance:textfield;appearance:textfield}
.fc-modale input[type=number]::-webkit-inner-spin-button,
.fc-modale input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.fc-contexte{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.78rem;font-weight:600;
  color:var(--ink-soft);margin:0 0 14px}
.fc-contexte span{display:inline-flex;align-items:center;gap:6px}
.fc-contexte svg.ico{width:14px;height:14px;flex:none}
.fc-etape{border:1.5px solid var(--border);border-radius:14px;padding:14px 16px 12px;
  margin-bottom:12px;background:var(--surface)}
.fc-etape-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fc-etape-t h5{margin:0;font-size:.98rem;flex:1;min-width:150px}
.fc-num{flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800}
.fc-aide{margin:10px 0 8px;font-size:.78rem;color:var(--ink-soft);line-height:1.5}
.fc-lien{border:none;background:none;padding:0;font:inherit;font-weight:700;
  color:var(--brand-800);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.fc-ligne{display:grid;grid-template-columns:minmax(0,140px) minmax(0,160px) auto minmax(0,1fr);
  gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--border)}
.fc-ligne.fc-ligne-opco{grid-template-columns:minmax(0,140px) minmax(0,200px)}
.fc-aide + .fc-ligne{border-top:0}
.fc-lib b{display:block;font-size:.84rem}
.fc-lib small{display:block;font-size:.7rem;color:var(--ink-mute);margin-top:1px}
.fc-euro{position:relative;min-width:0}
.fc-euro .input{padding-right:54px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.fc-euro i{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;
  font-size:.76rem;font-weight:600;color:var(--ink-mute);pointer-events:none}
.fc-etat{font-size:.68rem;font-weight:800;border-radius:999px;padding:3px 9px;white-space:nowrap;
  background:var(--ok-soft);color:var(--ok-ink)}
.fc-etat.attente{background:var(--bg-2);color:var(--ink-mute)}
.fc-etat.modifie{background:var(--warn-soft);color:var(--warn-ink)}
.fc-etat .fc-lien{color:inherit}
.fc-mois{display:flex;align-items:center;gap:8px;justify-content:flex-end;min-width:0}
.fc-mois small{font-size:.72rem;color:var(--ink-mute);white-space:nowrap}
.fc-mois .select{max-width:170px}
/* Le MOIS prend la place qui reste (« septembre 2027 » est long), le
   montant garde une largeur fixe : 3 000 € tient dans 130 px. */
.fc-modale .fc-ech-l{grid-template-columns:26px minmax(0,1fr) minmax(0,130px) 34px;margin-bottom:8px}
.fc-modale .fc-ech-n{width:24px;height:24px;border-radius:50%;background:var(--bg-2);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800}
.fc-ech-note{display:none}
.fc-ech-l.perdue .select,.fc-ech-l.perdue .input{color:var(--ink-mute);text-decoration:line-through}
.fc-ech-l.perdue .fc-ech-note{display:block;grid-column:2/-1;margin-top:-2px;font-size:.7rem;
  font-weight:600;color:var(--danger)}
.fc-ajout{margin-top:2px}
.fc-ech-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);font-size:.8rem;color:var(--ink-soft)}
.fc-ech-total b{color:var(--ink);font-variant-numeric:tabular-nums}
.fc-ech-total em{font-style:normal;color:var(--ink-mute)}
.fc-garde{margin:6px 0 0;font-size:.72rem;color:var(--ink-mute)}
.fc-garde:empty{display:none}
.fc-alerte{display:flex;gap:8px;align-items:flex-start;padding:8px 11px;border-radius:10px;
  background:var(--danger-soft);color:var(--danger);font-size:.76rem;font-weight:600;margin:10px 0 0}
.fc-alerte svg.ico{width:15px;height:15px;flex:none;margin-top:1px}
.fc-recap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:2px}
.fc-recap div{background:var(--bg-2);border-radius:12px;padding:10px 12px}
.fc-recap small{display:block;font-size:.64rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-soft)}
.fc-recap b{display:block;font-size:1.05rem;font-variant-numeric:tabular-nums;margin-top:2px}
.fc-recap div:first-child{background:var(--ink);color:#fff}
.fc-recap div:first-child small{color:rgba(255,255,255,.72)}
/* L'étiquette « calculé » garde la taille de son mot, jamais celle
   de sa case — et disparaît tant qu'il n'y a rien à calculer. */
.fc-etat{justify-self:start}
/* Vide, elle garde sa place (invisible) : sinon « Facturé en » glisse
   dans sa colonne et la ligne se décale par rapport à sa voisine. */
.fc-etat:empty{visibility:hidden}
.fc-etat .fc-lien{text-decoration:none;font-size:.85rem;margin-left:2px}

/* ── DE L'AIR (retour direction, 11 sept 2026 : « espace bien ») ──
   Plus de phrases d'aide : les étapes respirent par leurs marges. Le
   sélecteur se cale à droite du titre de l'étape ; les lignes se
   séparent par un filet DESSOUS (la dernière n'en a pas). */
.fc-modale .fc-contexte{margin:4px 0 20px}
.fc-modale .fc-etape{padding:20px 22px 16px;margin-bottom:18px}
.fc-modale .fc-etape-t{margin-bottom:16px;gap:12px}
.fc-modale .fc-etape-t .seg{margin-left:auto}
.fc-modale .fc-etape-t .seg-b{font-size:.78rem;padding:7px 12px}
.fc-modale .fc-alerte{margin:0 0 16px}
.fc-modale .fc-ligne{padding:14px 0;border-top:0;border-bottom:1px solid var(--border);
  grid-template-columns:minmax(0,130px) minmax(0,140px) 86px minmax(0,1fr)}
.fc-modale .fc-ligne.fc-ligne-opco{grid-template-columns:minmax(0,130px) minmax(0,200px)}
.fc-modale .fc-mois .select{max-width:none;flex:1;min-width:0}
/* Le plafond du reste à charge : ses deux choix en PLEINE LARGEUR sous
   le titre, à égalité — c'est la première décision de l'étape. */
#fc-etape-rac .fc-etape-t .seg{width:100%;margin-left:0}
#fc-etape-rac .fc-etape-t .seg-b{flex:1;justify-content:center;text-align:center}
.fc-modale .fc-ligne:last-child{border-bottom:0}
.fc-modale .fc-ech-l{margin-bottom:12px}
.fc-modale .fc-ech-pied{margin-top:6px}
.fc-modale .fc-ech-total{margin:0;padding:0;border:0;font-size:.8rem;color:var(--ink-soft)}
.fc-modale .fc-garde{margin:10px 0 0}
.fc-modale .fc-recap{gap:10px;margin-top:4px}
.fc-modale .fc-recap div{padding:12px 14px}
@media (max-width:640px){
  .fc-modale .fc-etape{padding:16px 16px 12px}
  .fc-modale .fc-etape-t .seg{margin-left:0;width:100%}
  .fc-modale .fc-etape-t .seg-b{flex:1;justify-content:center;text-align:center}
}
@media (max-width:640px){
  .fc-ligne,.fc-ligne.fc-ligne-opco{grid-template-columns:1fr 1fr}
  .fc-mois{grid-column:1/-1;justify-content:flex-start}
  .fc-mois .select{max-width:none;flex:1}
}
/* Les trois chiffres du récapitulatif restent sur une ligne tant
   qu'ils tiennent ; en dessous, ils s'empilent. */
@media (max-width:420px){ .fc-recap{grid-template-columns:1fr} }

/* La fiche contrat : la liste des échéances et leur état. */
.fin-ech{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
.fin-ech-t{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-soft);margin-bottom:4px}
.fin-ech-t small{text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink-mute);margin-left:6px}
.fin-ech-l{display:grid;grid-template-columns:104px minmax(0,1fr) auto 108px;gap:10px;
  align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:.8rem}
.fin-ech-l:last-child{border-bottom:0}
.fin-ech-m{color:var(--ink-soft);font-weight:600}
.fin-ech-e{justify-self:end;font-size:.66rem;font-weight:800;border-radius:999px;padding:2px 9px;
  background:var(--bg-2);color:var(--ink-soft);white-space:nowrap}
.fin-ech-l.e-passee .fin-ech-e{background:var(--ok-soft);color:var(--ok-ink)}
.fin-ech-l.e-perdue{color:var(--ink-mute)}
.fin-ech-l.e-perdue .fin-ech-n,.fin-ech-l.e-perdue b{text-decoration:line-through}
.fin-ech-l.e-perdue .fin-ech-e{background:var(--danger-soft);color:var(--danger)}
/* Le prévisionnel des encaissements (Suivi & financements). */
.prev{margin-bottom:16px}
.prev-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.prev-h small{display:block;margin-top:3px}
.prev-regle{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px dashed var(--border);
  border-radius:var(--r-md);background:var(--bg-2)}
.prev-regle b{display:block;font-size:.78rem}
.prev-regle small{display:block;font-size:.7rem;color:var(--ink-soft)}
.prev-regle.on{border-style:solid;border-color:var(--ok);background:var(--ok-soft)}
.prev-defil{overflow-x:auto;margin-top:12px}
.prev-t{width:100%;border-collapse:collapse;font-size:.76rem;font-variant-numeric:tabular-nums}
.prev-t th,.prev-t td{padding:7px 9px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--border)}
.prev-t thead th{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.prev-t tbody th{text-align:left;font-weight:700;color:var(--ink)}
.prev-t .prev-tot{font-weight:800;background:var(--bg-2)}
.prev-t tr.prev-ent th,.prev-t tr.prev-ent td{color:var(--ink-soft)}
.prev-t tr.prev-total th,.prev-t tr.prev-total td{font-weight:800;border-top:2px solid var(--ink);color:var(--ink)}
.prev-t tr.prev-estime th,.prev-t tr.prev-estime td{font-style:italic;color:var(--ink-mute);font-weight:500}

/* LE REMPLISSAGE DE LA PROMO (11 sept 2026) : les étudiants sous
   contrat face à l'objectif de la promo. Vert atteint, orange dès les
   trois quarts, rouge en dessous. Sur la carte, sous la rentrée ; sur
   la fiche, sous la ligne du nom. */
.gcl-remp{margin-top:12px;min-width:0}
.gcl-remp-l{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.gcl-remp-l span{font-size:.6rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-soft)}
.gcl-remp-l b{font-size:.95rem;font-weight:800;color:var(--remp,var(--ink));
  font-variant-numeric:tabular-nums;white-space:nowrap}
.gcl-remp-j{height:6px;border-radius:999px;background:var(--bg-2);overflow:hidden;margin-top:5px}
.gcl-remp-j i{display:block;height:100%;border-radius:999px;background:var(--remp,var(--brand))}
.gcl-remp small{display:block;font-size:.7rem;color:var(--ink-soft);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcl-remp.t-ok{--remp:var(--ok)}
.gcl-remp.t-warn{--remp:var(--warn)}
.gcl-remp.t-danger{--remp:var(--danger)}
.gcl-remp.sans .gcl-remp-l b{color:var(--ink-mute)}
.gcl-remp.en-fiche{max-width:440px;margin-top:16px}
.gcl-remp.en-fiche .gcl-remp-l b{font-size:1.1rem}

/* Le pied : le référent à gauche, la flèche d'entrée à droite. */
.gcl-bas{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:15px;
  font-size:.8rem;color:var(--ink-soft);white-space:nowrap}
.gcl-bas .ava{width:26px;height:26px;font-size:.6rem}
.gcl-ref{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.gcl-ref em{font-style:normal;min-width:0;overflow:hidden;text-overflow:ellipsis}
.gcl-sansref{color:var(--ink-mute)}
.gcl-fleche{display:flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--surface)}
.gcl-fleche svg.ico{width:16px;height:16px}

/* Le délai à ne pas rater, sous le libellé d'un point de la liste. */
.fc-delai{display:block;font-style:normal;font-size:.72rem;color:var(--ink-mute);margin-top:2px}
/* Qui valide : la phrase sous le bouton principal. */
/* ── L'APERÇU D'UNE ÉTAPE FERMÉE ──
   On voit tout, on ne touche à rien. Le `<fieldset disabled>` neutralise
   déjà les champs et les boutons ; `pointer-events` arrête aussi les
   fausses commandes (les `<span class="btn">` cliquables). */
.fep-apercu{border:0;margin:0;padding:0;min-width:0;
  pointer-events:none;user-select:none;opacity:.72}
.fep-apercu .fep-carte{background:var(--surface)}
/* Le bouton éteint du bas : même place que l'action, mais sans promesse. */
.fep-bouton-eteint{margin-top:14px;background:var(--bg-2);color:var(--ink-mute);
  border:1px dashed var(--border-2);cursor:default}
.fep-bouton-eteint svg.ico{width:15px;height:15px}
/* Le nom d'une pièce, au-dessus de sa zone de dépôt. */
.fer-piece{display:block;font-size:.78rem;color:var(--ink);margin:14px 0 7px}
.fer-piece:first-child{margin-top:0}
.fc-qui{display:flex;align-items:center;gap:7px;margin:9px 0 0;justify-content:center;
  text-align:center}
.fc-qui svg.ico{flex:none;width:14px;height:14px}
/* Une ligne d'étudiant dans la vérification des fiches. */
.fc-eleve{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px solid var(--border)}
.fc-eleve:last-child{border-bottom:0}
.fc-eleve-id{flex:1;min-width:150px}
.fc-eleve-id b{font-size:.84rem;color:var(--ink)}
.fc-eleve-id em{display:block;font-size:.72rem;color:var(--ink-soft);margin-top:2px}
.fc-eleve-b{display:flex;gap:6px;flex:none}
/* Une liste déjà validée : on la relit, on ne la coche plus. */
.fc-point.fc-fige{cursor:default}
.fc-point.fc-fige svg.ico{flex:none;width:16px;height:16px;color:var(--ink-mute)}
.fc-point.fc-fige.est-coche svg.ico{color:var(--ok)}
/* Un cran au-dessus : la bande du procès-verbal papier. */
.fc-bande{display:block;font-size:.74rem;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;color:var(--ink);margin:22px 0 4px}
.fc-bande + .fc-groupe{margin-top:8px;border-bottom:0;padding-bottom:0}
/* Une matière : son nom, la note d'implication, puis un vrai encart de
   saisie — il y a des choses à raconter. */
.fc-matiere{border:1px solid var(--border);border-radius:var(--r-md);
  margin-bottom:12px;background:var(--surface);overflow:hidden}
.fc-nom{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--ink);
  padding:12px 15px;background:var(--bg-2);border-bottom:1px solid var(--border)}
/* Le code court de la matière, tel qu'il figure sur le PV papier. */
.fc-code{margin-left:auto;flex:none;font-size:.62rem;font-weight:800;letter-spacing:.6px;
  color:var(--ink-mute);background:var(--surface);border:1px solid var(--border-2);
  border-radius:999px;padding:3px 9px}
.fc-aide{margin:0;padding:11px 15px;font-size:.74rem;color:var(--ink-soft);
  border-bottom:1px solid var(--border)}
/* Deux champs courts côte à côte (dates du semestre, horaires). */
.fc-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.fc-duo{grid-template-columns:1fr}}
/* Chaque question a sa bande, séparée de la suivante par un filet. */
.fc-q{padding:12px 15px;border-bottom:1px solid var(--border)}
.fc-q:last-child{border-bottom:0}
.fc-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fc-matiere .fc-note > label{flex:1;min-width:150px;margin:0}
.fc-crans{display:flex;gap:4px;flex:none}
.fc-cran{width:30px;height:30px;border-radius:8px;border:1px solid var(--border-2);
  background:var(--surface);color:var(--ink-soft);font:inherit;font-size:.8rem;
  font-weight:800;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.fc-cran:hover{border-color:var(--ink-mute)}
.fc-cran.on{background:var(--brand);border-color:var(--brand);color:#fff}
.fc-matiere label{display:block;font-size:.76rem;color:var(--ink-soft);margin-bottom:6px}
.fc-avancee{min-height:82px}
.fer-drop{border:2px dashed var(--border-2);border-radius:var(--r-lg);
  padding:22px;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:3px;background:var(--bg-2)}
.fer-drop-ic{width:40px;height:40px;border-radius:12px;background:var(--info-soft);
  color:var(--info);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.fer-drop b{font-size:.86rem;color:var(--ink)}
.fer-drop small{font-size:.74rem;color:var(--ink-mute)}
.fer-fichier{display:flex;align-items:center;gap:10px;background:var(--ok-soft);
  border-radius:var(--r-md);padding:11px 13px;margin-top:10px}
.fer-fichier svg{width:16px;height:16px;color:var(--ok-ink);flex:none}
.fer-fichier b{flex:1;min-width:0;font-size:.82rem;color:var(--ok-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.fep-carte{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:16px 18px;margin-bottom:14px;
  box-shadow:var(--sh-sm)}
.fep-carte:last-child{margin-bottom:0}
.fep-carte h5{display:flex;align-items:center;gap:8px;font-size:.82rem;
  font-weight:800;margin:0 0 10px}
.fep-carte h5 svg{width:15px;height:15px;color:var(--brand-700);flex:none}

.fep-entete{display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  margin-bottom:6px}
.fep-h{margin:18px 0 4px;font-size:.82rem}
.fep-provisoire{font-style:italic;color:var(--ink-soft)}

.fep-dates{margin-top:10px;display:flex;flex-direction:column}
.fep-date-ligne{display:flex;align-items:center;gap:8px;padding:7px 0;
  border-bottom:1px solid var(--border);font-size:.8rem}
.fep-date-ligne:last-child{border-bottom:none}
.fep-date-ligne svg{width:14px;height:14px;color:var(--ink-mute);flex:none}
.fep-date-ligne span{color:var(--ink-soft);flex:1}
.fep-date-ligne b{font-size:.8rem}
/* Une date pas encore posée : un point d'interrogation, lisible mais
   discret — on voit tout de suite qu'il reste à la fixer. */
.fep-sans{display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:6px;
  background:var(--warn-soft);color:var(--warn-ink);font-weight:800}
/* Une étape faite APRÈS son échéance : le retard reste écrit, en rouge,
   à côté de la date de réalisation. */
/* ── L'enquête de satisfaction : le taux de réponse et le dépouillement,
   une barre par niveau de satisfaction et par question. ── */
.enq-jauge{height:8px;border-radius:99px;background:var(--bg-2);overflow:hidden;margin-top:12px}
.enq-jauge i{display:block;height:100%;background:var(--ok);border-radius:99px}
.enq-q{margin-bottom:16px}
.enq-q:last-child{margin-bottom:0}
.enq-q > b{display:block;font-size:.82rem;color:var(--ink);margin-bottom:8px}
.enq-l{display:flex;align-items:center;gap:10px;margin-bottom:5px;font-size:.76rem}
.enq-l > span{flex:none;width:104px;color:var(--ink-soft)}
.enq-l > b{flex:none;width:26px;text-align:right;color:var(--ink)}
.enq-b{flex:1;min-width:0;height:14px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.enq-b i{display:block;height:100%;border-radius:99px;background:var(--ink-mute)}
.enq-b.t-ok i{background:var(--ok)}
.enq-b.t-teal i{background:var(--teal)}
.enq-b.t-warn i{background:var(--warn)}
.enq-b.t-danger i{background:var(--danger)}
/* Le dépouillement, matière par matière. */
.enq-mat{border:1px solid var(--border);border-radius:var(--r-md);
  margin-top:14px;background:var(--surface);overflow:hidden}
.enq-mat-nom{display:flex;align-items:center;gap:9px;font-size:.84rem;color:var(--ink);
  padding:11px 15px;background:var(--bg-2);border-bottom:1px solid var(--border)}
.enq-mat .enq-q{padding:12px 15px;margin:0;border-bottom:1px solid var(--border)}
.enq-mat .enq-q:last-child{border-bottom:0}
.enq-note{display:flex;align-items:center;gap:9px;margin:0 0 9px}
.enq-note > b{font-size:.94rem;color:var(--ink)}
.enq-note > small{font-size:.72rem;color:var(--ink-mute)}
.enq-etoiles{display:inline-flex;gap:2px}
/* L'étoile du kit est dessinée au trait : une étoile ACQUISE se
   remplit, une demie reste au trait, une manquante reste grise. */
.enq-et svg.ico{width:15px;height:15px;color:var(--border-2);fill:none}
.enq-et.pleine svg.ico{color:var(--brand);fill:currentColor}
.enq-et.demie svg.ico{color:var(--brand);fill:none}
.enq-l > span{width:158px}
.enq-com{margin:0;padding:11px 15px;font-size:.8rem;color:var(--ink-soft);
  border-bottom:1px solid var(--border);font-style:italic}
.enq-com:last-child{border-bottom:0}

.fep-retard-note{display:inline-block;margin-left:7px;font-size:.72rem;
  font-weight:800;color:var(--danger-ink);background:var(--danger-soft);
  border-radius:6px;padding:1px 7px}

.fep-compteur{display:flex;align-items:center;gap:7px;margin-top:10px;
  font-weight:700;color:var(--ink-2)}
.fep-compteur svg{width:14px;height:14px;flex:none}
.fep-en-retard{color:var(--danger)}

/* Partie droite : étape verrouillée — une carte centrée */
.fep-verrou{display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:10px;
  padding:44px 24px !important;min-height:240px}
.fep-verrou > svg{width:32px;height:32px;color:var(--ink-mute)}
/* Enfant DIRECT seulement : sinon l'intitulé de l'encart « La pièce qui
   sera attendue », imbriqué dans cette carte, grossissait avec lui. */
.fep-verrou > b{font-size:.95rem}

/* Partie droite : le questionnaire (contenus provisoires) */
.fep-note{display:flex;gap:8px;align-items:flex-start;font-size:.76rem;
  font-weight:600;color:var(--info-ink);background:var(--info-soft);
  border-radius:var(--r-sm);padding:9px 11px;margin-bottom:14px}
.fep-note svg{width:14px;height:14px;flex:none;margin-top:1px}
.fep-note-retard{color:var(--danger-ink);background:var(--danger-soft)}
/* Un compte rendu repris d'un document extérieur : ni une alerte ni une
   simple information. Il reste des questions à compléter à la main, et
   il faut que l'oeil s'y arrête sans que la carte crie au retard. */
.fep-note-attention{color:var(--warn-ink);background:var(--warn-soft)}
.fep-note-repris{color:var(--ok-ink);background:var(--ok-soft)}

/* L'état de l'enquête de satisfaction dans le détail d'une visite */
.fep-enquete{display:flex;gap:10px;align-items:center;padding:11px 13px;
  border-radius:var(--r-md);margin-bottom:14px;background:var(--info-soft)}
.fep-enquete > svg{width:18px;height:18px;flex:none;color:var(--info)}
.fep-enquete b{font-size:.8rem;color:var(--info-ink)}
.fep-enquete small{display:block;font-size:.72rem;color:var(--ink-soft)}
.fep-enquete.est-reponse{background:var(--ok-soft)}
.fep-enquete.est-reponse > svg{color:var(--ok)}
.fep-enquete.est-reponse b{color:var(--ok-ink)}
.fep-enquete.est-erreur{background:var(--danger-soft)}
.fep-enquete.est-erreur > svg{color:var(--danger)}
.fep-enquete.est-erreur b{color:var(--danger-ink)}

/* Partie droite : étape effectuée, réponses en lecture seule */
.fep-fait-tete{display:flex;gap:10px;align-items:center;padding:12px 14px;
  background:var(--ok-soft);border-radius:var(--r-md);margin-bottom:14px}
.fep-fait-tete > svg{width:22px;height:22px;color:var(--ok);flex:none}
.fep-fait-tete b{font-size:.86rem;color:var(--ok-ink)}
.fep-fait-tete small{display:block;font-size:.72rem;color:var(--ink-soft)}
.fep-reponse{padding:9px 0;border-bottom:1px solid var(--border)}
.fep-reponse:last-of-type{border-bottom:none}
.fep-reponse small{display:block;font-size:.7rem;font-weight:700;
  color:var(--ink-soft);margin-bottom:3px}
.fep-reponse p{font-size:.82rem;white-space:pre-wrap}

@media(max-width:860px){
  .drawer-large .drawer-b{padding:0}
  .drawer-large .drawer-h,
  .drawer-large .drawer-f{padding-left:16px;padding-right:16px}
  .fep-vue{padding:16px}
  .fer-onglets{width:100%}
  .fer-onglets span{flex:1;justify-content:center}
}


/* ═══════════════════════════════════════════════════════════════
   LA FRISE TEMPORELLE — l'habillage du moteur rendreTemps.

   Le moteur (FriseEtudiant.rendreTemps, partagé par les trois frises)
   calcule toutes les positions ; ici, uniquement l'apparence des
   cartes resserrées et leurs couleurs par type d'action.
   ═══════════════════════════════════════════════════════════════ */

.ft{position:relative}

/* Les cartes, resserrées pour la ligne de temps. */
.ft .fet-carte{padding:9px 10px 10px;gap:4px;box-shadow:var(--sh-sm)}
.ft .fet-titre{font-size:.76rem;line-height:1.28;padding-right:22px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ft .fet-num{font-size:.6rem}
.ft .fet-sousdate{font-size:.64rem}
.ft .fet-actions{margin-top:3px}
.ft .fet-actions .btn{padding:3px 8px;font-size:.66rem;min-height:0}
.ft .fet-actions .btn svg{width:11px;height:11px}
.ft .fet-bille{width:20px;height:20px;top:6px;right:6px}
.ft .fet-bille svg{width:12px;height:12px}
.ft .fet-carte.est-fin{cursor:default}

/* ── Une couleur PAR TYPE d'action — le style « carte de mission » ──
   Comme les cartes de la to do list : une BORDURE GAUCHE épaisse à la
   couleur du type, l'étiquette (« ÉTAPE 2 », « VÉRIFICATION ») en noir,
   et le TITRE dans la couleur du type.

   UNE CARTE DE FRISE EST TOUJOURS BLANCHE — aucun statut ne la
   repeint. Ce qui change, c'est la BILLE en haut à droite (cadenas,
   cadenas ouvert, coche, alerte) et la couleur du petit trait qui la
   relie à la ligne. La frise reste ainsi lisible d'un bout à l'autre :
     documents=bleu · mentorat=violet · visite=doré · vérification=teal ·
     enquête=rose · réunion=cyan · conseil=prune · BTS blanc=olive ·
     fiches/envoi=bronze · rentrée=doré. */
.ft .fet-carte{border-color:var(--border-2);border-left-width:5px;
  border-left-color:var(--ink-mute)}
.ft .fet-carte,
.ft .fet-carte.est-verrouillee,.ft .fet-carte.est-effectuee,
.ft .fet-carte.est-retard,.ft .fet-carte.est-planifiee,
.ft .fet-carte.est-planifiee-verrouillee,.ft .fet-carte.est-suspendue,.ft .fet-carte.est-arretee,
.ft .fet-carte.est-envoyee,.ft .fet-carte.est-reponse,
.ft .fet-carte.est-erreur{background:var(--surface);border-color:var(--border-2)}
.ft .fet-carte .fet-titre{color:var(--ink)}

/* Le liseré gauche garde la couleur du type QUEL QUE SOIT le statut :
   les sélecteurs portent la classe .fet-carte pour peser plus lourd que
   les règles de statut (.est-…) qui posent border-color en raccourci. */
.ft .fet-carte.t-documents{border-left-color:var(--info)}
.ft .t-documents .fet-titre{color:var(--info-ink)}
.ft .fet-carte.t-mentorat{border-left-color:var(--violet)}
.ft .t-mentorat .fet-titre{color:var(--violet-ink)}
.ft .fet-carte.t-visite{border-left-color:var(--brand)}
.ft .t-visite .fet-titre{color:var(--brand-800)}
.ft .fet-carte.t-verif{border-left-color:var(--teal)}
.ft .t-verif .fet-titre{color:var(--teal-ink)}
.ft .fet-carte.t-enquete{border-left-color:var(--rose)}
.ft .t-enquete .fet-titre{color:var(--rose-ink)}
/* Les deux enquêtes, deux couleurs (7 oct. 2026) : étudiante en rose,
   entreprise en marron — le liseré ET le titre, quel que soit le statut. */
.ft .fet-carte.fet-enquete-carte.t-enquete.enq-etudiante{border-left-color:var(--rose)}
.ft .fet-carte.fet-enquete-carte.t-enquete.enq-entreprise{border-left-color:var(--fa-marron)}
.ft .fet-carte.t-enquete.enq-entreprise .fet-titre{color:var(--fa-marron)}
body[data-theme="dark"] .ft .fet-carte.fet-enquete-carte.t-enquete.enq-entreprise{border-left-color:var(--fa-beige)}
body[data-theme="dark"] .ft .fet-carte.t-enquete.enq-entreprise .fet-titre{color:var(--fa-beige)}
.ft .fet-carte.t-reunion{border-left-color:var(--cyan)}
.ft .t-reunion .fet-titre{color:var(--cyan-ink)}
.ft .fet-carte.t-conseil{border-left-color:var(--prune)}
.ft .t-conseil .fet-titre{color:var(--prune-ink)}
.ft .fet-carte.t-bts{border-left-color:var(--olive)}
.ft .t-bts .fet-titre{color:var(--olive-ink)}
.ft .fet-carte.t-fiches,.ft .fet-carte.t-envoi{border-left-color:var(--bronze)}
.ft .t-fiches .fet-titre,.ft .t-envoi .fet-titre{color:var(--bronze-ink)}
/* La rentrée reprend le doré de la marque : sur la frise Classe, aucune
   visite ne l'utilise, la couleur reste donc unique. */
.ft .fet-carte.t-rentree{border-left-color:var(--brand)}
.ft .t-rentree .fet-titre{color:var(--brand-800)}

/* ── La liste à cocher de la rentrée ── */
.fc-liste{display:flex;flex-direction:column;gap:6px}
.fc-point{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;
  border:1px solid var(--border-2);border-radius:var(--r-md);
  background:var(--surface);cursor:pointer;transition:border-color .13s,background .13s}
.fc-point:hover{border-color:var(--ink-mute)}
.fc-point input{margin:1px 0 0;width:16px;height:16px;flex:none;accent-color:var(--ok)}
.fc-point span{font-size:.84rem;line-height:1.35;color:var(--ink)}
.fc-point.est-coche{background:var(--ok-soft);border-color:var(--ok)}
.fc-point.est-coche span{color:var(--ok-ink);text-decoration:line-through}

/* ── La frise compacte : un groupe par mois, large comme son contenu ──
   Les POINTS de la ligne sont les MOIS : un rond au début de chaque
   mois, son nom aligné dessus. Chaque étape est reliée à la ligne par
   un MINI TRAIT FIN qui descend vers sa carte, coloré par son statut.
   Et la ligne se REMPLIT DE VERT au fil des jours : quand le vert
   atteint le trait d'une étape, c'est qu'elle se débloque. */
.fg-defil{display:flex;overflow-x:auto;padding:4px 2px 12px;align-items:flex-start}
.fg-mois{flex:none;position:relative}
.fg-nom{font-size:.66rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--ink-soft);text-align:left;white-space:nowrap;margin:0 0 4px 2px}
.fg-nom b{color:var(--ink-2);font-weight:800}
.fg-points{position:relative;height:24px;margin-bottom:12px}
.fg-points::before{content:'';position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:5px;background:var(--border-2)}
.fg-avance{position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:5px;background:var(--avance)}
.fg-borne{position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;border-radius:50%;background:var(--surface);
  border:3px solid var(--ink-mute);z-index:1;box-shadow:0 0 0 3px var(--surface)}
.fg-tick{position:absolute;top:10px;width:2.5px;height:26px;border-radius:99px;
  background:var(--ink-mute)}
.fg-tick.fp-verrou{background:var(--ink-mute);opacity:.5}
.fg-tick.fp-planif-verrou{background:var(--warn);opacity:.55}
.fg-tick.fp-action{background:var(--avance)}
.fg-tick.fp-planif{background:var(--warn)}
.fg-tick.fp-fait{background:var(--ok)}
.fg-tick.fp-retard{background:var(--danger)}
.fg-cartes{display:flex;align-items:stretch}
.fg-cale{flex:none;width:168px}

/* ══════════ LE FORMULAIRE D'UNE VISITE ══════════
   Les huit visites se remplissent dans le panneau de l'étape. Chaque
   champ prend la forme que sa réponse réclame ; les sections reprennent
   la présentation du PV de conseil (.fc-matiere, .fc-groupe, .fc-q),
   pour que les deux frises se ressemblent. */

/* Le cartouche du haut : à quelle étape du parcours on se trouve, et
   pourquoi cette visite existe. C'est le fil rouge des deux ans. */
.fv-tete{background:var(--fa-beige-clair);border:1px solid var(--fa-beige);
  border-left:4px solid var(--brand-700);
  border-radius:var(--r-md);padding:16px 18px;margin-bottom:16px}
.fv-jalon{display:block;font-size:.66rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.09em;color:var(--brand-700);margin-bottom:6px}
.fv-tete b{display:block;font-size:1.18rem;font-weight:800;color:var(--ink);
  line-height:1.3;text-wrap:balance}
.fv-tete p{margin:8px 0 0;font-size:.84rem;color:var(--ink-soft);line-height:1.6;
  max-width:62ch}

/* Oui / Non : deux boutons, pas une liste déroulante — ça se coche
   d'un doigt sur téléphone. */
.fv-ouinon{display:flex;gap:8px;margin-top:6px}
.fv-radio{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:7px 15px;border:1.5px solid var(--border-2);border-radius:999px;
  font-size:.83rem;font-weight:700;color:var(--ink-2);
  transition:border-color .12s,background .12s,color .12s}
.fv-radio input{position:absolute;opacity:0;width:0;height:0}
.fv-radio:hover{border-color:var(--ink-mute)}
.fv-radio.on{background:var(--brand-50);border-color:var(--brand);color:var(--brand-700)}

/* Le champ conditionnel : replié tant que la réponse ne l'appelle pas,
   mais jamais détruit — ce qu'on y a écrit ne se perd pas. */
.fv-si{display:none;margin-top:10px;padding-left:13px;
  border-left:2px solid var(--fa-beige)}
.fv-si.on{display:block}

.fv-cases{display:flex;flex-direction:column;gap:8px;margin-top:7px}
.fv-case{display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  font-size:.84rem;color:var(--ink-2);line-height:1.45}
.fv-case input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--brand)}

.fv-sur20{display:flex;align-items:center;gap:9px;margin-top:6px}
.fv-sur20 .input{width:92px}
.fv-sur20 em{font-style:normal;font-size:.82rem;font-weight:700;color:var(--ink-soft)}

/* ── LA GRILLE D'APPRÉCIATION ──
   Une ligne par critère, l'auto-évaluation de l'apprenti et celle du
   tuteur côte à côte. ⚠️ Les cinq étoiles ne sont PAS une invention :
   c'est l'échelle que l'application utilise déjà pour les enquêtes de
   satisfaction, reprise telle quelle. */
.fv-grille{margin-top:10px}
.fv-g-tetes{display:grid;grid-template-columns:minmax(0,1fr) 122px 122px;gap:12px;
  padding:0 0 7px;font-size:.63rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-mute);border-bottom:1px solid var(--border)}
.fv-g-tetes span:not(:first-child){text-align:center}
.fv-g-l{display:grid;grid-template-columns:minmax(0,1fr) 122px 122px;gap:12px;
  align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:.84rem}
.fv-g-l:last-child{border-bottom:0}
.fv-grille-seule .fv-g-l{grid-template-columns:minmax(0,1fr) 122px}
.fv-etoiles{display:flex;gap:7px;justify-content:center}
/* L'étoile porte SON chiffre (direction, 16 sept 2026) : assez grande
   pour qu'il se lise dedans — grise à vide, pleine couleur une fois
   choisie, chiffre blanc sur l'étoile allumée. */
.fv-etoile{position:relative;border:0;background:none;padding:0;cursor:pointer;
  line-height:0;width:48px;height:48px;flex:none;
  color:var(--border-2);transition:color .1s,transform .1s}
.fv-etoile svg{width:100%;height:100%;fill:currentColor;stroke:none}
.fv-etoile i{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;padding-top:13%;font-style:normal;font-weight:800;
  font-size:.84rem;color:var(--ink-soft);pointer-events:none;line-height:1;
  font-variant-numeric:tabular-nums}
.fv-etoile:hover{transform:scale(1.1)}
.fv-etoile.on{color:var(--brand)}
.fv-etoile.on i{color:#fff}

/* Points forts / à améliorer / commentaires, ligne par ligne. */
.fv-trois{padding:12px 0;border-bottom:1px solid var(--border)}
.fv-trois:last-child{border-bottom:0}
.fv-trois > b{display:block;font-size:.86rem;color:var(--ink);margin-bottom:8px}

.fep-boutons{display:flex;gap:10px;margin-top:14px}
.fep-boutons .btn{flex:1}

@media (max-width:640px){
  .fv-g-tetes{display:none}
  .fv-g-l,.fv-grille-seule .fv-g-l{grid-template-columns:1fr;gap:7px;padding:11px 0}
  .fv-etoiles{justify-content:flex-start}
  .fv-g-l .fv-etoiles::before{content:attr(data-qui);font-size:.68rem;
    font-weight:700;color:var(--ink-soft);margin-right:8px;align-self:center}
  .fep-boutons{flex-direction:column}
}

/* ── LE RAPPEL DES OBJECTIFS DE LA VISITE PRÉCÉDENTE ──
   Une lecture, pas une saisie : fond crème, pas de champ. Ce qui a été
   fixé la fois d'avant remonte ici tel qu'il a été écrit. */
.fv-r-bloc{background:var(--fa-beige-clair);border-color:var(--fa-beige)}
.fv-rappel{list-style:none;margin:10px 0 0;padding:0;display:flex;
  flex-direction:column;gap:10px}
.fv-rappel li{display:flex;flex-direction:column;gap:2px;
  padding-left:12px;border-left:2px solid var(--brand)}
.fv-rappel b{font-size:.75rem;font-weight:800;color:var(--brand-700);
  text-transform:uppercase;letter-spacing:.03em;line-height:1.35}
.fv-rappel span{font-size:.87rem;color:var(--ink);line-height:1.55;
  white-space:pre-wrap}
.fv-r-source{display:flex;align-items:center;gap:6px;margin:12px 0 0;
  font-size:.74rem;color:var(--ink-soft)}
.fv-r-source svg.ico{width:13px;height:13px;flex:none}
.fv-r-vide{display:flex;align-items:flex-start;gap:7px;margin:8px 0 0;
  font-size:.82rem;color:var(--ink-soft);line-height:1.5}
.fv-r-vide svg.ico{width:15px;height:15px;flex:none;margin-top:2px}

/* ── LA RELECTURE D'UNE ÉTAPE FAITE ──
   C'est le formulaire d'origine, neutralisé — pas un aperçu d'étape
   verrouillée : il se lit à pleine encre, et les champs prennent l'air
   d'un document plutôt que d'une saisie en attente. */
.fep-lecture{opacity:1;user-select:text}

/* ══════════ LES QUESTIONNAIRES D'ÉTAPE, LISIBLES (direction, 11 sept 2026) ══════════
   « Trop uniforme : on est vite perdu. » Trois repères, partout — frise
   étudiant comme frise classe, à remplir comme à relire :
     · chaque PARTIE a son bandeau : son numéro, son titre en gras, un
       filet orange à gauche (vert une fois terminée) ;
     · chaque QUESTION est en gras, à pleine encre, la réponse dessous ;
       la question en cours s'éclaire ;
     · la grille d'étoiles sépare l'APPRENTI (bleu) du TUTEUR (orange),
       ligne à ligne, sous des en-têtes qui restent visibles.
   Le repli des parties (une à la fois, « Partie suivante ») est posé
   par js/parties.js, seulement sur une étape à remplir. */
.fep-carte{counter-reset:partie}
.fc-matiere{border:1px solid var(--border);border-left:4px solid var(--brand);
  border-radius:var(--r-md);margin-bottom:14px;box-shadow:var(--sh-sm);
  overflow:hidden;overflow:clip}
.fc-matiere.fv-r-bloc{border-left-color:var(--brand-100)}
.fc-matiere:not(.fv-r-bloc){counter-increment:partie}
.fc-nom{font-size:.95rem;font-weight:800;line-height:1.3;gap:11px;padding:13px 16px;
  background:var(--brand-50);border-bottom:1px solid var(--brand-100)}
.fc-matiere:not(.fv-r-bloc) > .fc-nom::before{content:counter(partie);flex:none;
  width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:800}
.fc-matiere.fp-fini{border-left-color:var(--ok)}
.fc-matiere.fp-fini > .fc-nom::before{content:"✓";background:var(--ok)}
.fc-groupe{font-size:.74rem;color:var(--brand-700);letter-spacing:.06em;
  border-bottom:2px solid var(--brand-100);margin:22px 0 12px}
.fc-matiere > .fc-aide{background:var(--bg);font-style:italic}
/* La question : en gras, à pleine encre. */
.fc-matiere label:not(.fv-radio):not(.fv-case){font-size:.87rem;font-weight:700;
  color:var(--ink);line-height:1.45;margin-bottom:8px}
.fc-q{padding:15px 16px;transition:background .15s,box-shadow .15s}
.fc-q:focus-within{background:var(--brand-50);box-shadow:inset 3px 0 0 var(--brand)}
.fc-matiere .textarea{min-height:86px}
/* Une question répondue se coche d'elle-même (js/parties.js). */
.fc-q.repondu > label:first-child::before,
.fv-trois > .field.repondu > label:first-child::before{content:"✓";display:inline-flex;
  align-items:center;justify-content:center;width:17px;height:17px;margin-right:7px;
  border-radius:50%;background:var(--ok-soft);color:var(--ok-ink);font-size:.64rem;
  font-weight:900;vertical-align:1px}

/* La grille d'étoiles : deux colonnes qui ne se confondent plus. */
.fv-grille{margin:0;padding:4px 12px 10px}
.fv-g-tetes{position:sticky;top:var(--fp-haut,52px);z-index:2;background:var(--surface);
  grid-template-columns:minmax(0,1fr) 225px 225px;padding:10px 6px 9px;
  border-bottom:2px solid var(--border);font-size:.66rem}
/* Tout ce qui reste collé en haut se range SOUS les onglets du panneau
   (eux-mêmes collés ; leur hauteur est mesurée par js/parties.js dans
   --fp-haut), puis sous la barre d'avancement. Sans ce calage, la
   barre recouvrait les onglets et cachait le titre de la partie. */
.fep .fp-progres{top:calc(var(--fp-haut,52px) + 6px)}
.fp-questionnaire .fv-g-tetes{top:calc(var(--fp-haut,52px) + 60px)}
.fp-partie{scroll-margin-top:calc(var(--fp-haut,52px) + 66px)}
.fv-g-tetes span:nth-child(2),.fv-g-tetes span:nth-child(3){border-radius:999px;padding:4px 0}
.fv-g-tetes span:nth-child(2){background:var(--info-soft);color:var(--info-ink)}
.fv-g-tetes span:nth-child(3){background:var(--brand-50);color:var(--brand-800)}
.fv-g-l{grid-template-columns:minmax(0,1fr) 225px 225px;padding:9px 6px;border-radius:8px}
.fv-grille-seule .fv-g-l{grid-template-columns:minmax(0,1fr) 225px}

/* ⭐ LE COMMENTAIRE FACULTATIF SOUS CHAQUE NOTE (direction, 17 sept 2026).
   Il ne doit jamais ralentir la notation : discret, aligné sous sa colonne,
   il ne s'impose visuellement qu'une fois rempli ou au clic. */
.fv-g-l{border-bottom:0}
.fv-g-coms{display:grid;grid-template-columns:minmax(0,1fr) 225px 225px;gap:12px;
  padding:0 6px 10px;border-bottom:1px solid var(--border)}
.fv-g-coms-seule{grid-template-columns:minmax(0,1fr) 225px}
.fv-grille .fv-g-coms:last-child{border-bottom:0}
.fv-g-com{font-size:.76rem;padding:5px 9px;min-height:0;border-style:dashed;
  background:transparent;color:var(--ink-soft)}
.fv-g-com::placeholder{color:var(--ink-mute);opacity:.85}
.fv-g-com:hover{border-style:solid}
.fv-g-com:focus{border-style:solid;background:var(--surface);color:var(--ink)}
.fv-g-com:not(:placeholder-shown){border-style:solid;background:var(--surface);
  color:var(--ink)}
@media (max-width:720px){
  .fv-g-coms,.fv-g-coms-seule{grid-template-columns:1fr;gap:6px}
  .fv-g-coms > span:empty{display:none}
}
.fv-g-l .fv-etoile{width:38px;height:38px}
.fv-g-l .fv-etoile i{font-size:.68rem}
.fv-g-l:nth-child(even){background:var(--bg)}
.fv-g-l:hover{background:var(--brand-50)}
.fv-g-l > span:first-child{font-weight:600;color:var(--ink);line-height:1.4}
.fv-g-l.repondu > span:first-child::after{content:" ✓";color:var(--ok);font-weight:900}
.fv-g-l .fv-etoiles{padding:5px 0;border-radius:999px;background:var(--brand-50)}
.fv-g-l .fv-etoiles[data-qui="Apprenti"]{background:var(--info-soft)}
.fv-etoiles[data-qui="Apprenti"] .fv-etoile.on{color:var(--info)}
/* (l'ancienne règle qui figeait ici le dessin à 18 px bridait les
   étoiles agrandies : le SVG suit désormais la taille du bouton.) */

/* Le repli des parties (js/parties.js). */
.fp-progres{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:12px;
  padding:11px 14px;margin:0 0 14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);box-shadow:var(--sh-sm)}
.fp-progres b{font-size:.82rem;color:var(--ink);white-space:nowrap}
.fp-progres small{font-size:.74rem;color:var(--ink-soft);white-space:nowrap}
.fp-barre{flex:1;min-width:80px;height:8px;border-radius:999px;background:var(--bg-2);overflow:hidden}
.fp-barre i{display:block;height:100%;width:0;border-radius:999px;background:var(--brand);
  transition:width .3s}
.fp-partie > .fc-nom{cursor:pointer;user-select:none}
.fp-partie > .fc-nom:hover{background:var(--brand-100)}
.fp-etat{margin-left:auto;flex:none;font-size:.7rem;font-weight:800;padding:3px 10px;
  border-radius:999px;background:var(--surface);color:var(--ink-soft);border:1px solid var(--border-2)}
.fp-etat:empty{display:none}
.fp-etat.fini{background:var(--ok-soft);color:var(--ok-ink);border-color:transparent}
.fc-code + .fp-etat{margin-left:8px}
.fp-chevron{flex:none;display:inline-flex;color:var(--ink-mute);transition:transform .2s}
.fp-chevron svg{width:16px;height:16px}
.fp-etat:empty + .fp-chevron{margin-left:auto}
.fp-ferme .fp-chevron{transform:rotate(-90deg)}
.fp-ferme > :not(.fc-nom){display:none !important}
.fp-ferme > .fc-nom{border-bottom:0}
.fp-suite{display:flex;justify-content:flex-end;padding:12px 16px;background:var(--bg);
  border-top:1px solid var(--border)}

@media (max-width:640px){
  .fv-g-tetes{display:none}
  .fv-g-l,.fv-grille-seule .fv-g-l{grid-template-columns:1fr;gap:7px;padding:11px 8px}
  .fv-g-l .fv-etoiles{justify-content:flex-start;padding:6px 10px}
  .fp-progres{flex-wrap:wrap}
}

/* ── LES CHOIX, EN PASTILLES (direction, 11 sept 2026) ──
   « Le petit carré est collé, il n'y a même pas d'espace. » La règle
   `.fc-matiere label` (plus haut) passait les cases et les Oui/Non en
   bloc, petit et gris. Chaque choix devient une pastille espacée, avec
   sa case (ou son rond) dessinée ; cochée, elle passe en orange. */
.fv-cases{flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:8px}
.fv-ouinon{flex-wrap:wrap;margin-top:8px}
.fc-matiere label.fv-case,label.fv-case,
.fc-matiere label.fv-radio,label.fv-radio{position:relative;display:inline-flex;align-items:center;
  gap:9px;margin:0;padding:9px 16px 9px 11px;border:1.5px solid var(--border-2);border-radius:999px;
  background:var(--surface);font-size:.85rem;font-weight:600;color:var(--ink-2);line-height:1.3;
  cursor:pointer;transition:border-color .12s,background .12s,color .12s}
label.fv-case input,label.fv-radio input{position:absolute;opacity:0;width:1px;height:1px;margin:0;
  pointer-events:none}
label.fv-case::before,label.fv-radio::before{content:"";flex:none;box-sizing:border-box;
  width:18px;height:18px;border:1.5px solid var(--border-2);background:var(--surface);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  font-size:.7rem;font-weight:900;line-height:1}
label.fv-case::before{border-radius:6px}
label.fv-radio::before{border-radius:50%}
label.fv-case:hover,label.fv-radio:hover{border-color:var(--ink-mute)}
label.fv-case:has(input:checked),label.fv-radio:has(input:checked),label.fv-radio.on{
  background:var(--brand-50);border-color:var(--brand);color:var(--brand-800)}
label.fv-case:has(input:checked)::before{content:"✓";background:var(--brand);border-color:var(--brand)}
label.fv-radio:has(input:checked)::before,label.fv-radio.on::before{
  background:var(--surface);border:5px solid var(--brand)}
label.fv-case:has(input:focus-visible),label.fv-radio:has(input:focus-visible){
  outline:2px solid var(--brand);outline-offset:2px}

/* La flèche d'une partie : un vrai bouton rond, qu'on voit et qu'on vise.
   Ouverte, elle pointe vers le bas ; repliée, vers la droite. */
.fp-chevron{width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--brand-100);color:var(--brand-700)}
.fp-chevron svg{width:17px;height:17px}
.fp-partie > .fc-nom:hover .fp-chevron{background:var(--brand);border-color:var(--brand);color:#fff}
/* Sur une étape faite ou pas encore ouverte, les parties se déplient
   aussi — le reste de l'aperçu, lui, reste inerte. */
.fep-apercu .fp-partie > .fc-nom{pointer-events:auto;cursor:pointer}
.fp-suite .btn + .btn{margin-left:8px}
.fep-lecture .textarea,.fep-lecture .input,.fep-lecture .select{
  background:var(--bg-2);border-color:transparent;color:var(--ink);
  cursor:default;opacity:1}
/* En relecture, la case prend la hauteur de ce qui est écrit : une
   réponse de cinq lignes (formateur, implication, programme, commentaire
   d'une matière) ne se lit plus en faisant défiler une petite fenêtre. */
.fep-lecture .textarea{min-height:0;height:auto;overflow:visible;field-sizing:content;resize:none}
/* Un champ resté vide ne doit pas ressembler à un oubli d'affichage :
   il se creuse à peine, et on voit qu'il n'y avait rien à dire. */
.fep-lecture .textarea:placeholder-shown,
.fep-lecture .input:placeholder-shown{background:transparent;
  border:1px dashed var(--border)}
.fep-lecture .fv-radio{opacity:.45}
.fep-lecture .fv-radio.on{opacity:1}
.fep-lecture .fv-case input:not(:checked) + span{opacity:.45}
.fep-lecture .fv-etoile{cursor:default}
.fep-lecture .fv-etoile:hover{transform:none}

/* Une mission en attente de la direction : elle ne se glisse pas, elle
   ne s'efface pas. Le curseur le dit avant qu'on essaie. */
.kb-card.kb-fige{cursor:default}
.kb-card.kb-fige::after{content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1.5px var(--brand-100,var(--fa-beige));pointer-events:none}

/* ══════════ LA PHOTO D'UN MEMBRE DE L'ÉQUIPE ══════════
   L'aperçu à gauche, les deux boutons à droite : on voit ce qu'on
   enregistre avant de l'enregistrer. Le kit fournit déjà la pastille
   ronde et le cadrage de l'image (.ava-photo, .ava img) ; il ne manque
   que la mise en page du champ — et la silhouette, qui reste dessinée
   en 18 px dans une pastille de 88. */
.ph-champ{display:flex;align-items:center;gap:16px}
/* ⚠️ PAS `.ph-actions` : cette classe appartient déjà aux en-têtes de
   page (`.page-h .ph-actions`), et la passer en colonne empilait les
   filtres de la to do list les uns sous les autres. Un nom de classe se
   vérifie avant d'être pris. */
.ph-boutons{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ava-xl svg{width:34px;height:34px}
@media(max-width:520px){
  .ph-champ{gap:12px}
  .ph-boutons .btn{padding-left:12px;padding-right:12px}
}

/* ══════════ LE CENTRE DOIT S'AMÉLIORER ══════════
   Une carte par objectif raté, trois de front. La barre est rouge :
   toutes celles qui sont là le sont parce que la cible n'est pas
   atteinte — il n'y a pas de demi-teinte à afficher. L'écart en points
   est mis en gras, c'est lui qu'on retient. */
.am-grille{row-gap:16px}
.am-l{min-width:0}
.am-l .bar{height:6px}
.am-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}
.am-h span{font-size:.78rem;font-weight:700;line-height:1.2}
.am-h b{font-size:1.05rem;flex:none;color:var(--urgence)}
/* Un objectif tenu, montré pour compléter la rangée, ne se lit pas
   comme un reproche : il passe au vert, chiffre et barre. */
.am-tenue .am-h b{color:var(--ok)}
/* ⚠️ La barre d'un objectif raté doit être ROUGE. Sans cette règle elle
   retombe sur l'orange de la marque (`.bar i` du kit) et un objectif
   manqué se lit comme un objectif en cours. Même forme de sélecteur que
   `.bar.bar-ok i`, pour que les deux pèsent pareil dans la cascade. */
.bar.bar-rate i{background:var(--urgence)}
/* Rien à mesurer : ni rouge ni vert, la carte reste muette. */
.am-vide .am-h b{color:var(--ink-mute)}
.am-vide .bar{opacity:.5}
.am-p{display:block;margin-top:5px;font-size:.69rem;color:var(--ink-mute)}
.am-p b{color:var(--ink-2)}
.am-tenu{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--ok);
  font-weight:600;padding:6px 0}
.am-tenu svg{width:18px;height:18px;flex:none}
@media(max-width:620px){ .am-grille{row-gap:14px} }

/* ══════════ LE FINANCEMENT PERDU ══════════
   Le montant à droite du libellé, la phrase en dessous. Pas de
   graphique : une ou deux ruptures ne dessinent pas une courbe, elles
   dessinent une ligne plate. La couleur est celle de l'urgence — c'est
   de l'argent qui ne rentrera pas. */
.fp{margin-top:14px;padding-top:13px;border-top:1px solid var(--border)}
.fp-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fp-h span{font-size:.79rem;font-weight:700}
.fp-h b{font-size:1.18rem;color:var(--urgence);letter-spacing:-.01em}
/* Inconnu n'est pas alarmant : le tiret reste gris. Zéro perdu non plus :
   il se lit en vert, comme la phrase qui l'accompagne. */
.fp-h b.fp-inconnu{color:var(--ink-mute)}
.fp-h b.fp-nul{color:var(--ok)}
.fp-p{display:block;margin-top:6px;font-size:.72rem;color:var(--ink-mute);line-height:1.45}
.fp-vide{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ok);
  font-weight:600;margin-top:6px}
.fp-vide svg{width:16px;height:16px;flex:none}

/* ══════════ L'APERÇU DE L'ENQUÊTE DE SATISFACTION ══════════
   Ce que l'alternant reçoit, montré au référent avant qu'il n'en suive
   l'envoi : on ne pilote pas à l'aveugle un questionnaire qu'on n'a
   jamais lu. Les questions numérotées, l'échelle en cinq crans avec ses
   couleurs, puis les matières concernées. */
.enq-consigne{font-size:.82rem;font-weight:600;margin:14px 0 8px;color:var(--ink-2)}
.enq-questions{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.enq-questions li{font-size:.86rem;line-height:1.45;color:var(--ink)}
.enq-questions li::marker{color:var(--ink-mute);font-weight:700;font-size:.78rem}

.enq-echelle{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.enq-e{font-size:.68rem;font-weight:700;padding:4px 10px;border-radius:99px;
  background:var(--bg-2);color:var(--ink-2);border:1px solid var(--border)}
.enq-e.t-danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.enq-e.t-warn{background:var(--warn-soft);color:var(--warn-ink);border-color:var(--warn)}
.enq-e.t-teal{background:var(--info-soft);color:var(--info);border-color:var(--info)}
.enq-e.t-ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}

/* ── LE QUESTIONNAIRE, MATIÈRE PAR MATIÈRE ──
   Sept matières fois cinq questions : trente-cinq notes. Les afficher
   d'un bloc fait un mur qu'on ne lit pas ; n'en montrer que le résumé
   ne dit pas ce qu'on demande vraiment. D'où le dépliant : la première
   matière ouverte pour donner la forme, les autres à portée de clic.

   `<details>` plutôt qu'un accordéon en JavaScript : le navigateur sait
   le faire, il reste ouvrable au clavier, et il s'imprime déplié. */
.enq-quest{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.enq-mat{border:1px solid var(--border);border-radius:10px;background:var(--surface);
  overflow:hidden}
.enq-mat summary{display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 12px;font-size:.8rem;list-style:none;user-select:none}
.enq-mat summary::-webkit-details-marker{display:none}
.enq-mat summary:hover{background:var(--bg-2)}
.enq-mat summary svg{width:13px;height:13px;color:var(--ink-mute);flex:none;
  transition:transform .15s}
.enq-mat[open] summary svg{transform:rotate(90deg)}
.enq-mat summary b{font-weight:700;color:var(--ink);flex:1;min-width:0}
.enq-mat summary em{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.04em;
  color:var(--ink-mute);flex:none}
.enq-qn{margin:0;padding:0 12px 10px 12px;list-style:none;
  display:flex;flex-direction:column;gap:2px}
.enq-qn li{display:flex;align-items:center;gap:12px;padding:7px 0;
  border-top:1px solid var(--border)}
.enq-qt{flex:1;min-width:0;font-size:.8rem;line-height:1.4;color:var(--ink-2)}
/* Le commentaire facultatif qui ferme chaque matière (7 oct. 2026). */
.enq-com-mat .enq-qt{display:flex;align-items:center;gap:6px;font-weight:600}
.enq-com-mat .enq-qt svg{width:14px;height:14px;color:var(--brand);flex:none}
.enq-com-mat em{font-style:normal;font-weight:500;color:var(--ink-mute)}
/* Les cinq crans : ce sont des repères, pas des boutons — rien ne se
   clique ici, le référent regarde ce que l'étudiant, lui, remplira. */
.enq-crans{display:flex;gap:4px;flex:none}
.enq-crans i{display:grid;place-items:center;width:20px;height:20px;border-radius:99px;
  font-style:normal;font-size:.64rem;font-weight:700;
  background:var(--bg-2);color:var(--ink-mute);border:1px solid var(--border)}

.enq-matieres{display:flex;flex-wrap:wrap;gap:7px}
.enq-m{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:600;
  padding:5px 11px;border-radius:8px;background:var(--surface);border:1px solid var(--border);
  color:var(--ink-2)}
.enq-m em{font-style:normal;font-size:.64rem;font-weight:800;letter-spacing:.04em;
  color:var(--ink-mute)}


/* ══════════ PAGE CAMPUS — CE QU'ON MET DANS CETTE PAGE ══════════
   Le bandeau porte maintenant trois usages, pas une seule phrase. */
.bandeau-campus .ab-liste{list-style:none;margin:9px 0 0;padding:0;
  display:flex;flex-direction:column;gap:6px}
.bandeau-campus .ab-liste li{display:flex;align-items:flex-start;gap:8px;
  font-size:.78rem;line-height:1.45;color:var(--ink-soft)}
.bandeau-campus .ab-liste li b{color:var(--ink-2);font-weight:700}
.bandeau-campus .ab-liste svg{width:14px;height:14px;flex:none;margin-top:2px;
  color:var(--violet);opacity:.85}

/* Le message de rentrée : sa propre ligne, sous le bandeau, avant la
   fiche du campus. C'est le geste de la rentrée, pas un réglage. */
.camp-lettre-barre{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 18px}
.camp-lettre-barre small{color:var(--ink-mute);font-size:.78rem;font-weight:600}

/* ══════════ LA LETTRE : ON N'ÉCRIT QUE LE MILIEU ══════════
   Le « Bonjour » et la signature encadrent la zone de saisie sans se
   laisser toucher : la forme de la lettre finale est sous les yeux
   pendant qu'on la rédige. */
.lt-cadre{border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--bg-2);padding:12px;display:flex;flex-direction:column;gap:10px}
.lt-fixe{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0;padding:0 4px;font-size:.86rem;color:var(--ink-soft);font-weight:600}
.lt-fixe em{font-style:italic;color:var(--ink-mute);font-weight:500}
.lt-fixe-bas{align-items:flex-end}
.lt-fixe-bas b{display:block;color:var(--ink-2);font-weight:800}
.lt-fixe-bas small{display:block;color:var(--ink-mute);font-size:.74rem;font-weight:600}
.lt-eti-fixe{flex:none;font-size:.64rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-mute);background:var(--surface);
  border:1px solid var(--border);border-radius:999px;padding:3px 9px}
.lt-cadre .lt-zone{background:var(--surface)}

/* ══════════ VENIR AU CAMPUS ══════════
   Les quatre textes de la fiche de rentrée. Une grille souple : à
   quatre, ils tiennent en deux colonnes ; à un seul, il ne reste pas
   une colonne orpheline à côté d'un vide. Les retours à la ligne
   saisis par le campus sont conservés — « Tram L2 » et « TER » sont
   deux accès, pas une phrase. */
.acc-bloc{margin-top:16px}
.acc-grille{display:grid;gap:14px 22px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.acc-item{min-width:0}
.acc-t{display:flex;align-items:center;gap:7px;
  font-size:.76rem;font-weight:800;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.acc-t svg{width:14px;height:14px;flex:none;color:var(--brand-700)}
.acc-v{font-size:.86rem;font-weight:500;color:var(--ink);line-height:1.5;
  overflow-wrap:anywhere}

/* ══════════ NOS PARTENAIRES DU CAMPUS ══════════
   Une piste de logos qu'on fait défiler, comme les cartes du suivi des
   classes : un logo se reconnaît d'un coup d'œil là où une liste de
   noms se lit ligne à ligne. */
.pa-note{display:flex;align-items:center;gap:7px;margin:-4px 0 14px;
  font-size:.78rem;font-weight:600;color:var(--violet)}
.pa-note svg{width:14px;height:14px;flex:none}
.pa-note b{font-weight:800}

.pa-piste{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
  padding:2px 2px 10px;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none}
.pa-piste::-webkit-scrollbar{display:none}

.pa-carte{flex:0 0 148px;scroll-snap-align:start;display:flex;
  flex-direction:column;align-items:center;gap:8px;padding:16px 12px 14px;
  border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);cursor:pointer;text-align:center;
  font:inherit;color:inherit;position:relative;
  transition:border-color .14s,box-shadow .14s,transform .14s}
.pa-carte:hover{border-color:var(--border-2);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(46,32,23,.10)}
.pa-carte.est-inactif{opacity:.55}

/* Le logo respire dans un carré clair : les logos arrivent en toutes
   tailles et toutes formes, `contain` les remet d'accord. */
.pa-logo{width:62px;height:62px;border-radius:14px;background:var(--bg-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.pa-logo img{max-width:100%;max-height:100%;object-fit:contain}
.pa-logo em{font-style:normal;font-weight:800;font-size:1.05rem;color:var(--ink-mute)}

.pa-nom{font-size:.84rem;font-weight:800;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pa-av{font-size:.74rem;font-weight:700;color:var(--brand-700);line-height:1.2}
.pa-off{position:absolute;top:8px;right:8px;font-size:.6rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);
  background:var(--bg-2);border-radius:999px;padding:2px 7px}

/* La fiche du partenaire, dans la modale. */
.pa-apercu{display:flex;justify-content:center;margin-bottom:14px}
.pa-apercu img{max-width:170px;max-height:88px;object-fit:contain}
.pa-avantage{font-size:1.15rem;font-weight:800;color:var(--brand-700);
  text-align:center;margin:0 0 16px}
.pa-ligne{display:flex;align-items:flex-start;gap:10px;padding:9px 0;
  border-top:1px solid var(--border)}
.pa-ligne svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ink-mute)}
.pa-ligne small{display:block;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink-mute)}
.pa-ligne b{display:block;font-size:.88rem;font-weight:600;color:var(--ink);margin-top:2px}
.pa-case{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;
  margin-top:4px;cursor:pointer}

/* ══════════ D'UNE FICHE À LA SUIVANTE ══════════
   La ligne du haut d'une fiche : le retour à gauche, les flèches à
   droite.

   ⚠️ `margin-left:auto` SUR LES FLÈCHES, ET NON `space-between` SUR LA
   LIGNE. Les deux poussent au même endroit tant que tout tient sur une
   rangée. Mais dès que la ligne se replie — fenêtre étroite, nom de
   classe long —, `space-between` place l'élément seul de la seconde
   rangée à GAUCHE : les flèches sautaient sous le bouton de retour. La
   marge automatique, elle, les garde à droite dans les deux cas. */
.fiche-tete{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:14px}

.nav-fiche{margin-left:auto;display:flex;align-items:center;gap:2px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:99px;padding:2px}
.nav-fiche .nf-fl{width:30px;height:30px;border-radius:50%}
/* Éteinte, la flèche garde sa place : elle ne disparaît pas, sinon les
   deux autres commandes sautent d'une fiche à l'autre. */
.nav-fiche .nf-fl[disabled]{opacity:.3;cursor:default;pointer-events:none}
/* Le libellé dit CE QU'ON PARCOURT, pas seulement combien il en reste :
   « Étudiant 2 sur 3 », et la série en second plan. Deux flèches autour
   d'un « 2 / 3 » laissaient deviner. */
.nf-rang{display:flex;align-items:baseline;gap:6px;padding:0 9px;
  font-size:.75rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.nf-rang b{font-weight:700;color:var(--ink-2)}
/* La série passe APRÈS le compteur et s'efface la première : sur un
   écran étroit, savoir qu'on parcourt des étudiants compte plus que de
   relire le nom de la classe, déjà écrit à côté du nom de l'alternant. */
.nf-rang em{font-style:normal;font-weight:600;color:var(--ink-mute)}
.nf-rang em::before{content:"·";margin-right:6px;color:var(--border-2)}
@media (max-width:720px){ .nf-rang em{display:none} }

/* ══════════ LA DÉCOUVERTE ══════════
   Ce que l'application explique d'elle-même. Sobre : on la lit une
   fois, elle ne doit pas se donner des airs de campagne publicitaire.

   ET ÉTROITE. Elle parle de la page qui est DERRIÈRE elle : à 720 px
   elle la recouvrait entièrement, et on se retrouvait à expliquer un
   écran qu'on ne voyait plus. Resserrée, elle laisse voir son sujet.
   (`:has()` manquant, on retombe sur les 560 px de la modale ordinaire
   — moins bien, jamais cassé.) */
.modal:has(.dec){width:min(486px,100%)}

/* Le titre porte l'icône de la page, la même que dans le rail : on
   reconnaît l'écran dont on parle avant même d'avoir lu le titre. */
.dec-tete{display:inline-flex;align-items:center;gap:10px}
.dec-tete svg{width:18px;height:18px;flex:none;color:var(--brand-700)}

.dec-intro{font-size:.9rem;line-height:1.5;color:var(--ink-soft);margin:0 0 18px}

/* Un point : une icône, un nom, une phrase.

   Le nom passe SUR SA PROPRE LIGNE, il n'est plus en gras au milieu du
   texte. Semé en cours de phrase, le gras hache la lecture au lieu de
   la guider, et il interdit de parcourir la liste des yeux : il fallait
   tout lire pour savoir de quoi chaque point parlait. Mis en tête, il
   donne le sujet, et la phrase en dessous n'est là que si l'on veut le
   détail. */
.dec-points{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:15px}
.dec-points li{display:flex;align-items:flex-start;gap:12px}
.dp-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;
  place-items:center;background:var(--brand-50);color:var(--brand-700)}
.dp-ic svg{width:15px;height:15px}
.dp-txt{font-size:.85rem;line-height:1.5;color:var(--ink-soft);padding-top:1px}
.dp-txt b{display:block;font-size:.875rem;font-weight:700;color:var(--ink);
  margin-bottom:2px;line-height:1.35}

.dec-fin{display:flex;align-items:flex-start;gap:9px;margin:18px 0 0;
  padding:11px 13px;border-radius:var(--r-md);background:var(--brand-50);
  font-size:.83rem;line-height:1.45;color:var(--ink-2)}
.dec-fin svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--brand-700)}
.dec-fin b{font-weight:700}

/* Le « ? » de la barre du titre : discret, à gauche des autres actions. */
.tb-aide{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:1px solid var(--border);
  border-radius:50%;background:var(--surface);color:var(--ink-mute);
  cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.tb-aide:hover{border-color:var(--border-2);color:var(--ink);background:var(--bg-2)}
.tb-aide svg{width:16px;height:16px}

/* Ce que la direction réclame, sur une carte renvoyée dans la to do
   list. Ambre : ce n'est pas une erreur, c'est une demande. */
.kb-renvoi{display:flex;align-items:flex-start;gap:6px;margin-top:7px;
  padding:7px 9px;border-radius:9px;background:var(--warn-soft,var(--brand-50));
  font-size:.74rem;line-height:1.35;color:var(--ink-2);font-weight:600}
.kb-renvoi svg{width:13px;height:13px;flex:none;margin-top:1px;color:var(--warn)}

/* ══════════ LE CALQUE DE LECTURE D'UN COMPTE RENDU ══════════
   Le document s'affiche DANS l'application, dans une iframe : même mise
   en page qu'à l'impression, et rien qu'un navigateur puisse bloquer.
   Les fenêtres surgissantes, elles, échouaient sans le dire. */
/* ⚠️ AU-DESSUS DE TOUT. À z-index 80, le calque passait DERRIÈRE le
   panneau de l'étape (z-index 595) : le document s'ouvrait bien, mais
   caché dessous, et il fallait fermer le panneau pour le voir. */
.doc-calque{position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;
  background:var(--bg-2)}
.doc-barre{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--border);
  font-size:.95rem;font-weight:800;color:var(--ink);flex:none}
.doc-actions{display:flex;align-items:center;gap:8px;flex:none}

/* LA FEUILLE SUR LE BUREAU. Le document ne s'étale pas sur toute la
   largeur — un texte long est illisible en pleine page. Il se pose au
   milieu, à la largeur d'une feuille, sur un fond sombre qui le détache. */
.doc-scene{flex:1;min-height:0;overflow:auto;padding:26px 20px;
  background:linear-gradient(180deg,#3A2C20,#2E241A)}
.doc-cadre{display:block;width:min(940px,100%);height:100%;margin:0 auto;border:0;
  background:#FFF;border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.34)}
body.doc-ouvert{overflow:hidden}
@media (max-width:640px){
  .doc-barre{flex-wrap:wrap;gap:10px;padding:10px 14px}
  .doc-actions{width:100%;justify-content:flex-end}
  .doc-scene{padding:12px 8px}
}


/* ══════════ LE TIROIR DE VALIDATION RESPIRE ══════════
   480 px sur un écran large, c'est un tiers de la page : le compte
   rendu, la demande de la direction et deux boutons ne tiennent pas
   dedans, et le second bouton passait sous le bord. La moitié de
   l'écran, plafonnée pour ne pas devenir illisible en pleine largeur. */
body .drawer{width:min(760px, max(50vw, 480px), calc(100vw - 20px))}

/* ⚠️ LE PIED NE COUPE PLUS SES BOUTONS. Il était en une seule rangée
   rigide : deux libellés longs débordaient et le second se retrouvait
   à moitié hors du tiroir. Ils passent l'un sous l'autre plutôt que
   d'être rognés. */
.drawer-f{flex-wrap:wrap}
.drawer-f > .btn{flex:1 1 auto;min-width:0;white-space:normal}
.drawer-f > .btn-block{flex:1 1 100%}

/* ══════════ LE PLANNING D'UNE CLASSE ══════════
   Une suite de périodes, école ou entreprise, bordées à gauche de la
   couleur du lieu : on lit l'alternance en balayant la colonne. */
.pl-note{display:flex;align-items:center;gap:7px;margin:-4px 0 14px;
  font-size:.78rem;font-weight:600;color:var(--violet)}
.pl-note svg{width:14px;height:14px;flex:none}
.pl-note b{font-weight:800}

.pl-liste{display:flex;flex-direction:column;gap:8px}
.pl-ligne{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;
  border:1px solid var(--border);border-left:3px solid var(--border-2);
  border-radius:var(--r-md);background:var(--surface);cursor:pointer;
  font:inherit;color:inherit;text-align:left;
  transition:border-color .12s,background .12s}
.pl-ligne:hover{border-color:var(--border-2);background:var(--bg-2)}
.pl-ligne.est-ecole{border-left-color:var(--info)}
.pl-ligne.est-entreprise{border-left-color:var(--ok)}
.pl-ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;flex:none;background:var(--bg-2);color:var(--ink-soft)}
.pl-ligne.est-ecole .pl-ic{background:var(--info-soft,var(--bg-2));color:var(--info)}
.pl-ligne.est-entreprise .pl-ic{background:var(--ok-soft,var(--bg-2));color:var(--ok)}
.pl-ic svg{width:17px;height:17px}
.pl-txt{flex:1;min-width:0}
.pl-txt b{display:block;font-size:.88rem;font-weight:800}
.pl-txt small{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:2px}
.pl-mot{font-style:italic;color:var(--ink-mute)!important}

/* ═══════════════════════════════════════════════════════════════
   « VOIR COMME » — le bandeau de la vue empruntée.

   Il est COLLANT et il ne quitte jamais l'écran, volontairement : on ne
   doit pas pouvoir oublier qu'on regarde par les yeux de quelqu'un
   d'autre. Une capture d'écran prise pendant une prise de vue le porte
   donc toujours.

   Il est posé dans `.main`, au-dessus de la barre du titre. Sur le
   tableau de bord, qui se cale sur `100dvh`, la page perd ces quelques
   pixels et défile chez elle — la règle `.page[data-vue="dashboard"]
   {overflow:auto}` s'en charge déjà.
   ═══════════════════════════════════════════════════════════════ */
.bandeau-vision{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:12px;
  padding:9px 18px;
  background:var(--brand-800,#291D13);color:#fff;
  font-size:.82rem;line-height:1.3;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.bandeau-vision .bv-oeil{display:flex;flex:0 0 auto;opacity:.9}
.bandeau-vision .bv-oeil .ico{width:17px;height:17px}
.bandeau-vision .bv-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bandeau-vision .bv-txt b{font-weight:800}
.bandeau-vision .bv-txt i{font-style:normal;opacity:.75}
.bandeau-vision button{
  flex:0 0 auto;cursor:pointer;font:inherit;font-weight:700;
  border-radius:999px;padding:5px 13px;
  border:1px solid rgba(255,255,255,.34);
  background:transparent;color:#fff;
  transition:background .15s ease;
}
.bandeau-vision button:hover{background:rgba(255,255,255,.15)}
.bandeau-vision .bv-avert{
  display:flex;align-items:center;gap:5px;
  border-color:var(--warn,#d98200);background:var(--warn,#d98200);color:#231a10;
}
.bandeau-vision .bv-avert .ico{width:15px;height:15px}
.bandeau-vision .bv-sortie{background:#fff;color:var(--brand-800,#291D13);border-color:#fff}
.bandeau-vision .bv-sortie:hover{background:rgba(255,255,255,.85)}

@media(max-width:640px){
  .bandeau-vision{padding:8px 12px;gap:8px;font-size:.76rem}
  .bandeau-vision .bv-txt i{display:none}
}

/* ── Lecture seule, rendue visible ──
   La vraie barrière est en base (`voir_comme` ne fait que lire) et dans
   data-service.js, qui REFUSE toute écriture sous une identité empruntée.
   Ces règles-ci ne font qu'éviter de PROPOSER un geste qui serait de
   toute façon refusé : on ne tend pas un bouton pour rien.

   La page « Voir comme » elle-même en est exclue : ses boutons à elle
   (quitter, contrôler, naviguer) sont les seuls qui doivent répondre. */
body[data-vision] .page:not([data-vue="voir-comme"]) .btn-primary,
body[data-vision] .page:not([data-vue="voir-comme"]) .btn-danger,
body[data-vision] .page:not([data-vue="voir-comme"]) .btn-danger-soft,
body[data-vision] .page:not([data-vue="voir-comme"]) .btn-dark,
body[data-vision] .page:not([data-vue="voir-comme"]) input,
body[data-vision] .page:not([data-vue="voir-comme"]) textarea,
body[data-vision] .page:not([data-vue="voir-comme"]) select,
body[data-vision] .page:not([data-vue="voir-comme"]) [contenteditable="true"]{
  pointer-events:none;opacity:.5;
}
/* Les cartes de kanban ne se déplacent plus : un déplacement est une
   écriture, signée du nom de quelqu'un d'autre. */
body[data-vision] .page:not([data-vue="voir-comme"]) [draggable="true"]{
  pointer-events:none;
}
body[data-vision] .page:not([data-vue="voir-comme"]) .kb-card{cursor:default}

/* ═══════════════════════════════════════════════════════════════
   L'EMPLOI DU TEMPS D'UNE CLASSE — la grille de la semaine.

   La structure vient du kit (`.sem-*` dans fasup-ui.css), qu'on ne
   touche pas. Ici : le nombre de colonnes (cinq jours, six s'il y a
   cours le samedi — le kit en pose sept d'office) et les couleurs.

   ── LES COULEURS ──
   Orange, beige, brun, blanc : la charte, et rien d'autre. Elles ne
   décorent pas, elles servent à reconnaître un cours SANS LE LIRE —
   c'est pour ça qu'une matière garde toujours la même (voir
   `teinteMatiere` dans app.js, qui la tire du nom et non d'un rang).

   Le VERT est réservé aux jours passés en entreprise. Il ne sert à
   aucune matière : sur cette grille, vert veut dire une seule chose.
   ═══════════════════════════════════════════════════════════════ */
.edt-carte{padding:0;overflow:hidden}
.edt-note{margin:10px 16px 6px}
/* ═══════════════════════════════════════════════════════════════
   LE PLANNING D'UNE CLASSE : trois semaines de cartes (29 sept 2026)

   Le calendrier de l'App Entreprise, repris tel quel à la demande de
   Théo : une case par jour, une bande par jour. Marron l'entreprise,
   orange l'école (la charte), bleu le voyage à Londres et vert les
   examens du BTS (les deux seules couleurs hors charte, voulues par
   Théo). Aplats FIXES : ils ne basculent pas en vue sombre.
   ═══════════════════════════════════════════════════════════════ */
.plc-carte{padding:18px 18px 20px}
.plc-h{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;margin-bottom:14px}
.plc-titre{display:flex;flex-direction:column;gap:2px;margin-right:auto;min-width:0}
.plc-titre b{font-size:1.05rem;font-weight:800;color:var(--ink)}
.plc-titre span{font-size:.8rem;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.plc-legende{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
.plc-lg{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;color:var(--ink-2)}
.plc-lg i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:18px;border-radius:6px}
.plc-lg svg{width:12px;height:12px}
.plc-nav{display:flex;align-items:center;gap:6px}
.plc-haut svg{transform:rotate(180deg)}
.plc-carte .edt-note{margin:0 0 12px}

.plc-grille{display:grid;grid-template-columns:repeat(var(--plc-n,5),minmax(0,1fr));gap:8px 2px}
.plc-jn{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-mute);text-align:center;padding:2px 0 4px}
.plc-jour{border:1px solid var(--border);border-radius:13px;padding:10px;background:var(--surface);
  display:flex;flex-direction:column;gap:7px;min-height:118px}
.plc-jour > *{flex:0 0 auto}
.plc-jour.aujourdhui{border-color:#F69D00;box-shadow:inset 0 0 0 1px #F69D00}
.plc-q{display:block;text-align:center;font-size:.95rem;font-weight:800;color:var(--ink-2);line-height:1}
.plc-q sup{font-size:.6em}
.plc-jour.aujourdhui .plc-q{color:#B87400}
.plc-jsem{display:none}

.plc-b{display:flex;align-items:center;justify-content:center;gap:7px;height:29px;padding:0 10px;
  font-size:.8rem;font-weight:800;overflow:hidden;white-space:nowrap}
.plc-b svg{width:14px;height:14px;flex:none;opacity:.8}
.plc-b b{font-weight:800;font-style:italic;min-width:0;overflow:hidden;text-overflow:ellipsis}
.plc-b.deb{border-top-left-radius:9px;border-bottom-left-radius:9px}
.plc-b.fin{border-top-right-radius:9px;border-bottom-right-radius:9px}
.plc-b-entreprise{background:#2E2017;color:#FFF6E2}
.plc-b-ecole{background:#F69D00;color:#2E2017}
.plc-b-voyage{background:#3B6FE0;color:#FFFFFF}
.plc-b-examen{background:#1E9E5A;color:#FFFFFF}
@media(min-width:721px){
  .plc-b:not(.deb) > svg,
  .plc-b:not(.deb) > b{display:none}
}
/* Une journée courte, un cours de Galia : une pastille sous la bande. */
.plc-ev{display:block;text-align:center;font-size:.76rem;font-weight:700;line-height:1.3;
  padding:5px 8px;border-radius:8px;background:#FFF6E2;color:#2E2017;overflow-wrap:break-word}
.plc-ev i{font-style:normal;font-weight:800;opacity:.7}
.plc-ev.annule{text-decoration:line-through;opacity:.6}

/* SUR TÉLÉPHONE, UNE SEMAINE = CINQ LIGNES. Cinq colonnes dans 360 px
   font des cases de 60 px où « Entreprise » ne tient pas. Le nom du jour
   rejoint le quantième, et chaque bande garde son libellé. */
@media(max-width:720px){
  .plc-carte{padding:14px 12px 16px}
  .plc-nav{flex-wrap:wrap;width:100%}
  .plc-grille{grid-template-columns:minmax(0,1fr)}
  .plc-jn{display:none}
  .plc-jour{min-height:0;padding:9px 12px;flex-direction:row;align-items:center;flex-wrap:wrap}
  .plc-q{display:flex;align-items:baseline;gap:6px;width:64px;text-align:left}
  .plc-jsem{display:inline;font-style:normal;font-size:.7rem;font-weight:800;
    text-transform:uppercase;color:var(--ink-mute)}
  .plc-b{flex:1 1 auto;border-radius:9px}
  .plc-ev{flex:1 1 100%}
}

/* Cinq colonnes, pas sept : une semaine de cours, pas une semaine
   civile. `--edt-n` est posé par app.js selon qu'il y a cours le
   samedi ou non. */
.sem-jours.edt-cols{grid-template-columns:46px repeat(var(--edt-n,5),1fr)}
.sem-grille.edt-cols{grid-template-columns:repeat(var(--edt-n,5),1fr)}

.edt-nav{display:flex;align-items:center;gap:4px}
/* La semaine affichée, entre les deux flèches. `tabular-nums` pour que
   les chiffres ne dansent pas d'une semaine à l'autre, et une largeur
   minimale pour que les flèches ne se déplacent pas sous le doigt selon
   la longueur du libellé. */
.edt-semaine{min-width:186px;text-align:center;
  font-size:.8rem;font-weight:800;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── Les cinq teintes de matière ──
   Toutes tirées des JETONS du kit, jamais d'une couleur écrite en dur :
   c'est ce qui les fait basculer toutes seules en vue sombre. Le brun
   est le seul qui n'ait pas de jeton — il porte donc, lui seul, son
   dépassement explicite plus bas.

   ⚠️ Une couleur en dur ici resterait claire en vue sombre pendant que
   le texte, lui, s'éclaircirait : le cours deviendrait illisible. */
:root{
  --edt-t3-fond:#F3E8DC;  --edt-t3-trait:#E4D2BE;   /* brun clair   */
  --edt-t5-trait:#F3D9AC;                           /* orange sable */
}
body[data-theme="dark"]{
  --edt-t3-fond:#3A2C1E;  --edt-t3-trait:#4E3B28;
  --edt-t5-trait:#5C421F;
}

.sem-ev.edt-t1{background:var(--brand-50);border-color:var(--brand-100);
  border-left-color:var(--brand)}                              /* orange clair */
.sem-ev.edt-t2{background:var(--bg-2);border-color:var(--border-2);
  border-left-color:var(--ink-soft)}                           /* beige        */
.sem-ev.edt-t3{background:var(--edt-t3-fond);border-color:var(--edt-t3-trait);
  border-left-color:var(--ink-2)}                              /* brun clair   */
.sem-ev.edt-t4{background:var(--surface);border-color:var(--border-2);
  border-left-color:var(--brand-700)}                          /* blanc        */
.sem-ev.edt-t5{background:var(--brand-100);border-color:var(--edt-t5-trait);
  border-left-color:var(--brand-600)}                          /* orange sable */

.sem-ev b{color:var(--ink)}
.sem-ev small{color:var(--ink-soft)}

/* ── L'ENTREPRISE : la colonne entière ──
   On cherche d'abord « où est-il cette semaine ? ». La réponse doit se
   voir avant même d'avoir lu un seul nom de matière. */
/* La colonne elle-même ne porte plus le vert : c'est le BLOC posé
   par-dessus qui le fait, d'un seul tenant. Elle garde seulement son
   trait de séparation. */
.sem-col.edt-entreprise{border-right-color:rgba(30,158,90,.3)}
.sem-col{grid-row:1}

/* ── L'ORDRE D'EMPILEMENT ──
   Les colonnes ont un fond ; sans ces trois lignes, ce fond recouvrait
   les réglures horaires et le planning perdait ses lignes d'heures dès
   qu'une journée passait au vert.

     filigrane ENTREPRISE  ...  sous tout
     réglures des heures   ...  par-dessus les fonds de colonne
     séances               ...  au-dessus de tout */
.sem-grille .sem-ligne{z-index:1;
  /* Le beige du kit disparaît sur le vert des jours d'entreprise. Une
     encre translucide, elle, tient sur les deux fonds — et sur les deux
     thèmes. */
  background:rgba(41,29,19,.075)}
body[data-theme="dark"] .sem-grille .sem-ligne{background:rgba(255,255,255,.07)}
.sem-grille .sem-ev{z-index:2}
/* ⚠️ UN COURS GARDE SA COULEUR, MÊME SUR FOND VERT. Le teinter en vert
   comme la colonne ferait disparaître une contradiction qu'il faut au
   contraire voir : la classe est annoncée en entreprise, et pourtant
   Gallia y a posé une séance. C'est exactement le genre d'écart qu'on
   ouvre un planning pour repérer. */
/* ── LE SÉJOUR EN ENTREPRISE, D'UN SEUL TENANT ──
   Un bloc par suite de jours consécutifs, posé PAR-DESSUS les colonnes
   qu'il couvre : le vert devient continu, et ENTREPRISE s'écrit une
   seule fois en travers. Les traits qui séparent les jours restent
   visibles dessous — on garde la lecture jour par jour, on ajoute
   la lecture d'ensemble.

   L'angle et la taille du mot sont calculés à la mesure (voir
   `ajusterFiligranes` dans app.js) : il suit la vraie diagonale du
   bloc, qu'il fasse un jour ou cinq. */
.edt-bloc-ent{grid-row:1;position:relative;z-index:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  pointer-events:none;
  background:var(--ok-soft);
  border-left:1px solid rgba(30,158,90,.42);
  border-right:1px solid rgba(30,158,90,.42)}
.edt-bloc-ent>span{white-space:nowrap;font-weight:900;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ok);opacity:.3;
  transform:rotate(-60deg);transform-origin:center}

/* Les traits de jour, redessinés PAR-DESSUS le bloc : sans eux, un
   séjour de trois jours deviendrait une seule surface et l'on ne
   saurait plus lire « du lundi au mercredi ». */
.edt-bloc-ent[data-jours="2"],
.edt-bloc-ent[data-jours="3"],
.edt-bloc-ent[data-jours="4"],
.edt-bloc-ent[data-jours="5"],
.edt-bloc-ent[data-jours="6"]{
  background-image:repeating-linear-gradient(to right,
    transparent 0, transparent calc(100% / var(--edt-j) - 1px),
    rgba(30,158,90,.28) calc(100% / var(--edt-j) - 1px),
    rgba(30,158,90,.28) calc(100% / var(--edt-j)))}
.edt-bloc-ent[data-jours="2"]{--edt-j:2}
.edt-bloc-ent[data-jours="3"]{--edt-j:3}
.edt-bloc-ent[data-jours="4"]{--edt-j:4}
.edt-bloc-ent[data-jours="5"]{--edt-j:5}
.edt-bloc-ent[data-jours="6"]{--edt-j:6}

/* ── LA PAUSE DE MI-JOURNÉE ──
   Une bande creusée en travers de toute la semaine. Pas de texte :
   l'heure, dans la marge, la nomme déjà. Elle passe au-dessus des fonds
   de colonne et du bloc d'entreprise — la pause vaut aussi en
   entreprise — mais sous les séances. */
.edt-pause{position:absolute;left:0;right:0;z-index:1;pointer-events:none;
  background:rgba(41,29,19,.055);
  border-top:1px solid rgba(41,29,19,.07);
  border-bottom:1px solid rgba(41,29,19,.07)}
body[data-theme="dark"] .edt-pause{background:rgba(0,0,0,.22);
  border-top-color:rgba(255,255,255,.06);border-bottom-color:rgba(255,255,255,.06)}

/* Une séance annulée reste VISIBLE, barrée. Un cours qui disparaît sans
   laisser de trace fait douter de tout le reste du planning. */
.sem-ev.edt-annule{background:var(--bg-2)!important;
  border-left-color:var(--danger)!important;opacity:.7}
.sem-ev.edt-annule b{text-decoration:line-through;color:var(--ink-mute)}

@media(max-width:640px){
  .edt-note{margin:10px 12px 6px}
  .sem-h{padding:9px 12px;flex-wrap:wrap;gap:8px}
  .sem-h b{font-size:.84rem}
  /* `.pl-note` est un flex : sur écran étroit, chacun de ses morceaux
     devenait une colonne et la phrase se lisait en escalier. Sur mobile
     elle redevient du texte qui coule, l'icône comprise. */
  .pl-note{display:block}
  .pl-note svg{display:inline-block;vertical-align:-2px;margin-right:5px}
  .edt-semaine{min-width:0;font-size:.74rem}
  .edt-bloc-ent>span{letter-spacing:.14em}
}

/* ═══════════════════════════════════════════════════════════════
   « VOIR COMME » — le bandeau de la vue empruntée.

   Il est COLLANT et il ne quitte jamais l'écran, volontairement : on ne
   doit pas pouvoir oublier qu'on regarde par les yeux de quelqu'un
   d'autre. Une capture d'écran prise pendant une prise de vue le porte
   donc toujours.

   Il est posé dans `.main`, au-dessus de la barre du titre. Sur le
   tableau de bord, qui se cale sur `100dvh`, la page perd ces quelques
   pixels et défile chez elle — la règle `.page[data-vue="dashboard"]
   {overflow:auto}` s'en charge déjà.
   ═══════════════════════════════════════════════════════════════ */
.bandeau-vision{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:12px;
  padding:9px 18px;
  background:var(--brand-800,#291D13);color:#fff;
  font-size:.82rem;line-height:1.3;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.bandeau-vision .bv-oeil{display:flex;flex:0 0 auto;opacity:.9}
.bandeau-vision .bv-oeil .ico{width:17px;height:17px}
.bandeau-vision .bv-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bandeau-vision .bv-txt b{font-weight:800}
.bandeau-vision .bv-txt i{font-style:normal;opacity:.75}
.bandeau-vision button{
  flex:0 0 auto;cursor:pointer;font:inherit;font-weight:700;
  border-radius:999px;padding:5px 13px;
  border:1px solid rgba(255,255,255,.34);
  background:transparent;color:#fff;
  transition:background .15s ease;
}
.bandeau-vision button:hover{background:rgba(255,255,255,.15)}
.bandeau-vision .bv-avert{
  display:flex;align-items:center;gap:5px;
  border-color:var(--warn,#d98200);background:var(--warn,#d98200);color:#231a10;
}
.bandeau-vision .bv-avert .ico{width:15px;height:15px}
.bandeau-vision .bv-sortie{background:#fff;color:var(--brand-800,#291D13);border-color:#fff}
.bandeau-vision .bv-sortie:hover{background:rgba(255,255,255,.85)}
/* Le récapitulatif de la vue empruntée : icône seule, discret — c'est
   « Quitter cette vue » qui doit rester le geste évident du bandeau. */
.bandeau-vision .bv-recap{display:flex;align-items:center;padding:5px 9px}
.bandeau-vision .bv-recap .ico{width:15px;height:15px}

@media(max-width:640px){
  .bandeau-vision{padding:8px 12px;gap:8px;font-size:.76rem}
  .bandeau-vision .bv-txt i{display:none}
}

/* ── Lecture seule, rendue visible ──
   La vraie barrière est en base (`voir_comme` ne fait que lire) et dans
   data-service.js, qui REFUSE toute écriture sous une identité empruntée.
   Ces règles-ci ne font qu'éviter de PROPOSER un geste qui serait de
   toute façon refusé : on ne tend pas un bouton pour rien.

   La page « Voir comme » elle-même en est exclue : ses boutons à elle
   (quitter, contrôler, naviguer) sont les seuls qui doivent répondre. */
body[data-vision] .page:not([data-vue="voir-comme"]) .btn-primary,
body[data-vision] .page:not([data-vue="voir-comme"]) .btn-danger,
body[data-vision] .page:not([data-vue="voir-comme"]) .btn-danger-soft,
body[data-vision] .page:not([data-vue="voir-comme"]) .btn-dark,
body[data-vision] .page:not([data-vue="voir-comme"]) input,
body[data-vision] .page:not([data-vue="voir-comme"]) textarea,
body[data-vision] .page:not([data-vue="voir-comme"]) select,
body[data-vision] .page:not([data-vue="voir-comme"]) [contenteditable="true"]{
  pointer-events:none;opacity:.5;
}
/* Les cartes de kanban ne se déplacent plus : un déplacement est une
   écriture, signée du nom de quelqu'un d'autre. */
body[data-vision] .page:not([data-vue="voir-comme"]) [draggable="true"]{
  pointer-events:none;
}
body[data-vision] .page:not([data-vue="voir-comme"]) .kb-card{cursor:default}

/* ═══════════════════════════════════════════════════════════════
   L'EMPLOI DU TEMPS D'UNE CLASSE — les séances venues de Gallia.

   Même famille visuelle que les périodes (.pl-*) juste au-dessus :
   c'est le même onglet, ça ne doit pas ressembler à deux applications.
   La différence est qu'une séance NE SE CLIQUE PAS — elle est en
   lecture seule, puisque Gallia en est la source. Pas de curseur main,
   pas d'effet de survol : rien ne promet une action qui n'existe pas.
   ═══════════════════════════════════════════════════════════════ */
.co-liste{display:flex;flex-direction:column;gap:16px;margin-top:4px}

.co-jour{display:flex;flex-direction:column;gap:6px}
.co-date{display:flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:800;color:var(--ink-soft);
  padding-bottom:2px}
.co-jour.est-passe{opacity:.5}
.co-jour.est-aujourdhui .co-date{color:var(--brand)}
.co-tag{font-size:.68rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;
  background:var(--brand-50);color:var(--brand-800)}

.co-ligne{display:flex;align-items:center;gap:12px;padding:10px 14px;
  border:1px solid var(--border);border-left:3px solid var(--violet);
  border-radius:var(--r-md);background:var(--surface)}
.co-jour.est-aujourdhui .co-ligne{border-left-color:var(--brand)}

.co-h{display:flex;flex-direction:column;align-items:flex-end;
  flex:none;min-width:48px;
  font-size:.84rem;font-weight:800;font-variant-numeric:tabular-nums}
.co-h small{font-size:.72rem;font-weight:600;color:var(--ink-mute)}

.co-txt{flex:1;min-width:0}
.co-txt b{display:block;font-size:.86rem;font-weight:800}
.co-txt small{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:2px}

/* Une séance annulée reste VISIBLE, barrée. Un cours qui disparaît sans
   laisser de trace fait douter de tout le reste du planning. */
/* ⚠️ La spécificité compte ici : `.co-jour.est-aujourdhui .co-ligne` pose
   déjà une bordure de marque, et elle l'emportait sur celle-ci — une
   séance annulée LE JOUR MÊME, justement celle qu'il faut voir, gardait
   la couleur d'un cours normal. On repasse donc par le jour. */
.co-ligne.est-annule,
.co-jour.est-aujourdhui .co-ligne.est-annule{
  border-left-color:var(--danger);background:var(--bg-2)}
.co-ligne.est-annule .co-txt b{text-decoration:line-through;color:var(--ink-mute)}
.co-ligne.est-annule .co-h{text-decoration:line-through;color:var(--ink-mute)}

@media(max-width:520px){
  .co-ligne{padding:9px 11px;gap:9px}
  .co-h{min-width:42px;font-size:.78rem}
}


/* ══════════ TABLEAU DE BORD — le design validé ══════════

   Trois sections empilées, gap 20px, et rien autour :

     .db-tuiles  UNE carte, cinq tuiles à égalité séparées d'un filet ;
     .db-fin     trois cartes de financement à égalité ;
     .db-obj     « Le centre doit s'améliorer », pleine largeur.

   TOUTES LES COULEURS VIENNENT DU KIT. Plus de couche --viz-*
   avivée : la maquette validée tient sur les jetons sémantiques de
   fasup-ui.css — --ok #1E9E5A, --danger #D64545, --info #3B6FE0,
   --violet #8B5CF6, --brand #F59D00 —, ce qui la fait basculer en
   thème sombre sans une ligne de plus.

   --always-light : le pendant clair d'--always-dark, qui manquait au
   kit. Une variable absente ne se voit pas, elle hérite en silence :
   on la pose ici, une fois. */
:root{ --always-light:#FFF6E2; }

/* ── La colonne de la page ───────────────────────────────────────
   `flex:1 0 auto` : la colonne DESCEND JUSQU'EN BAS de l'écran, et ne
   se comprime jamais sous la taille de son contenu. C'est ce qui donne
   aux sections de quoi grandir — sans quoi elles restaient collées en
   haut avec un vide sous « Le centre doit s'améliorer ». */
.db{display:flex;flex-direction:column;gap:20px;width:100%;flex:1 0 auto}

/* ── L'entrée en scène ─────────────────────────────────────────────
   Chaque section monte de 14 px en apparaissant, l'une après
   l'autre. Le délai est posé dans le HTML : c'est la page qui sait
   combien de sections elle a. */
@keyframes dbIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.db-sec{animation:dbIn .55s var(--ease) both}
@media (prefers-reduced-motion:reduce){
  .db-sec{animation:none}
}

/* ── Le ruban de date de démonstration ──────────────────────────
   Absent au jour réel. Présent — et impossible à manquer — dès que
   l'on regarde l'application à une autre date. */
.db-demo{display:flex;align-items:center;gap:11px;flex:none;
  padding:9px 15px;border-radius:var(--r-lg);
  background:var(--warn-soft);color:var(--warn-ink);
  font-size:.79rem;font-weight:600;line-height:1.35}
.db-demo svg{width:16px;height:16px;flex:none}
.db-demo span{flex:1;min-width:0}
.db-demo b{font-weight:800}
.db-demo-x{margin-left:auto;flex:none;border:0;cursor:pointer;
  font:inherit;font-size:.74rem;font-weight:800;
  padding:6px 12px;border-radius:var(--r-full);
  background:var(--surface);color:var(--warn-ink)}
.db-demo-x:hover{background:var(--always-dark);color:var(--always-light)}


/* ══════════ 1. LA RANGÉE DES CINQ TUILES ══════════
   UNE seule carte. Padding 0 et débordement caché : la tuile de
   marque doit remplir sa case jusqu'aux angles arrondis — un liseré
   blanc autour de l'aplat orange casserait le bloc. */
.page[data-vue="dashboard"] .db-tuiles{
  padding:0;overflow:hidden;border-radius:var(--r-xl);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.page[data-vue="dashboard"] .db-tuiles:hover{box-shadow:var(--sh-md)}

.db-tuile{appearance:none;background:none;border:0;cursor:pointer;font:inherit;
  text-align:left;min-width:0;display:flex;flex-direction:column;gap:16px;
  padding:36px 21px 38px;transition:background .18s var(--ease)}
.db-tuile + .db-tuile{border-left:1px solid var(--border)}
.db-tuile:hover{background:var(--bg-2)}
.db-tuile:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}

.db-t-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:9px}
/* ⚠️ 13 px ET PAS PLUS, pastille de 32 px ET PAS PLUS : à cinq tuiles
   dans 1 240 px, « Étudiants en maintien » passe sur deux lignes au
   moindre pixel de trop. C'est la hauteur qu'on a augmentée, pas la
   largeur du texte. Le léger resserrement des lettres est ce qui lui
   fait gagner les trois pixels qui manquaient. */
.db-t-l{font-size:13px;font-weight:700;color:var(--ink);line-height:1.25;
  letter-spacing:-.01em;min-width:0}
.db-t-ic{width:32px;height:32px;border-radius:var(--r-full);flex:none;
  display:grid;place-items:center}
.db-t-ic svg{width:15px;height:15px}
.db-t-n{font-size:38px;font-weight:800;letter-spacing:-1.2px;line-height:1;color:var(--ink)}
.db-t-d{font-size:12.5px;font-weight:600;color:var(--ink-soft);line-height:1.3}

/* La tuile de marque : aplat plein, encre brune dans LES DEUX thèmes
   (--always-dark, pas --ink, qui s'inverse et deviendrait illisible
   sur l'orange). */
.db-tuile.est-marque{background:var(--brand)}
.db-tuile.est-marque:hover{background:var(--brand-600)}
.db-tuile.est-marque .db-t-l,
.db-tuile.est-marque .db-t-n,
.db-tuile.est-marque .db-t-d{color:var(--always-dark)}
.db-tuile.est-marque .db-t-ic{background:rgba(255,255,255,.45);color:var(--always-dark)}


/* ══════════ 2. LES TROIS CARTES DE FINANCEMENT ══════════ */
/* La rangée grandit avec l'écran, mais pas sans fin : passé 350 px de
   haut, une carte de financement n'est plus qu'un grand vide entre le
   montant et sa note de pied. Le reste de la place va plus bas. */
.db-fin{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:minmax(0,1fr);gap:18px;flex:1 0 auto;max-height:320px}
.page[data-vue="dashboard"] .db-f{
  padding:16px 18px;border-radius:var(--r-xl);
  display:flex;flex-direction:column;min-width:0}
.page[data-vue="dashboard"] .db-f:hover{box-shadow:var(--sh-md)}

/* ⚠️ LE TITRE ÉTAIT PLUS PÂLE QUE SON PROPRE DÉTAIL : on lisait « fin
   des contrats de l'exercice » avant de savoir qu'on regardait l'Acquis.
   Il passe en gras, pleine encre (direction, 14 sept 2026). */
.db-f-t{font-size:13px;font-weight:800;color:var(--ink);line-height:1.3;
  letter-spacing:.01em}
.db-f-n{font-size:26px;font-weight:800;letter-spacing:-.8px;line-height:1.2;
  color:var(--ink);margin-top:4px}
.db-f-n.est-teinte{color:var(--danger)}
.db-f-b{align-self:flex-start;margin-top:14px;
  font-size:11.5px;font-weight:700;line-height:1.25;
  border-radius:var(--r-full);padding:4px 10px}
/* L'écart avec la pastille est VOULU : collée dessous, la jauge se
   lisait comme un soulignement du pourcentage au lieu d'être la
   deuxième lecture du même chiffre. */
.db-f-j{display:block;height:7px;border-radius:var(--r-full);
  background:var(--bg-2);margin-top:23px;overflow:hidden}
.db-f-j i{display:block;height:100%;border-radius:var(--r-full)}
/* La marge basse fixe le PLANCHER de l'écart avec la note de pied ;
   le margin-top:auto de la note fait le reste et la colle en bas. */
.db-f-d{font-size:11.5px;font-weight:600;color:var(--ink-mute);
  line-height:1.35;margin:11px 0 20px}
.db-f-p{margin-top:auto;padding-top:15px;border-top:1px solid var(--border);
  font-size:11px;font-weight:600;color:var(--ink-soft);line-height:1.35}
.db-f-p{font-size:11.5px}
.db-f-p b{font-weight:800;color:var(--ink);margin-left:6px}

/* Chaque carte porte sa teinte : la pastille et la jauge s'accordent. */
.db-f.t-ok     .db-f-b{background:var(--ok-soft);color:var(--ok-ink)}
.db-f.t-ok     .db-f-j i{background:var(--ok)}
.db-f.t-danger .db-f-b{background:var(--danger-soft);color:var(--danger-ink)}
.db-f.t-danger .db-f-j i{background:var(--danger)}
.db-f.t-brand  .db-f-b{background:var(--brand-50);color:var(--brand-800)}
.db-f.t-brand  .db-f-j i{background:var(--brand)}


/* ══════════ 3. LE CENTRE DOIT S'AMÉLIORER ══════════
   L'en-tête ne porte QUE la pastille et le titre : pas de
   sous-titre, pas de compteur. Le corps est une grille de colonnes
   à égalité, séparées d'un filet — une colonne par mesure, le
   nombre est posé dans le HTML. */
/* Cette carte absorbe la hauteur qui reste — mais PAS SANS FIN. Trois
   demi-cercles n'ont pas besoin de six cents pixels : au-delà de 430,
   la carte n'est plus qu'un grand blanc autour de petites jauges. Sur
   un très grand écran, mieux vaut quelques pixels libres en bas de
   page qu'un bloc démesuré pour ce qu'il montre. */
.db-obj{flex:1 0 auto;max-height:430px;display:flex;flex-direction:column;min-height:0}
.page[data-vue="dashboard"] .db-obj{padding:22px 24px 20px;border-radius:var(--r-xl)}
.page[data-vue="dashboard"] .db-obj:hover{box-shadow:var(--sh-md)}
.db-obj-tete{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex:none}
.db-obj-ic{width:38px;height:38px;border-radius:12px;flex:none;
  display:grid;place-items:center;
  background:var(--danger-soft);color:var(--danger-ink)}
.db-obj-ic svg{width:19px;height:19px}
.db-obj-tete b{font-size:16.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}

.db-obj-corps{display:grid;flex:1;min-height:0}
.db-mes{padding:6px 16px 4px;min-width:0;display:flex;flex-direction:column}
.db-mes + .db-mes{border-left:1px solid var(--border)}
.db-mes-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.db-mes-tete span{font-size:13.5px;font-weight:800;color:var(--ink);
  line-height:1.3;min-width:0}
.db-pill{flex:none;white-space:nowrap;font-size:11px;font-weight:700;
  border-radius:var(--r-full);padding:4px 10px}
.db-pill.ok{background:var(--ok-soft);color:var(--ok-ink)}
.db-pill.ko{background:var(--danger-soft);color:var(--danger-ink)}

/* La demi-jauge. Tout est écrit AU CENTRE — le réel en grand,
   l'objectif dessous : rien ne pend sous l'arc.

   Sa taille suit la HAUTEUR de l'écran, pas une valeur fixe : sur un
   grand écran elle occupe la place gagnée plus haut, sur un portable
   elle redescend à sa taille de maquette. `margin:auto` la centre dans
   ce qui reste de la colonne. */
.db-jauge{display:block;width:100%;height:auto;margin:auto;
  max-width:clamp(195px, 26vh, 330px)}
.db-jn{font-family:var(--font);font-size:27px;font-weight:800;
  letter-spacing:-.02em;fill:var(--ink)}
.db-jo{font-family:var(--font);font-size:10.5px;font-weight:600;fill:var(--ink-mute)}


/* ══════════ TIENT DANS L'ÉCRAN ══════════
   Les trois sections sont taillées pour un 1440×900. Si la fenêtre
   est plus courte, c'est LA PAGE qui défile chez elle (réglé plus
   haut, .page[data-vue="dashboard"]{overflow:auto}) — jamais
   l'application entière. Et ce qui cède en premier, ce sont les
   marges, jamais les chiffres. */
@media (max-height:860px){
  .db{gap:15px}
  .db-tuile{padding:25px 21px 27px;gap:13px}
  .db-t-n{font-size:34px}
  .page[data-vue="dashboard"] .db-f{padding:20px 22px}
  .db-f-n{font-size:29px}
  .db-f-d{margin:9px 0 15px}
  .page[data-vue="dashboard"] .db-obj{padding:18px 22px 16px}
  .db-obj-tete{margin-bottom:11px}
  .db-fin{max-height:300px}
}
@media (max-height:760px){
  .db{gap:13px}
  .db-tuile{padding:18px 20px 20px;gap:10px}
  .db-t-n{font-size:30px}
  .db-f-n{font-size:26px}
  .db-f-b{margin-top:10px}
  .db-f-j{margin-top:16px}
  .db-f-d{margin:8px 0 12px}
  .db-f-p{padding-top:11px}
  .page[data-vue="dashboard"] .db-obj{padding:16px 19px 15px}
  .db-obj-tete{margin-bottom:9px}
  .db-fin{max-height:260px}
}

/* Fenêtre étroite : les cartes passent l'une sous l'autre, et la
   page reprend le droit de défiler normalement. */
@media (max-width:1080px){
  .main:has(> .page[data-vue="dashboard"]){height:auto;overflow:visible}
}
@media (max-width:1000px){
  /* Empilées, les trois cartes ont besoin de toute leur hauteur : le
     plafond de la rangée les couperait. */
  .db-fin{grid-template-columns:1fr;grid-template-rows:none;
    max-height:none;gap:14px}
}
@media (max-width:900px){
  /* La grille des mesures est posée dans le HTML : il faut le poids
     pour la replier. */
  .db-obj-corps{grid-template-columns:1fr!important}
  .db-jauge{max-width:230px}
  .db-mes{padding:12px 0}
  .db-mes + .db-mes{border-left:0;border-top:1px solid var(--border)}
}
@media (max-width:880px){
  .page[data-vue="dashboard"] .db-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-tuile + .db-tuile{border-left:0}
  .db-tuile:nth-child(odd) + .db-tuile{border-left:1px solid var(--border)}
  .db-tuile:nth-child(n+3){border-top:1px solid var(--border)}
}
@media (max-width:520px){
  .page[data-vue="dashboard"] .db-tuiles{grid-template-columns:1fr}
  .db-tuile + .db-tuile{border-left:0;border-top:1px solid var(--border)}
  .db-tuile:nth-child(odd) + .db-tuile{border-left:0}
  .db{gap:14px}
}

/* ── Compteurs de classe, à côté du titre « Étudiants » (7 sept 2026) ──
   Sous contrat · en maintien · total : trois pastilles qui suivent la
   classe choisie dans le ruban. */
.h1-stats{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.et-stats{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.et-stat{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;
  border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.01em;
  background:var(--bg-2);color:var(--ink-soft);white-space:nowrap}
.et-stat i{width:8px;height:8px;border-radius:50%;flex:none}
.et-stat.st-ok{background:var(--ok-soft);color:var(--ok-ink)}
.et-stat.st-ok i{background:var(--ok)}
.et-stat.st-warn{background:var(--warn-soft);color:var(--warn-ink)}
.et-stat.st-warn i{background:var(--warn)}
.et-stat.st-info{background:var(--info-soft);color:var(--info-ink)}
.et-stat.st-info i{background:var(--info)}
.et-stat.st-danger{background:var(--danger-soft);color:var(--danger-ink)}
.et-stat.st-danger i{background:var(--danger)}

/* ── La modale Financement : les deux périodes (7 sept 2026 au soir) ──
   Deux pilules exclusives — financements d'avant / d'après le 1er sept.
   2026. Le plafond du reste à charge (550 / 800 €) suit la pilule. */
.fc-periodes{display:flex;gap:8px;margin-top:14px}
.fc-p{flex:1;display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:10px 12px;border:1.5px solid var(--border);border-radius:12px;
  background:var(--surface);cursor:pointer;font:inherit;color:var(--ink);
  text-align:left}
.fc-p b{font-size:.85rem}
.fc-p small{font-size:.72rem;color:var(--ink-soft)}
.fc-p:hover{border-color:var(--brand-100)}
.fc-p.on{border-color:var(--brand);background:var(--brand-50)}
.fc-p.on small{color:var(--brand-700)}
.fc-p:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:560px){ .fc-periodes{flex-direction:column} }

/* ── La barre des filtres du tableau de bord (exercice / année) ── */
.db-filtres{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.db-seg-g{display:flex;gap:4px;padding:4px;background:var(--bg-2);
  border-radius:999px}
.db-seg{appearance:none;border:0;background:none;font:inherit;cursor:pointer;
  padding:7px 14px;border-radius:999px;font-size:.8rem;font-weight:700;
  color:var(--ink-soft);white-space:nowrap}
.db-seg:hover{color:var(--ink)}
.db-seg.on{background:var(--surface);color:var(--ink);
  box-shadow:0 1px 4px rgba(20,15,8,.14)}
.db-seg:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.db-f-total{margin-left:auto;font-size:.8rem;font-weight:700;
  color:var(--ink-soft);font-variant-numeric:tabular-nums}
@media (max-width:760px){ .db-f-total{margin-left:0;width:100%} }

/* La carte des jauges SANS en-tête (8 sept 2026) : le corps occupe
   toute la hauteur, jauges centrées. */
.db-obj-nu{display:flex}
.db-obj-nu .db-obj-corps{flex:1;align-content:center;margin-top:0;padding-top:0;border-top:0}

/* ── Le bas du tableau de bord : objectifs resserrés + note Google ── */
.db-bas{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:16px;align-items:stretch;min-height:236px}
.db-note{display:flex;flex-direction:column}
.db-note-crayon{margin-left:auto}
/* les informations CENTRÉES : la note, les étoiles, le nombre d'avis ;
   le pied porte le lien à gauche et la date du relevé à droite */
.db-note-corps{display:flex;align-items:center;justify-content:center;gap:16px;
  padding:4px 0;flex:1;flex-wrap:wrap}
.db-note-n{font-size:2.9rem;line-height:1;font-weight:800;
  font-variant-numeric:tabular-nums}
.db-note-droite{display:flex;flex-direction:column;gap:5px}
.db-note-et{position:relative;display:inline-block;font-size:1.45rem;
  line-height:1;letter-spacing:3px;color:var(--border)}
.db-note-et .et-plein{position:absolute;inset:0;width:0;overflow:hidden;
  white-space:nowrap;color:var(--warn)}
.db-note-lien{font-size:.8rem;font-weight:700;color:var(--brand-700);
  display:inline-flex;align-items:center;gap:4px}
.db-note-lien:hover{text-decoration:underline}
.db-note-vide{display:flex;align-items:center;padding-top:8px;flex:1}
.db-note-pied{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.db-note-date{font-size:.75rem;font-weight:600;color:var(--ink-soft)}
.db-note-date b{color:var(--ink)}
@media (max-width:1000px){ .db-bas{grid-template-columns:1fr} }

/* ── Invitation « Financement à renseigner » sur la fiche contrat ── */
.fin-invite{display:flex;align-items:center;gap:14px;padding:14px 18px;
  border:1.5px dashed var(--brand);border-radius:14px;background:var(--brand-soft, var(--bg-2))}
.fin-invite .fi-b{flex:1;min-width:0}
.fin-invite b{display:block;font-size:.92rem}
.fin-invite small{display:block;color:var(--ink-soft);line-height:1.35;margin-top:3px}
.fin-invite .btn{flex:none}
@media (max-width:760px){ .fin-invite{grid-column:span 1 !important;flex-wrap:wrap} }


/* Quatre cartes de financement : sous 1200 px, deux par deux. */
@media (max-width:1200px){
  .db-fin{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}
}

/* ═══════════════════════════════════════════════════════════════════
   LA MÊME PORTE QUE L'APPLICATION ÉTUDIANTE (8 septembre 2026).
   Accueil animé (lion sur encre), puis carte de connexion centrée sur
   le fond à motifs. Les classes .auth/.auth-side de l'ancien écran en
   deux panneaux restent au-dessus, éteintes : plus personne ne les
   rend. Seuls les mots changent d'une application à l'autre.
   ═══════════════════════════════════════════════════════════════════ */
.auth2{min-height:100vh;display:flex;align-items:stretch;
  background:var(--bg) url("data:image/svg+xml,%3Csvg width='56' height='97' viewBox='0 0 56 97' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 0L56 16.17v32.33L28 64.67 0 48.5V16.17L28 0zm0 64.67L56 80.83V97H0V80.83L28 64.67z' fill='%23291D13' fill-opacity='.016'/%3E%3C/svg%3E")}
.a2-form{flex:1;display:flex;flex-direction:column;padding:24px 16px}
.a2-card{width:min(410px,100%);margin:auto}
.a2-card .h1{margin-bottom:6px}
.a2-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-700);margin-bottom:14px}
.a2-intro{color:var(--ink-soft);font-size:.9rem;margin-bottom:28px}
.a2-label-ligne{display:flex;justify-content:space-between;align-items:baseline}
.a2-oubli{color:var(--orange-700);cursor:pointer;font-size:.76rem}
.a2-oubli:hover{text-decoration:underline}
.a2-rester{margin-bottom:20px}
.a2-foot{text-align:center;font-size:.84rem;color:var(--ink-soft);margin-top:24px}
/* L'identifiant écrit en grand sur la page du lien personnel (8 oct. 2026). */
.a2-identifiant{font:600 1.05rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);background:var(--surface-2,#F7F6F5);border:1px solid var(--border);border-radius:10px;padding:12px 14px;word-break:break-all}
.a2-aide{margin-top:14px;font-size:.82rem;color:var(--ink-soft)}
.a2-aide summary{cursor:pointer;text-align:center;color:var(--ink-mute);font-weight:600;
  list-style:none}
.a2-aide summary::-webkit-details-marker{display:none}
.a2-aide summary:hover{color:var(--ink)}
.a2-aide>div{margin-top:10px;padding:12px 14px;border:1px solid var(--border-2);
  border-radius:12px;line-height:1.65;background:var(--bg-2)}
.a2-card .page-enter,.page-enter{animation:pageIn .35s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── L'accueil animé ── */
.splash{position:fixed;inset:0;background:var(--always-dark);z-index:900;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
  transition:opacity .45s var(--ease)}
.splash.out{opacity:0;pointer-events:none}
.splash .sp-lion{width:min(272px,68vw);animation:spLion .9s var(--spring)}
.splash .sp-lion img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 10px 34px rgba(245,157,0,.32));
  animation:spRespire 3.2s var(--ease) infinite}
.splash .sp-nom{color:rgba(255,255,255,.85);font-size:.78rem;font-weight:800;
  letter-spacing:.42em;text-indent:.42em;margin-top:2px;
  animation:fadeUp .6s .25s var(--ease) backwards}
.splash small{color:rgba(255,255,255,.5);font-size:.8rem;animation:fadeUp .6s .4s var(--ease) backwards}
.splash .sp-bar{width:172px;height:3px;background:rgba(255,255,255,.12);border-radius:99px;
  overflow:hidden;margin-top:12px;animation:fadeUp .6s .5s var(--ease) backwards}
.splash .sp-bar i{display:block;height:100%;width:44%;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--orange) 30%,#FFC24D 60%,transparent);
  animation:spLoad 1.3s cubic-bezier(.45,0,.35,1) infinite}
@keyframes spLion{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes spRespire{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes spLoad{from{transform:translateX(-180%)}to{transform:translateX(420%)}}
@media (prefers-reduced-motion:reduce){
  .splash .sp-lion,.splash .sp-lion img,.splash .sp-nom,.splash small,.splash .sp-bar,
  .splash .sp-bar i,.page-enter{animation:none}
}

/* La ville au-dessus du carrousel des classes (vue réseau) : le miroir
   de la légende d'année du dessous, chevron retourné vers la carte. */
.cl-vue-haut{margin:0 0 10px;flex-direction:column-reverse}
.cl-vue-haut .cl-vue-fleche{transform:rotate(180deg)}
.cl-vue-ville{font-weight:800}

/* ── Le rail du super admin : trois groupes, deux traits ── */
.rnav-sep{height:1px;background:var(--border-2);margin:4px 10px;opacity:.6;flex:none;align-self:stretch}
/* Le rail du super admin porte quinze entrées : on resserre la colonne
   pour que les groupes se lisent sans trous. */
.rail nav{gap:2px}
.rail .rnav{width:42px;height:42px;border-radius:12px}

/* ── La barre de sélections des pages direction : tout se choisit,
   aligné à gauche — la mission, la ville, la classe, le statut… ── */
.sel-barre{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.sel-barre .select{width:auto;max-width:280px}

/* ── Réalisations : la liste dense, une pastille de couleur par
   mission — ville, classe, une ligne par réalisation. ── */
.rea-l{display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--border-2);border-radius:10px;padding:8px 12px;
  margin-bottom:6px;cursor:pointer}
.rea-l:hover{border-color:var(--brand)}
.rea-ic{flex:none;width:28px;height:28px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;
  background:var(--brand-50);color:var(--brand-800)}
.rea-ic svg{width:14px;height:14px}
.rea-ic.t-mentorat{background:var(--brand-50);color:var(--brand-800)}
.rea-ic.t-visite{background:var(--info-soft);color:var(--info-ink)}
.rea-ic.t-conseil{background:var(--warn-soft);color:var(--warn-ink)}
.rea-ic.t-reunion{background:var(--ok-soft);color:var(--ok-ink)}
.rea-ic.t-bts{background:var(--danger-soft);color:var(--danger-ink)}
.rea-ic.t-verif{background:var(--ok-soft);color:var(--ok-ink)}
.rea-ic.t-fiches{background:var(--warn-soft);color:var(--warn-ink)}
.rea-ic.t-envoi{background:var(--info-soft);color:var(--info-ink)}
.rea-ic.t-enquete{background:var(--brand-50);color:var(--brand-800)}
.rea-qui{flex:0 0 200px;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:.9rem}

/* ── La vue « Toutes les missions » : une carte par classe, le liseré
   aux couleurs du BTS — la classe d'abord, puis chaque étudiant avec
   SES étapes en chips cliquables. ── */
.rea-cl{background:var(--surface);border:1px solid var(--border-2);
  border-left:4px solid var(--f,var(--border-2));border-radius:12px;
  padding:12px 14px;margin-bottom:10px}
.rea-cl-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rea-cl-h small{color:var(--ink-mute)}
.rea-r{display:flex;align-items:flex-start;gap:12px;padding:6px 0;
  border-top:1px solid var(--border-2)}
.rea-r:first-of-type{border-top:none}
.rea-r-qui{flex:0 0 180px;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:.88rem;padding-top:4px}
.rea-r-chips{flex:1;min-width:0;display:flex;gap:6px;flex-wrap:wrap}
.rch{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-2);
  background:var(--bg-2);border-radius:99px;padding:4px 10px 4px 7px;cursor:pointer;
  font-size:.78rem;font-weight:700;color:var(--ink);font-family:inherit}
.rch:hover{border-color:var(--brand)}
.rch svg{width:13px;height:13px;flex:none}
.rch em{font-style:normal;font-weight:600;color:var(--ink-mute);
  font-variant-numeric:tabular-nums}
.rch.t-mentorat{background:var(--brand-50);color:var(--brand-800);border-color:transparent}
.rch.t-visite{background:var(--info-soft);color:var(--info-ink);border-color:transparent}
.rch.t-conseil{background:var(--warn-soft);color:var(--warn-ink);border-color:transparent}
.rch.t-reunion{background:var(--ok-soft);color:var(--ok-ink);border-color:transparent}
.rch.t-bts{background:var(--danger-soft);color:var(--danger-ink);border-color:transparent}
.rch.t-verif{background:var(--ok-soft);color:var(--ok-ink);border-color:transparent}
.rch.t-fiches{background:var(--warn-soft);color:var(--warn-ink);border-color:transparent}
.rch.t-envoi{background:var(--info-soft);color:var(--info-ink);border-color:transparent}
.rch.t-enquete{background:var(--brand-50);color:var(--brand-800);border-color:transparent}
.rch.t-mentorat em,.rch.t-enquete em{color:var(--brand-800);opacity:.75}
.rch.t-visite em,.rch.t-envoi em{color:var(--info-ink);opacity:.75}
.rch.t-conseil em,.rch.t-fiches em{color:var(--warn-ink);opacity:.75}
.rch.t-reunion em,.rch.t-verif em{color:var(--ok-ink);opacity:.75}
.rch.t-bts em{color:var(--danger-ink);opacity:.75}
.rch:hover{filter:brightness(.97)}
@media (max-width:720px){
  .rea-r{flex-direction:column;gap:4px}
  .rea-r-qui{flex-basis:auto;padding-top:0}
}

/* ── LA FRISE DES RÉALISATIONS (présentation retenue) : HORIZONTALE.
   Des mini-blocs qui défilent de gauche à droite dans l'ordre du
   temps — la date en haut, le CONTOUR GAUCHE à la couleur de la
   mission, la classe en pilule de son BTS. ── */
/* L'enveloppe de la frise : les deux flèches, et LE FIL — une ligne
   continue derrière les blocs, visible entre eux : des perles sur un
   fil, pas des blocs posés l'un après l'autre. */
.rea-fh{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:16px}
.rea-fh:before{content:'';position:absolute;left:44px;right:44px;top:50%;height:2px;
  background:var(--border-2);border-radius:2px}
.rea-fl{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--border-2);
  background:var(--surface);cursor:pointer;display:flex;align-items:center;
  justify-content:center;color:var(--ink-soft);position:relative;z-index:1}
.rea-fl:hover{border-color:var(--brand);color:var(--brand-800)}
.rea-fl svg{width:15px;height:15px}
.rea-fl.g svg{transform:rotate(180deg)}
.rea-piste{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 10px;
  scroll-snap-type:x proximity;flex:1;min-width:0;position:relative}
.rea-piste::-webkit-scrollbar{height:8px}
.rea-piste::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px}
.rea-mb{flex:0 0 200px;scroll-snap-align:start;display:flex;flex-direction:column;
  gap:5px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--border-2);border-left:5px solid var(--border-2);
  border-radius:12px;padding:10px 12px;cursor:pointer}
.rea-mb:hover{border-color:var(--brand);border-left-width:5px}
.rea-mb.t-mentorat{border-left-color:var(--brand)}
.rea-mb.t-visite{border-left-color:var(--info)}
.rea-mb.t-conseil{border-left-color:var(--warn)}
.rea-mb.t-reunion{border-left-color:var(--ok)}
.rea-mb.t-bts{border-left-color:var(--danger)}
.rea-mb.t-pole{border-left-color:var(--fa-orange)}
.rea-mb.t-verif{border-left-color:var(--ok)}
.rea-mb.t-fiches{border-left-color:var(--warn)}
.rea-mb.t-envoi{border-left-color:var(--info)}
.rea-mb.t-enquete{border-left-color:var(--brand)}
.rea-mb-date{font-size:.74rem;font-weight:800;color:var(--ink-mute);
  font-variant-numeric:tabular-nums}
.rea-mb b{font-size:.84rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;min-height:2.2em}
.rea-mb small{color:var(--ink-soft);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rea-mb .rea-mb-par{color:var(--ink-mute);font-size:.72rem;margin-top:-2px}
.rea-mb .bts-pill{font-size:.66rem;padding:2px 8px;margin-top:1px}
.rea-etape{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--ink-soft)}
.rea-fin{display:flex;align-items:baseline;gap:10px;flex:none;
  font-variant-numeric:tabular-nums}
.rea-fin small{color:var(--ink-mute)}
.rea-fin b{font-size:.86rem}
@media (max-width:720px){
  .rea-qui{flex-basis:auto;flex-grow:1}
  .rea-etape{display:none}
}

/* ── Suivi & financements : UNE CARTE PAR ÉTUDIANT — le bord gauche
   à la couleur de son statut, l'entreprise, le financement, et les
   deux gestes : voir la frise, renseigner l'échéancier. ── */
.sue2-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:10px;margin-bottom:16px}
.sue2{display:flex;flex-direction:column;gap:6px;background:var(--surface);
  border:1px solid var(--border-2);border-left:5px solid var(--border-2);
  border-radius:12px;padding:11px 13px}
.sue2.st-encours{border-left-color:var(--ok)}
.sue2.st-maintien{border-left-color:var(--danger)}
.sue2.st-recherche{border-left-color:var(--info)}
.sue2.st-abandon{border-left-color:var(--ink-mute)}
.sue2.st-termine{border-left-color:var(--ink-mute)}

/* Le séparateur de classe : la pilule EN GRAND, au milieu, un trait
   de part et d'autre — on ne la cherche plus. */
.cls-sep{display:flex;align-items:center;justify-content:center;gap:12px;
  margin:20px 0 12px}
.cls-sep:before,.cls-sep:after{content:'';flex:1;height:1px;background:var(--border-2)}
.cls-sep .bts-pill{font-size:.84rem;padding:5px 16px;letter-spacing:.05em}
.cls-sep small{color:var(--ink-mute);white-space:nowrap}

/* ── Activité des équipes : le LEADERBOARD — une rangée par membre,
   le grand rang, l'avatar, la pilule de fraîcheur et la barre des
   connexions. Rien à voir avec le tableau des Indicateurs. ── */
.lb{display:flex;align-items:center;gap:14px;background:var(--surface);
  border:1px solid var(--border-2);border-radius:14px;padding:12px 16px;
  margin-bottom:8px}
.lb-rang{flex:none;width:34px;height:34px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:.95rem;
  background:var(--bg-2);color:var(--ink-mute);font-variant-numeric:tabular-nums}
.lb-p1{background:var(--brand);color:#fff}
.lb-p2{background:var(--ink-soft);color:#fff}
.lb-p3{background:var(--warn);color:#fff}
.lb-ava{flex:none}
.lb-qui{flex:0 0 220px;min-width:0;display:flex;flex-direction:column;gap:1px}
.lb-qui b{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-qui small{color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.lb-quand{flex:0 0 112px;text-align:center;font-size:.74rem;font-weight:800;
  padding:4px 8px;border-radius:99px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.lb-vert{background:var(--ok-soft);color:var(--ok-ink)}
.lb-orange{background:var(--warn-soft);color:var(--warn-ink)}
.lb-rouge{background:var(--danger-soft);color:var(--danger-ink)}
.lb-barre{flex:0 0 190px;display:flex;flex-direction:column;gap:4px}
.lb-barre small{color:var(--ink-mute);font-size:.64rem;text-transform:uppercase;
  letter-spacing:.05em}
.lb-piste{display:block;height:8px;border-radius:99px;background:var(--bg-2);
  overflow:hidden}
.lb-piste i{display:block;height:100%;border-radius:99px;background:var(--brand)}
.lb-cx{flex:none;font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;
  min-width:34px;text-align:right}
.lb-extra{flex:0 0 96px;display:flex;flex-direction:column;align-items:center;gap:1px}
.lb-extra b{font-size:.88rem;font-variant-numeric:tabular-nums;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lb-extra small{color:var(--ink-mute);font-size:.6rem;text-transform:uppercase;
  letter-spacing:.04em;white-space:nowrap}
.lb-extra-page{flex:1 1 130px;min-width:110px}

/* ── Comptes des équipes : une GRILLE de cartes (trombinoscope) —
   volontairement différente des lignes de classement de l'Activité.
   Tête (avatar, nom, « Direction » si c'en est une, « Désactivé » si
   fermé), identifiant en dessous, les deux gestes au pied. ── */
.cpt-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  gap:10px;margin-bottom:18px}
.cpt-carte{display:flex;flex-direction:column;gap:9px;background:var(--surface);
  border:1px solid var(--border-2);border-radius:14px;padding:13px 14px}
.cpt-off{opacity:.6}
.cpt-tete{display:flex;align-items:center;gap:10px;min-width:0}
.cpt-ava{width:34px;height:34px;font-size:.78rem;flex:none}
.cpt-tete-txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.cpt-tete-txt b{font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpt-dir{font-size:.68rem;font-weight:800;color:var(--brand-700);
  text-transform:uppercase;letter-spacing:.05em}
.cpt-tete .badge{margin-left:auto;flex:none}
.cpt-id{display:block;font-size:.72rem;color:var(--ink-soft);background:var(--bg-2);
  border-radius:8px;padding:5px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpt-pied{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:10px;
  border-top:1px dashed var(--border-2)}
.cpt-pied .btn{flex:1 1 auto;justify-content:center;white-space:nowrap;
  padding:6px 10px;font-size:.76rem}

/* ── La boîte des réclamations (vue France) : la liste des fils à
   gauche, la discussion à droite, la réponse au pied. ── */
.rcl-coque{display:grid;grid-template-columns:340px minmax(0,1fr);gap:14px;
  height:calc(100vh - 268px);min-height:440px}
.rcl-gauche,.rcl-droite{display:flex;flex-direction:column;min-height:0;
  background:var(--surface);border:1px solid var(--border-2);border-radius:16px;
  overflow:hidden}
.rcl-outils{padding:10px;border-bottom:1px solid var(--border-2)}
.rcl-outils .select{width:100%}
.rcl-liste{flex:1;min-height:0;overflow-y:auto;padding:8px;display:flex;
  flex-direction:column;gap:6px}
.rcl-item{border:1px solid var(--border-2);border-radius:12px;padding:10px 12px;
  cursor:pointer;background:var(--surface)}
.rcl-item:hover{border-color:var(--brand)}
.rcl-item.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.rcl-item.neuf{background:var(--brand-50)}
.rcl-i-haut{display:flex;align-items:center;gap:6px}
.rcl-i-quand{margin-left:auto;font-size:.7rem;color:var(--ink-mute);white-space:nowrap}
.rcl-i-objet{font-weight:700;font-size:.86rem;margin-top:7px;display:flex;
  align-items:center;gap:7px}
.rcl-i-objet i{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
.rcl-i-qui{font-size:.74rem;color:var(--ink-soft);margin-top:2px}
.rcl-i-extrait{font-size:.75rem;color:var(--ink-mute);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcl-f-tete{display:flex;align-items:center;gap:12px;padding:13px 16px;
  border-bottom:1px solid var(--border-2)}
.rcl-f-titres{min-width:0}
.rcl-f-titres b{font-size:.95rem;display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rcl-f-titres small{display:block;color:var(--ink-soft);margin-top:2px;font-size:.74rem}
.rcl-f-tete .btn{margin-left:auto;flex:none}
.rcl-f-corps{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;
  flex-direction:column;gap:8px;background:var(--bg-2)}
.rcl-jour{align-self:center;font-size:.68rem;color:var(--ink-mute);
  background:var(--surface);border:1px solid var(--border-2);border-radius:999px;
  padding:2px 11px;margin:5px 0 3px}
.rcl-bulle{max-width:72%;border-radius:14px;padding:9px 12px;font-size:.84rem;
  line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.rcl-b-eux{align-self:flex-start;background:var(--surface);
  border:1px solid var(--border-2);border-bottom-left-radius:4px}
.rcl-b-dir{align-self:flex-end;background:var(--brand-100);border-bottom-right-radius:4px}
.rcl-b-nom{font-size:.66rem;font-weight:800;color:var(--ink-soft);margin-bottom:3px;
  text-transform:uppercase;letter-spacing:.03em}
.rcl-b-quand{font-size:.64rem;color:var(--ink-mute);margin-top:4px;text-align:right}
.rcl-f-pied{display:flex;gap:8px;padding:10px;border-top:1px solid var(--border-2);
  align-items:flex-end}
.rcl-f-pied textarea{flex:1;resize:none;min-height:44px;max-height:120px}
.rcl-vide{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}
@media (max-width:960px){
  .rcl-coque{grid-template-columns:1fr;height:auto}
  .rcl-gauche{max-height:380px}
  .rcl-droite{min-height:440px}
}

/* ── Les process : une bande par pôle, des fiches qui se déplient. ── */
.prc{background:var(--surface);border:1px solid var(--border-2);border-radius:14px;
  margin-bottom:8px;overflow:hidden}
.prc-tete{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;padding:13px 15px;font:inherit;color:inherit}
.prc-tete:hover{background:var(--bg-2)}
.prc-puce{flex:none;color:var(--ink-mute);display:flex}
.prc-puce svg{width:15px;height:15px}
.prc-titres{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.prc-titres b{font-size:.92rem}
.prc-titres small{color:var(--ink-soft);font-size:.78rem}
.prc-nb{flex:none}
.prc-corps{padding:2px 18px 13px 44px}
.prc-etapes{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:7px}
.prc-etapes li{font-size:.86rem;line-height:1.5;padding-left:4px}
.prc-etapes li::marker{font-weight:800;color:var(--brand-700)}
.prc-pied{display:flex;align-items:center;gap:10px;margin-top:13px;padding-top:10px;
  border-top:1px dashed var(--border-2)}
.prc-gestes{margin-left:auto;display:flex;gap:6px}

/* ── Les demandes des étudiants : une carte par demande, son petit
   chemin (envoyé → validé → transféré) et les gestes de la France. ── */
.dm{background:var(--surface);border:1px solid var(--border-2);border-radius:14px;
  padding:14px 16px;margin-bottom:10px}
.dm.st-envoyee{border-left:4px solid var(--warn)}
.dm.st-validee{border-left:4px solid var(--info)}
.dm.st-remboursee{border-left:4px solid var(--ok)}
.dm.st-refusee{border-left:4px solid var(--border-2);opacity:.85}
.dm-haut{display:flex;align-items:center;gap:11px}
.dm-type{flex:none;width:34px;height:34px;border-radius:10px;background:var(--brand-50);
  color:var(--brand-700);display:flex;align-items:center;justify-content:center}
.dm-type svg{width:17px;height:17px}
.dm-titres{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.dm-titres b{font-size:.92rem}
.dm-titres small{color:var(--ink-soft);font-size:.76rem}
.dm-haut .badge{flex:none}
.dm-mot{font-size:.82rem;color:var(--ink-soft);font-style:italic;margin:9px 0 0 45px}
.dm-pieces{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 0 45px}
.dm-piece{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-2);
  background:var(--bg-2);border-radius:999px;padding:4px 11px;font:inherit;
  font-size:.76rem;cursor:pointer;color:var(--ink)}
.dm-piece:hover{border-color:var(--brand);color:var(--brand-700)}
.dm-piece svg{width:12px;height:12px}
.dm-note{display:flex;gap:7px;align-items:flex-start;font-size:.8rem;margin:10px 0 0 45px;
  background:var(--bg-2);border-radius:10px;padding:8px 11px;color:var(--ink-soft)}
.dm-note svg{width:13px;height:13px;flex:none;margin-top:2px}
.dm-bas{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 0 45px;
  padding-top:10px;border-top:1px dashed var(--border-2)}
.dm-chemin{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dm-jalon{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;
  color:var(--ink-mute);white-space:nowrap}
.dm-jalon i{width:9px;height:9px;border-radius:50%;background:var(--border-2);flex:none}
.dm-jalon.fait{color:var(--ink-soft)}
.dm-jalon.fait i{background:var(--ok)}
.dm-jalon.ici{color:var(--ink);font-weight:700}
.dm-jalon.ici i{background:var(--brand);box-shadow:0 0 0 3px var(--brand-100)}
.dm-lien{width:16px;height:1px;background:var(--border-2);flex:none}
.dm-refuse{color:var(--ink-mute);font-size:.76rem;display:inline-flex;gap:5px;align-items:center}
.dm-refuse svg{width:13px;height:13px}
.dm-gestes{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:760px){
  .dm-mot,.dm-pieces,.dm-note,.dm-bas{margin-left:0}
  .dm-gestes{margin-left:0;width:100%}
}
.dm-cliquable{cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.dm-cliquable:hover{border-color:var(--brand);box-shadow:0 6px 16px rgba(41,29,19,.06)}
.dm-rech{margin-left:auto;width:130px}
.dm-coms-n{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;
  font-weight:700;color:var(--ink-soft)}
.dm-coms-n svg{width:13px;height:13px}
.dm-coms{margin:8px 0 0 45px;display:flex;flex-direction:column;gap:6px}
.dm-com{margin:0;font-size:.8rem;background:var(--bg-2);border-radius:10px;
  padding:7px 11px;line-height:1.45}
.dm-com small{color:var(--ink-mute)}

/* ── Le dossier d'une demande (fenêtre de vérification). ── */
.dos-nav{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.dos-qui{flex:1;margin:0;min-width:0;text-align:center}
.dos-fleche{flex:none;padding:6px 9px}
.dos-fleche svg{width:15px;height:15px}
.dos-fleche[disabled]{opacity:.35;cursor:default}
.dos-sec{display:flex;align-items:center;gap:10px;margin:14px 0 8px;
  padding-top:12px;border-top:1px dashed var(--border-2)}
.dos-sec b{font-size:.88rem}
.dos-sec .btn{margin-left:auto}
.dos-sec .tiny{margin-left:auto}
.dos-pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.dos-piece{display:flex;flex-direction:column;gap:6px;border:1px solid var(--border-2);
  border-radius:12px;padding:9px;background:var(--surface)}
.dos-apercu{height:120px;border-radius:9px;background:var(--bg-2);cursor:zoom-in;
  display:flex;align-items:center;justify-content:center;color:var(--ink-mute);
  overflow:hidden}
.dos-apercu svg{width:26px;height:26px}
.dos-apercu img{width:100%;height:100%;object-fit:cover}
.dos-p-nom{font-size:.74rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.dos-p-actions{display:flex;gap:5px}
.dos-p-actions .btn{flex:1;justify-content:center;padding:5px 8px;font-size:.72rem}
.dos-ajout{display:flex;gap:8px;align-items:stretch;margin-top:9px}
.dos-ajout textarea{flex:1;resize:none}
.dos-ajout .btn{align-self:stretch;display:flex;align-items:center}
/* Les quatre gestes du pied se partagent TOUTE la largeur, à parts
   égales — pas de vide autour. */
.dos-pied{display:flex;gap:8px;width:100%}
.dos-pied .btn{flex:1 1 0;justify-content:center;white-space:nowrap;
  padding:11px 8px;font-size:.84rem}
@media (max-width:700px){.dos-pied{flex-wrap:wrap}.dos-pied .btn{flex:1 1 45%}}

/* Le « +1 » d'une demande en cours, à côté du nom de l'étudiant. */
.et-dem{flex:none;margin-left:8px;font-size:.66rem;font-weight:800;color:#fff;
  background:var(--brand);border-radius:999px;padding:2px 7px;letter-spacing:.02em}

/* ── Les segments : le tri principal en gros boutons, avec les
   comptes — utilisé par la Boîte mail et par les Demandes. ── */
.seg-barre{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px}
/* La barre d'outils des Demandes : le statut à gauche, les filtres
   fins à droite — UNE ligne qui respire, pas deux rangées décalées. */
.dm-outils{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:14px}
.dm-outils .select{flex:0 1 auto;width:auto;min-width:110px;max-width:190px}
.dm-outils .dm-rech{margin-left:auto;width:280px;flex:none}
@media (max-width:1100px){.dm-outils .dm-rech{width:200px}}
.seg{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--border-2);
  background:var(--surface);border-radius:999px;padding:6px 12px;font:inherit;
  font-size:.78rem;font-weight:600;color:var(--ink-soft);cursor:pointer;
  white-space:nowrap;transition:all .15s ease}
.seg b{font-size:.7rem;background:var(--bg-2);border-radius:999px;padding:1px 6px;
  color:var(--ink-mute)}
.seg:hover{border-color:var(--brand);color:var(--ink)}
.seg.on{background:var(--ink);border-color:var(--ink);color:#fff}
.seg.on b{background:rgba(255,255,255,.18);color:#fff}

/* ── Process, écran d'accueil : la question en grand, puis les pôles. ── */
.prc-question{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1.5px solid var(--border-2);border-radius:999px;padding:8px 16px;
  margin-bottom:16px;transition:border-color .15s ease}
.prc-question:focus-within{border-color:var(--brand)}
.prc-question svg{width:17px;height:17px;color:var(--ink-mute);flex:none}
.prc-question input{flex:1;border:0;background:none;font:inherit;font-size:.9rem;
  color:var(--ink);outline:none;min-width:0}
.prc-question.grande{padding:13px 20px;border-radius:18px;
  box-shadow:0 6px 18px rgba(41,29,19,.05)}
.prc-question.grande input{font-size:1rem}
.prc-q-effacer{border:0;background:var(--bg-2);border-radius:50%;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
  color:var(--ink-soft)}
.prc-q-effacer svg{width:13px;height:13px}
.pol-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.pol{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;
  background:var(--surface);border:1px solid var(--border-2);border-radius:16px;
  padding:18px;font:inherit;color:inherit;cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.pol:hover{border-color:var(--brand);transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(41,29,19,.07)}
.pol-ic{width:40px;height:40px;border-radius:12px;background:var(--brand-50);
  color:var(--brand-700);display:flex;align-items:center;justify-content:center}
.pol-ic svg{width:19px;height:19px}
.pol b{font-size:1rem}
.pol small{color:var(--ink-soft);font-size:.76rem}
.pol-apercu{font-size:.74rem;color:var(--ink-mute);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prc-pole-tete{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.prc-pole-tete b{font-size:1.05rem}
.pol-ic-p{width:34px;height:34px;border-radius:10px}
.pol-ic-p svg{width:16px;height:16px}
.lb-total{flex:none;display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-width:76px;padding:7px 12px;border-radius:12px;
  background:var(--brand-50)}
.lb-total b{font-size:1.05rem;color:var(--brand-800);font-variant-numeric:tabular-nums}
.lb-total small{color:var(--brand-800);opacity:.8;font-size:.6rem;
  text-transform:uppercase;letter-spacing:.04em;text-align:center;line-height:1.35}
.lb-total-retard{background:var(--warn-soft)}
.lb-total-retard b, .lb-total-retard small{color:var(--warn-ink)}
@media (max-width:900px){
  .lb{flex-wrap:wrap}
  .lb-barre{flex-basis:100%;order:5}
}

/* La tête de fiche en mode suivi : « Retour » à gauche, « Étudiant
   suivant » à droite — le bouton grisé signale la fin de la liste. */
.fiche-tete .btn[disabled]{opacity:.45;pointer-events:none}

/* Le bandeau « qui » de la fenêtre de financement : le nom et la
   classe de l'étudiant, avant les montants. */
.fc-qui{display:flex;align-items:center;gap:10px;
  background:var(--bg-2);border-radius:10px;padding:7px 9px;margin-bottom:12px}
.fc-qui-nom{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap}
.fc-qui b{font-size:.95rem}
.fc-nav{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--border-2);
  background:var(--surface);cursor:pointer;display:flex;align-items:center;
  justify-content:center;color:var(--ink-soft)}
.fc-nav:hover{border-color:var(--brand);color:var(--brand-800)}
.fc-nav svg{width:14px;height:14px}
.fc-nav[disabled]{opacity:.35;pointer-events:none}
.sue2-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sue2-h b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.9rem}
.sue2-h .badge{flex:none}
.sue2-ent{color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sue2-fin{font-size:.78rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.sue2-fin.sue2-ok{color:var(--ok-ink)}
.sue2-fin.sue2-warn{color:var(--warn-ink)}
.sue2-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.sue2-actions .btn{flex:1;justify-content:center;white-space:nowrap}
.sue2-actions .btn svg{width:13px;height:13px}

/* ── Indicateurs : une carte par objectif, puis le classement ── */
.ind2-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
/* Le détail d'un centre : QUATRE colonnes pleines — huit cartes, deux
   rangées, aucun trou (demande direction, 9 sept 2026). */
.ind2-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.ind2-g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* En grille 4 × 2, les cartes se resserrent : la vue d'un centre tient
   à l'écran sans défiler. */
.ind2-g4 .ind2{padding:11px 13px;gap:3px}
.ind2-g4 .ind2-lab{font-size:.74rem;line-height:1.25}
.ind2-g4 .ind2-val{font-size:1.28rem}
.ind2-g4 .ind2-cible{font-size:.72rem}
.ind2-g4 .ind2-jauge{margin-top:4px}
.ind2-g4 .ind2-etat{margin-top:4px;font-size:.64rem;padding:2px 7px}
/* Sans objectif chiffré : rien d'écrit, et le contenu se répartit au
   centre de la carte au lieu de se coller en haut. */
.ind2-libre{justify-content:center;gap:8px}
.ind2-libre .ind2-lab{text-align:center}
.ind2-libre .ind2-val{text-align:center}
.ind2{background:var(--surface);border:1px solid var(--border-2);border-left:4px solid var(--border-2);
  border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.ind2-tenu{border-left-color:var(--ok)}
.ind2-surveiller{border-left-color:var(--warn)}
.ind2-critique{border-left-color:var(--danger)}
.ind2-lab{color:var(--ink-soft);font-size:.8rem;line-height:1.3}
.ind2-val{font-size:1.55rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ind2-cible{color:var(--ink-mute);font-size:.76rem}
.ind2-jauge{height:5px;border-radius:99px;background:var(--bg-2);overflow:hidden;margin-top:6px}
.ind2-jauge i{display:block;height:100%;border-radius:99px;background:var(--brand)}
.ind2-tenu .ind2-jauge i{background:var(--ok)}
.ind2-critique .ind2-jauge i{background:var(--danger)}
.ind2-etat{align-self:flex-start;margin-top:6px;font-size:.68rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:99px;
  background:var(--bg-2);color:var(--ink-soft)}
.ind2-tenu .ind2-etat{background:var(--ok-soft);color:var(--ok)}
.ind2-surveiller .ind2-etat{background:var(--warn-soft);color:var(--warn)}
.ind2-critique .ind2-etat{background:var(--danger-soft);color:var(--danger-ink)}
.ind2-rang{display:flex;align-items:center;gap:12px;padding:10px 4px;cursor:pointer;
  border-top:1px solid var(--border-2)}
.ind2-rang:first-of-type{border-top:none}
.ind2-rang:hover .ind2-rang-nom b{color:var(--brand-800)}
.ind2-rang-n{flex:0 0 26px;text-align:center;font-weight:800;color:var(--ink-mute);
  font-variant-numeric:tabular-nums}
.ind2-rang-nom{flex:0 0 150px;display:flex;flex-direction:column}
.ind2-rang-nom small{color:var(--ink-mute)}
.ind2-rang-pastilles{flex:none;display:flex;gap:8px;flex-wrap:wrap;font-size:.76rem;font-weight:700}
.ind2-rang-pastilles em{font-style:normal;padding:2px 8px;border-radius:99px}
.ind2-rang-pastilles .ok{background:var(--ok-soft);color:var(--ok)}
.ind2-rang-pastilles .warn{background:var(--warn-soft);color:var(--warn)}
.ind2-rang-pastilles .crit{background:var(--danger-soft);color:var(--danger-ink)}
.ind2-rang-jauge{flex:0 0 110px;height:6px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.ind2-rang-jauge i{display:block;height:100%;background:var(--ok);border-radius:99px}

/* ── Le cockpit : la synthèse en tuiles, puis le damier des centres —
   une case par objectif, la couleur dit tout. ── */
.ind3-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-bottom:14px}
.ind3-tuile{background:var(--surface);border:1px solid var(--border-2);border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.ind3-tuile b{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.ind3-tuile small{color:var(--ink-soft);font-weight:600}
.ind3-tuile .ind3-sur{font-size:1rem;color:var(--ink-mute);font-weight:700}
.ind3-tenu{background:var(--ok-soft);border-color:transparent}
.ind3-tenu b{color:var(--ok-ink)}
.ind3-surveiller{background:var(--warn-soft);border-color:transparent}
.ind3-surveiller b{color:var(--warn-ink)}
.ind3-critique{background:var(--danger-soft);border-color:transparent}
.ind3-critique b{color:var(--danger-ink)}
.ind3-ok{background:var(--ok-soft);border-color:transparent}
.ind3-ok b{color:var(--ok-ink)}
.ind3-info{background:var(--info-soft);border-color:transparent}
.ind3-info b{color:var(--info-ink)}
.ind3-hero6 .ind3-tuile b{font-size:1.55rem}
.ind3-classement{margin-top:18px}
.ind-sec{margin:26px 0 12px;font-size:.78rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-mute)}
.ind-sec:first-child{margin-top:0}

/* Le comparatif des centres : un tableau qui donne ENVIE — lignes
   hautes et aérées, la colonne Centre qui reste sous les yeux quand on
   défile, une mini-jauge sous chaque pourcentage, la ligne France en
   repère teinté. */
/* La page Indicateurs s'étale sur toute la largeur de l'écran : le
   comparatif tient sans défiler (demande direction, 9 sept 2026). */
.page[data-vue="indicateurs"]{max-width:none}
.ind4-defile{overflow-x:auto;margin:0 -4px;padding:0 4px}
.ind4{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:.86rem}
.ind4 th{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-mute);font-weight:800;padding:4px 8px;text-align:center;
  white-space:normal;line-height:1.25;vertical-align:bottom}
.ind4 th.ind4-ville{text-align:left}
.ind4 tbody tr{cursor:pointer}
.ind4 tbody tr:hover td{border-color:var(--brand)}
.ind4 tbody tr:hover .ind4-ville b{color:var(--brand-800)}
.ind4 td{padding:13px 8px;background:var(--surface);border-top:1px solid var(--border-2);
  border-bottom:1px solid var(--border-2);text-align:center;white-space:nowrap;
  font-variant-numeric:tabular-nums;min-width:74px}
.ind4 td:first-child{border-left:1px solid var(--border-2);border-radius:12px 0 0 12px;
  min-width:0}
.ind4 td:last-child{border-right:1px solid var(--border-2);border-radius:0 12px 12px 0}
.ind4 th.ind4-rang, .ind4 td.ind4-rang{width:40px;min-width:40px}
.ind4-n{display:inline-flex;width:26px;height:26px;border-radius:50%;align-items:center;
  justify-content:center;font-weight:800;color:var(--ink-mute);font-size:.8rem}
.ind4-p1{background:var(--brand);color:#fff}
.ind4-p2{background:var(--ink-soft);color:#fff}
.ind4-p3{background:var(--warn);color:#fff}
/* La colonne Centre reste collée à gauche pendant le défilement. */
.ind4 th.ind4-ville{position:sticky;left:40px;z-index:2;background:var(--bg)}
.ind4 td.ind4-ville{position:sticky;left:40px;z-index:2;text-align:left;min-width:150px;
  max-width:180px}
.ind4 th.ind4-rang{position:sticky;left:0;z-index:2;background:var(--bg)}
.ind4 td.ind4-rang{position:sticky;left:0;z-index:2;background:var(--surface)}
.ind4-ville b{display:block;line-height:1.2;font-size:.92rem;overflow:hidden;
  text-overflow:ellipsis}
.ind4-ville small{color:var(--ink-mute)}
.ind4-v{font-weight:700}
.ind4-v b{display:block;line-height:1.2;font-size:.96rem}
.ind4-v small{display:block;font-weight:600;font-size:.7rem;opacity:.75;margin-top:4px}
.ind4-j{display:block;height:3px;border-radius:99px;background:currentColor;
  opacity:.4;margin:7px auto 0;max-width:74px}
.ind4-v.v-tenu{background:var(--ok-soft);color:var(--ok-ink)}
.ind4-v.v-surveiller{background:var(--warn-soft);color:var(--warn-ink)}
.ind4-v.v-critique{background:var(--danger-soft);color:var(--danger-ink)}
.ind4-v.v-vide{color:var(--ink-soft)}
.ind4-sel td{border-color:var(--brand)}
.ind4-sel .ind4-ville b{color:var(--brand-800)}
.ind4-fr td{background:var(--brand-50);font-weight:800;border-color:transparent}
.ind4-fr td.ind4-ville, .ind4-fr td.ind4-rang{background:var(--brand-50)}
.ind4-fr .ind4-ville b{color:var(--brand-800)}
.ind4-fr .ind4-v.v-tenu{background:var(--ok-soft)}
.ind4-fr .ind4-v.v-surveiller{background:var(--warn-soft)}
.ind4-fr .ind4-v.v-critique{background:var(--danger-soft)}
.ind4-total{min-width:96px}
.ind4-total b{display:block;font-size:.84rem;margin-bottom:4px}
.ind4-total .ind2-rang-jauge{display:block;width:80px;margin:0 auto}

/* ── Les bandes de ville des pages direction : une vraie case — la
   ville à gauche, les comptes en pilules à droite. ── */
.vb{display:flex;align-items:center;gap:12px;background:var(--bg-2);
  border-radius:10px;padding:8px 14px;margin:0 0 8px}
.vb b{font-size:.92rem}
.vb-chips{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.vb-chips em{font-style:normal;font-size:.74rem;font-weight:700;padding:3px 10px;
  border-radius:99px;background:var(--surface);color:var(--ink-soft);
  border:1px solid var(--border-2);white-space:nowrap}
.vb-chips .vb-warn{background:var(--warn-soft);color:var(--warn-ink);border-color:transparent}
.vb-chips .vb-ok{background:var(--ok-soft);color:var(--ok-ink);border-color:transparent}

/* La pilule d'une classe : les couleurs de son BTS — orange MCO,
   marron NDRC, beige GPME — les mêmes que partout dans l'application. */
.bts-pill{display:inline-flex;align-items:center;padding:3px 11px;border-radius:99px;
  font-size:.74rem;font-weight:800;letter-spacing:.04em;
  background:var(--f,var(--bg-2));color:var(--f-encre,var(--ink-soft))}

/* ── Financements : ville, puis formation-classe, puis les contrats ── */
.fin-ville{margin-bottom:20px}
.fin-sous{margin:12px 0 6px;font-size:.76rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-mute)}
.fin-l{display:flex;align-items:center;gap:14px;background:var(--surface);
  border:1px solid var(--border-2);border-radius:10px;padding:10px 14px;margin-bottom:6px}
.fin-l .tbl-qui{flex:0 0 220px}
.fin-l .tbl-c{flex:1;min-width:0}
.fin-arenseigner{border-left:3px solid var(--warn)}
.fin-resume{font-variant-numeric:tabular-nums}

/* ── Réalisations : les sélections vivent dans l'en-tête, à droite ── */
.sel-haut{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.sel-haut .select{width:auto;max-width:240px}


/* ═══════════ LA BOÎTE MAIL, HABILLÉE COMME L'APP ÉTUDIANTE ═══════════
   Demande direction (10 sept 2026) : « visuellement exactement la même
   chose que pour les étudiants ». La mécanique ne bouge pas d'un trait —
   ces surcharges rhabillent les classes existantes : pilules de filtres,
   lignes arrondies, bulles claires, filets de jour, zone de réponse. */

/* La barre : le bloc d'onglets (l'actif en noir), la recherche à droite
   — la silhouette exacte de la boîte étudiante. */
.cr-barre{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}
.cr-onglets{display:flex;background:var(--surface);border:1px solid var(--border-2);
  border-radius:14px;padding:4px;gap:4px}
.cr-onglet{display:flex;align-items:center;gap:7px;padding:8px 14px;min-height:40px;
  border:none;border-radius:10px;background:none;font:inherit;font-size:.85rem;
  font-weight:700;color:var(--ink-soft);cursor:pointer;
  transition:background .18s,color .18s}
.cr-onglet svg{width:15px;height:15px}
.cr-onglet.on{background:var(--ink);color:#fff}
.cr-n{background:var(--bg-2);border-radius:99px;padding:1px 7px;font-size:.72rem;
  color:var(--ink-mute)}
.cr-onglet.on .cr-n{background:rgba(255,255,255,.18);color:#fff}
.cr-cherche{margin-left:auto;flex:0 1 300px;min-width:180px}

/* ⭐ CE QUI EST NON LU SE VOIT (Théo, 29 sept 2026 : « il faut qu'on le
   voie, que ce soit apparent »). Le compte d'un onglet passe à l'orange
   de la charte, texte marron : un gris clair sur fond clair se ratait. */
.cr-n{background:#F69D00;color:#2E2017;font-weight:800}
.cr-onglet.on .cr-n{background:#F69D00;color:#2E2017}
body[data-theme="dark"] .cr-onglet.on .cr-n{background:#F69D00;color:#2E2017}

/* L'onglet Réclamations : les cartes du module des fiches, sur une
   colonne lisible. */
.mail-rcl{max-width:920px}
.mail-rcl .rc-carte{margin-bottom:14px}

/* LA PASTILLE DE LA BOÎTE MAIL DANS LE RAIL : plus grande, marron sur
   l'orange du rail, liseré crème, et un anneau qui bat tant qu'il reste
   un message ou une réclamation non lus. Couleurs de la charte. */
.rnav .rn-badge.rn-badge-mail{min-width:22px;height:22px;top:-7px;right:-9px;padding:0 6px;z-index:2;
  font-size:.74rem;background:#2E2017;color:#FFF6E2;border:2px solid #FFF6E2;
  animation:rn-bat 1.8s ease-out infinite}
.mb-item .rn-badge.rn-badge-mail{min-width:19px;height:19px;font-size:.68rem;
  background:#2E2017;color:#FFF6E2;animation:rn-bat 1.8s ease-out infinite}
@keyframes rn-bat{
  0%  {box-shadow:0 0 0 0 rgba(46,32,23,.55)}
  70% {box-shadow:0 0 0 9px rgba(46,32,23,0)}
  100%{box-shadow:0 0 0 0 rgba(46,32,23,0)}}
@media (prefers-reduced-motion:reduce){ .rn-badge.rn-badge-mail{animation:none} }

/* La recherche, arrondie comme les champs de l'app étudiante. */
.mail-cherche{border:1.5px solid var(--border-2);border-radius:14px;background:var(--surface)}

/* La liste : des lignes arrondies séparées par l'espace, plus de filets. */
.mail-item{border-bottom:none;border-radius:15px;padding:12px 11px;gap:12px;
  transition:background .14s}
.mail-item+.mail-item{margin-top:2px}
.mail-item:hover{background:var(--bg-2)}
.mail-item.on{background:var(--brand-50);box-shadow:inset 0 0 0 1.5px var(--brand-100)}
.mail-item .ava{width:44px;height:44px}
.mail-item .mi-l1 b{font-size:.88rem}
.mail-item .mi-n{background:var(--brand);color:var(--ink);min-width:18px;height:18px;
  border-radius:99px;font-size:.66rem;font-weight:800;padding:0 5px}

/* La tête du fil. */
.ml-tete{padding:16px 18px 13px;border-bottom:1px solid var(--border-2)}

/* Les filets de jour, comme chez les étudiants. */
.fil-jour{display:flex;align-items:center;gap:12px;margin:12px 0 6px;color:var(--ink-mute);
  align-self:stretch;justify-content:stretch}
.fil-jour::before,.fil-jour::after{content:"";flex:1;height:1px;background:var(--border-2)}
.fil-jour span{background:none;border:none;padding:0;font-size:.66rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}

/* Les bulles : claires des deux côtés — les miennes en orangé doux,
   texte encre (fini le blanc sur orange). */
.bulle{background:var(--bg-2);border:none;border-radius:14px;padding:12px 14px}
.msg.suite .bulle{border-radius:14px}
.bulle.moi{background:var(--brand-50);border:none;border-radius:14px}
.msg.suite .bulle.moi{border-radius:14px}
.bulle p,.bulle.moi p{color:var(--ink);font-size:.88rem;line-height:1.6}
.bulle.moi .bl-objet{color:var(--ink)}
.bulle small,.bulle.moi small{color:var(--ink-mute);font-size:.66rem;font-weight:700}

/* La zone de réponse. */
.fil-repondre{border-top:1px solid var(--border-2);padding-top:13px}
.fil-repondre .fr-champ{border:1.5px solid var(--border-2);border-radius:14px;
  padding:11px 13px;font-size:.88rem;background:var(--surface)}

/* ── La boîte des réclamations (vue France) : même peau. ── */
.seg{min-height:40px;padding:8px 14px;font-size:.82rem}
.seg.on{background:var(--surface);border-color:var(--brand);color:var(--brand-700)}
.seg.on b{background:var(--brand-50);color:var(--brand-700)}
.rcl-item{border:none;border-radius:15px;padding:12px 11px;transition:background .14s}
.rcl-item+.rcl-item{margin-top:2px}
.rcl-item:hover{background:var(--bg-2);border-color:transparent}
.rcl-item.on{background:var(--brand-50);box-shadow:inset 0 0 0 1.5px var(--brand-100);
  border-color:transparent}
.rcl-item.neuf{background:var(--brand-50)}
.rcl-jour{background:none;border:none;align-self:stretch;display:flex;align-items:center;
  gap:12px;color:var(--ink-mute);border-radius:0;padding:0;margin:12px 0 6px}
.rcl-jour::before,.rcl-jour::after{content:"";flex:1;height:1px;background:var(--border-2)}
.rcl-bulle{border-radius:14px;font-size:.88rem;line-height:1.6}
.rcl-b-eux{background:var(--bg-2);border:none}
.rcl-b-dir{background:var(--brand-50)}
.rcl-f-corps{background:var(--surface)}
.rcl-f-pied textarea{border-radius:14px}

/* ═══════════════════════════════════════════════════════════════
   LES RÉCLAMATIONS SUR LA FICHE (72 h + preuve)

   Trois familles, et elles ne se confondent pas :
     · `.et-rec` / `.gkc-rec` — la pastille des LISTES : un compte, et
       une couleur qui dit si le délai est tenu ;
     · `.rc-bandeau`          — la ligne du haut d'une FICHE ;
     · `.rc-*`                — l'onglet lui-même (js/reclamations.js).

   ⚠️ AUCUNE COULEUR EN DUR. Tout passe par les jetons du kit
   (`--danger-soft`, `--warn-ink`…), qui sont redéfinis en vue sombre :
   ces blocs n'ont donc pas de variante sombre à écrire, et ne peuvent
   pas diverger de l'application.
   ═══════════════════════════════════════════════════════════════ */

/* ── La pastille d'une ligne d'étudiant, à côté du « +1 » des demandes.
   Orange tant qu'on est dans les temps, rouge dès que les 72 heures
   sont passées : on balaie soixante lignes et on voit les urgences. ── */
.et-rec{flex:none;margin-left:6px;display:inline-flex;align-items:center;gap:3px;
  font-size:.66rem;font-weight:800;color:var(--warn-ink);background:var(--warn-soft);
  border-radius:999px;padding:2px 7px;letter-spacing:.02em}
.et-rec svg{width:11px;height:11px}
.et-rec-retard{color:#fff;background:var(--danger)}

/* Sur une carte de contrat, le fond est déjà coloré par la formation :
   la pastille garde donc le même dessin mais sur le blanc du haut,
   comme le « +1 » juste à côté. */
.gkc-rec{display:inline-flex;align-items:center;gap:3px;flex:none;margin-left:6px;
  font-size:.62rem;font-weight:800;color:var(--warn-ink);background:var(--warn-soft);
  border-radius:999px;padding:1px 7px;white-space:nowrap}
.gkc-rec svg{width:10px;height:10px}
.gkc-rec-retard{color:#fff;background:var(--danger)}

/* ── LE BANDEAU DE LA FICHE ──
   Il se pose entre la frise et les onglets. Il n'existe QUE s'il y a
   quelque chose d'ouvert : pas de bandeau permanent qu'on finirait par
   ne plus voir. */
.rc-bandeau{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--warn-soft);border:1.5px solid var(--warn);
  border-radius:14px;padding:12px 14px;margin-bottom:14px}
.rc-bandeau > svg{width:20px;height:20px;flex:none;color:var(--warn-ink)}
.rc-b-texte{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
.rc-b-texte b{font-size:.86rem;color:var(--warn-ink)}
.rc-b-texte small{font-size:.76rem;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-bandeau.rc-b-retard{background:var(--danger-soft);border-color:var(--danger)}
.rc-b-retard > svg,.rc-b-retard .rc-b-texte b{color:var(--danger-ink)}

/* ── LE RAPPEL EN TÊTE DE L'ONGLET ──
   La même idée que le bandeau, en plus discret : on est déjà dans
   l'onglet, il ne s'agit plus d'alerter mais de rappeler la règle. */
.rc-rappel{display:flex;align-items:flex-start;gap:9px;
  background:var(--bg-2);border-radius:12px;padding:10px 13px;margin-bottom:13px;
  font-size:.8rem;line-height:1.55;color:var(--ink-soft)}
.rc-rappel svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--ink-mute)}
.rc-rappel.rc-r-retard{background:var(--danger-soft);color:var(--danger-ink)}
.rc-rappel.rc-r-retard svg{color:var(--danger)}

/* ── UNE RÉCLAMATION ──
   Le liseré gauche porte l'état : orange en cours, rouge hors délai,
   vert réglée. C'est la seule chose à lire de loin. */
.rc-carte{margin-bottom:14px;padding:0;overflow:hidden;
  border-left:4px solid var(--warn)}
.rc-carte.rc-retard{border-left-color:var(--danger)}
.rc-carte.rc-close{border-left-color:var(--ok);opacity:.82}
.rc-carte.rc-close:hover{opacity:1}

.rc-tete{display:flex;align-items:flex-start;gap:12px;padding:14px 16px 12px;
  border-bottom:1px solid var(--border)}
.rc-icone{flex:none;width:34px;height:34px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center}
.rc-icone svg{width:17px;height:17px}
.rc-t-brand{background:var(--brand-50,var(--bg-2));color:var(--brand)}
.rc-t-violet{background:var(--violet-soft);color:var(--violet-ink)}
.rc-t-ok{background:var(--ok-soft);color:var(--ok-ink)}
.rc-titres{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.rc-titres b{font-size:.92rem;line-height:1.35}
.rc-titres small{font-size:.74rem;color:var(--ink-mute)}
.rc-delai{flex:none}
.rc-delai .badge svg{width:11px;height:11px;margin-right:3px}
/* Le point d'une réclamation jamais ouverte par l'équipe. */
.rc-neuf{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--danger);margin-right:7px;vertical-align:1px}

/* ── LE FIL ──
   Les bulles de l'équipe à droite, celles de la personne à gauche :
   la même grammaire que la Boîte mail, pour qu'on n'ait rien à
   réapprendre. */
.rc-fil{display:flex;flex-direction:column;gap:9px;padding:14px 16px;
  max-height:340px;overflow-y:auto}
.rc-bulle{max-width:76%;align-self:flex-start;background:var(--bg-2);
  border-radius:14px;border-bottom-left-radius:4px;padding:9px 13px;
  font-size:.84rem;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.rc-bulle.rc-b-nous{align-self:flex-end;background:var(--brand-50,var(--warn-soft));
  border-bottom-left-radius:14px;border-bottom-right-radius:4px}
.rc-b-nom{display:flex;gap:8px;align-items:baseline;
  font-size:.68rem;font-weight:800;color:var(--ink-soft);margin-bottom:3px}
.rc-b-nom span{font-weight:600;color:var(--ink-mute)}

/* ── CE QUI A ÉTÉ FAIT ──
   Le bloc vert d'une réclamation close : la solution écrite, et la
   preuve quand il y en a une. C'est ce que la direction lit. */
.rc-solution{background:var(--ok-soft);padding:13px 16px;
  border-top:1px solid var(--border)}
.rc-s-tete{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.rc-s-tete svg{width:15px;height:15px;color:var(--ok-ink);flex:none}
.rc-s-tete b{font-size:.8rem;color:var(--ok-ink)}
.rc-s-tete .tiny{margin-left:auto}
.rc-solution p{font-size:.84rem;line-height:1.6;margin:0;white-space:pre-wrap}

/* ── LE PIED : répondre, ou clore ── */
.rc-pied{display:flex;flex-direction:column;gap:9px;padding:13px 16px;
  background:var(--bg-2);border-top:1px solid var(--border)}
.rc-reponse{resize:vertical;min-height:52px;font-size:.84rem}
.rc-boutons{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.rc-pied.rc-p-clos{flex-direction:row;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap}

/* Le trait qui sépare les réclamations vivantes de celles qui sont
   réglées : elles restent lisibles, elles ne se mélangent pas. */
.rc-separateur{display:flex;align-items:center;gap:12px;margin:20px 0 13px;
  font-size:.72rem;font-weight:700;color:var(--ink-mute);
  text-transform:uppercase;letter-spacing:.04em}
.rc-separateur::before,.rc-separateur::after{content:"";flex:1;height:1px;
  background:var(--border-2)}

@media (max-width:640px){
  .rc-tete{flex-wrap:wrap}
  .rc-delai{width:100%;padding-left:46px}
  .rc-bulle{max-width:90%}
  .rc-boutons .btn{flex:1 1 100%;justify-content:center}
}

/* ── LE REPÈRE D'UNE RÉCLAMATION SUR LA FRISE ──
   Même carte que les autres, un liseré épais à gauche : ce n'est pas
   une étape du parcours, c'est quelque chose qui est ARRIVÉ. Ouverte,
   elle est orange ; hors délai, elle prend le rouge des étapes en
   retard (`.est-retard`, déjà défini plus haut) ; réglée, le vert de
   `.est-effectuee`. Aucune couleur en propre : c'est ce qui la fait
   ressembler au reste de la frise plutôt qu'à une pièce rapportée. */
.fet-carte.fet-reclamation{border-left-width:3px;border-left-color:var(--warn)}
.fet-carte.fet-reclamation.est-retard{border-left-color:var(--danger)}
.fet-carte.fet-reclamation.est-effectuee{border-left-color:var(--ok)}

/* La réclamation qu'on vient d'ouvrir depuis la frise ou la to do list :
   elle s'allume deux secondes, le temps qu'on la retrouve des yeux dans
   une liste qui peut en compter cinq. */
.rc-carte.rc-vise{box-shadow:0 0 0 3px var(--brand-50,var(--warn-soft)),
  0 0 0 4px var(--brand);transition:box-shadow .25s}

/* ═══════════════════════════════════════════════════════════════
   LA BOÎTE DE LA DIRECTION FRANCE — MÊME GRAMMAIRE QUE CELLE DE
   L'ÉTUDIANT (demande direction, 10 sept 2026)

   Le canal en segments sombres au-dessus, les filtres en pastilles
   rondes en dessous : c'est le dessin de la Boîte mail de l'app
   Étudiante, porté ici. Les deux côtés de FASUP' se lisent donc de la
   même façon, et le canal dit d'abord la seule chose qui change tout :
   est-ce un problème à réparer, ou une question ?
   ═══════════════════════════════════════════════════════════════ */
.rcl-barre{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px}

.rcl-canaux{display:flex;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:4px;gap:4px}
.rcl-canal{display:flex;align-items:center;gap:7px;padding:8px 14px;min-height:40px;
  border:none;border-radius:10px;background:none;font:inherit;font-size:.85rem;
  font-weight:700;color:var(--ink-soft);cursor:pointer;
  transition:background .18s,color .18s}
.rcl-canal svg{width:16px;height:16px;flex:none}
.rcl-canal:hover{color:var(--ink)}
.rcl-canal.on{background:var(--ink);color:#fff}
.rcl-canal.on svg{color:#fff}

.rcl-filtres{display:flex;flex-wrap:wrap;gap:8px}
.rcl-filtre{display:flex;align-items:center;gap:7px;padding:8px 14px;min-height:40px;
  border-radius:999px;border:1.5px solid var(--border);background:var(--surface);
  font:inherit;font-size:.82rem;font-weight:700;color:var(--ink-soft);cursor:pointer;
  transition:border-color .18s,color .18s}
.rcl-filtre svg{width:15px;height:15px;flex:none}
.rcl-filtre:hover{border-color:var(--ink-mute);color:var(--ink)}
.rcl-filtre.on{border-color:var(--brand);color:var(--brand-800,var(--ink))}
/* « En retard » ne se comporte pas comme les autres : tant qu'il porte
   un chiffre, il reste rouge, allumé ou non. C'est le seul filtre qui
   doit se voir sans qu'on le cherche. */
.rcl-f-retard{border-color:var(--danger);color:var(--danger-ink)}
.rcl-f-retard.on{border-color:var(--danger);color:var(--danger-ink)}
.rcl-f-retard .rcl-n{background:var(--danger-soft);color:var(--danger-ink)}
.rcl-n{background:var(--bg-2);border-radius:999px;padding:1px 7px;font-size:.72rem}
.rcl-canal.on .rcl-n{background:rgba(255,255,255,.2);color:#fff}
.rcl-filtre.on .rcl-n{background:var(--brand-50)}

/* ── LE DÉLAI SUR UNE LIGNE DE LA LISTE ──
   C'est lui qui empêche de lire une réclamation comme un message. */
.rcl-i-delai{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.rcl-i-delai .badge svg{width:11px;height:11px;margin-right:3px}
.rcl-i-avant{font-size:.68rem;font-weight:600;color:var(--ink-mute)}

/* ── LE DÉLAI EN TÊTE DU FIL ── */
.rcl-f-delai{display:flex;align-items:flex-start;gap:9px;padding:10px 16px;
  background:var(--warn-soft);color:var(--warn-ink);
  border-bottom:1px solid var(--border);font-size:.79rem;line-height:1.55}
.rcl-f-delai svg{width:16px;height:16px;flex:none;margin-top:1px}
.rcl-f-delai.est-retard{background:var(--danger-soft);color:var(--danger-ink)}
.rcl-f-delai.est-clos{background:var(--ok-soft);color:var(--ok-ink)}

/* ── CE QUI A ÉTÉ FAIT, une fois le fil clos ── */
.rcl-f-solution{display:flex;align-items:flex-start;gap:9px;padding:12px 16px;
  background:var(--ok-soft);border-bottom:1px solid var(--border)}
.rcl-f-solution svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ok-ink)}
.rcl-f-solution b{display:block;font-size:.79rem;color:var(--ok-ink)}
.rcl-f-solution em{display:block;font-style:normal;font-size:.83rem;line-height:1.6;
  margin-top:4px;white-space:pre-wrap}
.rcl-f-solution i{display:block;font-style:normal;font-size:.72rem;
  color:var(--ink-mute);margin-top:6px}

@media (max-width:760px){
  .rcl-barre{gap:9px}
  .rcl-canaux{width:100%}
  .rcl-canal{flex:1;justify-content:center}
}


/* ═══════════════════════════════════════════════════════════════
   LA LIGNE DE LA BOÎTE DIRECTION, ÉPURÉE (10 sept 2026, soir)

   Elle portait dix informations empilées ; il en reste trois. Le
   dessin est celui d'une conversation dans l'app Étudiante : un
   avatar, un nom avec sa date, une sous-ligne. Ces règles arrivent
   APRÈS les anciennes dans la feuille, elles les recouvrent.
   ═══════════════════════════════════════════════════════════════ */
.rcl-item{display:flex;gap:11px;align-items:center;border:none;background:none;
  border-radius:14px;padding:11px 10px;transition:background .14s}
.rcl-item:hover{border-color:transparent;background:var(--bg-2)}
.rcl-item.on{border-color:transparent;box-shadow:inset 0 0 0 1.5px var(--brand);
  background:var(--brand-50)}
.rcl-item.neuf{background:transparent}
.rcl-item.neuf.on{background:var(--brand-50)}

/* L'avatar dit qui écrit — sans étiquette. Un étudiant porte ses
   initiales en couleur, une entreprise un rond neutre. */
.rcl-ava{flex:none;width:40px;height:40px;font-size:.8rem}
.rcl-ava-ent{display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--bg-2);color:var(--ink-soft)}
.rcl-ava-ent svg{width:19px;height:19px}

.rcl-i-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rcl-i-txt > b{display:flex;align-items:center;gap:7px;font-size:.86rem;min-width:0}
.rcl-i-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcl-i-quand{margin-left:auto;flex:none;font-size:.7rem;font-weight:600;
  color:var(--ink-mute);white-space:nowrap}
.rcl-i-l2{display:flex;align-items:center;gap:8px;min-width:0}
.rcl-i-l2 small{flex:1;min-width:0;font-size:.76rem;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Le point d'un fil jamais ouvert, et la SEULE pastille qui reste :
   le retard. Tout le reste se lit dans le fil. */
.rcl-point{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--brand);flex:none}
.rcl-i-retard{flex:none;font-size:.68rem;font-weight:800;color:#fff;
  background:var(--danger);border-radius:999px;padding:2px 8px;white-space:nowrap}

/* Les filtres n'ont plus d'icône : trois mots suffisent. */
.rcl-filtre{padding:7px 14px}

/* La liste respire un peu plus : à 340 px, un objet un peu long se
   coupait au troisième mot. */
.rcl-coque{grid-template-columns:376px minmax(0,1fr)}
@media (max-width:1100px){.rcl-coque{grid-template-columns:320px minmax(0,1fr)}}

/* ── LE BUDGET D'UNE ÉTAPE COMPÉTENCES + ──
   Deux lignes sous la relecture : ce que l'étape engage, et où en est
   l'enveloppe de l'année. Le cumul est le chiffre qui compte, d'où son
   trait de séparation et sa graisse. */
.fc-budget{margin-top:14px;border:1.5px solid var(--border-2);border-radius:14px;
  overflow:hidden}
.fc-b-l{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;font-size:.84rem}
.fc-b-l span{color:var(--ink-soft)}
.fc-b-l b{font-size:.95rem;white-space:nowrap}
.fc-b-cumul{background:var(--bg-2);border-top:1.5px solid var(--border-2)}
.fc-b-cumul b{color:var(--brand-800,var(--ink))}

/* ══════════════════════════════════════════════════════════════
   PROCESS — LES PAGES NOTION DANS L'APPLICATION (11 sept. 2026)
   Une page se lit comme dans Notion : grande icône, titre, blocs
   dépliants, encadrés colorés. Les couleurs sont celles de Notion,
   pour que les équipes reconnaissent leurs pages.
   ══════════════════════════════════════════════════════════════ */
.nt{--nt-c-gray:#787774;--nt-c-brown:#9F6B53;--nt-c-orange:#D9730D;--nt-c-yellow:#CB912F;
  --nt-c-green:#448361;--nt-c-blue:#337EA9;--nt-c-purple:#9065B0;--nt-c-pink:#C14C8A;--nt-c-red:#D44C47;
  --nt-f-gray:#F1F1EF;--nt-f-brown:#F4EEEE;--nt-f-orange:#FBECDD;--nt-f-yellow:#FBF3DB;
  --nt-f-green:#EDF3EC;--nt-f-blue:#E7F3F8;--nt-f-purple:#F6F3F9;--nt-f-pink:#FAF1F5;--nt-f-red:#FDEBEC;
  font-size:.95rem;line-height:1.62;color:var(--ink);overflow-wrap:anywhere}
body[data-theme="dark"] .nt{--nt-c-gray:#9B9B9B;--nt-c-brown:#BA856F;--nt-c-orange:#C77D48;
  --nt-c-yellow:#CA9849;--nt-c-green:#529E72;--nt-c-blue:#5E87C9;--nt-c-purple:#9D68D3;
  --nt-c-pink:#D15796;--nt-c-red:#DF5452;
  --nt-f-gray:#2F2F2F;--nt-f-brown:#4A3228;--nt-f-orange:#5C3B23;--nt-f-yellow:#564328;
  --nt-f-green:#243D30;--nt-f-blue:#143A4E;--nt-f-purple:#3C2D49;--nt-f-pink:#4E2C3C;--nt-f-red:#522E2A}
.nt-c-gray{color:var(--nt-c-gray)}.nt-c-brown{color:var(--nt-c-brown)}.nt-c-orange{color:var(--nt-c-orange)}
.nt-c-yellow{color:var(--nt-c-yellow)}.nt-c-green{color:var(--nt-c-green)}.nt-c-blue{color:var(--nt-c-blue)}
.nt-c-purple{color:var(--nt-c-purple)}.nt-c-pink{color:var(--nt-c-pink)}.nt-c-red{color:var(--nt-c-red)}
.nt-f-gray{background:var(--nt-f-gray)}.nt-f-brown{background:var(--nt-f-brown)}.nt-f-orange{background:var(--nt-f-orange)}
.nt-f-yellow{background:var(--nt-f-yellow)}.nt-f-green{background:var(--nt-f-green)}.nt-f-blue{background:var(--nt-f-blue)}
.nt-f-purple{background:var(--nt-f-purple)}.nt-f-pink{background:var(--nt-f-pink)}.nt-f-red{background:var(--nt-f-red)}
span.nt-f-gray,span.nt-f-brown,span.nt-f-orange,span.nt-f-yellow,span.nt-f-green,span.nt-f-blue,
span.nt-f-purple,span.nt-f-pink,span.nt-f-red{border-radius:4px;padding:0 3px}
.nt-u{text-decoration:underline;text-underline-offset:2px}
.nt b{font-weight:700}
.nt-p{margin:3px 0;min-height:1em}
.nt-p.nt-f-gray,.nt-p.nt-f-brown,.nt-p.nt-f-orange,.nt-p.nt-f-yellow,.nt-p.nt-f-green,
.nt-p.nt-f-blue,.nt-p.nt-f-purple,.nt-p.nt-f-pink,.nt-p.nt-f-red{padding:3px 8px;border-radius:6px}
.nt-enf{padding-left:24px}
.nt-h{font-weight:750;line-height:1.3;letter-spacing:-.01em}
.nt-h1{font-size:1.42rem;margin:24px 0 6px}
.nt-h2{font-size:1.18rem;margin:18px 0 4px}
.nt-h3{font-size:1.02rem;margin:14px 0 2px}
.nt-h4{font-size:.95rem;margin:12px 0 2px}
.nt>.nt-h:first-child,.nt>.nt-tg:first-child{margin-top:0}
.nt-h.nt-f-gray,.nt-h.nt-f-brown,.nt-h.nt-f-orange,.nt-h.nt-f-yellow,.nt-h.nt-f-green,
.nt-h.nt-f-blue,.nt-h.nt-f-purple,.nt-h.nt-f-pink,.nt-h.nt-f-red{padding:2px 8px;border-radius:6px}
/* Les dépliants : le petit triangle de Notion. */
.nt-tg{margin:2px 0}
.nt-tg>summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:6px;
  padding:3px 6px 3px 2px;border-radius:6px;font-weight:500}
.nt-tg>summary::-webkit-details-marker{display:none}
.nt-tg>summary::before{content:"";flex:none;width:0;height:0;margin:.52em 4px 0 6px;
  border-style:solid;border-width:5px 0 5px 7px;border-color:transparent transparent transparent currentColor;
  opacity:.55;transition:transform .15s ease}
.nt-tg[open]>summary::before{transform:rotate(90deg)}
.nt-tg>summary:hover{background:var(--bg-2)}
.nt-tg>summary>.nt-h{margin:0}
.nt-tg-h1,.nt-tg-h2,.nt-tg-h3,.nt-tg-h4{margin-top:10px}
.nt-tg-h1>summary::before{margin-top:.62em}
.nt-tg-corps{padding:2px 0 4px 25px}
/* Les encadrés (« callouts »). */
.nt-callout{display:flex;gap:10px;padding:12px 16px 12px 14px;border-radius:10px;margin:8px 0}
.nt-callout-ic{flex:none;font-size:1.15rem;line-height:1.45}
.nt-callout-corps{flex:1;min-width:0}
.nt-callout-corps>:first-child{margin-top:0}
.nt-callout-corps>:last-child{margin-bottom:0}
.nt-callout:not([class*="nt-f-"]){border:1px solid var(--border-2)}
/* Les colonnes Notion restent côte à côte ; un encadré seul dans sa
   colonne prend toute la hauteur, comme les blocs carrés de Notion. */
.nt-cols{display:flex;gap:14px;align-items:stretch;margin:10px 0}
.nt-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.nt-cols>.nt-col>:first-child{margin-top:0}
.nt-cols>.nt-col>:last-child{margin-bottom:0}
.nt-col>.nt-callout:only-child{flex:1}
@media (max-width:720px){.nt-cols{flex-direction:column;gap:10px}.nt-col{flex:none !important}}
.nt-cit{margin:8px 0;padding:2px 0 2px 14px;border-left:3px solid var(--ink);font-size:1.02rem}
.nt-cit.nt-f-gray,.nt-cit.nt-f-brown,.nt-cit.nt-f-orange,.nt-cit.nt-f-yellow,.nt-cit.nt-f-green,
.nt-cit.nt-f-blue,.nt-cit.nt-f-purple,.nt-cit.nt-f-pink,.nt-cit.nt-f-red{padding:6px 12px;border-radius:0 8px 8px 0}
.nt-ul,.nt-ol{margin:3px 0;padding-left:26px}
.nt-ul li,.nt-ol li{margin:2px 0;padding-left:2px}
.nt-ul .nt-ul{list-style:circle}.nt-ul .nt-ul .nt-ul{list-style:square}
.nt-hr{border:0;border-top:1px solid var(--border-2);margin:14px 0}
.nt-todo{display:flex;gap:8px;align-items:flex-start;margin:3px 0}
.nt-case{flex:none;width:16px;height:16px;border:1.5px solid var(--ink-mute);border-radius:3px;
  margin-top:.25em;font-size:.7rem;display:flex;align-items:center;justify-content:center}
.nt-todo.fait>span:last-child{text-decoration:line-through;color:var(--ink-mute)}
.nt-todo.fait .nt-case{background:var(--brand);border-color:var(--brand);color:#fff}
.nt-code{background:var(--bg-2);border-radius:8px;padding:12px 14px;font-size:.82rem;overflow-x:auto;white-space:pre}
.nt-code-l{background:var(--bg-2);color:#EB5757;border-radius:4px;padding:1px 5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84em}
.nt-table-cadre{overflow-x:auto;margin:8px 0}
.nt-table{border-collapse:collapse;font-size:.88rem;min-width:100%}
.nt-table td,.nt-table th{border:1px solid var(--border-2);padding:7px 10px;vertical-align:top;text-align:left}
.nt-table th{background:var(--bg-2);font-weight:700}
.nt-lien{color:var(--brand-700);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.nt-lien:hover{text-decoration-color:currentColor}
.nt-mention{font-weight:600;text-decoration:none}
.nt-media,.nt-page{display:flex;align-items:center;gap:10px;margin:6px 0;padding:8px 12px;
  border:1px solid var(--border-2);border-radius:10px;background:var(--surface);color:inherit;
  text-decoration:none;max-width:560px}
a.nt-media:hover,a.nt-page:hover{border-color:var(--brand);background:var(--bg-2)}
.nt-media-ic,.nt-page-ic{flex:none;font-size:1.15rem}
.nt-media-txt{display:flex;flex-direction:column;min-width:0}
.nt-media-txt b{font-size:.84rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-media-txt small{font-size:.72rem;color:var(--ink-mute)}
.nt-page span:last-child{font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--border-2)}
.nt-vide{color:var(--ink-mute);font-style:italic;font-size:.84rem;margin:2px 0}
.nt mark,.prs mark{background:#FFE58A;color:inherit;border-radius:3px;padding:0 1px}
body[data-theme="dark"] .nt mark,body[data-theme="dark"] .prs mark{background:#7A5F00}
@keyframes ntCible{0%{background:#FFE58A}100%{background:transparent}}
.nt-cible>summary,.nt-h.nt-cible{animation:ntCible 2.4s ease-out}

/* La page d'un process : une feuille, comme dans Notion. */
.ntp-barre{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.ntp-fil{font-size:.8rem;color:var(--ink-mute);display:flex;align-items:center;gap:6px}
.ntp-barre .sep{flex:1}
.ntp{background:var(--surface);border:1px solid var(--border-2);border-radius:18px;
  padding:34px 48px 44px;max-width:860px;margin:0 auto}
.ntp-ic{font-size:3rem;line-height:1;margin-bottom:10px}
.ntp-titre{font-size:1.9rem;font-weight:800;line-height:1.2;letter-spacing:-.02em;margin:0 0 8px}
.ntp-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:.78rem;
  color:var(--ink-mute);padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--border-2)}
.ntp-meta a{color:inherit}
.ntp-desc{font-size:1rem;color:var(--ink-soft);margin:0 0 16px}
@media(max-width:720px){.ntp{padding:22px 18px 30px;border-radius:14px}.ntp-titre{font-size:1.5rem}}

/* Un pôle : la liste de ses pages, comme une page Notion de sommaire. */
.prl{background:var(--surface);border:1px solid var(--border-2);border-radius:16px;overflow:hidden}
.prl-ligne{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;
  border:0;border-bottom:1px solid var(--border-2);padding:12px 16px;font:inherit;color:inherit;cursor:pointer}
.prl-ligne:last-child{border-bottom:0}
.prl-ligne:hover{background:var(--bg-2)}
.prl-ic{flex:none;width:30px;font-size:1.35rem;text-align:center}
.prl-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.prl-txt b{font-size:.92rem;font-weight:650}
.prl-txt small{color:var(--ink-mute);font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prl-fl{flex:none;color:var(--ink-mute);display:flex}
.prl-fl svg{width:15px;height:15px}
.pol-emoji{font-size:1.7rem;line-height:1;width:40px;height:40px;border-radius:12px;
  background:var(--bg-2);display:flex;align-items:center;justify-content:center}

/* Les résultats de recherche : la page, l'endroit, la phrase. */
.prs{display:flex;flex-direction:column;gap:10px}
.prs-tete{font-size:.8rem;color:var(--ink-mute);margin:0 0 2px}
.prs-res{background:var(--surface);border:1px solid var(--border-2);border-radius:14px;
  padding:14px 16px;display:flex;gap:12px}
.prs-res:hover{border-color:var(--brand)}
.prs-ic{flex:none;font-size:1.45rem;line-height:1.2;width:30px;text-align:center}
.prs-corps{flex:1;min-width:0}
.prs-titre{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:none;border:0;padding:0;
  font:inherit;color:inherit;cursor:pointer;text-align:left}
.prs-titre b{font-size:.98rem;font-weight:700}
.prs-titre:hover b{text-decoration:underline;text-underline-offset:3px}
.prs-pole{font-size:.7rem;color:var(--ink-mute);background:var(--bg-2);border-radius:999px;padding:2px 8px}
.prs-sec{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit;
  cursor:pointer;padding:8px 10px;margin-top:8px;border-radius:10px;background:var(--bg-2)}
.prs-sec:hover{background:color-mix(in srgb,var(--brand) 9%,var(--bg-2))}
.prs-ou{display:block;font-size:.74rem;font-weight:700;color:var(--brand-700);margin-bottom:2px}
.prs-ext{display:block;font-size:.84rem;color:var(--ink-soft);line-height:1.5}
.prs-approche{font-size:.8rem;color:var(--ink-soft);background:var(--bg-2);border-radius:10px;padding:8px 12px}

/* Une seule croix pour effacer : la nôtre, pas celle du navigateur. */
.prc-question input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}

/* ══════════════════════════════════════════════════════════════
   PROCESS — NOTION RESTE LA SOURCE (11 sept. 2026, au soir)
   La page s'ouvre en vue large et aérée ; les vidéos, images et
   fichiers Notion se lisent dans la page ; la grille des pôles n'a
   jamais de case vide (agencerGrille, js/pages/process.js) ; la
   direction France voit l'état de la mise à jour et ce qui est masqué.
   ══════════════════════════════════════════════════════════════ */
.pol.pol-long .pol-apercu{-webkit-line-clamp:3}

/* La page : toute la largeur, et de l'air entre les blocs. */
.ntp{max-width:none;padding:44px clamp(22px,5vw,76px) 60px}
.ntp-titre{font-size:2.1rem}
.ntp-meta{margin-bottom:26px}
.ntp .nt{font-size:.97rem;line-height:1.72}
.ntp .nt-p{margin:7px 0}
.ntp .nt-ul,.ntp .nt-ol{margin:8px 0}
.ntp .nt-ul li,.ntp .nt-ol li{margin:5px 0}
.ntp .nt-tg{margin:6px 0}
.ntp .nt-tg>summary{padding-top:6px;padding-bottom:6px}
.ntp .nt-tg-corps{padding:6px 0 12px 28px}
.ntp .nt-callout{padding:16px 20px;margin:16px 0}
.ntp .nt-h1{margin:36px 0 12px}
.ntp .nt-h2{margin:30px 0 10px}
.ntp .nt-h3{margin:22px 0 8px}
.ntp .nt-h4{margin:18px 0 6px}
.ntp .nt-hr{margin:26px 0}
.ntp .nt-table-cadre{margin:14px 0}
@media(max-width:720px){.ntp{padding:24px 18px 32px}}
.ntp-avis{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:10px 14px;
  border-radius:12px;background:var(--bg-2);font-size:.84rem;color:var(--ink-soft)}
.ntp-avis svg{width:16px;height:16px;flex:none}
.ntp-avis.absent{background:#FDECEC;color:#9B1C1C}
body[data-theme="dark"] .ntp-avis.absent{background:#4A1D1D;color:#FFC9C9}

/* Les médias Notion : l'image, le lecteur vidéo, l'audio. */
.nt-fig{margin:14px 0}
.nt-fig img{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--border-2)}
.nt-fig figcaption{font-size:.78rem;color:var(--ink-mute);margin-top:6px}
.nt-attente{display:flex;align-items:center;gap:8px;min-height:64px;padding:14px 16px;
  border-radius:10px;background:var(--bg-2);color:var(--ink-mute);font-size:.84rem}
.nt-lect{margin:16px 0;max-width:900px}
.nt-lect video{display:block;width:100%;max-height:72vh;border-radius:12px;background:#000}
.nt-lect-video .nt-attente{aspect-ratio:16/9;justify-content:center}
.nt-lect audio{display:block;width:100%}
.nt-lect-ext iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:var(--bg-2)}
.nt-lect-nom{display:inline-block;font-size:.8rem;color:var(--ink-soft);margin-top:6px}

/* La mise à jour depuis Notion (direction France seulement). */
.prc-sync{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.8rem;
  color:var(--ink-soft);margin:0 0 12px}
.prc-sync:empty{display:none}
.prc-sync .sep{flex:1}
.prc-sync-point{width:8px;height:8px;border-radius:50%;background:#2E9D5B;flex:none}
.prc-sync-point.ko{background:#D14343}
.prc-sync-av{border:0;background:none;font:inherit;color:#B7791F;font-weight:700;cursor:pointer;padding:0}
.prc-sync-av:hover{text-decoration:underline}
.prc-sync.attention{padding:12px 16px;border:1px dashed var(--border-2);border-radius:14px;
  background:var(--surface);color:var(--ink);font-size:.84rem}
.prc-sync-ic{font-size:1.2rem}
.prc-sync-txt{flex:1;min-width:200px}
.prc-av{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:.84rem}
.prc-retires{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;
  font-size:.8rem;color:var(--ink-mute)}
.prl-ligne.masque{opacity:.6}
.prl-etat{flex:none;font-size:.7rem;font-weight:700;border-radius:999px;padding:2px 9px;
  background:var(--bg-2);color:var(--ink-soft);white-space:nowrap}
.prl-etat.absent{background:#FDECEC;color:#9B1C1C}
body[data-theme="dark"] .prl-etat.absent{background:#4A1D1D;color:#FFC9C9}

/* ══════════════════════════════════════════════════════════════
   PROCESS — MASQUER UN PÔLE : LES DEUX RAYONS (11 sept. 2026)
   Choix de Théo parmi six essais (essai-poles.html) : ce que voient
   les équipes en haut, ce qu'elles ne voient pas en bas ; on glisse
   un pôle d'un rayon à l'autre, ou on touche l'œil barré de sa carte.
   ══════════════════════════════════════════════════════════════ */
.pol:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.pol-rayon{position:relative;border-radius:18px;
  transition:background-color .15s ease,box-shadow .15s ease,outline-color .15s ease,border-color .15s ease}
.pol-rayon-tete{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;margin:0 0 10px}
.pol-rayon-tete>svg{width:16px;height:16px;flex:none;color:var(--ink-mute)}
.pol-rayon-tete>b{font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.pol-rayon-tete small{font-size:.76rem;color:var(--ink-mute)}
/* Pendant le glisser, le sous-titre du rayon d'arrivée laisse place à la consigne. */
.pol-deposer{display:none;font-size:.76rem;font-weight:700;color:var(--brand-700)}
.pol-cible .pol-deposer{display:inline}
.pol-cible .pol-sous{display:none}
/* Le rayon du haut : la vraie grille, sans cadre ; il ne s'éclaire que
   lorsqu'on y remonte une tuile. */
.pol-rayon-haut{outline:2px dashed transparent;outline-offset:8px}
.pol-rayon-haut.pol-cible{outline-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 8px var(--brand-50)}
.pol-rayon-haut.pol-survol{outline-style:solid}
.pol-rien{padding:22px 16px;border-radius:16px;background:var(--bg-2);text-align:center;
  font-size:.86rem;color:var(--ink-soft)}
/* Le rayon du bas : l'arrière-boutique, en pointillés. */
.pol-rayon-bas{margin-top:28px;padding:14px 16px 16px;border:2px dashed var(--border-2)}
.pol-rayon-bas.pol-cible{border-color:var(--brand);background:var(--brand-50)}
.pol-rayon-bas.pol-survol{border-style:solid}
.pol-consigne{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:78px;padding:8px 12px;text-align:center;font-size:.88rem;font-weight:600;color:var(--ink-soft)}
.pol-consigne small{font-size:.76rem;font-weight:500;color:var(--ink-mute)}
.pol-consigne svg{width:13px;height:13px;vertical-align:-2px}
/* La tuile d'un pôle masqué : une seule ligne, compacte. */
.pol-tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.pol-tuile{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;min-width:0;
  background:var(--surface);border:1px solid var(--border-2);border-radius:14px;
  padding:9px 10px 9px 12px;cursor:grab}
.pol-tuile:active{cursor:grabbing}
.pol-tuile-nom{display:flex;align-items:center;gap:10px;flex:1 1 150px;min-width:0;
  background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.pol-tuile-nom .pol-emoji{flex:none;width:32px;height:32px;border-radius:10px;font-size:1.2rem;
  filter:grayscale(1);opacity:.7}
.pol-tuile-tx{display:flex;flex-direction:column;min-width:0}
.pol-tuile-tx b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pol-tuile-tx small{font-size:.74rem;color:var(--ink-mute)}
.pol-tuile-nom:hover b{text-decoration:underline;text-underline-offset:3px}
.pol-actions{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.pol-retirer{color:#B42318}
.pol-retirer:hover{background:rgba(180,35,24,.08);color:#B42318}
body[data-theme="dark"] .pol-retirer,body[data-theme="dark"] .pol-retirer:hover{
  color:color-mix(in srgb,#B42318 55%,var(--ink))}
/* La carte visible : l'œil barré en haut à droite. */
.pol.pol-avec-ranger{position:relative}
.pol-ranger{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;
  height:32px;min-width:32px;padding:0 8px;justify-content:center;border-radius:10px;
  border:1px solid var(--border-2);background:var(--surface);color:var(--ink-soft);
  font:inherit;font-size:.74rem;font-weight:700;cursor:pointer;
  transition:opacity .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease}
.pol-ranger svg{width:16px;height:16px;flex:none}
.pol-ranger span{display:none}
.pol-ranger:hover{background:var(--bg-2);color:var(--ink);border-color:var(--ink-mute)}
.pol-ranger:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Ce qu'on attrape s'estompe à sa place pendant le glisser. */
.pol-glisse{opacity:.4}
.prc-retires{flex-wrap:wrap;text-align:center}
/* Un pôle ouvert : ses gestes dans l'en-tête, qui passe à la ligne au besoin. */
.prc-pole-tete{flex-wrap:wrap;row-gap:8px}
.prc-pole-actions{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
/* Ordinateur à souris : l'œil barré n'apparaît qu'au survol (ou au clavier). */
@media (hover:hover) and (min-width:721px){
  .pol-ranger{opacity:0}
  .pol-avec-ranger:hover .pol-ranger,.pol-avec-ranger:focus-visible .pol-ranger,
  .pol-avec-ranger:focus-within .pol-ranger{opacity:1}
}
@media (max-width:720px){
  .pol-ranger span{display:inline}
  .pol-rayon-bas{padding:12px 12px 14px}
  .prc-pole-actions{flex:0 0 100%;margin-left:0}
}

/* ══════════ MON COMPTE ══════════
   Le nom se corrige soi-même. Ce qui relève des droits d'accès (e-mail,
   rôle, campus) se lit mais ne se touche pas : on le montre à part,
   visiblement inerte, pour qu'on cesse de le chercher ailleurs. */
.mc-vue{display:flex;gap:10px;align-items:flex-start;margin:0 0 4px;
  padding:12px 14px;border-radius:var(--r-md);font-size:.85rem;line-height:1.45;
  background:var(--brand-50);border:1.5px solid var(--brand);color:var(--ink)}
.mc-vue svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--brand-700)}
.mc-fixe{margin-top:20px;padding:14px 16px;border-radius:var(--r-lg);
  background:var(--surface-2);border:1px solid var(--border-2)}
.mc-fixe > p:first-child{display:flex;gap:7px;align-items:center}
.mc-fixe > p:first-child svg{width:14px;height:14px;flex:none}
.mc-ligne{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:7px 0;border-top:1px solid var(--border)}
.mc-ligne:first-of-type{border-top:0}
.mc-ligne span{font-size:.82rem;color:var(--ink-soft)}
.mc-ligne b{font-size:.86rem;text-align:right;word-break:break-word}

/* ══════════ TO DO LIST : CE QUE LA CARTE DIT EN PLUS ══════════ */
/* La classe concernée : demandée à la création, elle doit se lire. */
.kb-card .kb-classe{display:flex;align-items:center;gap:5px;margin-top:4px;
  font-size:.74rem;font-weight:600;color:var(--ink-mute)}
.kb-card .kb-classe svg{width:12px;height:12px;flex:none}

/* Les deux flèches de déplacement, réservées aux écrans sans souris.
   Sur ordinateur le glisser-déposer reste le seul geste : rien ne
   change, pas même d'un pixel. */
.kb-fleches{display:none}
@media (hover:none){
  .kb-fleches{display:inline-flex;gap:4px;margin-left:auto}
  .kb-fleches button{
    width:30px;height:30px;border-radius:9px;flex:none;
    display:flex;align-items:center;justify-content:center;
    border:1.5px solid var(--border-2);background:var(--surface);
    color:var(--ink-soft);cursor:pointer;padding:0}
  .kb-fleches button:active{background:var(--bg-2);border-color:var(--brand)}
  .kb-fleches button svg{width:15px;height:15px}
  .kb-card .kb-qui{align-items:center}
}

/* ── La fiche d'une mission écrite à la main ── */
.mi-fiche{border:1px solid var(--border);border-radius:13px;overflow:hidden}
.mi-type{display:block;padding:10px 14px 9px;font-size:.72rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;background:var(--bg-2);
  border-bottom:1px solid var(--border)}
.mi-l{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 14px;border-top:1px solid var(--border)}
.mi-l:first-of-type{border-top:none}
.mi-l span{font-size:.8rem;color:var(--ink-soft)}
.mi-l b{font-size:.86rem;text-align:right}
.mi-detail{margin-top:16px;padding:13px 15px;border-radius:13px;
  background:var(--brand-50);border:1px solid var(--brand-100)}
.mi-detail label{display:block;font-size:.7rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand-800);margin-bottom:5px}
.mi-detail p{font-size:.88rem;line-height:1.6;white-space:pre-wrap;margin:0}
.mi-renvoi{display:flex;gap:11px;margin-top:16px;padding:13px 15px;border-radius:13px;
  background:var(--danger-soft);border:1px solid var(--danger)}
.mi-renvoi svg{width:17px;height:17px;flex:none;color:var(--danger);margin-top:1px}
.mi-renvoi b{display:block;font-size:.85rem}
.mi-renvoi p{font-size:.85rem;line-height:1.55;margin:3px 0 0}

/* ══════════ TABLEAU DE BORD : L'ATTENTE ET LA PANNE ══════════
   L'ossature de la page, dans le brun de la maison, le temps que les
   cinq lectures reviennent. On respire, on ne clignote pas : une
   pulsation lente, coupée net pour qui refuse les animations. */
.db-attente{display:flex;flex-direction:column;gap:14px}
.db-att-mot{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;
  color:var(--brand-800)}
.db-att-mot svg{width:15px;height:15px}
.db-att-b{border-radius:var(--r-lg);background:var(--bg-2);
  border:1px solid var(--border);animation:db-att 1.6s ease-in-out infinite}
.db-att-l{display:grid;gap:14px;grid-template-columns:repeat(5,minmax(0,1fr))}
.db-att-l4{grid-template-columns:repeat(4,minmax(0,1fr))}
.db-att-l2{grid-template-columns:2fr 1fr}
@keyframes db-att{0%,100%{opacity:.55}50%{opacity:.9}}
@media (max-width:1000px){
  .db-att-l,.db-att-l4,.db-att-l2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .db-att-l,.db-att-l4,.db-att-l2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .db-att-b{animation:none}
}

.db-panne{display:flex;align-items:flex-start;gap:16px;padding:22px 24px;flex-wrap:wrap}
.db-panne-ic{width:42px;height:42px;border-radius:13px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--danger-soft);color:var(--danger)}
.db-panne-ic svg{width:19px;height:19px}
.db-panne > div{flex:1;min-width:220px}
.db-panne b{font-size:.98rem;display:block}
.db-panne p{font-size:.86rem;color:var(--ink-soft);margin-top:4px;line-height:1.55}

/* Une conversation de classe qui ne correspond plus à aucune promo du
   référentiel : on la garde joignable, on dit ce qu'elle est. */
.mi-ancienne{background:var(--warn-soft);color:var(--warn-ink);font-weight:700}

/* ══════════ PROCESS : LA COULEUR DES PÔLES ══════════
   Chaque pôle porte sa teinte, la même sur sa carte et sur chacune de
   ses lignes de sommaire : on le reconnaît avant d'avoir lu son nom.
   Des fonds très dilués, un liseré franc — la page range, elle ne crie
   pas (direction, 14 sept 2026). */
.pol-t1{--pt:var(--brand);   --pt-f:var(--brand-50)}
.pol-t2{--pt:var(--info);    --pt-f:var(--info-soft)}
.pol-t3{--pt:var(--ok);      --pt-f:var(--ok-soft)}
.pol-t4{--pt:var(--violet, #7C5BD4); --pt-f:rgba(124,91,212,.10)}
.pol-t5{--pt:var(--warn);    --pt-f:var(--warn-soft)}
.pol-t6{--pt:var(--danger);  --pt-f:var(--danger-soft)}

.pol[class*="pol-t"]{border-top:3px solid var(--pt)}
.pol[class*="pol-t"] .pol-ic{background:var(--pt-f)}
.pol[class*="pol-t"]:hover{border-color:var(--pt)}
.pol[class*="pol-t"] b{color:var(--ink)}

.prl-t1{--pt:var(--brand)}
.prl-t2{--pt:var(--info)}
.prl-t3{--pt:var(--ok)}
.prl-t4{--pt:var(--violet, #7C5BD4)}
.prl-t5{--pt:var(--warn)}
.prl-t6{--pt:var(--danger)}
.prl-ligne[class*="prl-t"]{border-left:3px solid var(--pt);padding-left:13px;
  border-radius:0 11px 11px 0;transition:background .13s}
.prl-ligne[class*="prl-t"]:hover{background:var(--bg-2)}
.prl-ligne[class*="prl-t"] b{font-weight:700}

/* ══════════ CAMPUS : CHAQUE BLOC SA COULEUR ══════════
   Quatre cartes blanches avec quatre pastilles grises, c'était quatre
   fois la même carte. La pastille prend la teinte du bloc et un filet
   la souligne : on retrouve « Documents » sans lire (14 sept 2026). */
.camp-titre.ct-ok    {--cb:var(--ok);     --cb-f:var(--ok-soft)}
.camp-titre.ct-info  {--cb:var(--info);   --cb-f:var(--info-soft)}
.camp-titre.ct-brand {--cb:var(--brand);  --cb-f:var(--brand-50)}
.camp-titre.ct-violet{--cb:var(--violet, #7C5BD4); --cb-f:rgba(124,91,212,.10)}
.camp-titre.ct-neutre{--cb:var(--ink-mute);--cb-f:var(--bg-2)}
.camp-titre[class*="ct-"] .ct-ic{background:var(--cb-f);color:var(--cb)}
.camp-titre[class*="ct-"]{border-bottom:2px solid var(--cb-f);padding-bottom:11px}
.camp-titre[class*="ct-"] .ct-txt{font-weight:800}

/* Un bouton d'en-tête sans valeur derrière : visible, mais sans
   promesse. Le téléphone non renseigné ne se clique pas. */
.btn.est-vide{opacity:.6;cursor:default}

/* Côté campus, le financement n'est pas saisissable : une ligne
   d'attente sobre, au lieu d'un paragraphe qui s'excuse. */
.fin-attente{display:flex;align-items:center;gap:8px;margin:10px 0 4px;
  padding:10px 13px;border-radius:11px;font-size:.84rem;font-weight:600;
  background:var(--bg-2);color:var(--ink-soft);border:1px dashed var(--border-2)}
.fin-attente svg{width:15px;height:15px;flex:none}

/* L'emploi du temps pas encore branché : on le dit, sobrement, plutôt
   que de laisser croire à une grille cassée. */
.edt-note.edt-vide{color:var(--ink-soft);background:var(--bg-2);
  border:1px dashed var(--border-2);border-radius:11px;padding:10px 13px}
.edt-note.edt-vide b{color:var(--ink)}

/* Le statut d'un alternant : le bouton, et sous lui la mention de la
   correction manuelle quand il y en a une. */
.st-bloc{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px}
.st-corrige{display:inline-flex;align-items:center;gap:5px;font-size:.71rem;
  font-weight:700;color:var(--warn-ink);background:var(--warn-soft);
  padding:2px 8px;border-radius:99px;white-space:nowrap}
.st-corrige svg{width:11px;height:11px;flex:none}

/* ══════════ ONGLETS DÉFILANTS AU DOIGT ══════════
   Six onglets ne tiennent pas sur un téléphone. Deux flèches encadrent
   la barre et font avancer d'un onglet ; sur ordinateur, le bloc
   n'existe pas (voir habillerOnglets dans app.js). */
.tabs-nav{display:flex;align-items:stretch;gap:2px;margin-bottom:22px;
  border-bottom:1.5px solid var(--border)}
.tabs-nav > .tabs{flex:1;min-width:0;margin-bottom:0;border-bottom:none;
  scroll-behavior:smooth;scrollbar-width:none}
.tabs-nav > .tabs::-webkit-scrollbar{display:none}
.tn-fl{flex:none;width:34px;border:none;background:transparent;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.tn-fl svg{width:16px;height:16px}
.tn-fl:disabled{opacity:.25;cursor:default}
.tn-fl:active:not(:disabled){color:var(--brand)}

/* ══════════ PIÈCE JOINTE D'UN MESSAGE ══════════
   « Si besoin on devrait pouvoir ajouter une pièce jointe pas trop
   volumineuse » (direction, 14 sept 2026). Dix mégaoctets au plus. */
.fil-repondre{flex-direction:column;align-items:stretch;gap:8px}
.fr-ligne{display:flex;align-items:flex-end;gap:8px}
.fr-ligne .fr-champ{flex:1;min-width:0}
.fr-joindre{flex:none;width:38px;height:38px;border-radius:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--border-2);background:var(--surface);color:var(--ink-soft);
  transition:all .14s}
.fr-joindre:hover{border-color:var(--brand);color:var(--brand-700);background:var(--brand-50)}
.fr-joindre svg{width:17px;height:17px}
.fr-joindre:focus-within{outline:2px solid var(--brand);outline-offset:2px}

/* Ce qu'on s'apprête à envoyer, au-dessus du champ : visible, et
   retirable d'un clic. */
.fr-piece{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:11px;
  background:var(--brand-50);border:1px solid var(--brand-100);font-size:.83rem}
.fr-piece > svg{width:15px;height:15px;flex:none;color:var(--brand-700)}
.fr-piece .frp-nom{flex:1;min-width:0;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.fr-piece .frp-poids{flex:none;color:var(--ink-soft);font-size:.76rem;
  font-variant-numeric:tabular-nums}
.fr-piece .frp-x{flex:none;width:26px;height:26px;border-radius:8px;border:none;
  background:transparent;color:var(--ink-soft);cursor:pointer;display:flex;
  align-items:center;justify-content:center;padding:0}
.fr-piece .frp-x:hover{background:var(--surface);color:var(--danger)}
.fr-piece .frp-x svg{width:14px;height:14px}

/* Dans la bulle : une pièce qui s'ouvre. */
.bl-pj{display:flex;align-items:center;gap:9px;width:100%;margin:2px 0 4px;
  padding:9px 11px;border-radius:11px;cursor:pointer;font:inherit;text-align:left;
  background:var(--surface);border:1.5px solid var(--border-2);color:var(--ink);
  transition:all .14s}
.bulle.moi .bl-pj{background:rgba(255,255,255,.72)}
.bl-pj:hover{border-color:var(--brand);background:var(--brand-50)}
.bl-pj > svg{width:15px;height:15px;flex:none;color:var(--brand-700)}
.bl-pj > svg:last-child{margin-left:auto;color:var(--ink-mute)}
.bl-pj .pj-nom{min-width:0;font-weight:700;font-size:.83rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bl-pj .pj-poids{flex:none;font-size:.75rem;color:var(--ink-soft);
  font-variant-numeric:tabular-nums}

/* Une ligne de fiche partenaire qui MÈNE quelque part : le site du
   partenaire, ou son affiche à télécharger. Elle se distingue des
   lignes de simple lecture — sinon on ne sait pas qu'on peut cliquer. */
.pa-ligne.pa-lien, .pa-ligne.pa-affiche{
  width:100%;cursor:pointer;font:inherit;text-align:left;color:inherit;
  border:1.5px solid var(--border-2);border-radius:12px;padding:11px 13px;
  background:var(--surface);text-decoration:none;transition:all .14s}
.pa-ligne.pa-lien:hover, .pa-ligne.pa-affiche:hover{
  border-color:var(--brand);background:var(--brand-50)}
.pa-ligne.pa-lien svg:last-child{margin-left:auto;color:var(--ink-mute);flex:none}
.pa-ligne.pa-affiche > svg:first-child{color:var(--brand-700)}

/* ══════════ LES TITRES DE BLOC DANS LES FICHES ══════════
   « Essaye de modifier mais pas de trop gros changement » (fiche
   Étudiant), « rajoute un peu de couleur transparente mais ne t'égare
   pas, reste sobre » (fiche Contrat) — direction, 14 sept 2026.

   Le problème était toujours le même : « Situation », « Accès rapides »,
   « Financement », « Comptes rendus » avaient exactement le même poids,
   la même couleur, aucun filet. On ne savait pas où un bloc commençait.
   On ne change ni la structure ni les composants : le titre gagne un
   filet à gauche dans la teinte de la marque, une graisse de plus, et
   une ligne de séparation très diluée. Rien d'autre ne bouge. */
#page .card > h4{
  font-weight:800;
  padding:2px 0 11px 11px;
  margin-bottom:15px;
  border-left:3px solid var(--brand);
  border-bottom:1px solid var(--border);
  border-radius:2px;
}
/* Le tableau de bord garde ses propres titres : il a déjà sa mise en
   page, la doubler la déséquilibrerait. */
.dash .card > h4, .db .card > h4{border-left:none;padding-left:0;border-radius:0}

/* ══════════ CE QUI N'EST PAS ENCORE PARTI ══════════
   Un travail qu'on croit enregistré et qui ne l'est pas, c'est la
   pire chose qui puisse arriver à un campus. Le bouton n'apparaît que
   s'il y a quelque chose à dire — un voyant permanent ne se regarde
   plus — et il vire au rouge quand la perte est possible. */
.tb-btn.tb-envois{position:relative;background:var(--warn-soft);
  border-color:var(--warn);color:var(--warn-ink)}
.tb-btn.tb-envois:hover{background:var(--warn);color:#fff}
.tb-btn.tb-envois.grave{background:var(--danger-soft);border-color:var(--danger);
  color:var(--danger-ink);animation:env-bat 2s ease-in-out infinite}
.tb-btn.tb-envois.grave:hover{background:var(--danger);color:#fff}
.tb-envois-n{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;
  padding:0 4px;border-radius:99px;background:var(--danger);color:#fff;
  font-size:.66rem;font-weight:800;line-height:17px;text-align:center;
  font-variant-numeric:tabular-nums}
@keyframes env-bat{0%,100%{opacity:1}50%{opacity:.62}}
@media (prefers-reduced-motion:reduce){ .tb-btn.tb-envois.grave{animation:none} }

/* ══════════ LES MENTORATS RÉÉCRITS (direction, 15 sept 2026) ══════════ */
/* L'aide sous une question : la précision ou les exemples du document,
   en plus discret que la question elle-même. */
.fv-aide{display:block;margin:-2px 0 6px;font-size:.74rem;font-style:italic;
  color:var(--ink-soft);line-height:1.5}
/* La consigne d'équipe en tête d'un mentorat : la durée en pastille,
   le rappel que le reste du rendez-vous sert à créer du lien — un
   bandeau qui ferme le cartouche au lieu d'une boîte en pointillés. */
.fv-consigne{margin:14px -18px -16px;padding:11px 18px;
  border-top:1px solid var(--fa-beige);background:rgba(255,255,255,.6);
  border-radius:0 0 var(--r-md) var(--r-md);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fv-tete .fv-consigne p{margin:0;font-size:.78rem;color:var(--ink-soft);line-height:1.5;
  max-width:none}
.fv-duree{flex:none;display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;border-radius:99px;background:var(--brand-700);color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.fv-duree svg{width:13px;height:13px;flex:none}
/* Le rappel en ligne : ce qui a été écrit à une étape précédente,
   relu au fil du questionnaire. Même langage visuel que le bloc de
   rappel des objectifs (fond beige), mais à hauteur de question. */
.fv-rc{margin:2px 0 4px;padding:10px 12px;border-radius:10px;
  background:var(--fa-beige-clair);border:1px solid var(--fa-beige)}
.fv-rc-titre{display:block;font-size:.8rem;font-weight:800;color:var(--ink)}
.fv-rc > .fv-aide{margin:2px 0 0}
.fv-rc .fv-rappel{margin-top:8px}
.fv-rc .fv-r-vide{margin-top:6px}
/* Une partie grisée : la situation qu'elle décrit n'est pas celle de
   l'alternant (js/exclusif.js). Le bandeau reste net — on peut la
   déplier — mais les champs sont éteints. */
.fc-matiere.fx-grise{opacity:.6;filter:grayscale(.4)}
.fc-matiere.fx-grise > .fc-nom{opacity:1}
/* Une question seule grisée par js/vigilance.js (niveau vert). */
.fc-q.fx-grise{opacity:.55;filter:grayscale(.4)}
.fx-note{margin:8px 0 2px;padding:8px 11px;border-radius:8px;
  background:var(--fa-beige-clair);border:1px dashed var(--fa-beige);
  font-size:.74rem;color:var(--ink-soft);line-height:1.5}
.fp-etat.nc{background:var(--fa-beige-clair);color:var(--ink-soft);
  border-color:transparent}

/* « Tout déplier » : le geste unique de la barre d'avancement. */
.fp-tout{flex:none;display:inline-flex;align-items:center;user-select:none;
  font:inherit;font-size:.72rem;font-weight:800;cursor:pointer;
  padding:5px 12px;border-radius:99px;border:1px solid var(--fa-beige);
  background:var(--fa-beige-clair);color:var(--brand-800,var(--brand-700))}
.fp-tout:hover{background:var(--fa-beige)}
.fp-tout:focus-visible{outline:2px solid var(--brand-700);outline-offset:2px}

/* Le panneau du questionnaire reprend la largeur prévue par
   `.drawer-large` (25 % → bord droit) : la règle générale
   `body .drawer{width:…}` l'écrasait à ~640 px. */
body .drawer.drawer-large{width:auto}

/* ══════════ LA VISITE DE SÉCURISATION V2 (16 sept 2026) ══════════ */
/* Les documents à ouvrir pendant le rendez-vous, en tête du questionnaire. */
.fv-docs{margin:0 0 16px;padding:13px 16px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--fa-beige)}
.fv-docs > b{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--ink)}
.fv-docs > b svg{width:15px;height:15px;color:var(--brand-700)}
.fv-docs > p{margin:4px 0 10px;font-size:.76rem;color:var(--ink-soft)}
.fv-docs-liste{display:flex;gap:8px;flex-wrap:wrap}
.fv-docs-liste .btn{text-decoration:none}
/* La note générale sur 20 du tuteur, calculée toute seule. */
.fv-note20{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin:2px 0 14px;padding:14px 18px;border-radius:12px;
  background:var(--brand-50,var(--fa-beige-clair));border:1px solid var(--fa-beige)}
.fv-n20-valeur{font-size:2rem;font-weight:800;color:var(--brand-700);
  font-variant-numeric:tabular-nums;line-height:1}
.fv-n20-sur{font-size:.95rem;font-weight:800;color:var(--ink-soft)}
.fv-n20-detail{flex-basis:100%;font-size:.72rem;color:var(--ink-soft)}

/* ═══ UN INTERTITRE DANS UN BLOC (Théo, 18 sept 2026) ═══
   Quand un même bloc porte deux horizons — l'objectif de l'année et
   celui d'ici le prochain rendez-vous — une ligne les sépare sans
   couper le bloc en deux. */
.fv-intertitre{
  margin:18px 0 2px; padding:0 0 5px;
  border-bottom:1px solid var(--fa-beige, #E4D8BE);
  font-size:.74rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--brand-700, #A85E0B);
}
.fc-q:first-child > .fv-intertitre{margin-top:2px}

/* ═══ QUI RÉPOND À CETTE QUESTION (Théo, 18 sept 2026) ═══
   « Pour le référent uniquement », « Au tuteur » : le destinataire se
   lit d'abord, seul sur sa ligne ; la question commence en dessous. */
/* Une pastille sur sa propre ligne — la question reprend en dessous.
   `width:fit-content` garde la pastille à la largeur de son texte tout
   en restant un bloc, donc sans repli du reste de la phrase à côté. */
.fv-destinataire{
  display:block; width:fit-content; max-width:100%;
  margin:0 0 5px; padding:2px 9px;
  border-radius:999px; border:1px solid transparent;
  font-size:.68rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.6;
}

/* BLEU — le référent pose la question à l'apprenti */
.fv-dest-apprenti{
  background:var(--cyan-soft, #E3F1FB); border-color:var(--cyan, #0E86C9);
  color:var(--cyan-ink, #085E8F);
}
/* ORANGE — il la pose au tuteur */
.fv-dest-tuteur{
  background:var(--fa-beige-clair, #FFF6E2); border-color:var(--fa-orange, #F69D00);
  color:#8A5300;
}
/* VERT — on en parle à trois, autour de la table */
.fv-dest-tous{
  background:var(--teal-soft, #E2F3F5); border-color:var(--teal, #0E8C99);
  color:var(--teal-ink, #0A6B75);
}
/* VIOLET — il ne la pose pas : il la remplit lui-même */
.fv-dest-referent{
  background:var(--prune-soft, #F6E9F9); border-color:var(--prune, #A648B8);
  color:var(--prune-ink, #7B2E8A);
}


/* ═══════════════════════════════════════════════════════════════
   LA DIRECTION SUIT, LE CAMPUS TRAITE (28 sept 2026)

   Dans la boîte de la vue France, les réclamations se rangent en deux
   groupes : « Pour vous », que la direction traite, puis « Traitées
   par les campus », qu'elle suit. Un fil suivi ne porte ni bouton ni
   champ de réponse : une mention en tête, une note au pied. La
   réponse d'un campus se signe du campus, sur un fond à elle.
   ═══════════════════════════════════════════════════════════════ */
.rcl-groupe{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:12px 10px 5px}
.rcl-groupe:first-child{padding-top:4px}
.rcl-groupe b{font-size:.7rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft)}
.rcl-groupe small{font-size:.7rem;color:var(--ink-mute)}

.rcl-f-suivi{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;
  font-size:.74rem;font-weight:700;color:var(--ink-soft);background:var(--bg-2);
  border-radius:999px;padding:5px 11px;white-space:nowrap}
.rcl-f-suivi svg{width:14px;height:14px}

.rcl-f-suivi-pied{display:flex;align-items:flex-start;gap:9px;padding:12px 16px;
  border-top:1px solid var(--border-2);background:var(--bg-2);
  font-size:.79rem;line-height:1.55;color:var(--ink-soft)}
.rcl-f-suivi-pied svg{width:16px;height:16px;flex:none;margin-top:2px}

.rcl-b-dir.rcl-b-campus{background:var(--info-soft)}

/* Une idée prise en compte finit en vert, comme un remboursement payé. */
.dm.st-prise_en_compte{border-left:4px solid var(--ok)}

/* ══════════ L'ONGLET CONTRATS DE LA FICHE ÉTUDIANT (29 sept 2026) ══════════
   Le parcours en entreprise, contrat par contrat. Le contrat actuel porte
   l'orange de la marque ; les autres restent neutres. */
.kt-tete{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.kt-chiffre{flex:1 1 140px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-md);padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.kt-chiffre b{font-size:1.15rem;color:var(--ink)}
.kt-chiffre span{font-size:.75rem;color:var(--ink-soft);font-weight:600}
.kt-liste{display:flex;flex-direction:column;gap:8px}
.kt-ligne{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  transition:border-color .15s,box-shadow .15s}
.kt-ligne:hover,.kt-ligne:focus-visible{border-color:var(--border-2);box-shadow:var(--sh-sm);outline:none}
.kt-actuel{border-color:var(--brand-100);background:var(--brand-50)}
.kt-num{flex:none;width:28px;height:28px;border-radius:var(--r-full);display:grid;place-items:center;
  font-weight:700;font-size:.8rem;background:var(--bg-2);color:var(--ink-soft)}
.kt-actuel .kt-num{background:var(--brand);color:#fff}
.kt-corps{flex:1;min-width:0}
.kt-titre{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kt-ville{font-size:.78rem;color:var(--ink-mute);font-weight:600}
.kt-tag{background:var(--brand);color:#fff;border-color:var(--brand)}
.kt-dates{margin-top:3px;font-size:.84rem;color:var(--ink-2)}
.kt-duree{color:var(--ink-soft);font-weight:600}
.kt-notes{margin-top:3px;font-size:.78rem;color:var(--ink-soft)}
.kt-etat{flex:none;display:flex;align-items:center;gap:6px;color:var(--ink-mute)}
.kt-trou{display:flex;align-items:center;gap:6px;margin:0 0 0 26px;padding:2px 12px;
  border-left:2px dashed var(--border-2);font-size:.78rem;color:var(--ink-soft);font-weight:600}
@media (max-width:600px){
  .kt-ligne{flex-wrap:wrap}
  .kt-etat{width:100%;justify-content:flex-end}
}

/* ══════════ ENQUÊTES : « À ENVOYER » ET SUIVI DES TUTEURS (29 sept 2026) ══════════ */
.fet-carte.fet-enquete-carte.est-aenvoyer{background:var(--brand-50);border-color:var(--brand)}
.enq-tuteurs{display:flex;flex-direction:column;gap:6px;margin-top:12px;max-height:260px;overflow:auto}
.enq-tuteur{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.enq-tuteur small{display:block;color:var(--ink-soft);font-size:.74rem}
.enq-tuteur.a-repondu{border-color:var(--ok-soft)}
.sat-dates{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 10px;font-size:.8rem;color:var(--ink-2)}
.sat-dates span{display:inline-flex;align-items:center;gap:5px}
.sat-dates .sat-ok{color:var(--ok-ink)}
.sat-dates .sat-attente{color:var(--warn-ink)}

/* ══════════ COMMENTAIRE / OBJECTIF (29 sept 2026, 2e version) ══════════
   Choix de Théo : les OBJECTIFS en cartes (compte à rebours en gros), les
   COMMENTAIRES en fil du temps avec le champ d'écriture au-dessus. Couleurs
   de la charte : orange #F69D00 (en cours), marron #2E2017 (atteint,
   direction nationale), beiges #FBDEAA / #FFF6E2 / #F7F6F5. Le rouge du kit
   seulement pour ce qui pose problème : dépassé, non atteint. */
.ns2-titre{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:800;color:var(--ink);margin:0 0 12px}
.ns2-titre svg{width:17px;height:17px;color:#F69D00}
.ns2-titre-c{margin-top:26px;padding-top:20px;border-top:1px solid var(--border)}

/* LES CARTES DÉFILENT VERS LA DROITE (Théo, 29 sept 2026 : « pas que ça se
   mette en dessous, et tout à la même hauteur »). Une seule ligne par partie,
   des cartes de même largeur et de même hauteur ; on fait glisser la ligne. */
.ns2-objs{display:flex;align-items:stretch;gap:12px;overflow-x:auto;overflow-y:hidden;
  padding:2px 2px 12px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:#FBDEAA transparent}
.ns2-objs::-webkit-scrollbar{height:8px}
.ns2-objs::-webkit-scrollbar-thumb{background:#FBDEAA;border-radius:99px}
.ns2-objs > .ns2-obj{flex:0 0 290px;width:290px;min-width:0;scroll-snap-align:start;
  padding:10px 13px;gap:6px}
/* Une ligne d'en-tête : « pour qui » (qui s'abrège) puis le compte à rebours. */
.ns2-obj-h .ns2-pour{flex:0 1 auto;min-width:0;align-self:center}
.ns2-nat-ic{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;background:#2E2017;color:#FFF6E2}
.ns2-nat-ic svg{width:12px;height:12px}
.ns2-objs .ns2-compte{font-size:1.1rem}
.ns2-objs .ns2-obj-t{font-size:.9rem}
.ns2-obj{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--border);
  border-top:4px solid #F69D00;border-radius:0 0 14px 14px;padding:12px 14px}
.ns2-obj.ns2-depasse{border-top-color:var(--danger)}
.ns2-obj.ns2-atteint{border-top-color:#2E2017;background:#F7F6F5}
.ns2-obj.ns2-rate{border-top-color:#FBDEAA;background:#F7F6F5}
.ns2-obj-h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.ns2-compte{margin-left:auto;font-size:1.35rem;font-weight:800;color:#F69D00;line-height:1;white-space:nowrap}
.ns2-depasse .ns2-compte{font-size:.9rem;color:var(--danger)}
.ns2-etat{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:800;padding:3px 9px;
  border-radius:99px;background:#FFF6E2;color:#2E2017;border:1px solid #FBDEAA;white-space:nowrap}
.ns2-etat svg{width:12px;height:12px}
.ns2-etat-atteint{background:#2E2017;color:#FFF6E2;border-color:#2E2017}
.ns2-etat-rate{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.ns2-obj-t{margin:0;font-size:.95rem;font-weight:700;color:var(--ink);white-space:pre-wrap;line-height:1.35}
.ns2-atteint .ns2-obj-t,.ns2-rate .ns2-obj-t{color:var(--ink-2)}
.ns2-obj-m{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.8rem;color:var(--ink-soft)}
.ns2-obj-m span{display:inline-flex;align-items:center;gap:5px}
.ns2-obj-m svg{width:13px;height:13px}
.ns2-bilan{margin:0;font-size:.82rem;color:var(--ink-2);padding:8px 10px;background:var(--surface);
  border-radius:10px;border:1px solid var(--border);white-space:pre-wrap}
.ns2-gestes{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.ns2-g{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:.76rem;font-weight:700;
  padding:5px 10px;border-radius:99px;border:1px solid var(--border-2);background:var(--surface);
  color:var(--ink-2);cursor:pointer}
.ns2-g svg{width:13px;height:13px}
.ns2-g:hover{border-color:var(--ink-mute)}
.ns2-g-ok{background:#2E2017;border-color:#2E2017;color:#FFF6E2}
.ns2-g-ok:hover{border-color:#2E2017;filter:brightness(1.25)}
.ns2-g-ic{padding:5px 7px;margin-left:auto}
.ns2-ajout{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:inherit;
  font-size:.78rem;font-weight:800;color:#2E2017;background:#FFF6E2;border:1px solid #FBDEAA;
  border-radius:99px;padding:6px 12px;cursor:pointer}
.ns2-ajout:hover{border-color:#F69D00}
.ns2-ajout svg{width:14px;height:14px;color:#F69D00}
/* Au bout du titre Objectifs : le choix (sur la classe) et « Ajouter ». */
.ns2-titre-d{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ns2-titre-d .ns2-qui,.ns2-titre-d .ns2-ajout{margin-left:0}
/* Qui l'a fixé (29 sept 2026 soir) : deux groupes titrés, et les cartes de
   la direction nationale cerclées de marron. */
.ns2-groupe{display:flex;align-items:center;gap:7px;margin:4px 0 10px;font-size:.8rem;font-weight:800;
  color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
.ns2-groupe svg{width:15px;height:15px}
.ns2-objs + .ns2-groupe{margin-top:20px}
.ns2-groupe-nat{color:#2E2017}
.ns2-groupe-nat svg{color:#2E2017}
.ns2-obj.ns2-obj-nat{border:2px solid #2E2017;border-top-width:4px}
.ns2-obj.ns2-obj-nat.ns2-encours{border-top-color:#F69D00}
.ns2-obj.ns2-obj-nat.ns2-depasse{border-top-color:var(--danger)}
.ns2-pour-classe,.ns2-pour-fiche{cursor:default}
.ns2-pour.ns2-pour-fiche.ns2-pour-etudiant:hover{border-color:transparent}
.ns2-pour.ns2-pour-fiche.ns2-pour-contrat:hover{border-color:transparent}
/* LA CIBLE D'UN OBJECTIF SE VOIT (29 sept 2026 soir) : orange la classe,
   bleu un étudiant, vert une entreprise — sur le titre de sa partie, sur
   la pastille « pour qui » et sur le compteur du filtre. Teintes du kit
   (info / ok), qui suivent le mode sombre ; le fond des cartes reste blanc. */
.ns2-groupe.ns2-cible-classe{color:#B87400}
.ns2-groupe.ns2-cible-classe svg{color:#F69D00}
.ns2-groupe.ns2-cible-etudiant,.ns2-groupe.ns2-cible-etudiant svg{color:var(--info)}
.ns2-groupe.ns2-cible-contrat,.ns2-groupe.ns2-cible-contrat svg{color:var(--ok)}
.ns2-groupe b{font-weight:800;padding:1px 8px;border-radius:99px;background:var(--bg-2);color:inherit}
.ns2-groupe.ns2-cible-etudiant b{background:var(--info-soft)}
.ns2-groupe.ns2-cible-contrat b{background:var(--ok-soft)}
.ns2-groupe.ns2-cible-classe b{background:#FFF6E2}
.ns2-pour.ns2-pour-etudiant{background:var(--info-soft);color:var(--info-ink);border-color:transparent}
.ns2-pour.ns2-pour-etudiant svg{color:var(--info)}
.ns2-pour.ns2-pour-contrat{background:var(--ok-soft);color:var(--ok-ink);border-color:transparent}
.ns2-pour.ns2-pour-contrat svg{color:var(--ok)}
.ns2-pour.ns2-pour-etudiant:hover{border-color:var(--info)}
.ns2-pour.ns2-pour-contrat:hover{border-color:var(--ok)}
.ns2-qui button.ns2-q-etudiants b{color:var(--info)}
.ns2-qui button.ns2-q-entreprises b{color:var(--ok)}
.ns2-qui button.on.ns2-q-etudiants b,.ns2-qui button.on.ns2-q-entreprises b{color:#FFF6E2}
/* Sur la classe, une seule ligne : le trait du haut dit la CIBLE (orange la
   classe, bleu l'étudiant, vert l'entreprise) ; l'urgence se lit au compte
   à rebours (orange, rouge si dépassé). */
.ns2-objs > .ns2-obj.ns2-t-classe{border-top-color:#F69D00}
.ns2-objs > .ns2-obj.ns2-t-etudiant{border-top-color:var(--info)}
.ns2-objs > .ns2-obj.ns2-t-contrat{border-top-color:var(--ok)}
/* L'icône du titre « Objectifs » prend la couleur de la fiche : bleu étudiant,
   vert contrat (orange, celle de la charte, sur la classe). */
.ns2-titre-o.ns2-titre-etudiant > svg{color:var(--info)}
.ns2-titre-o.ns2-titre-contrat > svg{color:var(--ok)}
.ns2-pour.ns2-pour-classe{background:#FFF6E2;color:#2E2017;border-color:#FBDEAA}
.ns2-pour.ns2-pour-classe svg{color:#F69D00}
body[data-theme="dark"] .ns2-groupe-nat,body[data-theme="dark"] .ns2-groupe-nat svg{color:var(--ink)}
/* L'onglet de la CLASSE : le choix Tous / Étudiants / Entreprises au bout du
   titre, et sur chaque carte, pour qui est l'objectif (mène à sa fiche). */
.ns2-qui{margin-left:auto;display:inline-flex;gap:3px;padding:3px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border-2)}
.ns2-qui button{font:inherit;font-size:.76rem;font-weight:700;padding:5px 11px;border:none;border-radius:9px;
  background:none;color:var(--ink-soft);cursor:pointer}
.ns2-qui button b{margin-left:3px;color:#F69D00}
.ns2-qui button.on{background:#2E2017;color:#FFF6E2}
.ns2-qui button.on b{color:#F69D00}
.ns2-pour{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;max-width:100%;font:inherit;
  font-size:.78rem;font-weight:800;color:#2E2017;background:#FFF6E2;border:1px solid #FBDEAA;
  border-radius:99px;padding:4px 10px;cursor:pointer}
.ns2-pour svg{width:13px;height:13px;color:#F69D00;flex:none}
.ns2-pour span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ns2-pour:hover{border-color:#F69D00}
.ns2-national{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;
  background:#2E2017;color:#FFF6E2;font-size:.7rem;font-weight:800;white-space:nowrap}
.ns2-national svg{width:12px;height:12px}

.ns2-ecrire{display:flex;gap:10px;align-items:flex-end;margin:0 0 18px}
.ns2-ecrire textarea{flex:1;min-height:46px;resize:vertical}
.ns2-fil{position:relative;padding-left:26px}
.ns2-fil::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--border-2)}
.ns2-c{position:relative;margin-bottom:12px}
.ns2-c:last-child{margin-bottom:0}
.ns2-point{position:absolute;left:-26px;top:16px;width:18px;height:18px;border-radius:50%;
  background:#F69D00;border:4px solid var(--surface)}
.ns2-c-nat .ns2-point{background:#2E2017}
.ns2-c-carte{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:11px 14px}
.ns2-c-nat .ns2-c-carte{border-color:#2E2017}
.ns2-c-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.ns2-av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#FFF6E2;color:#2E2017;border:1px solid #FBDEAA;font-size:.72rem;font-weight:800;flex:none}
.ns2-av-nat{background:#2E2017;color:#FFF6E2;border-color:#2E2017}
.ns2-c-qui{display:flex;flex-direction:column;line-height:1.25}
.ns2-c-qui b{font-size:.84rem;color:var(--ink)}
.ns2-c-qui small{font-size:.74rem;color:var(--ink-mute)}
.ns2-c-t{margin:0;font-size:.9rem;color:var(--ink);white-space:pre-wrap;line-height:1.5}
.ns2-histo{margin-top:8px;font-size:.76rem}
.ns2-histo summary{cursor:pointer;color:var(--ink-mute);font-weight:700}
.ns2-v{border-left:2px solid #FBDEAA;padding:4px 0 4px 10px;margin-top:6px}
.ns2-v small{color:var(--ink-mute)}
.ns2-v p{margin:2px 0;white-space:pre-wrap;color:var(--ink-2)}
body[data-theme="dark"] .ns2-obj.ns2-atteint,body[data-theme="dark"] .ns2-obj.ns2-rate{background:var(--bg-2)}
@media (max-width:600px){
  .ns2-titre{flex-wrap:wrap}
  .ns2-qui{margin-left:0;width:100%}
  .ns2-titre-d{width:100%;justify-content:flex-start}
  .ns2-qui button{flex:1}
  .ns2-ecrire{flex-direction:column;align-items:stretch}
  .ns2-objs > .ns2-obj{flex-basis:84%}
}

/* ══════════ BOÎTE MAIL : TÉLÉPHONE ET MODE SOMBRE (29 sept 2026) ══════════
   Repérés en alignant la boîte de l'App Entreprise sur celle-ci :
   • sur téléphone, les quatre onglets poussaient la page à 542 px de large
     pour un écran de 375 px : ils défilent maintenant dans leur bloc, et la
     recherche passe dessous, sur toute la largeur ;
   • en mode sombre, l'onglet actif (fond encre, devenu clair) portait un
     texte blanc : illisible. Même correction que dans l'App Entreprise. */
@media (max-width:640px){
  .cr-barre{flex-direction:column;align-items:stretch}
  .cr-onglets{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cr-onglets::-webkit-scrollbar{display:none}
  .cr-onglet{flex:none;padding:8px 11px}
  .cr-cherche{margin-left:0;flex:1 1 auto;min-width:0}
}
body[data-theme="dark"] .cr-onglet.on{color:var(--always-dark)}
body[data-theme="dark"] .cr-onglet.on .cr-n{background:var(--bg-2);color:var(--ink)}
body[data-theme="dark"] .mail-item .mi-n{color:var(--always-dark)}

/* ══════════ EN PHYSIQUE OU PAR APPEL (29 sept 2026) ══════════
   Deux grands boutons côte à côte : on choisit d'un doigt, et le choix
   se voit (encre pleine). Le même dessin dans l'espace Entreprise. */
.mode-rdv{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mode-opt{position:relative;display:block;cursor:pointer}
.mode-opt input{position:absolute;opacity:0;pointer-events:none}
.mode-opt span{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  padding:10px 12px;border:1.5px solid var(--border-2);border-radius:12px;background:var(--surface);
  font-weight:700;font-size:.88rem;color:var(--ink-2);transition:border-color .15s,background .15s}
.mode-opt span svg{width:17px;height:17px;flex:none}
.mode-opt:hover span{border-color:var(--ink)}
.mode-opt input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.mode-opt input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}

/* ══════════ LE COMPTE RENDU GLOBAL DES ENQUÊTES, FAÇON FORMS (29 sept 2026) ══════════
   Deux sous-onglets (Entreprises / Étudiants), le choix de l'enquête,
   quatre chiffres, puis chaque question : moyenne, étoiles, une barre
   par note. Les exports Excel / PDF en tête de carte. */
.sat-barre-haut{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:14px}
.sat-barre-haut .seg-barre{margin-bottom:0}
.sat-choix{display:flex;align-items:center;gap:8px;min-width:0}
.sat-choix label{font-size:.78rem;font-weight:700;color:var(--ink-soft);flex:none}
.sat-choix .select{width:auto;max-width:360px;min-width:200px}
.sat-exports{display:flex;gap:8px;flex-wrap:wrap}
.sat-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 4px}
.sat-kpis .sat-c b{font-size:1.25rem}
.sat-fqs{display:grid;gap:10px}
.sat-fq{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t m" "d d";
  gap:10px 16px;border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;
  background:var(--surface)}
.sat-fq-t{grid-area:t;min-width:0}
.sat-fq-t b{display:block;font-size:.9rem;line-height:1.4;color:var(--ink)}
.sat-fq-t small{font-size:.74rem;color:var(--ink-mute)}
.sat-fq-m{grid-area:m;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.sat-fq-moy{font-size:1.5rem;font-weight:800;line-height:1}
.sat-fq-moy small{font-size:.8rem;color:var(--ink-mute);font-weight:700}
.sat-fq-moy.bien{color:var(--ok-ink)} .sat-fq-moy.moyen{color:var(--warn-ink)}
.sat-fq-moy.faible{color:var(--danger-ink)}
.sat-etoiles{position:relative;display:inline-block;font-size:1rem;line-height:1;letter-spacing:2px;
  color:var(--border-2);white-space:nowrap}
.sat-etoiles::before{content:'★★★★★'}
.sat-etoiles i{position:absolute;top:0;left:0;bottom:0;overflow:hidden;white-space:nowrap;
  color:var(--brand)}
.sat-etoiles i::before{content:'★★★★★'}
.sat-dist{grid-area:d;display:grid;gap:5px}
.sat-dl{display:grid;grid-template-columns:38px minmax(0,1fr) 78px;align-items:center;gap:10px}
.sat-dv{display:inline-flex;align-items:center;gap:3px;font-size:.78rem;font-weight:800;color:var(--ink-2)}
.sat-dv svg{width:12px;height:12px;color:var(--brand)}
.sat-barre{height:12px;border-radius:999px;background:var(--bg-2);overflow:hidden}
.sat-barre i{display:block;height:100%;border-radius:999px;background:var(--brand);min-width:0}
.sat-dl small{font-size:.74rem;color:var(--ink-soft);text-align:right;white-space:nowrap}
.sat-syntheses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.sat-bloc-mat{border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden}
.sat-bloc-mat > summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;background:var(--brand-50);cursor:pointer;list-style:none}
.sat-bloc-mat > summary::-webkit-details-marker{display:none}
.sat-bloc-mat > summary .sat-note{min-width:76px}
.sat-bloc-mat > .sat-fqs{padding:10px}
.sat-coms{display:grid;gap:8px}
.sat-coms .sat-com{margin:0}
.sat-coms .sat-com p{margin:0}
.sat-coms .sat-com small{display:block;margin-top:4px;font-size:.72rem;color:var(--ink-mute)}
.sat-preuves > summary{cursor:pointer;font-weight:800;font-size:.86rem;display:flex;align-items:center;gap:8px;list-style:none}
.sat-preuves > summary::-webkit-details-marker{display:none}
.sat-preuves > summary svg{width:16px;height:16px}
@media (max-width:760px){
  .sat-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sat-syntheses{grid-template-columns:1fr}
  .sat-choix{width:100%}
  .sat-choix .select{flex:1;min-width:0;max-width:none}
}
@media (max-width:480px){
  .sat-fq{grid-template-columns:1fr;grid-template-areas:"t" "m" "d"}
  .sat-fq-m{flex-direction:row;align-items:center;justify-content:space-between}
  .sat-dl{grid-template-columns:34px minmax(0,1fr) 70px}
}
.sat-barre-haut .sat-classeur{margin-left:auto}

/* ══════════ LA SATISFACTION, LE PLUS SIMPLE POSSIBLE (Théo, 29 sept 2026) ══════════
   Une carte, pas de cartes dedans. Du texte sombre, une seule couleur
   (l'orange de la charte) pour les barres et les étoiles, le rouge
   seulement pour une note sous 3. Des lignes séparées par un filet. */
.sat-rapport{padding:22px 24px}
.sat-r-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sat-r-tete h4{margin:0;font-size:1.05rem}
.sat-r-tete small{font-size:.8rem;color:var(--ink-mute)}
.sat-r-resume{display:flex;align-items:center;gap:18px;margin:18px 0 6px;padding-bottom:18px;
  border-bottom:1px solid var(--border)}
.sat-r-note{font-size:2.6rem;font-weight:800;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.sat-r-note small{font-size:1rem;color:var(--ink-mute);font-weight:700}
.sat-r-txt{display:flex;flex-direction:column;gap:6px;font-size:.92rem;color:var(--ink-2)}
.sat-r-txt .sat-etoiles{font-size:1.25rem}
.sat-titre{margin:24px 0 4px;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-mute)}
.sat-vide{margin:16px 0 4px;font-size:.9rem;color:var(--ink-soft)}
.sat-vide svg{width:15px;height:15px;vertical-align:-2px}
.sat-liste{display:flex;flex-direction:column}
.sat-ligne{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,200px) 70px;gap:16px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--border)}
.sat-ligne:last-child{border-bottom:0}
.sat-ligne-t b{display:block;font-size:.92rem;font-weight:600;line-height:1.4;color:var(--ink)}
.sat-ligne-t small{display:block;margin-top:2px;font-size:.76rem;color:var(--ink-mute)}
.sat-ligne .sat-barre{height:10px}
.sat-ligne-n{font-size:1.05rem;font-weight:800;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.sat-ligne-n small{font-size:.74rem;color:var(--ink-mute);font-weight:700}
.sat-ligne-n.bas{color:var(--danger-ink)}
.sat-deplie{border-top:1px solid var(--border)}
.sat-deplie:last-of-type{border-bottom:1px solid var(--border)}
.sat-deplie > summary{display:flex;align-items:center;gap:10px;padding:12px 0;cursor:pointer;list-style:none}
.sat-deplie > summary::-webkit-details-marker{display:none}
.sat-deplie > summary svg{width:15px;height:15px;color:var(--ink-mute);transition:transform .15s}
.sat-deplie[open] > summary svg{transform:rotate(90deg)}
.sat-deplie > summary b{flex:1;font-size:.92rem;font-weight:700}
.sat-deplie > summary span{font-size:.84rem;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.sat-deplie > .sat-liste{padding:0 0 8px 25px}
.sat-preuves{margin-top:22px}
.sat-coms{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.sat-coms li{padding:10px 0;border-bottom:1px solid var(--border);font-size:.9rem;line-height:1.5;color:var(--ink)}
.sat-coms li:last-child{border-bottom:0}
.sat-coms li small{display:block;margin-top:2px;font-size:.76rem;color:var(--ink-mute)}
/* Les notes ne sont plus des pastilles de couleur : du texte, en gras. */
.sat-note,.sat-note.bien,.sat-note.moyen,.sat-note.faible,.sat-note.vide{background:none;color:var(--ink);
  padding:0;text-align:right;font-size:.86rem}
.sat-note.faible{color:var(--danger-ink)}
.sat-note.vide{color:var(--ink-mute)}
.sat-barre-haut .seg[data-vide]{opacity:.55}
@media (max-width:640px){
  .sat-rapport{padding:18px 16px}
  .sat-ligne{grid-template-columns:minmax(0,1fr) 62px;gap:6px 12px}
  .sat-ligne-t{grid-column:1 / -1}
  .sat-r-note{font-size:2.1rem}
}
/* Dans une colonne flex, les étoiles s'étiraient sur toute la largeur :
   leur remplissage (en %) débordait alors sur les cinq. */
.sat-r-txt .sat-etoiles{align-self:flex-start}
/* « Qui a répondu » : des lignes sobres, sans fond vert. */
.sat-preuves .sat-personnes{border:0;border-radius:0}
.sat-preuves .sat-pers.a-repondu > summary{background:none}
.sat-preuves .sat-pers > summary{padding-left:0;padding-right:0}
.sat-preuves .sat-pers[open] > summary{background:none}
.sat-preuves .sat-detail{background:none;padding:0 0 12px}
@media (max-width:640px){ .sat-preuves > summary span{display:none} }
.sat-resume .sat-gros{color:var(--ink)}

/* ── L'enquête à envoyer, en tête de l'onglet Satisfaction (29 sept 2026) ──
   Le seul encadré orange de la page : c'est ce qu'il y a à faire. */
.sat-aenvoyer{border:2px solid var(--brand);padding:16px 20px;margin-bottom:16px}
.sat-ae-tete{display:flex;align-items:center;gap:9px;font-size:1rem;margin-bottom:6px}
.sat-ae-tete svg{width:18px;height:18px;color:var(--brand)}
.sat-ae-l{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;
  border-top:1px solid var(--border)}
.sat-ae-l:first-of-type{border-top:0}
.sat-ae-l b{display:block;font-size:.92rem}
.sat-ae-l small{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:2px}
.sat-ae-l .btn{flex:none}
.sat-ae-aide{margin:6px 0 0;font-size:.78rem;color:var(--ink-mute)}
.sat-prochaine{margin:0 0 14px;font-size:.86rem;color:var(--ink-soft)}
.sat-prochaine svg{width:15px;height:15px;vertical-align:-2px}
@media (max-width:560px){ .sat-ae-l{flex-direction:column;align-items:stretch} }
/* Une mission faite le dit, en une ligne, avant son détail (29 sept 2026). */
.mi-fait{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:.86rem;font-weight:700;color:var(--ok-ink)}
.mi-fait svg{width:16px;height:16px;flex:none}

/* ── Une réclamation réglée, réduite à une ligne (29 sept 2026) ──
   Le titre et « Réglée » ; un clic déplie l'échange et la solution. */
details.rc-carte.rc-close{opacity:1}
details.rc-carte.rc-close > summary.rc-tete{list-style:none;cursor:pointer;align-items:center;padding:12px 16px}
details.rc-carte.rc-close > summary.rc-tete::-webkit-details-marker{display:none}
details.rc-carte.rc-close > summary .rc-titres small{display:none}
details.rc-carte.rc-close[open] > summary .rc-titres small{display:block}
details.rc-carte.rc-close > summary .rc-delai{display:flex;align-items:center;gap:8px}
.rc-deplier{display:inline-flex;color:var(--ink-mute)}
.rc-deplier svg{width:16px;height:16px;transition:transform .15s}
details.rc-carte.rc-close[open] .rc-deplier svg{transform:rotate(180deg)}
details.rc-carte.rc-close:not([open]) .rc-icone{width:28px;height:28px}
details.rc-carte.rc-close:not([open]) > summary.rc-tete{border-bottom:0}

/* ══════════ LE PLANNING QUI DÉFILE (29 sept 2026) ══════════
   Comme l'agenda de l'App Entreprise : la grille est une fenêtre de trois
   semaines (une sur téléphone) qui défile ; la ligne LUN MAR MER… reste
   collée en haut. */
.plc-ruban{position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  grid-auto-rows:max-content;align-content:start;scrollbar-width:thin;
  scrollbar-color:var(--border-2) transparent;padding-bottom:4px}
.plc-ruban .plc-jn{position:sticky;top:0;z-index:2;background:var(--surface)}
#edt-retour[hidden]{display:none}
/* La fin du planning de l'année : une ligne, sous la dernière semaine. */
.plc-fin{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 8px 6px;font-size:.8rem;font-weight:700;color:var(--ink-mute)}
.plc-fin svg{width:15px;height:15px}

/* ══════════════════════════════════════════════════════════════
   L'ARBRE DE NOTION (30 sept 2026, « le même rendu exact »).
   Une sous-page = une LIGNE (icône + titre souligné), comme dans
   Notion ; une base garde sa forme : galerie de cartes ou liste.
   Le fil en haut de la page dit où l'on est.
   ══════════════════════════════════════════════════════════════ */
.nt-page-ligne{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:2px 0}
.nt-page-ligne .nt-page{display:inline-flex;align-items:center;gap:8px;margin:0;padding:3px 6px 3px 2px;
  border:0;border-radius:6px;background:none;max-width:100%;color:var(--ink)}
.nt-page-ligne a.nt-page:hover{background:var(--bg-2);border:0}
.nt-page-titre{font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--border-2)}
.nt-cache{opacity:.55}
.nt-cache-badge{font-size:.68rem;font-weight:700;color:var(--ink-mute);background:var(--bg-2);
  border-radius:999px;padding:2px 8px;white-space:nowrap}

.nt-base{margin:20px 0}
.nt-base-titre{font-weight:700;font-size:.95rem;margin:0 0 10px;padding-bottom:6px;
  border-bottom:1px solid var(--border-2)}
.nt-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.nt-gal-small{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.nt-gal-large{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.nt-carte{display:flex;flex-direction:column;border:1px solid var(--border-2);border-radius:10px;
  overflow:hidden;background:var(--surface);box-shadow:0 1px 2px rgba(15,15,15,.06);
  transition:background .12s,box-shadow .12s}
.nt-carte.nt-lien,.nt-base-ligne.nt-lien{color:var(--ink);text-decoration:none}
.nt-carte:hover{background:var(--bg-2);box-shadow:0 3px 10px rgba(15,15,15,.1)}
.nt-carte-couv{aspect-ratio:16/10;background:var(--bg-2);overflow:hidden;border-bottom:1px solid var(--border)}
.nt-gal-small .nt-carte-couv{aspect-ratio:16/9}
.nt-gal-large .nt-carte-couv{aspect-ratio:4/3}
.nt-carte-couv img{display:block;width:100%;height:100%;object-fit:cover}
.nt-galerie.ajuste .nt-carte-couv img{object-fit:contain}
.nt-carte-couv .nt-attente{height:100%;min-height:0;padding:0;border-radius:0}
.nt-carte-nom{display:flex;align-items:flex-start;gap:6px;padding:10px 12px;font-weight:600;
  font-size:.9rem;line-height:1.35}
.nt-carte-ic{flex:none}
.nt-galerie.sans-couv .nt-carte-nom{padding:14px}
.nt-carte .nt-cache-badge{margin:0 12px 10px;align-self:flex-start}
.nt-base-liste{display:flex;flex-direction:column}
.nt-base-ligne{display:flex;align-items:center;gap:8px;padding:6px;border-bottom:1px solid var(--border);
  border-radius:4px}
.nt-base-ligne:hover{background:var(--bg-2)}
.nt-base-ligne .nt-cache-badge{margin-left:auto}
.nt-base-liste.tableau{border:1px solid var(--border-2);border-radius:8px;overflow:hidden}
.nt-base-liste.tableau .nt-base-ligne{border-radius:0;padding:8px 10px}
.nt-base-liste.tableau .nt-base-ligne:last-child{border-bottom:0}

/* La couverture d'une page, pleine largeur en haut de la feuille, et son
   icône posée à cheval, comme dans Notion. */
.ntp-couv{height:210px;margin:-44px calc(-1 * clamp(22px,5vw,76px)) 0;background:var(--bg-2);
  overflow:hidden;border-radius:17px 17px 0 0}
.ntp-couv img{display:block;width:100%;height:100%;object-fit:cover}
.ntp-couv .nt-attente{height:100%;min-height:0;border-radius:0}
.ntp-couv + .ntp-ic{margin-top:-34px;position:relative}
.ntp-couv + .ntp-titre{margin-top:26px}
@media(max-width:720px){.ntp-couv{height:140px;margin:-24px -18px 0}}

/* Le fil : d'où vient la page ouverte. */
.prc-fil{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:.84rem;color:var(--ink-mute);min-width:0}
.prc-fil button{font:inherit;border:0;background:none;color:var(--ink-soft);cursor:pointer;
  padding:3px 6px;border-radius:6px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prc-fil button:hover{background:var(--bg-2);color:var(--ink)}
.prc-fil .prc-fil-sep{color:var(--border-2)}
.prc-fil b{color:var(--ink);font-weight:600;padding:3px 6px;max-width:320px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.prs-chemin{display:block;font-size:.74rem;color:var(--ink-mute);font-weight:500;margin-top:2px}
/* Une vue regroupée : le nom du groupe au-dessus de ses cartes. */
.nt-groupe{display:flex;align-items:baseline;gap:8px;margin:18px 0 10px;font-weight:700;font-size:.9rem}
.nt-groupe small{color:var(--ink-mute);font-weight:600}
.nt-base .nt-groupe:first-of-type{margin-top:4px}
/* L'accueil des process = l'annuaire : les pôles, puis les fiches contact. */
.prc-accueil{margin-top:6px}
.prc-section{margin:10px 0 34px}
.prc-section-titre{font-size:1.2rem;font-weight:800;letter-spacing:-.01em;margin:0 0 14px}
.prc-section .nt-base{margin-top:0}
.prc-section .nt-page-ligne{margin:0 0 12px}

/* L'entreprise demande à décaler une visite planifiée (30 sept 2026) :
   la demande, dans le panneau de l'étape, avant le rappel de la date. */
.fep-note-alerte{color:var(--warn-ink);background:var(--warn-soft)}
/* Ce que Notion ne partage pas avec l'app : visible, avec un cadenas. */
.nt-verrou .nt-page{color:var(--ink-soft)}
.nt-verrou small{font-size:.72rem;color:var(--ink-mute);font-weight:600;margin-left:4px}
.fep-bande .fb-txt small strong.fb-demande{font-weight:800;color:var(--warn-ink)}

/* ── LA DEMANDE DE L'ENTREPRISE, EN BANDEAU (30 sept 2026) ──
   La forme du bandeau des réclamations ; la raison se lit en entier. */
.dm-bandeau > svg{color:var(--warn-ink)}
.dm-bandeau .rc-b-texte small{white-space:normal}
.dm-bandeau .rc-b-texte small.dm-raison{font-style:italic;color:var(--ink-2)}

/* ── CLIQUER POUR COMPRENDRE (30 sept 2026) ──
   Le texte du bandeau d'une demande s'ouvre ; la petite fenêtre : les
   dates, la raison en entier, le délai. Même dessin que dans l'App
   Entreprise. */
.dm-clic{cursor:pointer;border-radius:8px}
.dm-clic:hover b{text-decoration:underline;text-underline-offset:3px}
.dm-clic:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.dm-bandeau .rc-b-texte small.dm-raison{text-decoration:underline dotted;text-underline-offset:3px}
.pp-fiche{display:flex;flex-direction:column;gap:2px;border:1px solid var(--border);border-radius:12px;padding:6px 12px}
.pp-ligne{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.pp-ligne:last-child{border-bottom:none}
.pp-ligne svg{width:15px;height:15px;flex:none;color:var(--ink-mute)}
.pp-ligne small{display:block;font-size:.72rem;color:var(--ink-soft)}
.pp-ligne b{display:block;font-size:.9rem}
.pp-raison{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--brand-50);border:1px solid var(--brand-100)}
.pp-raison small{display:block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--brand-700)}
.pp-raison p{margin-top:6px;font-size:.95rem;line-height:1.55;color:var(--ink)}
.pp-raison em{display:block;margin-top:6px;font-size:.74rem;color:var(--ink-soft);font-style:normal}
.pp-delai{display:flex;align-items:center;gap:10px;margin-top:12px}
.pp-delai small{font-size:.76rem;color:var(--ink-soft)}
.dm-raison-lien{text-decoration:underline dotted;text-underline-offset:3px}

/* ── LE BANDEAU D'UNE DEMANDE DE L'ENTREPRISE, REDESSINÉ (30 sept 2026) ──
   Carte blanche liserée d'orange ; en tête le titre et le délai ; dessous
   le changement en deux pastilles (Prévue barrée → Souhaitée), la raison
   cliquable, et les deux gestes. Tout se replie proprement sous 720 px. */
.dm2{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--brand);
  border-radius:14px;padding:14px 16px;margin-bottom:14px;box-shadow:var(--sh-sm)}
.dm2-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dm2-ic{width:32px;height:32px;border-radius:10px;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--brand-50);color:var(--brand-700)}
.dm2-ic svg{width:16px;height:16px}
.dm2-titre{flex:1;min-width:0;font-size:.95rem;font-weight:800;color:var(--ink)}
.dm2-corps{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;padding-left:42px}
.dm2-dates{display:flex;align-items:center;gap:8px;flex:none}
.dm2-date{display:flex;flex-direction:column;padding:6px 11px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface-2);line-height:1.25}
.dm2-date small{font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;color:var(--ink-mute)}
.dm2-date b{font-size:.86rem;white-space:nowrap;color:var(--ink)}
.dm2-date em{font-style:normal;font-size:.76rem;color:var(--ink-soft)}
.dm2-date.avant b,.dm2-date.avant em{text-decoration:line-through;color:var(--ink-mute)}
.dm2-date.apres{background:var(--brand-50);border-color:var(--brand-100)}
.dm2-date.apres small{color:var(--brand-700)}
.dm2-fleche{display:flex}
.dm2-fleche svg{width:16px;height:16px;color:var(--brand)}
.dm2-raison{flex:1;min-width:160px;display:flex;flex-direction:column;gap:3px;text-align:left;
  background:none;border:none;padding:2px 0;font:inherit;cursor:pointer;color:inherit}
.dm2-raison span{font-style:italic;font-size:.86rem;color:var(--ink-2);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dm2-raison small{display:inline-flex;align-items:center;gap:2px;font-size:.74rem;font-weight:800;color:var(--brand-700)}
.dm2-raison small svg{width:12px;height:12px}
.dm2-raison:hover span,.dm2-raison:focus-visible span{text-decoration:underline dotted;text-underline-offset:3px}
.dm2-raison:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.dm2-raison.dm2-sans{cursor:default;font-size:.82rem;color:var(--ink-mute)}
.dm2-act{display:flex;gap:8px;flex-wrap:wrap;flex:none;margin-left:auto}
.dm2-retard{border-left-color:var(--danger)}
.dm2-retard .dm2-ic{background:var(--danger-soft);color:var(--danger-ink)}
@media (max-width:720px){
  .dm2-corps{padding-left:0}
  .dm2-act{margin-left:0;width:100%}
  .dm2-act .btn{flex:1}
}
/* La petite fenêtre : la raison seule, en grand. */
.pp-raison.pp-raison-seule{margin-top:0}
.pp-raison.pp-raison-seule p{margin-top:0;font-size:1rem}

/* Retouches du 30 sept 2026 (Théo) : les mini-cartes sous l'icône, la
   raison écrite sur une ligne (« … » si trop longue) ; dans la fenêtre,
   les deux mini-cartes au-dessus de la raison. */
.dm2-corps{padding-left:0}
.dm2-raison{justify-content:center}
.dm2-raison span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset}
.dm2-raison:hover span{text-decoration:underline dotted;text-underline-offset:3px}
.modal .dm2-dates{margin-bottom:14px}
/* Tout le bandeau s'ouvre (30 sept 2026). */
.dm2[role="button"]{cursor:pointer;transition:box-shadow .15s,border-color .15s}
.dm2[role="button"]:hover{box-shadow:var(--sh-md, 0 6px 18px rgba(46,32,23,.10))}
.dm2[role="button"]:hover .dm2-titre{text-decoration:underline;text-underline-offset:3px}
.dm2[role="button"]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.dm2 .dm2-act{cursor:default}

/* ════════ Accès entreprises (Théo, 30 sept 2026) ════════
   Maquette v4 : compteurs = filtres, recherche, tri, une carte par
   établissement, une ligne par tuteur. Tout se replie par la LARGEUR DE
   LA PAGE (@container), jamais rien qui dépasse. */
.ae{display:grid;gap:14px;container-type:inline-size;min-width:0}
.ae-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ae-tete .h1{flex:1 1 220px;min-width:0;margin:0}
.ae-tete .btn{white-space:nowrap}
.ae-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ae-stat{border:1.5px solid var(--border);background:var(--surface);border-radius:14px;padding:10px 12px;text-align:left;
  display:grid;gap:2px;min-width:0;cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s}
.ae-stat:hover{border-color:var(--border-2)}
.ae-stat.on{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
.ae-stat small{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ae-stat b{font-size:1.45rem;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.ae-stat i{font-style:normal;font-size:.72rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ae-stat.s-ouvert b{color:var(--ok)}
.ae-stat.s-invite b{color:var(--brand-700)}
.ae-stat.s-regler b{color:var(--danger)}
.ae-outils{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ae-cherche{flex:1 1 240px;min-width:0;display:flex;align-items:center;gap:8px;border:1.5px solid var(--border-2);border-radius:12px;
  background:var(--surface);padding:0 12px;height:40px;cursor:text}
.ae-cherche:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.ae-cherche svg{width:16px;height:16px;flex:none;color:var(--ink-mute)}
.ae-cherche input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:.86rem;color:var(--ink)}
.ae-tri{display:inline-flex;border:1.5px solid var(--border);border-radius:12px;padding:3px;background:var(--surface);gap:3px;flex:none;max-width:100%}
.ae-tri button{border:0;background:transparent;border-radius:9px;padding:7px 11px;font:inherit;font-size:.76rem;font-weight:700;
  color:var(--ink-2);white-space:nowrap;cursor:pointer}
.ae-tri button.on{background:var(--ink);color:var(--surface)}
.ae-compte{font-size:.76rem;color:var(--ink-soft);flex:1 1 100%;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ae-retirer{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0;font:inherit;font-size:.74rem;
  font-weight:700;color:var(--brand-700);cursor:pointer}
.ae-retirer svg{width:12px;height:12px}
.ae-liste{display:grid;gap:12px;min-width:0}
.ae-ent{border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;min-width:0}
.ae-ent-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.ae-ent-t b{font-size:.92rem;min-width:0;overflow-wrap:anywhere}
.ae-ent-t small{font-size:.74rem;color:var(--ink-soft)}
.ae-ent-t .compte{margin-left:auto;font-size:.72rem;color:var(--ink-soft);white-space:nowrap}
.ae-row{display:grid;grid-template-columns:36px minmax(0,1fr) minmax(0,1.25fr) 150px 150px;
  grid-template-areas:"av qui alts etat act";gap:6px 12px;align-items:center;padding:11px 14px}
.ae-row + .ae-row{border-top:1px solid var(--border)}
.ae-av{grid-area:av;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:.74rem;font-weight:800;
  background:#FBDEAA;color:#2E2017;flex:none}
.ae-av.vide{background:var(--surface-2);color:var(--ink-mute);border:1.5px dashed var(--border-2)}
.ae-av.grand{width:52px;height:52px;font-size:1rem}
.ae-qui{grid-area:qui;min-width:0}
.ae-qui button,.ae-qui span.nom{display:block;max-width:100%;border:0;background:none;padding:0;text-align:left;font:inherit;
  font-weight:800;font-size:.88rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ae-qui button{cursor:pointer}
.ae-qui button:hover{text-decoration:underline;text-underline-offset:3px}
.ae-qui small{display:block;font-size:.74rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ae-alts{grid-area:alts;display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.ae-alt{display:inline-flex;align-items:center;max-width:100%;font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--ink-2);min-width:0}
.ae-alt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ae-alt.nouveau{background:var(--brand-50);border-color:transparent;color:var(--brand-800)}
.ae-etat{grid-area:etat;justify-self:start;min-width:0}
.ae-pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;padding:4px 10px;border-radius:999px;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ae-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.p-ouvert{background:var(--ok-soft);color:var(--ok-ink)}
.p-invite{background:var(--brand-50);color:var(--brand-800)}
.p-jamais{background:var(--bg-2);color:var(--ink-2)}
.p-regler{background:var(--danger-soft);color:var(--danger-ink)}
.ae-quand{display:block;font-size:.7rem;color:var(--ink-soft);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ae-quand.refus{color:var(--danger-ink);cursor:help}
.ae-act{grid-area:act;justify-self:stretch;min-width:0}
.ae-act .btn{white-space:nowrap;width:100%;justify-content:center}
.ae-vide{padding:26px 14px;text-align:center;color:var(--ink-soft);font-size:.86rem;border:1.5px dashed var(--border-2);border-radius:14px}
.ae-exp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border:1px solid var(--border);border-radius:16px;
  background:var(--surface);padding:14px}
.ae-exp div{min-width:0}
.ae-exp .n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#2E2017;
  font-size:.72rem;font-weight:900}
.ae-exp b{display:block;font-size:.82rem;margin:6px 0 2px}
.ae-exp span{display:block;font-size:.76rem;color:var(--ink-2);line-height:1.45}
@container (max-width:760px){ .ae-exp{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container (max-width:640px){ .ae-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* moyenne largeur : l'état en haut à droite, le geste sous lui */
@container (max-width:860px){
  .ae-row{grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"av qui etat" ". alts act";gap:8px 12px}
  .ae-etat{justify-self:end;text-align:right}
  .ae-act{justify-self:end;align-self:start}
  .ae-act .btn{width:auto}
}
/* téléphone : tout en colonne, le geste sur toute la largeur */
@container (max-width:520px){
  .ae-tete .btn{flex:1 1 auto}
  .ae-tri{width:100%}
  .ae-tri button{flex:1}
  .ae-exp{grid-template-columns:minmax(0,1fr)}
  .ae-row{grid-template-columns:32px minmax(0,1fr);grid-template-areas:"av qui" ". etat" ". alts" ". act";padding:11px 12px}
  .ae-etat{justify-self:start;text-align:left}
  .ae-av{width:32px;height:32px}
  .ae-act{justify-self:stretch}
  .ae-act .btn{width:100%}
  .ae-ent-t .compte{margin-left:0;flex-basis:100%}
}

/* le compte d'un tuteur */
.ae-carte-compte{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0}
.ae-qui-grand{flex:1 1 220px;min-width:0}
.ae-qui-grand .h2{overflow-wrap:anywhere}
.ae-sous{font-size:.8rem;color:var(--ink-soft);overflow-wrap:anywhere;margin-top:2px}
.ae-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.ae-chips .ae-quand{margin-top:0}
.ae-act-compte{flex:none}
.ae-titre-bloc{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.92rem;margin-bottom:10px}
.ae-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--bg-2);
  font-size:.72rem;font-weight:800;color:var(--ink-2)}
.ae-suivis{display:grid;gap:8px}
.ae-suivi{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--border);border-radius:12px;padding:10px 12px;min-width:0}
.ae-suivi-t{flex:1 1 200px;min-width:0}
.ae-suivi-t b{display:block;font-size:.88rem;overflow-wrap:anywhere}
.ae-suivi-t small{display:block;font-size:.74rem;color:var(--ink-soft);overflow-wrap:anywhere}
.ae-suivi-act{display:flex;gap:6px;flex-wrap:wrap}
.ae-quitte{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-color:color-mix(in srgb,var(--brand) 40%,var(--border))}
.ae-quitte b{font-size:.88rem}
@container (max-width:520px){
  .ae-suivi-act,.ae-suivi-act .btn,.ae-act-compte,.ae-act-compte .btn,.ae-quitte .btn{width:100%}
  .ae-suivi-act .btn{flex:1}
}

/* les fenêtres */
.ae-modal-p{font-size:.9rem;color:var(--ink-2);line-height:1.55;margin:0}
.ae-envoi{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;
  padding:10px 12px;margin-bottom:12px;min-width:0}
.ae-envoi div{min-width:0}
.ae-envoi b{display:block;font-size:.9rem}
.ae-envoi small{display:block;font-size:.8rem;color:var(--ink-soft);overflow-wrap:anywhere}
.ae-apercu{display:grid;gap:6px;max-height:min(46vh,360px);overflow:auto;padding-right:2px}
.ae-apercu div{border:1px solid var(--border);border-radius:10px;padding:8px 10px;min-width:0}
.ae-apercu b{display:block;font-size:.84rem;overflow-wrap:anywhere}
.ae-apercu small{display:block;font-size:.74rem;color:var(--ink-soft);overflow-wrap:anywhere}
.ae-refus{display:flex;gap:8px;align-items:flex-start;font-size:.86rem;color:var(--ink-2);margin:0 0 8px}
.ae-refus svg{width:16px;height:16px;flex:none;color:var(--danger);margin-top:2px}
.ae-personnes{display:grid;gap:8px;max-height:min(44vh,340px);overflow:auto;padding:2px}
.ae-choix{display:flex;align-items:center;gap:10px;width:100%;border:1.5px solid var(--border);border-radius:12px;padding:9px 12px;
  background:var(--surface);text-align:left;font:inherit;color:inherit;cursor:pointer;min-width:0}
.ae-choix:hover{border-color:var(--border-2)}
.ae-choix.on{border-color:var(--brand);background:var(--brand-50)}
.ae-choix .ae-av{width:32px;height:32px;font-size:.7rem}
.ae-choix-t{flex:1;min-width:0}
.ae-choix-t b{display:block;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ae-choix-t small{display:block;font-size:.74rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ae-rond{width:18px;height:18px;border-radius:50%;border:2px solid var(--border-2);flex:none;display:grid;place-items:center}
.ae-choix.on .ae-rond{border-color:var(--brand)}
.ae-choix.on .ae-rond::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand)}
.ae-nouvelle{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border-2)}
@media (max-width:480px){ .ae-choix .ae-pill{display:none} }

/* sur la fiche contrat, sous les référents */
.acces-k{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px}
.acces-k:empty{display:none}
.acces-k .ae-pill{max-width:100%}

/* « Confier à un autre tuteur » : la personne d'aujourd'hui, une recherche,
   les tuteurs de la boutique puis ceux du campus (30 sept 2026). */
.ae-cf-actuel{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;padding:9px 12px;margin-bottom:10px;min-width:0}
.ae-cf-actuel span{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.ae-cf-actuel b{font-size:.88rem;overflow-wrap:anywhere}
.ae-cf-actuel small{font-size:.76rem;color:var(--ink-soft);overflow-wrap:anywhere}
.ae-cf-cherche{flex:none;width:100%;margin-bottom:10px}
.ae-cf-groupe{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin:8px 2px 0}
.ae-cf-groupe:first-child{margin-top:0}
.ae-cf-rien{font-size:.84rem;color:var(--ink-soft);margin:6px 2px}
.ae-choix .ae-pill{flex:none}

/* Glisser un alternant d'un tuteur à l'autre, dans la carte d'une
   entreprise (30 sept 2026). La pastille se prend, les lignes qui peuvent
   la recevoir s'allument, celle qu'on survole passe en orange. */
button.ae-alt{font:inherit;font-size:.74rem;font-weight:700;cursor:grab;text-align:left;
  transition:border-color .12s,background .12s,box-shadow .12s}
button.ae-alt:hover,button.ae-alt:focus-visible{border-color:var(--brand);color:var(--ink);outline:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
button.ae-alt:active{cursor:grabbing}
button.ae-alt.ae-part{opacity:.45}
.ae-glisse .ae-row{transition:background .12s,box-shadow .12s}
.ae-row.ae-cible{background:color-mix(in srgb,var(--brand) 6%,var(--surface));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 45%,transparent)}
.ae-row.ae-survol{background:var(--brand-50);box-shadow:inset 0 0 0 2px var(--brand)}
/* le petit menu d'une pastille */
.pop button.pop-item{width:100%;border:0;background:none;font:inherit;font-size:.86rem;font-weight:600;text-align:left}
.pop button.pop-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.pop button.pop-item:hover{background:var(--surface-2)}
/* la confirmation : aujourd'hui → désormais */
.ae-dep{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:10px}
.ae-dep-c{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--surface-2);min-width:0}
.ae-dep-c.on{border-color:var(--brand);background:var(--brand-50)}
.ae-dep-c span{display:block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.ae-dep-c b{display:block;font-size:.9rem;margin-top:2px;overflow-wrap:anywhere}
.ae-dep-c small{display:block;font-size:.74rem;color:var(--ink-soft);overflow-wrap:anywhere}
.ae-dep-f{display:grid;place-items:center;color:var(--brand-700)}
.ae-dep-f svg{width:18px;height:18px}
.ae-dep-note{font-size:.78rem;color:var(--ink-soft);margin:10px 0 0}
@media (max-width:480px){
  .ae-dep{grid-template-columns:minmax(0,1fr)}
  .ae-dep-f{transform:rotate(90deg)}
}

/* Comment ça marche : cinq étapes, les deux premières à faire à chaque
   fois ; les familles d'établissements ; glisser partout (30 sept 2026). */
.ae-exp{grid-template-columns:repeat(5,minmax(0,1fr))}
.ae-exp div.fort{background:var(--brand-50);border-radius:12px;padding:10px;margin:-4px 0}
@container (max-width:1000px){ .ae-exp{grid-template-columns:repeat(2,minmax(0,1fr))} .ae-exp div.fort{margin:0} }
@container (max-width:440px){ .ae-exp{grid-template-columns:minmax(0,1fr)} }
.ae-famille{display:grid;gap:8px;border:1.5px dashed color-mix(in srgb,var(--brand) 45%,var(--border));border-radius:18px;
  padding:8px;background:color-mix(in srgb,var(--brand) 4%,transparent);min-width:0}
.ae-famille-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 6px;min-width:0}
.ae-famille-t svg{width:15px;height:15px;color:var(--brand-700);flex:none}
.ae-famille-t b{font-size:.78rem;font-weight:800;color:var(--brand-800);overflow-wrap:anywhere}
.ae-famille-t small{font-size:.72rem;color:var(--ink-soft)}
.ae-row.ae-cible.ae-loin{background:transparent;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 22%,transparent)}
.ae-row.ae-cible.ae-loin.ae-survol{background:var(--brand-50);box-shadow:inset 0 0 0 2px var(--brand)}
.pop button.pop-item span small.pop-ou{display:block;font-size:.72rem;font-weight:600;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis}
.ae-dep-note{display:flex;gap:8px;align-items:flex-start}
.ae-dep-note svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--brand-700)}
.ae-dep-note.loin{color:var(--danger-ink)}
.ae-dep-note.loin svg{color:var(--danger)}

/* Le tuteur qui garde son accès sans alternant en cours (30 sept 2026) :
   une ligne plus discrète, qui reste une cible pour le glisser. */
.ae-row-vide .ae-av{background:var(--bg-2);color:var(--ink-2)}
.ae-alt-vide{font-size:.76rem;font-style:italic;color:var(--ink-soft);padding:3px 2px}
.ae-glisse .ae-row-vide.ae-cible .ae-alt-vide{color:var(--brand-800);font-style:normal;font-weight:700}

/* Un alternant « parti » chez son nouveau tuteur : son contrat Galia en
   petit dans la pastille ; les tuteurs sans alternant, en bas (30 sept 2026). */
.ae-alt .ae-venu{display:inline;font-size:.66rem;font-weight:600;color:var(--ink-soft);margin-left:6px;white-space:nowrap}
.ae-alt.nouveau .ae-venu{color:var(--brand-800)}
.ae-sans{border:1px dashed var(--border-2);border-radius:16px;background:var(--surface);overflow:hidden;min-width:0;margin-top:6px}
.ae-sans-t{display:flex;align-items:center;gap:8px;width:100%;border:0;background:var(--surface-2);padding:11px 14px;font:inherit;
  color:var(--ink);cursor:pointer;text-align:left}
.ae-sans-t svg{width:15px;height:15px;color:var(--ink-soft);transition:transform .15s}
.ae-sans.ouvert .ae-sans-t svg{transform:rotate(90deg)}
.ae-sans-t b{font-size:.88rem;font-weight:800}
.ae-sans-t i{font-style:normal;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--bg-2);font-size:.72rem;font-weight:800;color:var(--ink-2)}
.ae-sans-l{display:none;border-top:1px solid var(--border)}
.ae-sans.ouvert .ae-sans-l{display:block}

/* « Déplacer … vers » au clic, et la barre du bas pendant le glisser
   (30 sept 2026). */
.ae-menu{width:min(320px,calc(100vw - 24px))}
.ae-menu .pop-head{text-transform:none;letter-spacing:0;font-size:.8rem;color:var(--ink);font-weight:800;padding:12px 14px 6px}
.ae-menu-l{max-height:min(52vh,380px);overflow:auto}
.pop-sous{padding:8px 14px 2px;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute)}
.ae-menu .pop-item{padding:8px 14px}
.ae-menu .pop-item span{display:block;min-width:0}
.ae-menu .pop-item b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.ae-alt{cursor:pointer}
button.ae-alt:active{cursor:grabbing}
.ae-dock{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:620;width:min(920px,calc(100vw - 32px));
  background:var(--surface);border:1.5px solid var(--brand);border-radius:18px;box-shadow:var(--sh-xl);padding:10px 12px;
  display:grid;gap:8px;animation:popIn .2s var(--spring)}
.ae-dock-t{display:flex;align-items:center;gap:8px;min-width:0}
.ae-dock-t svg{width:15px;height:15px;color:var(--brand-700)}
.ae-dock-t b{font-size:.82rem;font-weight:800}
.ae-dock-t small{font-size:.74rem;color:var(--ink-soft)}
.ae-dock-l{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.ae-dock-p{flex:none;min-width:150px;max-width:220px;border:1.5px dashed var(--border-2);border-radius:12px;padding:8px 10px;
  background:var(--surface-2);transition:border-color .12s,background .12s}
.ae-dock-p b{display:block;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.ae-dock-p small{display:block;font-size:.7rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.ae-dock-p.ae-survol{border-style:solid;border-color:var(--brand);background:var(--brand-50)}

/* Fiche contrat : l'état de l'accès, en pastille à droite des dates ;
   « Modifier les accès » est en haut à droite (30 sept 2026). */
.acces-k{display:inline-flex;align-items:center;margin-top:0;gap:0}
.acces-k:empty{display:none}
.acces-k-pill{border:0;font:inherit;font-size:.72rem;font-weight:800;cursor:pointer;line-height:1.2}
.acces-k-pill:hover{filter:brightness(.97);text-decoration:underline;text-underline-offset:2px}
.acces-k-pill:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* L'envoi automatique des invitations (30 sept 2026) */
.ae-auto{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1.5px solid var(--border-2);background:var(--surface);
  color:var(--ink-2);font-weight:700}
.ae-auto svg{width:14px;height:14px}
.ae-auto.on{border-color:transparent;background:var(--ok-soft);color:var(--ok-ink)}
.ae-auto-lu{font-size:.78rem;padding:6px 11px;border-radius:10px}
.ae-quand.relance{color:var(--warn-ink);font-weight:700}

/* ══════════ LE FINANCEMENT, REFAIT POUR SE LIRE (30 sept 2026) ══════════
   Mêmes formes partout : la fenêtre de saisie, la fiche contrat, l'onglet
   Contrats de l'étudiant et « Suivi & financements ». Une année = un bloc
   « Année 1 / Année 2 » ; une échéance prévisionnelle = pastille beige ;
   le reste à charge = gris (à facturer), beige (facturé), marron (perçu) ;
   ce qui ne rentrera pas = barré ; le rouge ne sert qu'au perdu. */

/* — La bande de chiffres sous le profil du contrat — */
.fk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:20px;
  border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
.fk-c{padding:14px 16px;border-left:1px solid var(--border);min-width:0}
.fk-c:first-child{border-left:0}
.fk-l{display:block;font-size:.72rem;font-weight:700;color:var(--ink-soft)}
.fk-v{display:block;font-size:1.45rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-top:4px}
.fk-s{display:block;font-size:.72rem;color:var(--ink-mute);margin-top:3px;line-height:1.35}
.fk-perdu .fk-v{color:var(--danger)}
.fk-invite{grid-column:span 3;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-left:1px solid var(--border);background:var(--fa-beige-clair)}
.fk-invite b{font-size:.92rem;color:var(--fa-marron)}
@media (max-width:860px){
  .fk{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fk-c:nth-child(3){border-left:0}
  .fk-c:nth-child(n+3){border-top:1px solid var(--border)}
  .fk-invite{grid-column:span 1}
}
body[data-theme="dark"] .fk-invite{background:var(--bg-2)}
body[data-theme="dark"] .fk-invite b{color:var(--ink)}

/* — La carte Financement (onglet Détail) — */
.fx-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.fx-tete h4{margin:0}
.fx-qui{font-size:.74rem;color:var(--ink-mute);font-weight:600}
.fx-barre{height:6px;border-radius:999px;background:var(--bg-2);overflow:hidden;margin:2px 0 6px}
.fx-barre i{display:block;height:100%;background:var(--fa-orange);border-radius:999px}
.fx-r{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--border)}
.fx-r span{min-width:0}
.fx-r span b{display:block;font-size:.86rem}
.fx-r small{display:block;font-size:.72rem;color:var(--ink-mute);margin-top:2px}
.fx-r > b{font-size:1rem;white-space:nowrap}
.fx-r.fx-perdu > b{color:var(--danger)}

/* — Les encaissements, année par année — */
.fx-ans{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.fx-an{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.fx-an-h{display:flex;align-items:baseline;gap:10px;padding:9px 12px;background:var(--fa-blanc)}
.fx-an-h b:first-child{font-size:.84rem}
.fx-an-h small{flex:1;font-size:.72rem;color:var(--ink-mute)}
.fx-an-h .mono{font-size:.86rem}
body[data-theme="dark"] .fx-an-h{background:var(--bg-2)}
.fx-l{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr) 110px minmax(0,110px);gap:10px;
  align-items:center;padding:9px 12px;border-top:1px solid var(--border);font-size:.8rem}
.fx-m{font-weight:700;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-n{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.fx-e{font-size:.72rem;color:var(--ink-mute);font-weight:600}
.fx-v{text-align:right;white-space:nowrap}
.fx-v s{display:block;font-size:.68rem;color:var(--ink-mute);font-weight:600}
.fx-barree .fx-m,.fx-barree .fx-n,.fx-barree .fx-v{color:var(--ink-mute);text-decoration:line-through}
.fx-barree .fx-e{color:var(--danger)}
.fx-solde .fx-e{color:var(--fa-marron);font-weight:800}
body[data-theme="dark"] .fx-solde .fx-e{color:var(--ink)}
@media (max-width:640px){
  .fx-l{grid-template-columns:minmax(0,1fr) auto}
  .fx-e{grid-column:1}
  .fx-v{grid-row:1/3;grid-column:2}
}
/* Les pastilles : prévisionnel, et les trois états du reste à charge. */
.fx-prev,.fx-rac{display:inline-flex;align-items:center;font-size:.66rem;font-weight:800;
  border-radius:999px;padding:2px 8px;white-space:nowrap;text-decoration:none}
.fx-prev{background:var(--fa-beige);color:var(--fa-marron);border:1px dashed var(--fa-marron)}
.fx-rac-a_facturer{background:var(--bg-2);color:var(--ink-soft)}
.fx-rac-facture{background:var(--fa-beige);color:var(--fa-marron)}
.fx-rac-percu{background:var(--fa-marron);color:var(--fa-beige-clair)}

/* — La fenêtre de saisie : un bloc par année — */
.fc-bloc{border:1px solid var(--border);border-radius:12px;padding:12px 14px 10px;margin-bottom:12px}
.fc-bloc-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.fc-bloc-t{display:flex;align-items:baseline;gap:10px;font-size:.8rem;font-variant-numeric:tabular-nums}
.fc-bloc-t em{font-style:normal;color:var(--ink-mute);font-size:.74rem}
.fc-bloc-l:empty{display:none}
.fc-modale .fc-ech-l{grid-template-columns:26px minmax(0,1fr) minmax(0,120px) auto 34px;margin-bottom:8px}
.fc-prev-c{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;
  color:var(--ink-soft);cursor:pointer;padding:6px 10px;border-radius:999px;border:1px dashed var(--border);
  white-space:nowrap;user-select:none}
.fc-prev-c input{margin:0;accent-color:var(--fa-marron)}
.fc-ech-l.est-prev .fc-prev-c{background:var(--fa-beige);color:var(--fa-marron);border-color:var(--fa-marron)}
.fc-ech-l.est-prev .fc-euro .input{border-style:dashed}
.fc-modale .fc-ajout{margin:0}
.fc-rac{border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:4px}
.fc-rac:last-child{border-bottom:0;margin-bottom:0}
.fc-modale .fc-rac .fc-ligne{border-bottom:0;padding-bottom:8px}
.fc-rac .seg{margin-left:130px;max-width:360px}
.fc-rac .seg .seg-b{flex:1;justify-content:center}
.fc-rac .seg .seg-b.on[data-rac-etat="facture"]{background:var(--fa-beige);color:var(--fa-marron)}
.fc-rac .seg .seg-b.on[data-rac-etat="percu"]{background:var(--fa-marron);color:var(--fa-beige-clair)}
@media (max-width:640px){
  /* Sur téléphone, une échéance tient sur DEUX rangées : le mois (et la
     croix), puis le montant et la case Prévisionnel. */
  .fc-modale .fc-ech-l{grid-template-columns:26px minmax(0,1fr) minmax(0,1fr) 34px;
    grid-template-areas:"n mois mois x" "mt mt prev prev";row-gap:6px;
    padding-bottom:10px;border-bottom:1px dashed var(--border)}
  .fc-modale .fc-ech-l > .fc-ech-n{grid-area:n}
  .fc-modale .fc-ech-l > .select{grid-area:mois}
  .fc-modale .fc-ech-l > .fc-euro{grid-area:mt}
  .fc-modale .fc-ech-l > .fc-prev-c{grid-area:prev;justify-self:start}
  .fc-modale .fc-ech-l > [data-retirer]{grid-area:x}
  .fc-rac .seg{margin-left:0;max-width:none}
  .fc-modale .fc-etape-t .seg{min-width:0}
  .fc-modale .fc-etape-t .seg-b{white-space:normal;min-width:0;padding:7px 8px;line-height:1.2}
  .fc-bloc{padding:10px 10px 8px}
}

/* — La rupture : sa date, et ce que fait l'étudiant — */
.rp .field{margin-bottom:14px}
.rp-choix{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rp-c{text-align:left;border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;
  background:var(--surface);cursor:pointer;font:inherit;color:inherit}
.rp-c b{display:block;font-size:.9rem}
.rp-c small{display:block;font-size:.74rem;color:var(--ink-mute);margin-top:4px}
.rp-c.on{border-color:var(--fa-orange);background:var(--fa-beige-clair)}
.rp-c.on b{color:var(--fa-marron)}
body[data-theme="dark"] .rp-c.on{background:var(--bg-2)}
body[data-theme="dark"] .rp-c.on b{color:var(--ink)}
@media (max-width:520px){ .rp-choix{grid-template-columns:1fr} }
/* L'argent de chaque contrat, dans l'onglet Contrats de l'étudiant. */
.kt-argent{flex:none;display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  min-width:120px;padding:0 4px}
.kt-argent b{font-size:.98rem;color:var(--ink)}
.kt-argent small{font-size:.72rem;color:var(--ink-mute);font-weight:600}
.kt-argent-vide small{font-style:italic}
.kt-argent .kt-perdu{color:var(--danger)}
@media (max-width:640px){ .kt-argent{align-items:flex-start;text-align:left;min-width:0;width:100%;padding-left:40px} }
/* Le délai restant (30 sept 2026) : des jours qui RESTENT. Neutre tant
   qu'il y a de la marge, pastille orange sous 30 jours, rouge une fois
   dépassé — le rouge ne dit que le problème. */
.tbl-urgent .tbl-j,.tbl-j{color:var(--ink);font-weight:800}
.tbl-j.tbl-j-court{background:var(--fa-orange);color:var(--fa-marron);padding:2px 9px;border-radius:999px}
.tbl-j.tbl-j-depasse,.tbl-urgent .tbl-j.tbl-j-depasse{color:var(--urgence-encre)}
/* Le point de couleur de la formation dans le filtre du tableau de bord. */
.db-f-pt{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--f);
  margin-right:6px;vertical-align:1px}
/* « Suivi & financements » : les encaissements sur 24 mois (30 sept 2026).
   Un résumé en une ligne, puis un tableau par exercice. Le prévisionnel
   se lit en beige, comme partout. */
.prev-resume{display:flex;gap:6px;flex-wrap:wrap}
.prev-resume span{display:flex;flex-direction:column;padding:6px 12px;border-radius:10px;background:var(--bg-2);min-width:96px}
.prev-resume small{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.prev-resume b{font-size:.95rem;font-variant-numeric:tabular-nums}
.prev-resume .pr-prev{background:var(--fa-beige);color:var(--fa-marron)}
.prev-resume .pr-prev small{color:var(--fa-marron)}
.prev-resume span:first-child{background:var(--fa-marron);color:var(--fa-beige-clair)}
.prev-resume span:first-child small{color:var(--fa-beige)}
.prev-ex{margin-top:16px}
.prev-ex-t{display:flex;align-items:baseline;gap:10px;font-size:.8rem;font-weight:800;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.04em}
.prev-ex-t b{color:var(--ink);text-transform:none;letter-spacing:0;font-size:.86rem}
.prev-ex .prev-defil{margin-top:6px}
.prev-t tr.prev-estime th,.prev-t tr.prev-estime td{background:var(--fa-beige-clair);color:var(--fa-marron)}
body[data-theme="dark"] .prev-t tr.prev-estime th,body[data-theme="dark"] .prev-t tr.prev-estime td{background:var(--bg-2);color:var(--ink-soft)}
/* Le champ d'une échéance n'a que « € » : la place du chiffre d'abord. */
.fc-ech-l .fc-euro .input{padding-right:28px;padding-left:8px}
/* L'onglet Financement de la fiche contrat (30 sept 2026, 2e passe) :
   la carte en pleine largeur, les chiffres à gauche, les encaissements
   à droite ; les accès rapides en une rangée dessous. */
.fx-large{margin-bottom:16px}
.fx-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start}
.fx-cols .fx-ans{margin-top:0}
@media (max-width:900px){ .fx-cols{grid-template-columns:1fr} .fx-cols .fx-ans{margin-top:10px} }
.fx-acces-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:760px){ .fx-acces-l{grid-template-columns:1fr} }
/* Le trop-perçu : rouge, en gros, sous les années. */
.fx-remb{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;
  background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger)}
.fx-remb svg.ico{width:18px;height:18px;flex:none}
.fx-remb span{flex:1;min-width:0}
.fx-remb span b{display:block;font-size:.88rem}
.fx-remb small{display:block;font-size:.72rem;opacity:.85;margin-top:2px}
.fx-remb > b{font-size:1.1rem;white-space:nowrap}
/* Le montant annuel prévisionnel dans la fenêtre de saisie. */
.fc-modale .fc-ligne.fc-ligne-opco{grid-template-columns:minmax(0,130px) minmax(0,200px) auto}
.fc-ligne-opco.est-prev .fc-prev-c{background:var(--fa-beige);color:var(--fa-marron);border-color:var(--fa-marron)}
.fc-ligne-opco.est-prev .fc-euro .input{border-style:dashed}

/* ══════════ « SUIVI & FINANCEMENTS » : LES ENCAISSEMENTS SUR 24 MOIS (30 sept 2026, 2e passe) ══════════
   Cinq tuiles qui sont aussi le sélecteur, un graphique de 24 barres, le
   détail d'un exercice à côté de l'autre, les contrats à rembourser.
   Couleurs de la charte : marron = confirmé, beige pointillé =
   prévisionnel, orange = restes à charge ; rouge = à rembourser (le
   seul problème). */
.enc{margin-bottom:16px}
.c-conf{--c:var(--fa-marron)}
.c-prev{--c:var(--fa-beige)}
.c-rac{--c:var(--fa-orange)}
.c-remb{--c:var(--danger)}
body[data-theme="dark"] .c-conf{--c:var(--fa-beige-clair)}
.enc-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.enc-h h4{margin:0}
.enc-h small{display:block;margin-top:3px}
.enc-tuiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.enc-t{appearance:none;font:inherit;text-align:left;cursor:pointer;border:1.5px solid var(--border);
  background:var(--surface);color:var(--ink);border-radius:12px;padding:10px 12px;display:flex;
  flex-direction:column;gap:4px;min-width:0;transition:border-color .12s,background .12s}
.enc-t span{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:var(--ink-soft)}
.enc-t span i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.enc-t.c-prev span i{border:1px dashed var(--fa-marron)}
.enc-t b{font-size:1.12rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.enc-t:hover{border-color:var(--ink-mute)}
.enc-t.on{border-color:var(--fa-orange);background:var(--fa-beige-clair);box-shadow:inset 0 0 0 1px var(--fa-orange)}
body[data-theme="dark"] .enc-t.on{background:var(--bg-2)}
.enc-t.c-remb b{color:var(--danger)}
@media (max-width:900px){ .enc-tuiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .enc-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
.enc-graph{margin-top:16px}
.enc-graph svg{display:block;width:100%;height:auto}
.enc-graph rect.c-conf,.enc-graph rect.c-prev,.enc-graph rect.c-rac,.enc-graph rect.c-remb{fill:var(--c)}
.enc-graph rect.c-prev{stroke:var(--fa-marron);stroke-width:1;stroke-dasharray:3 2}
.enc-graph .enc-hit{fill:transparent;cursor:default}
.enc-graph .enc-hit:hover{fill:rgba(46,32,23,.05)}
.enc-graph .enc-axe{stroke:var(--ink-mute);stroke-width:1}
.enc-graph .enc-sep{stroke:var(--border-2);stroke-width:1;stroke-dasharray:4 4}
.enc-graph text{font-size:10px;fill:var(--ink-mute);font-weight:600}
.enc-graph .enc-ex{font-size:11px;fill:var(--ink-soft);font-weight:800}
.enc-leg{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;font-size:.74rem;font-weight:600;color:var(--ink-soft)}
.enc-leg span{display:inline-flex;align-items:center;gap:6px}
.enc-leg i{width:12px;height:12px;border-radius:3px;background:var(--c)}
.enc-leg .c-prev i{border:1px dashed var(--fa-marron)}
.enc-detail{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media (max-width:1000px){ .enc-detail{grid-template-columns:1fr} }
.enc-t-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px}
.enc-table{width:100%;border-collapse:collapse;font-size:.78rem;font-variant-numeric:tabular-nums}
.enc-table th,.enc-table td{padding:6px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--border)}
.enc-table thead th{font-size:.66rem;font-weight:800;color:var(--ink-soft);background:var(--fa-blanc)}
body[data-theme="dark"] .enc-table thead th{background:var(--bg-2)}
.enc-table thead th:first-child{text-align:left;color:var(--ink);font-size:.74rem}
.enc-table thead th i{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--c);margin-right:5px;vertical-align:0}
.enc-table thead th.c-prev i{border:1px dashed var(--fa-marron)}
.enc-table tbody th{text-align:left;font-weight:700;color:var(--ink-soft)}
.enc-table .enc-net{font-weight:800;color:var(--ink)}
.enc-table tr.enc-sous th,.enc-table tr.enc-sous td{font-weight:800;color:var(--ink);border-top:2px solid var(--ink);border-bottom:0}
.enc-remb{margin-top:16px;border:1px solid var(--danger);border-radius:12px;overflow:hidden}
.enc-remb h5{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;background:var(--danger-soft);
  color:var(--danger);font-size:.84rem}
.enc-remb h5 svg.ico{width:16px;height:16px}
.enc-remb-l{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--border);cursor:pointer}
.enc-remb-l:hover{background:var(--bg-2)}
.enc-remb-l span:first-child{flex:1;min-width:0}
.enc-remb-l small{display:block;font-size:.72rem;color:var(--ink-mute);margin-top:2px}
.enc-remb-m{font-size:.74rem;color:var(--ink-soft);font-weight:700}
.enc-remb-l > b{color:var(--danger);white-space:nowrap}

/* L'affichage des étudiants : cartes ou tableau. */
.sue-t-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:14px}
.sue-t{width:100%;border-collapse:collapse;font-size:.8rem}
.sue-t th,.sue-t td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.sue-t thead th{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);
  background:var(--fa-blanc)}
body[data-theme="dark"] .sue-t thead th{background:var(--bg-2)}
.sue-t .n{text-align:right;font-variant-numeric:tabular-nums}
.sue-t tbody tr:last-child td{border-bottom:0}
.sue-t tbody tr:hover td{background:var(--bg-2)}
.sue-t td:first-child{border-left:3px solid transparent}
.sue-t tr.st-maintien td:first-child{border-left-color:var(--danger)}
.sue-t tr.st-recherche td:first-child{border-left-color:var(--info)}
.sue-t tr.st-encours td:first-child{border-left-color:var(--ok)}
.sue-t-g{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.sue-t-arens{font-weight:700;color:var(--warn-ink)}
.sue-t-remb{color:var(--danger)}
.enc-h .select{width:auto;min-width:190px;flex:none}
.enc-detail{grid-template-columns:repeat(auto-fit,minmax(min(100%,600px),1fr))}
.enc-detail.enc-detail-seul{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.enc-plier{margin-top:14px;border-top:1px solid var(--border);padding-top:10px}
.enc-plier > summary{cursor:pointer;font-size:.82rem;font-weight:800;color:var(--ink-soft);list-style:none;
  display:flex;align-items:center;gap:8px}
.enc-plier > summary::-webkit-details-marker{display:none}
.enc-plier > summary::before{content:"›";display:inline-block;transition:transform .15s;font-size:1.1rem;line-height:1}
.enc-plier[open] > summary::before{transform:rotate(90deg)}
.enc-plier .enc-detail{margin-top:12px}

/* ══════════ MAQUETTE A — « le tableau d'avant, rangé par blocs » (Théo, 30 sept 2026) ══════════ */
.enc-barre{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
.enc-barre-g{flex:1}
.enc-p{appearance:none;font:inherit;font-size:.76rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;border:1px solid var(--border-2);background:var(--surface);color:var(--ink)}
.enc-p i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.enc-p.c-prev i{border:1px dashed var(--fa-marron)}
.enc-p svg.ico{width:14px;height:14px}
.enc-p:hover{border-color:var(--ink-mute)}
.enc-p.on{background:var(--fa-marron);border-color:var(--fa-marron);color:var(--fa-beige-clair)}
body[data-theme="dark"] .enc-p.on{background:var(--fa-beige-clair);color:var(--fa-marron)}
.enc-import{background:var(--fa-beige);color:var(--fa-marron);border:1px solid var(--fa-marron)}
.enc-import:hover{background:var(--fa-orange)}
.enc-import em{font-style:normal;background:var(--danger);color:#fff;border-radius:999px;padding:0 7px;font-size:.7rem;margin-left:2px}
.enc-resume{margin:0 0 12px;font-size:.84rem;color:var(--ink-2)}
.enc-resume b{color:var(--ink)}
.enc-r-prev{background:var(--fa-beige);color:var(--fa-marron);padding:1px 6px;border-radius:6px}
.enc-r-remb{color:var(--danger);font-weight:700}
.enc-defil{overflow-x:auto;border:1px solid var(--border);border-radius:12px}
.enc-a{border-collapse:separate;border-spacing:0;font-size:.76rem;font-variant-numeric:tabular-nums;min-width:100%}
.enc-a th,.enc-a td{padding:6px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--border)}
.enc-a thead th{font-size:.66rem;font-weight:800;color:var(--ink-soft);background:var(--fa-blanc)}
body[data-theme="dark"] .enc-a thead th{background:var(--bg-2)}
.enc-a tr.enc-ex-l th{font-size:.7rem;color:var(--ink);text-align:left;border-left:2px solid var(--border-2)}
.enc-a tr.enc-ex-l th:first-child,.enc-a tr.enc-ex-l th:last-child{border-left:0}
.enc-a tbody th{text-align:left;font-weight:700;color:var(--ink)}
.enc-a tbody th small{display:block;font-size:.66rem;font-weight:600;color:var(--ink-mute)}
/* La première colonne reste en place quand on fait défiler les mois. */
.enc-a th:first-child{position:sticky;left:0;z-index:1;background:var(--surface);min-width:190px;max-width:240px;
  white-space:normal;box-shadow:1px 0 0 var(--border)}
.enc-a thead th:first-child{background:var(--fa-blanc)}
body[data-theme="dark"] .enc-a thead th:first-child{background:var(--bg-2)}
.enc-a .enc-s12,.enc-a .enc-s24{background:var(--fa-blanc);font-weight:800;color:var(--ink)}
body[data-theme="dark"] .enc-a .enc-s12,body[data-theme="dark"] .enc-a .enc-s24{background:var(--bg-2)}
.enc-a .enc-s24{border-left:2px solid var(--border-2)}
.enc-a .enc-vide{color:var(--ink-mute);opacity:.6}
/* Les bandeaux de bloc, aux couleurs de la charte. */
.enc-a tr.enc-sec th,.enc-a tr.enc-sec td{padding:5px 10px;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;background:var(--c);border-bottom:0}
.enc-a tr.enc-sec.c-conf th,.enc-a tr.enc-sec.c-conf td{color:var(--fa-beige-clair)}
body[data-theme="dark"] .enc-a tr.enc-sec.c-conf th,body[data-theme="dark"] .enc-a tr.enc-sec.c-conf td{color:var(--fa-marron)}
.enc-a tr.enc-sec.c-prev th,.enc-a tr.enc-sec.c-prev td,
.enc-a tr.enc-sec.c-rac th,.enc-a tr.enc-sec.c-rac td{color:var(--fa-marron)}
.enc-a tr.enc-sec.c-remb th,.enc-a tr.enc-sec.c-remb td{background:var(--danger-soft);color:var(--danger)}
.enc-a tr.enc-st th,.enc-a tr.enc-st td{font-weight:800;color:var(--ink)}
.enc-a tr.enc-remb td,.enc-a tr.enc-remb th{color:var(--danger)}
.enc-a tr.enc-net th,.enc-a tr.enc-net td{font-weight:800;color:var(--ink);border-top:2px solid var(--ink);border-bottom:0;
  background:var(--fa-beige-clair)}
body[data-theme="dark"] .enc-a tr.enc-net th,body[data-theme="dark"] .enc-a tr.enc-net td{background:var(--bg-2)}
.enc-lien{appearance:none;border:0;background:none;padding:0;font:inherit;font-weight:700;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.enc .enc-graph{margin:0 0 12px}
.fc-pdf{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;margin:0 0 12px;
  background:var(--fa-beige);color:var(--fa-marron);font-size:.8rem;border:1px dashed var(--fa-marron)}
.fc-pdf svg.ico{width:16px;height:16px;flex:none}
/* ══════════ LES PDF D'ÉCHÉANCIER OPCO (30 sept 2026) ══════════ */
.modal.imp-modale{max-width:760px;width:calc(100vw - 32px)}
.imp-depot{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 16px;border:2px dashed var(--fa-marron);
  border-radius:14px;background:var(--fa-beige-clair);color:var(--fa-marron);cursor:pointer;text-align:center}
.imp-depot svg.ico{width:26px;height:26px}
.imp-depot b{font-size:.95rem}
.imp-depot small{font-size:.76rem;opacity:.8}
.imp-depot.survol,.imp-depot:hover{background:var(--fa-beige)}
body[data-theme="dark"] .imp-depot{background:var(--bg-2);color:var(--ink)}
.imp-etat{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 4px;font-size:.78rem}
.imp-etat:empty{display:none}
.imp-g{margin-top:14px}
.imp-g h5{margin:0 0 6px;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.imp-g h5 em{font-style:normal;background:var(--bg-2);border-radius:999px;padding:0 7px;margin-left:4px}
.imp-g.imp-av h5 em{background:var(--fa-orange);color:var(--fa-marron)}
.imp-l{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:10px 12px;border:1px solid var(--border);border-radius:10px;margin-bottom:6px;background:var(--surface)}
.imp-f{appearance:none;border:0;background:none;font:inherit;display:flex;align-items:center;gap:6px;min-width:0;cursor:pointer;
  color:var(--ink);font-size:.8rem;font-weight:700;text-align:left}
.imp-f span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-f svg.ico{width:16px;height:16px;flex:none;color:var(--danger)}
.imp-f:hover span{text-decoration:underline}
.imp-c{min-width:0;font-size:.82rem}
.imp-c b{display:block}
.imp-c small{display:block;font-size:.72rem;color:var(--ink-mute);margin-top:2px}
.imp-c .select{max-width:260px}
.imp-g-b{display:flex;gap:6px;justify-content:flex-end}
.imp-ko{color:var(--danger);font-weight:700;font-size:.78rem}
.imp-ok{color:var(--ok);font-weight:700;display:inline-flex;align-items:center;gap:4px;font-size:.78rem}
.imp-ok svg.ico{width:15px;height:15px}
.imp-attente{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;color:var(--ink-soft)}
.imp-attente svg.ico{width:14px;height:14px}
.imp-fait{opacity:.75}
@media (max-width:640px){
  .imp-l{grid-template-columns:1fr}
  .imp-g-b{justify-content:flex-start}
}

/* ══════════ MAQUETTE C — LES TOTAUX D'ABORD, « QUE ÇA SAUTE AUX YEUX » (Théo, 30 sept 2026) ══════════
   Chaque type a SA couleur, pleine, partout : pastille, barre à gauche des
   lignes, sous-totaux. Des filets nets entre les lignes, un filet plus
   épais entre les exercices ; les chiffres en grand, alignés à droite. */
.enc-c .enc-h{margin-bottom:12px}
.enc-pil{display:inline-flex;align-items:center;font-size:.74rem;font-weight:800;padding:4px 11px;border-radius:999px;
  background:var(--c);white-space:nowrap}
.enc-pil.c-conf{color:var(--fa-beige-clair)}
body[data-theme="dark"] .enc-pil.c-conf{color:var(--fa-marron)}
.enc-pil.c-prev{color:var(--fa-marron);border:1px dashed var(--fa-marron)}
.enc-pil.c-rac{color:var(--fa-marron)}
.enc-pil.c-remb{background:var(--danger);color:#fff}

/* 1. Les totaux */
.enc-tot{width:100%;border-collapse:separate;border-spacing:0;margin:4px 0 22px;font-variant-numeric:tabular-nums;
  border:1px solid var(--border-2);border-radius:14px;overflow:hidden}
.enc-tot th,.enc-tot td{padding:12px 18px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap}
.enc-tot thead th{font-size:.72rem;font-weight:800;color:var(--ink-soft);background:var(--fa-blanc);text-transform:uppercase;
  letter-spacing:.04em;padding:10px 18px}
body[data-theme="dark"] .enc-tot thead th{background:var(--bg-2)}
.enc-tot tbody th{text-align:left;width:34%}
.enc-tot td{font-size:1.05rem;font-weight:700;color:var(--ink)}
.enc-tot th + td,.enc-tot td + td{border-left:1px solid var(--border)}
.enc-tot thead th + th{border-left:1px solid var(--border)}
.enc-tot .enc-tot-24{background:var(--fa-beige-clair);font-weight:800}
body[data-theme="dark"] .enc-tot .enc-tot-24{background:var(--bg-2)}
.enc-tot tbody tr th{box-shadow:inset 5px 0 0 var(--c)}
.enc-tot tbody tr.c-remb td{color:var(--danger)}
.enc-tot tbody tr.c-prev td{color:var(--fa-marron)}
body[data-theme="dark"] .enc-tot tbody tr.c-prev td{color:var(--ink)}
.enc-tot tr.enc-tot-net th,.enc-tot tr.enc-tot-net td{border-bottom:0;border-top:2px solid var(--ink);font-size:1.15rem;
  font-weight:800;color:var(--ink);box-shadow:none}
.enc-tot tr.enc-tot-net th{font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}

/* 2. Le mois par mois */
.enc-mm-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.enc-mm-h h5{margin:0;font-size:.95rem}
.enc-ex .seg-b{font-size:.78rem;padding:6px 14px}
.enc-mm{border-collapse:separate;border-spacing:0;min-width:100%;font-size:.8rem;font-variant-numeric:tabular-nums}
.enc-mm th,.enc-mm td{padding:8px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--border)}
.enc-mm td + td{border-left:1px solid var(--bg-2)}
.enc-mm thead th{font-size:.7rem;font-weight:800;color:var(--ink-soft);background:var(--fa-blanc);padding:9px 10px}
body[data-theme="dark"] .enc-mm thead th{background:var(--bg-2)}
.enc-mm th:first-child{position:sticky;left:0;z-index:1;background:var(--surface);text-align:left;min-width:170px;
  box-shadow:1px 0 0 var(--border-2)}
.enc-mm thead th:first-child{background:var(--fa-blanc)}
body[data-theme="dark"] .enc-mm thead th:first-child{background:var(--bg-2)}
.enc-mm tbody th{font-weight:700;color:var(--ink)}
.enc-mm tbody th small{display:block;font-size:.68rem;font-weight:600;color:var(--ink-mute)}
.enc-mm .enc-m12{font-weight:800;color:var(--ink);background:var(--fa-beige-clair);border-left:2px solid var(--border-2)}
body[data-theme="dark"] .enc-mm .enc-m12{background:var(--bg-2)}
/* Un bloc = sa couleur : titre en pastille, barre à gauche de chaque ligne. */
.enc-bloc tr th:first-child{box-shadow:inset 5px 0 0 var(--c),1px 0 0 var(--border-2);padding-left:16px}
.enc-bloc tr.enc-bloc-t th{padding:14px 10px 8px 16px;border-bottom:0;background:var(--surface)}
.enc-bloc tr.enc-bloc-t th:first-child{box-shadow:inset 5px 0 0 var(--c)}
.enc-bloc.c-remb td{color:var(--danger)}
.enc-mm td.enc-v-prev:not(:empty){color:var(--fa-marron);font-weight:700;background:var(--fa-beige-clair)}
body[data-theme="dark"] .enc-mm td.enc-v-prev:not(:empty){color:var(--ink);background:var(--bg-2)}
.enc-mm tr.enc-sous th,.enc-mm tr.enc-sous td{font-weight:800;color:var(--ink);background:var(--fa-blanc)}
body[data-theme="dark"] .enc-mm tr.enc-sous th,body[data-theme="dark"] .enc-mm tr.enc-sous td{background:var(--bg-2)}
.enc-bloc.c-remb tr.enc-sous td{color:var(--danger)}
.enc-mm tr.enc-net th,.enc-mm tr.enc-net td{font-weight:800;font-size:.86rem;color:var(--ink);border-top:2px solid var(--ink);border-bottom:0;
  background:var(--fa-beige-clair)}
body[data-theme="dark"] .enc-mm tr.enc-net th,body[data-theme="dark"] .enc-mm tr.enc-net td{background:var(--bg-2)}
.enc-mm tr.enc-net th{text-transform:uppercase;letter-spacing:.05em;font-size:.78rem}
.enc-mm .enc-rien{text-align:center;color:var(--ink-mute);padding:22px}

/* La liste des étudiants, « tableau sobre » (Théo, 30 sept 2026). */
.sue-t th,.sue-t td{padding:12px 14px}
.sue-t thead th{text-transform:none;letter-spacing:0;font-size:.72rem;font-weight:700;color:var(--ink-mute);background:var(--surface);
  border-bottom:1px solid var(--border-2)}
.sue-t td:first-child{border-left:0}
.sue-t-qui b{display:block;font-size:.85rem;color:var(--ink)}
.sue-t-qui small{display:block;font-size:.72rem;color:var(--ink-mute);margin-top:2px;max-width:280px;
  overflow:hidden;text-overflow:ellipsis}
.sue-t-st{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;color:var(--ink-2)}
.sue-t-st i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.sue-t-st.st-danger i{background:var(--danger)}
.sue-t-st.st-info i{background:var(--info)}
.sue-t-st.st-mute i{background:var(--ink-mute)}
.sue-t-opco{font-size:.76rem;color:var(--ink-soft)}
.sue-t-mute{color:var(--ink-mute);font-size:.78rem}
.sue-t td.sue-t-arens{font-size:.8rem;font-weight:700;color:var(--warn-ink)}
.sue-t-prev{background:var(--fa-beige);color:var(--fa-marron);padding:2px 7px;border-radius:6px;font-weight:700}
.sue-t .sue-t-remb{color:var(--danger);font-weight:700}
.sue-t .n{font-size:.84rem}
.enc-tot .enc-zero{color:var(--ink-mute);font-weight:600}
.sue-t{table-layout:fixed;min-width:860px}
.sue-t td,.sue-t th{overflow:hidden;text-overflow:ellipsis}
.enc-tot-w{overflow-x:auto;margin:4px 0 22px}
.enc-tot-w .enc-tot{margin:0}
@media (max-width:640px){
  .enc-tot th,.enc-tot td{padding:10px 10px}
  .enc-tot td{font-size:.9rem}
  .enc-tot thead th{padding:8px 10px}
  .enc-tot tbody th{width:auto}
}
/* Le mois par mois sur 24 mois, d'un seul tenant (30 sept 2026). */
.enc-mm tr.enc-ex-l th{font-size:.72rem;font-weight:800;color:var(--ink);text-align:left;background:var(--fa-blanc);
  border-bottom:0;padding:9px 10px 2px}
body[data-theme="dark"] .enc-mm tr.enc-ex-l th{background:var(--bg-2)}
.enc-mm .enc-deb{border-left:2px solid var(--border-2)}
.enc-mm .enc-m24{font-weight:800;color:var(--ink);background:var(--fa-beige);border-left:2px solid var(--border-2)}
body[data-theme="dark"] .enc-mm .enc-m24{background:var(--bg-2)}
.enc-mm thead .enc-m12{white-space:nowrap}
.enc-bloc tr.enc-bloc-t td{border-bottom:0;background:var(--surface)}

/* Les six colonnes d'argent de la liste (Théo, 1er oct. 2026) : vert léger
   pour le perçu à ce jour, beige pour le prévisionnel, rouge pour ce qu'on
   doit rendre — les en-têtes portent la même teinte. */
.sue-t{min-width:1080px}
.sue-t th.n{white-space:normal;line-height:1.2}
.sue-t-percu{background:var(--ok-soft);color:var(--ok-ink);padding:2px 7px;border-radius:6px;font-weight:700}
.sue-t-rend{background:var(--danger-soft);color:var(--danger);padding:2px 7px;border-radius:6px;font-weight:800}
.sue-t-apres{font-weight:700;color:var(--ink)}
.sue-t thead th.sue-th-percu{color:var(--ok-ink)}
.sue-t thead th.sue-th-prev{color:var(--fa-marron)}
body[data-theme="dark"] .sue-t thead th.sue-th-prev{color:var(--ink)}
.sue-t thead th.sue-th-rend{color:var(--danger)}
.sue-t thead th[title]{cursor:help}
.sue-t{min-width:1180px}
.sue-t th,.sue-t td{padding:12px 10px}
.sue-t-percu,.sue-t-rend,.sue-t-prev{padding:2px 6px;font-size:.8rem;white-space:nowrap}
.sue-t thead th.n{font-size:.7rem}
.sue-t td:last-child{overflow:visible}
.sue-t td .sue-t-st{white-space:normal;line-height:1.25}
.sue-t td:nth-child(2){white-space:normal}

/* ══════════ LES COULEURS DE L'ARGENT, LES MÊMES PARTOUT (Théo, 1er oct. 2026) ══════════
   Prévu initial = gras · Après rupture = orange · Perçu à ce jour = vert ·
   Encaissé = marron (contour) · Confirmé = marron (plein) · Prévisionnel =
   JAUNE (demandé par Théo), pointillé = pas encore confirmé · Reste à
   charge = beige · Trop-perçu = rouge. Même code dans la liste, l'onglet
   Contrats de la fiche étudiant et les encaissements. */
:root{ --fin-jaune:#FFD84D; --fin-jaune-clair:#FFF1B8; }
.c-prev{--c:var(--fin-jaune)}
.c-rac{--c:var(--fa-beige)}
.fin-r-initial{--c:var(--ink)}
.fin-r-apres{--c:var(--fa-orange)}
.fin-r-percu{--c:var(--ok)}
.fin-r-encaisse{--c:var(--fa-marron)}
body[data-theme="dark"] .fin-r-encaisse{--c:var(--fa-beige-clair)}
/* Les pastilles de ligne (totaux) */
.enc-pil.c-prev{background:var(--fin-jaune);color:var(--fa-marron);border:1px dashed var(--fa-marron)}
.enc-pil.c-rac{background:var(--fa-beige);color:var(--fa-marron)}
.enc-pil.fin-r-initial{background:var(--surface);color:var(--ink);border:1.5px solid var(--ink)}
.enc-pil.fin-r-apres{background:var(--fa-orange);color:var(--fa-marron)}
.enc-pil.fin-r-percu{background:var(--ok-soft);color:var(--ok-ink)}
.enc-pil.fin-r-encaisse{background:var(--surface);color:var(--fa-marron);border:1.5px solid var(--fa-marron)}
body[data-theme="dark"] .enc-pil.fin-r-encaisse{color:var(--ink);border-color:var(--ink)}
.enc-tot tr.fin-r-initial td{font-weight:800}
.enc-tot tr.enc-tot-g th{background:var(--fa-blanc);font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-mute);padding:7px 18px;box-shadow:none;text-align:left}
body[data-theme="dark"] .enc-tot tr.enc-tot-g th{background:var(--bg-2)}
.enc-tot tbody tr.c-prev td{color:var(--fa-marron)}
/* Les montants (liste, fiche) */
.fin-v{display:inline-block;padding:2px 6px;border-radius:6px;font-size:.8rem;font-weight:700;white-space:nowrap}
.fin-v-initial{font-weight:800;color:var(--ink);padding:0}
.fin-v-apres{background:var(--fa-orange);color:var(--fa-marron)}
.fin-v-percu{background:var(--ok-soft);color:var(--ok-ink)}
.fin-v-encaisse{color:var(--fa-marron);box-shadow:inset 0 0 0 1.5px var(--fa-marron)}
body[data-theme="dark"] .fin-v-encaisse{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.fin-v-previsionnel{background:var(--fin-jaune);color:var(--fa-marron);outline:1px dashed var(--fa-marron);outline-offset:-1px}
.fin-v-rac{background:var(--fa-beige);color:var(--fa-marron)}
.fin-v-rendre{background:var(--danger-soft);color:var(--danger);font-weight:800}
/* Les titres de colonne : un trait de la couleur de la colonne. */
.sue-t thead th[class*="fin-h-"]{box-shadow:inset 0 -3px 0 var(--c, var(--border-2));color:var(--ink-2)}
.fin-h-initial{--c:var(--ink)}
.fin-h-apres{--c:var(--fa-orange)}
.fin-h-percu{--c:var(--ok)}
.fin-h-encaisse{--c:var(--fa-marron)}
.fin-h-previsionnel{--c:var(--fin-jaune)}
.fin-h-rac{--c:var(--fa-beige)}
.fin-h-rendre{--c:var(--danger)}
.sue-t thead th.fin-h-rendre{color:var(--danger)}
/* De fines lignes entre les colonnes (liste, fiche, mois par mois). */
.sue-t th + th,.sue-t td + td{border-left:1px solid var(--border)}
.enc-mm td + td{border-left:1px solid var(--border)}
.sue-t{min-width:1240px}
/* Le mois par mois : prévisionnel en jaune clair. */
.enc-mm td.enc-v-prev:not(:empty){background:var(--fin-jaune-clair);color:var(--fa-marron)}
/* Les vieilles pastilles prévisionnelles (fiche contrat, saisie) passent au jaune. */
.fx-prev{background:var(--fin-jaune)}
.fc-ech-l.est-prev .fc-prev-c,.fc-ligne-opco.est-prev .fc-prev-c{background:var(--fin-jaune)}
.sue-t-prev{background:var(--fin-jaune)}
.enc-r-prev{background:var(--fin-jaune)}

/* Le panneau « Filtrer » (1er oct. 2026) : chercher et la ville restent
   en vue, le reste se range ici. */
.sue-filtrer em{font-style:normal;font-weight:800}
.sue-filtrer.actif{border-color:var(--fa-orange);background:var(--fa-beige-clair)}
.sue-filtrer.ouvert{border-color:var(--fa-marron)}
body[data-theme="dark"] .sue-filtrer.actif{background:var(--bg-2)}
.sue-panneau{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;padding:14px 16px;margin:0 0 16px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px}
.sue-panneau[hidden]{display:none}
.sue-panneau label{display:flex;flex-direction:column;gap:4px;min-width:150px}
.sue-panneau label small{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute)}

/* L'onglet Contrats de la fiche étudiant : le tableau d'argent. */
.kf{margin-top:18px}
.kf h5{margin:0 0 8px;font-size:.9rem}
.kf .sue-t-wrap{margin:0}
.kf-t{min-width:1000px}
.kf-t tbody tr{cursor:pointer}
.kf-qui b{display:block;font-size:.82rem}
.kf-qui small{display:block;font-size:.7rem;color:var(--ink-mute);margin-top:2px}
.kf-t tr.kf-total td{background:var(--fa-blanc);border-top:2px solid var(--ink)}
body[data-theme="dark"] .kf-t tr.kf-total td{background:var(--bg-2)}
.sue-t{min-width:1100px}
.sue-t td.sue-t-opco{white-space:normal;font-size:.74rem;line-height:1.25;word-break:break-word}
.sue-t td:nth-child(2) .sue-t-st{font-size:.76rem}
.sue-t td.sue-t-opco{word-break:normal;overflow-wrap:normal}
.sue-t thead th.n{font-size:.66rem;padding-left:6px;padding-right:6px}
.sue-t td.n{padding-left:6px;padding-right:8px}
.sue-t .fin-v{padding:2px 5px;font-size:.78rem}

/* ══════════ ENCAISSEMENTS : UN TABLEAU, TROIS VUES (Théo, 1er oct. 2026) ══════════
   Annuel · Mois par mois · Les deux. Mêmes lignes partout. Deux groupes
   qu'on ne peut pas confondre : LES CONTRATS sur fond blanc, bandeau gris ;
   LES ENCAISSEMENTS sur fond crème, bandeau beige, séparés par un trait
   marron épais. Chaque ligne garde la barre de sa couleur à gauche. */
.enc-h-d{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.enc-vue{display:inline-flex;align-items:center;gap:2px;background:var(--fa-marron);color:var(--fa-beige-clair);
  border-radius:999px;padding:3px}
.enc-vue-f{appearance:none;border:0;background:transparent;color:inherit;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.enc-vue-f:hover{background:rgba(255,246,226,.15)}
.enc-vue-f svg.ico{width:16px;height:16px}
.enc-vue-n{display:flex;flex-direction:column;align-items:center;min-width:118px;gap:3px}
.enc-vue-n b{font-size:.8rem;font-weight:800;line-height:1}
.enc-vue-n i{display:flex;gap:4px}
.enc-vue-n em{width:5px;height:5px;border-radius:50%;background:rgba(255,246,226,.35)}
.enc-vue-n em.on{background:var(--fa-orange)}
body[data-theme="dark"] .enc-vue{background:var(--fa-beige-clair);color:var(--fa-marron)}

.enc-u-defil{overflow-x:auto;border:1px solid var(--border-2);border-radius:14px}
.enc-u{border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums;font-size:.82rem;min-width:100%}
.enc-u th,.enc-u td{padding:10px 12px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--border)}
.enc-u td + td,.enc-u th + th{border-left:1px solid var(--border)}
.enc-u thead th{font-size:.72rem;font-weight:800;color:var(--ink-2);background:var(--fa-blanc)}
body[data-theme="dark"] .enc-u thead th{background:var(--bg-2)}
.enc-u thead tr.enc-u-h1 th{text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;color:var(--ink);text-align:left;border-bottom:0}
.enc-u thead th.c-a-titre{text-align:center}
/* La 1re colonne reste en place. */
.enc-u .c-lab{position:sticky;left:0;z-index:2;text-align:left;width:210px;min-width:210px;max-width:210px;
  background:var(--surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enc-u thead .c-lab{background:var(--fa-blanc)}
body[data-theme="dark"] .enc-u thead .c-lab{background:var(--bg-2)}
.enc-u .c-m{min-width:84px}
.enc-u .c-a{min-width:118px;font-weight:700}
.enc-u .c-a3{background:var(--fa-beige-clair);font-weight:800}
body[data-theme="dark"] .enc-u .c-a3{background:var(--bg-2)}
.enc-u-annuel{width:100%}
.enc-u-annuel td.c-a{font-size:1rem;padding:12px 18px}
/* « Les deux » : les colonnes annuelles restent aussi en place. */
.enc-u-deux .c-a{position:sticky;z-index:2;width:118px;min-width:118px;max-width:118px;background:var(--surface)}
.enc-u-deux .c-a1{left:210px}
.enc-u-deux .c-a2{left:328px}
.enc-u-deux .c-a3{left:446px;box-shadow:3px 0 0 var(--fa-marron);background:var(--fa-beige-clair)}
.enc-u-deux thead .c-a{background:var(--fa-blanc)}
.enc-u-deux thead .c-a3{background:var(--fa-blanc)}
body[data-theme="dark"] .enc-u-deux .c-a3{background:var(--bg-2)}
/* Les deux groupes */
.enc-u tr.enc-u-g th,.enc-u tr.enc-u-g td{padding:9px 14px;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;border-bottom:1px solid var(--border-2)}
.enc-u tr.enc-u-g.g-k th,.enc-u tr.enc-u-g.g-k td{background:#EFEDEA;color:var(--ink)}
.enc-u tr.enc-u-g.g-e th,.enc-u tr.enc-u-g.g-e td{background:var(--fa-beige);color:var(--fa-marron);border-top:3px solid var(--fa-marron)}
body[data-theme="dark"] .enc-u tr.enc-u-g.g-k th,body[data-theme="dark"] .enc-u tr.enc-u-g.g-k td{background:var(--bg-2)}
.enc-u tr.g-e:not(.enc-u-g) td,.enc-u tr.g-e:not(.enc-u-g) th.c-lab{background:#FFFBF2}
.enc-u-deux tr.g-e:not(.enc-u-g) td.c-a{background:#FFF6E2}
body[data-theme="dark"] .enc-u tr.g-e:not(.enc-u-g) td,body[data-theme="dark"] .enc-u tr.g-e:not(.enc-u-g) th.c-lab{background:var(--surface)}
/* La barre de couleur de chaque ligne */
.enc-u tbody tr:not(.enc-u-g) th.c-lab{box-shadow:inset 5px 0 0 var(--c, transparent);padding-left:16px}
.enc-u tr.enc-u-s th.c-lab{box-shadow:inset 5px 0 0 transparent}
.enc-u tr.enc-u-s th,.enc-u tr.enc-u-s td{font-size:.76rem;color:var(--ink-soft);padding-top:6px;padding-bottom:6px;font-weight:600}
.enc-u-sous{padding-left:16px;display:inline-block}
.enc-u-sous small{color:var(--ink-mute);font-size:.68rem}
.enc-u tr.enc-u-fort td{font-weight:800;color:var(--ink)}
.enc-u tr.c-remb td{color:var(--danger)}
.enc-u tr.c-prev td.enc-v-prev{background:var(--fin-jaune-clair);color:var(--fa-marron);font-weight:700}
.enc-u tr.enc-u-net th,.enc-u tr.enc-u-net td{border-top:2px solid var(--ink);border-bottom:0;font-weight:800;color:var(--ink);
  background:var(--fa-beige-clair)}
.enc-u tr.enc-u-net th.c-lab b{text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}
body[data-theme="dark"] .enc-u tr.enc-u-net th,body[data-theme="dark"] .enc-u tr.enc-u-net td{background:var(--bg-2)}
.enc-u .enc-zero{color:var(--ink-mute);font-weight:600}
.enc-u .enc-deb{border-left:2px solid var(--border-2)}
.enc-u .enc-m12{background:var(--fa-beige-clair);font-weight:800;color:var(--ink);border-left:2px solid var(--border-2)}
.enc-u .enc-m24{background:var(--fa-beige);font-weight:800;color:var(--fa-marron);border-left:2px solid var(--border-2)}
.enc-u .enc-pil{font-size:.76rem;padding:5px 12px}
@media (max-width:640px){
  .enc-h-d{align-items:flex-start}
  .enc-u .c-lab{width:150px;min-width:150px;max-width:150px}
  .enc-u-deux .c-a{position:static}
}

/* La liste : des titres de colonne plus grands, sur un fond de leur couleur (1er oct. 2026). */
.sue-t thead th[class*="fin-h-"]{font-size:.76rem;font-weight:800;color:var(--ink);box-shadow:inset 0 -4px 0 var(--c);
  padding-top:10px;padding-bottom:10px;line-height:1.2}
.sue-t thead th.fin-h-initial{background:#F1EFEC}
.sue-t thead th.fin-h-apres{background:#FDE7BF}
.sue-t thead th.fin-h-percu{background:var(--ok-soft);color:var(--ok-ink)}
.sue-t thead th.fin-h-encaisse{background:#ECE6DF;color:var(--fa-marron)}
.sue-t thead th.fin-h-previsionnel{background:var(--fin-jaune-clair);color:var(--fa-marron)}
.sue-t thead th.fin-h-rac{background:var(--fa-beige-clair);color:var(--fa-marron)}
.sue-t thead th.fin-h-rendre{background:var(--danger-soft);color:var(--danger)}
body[data-theme="dark"] .sue-t thead th[class*="fin-h-"]{background:var(--bg-2);color:var(--ink)}
.sue-t .fin-v{font-size:.84rem;padding:3px 7px}
.sue-t thead th{font-size:.74rem}
/* Un seul bouton par ligne ; le nom ouvre la fiche (1er oct. 2026). */
.sue-t-nom{appearance:none;border:0;background:none;padding:0;font:inherit;font-size:.85rem;font-weight:800;color:var(--ink);
  cursor:pointer;text-align:left;display:block}
.sue-t-nom:hover{text-decoration:underline;text-underline-offset:3px;color:var(--fa-marron)}
.sue-t-attente{display:inline-block;font-size:.74rem;font-weight:700;color:var(--ink-mute);background:var(--bg-2);
  padding:5px 10px;border-radius:999px}
.sue-t-averif{display:inline-block;font-size:.66rem;font-weight:800;color:var(--danger);background:var(--danger-soft);
  padding:1px 6px;border-radius:999px}
.sue-t-opco small{display:block;font-size:.66rem;color:var(--ink-mute);margin-top:2px;overflow:hidden;text-overflow:ellipsis}

/* ── 1er oct. 2026, retour de Théo : « les couleurs en dessous, mais pas
   les fonds » ; des lignes nettes entre les colonnes ; un total par
   classe ; le sélecteur de vue à gauche de l'import, en haut. ── */
.sue-t thead th[class*="fin-h-"]{background:var(--surface);color:var(--ink);box-shadow:inset 0 -4px 0 var(--c)}
.sue-t thead th.fin-h-percu,.sue-t thead th.fin-h-encaisse,.sue-t thead th.fin-h-previsionnel,
.sue-t thead th.fin-h-rac,.sue-t thead th.fin-h-rendre{color:var(--ink)}
body[data-theme="dark"] .sue-t thead th[class*="fin-h-"]{background:var(--surface)}
.sue-t th + th,.sue-t td + td{border-left:1px solid var(--border-2)}
.sue-t tr.sue-t-total td{font-weight:800;color:var(--ink);background:var(--fa-blanc);border-top:2px solid var(--ink);
  border-bottom:0;font-size:.8rem}
body[data-theme="dark"] .sue-t tr.sue-t-total td{background:var(--bg-2)}
.sue-t tr.sue-t-total td:first-child{text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}
.sue-t tr.sue-t-total:hover td{background:var(--fa-blanc)}
.enc-h-d{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.enc-vue-n{min-width:132px}
.enc-c .enc-h{align-items:flex-start}

/* ── Plusieurs contrats (Théo, 1er oct. 2026) : une ligne par contrat,
   l'actuel d'abord, les anciens dessous, en plus clair — rattachés à la
   ligne du dessus par un petit coude. Le bouton reste net. ── */
.sue-t tr.sue-t-ancien > td:not(:last-child),.kf-t tr.kf-ancien > td{opacity:.55}
.sue-t tr.sue-t-ancien .sue-t-qui{position:relative;padding-left:32px}
.sue-t tr.sue-t-ancien .sue-t-qui::before{content:'';position:absolute;left:14px;top:0;width:10px;height:50%;
  border-left:2px solid var(--ink-mute);border-bottom:2px solid var(--ink-mute);border-bottom-left-radius:6px}
.sue-t tr.sue-t-ancien .sue-t-nom{font-weight:600}
.sue-t tr.sue-t-ancien:hover > td,.kf-t tr.kf-ancien:hover > td{opacity:.9}
.sue2.sue2-ancien > :not(.sue2-actions){opacity:.55}

/* ── 1er oct. 2026 (Théo) : les titres d'argent CENTRÉS, écrits en entier
   (« Prévisionnel » était coupé) ; les montants centrés sous eux. ── */
.sue-t thead th.n{text-align:center;overflow:visible;text-overflow:clip;white-space:normal;
  -webkit-hyphens:auto;hyphens:auto;padding-left:4px;padding-right:4px}
.sue-t td.n{text-align:center}

/* ── L'état du reste à charge (Théo, 1er oct. 2026) : pointillés = à
   facturer, plein = facturé, coché et cerclé de marron = perçu (il compte
   alors dans l'encaissé). Le détail s'ouvre au survol (.rac-bulle). ── */
.fin-v-rac.rac-a_facturer{background:var(--fa-beige-clair);outline:1.5px dashed rgba(46,32,23,.5);outline-offset:-1.5px}
.fin-v-rac.rac-facture{background:var(--fa-beige)}
.fin-v-rac.rac-percu{background:var(--fa-beige);outline:2px solid var(--fa-marron);outline-offset:-2px}
.fin-v-rac.rac-percu::before{content:'✓ ';font-weight:900}
.fin-v-rac[data-rac]{cursor:help}
.fin-v-rac[data-rac]:focus-visible{box-shadow:0 0 0 3px var(--fa-orange)}
.rac-bulle{position:fixed;z-index:9999;display:none;min-width:230px;max-width:320px;padding:10px 12px;
  background:var(--surface);color:var(--ink);border:1px solid var(--border-2);border-radius:10px;
  box-shadow:0 8px 24px rgba(46,32,23,.18);pointer-events:none;font-size:.78rem}
.rac-bulle > b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);margin-bottom:6px}
.rac-bl{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:4px 0}
.rac-bl + .rac-bl{border-top:1px solid var(--border)}
.rac-bl em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}
.rac-bl i{font-style:normal;font-size:.72rem}

/* ── « Garanti » (Théo, 1er oct. 2026) : la colonne du SÛR, au bout,
   séparée par un trait marron ; la pastille pleine marron (l'encaissé
   n'est que cerclé). Dans les Encaissements, une catégorie décochée reste
   à l'écran, grisée, et sort des totaux « Net » et « Garanti ». ── */
.fin-h-garanti{--c:var(--fa-marron)}
.sue-t thead th.fin-h-garanti{font-weight:800;color:var(--fa-marron)}
.sue-t th.fin-h-garanti,.sue-t td.fin-c-garanti{border-left:2px solid var(--fa-marron)}
.fin-v-garanti{background:var(--fa-marron);color:#fff;font-weight:800}
body[data-theme="dark"] .fin-v-garanti{background:var(--fa-beige-clair);color:var(--fa-marron)}
.sue-t tr.sue-t-total .fin-v-garanti,.kf-t tr.kf-total .fin-v-garanti{font-size:.86rem}
.enc-u tr.enc-off > th,.enc-u tr.enc-off > td{opacity:.35}
.enc-u tr.enc-off .enc-pil{text-decoration:line-through}
.enc-formule{display:block;margin-top:3px;font-size:.66rem;font-weight:600;color:var(--ink-mute);
  text-transform:none;letter-spacing:0;white-space:normal;line-height:1.3}
.enc-p:not(.on) i{opacity:.45}
/* Huit colonnes d'argent : des marges plus serrées pour que les totaux
   tiennent sans être coupés. */
.sue-t td.n{padding-left:5px;padding-right:5px}
.sue-t td.sue-t-opco{padding-left:8px;padding-right:8px}
.sue-t td:last-child{padding-left:6px;padding-right:6px}
.sue-t .fin-v{padding:3px 5px}

/* ── Perdu et Garanti dans les Encaissements (Théo, 1er oct. 2026) ──
   Perdu : rouge cerclé (le trop-perçu est rouge plein), un contrat par
   sous-ligne. Garanti : la dernière ligne, pleine marron — ce qui est sûr
   même si l'étudiant abandonne demain. */
.fin-r-perdu{--c:var(--danger)}
.enc-pil.fin-r-perdu{background:var(--surface);color:var(--danger);border:1.5px solid var(--danger)}
.enc-u tr.fin-r-perdu td,.enc-u tr.fin-r-perdu-s td{color:var(--danger)}
.enc-u tr.g-e.enc-u-net.enc-u-garanti:not(.enc-u-g) th,.enc-u tr.g-e.enc-u-net.enc-u-garanti:not(.enc-u-g) td,
.enc-u tr.g-e.enc-u-net.enc-u-garanti:not(.enc-u-g) .c-a3{background:var(--fa-marron);color:#fff;border-top:0}
.enc-u tr.enc-u-garanti .enc-formule,.enc-u tr.enc-u-garanti .enc-zero{color:var(--fa-beige)}
body[data-theme="dark"] .enc-u tr.g-e.enc-u-net.enc-u-garanti:not(.enc-u-g) th,body[data-theme="dark"] .enc-u tr.g-e.enc-u-net.enc-u-garanti:not(.enc-u-g) td,
body[data-theme="dark"] .enc-u tr.g-e.enc-u-net.enc-u-garanti:not(.enc-u-g) .c-a3{background:var(--fa-beige-clair);color:var(--fa-marron)}
body[data-theme="dark"] .enc-u tr.enc-u-garanti .enc-formule{color:var(--fa-marron)}
.enc-u tr.enc-u-g th.c-lab{white-space:normal}

/* ── Garanti sur la fiche contrat (1er oct. 2026) : la même teinte que
   la colonne de la liste — marron plein pour le chiffre du sûr. ── */
.fk-garanti{background:var(--fa-beige-clair)}
.fk-garanti .fk-v{color:var(--fa-marron)}
.fx-r.fx-garanti{border-top:2px solid var(--fa-marron)}
.fx-r.fx-garanti > b{color:var(--fa-marron);font-weight:800}
body[data-theme="dark"] .fk-garanti{background:var(--bg-2)}
body[data-theme="dark"] .fk-garanti .fk-v,body[data-theme="dark"] .fx-r.fx-garanti > b{color:var(--ink)}

/* ── États des échéances, reste à charge en échéances, régularisation
   (Théo, 1er oct. 2026) ── */
.fc-modale .fc-ech-l .fc-ech-etat{grid-column:2/-1;justify-self:start;margin-top:-2px}
.fc-ech-etat .seg-b{font-size:.7rem;padding:3px 9px}
.fc-modale .fc-ech-l.fc-ech-rac{grid-template-columns:26px minmax(0,1fr) minmax(0,120px) 34px}
.fc-regul{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}
.fc-regul small{font-size:.74rem;font-weight:700;color:var(--ink-soft)}
.fc-regul .seg-b{font-size:.74rem}
.fc-etape-t .seg + .seg{margin-left:6px}

/* ══════════ LA FENÊTRE FINANCEMENT, RESSERRÉE (Théo, 1er oct. 2026) ══════════
   Plus large ; chaque échéance tient sur UNE ligne : mois · montant ·
   état (menu déroulant) · prévisionnel · retirer. L'état se voit :
   à facturer sans couleur, facturé surligné orange, perçu surligné vert.
   Le reste à charge : ses deux choix (à l'année / en échéances, et le
   plafond) côte à côte, à droite du titre. */
.modal.fc-modale{max-width:900px}
.fc-modale .fc-etape{padding:18px 20px 14px;margin-bottom:14px}
.fc-modale .fc-etape-t{margin-bottom:14px}
.fc-modale .fc-ech-l,
.fc-modale .fc-ech-l.est-prev{grid-template-columns:26px minmax(0,1fr) 130px 136px auto 34px;margin-bottom:8px}
.fc-modale .fc-ech-l.fc-ech-rac{grid-template-columns:26px minmax(0,1fr) 130px 136px 34px}
.fc-modale .fc-ech-l .select,.fc-modale .fc-ech-l .input{height:38px}
.fc-etat-sel{font-weight:700;font-size:.8rem}
.fc-etat-sel.e-a_facturer{color:var(--ink-soft)}
.fc-etat-sel.e-facture{background-color:rgba(246,157,0,.16);border-color:var(--fa-orange);color:var(--fa-marron)}
.fc-etat-sel.e-percu{background-color:var(--ok-soft);border-color:var(--ok);color:var(--ok-ink)}
body[data-theme="dark"] .fc-etat-sel.e-facture{background-color:rgba(246,157,0,.22);color:var(--ink)}
/* Le reste à charge : les deux sélecteurs sur la ligne du titre. */
#fc-etape-rac .fc-etape-t{flex-wrap:wrap}
#fc-etape-rac .fc-etape-t h5{flex:0 0 auto;min-width:0;margin-right:auto}
#fc-etape-rac .fc-etape-t .seg{width:auto;margin-left:0}
#fc-etape-rac .fc-etape-t .seg-b{flex:0 0 auto;font-size:.76rem;padding:7px 11px}
/* Une année de reste à charge, sur une ligne : montant · calculé ·
   facturé en · état. */
.fc-modale .fc-rac .fc-ligne{grid-template-columns:120px 140px 86px minmax(0,1fr) 136px;padding:10px 0}
.fc-modale .fc-rac{padding-bottom:4px;margin-bottom:0}
.fc-modale .fc-rac .fc-ligne .fc-etat-sel{height:38px}
/* L'onglet Financement de la fiche : les mêmes couleurs. */
.fx-rac-a_facturer{background:transparent;color:var(--ink-soft);border:1px solid var(--border)}
.fx-rac-facture{background:rgba(246,157,0,.16);color:var(--fa-marron);border:1px solid var(--fa-orange)}
.fx-rac-percu{background:var(--ok-soft);color:var(--ok-ink);border:1px solid var(--ok)}
.fc-regul{margin-top:10px;padding-top:10px}
@media (max-width:760px){
  .fc-modale .fc-ech-l,.fc-modale .fc-ech-l.est-prev{grid-template-columns:26px minmax(0,1fr) minmax(0,1fr) 34px;
    grid-template-areas:"n mois mois x" "mt etat prev prev";row-gap:6px;padding-bottom:10px;border-bottom:1px dashed var(--border)}
  .fc-modale .fc-ech-l.fc-ech-rac{grid-template-columns:26px minmax(0,1fr) minmax(0,1fr) 34px;
    grid-template-areas:"n mois mois x" "mt mt etat etat"}
  .fc-modale .fc-ech-l > .fc-ech-n{grid-area:n}
  .fc-modale .fc-ech-l > .select:not(.fc-etat-sel){grid-area:mois}
  .fc-modale .fc-ech-l > .fc-euro{grid-area:mt}
  .fc-modale .fc-ech-l > .fc-etat-sel{grid-area:etat}
  .fc-modale .fc-ech-l > .fc-prev-c{grid-area:prev;justify-self:start}
  .fc-modale .fc-ech-l > [data-retirer],.fc-modale .fc-ech-l > [data-retirer-rac]{grid-area:x}
  .fc-modale .fc-rac .fc-ligne{grid-template-columns:1fr 1fr}
  .fc-modale .fc-rac .fc-ligne .fc-mois{grid-column:1/-1}
  #fc-etape-rac .fc-etape-t .seg{width:100%}
  #fc-etape-rac .fc-etape-t .seg-b{flex:1}
}
/* 38 px de haut : sans marge verticale, sinon le texte est rogné. */
.fc-modale .fc-ech-l .select,.fc-modale .fc-ech-l .input,
.fc-modale .fc-rac .fc-ligne .fc-etat-sel{padding-top:0;padding-bottom:0;line-height:36px}
#fc-etape-rac .fc-etape-t{gap:8px}
#fc-etape-rac .fc-etape-t .seg-b{font-size:.74rem;padding:6px 10px}
@media (max-width:760px){
  .fc-modale .fc-ech-l,.fc-modale .fc-ech-l.est-prev{grid-template-areas:"n mois mois x" "mt mt etat etat" ". prev prev prev"}
  .fc-modale .fc-ech-l.fc-ech-rac{grid-template-areas:"n mois mois x" "mt mt etat etat"}
}
@media (max-width:760px){
  .fc-etat-sel{font-size:.74rem;padding-left:10px;padding-right:26px}
  .fc-regul .seg{max-width:100%;min-width:0}
  .fc-regul .seg-b{white-space:normal;min-width:0;line-height:1.2;text-align:center}
}

/* ── Montant annuel à l'allure de l'échéancier ; encadré de
   régularisation après une rupture (Théo, 1er oct. 2026) ── */
.fc-modale .fc-ech-l.fc-ech-an{grid-template-columns:26px minmax(0,1fr) 130px 136px auto;margin-bottom:0}
.fc-ech-tout{display:flex;align-items:center;height:38px;padding:0 12px;border-radius:10px;
  background:var(--bg-2);color:var(--ink-soft);font-size:.82rem;font-weight:600}
.fc-modale .fc-ech-an .fc-euro .input{padding-right:58px}
.fc-regul{display:block;margin-top:14px;padding:14px 16px 12px;border:1.5px solid var(--fa-marron);
  border-radius:12px;background:var(--fa-beige-clair)}
.fc-regul[hidden]{display:none}
body[data-theme="dark"] .fc-regul{background:var(--bg-2);border-color:var(--border-2)}
.fc-regul-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.fc-regul-h b{font-size:.9rem;color:var(--fa-marron)}
.fc-regul-h small{font-size:.74rem;color:var(--ink-soft);font-weight:600}
.fc-regul-chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
.fc-rg[title]{cursor:help}
.fc-rg{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 11px}
.fc-rg small{display:block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.fc-rg b{display:block;font-size:1rem;font-variant-numeric:tabular-nums;margin-top:2px}
.fc-rg-trop{background:var(--danger-soft);border-color:var(--danger)}
.fc-rg-trop b,.fc-rg-trop small{color:var(--danger)}
.fc-rg-reste{background:rgba(246,157,0,.16);border-color:var(--fa-orange)}
.fc-rg-reste b{color:var(--fa-marron)}
.fc-rg-ok{background:var(--ok-soft);border-color:var(--ok)}
.fc-rg-ok b{color:var(--ok-ink)}
.fc-ech-ajust .fc-ech-n{background:var(--fa-marron);color:#fff}
.fc-ech-ajust .fc-ech-n svg.ico{width:12px;height:12px}
.fc-regul .fc-ajout{margin:2px 0 0}
@media (max-width:760px){
  .fc-modale .fc-ech-l.fc-ech-an{grid-template-columns:26px minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"n mt etat" ". prev prev"}
  .fc-ech-an .fc-ech-tout{display:none}
  .fc-regul-chiffres{grid-template-columns:1fr 1fr}
}

/* ── Perte possible (le maintien court encore) : rouge en pointillés ;
   perte définitive : rouge plein cerclé (1er oct. 2026). ── */
.fin-r-perte-p{--c:var(--danger)}
.enc-pil.fin-r-perte-p{background:var(--surface);color:var(--danger);border:1.5px dashed var(--danger)}
.enc-u tr.fin-r-perte-p td{color:var(--danger);opacity:.75}
.fk-perte-p .fk-v{color:var(--danger);opacity:.7}
.fx-perte-p > b{color:var(--danger);opacity:.75}

/* ── La colonne Perte (1er oct. 2026) : potentielle en pointillés rouges,
   définitive en rouge plein cerclé ; sur un total, les deux l'une sous
   l'autre. ── */
.fin-h-perte{--c:var(--danger)}
.fin-v-perte{background:var(--surface);color:var(--danger);border:1.5px solid var(--danger)}
.fin-v-perte-pot{background:var(--surface);color:var(--danger);border:1.5px dashed var(--danger);opacity:.85}
td.n .fin-v-perte + .fin-v-perte-pot{margin-top:4px}

/* ── Le tableau de bord en CINQ cartes : le potentiel en avant (carte
   pleine marron), puis garanti, à venir, perte potentielle, perte
   définitive (Théo, 1er oct. 2026). ── */
.db-fin.db-fin-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.page[data-vue="dashboard"] .db-f.t-ink{background:var(--fa-marron);border-color:var(--fa-marron)}
.db-f.t-ink .db-f-t{color:var(--fa-beige)}
.db-f.t-ink .db-f-n{color:#fff;font-size:32px}
.db-f.t-ink .db-f-d{color:rgba(255,255,255,.72)}
body[data-theme="dark"] .page[data-vue="dashboard"] .db-f.t-ink{background:var(--fa-beige-clair);border-color:var(--fa-beige-clair)}
body[data-theme="dark"] .db-f.t-ink .db-f-t,body[data-theme="dark"] .db-f.t-ink .db-f-n,
body[data-theme="dark"] .db-f.t-ink .db-f-d{color:var(--fa-marron)}
.db-f.db-f-pointilles .db-f-j i{background:repeating-linear-gradient(90deg,var(--danger) 0 6px,transparent 6px 10px)}
.db-f.db-f-pointilles .db-f-b{border:1px dashed var(--danger)}
.db-f.db-f-pointilles .db-f-n.est-teinte{opacity:.8}
@media (max-width:1200px){
  .db-fin.db-fin-5{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}
  .db-fin.db-fin-5 > .db-f.t-ink{grid-column:1/-1}
}
@media (max-width:1000px){
  .db-fin.db-fin-5{grid-template-columns:1fr}
}
/* Dix colonnes d'argent : pastilles un peu plus serrées. */
.sue-t .fin-v{font-size:.78rem;padding:3px 4px}
.sue-t td.n{padding-left:4px;padding-right:4px}
.sue-t-g .btn-sm{padding-left:10px;padding-right:10px}
.sue-t td.sue-t-opco{font-size:.76rem}

/* ── Les cinq cartes, harmonisées (Théo, 1er oct. 2026 : « trop de vide
   en bas ») : la rangée prend la hauteur de son contenu, plus celle de
   l'écran ; chaque carte a la même charpente — titre, montant,
   pastille, barre, détail — et plus de pied. ── */
.db-fin.db-fin-5{flex:0 0 auto;max-height:none;grid-template-rows:auto;align-items:stretch}
.db-fin-5 .db-f-b{margin-top:12px}
.db-fin-5 .db-f-j{margin-top:14px}
.db-fin-5 .db-f-d{margin:12px 0 0}
.db-f-note{display:block;margin-top:6px;font-size:11.5px;font-weight:800;color:var(--danger);line-height:1.35}
.db-f.t-ink .db-f-b{background:rgba(255,255,255,.14);color:var(--fa-beige)}
.db-f-compo{display:flex;gap:2px;height:7px;margin-top:14px;border-radius:var(--r-full);overflow:hidden;
  background:rgba(255,255,255,.12)}
.db-f-compo i{display:block;height:100%}
.db-f-compo .c-ok{background:var(--ok)}
.db-f-compo .c-brand{background:var(--brand)}
.db-f-compo .c-pot{background:repeating-linear-gradient(90deg,var(--danger) 0 5px,transparent 5px 8px)}
.db-f-compo .c-def{background:var(--danger)}
body[data-theme="dark"] .db-f.t-ink .db-f-b{background:rgba(46,32,23,.12);color:var(--fa-marron)}
body[data-theme="dark"] .db-f-compo{background:rgba(46,32,23,.12)}

/* ══════════ DEMANDES : DEUX PAGES EN UNE (Théo, 1er oct. 2026) ══════════
   Le sélecteur à flèches à droite du titre (Remboursements ‹ › Améliorations),
   les cinq étapes d'un remboursement en tuiles, puis un tableau par classe
   sur le modèle de Suivi & financements. */
.dm-page-h{align-items:center}
.dm-titre{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dm-vue .enc-vue-n{min-width:150px}
button.et-stat{border:0;cursor:pointer;font:inherit;font-size:.74rem;font-weight:700}
button.et-stat.on{box-shadow:0 0 0 2px currentColor}
.et-stat.st-danger{background:var(--danger-soft);color:var(--danger)}
.dm-tuiles{display:flex;align-items:stretch;gap:6px;margin:4px 0 18px}
.dm-tuile{flex:1;min-width:0;appearance:none;font:inherit;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-top:4px solid var(--c,var(--border-2));
  border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;transition:box-shadow .15s}
.dm-tuile:hover{box-shadow:var(--sh-md)}
.dm-tuile.on{background:var(--fa-beige-clair);border-color:var(--fa-marron);border-top-color:var(--c,var(--fa-marron))}
body[data-theme="dark"] .dm-tuile.on{background:var(--bg-2)}
.dm-tuile-h{display:flex;align-items:center;gap:7px;font-size:.76rem;font-weight:800;color:var(--ink-soft)}
.dm-tuile-h em{font-style:normal;width:18px;height:18px;border-radius:50%;background:var(--bg-2);color:var(--ink-soft);
  display:inline-flex;align-items:center;justify-content:center;font-size:.66rem}
.dm-tuile-h em:empty{display:none}
.dm-tuile b{font-size:1.6rem;font-weight:800;line-height:1.1;margin-top:4px;color:var(--ink)}
.dm-tuile small{font-size:.76rem;font-weight:700;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.dm-t-a_verifier{--c:var(--ink-mute)}
.dm-t-complet{--c:var(--fa-beige)}
.dm-t-envoye{--c:#F9C46B}
.dm-t-facture{--c:var(--fa-orange)}
.dm-t-vire{--c:var(--ok)}
.dm-t-vire b{color:var(--ok-ink)}
.dm-fleche{display:flex;align-items:center;color:var(--ink-mute)}
.dm-fleche svg.ico{width:14px;height:14px}
/* Le tableau */
.sue-t.dm-t td{white-space:normal;vertical-align:middle}
.dm-docs{display:flex;flex-wrap:wrap;gap:4px}
.dm-doc{appearance:none;display:inline-flex;align-items:center;gap:4px;max-width:160px;padding:3px 9px;
  border:1px solid var(--border-2);border-radius:999px;background:var(--surface);color:var(--ink);
  font:inherit;font-size:.72rem;font-weight:700;cursor:pointer}
.dm-doc:hover{border-color:var(--fa-marron);background:var(--fa-beige-clair)}
.dm-doc svg.ico{width:12px;height:12px;flex:none;color:var(--ink-mute)}
.dm-doc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-docs-vide{font-size:.76rem;color:var(--ink-mute)}
.dm-av b{display:block;font-size:.8rem;font-weight:800;color:var(--ink);line-height:1.25}
.dm-av small{display:block;font-size:.7rem;color:var(--ink-mute);margin-top:1px}
.dm-pas{display:flex;gap:3px;margin-bottom:6px;max-width:180px}
.dm-pas i{flex:1;height:6px;border-radius:999px;background:var(--bg-2)}
.dm-pas i.fait{background:var(--fa-orange)}
.dm-pas i.ici{box-shadow:0 0 0 2px var(--fa-beige)}
.dm-l-vire .dm-pas i{background:var(--ok)}
.dm-av b.dm-av-vire{color:var(--ok-ink)}
.dm-av b.dm-av-a_verifier{color:var(--ink-soft)}
.dm-av-attente b{color:var(--warn-ink)}
.dm-av-refus b{color:var(--danger)}
.dm-av-refus small{white-space:normal}
.sue-t tr.dm-l-vire > td:not(:last-child),.sue-t tr.dm-l-refusee > td:not(:last-child),
.sue-t tr.dm-l-prise > td:not(:last-child){opacity:.7}
.dm-t .sue-t-g{display:flex;align-items:center;gap:4px;justify-content:flex-end;flex-wrap:nowrap}
.dm-suite{white-space:nowrap}
.dm-clos{font-size:.74rem;font-weight:700;color:var(--ink-mute);margin-right:4px}
.dm-idee{margin:0 0 4px;font-size:.82rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.dm-tag{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:800;padding:3px 9px;
  border-radius:999px;background:var(--fa-beige-clair);color:var(--fa-marron);border:1px solid var(--fa-beige)}
.dm-tag svg.ico{width:12px;height:12px}
.dm-tag-idee_partenariat{background:var(--bg-2);border-color:var(--border-2);color:var(--ink-soft)}
.dm-ent{display:block;font-size:.7rem;color:var(--ink-mute);margin-top:3px}
.dm-pris{display:inline-flex;align-items:center;gap:4px;font-size:.76rem;font-weight:800;color:var(--ok-ink)}
.dm-pris svg.ico{width:13px;height:13px}
.dm-attente{font-size:.76rem;font-weight:800;color:var(--warn-ink)}
.dos-av{margin:0 0 12px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg-2)}
.dos-av .dm-pas{max-width:260px}
@media (max-width:900px){
  .dm-tuiles{flex-wrap:wrap}
  .dm-tuile{flex:1 1 calc(50% - 6px)}
  .dm-fleche{display:none}
}
@media (max-width:640px){
  .dm-page-h .ph-actions{width:100%}
  .dm-page-h .ph-actions > *{flex:1 1 100%;width:100% !important}
}
.sue-t tr.dm-l-idee{cursor:pointer}
.sue-t tr.dm-l-idee:hover td{background:var(--fa-beige-clair)}
.dm-lire{display:inline-block;font-size:.72rem;font-weight:800;color:var(--fa-orange);margin-top:2px}

/* ── Remboursements, proposition A (Théo, 1er oct. 2026) : lignes
   compactes, cadres et filets, une barre de couleur d'étape à gauche,
   l'étape en pastille colorée comme les tuiles. ── */
.sue-t.dm-t2{border:1px solid var(--border-2);border-radius:12px;overflow:hidden;border-collapse:separate;border-spacing:0}
.sue-t.dm-t2 thead th{background:var(--fa-beige);color:var(--fa-marron);font-weight:800;font-size:.72rem;
  box-shadow:none;border-bottom:1px solid var(--border-2);padding:8px 10px}
body[data-theme="dark"] .sue-t.dm-t2 thead th{background:var(--bg-2);color:var(--ink)}
.sue-t.dm-t2 td{padding:8px 10px;border-bottom:1px solid var(--border)}
.sue-t.dm-t2 th + th,.sue-t.dm-t2 td + td{border-left:1px solid var(--border)}
.sue-t.dm-t2 .dm-bar{padding:0 !important;width:6px}
.dm-b-a_verifier{background:#B4B2A9}
.dm-b-complet{background:var(--fa-beige)}
.dm-b-envoye{background:#F9C46B}
.dm-b-facture{background:var(--fa-orange)}
.dm-b-vire{background:var(--ok)}
.dm-b-a_completer{background:var(--warn)}
.dm-b-refusee{background:var(--danger)}
.dm-qui{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-qui .sue-t-nom{display:inline;font-size:.84rem}
.dm-date{font-size:.72rem;color:var(--ink-mute);font-weight:600}
.dm-pj{appearance:none;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  border:1px solid var(--border-2);background:var(--fa-beige-clair);color:var(--fa-marron);
  font:inherit;font-size:.74rem;font-weight:800;cursor:pointer;white-space:nowrap}
.dm-pj:hover{border-color:var(--fa-marron)}
.dm-pj svg.ico{width:12px;height:12px}
.dm-pj-vide{background:var(--surface);color:var(--danger);border-color:var(--danger-soft);cursor:default}
.dm-et{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 4px;border-radius:999px;
  font-size:.76rem;font-weight:800;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.dm-et i{font-style:normal;flex:none;width:18px;height:18px;border-radius:50%;background:rgba(46,32,23,.1);
  display:inline-flex;align-items:center;justify-content:center;font-size:.68rem}
.dm-et em{font-style:normal;font-weight:600;opacity:.8}
.dm-e-a_verifier{background:var(--bg-2);color:var(--ink-soft)}
.dm-e-complet{background:var(--fa-beige);color:var(--fa-marron)}
.dm-e-envoye{background:#F9C46B;color:var(--fa-marron)}
.dm-e-facture{background:var(--fa-orange);color:var(--fa-marron)}
.dm-e-vire{background:var(--ok-soft);color:var(--ok-ink)}
.dm-e-a_completer{background:var(--warn-soft);color:var(--warn-ink)}
.dm-e-refusee{background:var(--danger-soft);color:var(--danger)}
.sue-t.dm-t2 tr.sue-t-total td{border-top:2px solid var(--fa-marron)}

/* ══════════ REMBOURSEMENTS, PLUS VIVANT (Théo, 1er oct. 2026) ══════════
   Des lignes qui respirent, l'initiale de l'étudiant de la couleur de son
   étape, une barre de répartition par classe, des boutons de la couleur
   de l'étape qu'ils déclenchent. */
.sue-t.dm-t2{box-shadow:0 1px 2px rgba(46,32,23,.06),0 4px 14px rgba(46,32,23,.05)}
.sue-t.dm-t2 td{padding:10px 12px}
.sue-t.dm-t2 tbody tr:not(.sue-t-total):hover td:not(.dm-bar){background:var(--fa-beige-clair)}
body[data-theme="dark"] .sue-t.dm-t2 tbody tr:not(.sue-t-total):hover td:not(.dm-bar){background:var(--bg-2)}
.dm-ini{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  font-size:.7rem;font-weight:800;vertical-align:middle;margin-right:9px;flex:none}
.dm-qui .sue-t-nom{vertical-align:middle}
.dm-go{border:1px solid transparent;font-weight:800;color:var(--fa-marron)}
.dm-go svg.ico{width:13px;height:13px}
.dm-go-complet{background:var(--fa-beige);border-color:#EBC27A}
.dm-go-envoye{background:#F9C46B;border-color:#E9AE48}
.dm-go-facture{background:var(--fa-orange);border-color:#DB8A00}
.dm-go-vire{background:var(--ok);border-color:var(--ok);color:#fff}
.dm-go:hover{filter:brightness(.96)}
.dm-incomplet{background:var(--surface);border:1px solid var(--warn);color:var(--warn-ink);font-weight:800}
.dm-incomplet:hover{background:var(--warn-soft)}
.dm-incomplet-plein{background:var(--warn);border-color:var(--warn);color:#fff}
.dm-clos-ok{display:inline-flex;align-items:center;gap:4px;color:var(--ok-ink)}
.dm-clos-ok svg.ico{width:13px;height:13px}
.cls-sep .dm-rep{display:inline-flex;gap:2px;width:150px;height:8px;border-radius:999px;overflow:hidden;background:var(--bg-2)}
.cls-sep .dm-rep i{display:block;height:100%}
.cls-sep .dm-rep + small{font-weight:700}

/* ── La fenêtre d'un remboursement : la frise des étapes, puis la
   décision du moment ── */
.dos-qui .dm-ini{width:26px;height:26px;margin-right:7px}
.dr-frise{list-style:none;margin:10px 0 16px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.dr-frise li{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.dr-frise li + li::before{content:'';position:absolute;top:15px;right:50%;width:100%;height:3px;background:var(--border-2);z-index:0}
.dr-frise li.fait + li.fait::before{background:var(--fa-orange)}
.dr-frise li i{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:.8rem;font-weight:800;background:var(--surface);border:2px solid var(--border-2);color:var(--ink-mute)}
.dr-frise li i svg.ico{width:15px;height:15px}
.dr-frise li b{font-size:.76rem;color:var(--ink-mute);font-weight:800}
.dr-frise li small{font-size:.68rem;color:var(--ink-mute);min-height:1em}
.dr-frise li.fait b{color:var(--ink)}
.dr-frise li.fait i{border-color:transparent;color:var(--fa-marron)}
.dr-frise li.dm-st-a_verifier i{background:#D8D5CD}
.dr-frise li.dm-st-complet i{background:var(--fa-beige)}
.dr-frise li.dm-st-envoye i{background:#F9C46B}
.dr-frise li.dm-st-facture i{background:var(--fa-orange)}
.dr-frise li.dm-st-vire i{background:var(--ok);color:#fff}
.dr-frise li.ici i{box-shadow:0 0 0 4px rgba(246,157,0,.25)}
.dr-action{margin:0 0 16px;padding:14px 16px;border-radius:12px;background:var(--fa-beige-clair);
  border:1px solid var(--fa-beige);border-left:5px solid var(--fa-marron)}
body[data-theme="dark"] .dr-action{background:var(--bg-2)}
.dr-action > b{display:flex;align-items:center;gap:6px;font-size:.95rem;color:var(--fa-marron)}
.dr-action > small{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:4px}
.dr-boutons{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.dr-retour{appearance:none;border:0;background:none;font:inherit;font-size:.76rem;font-weight:700;color:var(--ink-mute);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:4px}
.dr-retour:hover{color:var(--ink)}
.dr-renvoi{margin-top:10px}
.dr-renvoi label{display:block;font-size:.8rem;font-weight:800;margin-bottom:6px;color:var(--warn-ink)}
.dr-renvoi label small{font-weight:600;color:var(--ink-mute)}
.dr-motif{margin:8px 0 0;font-size:.86rem;font-style:italic;color:var(--ink)}
.dr-a-verif{border-left-color:var(--fa-orange)}
.dr-a-attente{background:var(--warn-soft);border-color:var(--warn);border-left-color:var(--warn)}
.dr-a-attente > b{color:var(--warn-ink)}
.dr-a-refus{background:var(--danger-soft);border-color:var(--danger-soft);border-left-color:var(--danger)}
.dr-a-refus > b{color:var(--danger)}
.dr-a-clos{background:var(--ok-soft);border-color:var(--ok-soft);border-left-color:var(--ok)}
.dr-a-clos > b{color:var(--ok-ink)}
.dr-a-clos > b svg.ico{width:16px;height:16px}
.dr-a-clos .dr-retour{margin-top:6px}
.dos-n{font-style:normal;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--fa-beige);color:var(--fa-marron);font-size:.7rem;font-weight:800;margin-left:4px}
.dr-refuser{color:var(--danger)}
.dos-pied{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%}
@media (max-width:640px){
  .dr-frise li b{font-size:.66rem}
  .dr-frise li i{width:26px;height:26px}
  .dr-frise li + li::before{top:12px}
}

/* ── Rien ne dépasse, et plus de couleur (Théo, 1er oct. 2026) : la case
   de l'étape resserrée, les gestes qui passent à la ligne plutôt que de
   déborder, chaque ligne légèrement teintée de la couleur de son étape. ── */
.sue-t.dm-t2 td{overflow:hidden}
.dm-t2 .sue-t-g{flex-wrap:wrap;row-gap:4px;justify-content:flex-end}
.dm-t2 .sue-t-g .btn-sm{padding:5px 10px;font-size:.76rem}
.dm-et{font-size:.72rem;padding:3px 9px 3px 3px;gap:6px}
.dm-et i{width:16px;height:16px;font-size:.62rem}
.dm-et em{display:none}
.dm-et-date{display:block;font-size:.68rem;color:var(--ink-mute);font-weight:600;margin:3px 0 0 4px}
.sue-t.dm-t2 tr.dm-l-complet td:not(.dm-bar){background:rgba(251,222,170,.22)}
.sue-t.dm-t2 tr.dm-l-envoye td:not(.dm-bar){background:rgba(249,196,107,.16)}
.sue-t.dm-t2 tr.dm-l-facture td:not(.dm-bar){background:rgba(246,157,0,.09)}
.sue-t.dm-t2 tr.dm-l-vire td:not(.dm-bar){background:rgba(29,158,117,.06)}
.sue-t.dm-t2 tr.dm-l-a_completer td:not(.dm-bar){background:rgba(239,159,39,.08)}
body[data-theme="dark"] .sue-t.dm-t2 tbody tr td:not(.dm-bar){background:transparent}
.sue-t.dm-t2 tbody tr:not(.sue-t-total):hover td:not(.dm-bar){background:var(--fa-beige-clair)}
.dm-tuile{overflow:hidden}
.dm-tuile-h{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Les tableaux des demandes n'ont que cinq ou six colonnes : ils tiennent
   dans la carte (plus de largeur minimale héritée de Suivi). */
.sue-t.dm-t,.sue-t.dm-t2{min-width:720px}

/* ── Accès entreprises : la case « Alternants sans tuteur » (Théo, 1er
   oct. 2026), en haut de page, ouverte d'office, à l'allure de « Tuteurs
   sans alternant » mais d'un cadre ambré : ce sont des alternants à
   rattacher. ── */
.ae-orph{margin:0 0 16px;border:1.5px solid var(--warn);border-radius:14px;background:var(--warn-soft);overflow:hidden}
.ae-orph .ae-sans-t{background:transparent;color:var(--warn-ink)}
.ae-orph .ae-sans-t i{background:var(--warn);color:#fff}
.ae-orph .ae-sans-l{display:none;background:var(--surface)}
.ae-orph.ouvert .ae-sans-l{display:block}
.ae-orph.ouvert .ae-sans-t svg.ico{transform:rotate(90deg)}
.ae-orph .ae-row .ae-qui .nom{font-weight:800;color:var(--ink)}
.ae-menu-rien{font-size:.8rem;color:var(--ink-mute);margin:6px 10px}

/* ══════════ FICHE CONTRAT — L'ONGLET FINANCEMENT EN TABLEAUX (1er oct. 2026) ══════════
   Le style du tableau « Financement des contrats » : une colonne par
   état, soulignée de sa couleur ; le montant en pastille dans la colonne
   où il en est. Accès rapides au-dessus. */
.fx-acces{margin-bottom:16px}
.kfin-tete{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.kfin-tete h4{margin:0}
.kfin-tete small{color:var(--ink-soft);font-weight:600;font-size:.78rem}
.kfin-tete .btn{margin-left:auto}
.kfin-attente{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--bg-2);color:var(--ink-soft);font-weight:700;font-size:.85rem}
.kfin-squelette{margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--border-2);font-weight:700;font-size:.85rem;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:10px}
.kfin-squelette i{font-style:normal;color:var(--ink-mute)}
.kfin-titre{display:flex;align-items:center;gap:10px;font-size:.95rem;font-weight:800;margin:22px 0 10px}
.kfin-titre::before{content:'';width:10px;height:10px;border-radius:3px;background:var(--c,var(--fa-orange))}
.kfin-titre small{font-size:.78rem;font-weight:600;color:var(--ink-soft)}
.kfin-titre-opco{--c:var(--fa-orange)}
.kfin-titre-ent{--c:var(--fa-marron)}
.kfin-titre-reg{--c:var(--danger)}
body[data-theme="dark"] .kfin-titre-ent{--c:var(--fa-beige)}
.kfin-cadre{border:1px solid var(--border-2);border-radius:12px;overflow:hidden}
.kfin-t{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.84rem}
.kfin-t th,.kfin-t td{padding:10px 12px;border-bottom:1px solid var(--border);border-left:1px solid var(--border);text-align:center;vertical-align:middle}
.kfin-t th:first-child,.kfin-t td:first-child{border-left:0}
.kfin-t thead th{font-size:.78rem;font-weight:800;color:var(--ink);background:var(--surface);box-shadow:inset 0 -4px 0 var(--c,var(--border-2));padding-bottom:12px}
.kfin-t thead th.kfin-g{color:var(--ink-mute);font-weight:700}
.kfin-t .kfin-g{text-align:left}
.kfin-h-prev{--c:var(--fin-jaune)}
.kfin-h-afact{--c:#C9C0B5}
.kfin-h-fact{--c:var(--fa-orange)}
.kfin-h-percu{--c:var(--ok)}
.kfin-h-off{--c:var(--danger)}
.kfin-h-du{--c:var(--fa-marron)}
body[data-theme="dark"] .kfin-h-du{--c:var(--fa-beige)}
.kfin-mois{color:var(--ink-soft);font-weight:700}
.kfin-nom{font-weight:800}
.kfin-rien{color:var(--ink-mute);font-weight:700}
.kfin-t tr.kfin-an td{background:var(--surface-2);text-align:left;font-weight:800;font-size:.8rem;border-left:0}
.kfin-t tr.kfin-an td span{font-weight:600;color:var(--ink-soft);margin-left:8px}
.kfin-t tr.kfin-rup td{background:var(--danger-soft);color:var(--danger);text-align:left;font-weight:800;font-size:.8rem;border-left:0}
.kfin-t tr.kfin-rup td span{font-weight:600;margin-left:8px}
.kfin-t tr.kfin-tot td{border-top:2px solid var(--ink);background:var(--fa-blanc);font-weight:800;border-bottom:0}
body[data-theme="dark"] .kfin-t tr.kfin-tot td{background:var(--bg-2)}
.kfin-t tbody tr:last-child td{border-bottom:0}
/* Les pastilles, une couleur par état — les mêmes que la liste des contrats */
.kfin-v{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:7px;font-weight:800;font-size:.82rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.kfin-prev{background:var(--fin-jaune);color:var(--fa-marron);outline:1px dashed var(--fa-marron);outline-offset:-1px}
.kfin-afact{background:var(--bg-2);color:var(--ink-2);outline:1.5px dashed #B3A99D;outline-offset:-1.5px}
.kfin-fact{background:var(--fa-orange);color:var(--fa-marron)}
.kfin-percu{background:var(--ok-soft);color:var(--ok-ink)}
.kfin-off{background:var(--surface);color:var(--danger);outline:1.5px dashed var(--danger);outline-offset:-1.5px;text-decoration:line-through}
.kfin-du{color:var(--ink);padding-left:0;padding-right:0}
.kfin-trop{background:var(--danger-soft);color:var(--danger)}
.kfin-le{display:block;font-size:.7rem;color:var(--ink-mute);font-weight:600;margin-top:3px}
.kfin-clic{cursor:pointer;transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.kfin-clic:hover{transform:translateY(-1px);box-shadow:0 3px 8px -2px rgba(41,29,19,.25)}
.kfin-clic:focus-visible{box-shadow:0 0 0 3px var(--brand-100)}
.kfin-fl{font-style:normal;font-size:.6rem;opacity:.65}
.kfin-menu{position:absolute;z-index:400;background:var(--surface);border:1px solid var(--border-2);border-radius:12px;box-shadow:var(--sh-lg);padding:6px;display:flex;flex-direction:column;min-width:150px}
.kfin-menu-i{display:flex;align-items:center;gap:8px;border:0;background:none;padding:8px 10px;border-radius:8px;font:inherit;font-size:.82rem;font-weight:700;color:var(--ink);text-align:left;cursor:pointer}
.kfin-menu-i:hover{background:var(--bg-2)}
.kfin-menu-i.on{background:var(--fa-beige-clair)}
.kfin-pt{width:12px;height:12px;border-radius:4px;flex:none}
.kfin-t-reg td{padding:14px 12px}
.kfin-reg-pied{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}
.kfin-calc{margin-right:auto;position:relative;font-size:.8rem}
.kfin-calc summary{cursor:pointer;list-style:none;color:var(--ink-soft);font-weight:700;text-decoration:underline dotted}
.kfin-calc summary::-webkit-details-marker{display:none}
.kfin-calc-d{position:absolute;left:0;bottom:26px;z-index:5;background:var(--surface);border:1px solid var(--border-2);border-radius:12px;box-shadow:var(--sh-lg);padding:8px 14px;min-width:400px}
.kfin-calc-d div{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-top:1px solid var(--border)}
.kfin-calc-d div:first-child{border-top:0}
.kfin-calc-d .kfin-calc-t{font-weight:800}
@media (max-width:900px){
  .kfin-cadre{overflow-x:auto}
  .kfin-t{min-width:720px}
  .kfin-calc-d{min-width:0;width:min(400px,86vw)}
}
/* La régularisation en toutes lettres (1er oct. 2026, 2e passe) */
.kfin-op{margin-top:10px;border:1px solid var(--border-2);border-radius:12px;overflow:visible;max-width:640px;margin-left:auto}
.kfin-op-t{padding:9px 14px;font-size:.78rem;font-weight:800;color:var(--ink-soft);background:var(--surface-2);border-bottom:1px solid var(--border);border-radius:12px 12px 0 0}
.kfin-op-l{display:flex;align-items:center;gap:14px;padding:10px 14px;border-top:1px solid var(--border);font-size:.86rem}
.kfin-op-t + .kfin-op-l{border-top:0}
.kfin-op-l span{flex:1;font-weight:700;color:var(--ink-2)}
.kfin-op-l small{display:block;font-weight:600;font-size:.72rem;color:var(--ink-mute);margin-top:2px}
.kfin-op-l b{font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.kfin-op-r{border-top:2px solid var(--ink)}
.kfin-op-r span{color:var(--ink);font-weight:800}
.kfin-op-rendre b{color:var(--danger)}
.kfin-op-rendre{background:var(--danger-soft)}
.kfin-op-facturer b{color:var(--fa-marron)}
.kfin-op-facturer{background:var(--fa-beige-clair)}
.kfin-op-fait b{color:var(--ink-mute);text-decoration:line-through}
.kfin-op-ok b{color:var(--ok-ink)}
.kfin-op-pied{display:flex;gap:8px;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--border)}
.kfin-op-l .kfin-calc{display:inline-block;margin:0}
.kfin-op-l .kfin-calc summary{display:inline;font-size:.72rem}
.kfin-op .kfin-calc-d{bottom:auto;top:20px}
body[data-theme="dark"] .kfin-op-facturer{background:var(--bg-2)}
/* La régularisation en tableau + bulle d'explication (1er oct. 2026, 3e passe) */
.kfin-t-reg td{padding:14px 12px}
.kfin-aide{cursor:help}
.kfin-aide-c{cursor:help}
.kfin-t thead th.kfin-aide{text-decoration:underline dotted var(--ink-mute);text-underline-offset:3px}
.kfin-aide:focus-visible,.kfin-aide-c:focus-visible{outline:2px solid var(--fa-orange);outline-offset:-2px}
.kfin-bulle{max-width:360px;min-width:260px}
.kfin-bulle p{margin:0;line-height:1.45;color:var(--ink-2)}
.kfin-bulle-c{margin-top:8px;border-top:1px solid var(--border)}
.kfin-bulle-c div{display:flex;justify-content:space-between;gap:14px;padding:4px 0}
.kfin-bulle-c div + div{border-top:1px solid var(--border)}
.kfin-bulle-c em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.kfin-bulle-c div.t{font-weight:800}
.kfin-reg-pied{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
/* La bande de la fiche contrat : chaque chiffre s'explique au survol (1er oct. 2026) */
.fk-aide{cursor:help}
.fk-aide:hover .fk-l{text-decoration:underline dotted var(--ink-mute);text-underline-offset:3px}
.fk-aide:focus-visible{outline:2px solid var(--fa-orange);outline-offset:-2px;border-radius:8px}

/* ══════════ ENCAISSÉ EN VERT (Théo, 1er oct. 2026) ══════════
   Encaissé = l'argent REÇU sur le compte : vert plein. Acquis à ce jour =
   le DROIT de le recevoir, pas encore reçu : vert en pointillés. Les mêmes
   deux codes dans la liste de Suivi & financements, l'onglet Contrats de
   la fiche étudiant, les Encaissements et la bande de la fiche contrat. */
.fin-r-percu{--c:#8CCBA6}
.fin-r-encaisse,body[data-theme="dark"] .fin-r-encaisse{--c:var(--ok)}
.enc-pil.fin-r-percu{background:var(--surface);color:var(--ok-ink);border:1.5px dashed var(--ok)}
.enc-pil.fin-r-encaisse,body[data-theme="dark"] .enc-pil.fin-r-encaisse{background:var(--ok);color:#fff;border:1.5px solid var(--ok)}
.fin-v-percu{background:var(--surface);color:var(--ok-ink);box-shadow:none;outline:1.5px dashed var(--ok);outline-offset:-1.5px}
.fin-v-encaisse,body[data-theme="dark"] .fin-v-encaisse{background:var(--ok);color:#fff;box-shadow:none}
.fin-h-percu{--c:#8CCBA6}
.fin-h-encaisse{--c:var(--ok)}
.fk-c .fk-v.fk-vert{color:var(--ok)}
/* Les titres qui s'expliquent au survol */
.fin-aide{cursor:help}
.sue-t thead th.fin-aide:hover,.enc-u th.fin-aide:hover .enc-pil{text-decoration:underline dotted;text-underline-offset:3px}
.fin-aide:focus-visible{outline:2px solid var(--fa-orange);outline-offset:-2px}

/* ══════════ À FACTURER · FACTURÉ · ENCAISSÉ, ET LE TABLEAU QUI DÉFILE (Théo, 1er oct. 2026) ══════════
   Le chemin de l'argent après l'acquis : à facturer (gris pointillé),
   facturé (cerclé d'orange — l'orange plein reste à « après rupture »),
   encaissé (vert plein). Les tableaux de Suivi & financements et de la
   fiche étudiant défilent de côté ; Garanti (et le bouton) restent fixes
   à droite. Le statut devient une pastille, l'OPCO quatre lettres. */
.fin-h-afacturer{--c:#C9C0B5}
.fin-h-facture{--c:var(--fa-orange)}
.fin-v-afacturer{background:var(--bg-2);color:var(--ink-2);outline:1.5px dashed #B3A99D;outline-offset:-1.5px}
.fin-v-facture{background:var(--surface);color:var(--fa-marron);box-shadow:inset 0 0 0 1.5px var(--fa-orange)}
body[data-theme="dark"] .fin-v-facture{color:var(--ink)}
.fin-r-afacturer{--c:#C9C0B5}
.fin-r-facture{--c:var(--fa-orange)}
.enc-pil.fin-r-afacturer{background:var(--bg-2);color:var(--ink-2);border:1.5px dashed #B3A99D}
.enc-pil.fin-r-facture{background:var(--surface);color:var(--fa-marron);border:1.5px solid var(--fa-orange)}
body[data-theme="dark"] .enc-pil.fin-r-facture{color:var(--ink)}

.sue-t.sue-t-fin{min-width:1310px}
.sue-t.sue-t-fin.kf-t{min-width:1202px}
.sue-t-fin th.fin-h-garanti,.sue-t-fin td.fin-c-garanti{position:sticky;right:0;z-index:2;background:var(--surface);
  box-shadow:-10px 0 12px -10px rgba(41,29,19,.28)}
.sue-t-fin th.sue-t-act,.sue-t-fin td.sue-t-act{position:sticky;right:0;z-index:2;background:var(--surface)}
#zone-suivi .sue-t-fin th.fin-h-garanti,#zone-suivi .sue-t-fin td.fin-c-garanti{right:112px}
.sue-t-fin tr.sue-t-total td.fin-c-garanti,.sue-t-fin tr.sue-t-total td.sue-t-act,
.sue-t-fin tr.kf-total td.fin-c-garanti{background:var(--fa-blanc)}
body[data-theme="dark"] .sue-t-fin tr.sue-t-total td.fin-c-garanti,body[data-theme="dark"] .sue-t-fin tr.sue-t-total td.sue-t-act,
body[data-theme="dark"] .sue-t-fin tr.kf-total td.fin-c-garanti{background:var(--bg-2)}
.sue-t-fin th.sue-t-stc,.sue-t-fin td.sue-t-stc{text-align:center;padding-left:4px;padding-right:4px}
.sue-t-pt{display:inline-block;width:12px;height:12px;border-radius:50%;cursor:help;vertical-align:middle;
  box-shadow:0 0 0 2px var(--surface),0 0 0 3px rgba(41,29,19,.08)}
.sue-t-pt.pt-ok{background:var(--ok)}
.sue-t-pt.pt-info{background:var(--info)}
.sue-t-pt.pt-warn{background:var(--fa-orange)}
.sue-t-pt.pt-danger{background:var(--danger)}
.sue-t-pt.pt-mute{background:var(--ink-mute)}
.sue-t-fin td.sue-t-opco,.sue-t-fin th.sue-t-opco{text-align:center;padding-left:4px;padding-right:4px}
.sue-t-oc{display:inline-block;font-weight:800;font-size:.74rem;letter-spacing:.03em;color:var(--ink-2);cursor:help}
.sue-t-oc.sue-t-averif{padding:1px 7px}
/* Une colonne vide, repliée en fine bande colorée (1er oct. 2026) */
.sue-t-fin thead th.fin-replie{font-size:0;padding-left:0;padding-right:0;cursor:help;
  background-image:repeating-linear-gradient(90deg,transparent 0 13px,var(--border) 13px 14px,transparent 14px 30px)}
.sue-t-fin thead th.fin-replie:hover{background-color:var(--bg-2)}
/* ══════════ COLONNES CACHÉES ET MINI-FLÈCHES (Théo, 1er oct. 2026, 2e passe) ══════════
   Une colonne vide disparaît ENTIÈREMENT (largeur 0) ; une mini flèche
   « › » apparaît dans le titre de la colonne de gauche quand on la survole
   (titre ou cases) pour l'afficher, et « ‹ » la réduit de nouveau. Rien ne
   dépasse : la colonne du bouton est assez large pour « Renseigner ». */
.sue-t-fin thead th.fin-replie{font-size:inherit;padding-left:revert;padding-right:revert;background-image:none}
.fin-repliable .fin-cache{padding:0!important;border-left:0!important;border-right:0!important;font-size:0!important;
  overflow:hidden;box-shadow:none!important;background-image:none!important;max-width:0}
.fin-repliable .fin-cache > *{display:none!important}
.fin-repliable th.fin-porte-fleche{position:relative}
.fin-fleche{position:absolute;top:50%;right:2px;transform:translateY(-50%);width:16px;height:20px;padding:0;
  border:1px solid var(--border-2);border-radius:6px;background:var(--surface);color:var(--ink);
  font:800 14px/1 var(--font);cursor:pointer;opacity:0;transition:opacity .12s var(--ease);z-index:4;
  box-shadow:var(--sh-sm)}
.fin-fleche:hover{background:var(--fa-beige-clair);border-color:var(--fa-orange)}
.fin-repliable th.fin-porte-fleche:hover .fin-fleche,.fin-repliable th.fin-survol .fin-fleche,.fin-fleche:focus-visible{opacity:1}
.sue-t-fin td.sue-t-act,.sue-t-fin th.sue-t-act{text-align:center;padding-left:6px;padding-right:6px}
.sue-t-fin td.sue-t-act .sue-t-g{justify-content:center}
.sue-t-fin td.sue-t-act .btn{padding-left:12px;padding-right:12px;white-space:nowrap;max-width:100%}
.sue-t-wrap{max-width:100%}

/* Le séparateur des Encaissements (1er oct. 2026) : le PRÉVU au-dessus,
   l'ACQUIS et le chemin de l'argent en dessous. */
.enc-u tbody tr.enc-u-sep > th,.enc-u tbody tr.enc-u-sep > td{border-top:3px solid #C9C0B5}
body[data-theme="dark"] .enc-u tbody tr.enc-u-sep > th,body[data-theme="dark"] .enc-u tbody tr.enc-u-sep > td{border-top-color:var(--border-2)}
/* Le titre d'un bandeau des Encaissements tient sur une ligne (1er oct. 2026) */
.enc-u tr.enc-u-g th.c-lab{white-space:nowrap;overflow:visible}
/* Le reste à charge par état, dans Réception des financements (1er oct. 2026) :
   les mêmes allures que la pastille du reste à charge des listes. */
.enc-pil.rac-r-afacturer{background:var(--fa-beige-clair);color:var(--fa-marron);border:1.5px dashed rgba(46,32,23,.45)}
.enc-pil.rac-r-facture{background:var(--fa-beige);color:var(--fa-marron);border:1.5px solid var(--fa-beige)}
.enc-pil.rac-r-encaisse{background:var(--fa-beige);color:var(--fa-marron);border:2px solid var(--fa-marron)}
.enc-pil.rac-r-encaisse::before{content:'✓ ';font-weight:900}
.enc-u tr.rac-r-afacturer,.enc-u tr.rac-r-facture,.enc-u tr.rac-r-encaisse{--c:var(--fa-beige)}
.enc-u tr.rac-r-encaisse{--c:var(--fa-marron)}
body[data-theme="dark"] .enc-pil.rac-r-afacturer,body[data-theme="dark"] .enc-pil.rac-r-facture,
body[data-theme="dark"] .enc-pil.rac-r-encaisse{color:var(--fa-marron)}
/* ══════════ RÉCEPTION DES FINANCEMENTS : OPCO · RAC · TOTAL DANS CHAQUE ANNÉE (Théo, 1er oct. 2026) ══════════
   Trois petites colonnes dans la case de l'année ; le Total, à droite,
   tombe sous les montants des lignes du dessus. */
.enc-split{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:baseline}
.enc-split > *{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.enc-s-o,.enc-s-r{font-weight:600;font-size:.84rem;color:var(--ink-2)}
.enc-s-o{border-right:1px solid var(--border);padding-right:10px}
.enc-s-r{border-right:1px solid var(--border);padding-right:10px}
.enc-s-t{font-weight:800}
.enc-split .enc-zero{font-weight:600}
.enc-split-h > span{font-size:.66rem;font-weight:800;letter-spacing:.06em;color:var(--ink-mute);text-transform:uppercase}
.enc-u tr.enc-u-g-split td.c-a{padding-top:6px;padding-bottom:6px}
/* OPCO · RAC · Total plus lisibles (Théo, 1er oct. 2026 : « trop sobre ») :
   chaque petite colonne a sa couleur — OPCO orangé, RAC beige — et de
   l'air entre elles ; le Total reste en gras, sans fond. */
.enc-split{gap:6px}
.enc-s-o,.enc-s-r{border-right:0!important;padding:4px 8px!important;border-radius:6px}
.enc-s-o{background:rgba(246,157,0,.12);color:var(--fa-marron)}
.enc-s-r{background:rgba(251,222,170,.55);color:var(--fa-marron)}
.enc-s-t{padding:4px 2px 4px 8px;border-left:2px solid var(--border-2)}
body[data-theme="dark"] .enc-s-o{background:rgba(246,157,0,.18);color:var(--ink)}
body[data-theme="dark"] .enc-s-r{background:rgba(251,222,170,.16);color:var(--ink)}
.enc-split-h > span{border-radius:999px;padding:2px 0;text-align:center}
.enc-split-h > span:nth-child(1){background:var(--fa-orange);color:var(--fa-marron)}
.enc-split-h > span:nth-child(2){background:var(--fa-beige);color:var(--fa-marron)}
.enc-split-h > span:nth-child(3){background:var(--fa-marron);color:#fff}
.enc-u tr.enc-u-g-split th.c-lab{letter-spacing:.02em}
.enc-u tr.enc-u-g-split td.c-a1 .enc-split-h{padding-left:10px}
/* OPCO · RAC · Total aussi en Mois par mois et Les deux (1er oct. 2026) :
   une version serrée dans les cases de mois ; en « Les deux », les
   colonnes annuelles fixes s'élargissent pour leurs trois chiffres. */
.enc-split-c{gap:4px;font-size:.74rem}
.enc-split-c .enc-s-o,.enc-split-c .enc-s-r{padding:3px 5px!important;font-size:.74rem}
.enc-split-c .enc-s-t{padding:3px 0 3px 5px;font-size:.78rem}
.enc-split-h.enc-split-c > span{font-size:.58rem;padding:1px 0}
.enc-u td.c-m:has(> .enc-split){padding-left:6px;padding-right:8px;min-width:200px}
.enc-u-deux .c-a{width:236px;min-width:236px;max-width:236px}
.enc-u-deux .c-a1{left:210px}
.enc-u-deux .c-a2{left:446px}
.enc-u-deux .c-a3{left:682px}
.enc-u-deux td.c-a{padding-left:8px;padding-right:10px}
/* Le titre du bandeau découpé tient dans sa case, même quand les colonnes annuelles sont fixes. */
.enc-u tr.enc-u-g-split th.c-lab{letter-spacing:0;font-size:.64rem}

/* ══════════ OPCO · RAC · TOTAL : DE VRAIES COLONNES (Théo, 1er oct. 2026, 2e passe) ══════════
   « Pas des fonds de couleur : de vrais traits noirs qui séparent les trois
   colonnes ; OPCO en blanc, le reste à charge ENTIÈREMENT sur fond beige,
   le total en blanc. » Chaque sous-colonne remplit toute la hauteur de la
   case : d'une ligne à l'autre, on lit trois vraies colonnes. */
.enc-u td:has(> .enc-split){padding:0!important;height:1px}
.enc-split,.enc-split.enc-split-c{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0!important;
  height:100%;min-height:46px;align-items:stretch}
.enc-split > *{display:flex;align-items:center;justify-content:flex-end;padding:0 12px!important;border-radius:0!important;
  background:var(--surface)!important;color:var(--ink)!important;white-space:nowrap;font-size:.86rem}
.enc-split > .enc-s-o,.enc-split > .enc-s-r{font-weight:600}
.enc-split > .enc-s-r{background:var(--fa-beige)!important;color:var(--fa-marron)!important}
.enc-split > :nth-child(1),.enc-split > :nth-child(2){border-right:1.5px solid var(--ink)!important}
.enc-split > .enc-s-t{border-left:0!important;font-weight:800}
.enc-split-c > *{padding:0 8px!important;font-size:.76rem}
.enc-split.enc-split-h{min-height:30px}
.enc-split.enc-split-h > span{justify-content:center;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:var(--surface)!important;color:var(--ink)!important;padding:0 4px!important}
.enc-split.enc-split-h > span:nth-child(2){background:var(--fa-beige)!important;color:var(--fa-marron)!important}
.enc-u tr.enc-u-g-split td.c-a1 .enc-split-h{padding-left:0}
body[data-theme="dark"] .enc-split > .enc-s-r,body[data-theme="dark"] .enc-split.enc-split-h > span:nth-child(2){background:var(--bg-2)!important;color:var(--ink)!important}
body[data-theme="dark"] .enc-split > :nth-child(1),body[data-theme="dark"] .enc-split > :nth-child(2){border-right-color:var(--ink-mute)!important}

/* ══════════ ENCAISSEMENTS : MOINS DE COULEURS, DE VRAIES SÉPARATIONS (Théo, 1er oct. 2026) ══════════
   « Que ce soit beaucoup plus lisible, moins de couleurs : juste la
   séparation permet de bien lire. » Plus de fonds beige sous les montants
   (24 mois, totaux d'exercice, Avoirs et pertes, Total) : fond blanc ;
   des traits NOIRS épais entre les parties (Financement OPCO · Réception
   des financements · Avoirs et pertes · Total) ; un trait noir à gauche de
   chaque bloc OPCO · RAC · Total (le premier le sépare des libellés). Le
   bandeau Avoirs et pertes passe en rouge clair. Seul le RAC garde son
   fond beige (sa colonne), et Garanti son marron. */
.enc-u .c-a3,.enc-u-deux .c-a3,
.enc-u tr.g-e:not(.enc-u-g) td,.enc-u tr.g-e:not(.enc-u-g) th.c-lab,
.enc-u-deux tr.g-e:not(.enc-u-g) td.c-a,
.enc-u .enc-m12,.enc-u .enc-m24,
.enc-u tr.enc-u-net:not(.enc-u-garanti) th,.enc-u tr.enc-u-net:not(.enc-u-garanti) td{background:var(--surface)}
.enc-u .enc-m24{color:var(--ink)}
.enc-u tr.c-prev td.enc-v-prev{background:var(--surface);color:var(--fa-marron)}
.enc-u tr.enc-u-g > th,.enc-u tr.enc-u-g > td{border-top:3px solid var(--ink)}
.enc-u tr.enc-u-g.g-e > th,.enc-u tr.enc-u-g.g-e > td{background:var(--danger-soft);color:var(--danger-ink);border-top:3px solid var(--ink)}
.enc-u tr.enc-u-net:not(.enc-u-garanti) > th,.enc-u tr.enc-u-net:not(.enc-u-garanti) > td{border-top:3px solid var(--ink)}
.enc-u td:has(> .enc-split){border-left:2px solid var(--ink)!important}
body[data-theme="dark"] .enc-u tr.enc-u-g > th,body[data-theme="dark"] .enc-u tr.enc-u-g > td,
body[data-theme="dark"] .enc-u tr.enc-u-net:not(.enc-u-garanti) > th,body[data-theme="dark"] .enc-u tr.enc-u-net:not(.enc-u-garanti) > td{border-top-color:var(--ink-mute)}
body[data-theme="dark"] .enc-u td:has(> .enc-split){border-left-color:var(--ink-mute)!important}

/* ══════════ ENCAISSEMENTS EN BLOCS — STYLE « 3A » (Théo, 2 oct. 2026) ══════════
   Chaque partie est un bloc : une bande de titre TEINTÉE DE SA COULEUR avec
   un bord haut (orange Financement OPCO · vert Réception · rouge Avoirs et
   pertes · marron Total et garanti), ses années, puis ses lignes ; de l'air
   entre deux blocs. Les séparations deviennent fines ; le RAC garde un fond
   beige clair ; le Garanti, son marron. */
.enc-u-blocs tr.enc-u-bloc{--c:var(--ink);--t:#FAF8F5;--tx:var(--ink)}
.enc-u-blocs tr.enc-u-bloc.b-opco{--c:var(--fa-orange);--t:rgba(246,157,0,.13);--tx:var(--ink)}
.enc-u-blocs tr.enc-u-bloc.b-recep{--c:var(--ok);--t:var(--ok-soft);--tx:var(--ok-ink)}
.enc-u-blocs tr.enc-u-bloc.b-pertes{--c:var(--danger);--t:var(--danger-soft);--tx:var(--danger-ink)}
.enc-u-blocs tr.enc-u-bloc.b-tot{--c:var(--fa-marron);--t:var(--fa-beige-clair);--tx:var(--fa-marron)}
.enc-u-blocs tr.enc-u-bloc > th,.enc-u-blocs tr.enc-u-bloc > td,
.enc-u-blocs thead tr.enc-u-bloc > th,.enc-u-blocs thead tr.enc-u-bloc > td{
  background:var(--t)!important;color:var(--tx)!important;border-top:4px solid var(--c)!important;
  border-bottom:1px solid var(--border-2);padding-top:11px;padding-bottom:11px}
.enc-u-blocs tr.enc-u-bloc > th{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:left}
.enc-u-blocs td.enc-u-bloc-s{text-align:right;text-transform:none;letter-spacing:0}
.enc-u-blocs td.enc-u-bloc-s small{font-size:.74rem;font-weight:600;color:var(--ink-soft)}
.enc-u-blocs tr.enc-esp > td{height:18px;padding:0;border:0!important;background:var(--fa-blanc)}
body[data-theme="dark"] .enc-u-blocs tr.enc-esp > td{background:var(--bg)}
.enc-u-blocs tr.enc-u-ans > th,.enc-u-blocs tr.enc-u-sous-tete > th{background:var(--surface);font-size:.72rem;font-weight:800;color:var(--ink-2);
  border-bottom:1px solid var(--border-2);border-top:0}
.enc-u-blocs tr.enc-u-sous-tete > th{padding-top:0;padding-bottom:0}
/* Des séparations fines (fini les traits noirs épais) */
.enc-u-blocs tr.enc-u-net:not(.enc-u-garanti) > th,.enc-u-blocs tr.enc-u-net:not(.enc-u-garanti) > td{border-top:0}
.enc-u-blocs td:has(> .enc-split),.enc-u-blocs th:has(> .enc-split){border-left:1px solid var(--border-2)!important}
.enc-u-blocs .enc-split > :nth-child(1),.enc-u-blocs .enc-split > :nth-child(2){border-right:1px solid var(--border)!important}
.enc-u-blocs .enc-split > .enc-s-r,.enc-u-blocs .enc-split.enc-split-h > span:nth-child(2){background:var(--fa-beige-clair)!important;color:var(--fa-marron)!important}
.enc-u-blocs .enc-split.enc-split-h > span{color:var(--ink-soft)!important}
body[data-theme="dark"] .enc-u-blocs .enc-split > .enc-s-r,body[data-theme="dark"] .enc-u-blocs .enc-split.enc-split-h > span:nth-child(2){background:var(--bg-2)!important;color:var(--ink)!important}
.enc-u-blocs tr.enc-u-bloc > td.enc-u-bloc-s{text-transform:none;letter-spacing:0;font-weight:600}

/* ══════════ ENCAISSEMENTS EN CADRES (Théo, 2 oct. 2026) ══════════
   « Les tableaux ne sont pas espacés, certaines colonnes sont plus larges
   que leur titre : harmonise, que ça rende pro. » Chaque partie est un
   cadre à part (bord fin, coins arrondis, bande teintée de sa couleur),
   séparé du suivant par de l'air ; la grille est fixe : chaque période a
   trois sous-colonnes de même largeur (OPCO · RAC · Total), le montant
   seul d'une autre partie s'aligne sous le Total. */
.encc-defil{overflow-x:auto;padding:2px 0 6px}
.encc{border-collapse:separate;border-spacing:0;table-layout:fixed;font-variant-numeric:tabular-nums;font-size:.84rem;color:var(--ink)}
.encc-annuel{width:100%}
.encc th,.encc td{padding:0 12px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--surface);font-weight:600;vertical-align:middle}
/* Le cadre de chaque partie */
.encc tr:not(.encc-esp) > :first-child{border-left:1px solid var(--border-2)}
.encc tr:not(.encc-esp) > :last-child{border-right:1px solid var(--border-2)}
.encc tr.encc-esp > td{height:24px;padding:0;background:transparent;border:0}
.encc-bande{--c:var(--ink);--t:var(--bg-2);--tx:var(--ink)}
.encc-bande.b-opco{--c:var(--fa-orange);--t:#FEF1DB;--tx:var(--fa-marron)}
.encc-bande.b-recep{--c:var(--ok);--t:var(--ok-soft);--tx:var(--ok-ink)}
.encc-bande.b-pertes{--c:var(--danger);--t:var(--danger-soft);--tx:var(--danger-ink)}
.encc-bande.b-tot{--c:var(--fa-marron);--t:var(--fa-beige-clair);--tx:var(--fa-marron)}
body[data-theme="dark"] .encc-bande.b-opco{--t:#392810;--tx:var(--fa-orange)}
body[data-theme="dark"] .encc-bande.b-tot{--c:var(--fa-beige);--t:var(--bg-2);--tx:var(--fa-beige)}
.encc tr.encc-bande > *{height:42px;background:var(--t);border-top:4px solid var(--c);border-bottom:1px solid var(--border-2)}
.encc tr.encc-bande > th{font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tx);
  text-align:left;border-top-left-radius:12px;overflow:visible;text-overflow:clip}
.encc tr.encc-bande > td{border-top-right-radius:12px}
.encc tr.encc-bande > th.fin-aide:hover{text-decoration:underline dotted;text-underline-offset:3px}
/* Les en-têtes de période */
.encc tr.encc-ex > *{height:30px;font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);
  text-align:left;border-bottom:1px solid var(--border)}
.encc tr.encc-per > *{height:36px;font-size:.74rem;font-weight:800;color:var(--ink-2);border-bottom:1px solid var(--border)}
.encc tr.encc-per-span > th:not(.c-lab){text-align:center}
.encc tr.encc-sous > *{height:28px;font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--border-2)}
.encc tr.encc-per:not(.encc-per-span) > *{border-bottom-color:var(--border-2)}
/* Les lignes */
.encc tr.encc-l > *{height:48px;border-bottom:1px solid var(--border)}
.encc tr.encc-l.encc-der > *{border-bottom:1px solid var(--border-2)}
.encc tr.encc-der > :first-child{border-bottom-left-radius:12px}
.encc tr.encc-der > :last-child{border-bottom-right-radius:12px}
.encc tr.encc-l > td.s-t{font-weight:800}
.encc-annuel tr.encc-l > td{font-size:.9rem;font-weight:700}
.encc-annuel tr.encc-l > td.s-o,.encc-annuel tr.encc-l > td.s-r{font-weight:600}
.encc-annuel tr.encc-l > td.s-t,.encc-annuel tr.encc-l > td[colspan]{font-weight:800}
.encc tr.encc-fort > td{font-weight:800}
.encc .enc-zero{color:var(--ink-mute);font-weight:500}
.encc tr.c-remb > td,.encc tr.fin-r-perdu > td{color:var(--danger)}
.encc tr.fin-r-perte-p > td{color:var(--danger);opacity:.8}
/* Les traits verticaux : fins entre OPCO · RAC · Total, un peu plus marqués entre deux périodes */
.encc .s-r,.encc .s-t{border-left:1px solid var(--border)}
.encc .p-g{border-left:1px solid var(--border-2)}
.encc .p-deb:not(:nth-child(2)){border-left:2px solid var(--border-2)}
.encc .c-lab + .p-g{border-left:1px solid var(--border-2)}
/* Le reste à charge sur beige clair ; les totaux d'exercice sur gris très clair */
.encc th.s-r,.encc td.s-r{background:var(--fa-beige-clair)}
.encc th.s-r{color:var(--fa-marron)}
.encc td.c-m12:not(.s-r),.encc td.c-m24:not(.s-r),.encc th.c-m12:not(.s-r),.encc th.c-m24:not(.s-r){background:var(--fa-blanc)}
.encc tr.encc-l > td.c-m12[colspan],.encc tr.encc-l > td.c-m24[colspan]{font-weight:800}
body[data-theme="dark"] .encc th.s-r,body[data-theme="dark"] .encc td.s-r{background:var(--bg-2);color:var(--ink)}
/* La colonne des libellés reste en place */
.encc .c-lab{position:sticky;left:0;z-index:3;text-align:left;padding:0 14px 0 18px}
.encc tr.encc-l > th.c-lab{box-shadow:inset 4px 0 0 var(--c, transparent)}
.encc .enc-pil{font-size:.76rem;padding:5px 12px}
.encc th.fin-aide:hover .enc-pil,.encc th.fin-aide:hover .encc-net{text-decoration:underline dotted;text-underline-offset:3px}
.encc .encc-net{font-size:.78rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
/* « Les deux » : les colonnes annuelles restent aussi en place */
.encc .c-fixe{position:sticky;z-index:2}
.encc .c-fixe-fin{box-shadow:2px 0 0 var(--ink-soft)}
/* Total et Garanti */
.encc tr.enc-u-garanti > *{background:var(--fa-marron)!important;color:#fff!important;border-bottom-color:var(--fa-marron)!important}
.encc tr.enc-u-garanti > :not(:first-child){border-left-color:rgba(255,255,255,.18)}
.encc tr.enc-u-garanti .enc-zero{color:var(--fa-beige)}
.encc tr.enc-u-garanti > th.c-lab{box-shadow:none}
body[data-theme="dark"] .encc tr.enc-u-garanti > *{background:var(--fa-beige)!important;color:var(--fa-marron)!important}
body[data-theme="dark"] .encc tr.enc-u-garanti .enc-zero{color:var(--fa-marron)}
@media (max-width:640px){
  .encc col.encc-col-lab{width:150px!important}
  .encc .c-fixe{position:static}
  .encc .c-fixe-fin{box-shadow:none}
}
/* Les mois, plus serrés : trois sous-colonnes étroites par mois. */
.encc tr > .c-m{padding:0 9px;font-size:.8rem}
.encc tr.encc-per > th.c-m{font-size:.72rem}
.encc tr.encc-sous > th.c-m{font-size:.58rem;letter-spacing:.05em}
/* « Les deux » sur un écran étroit : les colonnes annuelles défilent avec les mois. */
.encc-libre .c-fixe{position:static}
.encc-libre .c-fixe-fin{box-shadow:none}
/* Trois exercices + le total en vue Annuel (2 oct. 2026) : des cases un peu plus serrées pour que tout tienne. */
.encc tr > td:not(.c-lab),.encc tr > th:not(.c-lab){padding-left:9px;padding-right:9px}
.encc-annuel tr.encc-l > td{font-size:.84rem}
.encc .c-lab{padding:0 12px 0 16px}

/* ══════════ PRÉVU FINAL (Théo, 2 oct. 2026, proposition A) ══════════
   La ligne qui retient le BON montant de chaque contrat — prévu initial
   sans rupture, après rupture sinon — c'est le total : pastille marron
   pleine, ligne sur beige clair soulignée d'un trait marron. */
.fin-r-final{--c:var(--fa-marron)}
.enc-pil.fin-r-final{background:var(--fa-marron);color:#fff;border:1.5px solid var(--fa-marron)}
body[data-theme="dark"] .enc-pil.fin-r-final{background:var(--fa-beige);color:var(--fa-marron);border-color:var(--fa-beige)}
.encc tr.encc-cle{--kc:var(--fa-marron);--kt:var(--fa-beige-clair);--kr:var(--fa-beige);--ki:var(--fa-marron)}
/* La dernière ligne de chaque cadre, la plus importante (Théo, 2 oct. 2026) :
   Prévu final (marron), Encaissé (vert), Perte définitive (rouge) — fond
   teinté, trait épais de la couleur du cadre ; le RAC garde son beige. */
.encc tr.encc-cle.k-recep{--kc:var(--ok);--kt:var(--ok-soft);--kr:var(--fa-beige-clair);--ki:var(--ok-ink)}
.encc tr.encc-cle.k-pertes{--kc:var(--danger);--kt:var(--danger-soft);--kr:var(--fa-beige-clair);--ki:var(--danger-ink)}
.encc tr.encc-cle > *{background:var(--kt);border-top:2px solid var(--kc)}
.encc tr.encc-cle > td.s-r{background:var(--kr)}
.encc tr.encc-cle > td{color:var(--ki);font-weight:700;opacity:1}
.encc tr.encc-cle > td.s-t{font-weight:800}
body[data-theme="dark"] .encc tr.encc-cle{--kt:var(--bg-2);--kr:var(--bg-2);--ki:var(--ink)}
body[data-theme="dark"] .encc tr.encc-cle.k-opco{--kc:var(--fa-beige)}

/* ══════════ REMBOURSEMENTS : UNE COLONNE PAR ÉTAPE (Théo, 2 oct. 2026, proposition A) ══════════
   Reçu · 1 Complet · 2 Envoyé · 3 Facturé · 4 Viré : chaque titre souligné
   de la couleur de son étape ; une étape franchie = une pastille de sa
   couleur avec sa date ; le geste de l'étape suivante dans sa colonne ;
   lignes blanches, total de classe sur gris clair. */
.sue-t.dm-t3{table-layout:fixed;min-width:980px;border-collapse:separate;border-spacing:0}
.sue-t.dm-t3 thead th{background:var(--surface);color:var(--ink-2);font-size:.66rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;height:42px;padding:0 12px;border-bottom:3px solid var(--border-2);vertical-align:middle}
.sue-t.dm-t3 thead th.n{text-align:right}
.sue-t.dm-t3 thead th.dm-ce{text-align:center}
.sue-t.dm-t3 thead th.dm-u-a_verifier{border-bottom-color:#B4B2A9}
.sue-t.dm-t3 thead th.dm-u-complet{border-bottom-color:var(--fa-beige)}
.sue-t.dm-t3 thead th.dm-u-envoye{border-bottom-color:#F9C46B}
.sue-t.dm-t3 thead th.dm-u-facture{border-bottom-color:var(--fa-orange)}
.sue-t.dm-t3 thead th.dm-u-vire{border-bottom-color:var(--ok)}
.sue-t.dm-t3 td{height:56px;padding:0 12px;vertical-align:middle;background:var(--surface);border-bottom:1px solid var(--border)}
.sue-t.dm-t3 td.n{text-align:right}
.sue-t.dm-t3 td.dm-ce{text-align:center;border-left:1px solid var(--border);padding:0 6px}
.sue-t.dm-t3 td.dm-ouv{text-align:right;padding:0 8px 0 4px}
.sue-t.dm-t3 .dm-qui{display:flex;align-items:center;gap:10px;overflow:hidden}
.sue-t.dm-t3 .dm-qui .sue-t-nom{overflow:hidden;text-overflow:ellipsis}
.dm-fait{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:800;padding:4px 9px;border-radius:8px;
  white-space:nowrap;font-variant-numeric:tabular-nums;cursor:default}
.dm-fait svg{width:12px;height:12px}
.dm-fait.dm-e-a_verifier{background:var(--bg-2);color:var(--ink-2)}
.dm-avenir::before{content:'—';color:var(--border-2);font-weight:800}
.dm-chez{display:inline-flex;align-items:center;gap:4px;background:var(--warn-soft);color:var(--warn-ink);font-weight:800;
  font-size:.72rem;padding:4px 10px;border-radius:999px;white-space:nowrap;cursor:help}
.dm-refus{display:inline-flex;align-items:center;gap:4px;background:var(--danger-soft);color:var(--danger);font-weight:800;
  font-size:.72rem;padding:4px 10px;border-radius:999px;white-space:nowrap;cursor:help}
.dm-cgestes{display:inline-flex;align-items:center;gap:4px}
.sue-t.dm-t3 .dm-go,.sue-t.dm-t3 .dm-incomplet{padding:5px 10px;font-size:.74rem;white-space:nowrap;min-height:0}
.sue-t.dm-t3 .dm-go svg{width:13px;height:13px}
.sue-t.dm-t3 .dm-renv{padding:5px 9px}
.sue-t.dm-t3 tr.sue-t-total td{height:46px;background:var(--fa-blanc);font-weight:800;color:var(--ink);border-top:1px solid var(--border-2);border-bottom:0}
.sue-t.dm-t3 tr.sue-t-total td small{color:var(--ink-soft);font-weight:700}
body[data-theme="dark"] .sue-t.dm-t3 tr.sue-t-total td{background:var(--bg-2)}
.sue-t.dm-t3{min-width:1120px}
.sue-t.dm-t3 td.dm-pjc{padding:0 6px}
.sue-t.dm-t3 .dm-go,.sue-t.dm-t3 .dm-incomplet{padding:5px 8px;gap:4px}
.sue-t.dm-t3 .dm-renv{padding:5px 8px}
.sue-t.dm-t3 thead th{white-space:nowrap}
/* Neuf colonnes d'argent, toutes affichées (Théo, 2 oct. 2026 : plus de
   colonnes repliées) : la liste tient dans la carte sans défiler
   (190 + 34 + 56 + 8 × 86 + 100 + 112 = 1180 px) ; la fiche étudiant aussi
   (200 + 56 + 8 × 94 + 100 = 1108 px). */
.sue-t.sue-t-fin{min-width:1180px}
.sue-t.sue-t-fin.kf-t{min-width:1108px}

/* ══════════ INDICATEURS — LA COMPARAISON DES CENTRES (Théo, 2 oct. 2026) ══════════
   En haut, la bande de mini-podiums (la vue d'ensemble à gauche, en marron,
   puis les cinq thèmes) ; dessous, le classement du thème choisi. Cinq crans
   de couleur, du dernier (rouge) au premier (vert). */
.ind-q1{background:var(--danger);color:#fff}
.ind-q2{background:var(--danger-soft);color:var(--danger-ink)}
.ind-q3{background:var(--bg-2);color:var(--ink-2)}
.ind-q4{background:var(--ok-soft);color:var(--ok-ink)}
.ind-q5{background:var(--ok);color:#fff}
.ind-q0{background:var(--surface);color:var(--ink-mute);border:1px dashed var(--border-2)}
.ind-bande{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}
.ind-mini{appearance:none;font:inherit;cursor:pointer;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);
  border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:7px;text-align:left;min-width:0}
.ind-mini:hover{border-color:var(--border-2)}
.ind-mini.on{border-color:var(--fa-orange);background:var(--fa-beige-clair);box-shadow:0 0 0 3px rgba(246,157,0,.15)}
.ind-mini-h{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:800}
.ind-mini-h svg{width:15px;height:15px;color:var(--fa-orange);flex:none}
.ind-mini ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.ind-mini li{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;min-width:0}
.ind-mini li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ind-mini li i{font-style:normal;flex:none;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:800;color:var(--fa-marron)}
.ind-mini li:nth-child(1) i{background:var(--fa-orange)}
.ind-mini li:nth-child(2) i{background:var(--fa-beige)}
.ind-mini li:nth-child(3) i{background:#FFF6E2;border:1px solid var(--fa-beige)}
.ind-der{font-size:.72rem;color:var(--danger-ink);font-weight:800;border-top:1px solid var(--border);padding-top:6px}
.ind-mini.ind-ens{background:var(--fa-marron);border-color:var(--fa-marron);color:#fff}
.ind-mini.ind-ens .ind-der{color:#F2B8B8;border-top-color:rgba(255,255,255,.15)}
.ind-mini.ind-ens.on{border-color:var(--fa-orange);box-shadow:0 0 0 3px var(--fa-orange)}
body[data-theme="dark"] .ind-mini.ind-ens{background:var(--bg-2);border-color:var(--fa-beige);color:var(--ink)}
.ind-vide{color:var(--ink-mute);font-weight:700;font-size:.78rem}
.ind-carte{padding:20px}
.ind-c-haut{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;flex-wrap:wrap}
.ind-c-haut h3{margin:0;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.ind-c-haut h3 svg{width:18px;height:18px;color:var(--fa-orange)}
.ind-c-haut h3 small{color:var(--ink-mute);font-weight:700;font-size:.74rem}
.ind-legende{display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;color:var(--ink-soft)}
.ind-legende i{width:26px;height:10px;border-radius:3px;display:inline-block}
.ind-defil{overflow-x:auto}
.ind-t{border-collapse:separate;border-spacing:0;width:100%;min-width:900px;font-variant-numeric:tabular-nums}
.ind-t th,.ind-t td{padding:0 10px;white-space:nowrap;vertical-align:middle}
.ind-t thead th{height:46px;font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);
  border-bottom:2px solid var(--border-2);text-align:right;cursor:pointer;user-select:none}
.ind-t thead th.g{text-align:left;cursor:default}
.ind-t thead th.tri{color:var(--fa-orange)}
.ind-t thead th small{display:block;text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink-mute);font-size:.62rem}
.ind-t thead th.ind-col-note{width:28%}
.ind-t tbody td{height:46px;border-bottom:1px solid var(--border);text-align:right;font-weight:600;font-size:.82rem}
.ind-t tbody td.g{text-align:left}
.ind-t tbody tr.hors td{color:var(--ink-mute)}
.ind-rang{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--bg-2);
  font-size:.72rem;font-weight:800;color:var(--ink-2)}
.ind-rang.r1{background:var(--fa-orange);color:var(--fa-marron)}
.ind-rang.r2{background:var(--fa-beige);color:var(--fa-marron)}
.ind-rang.r3{background:#FFF6E2;color:var(--fa-marron);border:1px solid var(--fa-beige)}
.ind-nom{font-weight:800}
.ind-eff{color:var(--ink-mute);font-weight:600;margin-left:6px;font-size:.72rem}
.ind-note{display:flex;align-items:center;gap:10px}
.ind-barre{position:relative;height:14px;background:var(--bg-2);border-radius:999px;flex:1;min-width:120px}
.ind-barre i{position:absolute;left:0;top:0;bottom:0;border-radius:999px}
.ind-barre i.ind-q3{background:var(--fa-orange)}
.ind-barre i.ind-q2{background:#E88A8A}
.ind-barre i.ind-q4{background:#7CC79E}
.ind-barre em{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--fa-marron)}
body[data-theme="dark"] .ind-barre em{background:var(--fa-beige)}
.ind-score{display:inline-flex;align-items:center;justify-content:center;min-width:38px;padding:3px 8px;border-radius:8px;font-weight:800;font-size:.8rem}
.ind-pt{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:6px;vertical-align:middle;border:0}
.ind-alt{display:block;color:var(--ink-mute);font-weight:600;font-size:.66rem}
@media (max-width:1000px){.ind-bande{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ind-t tbody td.ind-info{color:var(--ink-soft);font-weight:600}
.ind-t thead th:has(+ th) small{white-space:nowrap}
/* Indicateurs : la période, le bouton « Comment c'est calculé », sa fenêtre (2 oct. 2026) */
.ind-c-droite{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ind-comment{display:inline-flex;align-items:center;gap:6px;font-weight:800}
.ind-comment svg{width:15px;height:15px}
.ind-explique{display:flex;flex-direction:column;gap:14px;font-size:.86rem;line-height:1.5}
.ind-explique p{margin:0}
.ind-explique-l{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:12px}
.ind-explique-l li b{font-weight:800}
.ind-explique-l li small{color:var(--ink-mute);font-weight:600}
.ind-explique-l li p{margin:3px 0 0;color:var(--ink-2)}
.ind-meilleur{font-weight:800;color:var(--ok-ink)!important}
.ind-meilleur.info{color:var(--ink-mute)!important;font-weight:700}
.ind-explique-note{background:var(--bg-2);border-radius:12px;padding:12px 14px}
.ind-explique-note p{margin-top:4px;color:var(--ink-2)}
.ind-explique-attente{background:var(--fa-beige-clair);border-radius:12px;padding:10px 14px;font-weight:700}
.ind-t thead th.fin-aide{cursor:pointer}
/* La période collée au titre (Théo, 2 oct. 2026, soir) : à droite, on ne
   pensait pas à la changer. Le choix actif en orange de la charte. */
.ind-titre{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ind-periode .seg-b{font-size:.84rem;font-weight:800;padding:8px 15px}
.ind-periode .seg-b.on{background:var(--fa-orange);color:var(--fa-marron)}
/* La ligne du campus qui regarde : il se trouve d'un coup d'œil. */
.ind-t tbody tr.ind-moi td{background:var(--fa-beige-clair)}
.ind-t tbody tr.ind-moi td:first-child{box-shadow:inset 4px 0 0 var(--fa-orange)}
/* L'alternance a neuf colonnes (2 oct. 2026) : tout doit tenir sans défiler. */
.ind-t thead th.ind-col-note{width:22%}
.ind-t th,.ind-t td{padding:0 8px}
.ind-barre{min-width:90px}
.ind-t thead th small{white-space:normal;line-height:1.2}
.ind-t thead th{white-space:normal;line-height:1.15;vertical-align:bottom;padding-bottom:8px}
.ind-t{min-width:0}
/* NON COMPTABILISÉ (Théo, 5 oct. 2026) : sur « 2025-2026 » et « Les deux
   ans », un centre ouvert à la rentrée en cours descend tout en bas,
   grisé, séparé des centres classés par un trait. */
.ind-t tbody tr.ind-nc td,.ind-t tbody tr.ind-nc .ind-nom{color:var(--ink-mute)}
.ind-t tbody tr.ind-nc .ind-score,.ind-t tbody tr.ind-nc .ind-pt{opacity:.4}
.ind-t tbody tr:not(.ind-nc) + tr.ind-nc td{border-top:2px dashed var(--border-2)}
.ind-nc-l{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:var(--bg-2);
  color:var(--ink-mute);font-size:.72rem;font-weight:800;cursor:help;border:1px dashed var(--border-2)}

/* ══════════ ÉCHÉANCES AUX VRAIES DATES (Théo, 2 oct. 2026) ══════════
   Fenêtre de saisie : la date prévue au jour près, les champs de facture
   (numéro, facturée le, encaissée le) sous l'échéance facturée ;
   l'échéancier prévisionnel calculé sous les montants annuels. Listes et
   fiche : « Prévisionnel » fondu dans « À facturer », détail au survol. */
.fc-modale .fc-date{font-variant-numeric:tabular-nums;font-size:.82rem;min-width:0}
.fc-modale .fc-ech-l .fc-fact{grid-column:2/-1}
.fc-fact{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;padding:8px 10px;margin:2px 0 4px;
  border-radius:10px;background:var(--bg-2)}
.fc-fact[hidden],.fc-fact .fc-fact-enc[hidden]{display:none}
.fc-fact label{display:flex;flex-direction:column;gap:3px;min-width:0}
.fc-fact small{font-size:.68rem;font-weight:700;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.03em}
.fc-fact .input{height:34px;font-size:.8rem;padding-top:0;padding-bottom:0}
.fc-fact [data-champ="numero"]{width:150px}
.fc-fact .fc-date{width:150px}
.fc-rac-fact .fc-fact{margin:0 0 10px 120px}
.fc-ech-l .fc-prev-c input:disabled + span{opacity:.45}
.fc-bloc-an .fc-bloc-h{margin-bottom:0}
.fc-bloc-an .fc-euro{width:190px;flex:none}
.fc-gen{border:1px dashed var(--fa-marron);border-radius:12px;padding:10px 14px 8px;background:var(--fa-beige-clair)}
.fc-gen:empty{display:none}
.fc-gen-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;font-size:.82rem}
.fc-gen-h span{font-weight:800;font-variant-numeric:tabular-nums}
.fc-gen-l{display:grid;grid-template-columns:26px minmax(0,1fr) 48px 96px;gap:8px;align-items:center;
  padding:4px 0;border-top:1px solid rgba(46,32,23,.08);font-size:.8rem}
.fc-gen-l em{font-style:normal;color:var(--ink-mute);font-weight:700;text-align:right}
.fc-gen-l b{text-align:right}
.fc-gen .fc-ech-n{width:22px;height:22px;border-radius:50%;background:var(--surface);display:inline-grid;place-items:center;font-size:.7rem}
@media (max-width:640px){
  .fc-rac-fact .fc-fact{margin-left:0}
  .fc-fact [data-champ="numero"],.fc-fact .fc-date{width:100%}
  .fc-fact label{flex:1 1 140px}
  .fc-modale .fc-ech-l .fc-fact{grid-column:1/-1}
}
/* « À facturer » qui contient du prévisionnel : souligné en pointillé, le
   détail réel / prévisionnel / total au survol. */
.fin-v-dont-prev,.kfin-dont-prev,.encc td[data-prev="1"]{text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
.fin-v-afacturer,.encc td[data-explique]{cursor:help}
/* Une échéance prévisionnelle dans la colonne « À facturer » : l'allure de
   l'ancien « Prévisionnel » (jaune, pointillé). */
.kfin-afact.kfin-prevu{background:var(--fin-jaune-clair);color:var(--fa-marron);outline:1px dashed var(--fa-marron)}
/* Le petit formulaire de facture sous une pastille. */
.kfin-menu-f{display:flex;flex-direction:column;gap:8px;padding:6px 6px 4px;min-width:220px}
.kfin-menu-t{display:flex;align-items:center;gap:8px;font-size:.84rem}
.kfin-menu-f label{display:flex;flex-direction:column;gap:3px}
.kfin-menu-f small{font-size:.68rem;font-weight:700;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.03em}
.kfin-menu-f .input{height:34px;font-size:.82rem}
.kfin-menu-b{display:flex;justify-content:space-between;gap:8px;margin-top:2px}
/* Huit colonnes d'argent : une de moins. */
.sue-t.sue-t-fin{min-width:1094px}
.sue-t.sue-t-fin.kf-t{min-width:1014px}
.fc-modale .fc-ech-l .fc-fact .input{height:34px;line-height:32px}
@media (max-width:760px){
  .fc-modale .fc-ech-l > .fc-date{grid-area:mois}
  .fc-modale .fc-ech-l > .fc-fact{grid-column:1/-1}
  .fc-bloc-an .fc-bloc-h{flex-wrap:wrap}
  .fc-bloc-an .fc-euro{width:100%}
}
/* Le montant facturé, entre le numéro et la date (2 oct. 2026). */
.fc-fact .fc-euro{display:block;width:130px}
.fc-fact .fc-euro .input{width:100%;padding-right:26px;padding-left:8px;text-align:right;font-weight:700}
.fc-fact .fc-euro i{right:9px;font-size:.74rem}
@media (max-width:640px){.fc-fact .fc-euro{width:100%}}

/* ══════════ LA VUE FACTURATION (Théo, 2 oct. 2026) ══════════
   Suivi & financements, sous les Encaissements : compteurs encadrés en
   haut, une carte par classe (couleur du BTS), un étudiant par ligne (un
   sur deux en beige), l'échéancier déplié contrat par contrat, chaque case
   remplie d'un clic. Préfixe fv-. */
.vues-barre{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 16px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.vues-seg{display:inline-flex;background:var(--bg);border:1px solid var(--border-2);border-radius:999px;padding:4px;gap:4px}
.vues-seg button{border:0;background:none;border-radius:999px;padding:8px 18px;font:inherit;font-weight:800;font-size:.82rem;color:var(--ink-soft);cursor:pointer}
.vues-seg button.on{background:var(--fa-marron);color:#fff}
.vues-filtres{display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex:1;justify-content:flex-end}
.vues-filtres .input,.vues-filtres .select{height:38px;font-size:.8rem;padding-top:0;padding-bottom:0;line-height:normal}
.vues-filtres .input{min-width:220px}
.fv{--fv-beige:#FFF6E2;--fv-rouge:#C03A3A;--fv-rouge-s:#FBECEC;--fv-vert:var(--ok);--fv-vert-s:var(--ok-soft);--fv-vert-i:var(--ok-ink)}
body[data-theme="dark"] .fv{--fv-beige:#2A2018;--fv-rouge:#EC6B6B;--fv-rouge-s:#3A1B1B}
.fv-vide{color:var(--ink-mute);font-weight:600}
/* Les statuts */
.fv-st{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;font-weight:800;font-size:.74rem;white-space:nowrap;border:1.5px solid}
.fv-st i{width:8px;height:8px;border-radius:50%;flex:none}
.fv-st svg{width:12px;height:12px}
.fv-st-afact{background:var(--surface);color:var(--ink-2);border-color:var(--border-2)} .fv-st-afact i{border:2px solid var(--ink-soft);width:9px;height:9px}
.fv-st-prev{background:var(--fv-beige);color:var(--fa-marron);border-color:#E9C98A;border-style:dashed} .fv-st-prev i{border:2px dashed var(--fa-marron);width:9px;height:9px}
.fv-st-retard{background:var(--fv-rouge-s);color:var(--fv-rouge);border-color:var(--fv-rouge)} .fv-st-retard i{background:var(--fv-rouge)}
.fv-st-fact{background:rgba(246,157,0,.14);color:#7A4A00;border-color:var(--fa-orange)} .fv-st-fact i{background:var(--fa-orange)}
.fv-st-attente{background:rgba(246,157,0,.14);color:var(--fv-rouge);border-color:var(--fv-rouge)} .fv-st-attente i{background:var(--fa-orange)}
.fv-st-percu{background:var(--fv-vert-s);color:var(--fv-vert-i);border-color:var(--fv-vert)} .fv-st-percu i{background:var(--fv-vert)}
.fv-st-off{background:var(--bg-2);color:var(--ink-mute);border-color:var(--bg-2);text-decoration:line-through} .fv-st-off i{background:var(--ink-mute)}
.fv-st-ajour{background:var(--surface);color:var(--fv-vert-i);border-color:var(--fv-vert)} .fv-st-ajour i{border:2px solid var(--fv-vert);width:9px;height:9px}
.fv-st-vide{background:var(--surface);color:var(--ink-mute);border-color:var(--border-2);border-style:dashed} .fv-st-vide i{background:var(--ink-mute)}
.fv-st-pb{background:var(--surface);color:var(--fv-rouge);border-color:var(--fv-rouge);border-style:dashed} .fv-st-pb i{display:none}
.fv-pointille{border-style:dashed}
body[data-theme="dark"] .fv-st-fact{color:var(--fa-orange)}
/* Les compteurs encadrés */
.fv-cpt{display:flex;gap:8px;margin-bottom:16px;align-items:stretch}
.fv-cpt-g{flex:1 1 0;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.fv-cpt-gh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 14px;border-top:5px solid var(--c);border-bottom:1px solid var(--border);background:var(--bg)}
.fv-cpt-gh span{font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.fv-cpt-gh b{font-weight:800;font-variant-numeric:tabular-nums}
.fv-cpt-cs{display:flex;flex:1}
.fv-cpt-c{flex:1;min-width:0;padding:12px 10px;border-left:1px solid var(--border-2);display:flex;flex-direction:column;gap:10px}
.fv-cpt-c:first-child{border-left:0}
.fv-cpt-top{display:flex;align-items:baseline;gap:8px}
.fv-cpt-top b{font-size:2.1rem;font-weight:800;line-height:1;color:var(--s);font-variant-numeric:tabular-nums}
.fv-cpt-top span{font-weight:800;font-size:.8rem;color:var(--ink-2)}
.fv-cpt-t{width:100%;border:1px solid var(--border-2);border-radius:8px;border-collapse:separate;border-spacing:0;overflow:hidden;font-variant-numeric:tabular-nums;font-size:.76rem}
.fv-cpt-t td{padding:5px 7px;border-top:1px solid var(--border);font-weight:700;white-space:nowrap}
.fv-cpt-t tr:first-child td{border-top:0}
.fv-cpt-t td:first-child{color:var(--ink-soft);border-right:1px solid var(--border)}
.fv-cpt-t td:last-child{text-align:right}
.fv-cpt-t tr.t td{background:var(--bg);font-weight:800;color:var(--ink)}
.fv-cpt [data-sel]{cursor:pointer;transition:background .12s}
.fv-cpt [data-sel]:hover{background:#FCF7EC}
body[data-theme="dark"] .fv-cpt [data-sel]:hover{background:var(--bg-2)}
.fv-cpt .on{background:var(--fv-beige)!important;box-shadow:inset 0 -3px 0 var(--fa-orange)}
.fv-encours{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1.5px solid var(--fa-orange);border-left:6px solid var(--fa-orange);border-radius:12px;padding:10px 14px;margin-bottom:14px;font-weight:700}
.fv-encours .fv-doux{color:var(--ink-soft)}
.fv-encours button{margin-left:auto;background:none;border:1px solid var(--border-2);border-radius:999px;padding:5px 12px;font:inherit;font-weight:700;font-size:.76rem;color:var(--ink-soft);cursor:pointer}
/* Une carte par classe : le BANDEAU a la couleur du BTS, le reste reste calme
   (Théo, 2 oct. 2026 au soir : les lignes en aplat orange ou marron « font mal
   aux yeux », « un gros pâté »). */
.fv-classe{background:var(--surface);border:1px solid var(--border-2);border-radius:14px;overflow:hidden;margin-bottom:24px}
.fv-classe > table{width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums;font-size:.82rem}
/* Les titres des colonnes : centrés au-dessus de leurs chiffres, un trait fin entre chaque colonne */
.fv-classe > table > thead > tr.fv-cols > th{background:var(--bg);font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);text-align:center;padding:10px 8px;border-bottom:2px solid var(--border-2);white-space:normal;line-height:1.3;vertical-align:middle}
.fv-classe > table > thead > tr.fv-cols > th.fv-c-nom{text-align:left;padding-left:4px}
.fv-classe > table > thead > tr.fv-cols > th + th + th,
.fv-classe > table > tbody > tr.fv-etu > td + td + td{border-left:1px solid var(--border)}
.fv-classe th.n,.fv-classe td.n{text-align:center}
/* Le bandeau de la classe : ses totaux tombent pile au-dessus de leurs colonnes */
.fv-classe-b th{padding:12px 8px;font-size:.86rem;font-weight:800;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-classe-b th:first-child{padding-left:16px}
.fv-classe-b th small{font-weight:700;margin-left:10px;font-size:.74rem;opacity:.8}
.fv-classe-b th.n{font-size:.84rem;text-align:center;border-left:1px solid rgba(46,32,23,.2)}
.fv-classe-b th.n + th:not(.n){border-left:1px solid rgba(46,32,23,.2)}
.fv-f-mco .fv-classe-b th{background:var(--fa-orange);color:var(--fa-marron)}
.fv-f-ndrc .fv-classe-b th{background:var(--fa-marron);color:var(--fa-beige)}
.fv-f-ndrc .fv-classe-b th.n,.fv-f-ndrc .fv-classe-b th.n + th:not(.n){border-left-color:rgba(251,222,170,.28)}
.fv-f-gpme .fv-classe-b th{background:var(--fa-beige);color:var(--fa-marron)}
.fv-f-x .fv-classe-b th{background:var(--bg-2);color:var(--ink)}
/* La ligne d'un étudiant : UNE ligne de texte, la hauteur de la vue globale */
.fv-classe > table > tbody > tr > td{padding:11px 8px;border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
.fv-classe > table > tbody > tr.fv-etu > td:first-child{padding:0 0 0 14px;text-overflow:clip}
.fv-classe > table > tbody > tr.fv-etu > td.fv-nom{padding-left:4px;padding-right:10px}
.fv-classe > table > tbody > tr.fv-etu > td.fv-c{text-align:center}
.fv-classe > table > tbody > tr.fv-etu > td > .fv-vide{font-size:.76rem}
.fv-classe td.n{font-weight:800;font-size:.86rem}
.fv-vert{color:var(--ok-ink)}
/* PROPOSITION B, CHOISIE PAR THÉO (2 oct. 2026 au soir) : un LISERÉ de la
   couleur du BTS au bord de chaque ligne — il descend aussi le long du détail
   déplié — et un étudiant sur deux en BEIGE CLAIR #FFF6E2 (« je préfère blanc
   beige plutôt que blanc gris finalement »). */
.fv-f-mco{--fv-bts:#F69D00}.fv-f-ndrc{--fv-bts:#2E2017}.fv-f-gpme{--fv-bts:#FBDEAA}.fv-f-x{--fv-bts:var(--border-2)}
body[data-theme="dark"] .fv-f-ndrc{--fv-bts:#FBDEAA}
tr.fv-etu{cursor:pointer}
tr.fv-etu.z1 > td{background:var(--fv-beige)}
tr.fv-etu > td:first-child{box-shadow:inset 5px 0 0 var(--fv-bts)}
tr.fv-etu:hover > td{filter:brightness(.985)}
tr.fv-etu.ouvert > td{border-bottom-color:transparent!important}
.fv-fl{display:inline-flex;width:24px;height:24px;border-radius:7px;align-items:center;justify-content:center;background:var(--bg-2);color:var(--ink-soft);font-size:.64rem;transition:transform .15s}
tr.ouvert .fv-fl{transform:rotate(90deg);background:var(--fa-marron);color:#fff}
/* Le nom, et « Rupture » juste à côté : le nom se raccourcit, jamais l'étiquette */
.fv-nl{display:flex;align-items:center;gap:8px;min-width:0}
.fv-nl b{font-weight:800;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fv-rupt{flex:none;display:inline-block;background:var(--fv-rouge-s);color:var(--fv-rouge);font-weight:800;font-size:.62rem;padding:2px 7px;border-radius:999px}
/* L'avancement : la barre et son compte côte à côte */
.fv-av{display:flex;align-items:center;gap:8px;width:100%;max-width:150px;margin:0 auto}
.fv-barre{display:flex;flex:1;min-width:30px;height:8px;border-radius:999px;overflow:hidden;background:var(--bg-2)}
.fv-barre i{display:block;height:100%}
.fv-barre i.e{background:var(--ok)}
.fv-barre i.f{background:var(--fa-orange)}
.fv-av small{flex:none;color:var(--ink-soft);font-weight:800;font-size:.74rem}
/* La prochaine échéance en une ligne : OPCO ou RAC en étiquette, la date, le montant */
.fv-pl{display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;line-height:1.2}
.fv-classe > table > tbody > tr.fv-etu .fv-st{vertical-align:middle}
.fv-qui{flex:none;font-style:normal;font-size:.58rem;font-weight:800;letter-spacing:.05em;padding:2px 5px;border-radius:4px;background:var(--bg-2);color:var(--ink-soft);border:1px solid var(--bg-2)}
.fv-qui.fv-qui-prev{background:transparent;border:1px dashed var(--ink-mute)}
.fv-pl b{font-weight:800}
.fv-pl b.r{color:var(--fv-rouge)}
.fv-pl .fv-m{font-weight:600;color:var(--ink-2)}
.fv-drap{display:inline-flex;align-items:center;gap:4px;color:var(--fv-rouge);font-weight:800;font-size:.72rem;margin-left:6px;vertical-align:middle}
.fv-drap svg{width:12px;height:12px}
/* Sur une carte plus étroite (petit écran), la ligne reste UNE ligne : l'étiquette
   OPCO/RAC s'efface (elle reste au survol), les pastilles se resserrent. */
.fv{container-type:inline-size;container-name:fv}
@container fv (max-width:1060px){
  .fv-qui{display:none}
  .fv-classe > table > tbody > tr.fv-etu .fv-st{font-size:.68rem;padding:3px 8px 3px 6px;gap:5px}
  .fv-rupt{font-size:.58rem;padding:1px 5px}
  .fv-nl{gap:6px}
  .fv-classe > table > tbody > tr.fv-etu > td.fv-nom{padding-right:4px}
  .fv-pl{gap:5px}
  .fv-av{gap:6px}
  .fv-classe td.n{font-size:.8rem}
  .fv-classe-b th.n{font-size:.78rem}
}
/* Le détail déplié : neutre, encadré */
tr.fv-ouv > td{padding:10px 18px 24px 48px!important;border-bottom:2px solid var(--border-2)!important;white-space:normal!important;overflow:visible!important;box-shadow:inset 5px 0 0 var(--fv-bts);background:#F7F6F5}
body[data-theme="dark"] tr.fv-ouv > td{background:var(--bg)}
/* Le détail : contrat par contrat, OPCO puis RAC */
.fv-contrat{margin-top:12px}
.fv-contrat + .fv-contrat{margin-top:22px;padding-top:14px;border-top:2px dashed var(--fa-beige)}
.fv-contrat-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-weight:700;color:var(--ink-2)}
.fv-contrat-h b{font-weight:800;color:var(--fa-marron);font-size:.9rem}
body[data-theme="dark"] .fv-contrat-h b{color:var(--fa-beige)}
.fv-contrat-h .dates{color:var(--ink-soft);font-weight:600;font-size:.78rem}
.fv-kst{font-size:.66rem;font-weight:800;padding:3px 9px;border-radius:999px;border:1.5px solid}
.fv-kst.k-encours{color:var(--ok-ink);border-color:var(--ok);background:var(--surface)}
.fv-kst.k-rupture{color:var(--fv-rouge);border-color:var(--fv-rouge);background:var(--fv-rouge-s)}
.fv-kst.k-ancien{color:var(--ink-soft);border-color:var(--border-2);background:var(--bg-2)}
.fv-lien{background:none;border:0;padding:0;font:inherit;color:#B36F00;font-weight:800;font-size:.76rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fv-contrat-h .fv-lien{margin-left:auto}
.fv-contrat.ancien .fv-bloc{opacity:.9}
.fv-bloc{background:var(--surface);border:1px solid var(--border-2);border-radius:12px;overflow:hidden;margin-top:10px}
.fv-bloc-h{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border-2)}
.fv-bloc-h em{font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.07em;padding:3px 8px;border-radius:5px}
.fv-bloc.opco .fv-bloc-h{background:#FFF8EA}
.fv-bloc.opco .fv-bloc-h em{background:var(--fa-orange);color:var(--fa-marron)}
.fv-bloc.rac .fv-bloc-h{background:var(--bg)}
.fv-bloc.rac .fv-bloc-h em{background:var(--fa-marron);color:var(--fa-beige)}
body[data-theme="dark"] .fv-bloc.opco .fv-bloc-h{background:var(--bg-2)}
.fv-bloc-h b{font-weight:800;font-size:.86rem}
.fv-bloc-h span{margin-left:auto;font-weight:700;color:var(--ink-soft);font-size:.76rem;font-variant-numeric:tabular-nums}
.fv-det{border-collapse:separate;border-spacing:0;width:100%;font-variant-numeric:tabular-nums;table-layout:fixed}
.fv-det th{font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);text-align:center;padding:9px 6px;border-bottom:2px solid var(--border-2);white-space:normal;line-height:1.25;background:var(--surface)}
.fv-det th + th,.fv-det td + td{border-left:1px solid var(--border)}
.fv-det th.g-fact{border-bottom-color:var(--fa-orange);color:#B36F00}
.fv-det th.g-enc{border-bottom-color:var(--ok);color:var(--ok-ink)}
.fv-det td{padding:0;border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:middle;height:48px;text-align:center}
.fv-det tr:last-child td{border-bottom:0}
.fv-det td.g-fact{background:rgba(246,157,0,.04)}
.fv-det td.g-enc{background:rgba(30,158,90,.04)}
.fv-det .bord{border-left:2px solid var(--border-2)!important}
.fv-det .n{text-align:center}
.fv-in{padding:0 8px;display:flex;align-items:center;justify-content:center;height:48px}
.fv-in.n{justify-content:center}
.fv-det tr.fv-off td{color:var(--ink-mute)}
.fv-det tr.fv-off .fv-mt{text-decoration:line-through}
.fv-det tr.fv-flash td{animation:fvFlash 1.8s ease}
@keyframes fvFlash{0%{background:#FFE9B8}100%{}}
/* Les cases qu'on remplit d'un clic */
.fv-ed{display:flex;align-items:center;justify-content:center;text-align:center;height:48px;padding:0 8px;cursor:text;position:relative}
.fv-ed.n{justify-content:center}
.fv-ed:hover{box-shadow:inset 0 0 0 1.5px var(--fa-orange);background:var(--surface)}
.fv-ed:hover .fv-vide{color:transparent}
.fv-ed:hover .fv-vide::after{content:'Saisir';color:#B36F00;font-weight:800;font-size:.72rem;position:absolute;left:0;right:0;text-align:center}
.fv-ed.attendu{box-shadow:inset 0 0 0 1.5px #F1C27A}
.fv-ed.attendu .fv-vide{color:#E3A33A}
.fv-ed input{width:100%;border:0;outline:0;background:transparent;font:inherit;font-weight:800;font-size:.8rem;color:var(--ink);padding:0;min-width:0;text-align:center}
.fv-ed.saisie{box-shadow:inset 0 0 0 2px var(--fa-orange);background:var(--surface);gap:4px}
.fv-vider{flex:none;width:20px;height:20px;border-radius:50%;border:0;background:var(--bg-2);color:var(--ink-soft);font-weight:800;font-size:.9rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.fv-vider:hover{background:var(--fv-rouge-s);color:var(--fv-rouge)}
.fv-brouillon{color:var(--ink-mute);font-weight:700;font-style:italic}
.fv-st-clic{cursor:pointer;border-radius:999px}
.fv-st-clic:hover{box-shadow:0 0 0 3px rgba(246,157,0,.25)}
.fv-ecart{display:block;font-size:.64rem;font-weight:700;color:#B36F00;line-height:1.1;text-align:center}
.fv-statut{padding:0 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;height:48px}
.fv-dl{display:block;font-size:.64rem;font-weight:800;margin-top:2px;color:var(--ink-soft)}
.fv-dl.r{color:var(--fv-rouge)}.fv-dl.o{color:#B36F00}.fv-dl.v{color:var(--ok-ink)}
.fv-det td.fv-act{text-align:center;padding:4px!important;white-space:normal}
.fv-det td.fv-act .fv-g{padding:5px 6px;margin:2px}

.fv-g{border:1px solid var(--border-2);background:var(--surface);border-radius:8px;padding:5px 8px;font:inherit;font-weight:800;font-size:.72rem;color:var(--fa-marron);display:inline-flex;align-items:center;gap:5px;position:relative;cursor:pointer;vertical-align:middle}
.fv-g:hover{border-color:var(--fa-marron)}
.fv-g svg{width:14px;height:14px}
.fv-g b{position:absolute;top:-6px;right:-6px;background:var(--fa-marron);color:#fff;border-radius:999px;font-size:.58rem;min-width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.fv-g.a-pb{border-color:var(--fv-rouge);color:var(--fv-rouge);background:var(--fv-rouge-s)}
.fv-g.a-pb b{background:var(--fv-rouge)}
.fv-g.fv-suppr{color:var(--ink-mute)}
.fv-g.fv-suppr:hover{color:var(--fv-rouge);border-color:var(--fv-rouge)}
body[data-theme="dark"] .fv-g{color:var(--ink)}
/* La ligne vide à remplir */
.fv-det tr.fv-fantome td{background:repeating-linear-gradient(135deg,rgba(255,246,226,.55),rgba(255,246,226,.55) 8px,rgba(251,222,170,.25) 8px,rgba(251,222,170,.25) 16px)}
.fv-det tr.fv-fantome td .fv-in b{color:var(--ink-mute)}
.fv-ph{color:#D9C9AE;font-weight:700;font-size:.76rem}
.fv-det tr.fv-fantome .fv-ed:hover .fv-ph{color:#B36F00}
/* Un contrat vide côté OPCO : le montant annuel */
.fv-det tr.fv-vide-l td{height:auto;padding:14px 12px;background:#FFFBF3}
body[data-theme="dark"] .fv-det tr.fv-vide-l td{background:var(--bg-2)}
.fv-vide-c{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fv-vide-c .t{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.fv-vide-c label{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink-soft);font-size:.78rem}
.fv-vide-c .ou{color:var(--ink-mute);font-weight:700;font-size:.76rem}
.fv-ent{position:relative;display:inline-block}
.fv-ent input{width:130px;border:1.5px solid var(--border-2);border-radius:8px;padding:7px 26px 7px 10px;font:inherit;font-weight:800;text-align:right;background:var(--surface);color:var(--ink)}
.fv-ent input:focus{outline:0;border-color:var(--fa-orange)}
.fv-ent i{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--ink-mute);font-size:.76rem}
.fv-ent.manque input{border-color:var(--fv-rouge)}
.fv-ok{border:0;border-radius:8px;padding:8px 12px;font:inherit;font-weight:800;font-size:.74rem;background:var(--fa-orange);color:var(--fa-marron);cursor:pointer}
.fv-ok-v{border:1px solid var(--ok);border-radius:8px;padding:4px 10px;font:inherit;font-weight:800;font-size:.72rem;background:var(--ok-soft);color:var(--ok-ink);cursor:pointer}
/* Les commentaires et problèmes */
.fv-det tr.fv-notes td{background:var(--bg);padding:10px 12px 12px 72px;white-space:normal;height:auto}
.fv-note{display:flex;gap:10px;align-items:flex-start;padding:7px 10px;border-radius:9px;background:var(--surface);border:1px solid var(--border);margin-bottom:6px;max-width:780px}
.fv-note.pb{border-color:var(--fv-rouge);background:var(--fv-rouge-s)}
.fv-note.pb.regle{border-color:var(--border);background:var(--surface);opacity:.7}
.fv-note .qui{font-size:.7rem;font-weight:800;color:var(--ink-soft);white-space:nowrap}
.fv-note .txt{flex:1;font-weight:600;line-height:1.4}
.fv-note .etq{font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:var(--bg-2);color:var(--ink-soft);white-space:nowrap}
.fv-note.pb .etq{background:var(--fv-rouge);color:#fff}
.fv-note.pb.regle .etq{background:var(--ok-soft);color:var(--ok-ink)}
.fv-ajout{display:flex;gap:8px;align-items:flex-start;max-width:780px;margin-top:8px}
.fv-ajout textarea{flex:1;border:1.5px solid var(--border-2);border-radius:9px;padding:8px 10px;font:inherit;font-weight:600;font-size:.8rem;resize:vertical;min-height:38px;background:var(--surface);color:var(--ink)}
.fv-ajout label{display:flex;align-items:center;gap:6px;font-weight:800;font-size:.74rem;color:var(--fv-rouge);white-space:nowrap;padding-top:9px}
.fv-pied{padding:10px 2px}
.fv-conf{line-height:1.6}
.fv-conf-r{color:var(--fv-rouge);font-weight:800}
.fv-rien{padding:30px;text-align:center;color:var(--ink-mute);font-weight:700}
@media (max-width:1100px){.fv-cpt{flex-wrap:wrap}.fv-cpt-g{flex-basis:45%}}
.vues-filtres .input,.vues-filtres .select{width:auto;flex:0 0 auto}
.vues-filtres .input{width:240px}
.vues-filtres .select{max-width:220px}
/* « Garanti à ce jour » mensualisé : le mois en cours et les mois à venir,
   pas encore acquis, en plus clair (Théo, 2 oct. 2026). */
.encc-l td[data-avenir]{color:var(--ink-mute);font-style:italic;font-weight:600}
/* ⚡ LES LONGUES LISTES (2 oct. 2026, « que le temps de réaction soit là ») :
   le navigateur ne met en page que les classes VISIBLES à l'écran — les
   autres gardent leur place (taille retenue) et se dessinent en arrivant. */
.fv-classe,.sue-t-wrap{content-visibility:auto;contain-intrinsic-size:auto 520px}


/* ══════════ INDICATEURS : LES POIDS ET LES PASTILLES D'OBJECTIF (Théo, 5 oct. 2026) ══════════
   Les colonnes rangées de la plus lourde à la plus légère (les poids ne
   se lisent que dans « Comment c'est calculé »). La pastille à côté d'un
   chiffre dit où en est l'objectif du réseau : atteint, proche, loin. */
.ind-pt.obj-ok{background:var(--ok)}
.ind-pt.obj-proche{background:var(--fa-orange)}
.ind-pt.obj-loin{background:var(--danger)}
.ind-legende i.ind-pt{width:9px;height:9px;border-radius:50%;margin:0}
.ind-leg-obj{gap:5px}
/* Les sous-titres des colonnes passent à la ligne (la règle « :has » du
   2 oct. les gardait sur une ligne et faisait défiler le tableau). */
.ind-t thead th:has(+ th) small,.ind-t thead th small{white-space:normal}
/* Indicateurs : chaque chiffre de l'alternance ouvre son détail (Théo, 5 oct. 2026). */
.ind-t tbody td[data-explique],.ind-t tbody .ind-eff[data-explique]{cursor:pointer}
.ind-t tbody td[data-explique]:hover,.ind-t tbody .ind-eff[data-explique]:hover{text-decoration:underline dotted;text-underline-offset:3px}

/* ═══════════════════════════════════════════════════════════════
   OBJECTIFS ET MISSIONS — la fiche étudiant (Théo, 5 oct. 2026), js/objectifs.js.
   La même vue que l'App entreprise et l'App étudiante : une ligne
   ‹ Tous › · Objectifs | Missions · tri par l'œil · « Ajouter » orange,
   puis les rangées Cours | Alternance (missions : En cours | Terminées).
   La pastille dit QUI a fixé : campus orange, direction nationale marron,
   entreprise vert, étudiant bleu. L'œil : orange = l'étudiant le voit,
   gris barré = il ne le voit pas. Les cartes sont celles de l'interne (.ns2-obj).
   ═══════════════════════════════════════════════════════════════ */
.ob{display:flex;flex-direction:column;gap:14px;min-width:0}
.ob-titre{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:800;color:var(--ink)}
.ob-titre svg{width:17px;height:17px;color:#F69D00}
.ob-barre{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.ob-fleches{display:inline-flex;align-items:center;gap:4px;padding:3px;border-radius:12px;background:var(--bg-2);border:1px solid var(--border)}
.ob-fleches button{border:0;background:var(--surface);width:28px;height:28px;border-radius:8px;display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.ob-fleches button svg{width:15px;height:15px}
.ob-lbl{min-width:168px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:.8rem;font-weight:800;color:var(--ink)}
.ob-lbl > b{font-size:.7rem;padding:1px 7px;border-radius:99px;background:var(--surface);color:var(--ink-2)}
.ob-tabs{display:inline-flex;gap:3px;padding:3px;border-radius:12px;background:var(--bg-2);border:1px solid var(--border)}
.ob-tabs button{border:0;background:transparent;border-radius:9px;padding:7px 14px;font:inherit;font-weight:800;font-size:.82rem;color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.ob-tabs button b{font-size:.7rem;padding:1px 7px;border-radius:99px;background:var(--surface);color:var(--ink-2)}
.ob-tabs button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(46,32,23,.15)}
.ob-tri{display:inline-flex;gap:3px;padding:3px;border-radius:12px;background:var(--bg-2);border:1px solid var(--border)}
.ob-tri button{border:1px solid transparent;background:transparent;border-radius:9px;padding:6px 9px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:800;font-size:.76rem;color:var(--ink-2)}
.ob-tri button svg{width:16px;height:16px}
.ob-tri .ob-tri-vis svg{color:#F69D00}
.ob-tri .ob-tri-cache svg{color:var(--ink-mute)}
.ob-tri button.on{background:var(--surface);border-color:var(--border-2);box-shadow:0 1px 3px rgba(46,32,23,.15)}
.ob-tri .ob-tri-vis.on{border-color:#F69D00}
.ob-ajout{margin-left:auto;display:inline-flex;align-items:center;gap:7px;flex:none;background:#F69D00;color:#2E2017;border:1px solid #F69D00;border-radius:12px;padding:9px 16px;font:inherit;font-weight:800;font-size:.84rem;cursor:pointer;white-space:nowrap}
.ob-ajout svg{width:15px;height:15px}
.ob-ajout:hover{filter:brightness(1.06)}
/* Qui a fixé */
.ob-o{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:99px;white-space:nowrap;border:1px solid transparent;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ob-o svg{width:12px;height:12px;flex:none}
.ob-o-campus{background:#FFF6E2;color:#2E2017;border-color:#FBDEAA}
.ob-o-campus svg{color:#F69D00}
.ob-o-nat{background:#2E2017;color:#FFF6E2}
.ob-o-entreprise{background:var(--ok-soft);color:var(--ok-ink)}
.ob-o-entreprise svg{color:var(--ok)}
.ob-o-etudiant{background:var(--info-soft);color:var(--info-ink)}
.ob-o-etudiant svg{color:var(--info)}
body[data-theme="dark"] .ob-o-campus{background:transparent;color:var(--ink);border-color:var(--border-2)}
/* L'œil */
.ob-oeil{margin-left:auto;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;border:1px solid #FBDEAA;background:#FFF6E2;color:#F69D00;flex:none;padding:0}
.ob-oeil svg{width:16px;height:16px}
.ob-oeil.off{border-color:var(--border-2);background:var(--bg-2);color:var(--ink-mute)}
button.ob-oeil{cursor:pointer}
body[data-theme="dark"] .ob-oeil:not(.off){background:transparent}
/* Les rangées */
.ob-rang{display:flex;flex-direction:column;gap:10px;min-width:0}
.ob-rang + .ob-rang{padding-top:14px;border-top:1px dashed var(--border-2)}
.ob-rang-t{display:flex;align-items:center;gap:9px;font-weight:800;font-size:.9rem;color:var(--ink)}
.ob-rang-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;border:1.5px solid var(--ink-2);color:var(--ink-2)}
.ob-rang-ic svg{width:15px;height:15px}
.ob-rang-t > b{font-size:.72rem;padding:1px 8px;border-radius:99px;background:var(--bg-2);color:var(--ink-2)}
.ob-aucun{color:var(--ink-mute);font-size:.8rem;font-weight:700;padding:2px}
.ob-carte .ns2-obj-h{flex-wrap:nowrap}
/* Le formulaire */
.ob-choix{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ob-choix label{position:relative;cursor:pointer}
.ob-choix input{position:absolute;opacity:0;pointer-events:none}
.ob-choix span{display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;border:1.5px solid var(--border-2);border-radius:11px;font-weight:800;font-size:.84rem;color:var(--ink-2)}
.ob-choix span svg{width:16px;height:16px}
.ob-choix input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.ob-choix input:focus-visible + span{outline:2px solid #F69D00;outline-offset:2px}
.ob-coche{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #FBDEAA;background:#FFF6E2;border-radius:12px;color:#2E2017;font-size:.84rem;font-weight:700;cursor:pointer}
.ob-coche input{width:18px;height:18px;accent-color:#F69D00}
.ob-coche svg{width:16px;height:16px;color:#F69D00}
@media (max-width:560px){.ob-ajout{margin-left:0}.ob-lbl{min-width:0}}

/* Statut de l'étudiant ↔ contrat (6 oct. 2026) : ce qui va se passer, en une ou deux lignes. */
.st-plan{margin:0 0 12px;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--ink-2);line-height:1.45}
.st-plan b{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════
   COURS ET ALTERNANCE, EN COULEUR (Théo, 6 oct. 2026) — les trois apps
   Cours = livre ORANGE, Alternance = mallette MARRON. Le trait du haut
   de chaque carte d'objectif ou de mission dit son sujet ; l'état se lit
   ailleurs : le compte J-n (rouge une fois dépassé), la pastille
   Atteint / Non atteint et le fond grisé d'une carte terminée.
   ═══════════════════════════════════════════════════════════════ */
.ob-rang-ic.ob-ri-cours{background:#FFF6E2;border-color:#F69D00;color:#F69D00}
.ob-rang-ic.ob-ri-alternance{background:#2E2017;border-color:#2E2017;color:#FFF6E2}
.ns2-objs > .ns2-obj.ob-carte.ob-s-cours{border-top-color:#F69D00}
.ns2-objs > .ns2-obj.ob-carte.ob-s-alternance{border-top-color:#2E2017}
body[data-theme="dark"] .ns2-objs > .ns2-obj.ob-carte.ob-s-alternance{border-top-color:#FBDEAA}
body[data-theme="dark"] .ob-rang-ic.ob-ri-alternance{border-color:#FBDEAA}

/* LA MISSION : un bandeau marron « Mission » en tête de carte (Théo,
   6 oct. 2026, proposition A). Le compte à rebours ou le résultat y vont. */
.ns2-objs > .ns2-obj.ob-carte.ob-mission{border-top:1px solid #2E2017;border-radius:14px;padding:0;gap:0;overflow:hidden}
.ob-bandeau{display:flex;align-items:center;gap:7px;background:#2E2017;color:#FFF6E2;
  padding:7px 13px;font-size:.78rem;font-weight:800;letter-spacing:.02em}
.ob-bandeau svg{width:14px;height:14px;flex:none}
.ob-bandeau .ns2-compte{font-size:1rem;color:#F69D00}
.ns2-depasse .ob-bandeau .ns2-compte{background:var(--danger);color:#fff;font-size:.74rem;padding:2px 8px;border-radius:99px}
.ob-bandeau .ns2-etat{margin-left:auto}
.ob-bandeau .ns2-etat-atteint{background:#FFF6E2;color:#2E2017;border-color:#FFF6E2}
.ob-corps{display:flex;flex-direction:column;gap:6px;padding:10px 13px 12px;flex:1}
body[data-theme="dark"] .ns2-objs > .ns2-obj.ob-carte.ob-mission{border-color:#4A3B2E}

/* ═══════════════════════════════════════════════════════════════
   LES PANNEAUX DE LA FRISE, COMME DANS L'APP ENTREPRISE (Théo, 6 oct. 2026)
   Les dates et délais (frise étudiant, frise classe, missions) en TUILES :
   l'icône dans sa tuile à gauche, le libellé au-dessus de la valeur. Sur
   téléphone, chaque panneau devient une feuille qui monte du bas, avec sa
   poignée, à la hauteur de son contenu (92 % de l'écran au plus).
   ═══════════════════════════════════════════════════════════════ */
.fep-dates{gap:8px}
.fep-date-ligne{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:12px;row-gap:2px;
  align-items:center;padding:10px 12px;border:none;border-radius:14px;background:var(--bg-2)}
.fep-date-ligne svg,.fep .fep-date-ligne svg.ico{grid-row:1 / span 2;width:38px;height:38px;padding:10px;
  box-sizing:border-box;border-radius:11px;background:var(--surface);color:var(--brand-700)}
.fep-date-ligne span{grid-column:2;flex:none;font-size:.72rem;font-weight:700;color:var(--ink-mute);align-self:end}
.fep-date-ligne b{grid-column:2;font-size:.92rem;font-weight:800;color:var(--ink);align-self:start;
  line-height:1.3;overflow-wrap:anywhere}
.drawer-h .h3{text-wrap:balance}
@keyframes feuilleIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes feuilleOut{to{transform:translateY(100%)}}
@media(max-width:720px){
  body .drawer,body .drawer.drawer-large,body .drawer.drawer-large.drawer-xl{top:auto;left:0;right:0;bottom:0;
    width:auto;height:auto;max-height:92dvh;border-radius:24px 24px 0 0;overflow:hidden;
    padding-bottom:env(safe-area-inset-bottom,0px);animation:feuilleIn .34s var(--ease)}
  body .drawer.closing{animation:feuilleOut .22s var(--ease) forwards}
  body .drawer::before{content:'';position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;
    border-radius:99px;background:var(--border-2);z-index:3}
  .drawer-h,.drawer-large .drawer-h{padding:24px 14px 12px 18px;align-items:flex-start;border-bottom:none}
  .drawer-large .drawer-f{padding-left:16px;padding-right:16px}
  .drawer-h .h3{font-size:1.08rem;line-height:1.3;display:block}
  .drawer-h .btn-icon{width:36px;height:36px;min-height:36px;border-radius:50%;background:var(--bg-2);flex:none}
  .drawer-b{flex:0 1 auto;min-height:0}
  .fep-vue{padding:14px 14px 20px}
  .fep-bande{padding:12px 14px;gap:12px;border-radius:16px;margin-bottom:12px}
  .fep-bande .fb-ic{width:38px;height:38px;border-radius:12px}
  .fep-bande .fb-txt{min-width:0}
  .fep-bande .fb-txt b{font-size:.98rem}
  .fep-onglets .tab{padding:12px 6px;font-size:.82rem}
  .fep-date-ligne b{font-size:.88rem}
}

/* ═══════════════════════════════════════════════════════════════
   PAS DE MINI-PHRASES (6 oct. 2026)
   Les états vides n'ont plus de texte d'explication, les lignes
   d'accès rapide plus de sous-titre descriptif : ce qui reste vide
   ne laisse pas de trou.
   ═══════════════════════════════════════════════════════════════ */
.empty p:empty { display: none; }
.ri-body small:empty { display: none; }
/* Un brouillon ne s'annonce qu'une fois : la pastille « Brouillon » des
   interrupteurs suffit, le mot ajouté en ::after faisait doublon et
   repoussait les pastilles sur deux lignes. */
.non-publie:has(.pub-brouillon)::after { content: none; }

/* Les flèches des rangées de contrats (6 oct. 2026) : au milieu des
   cartes, un rond blanc ; seulement s'il reste quelque chose à voir. */
.gk-fl{position:absolute;top:calc(50% - 22px);z-index:2;width:34px;height:34px;border-radius:50%;
  display:none;align-items:center;justify-content:center;cursor:pointer;
  background:var(--surface);border:1px solid var(--border-2);color:var(--ink);
  box-shadow:0 4px 14px rgba(46,32,23,.14);transition:transform .15s}
.gk-fl:hover{transform:scale(1.08)}
.gk-fl svg{width:16px;height:16px}
.gk-fl-g{left:-10px}
.gk-fl-d{right:-6px}
.gk-piste.a-gauche .gk-fl-g, .gk-piste.a-droite .gk-fl-d{display:flex}
.gk-piste:not(.a-droite)::after{opacity:0}
@media (max-width:720px){ .gk-fl{display:none !important} }

/* LISIBILITÉ (6 oct. 2026) : plus aucun libellé sous 10,5 px sur les
   cartes de classe et dans les frises. */
.gcl-suite .gcl-lab, .gcl-remp-l span { font-size: .67rem; }
.gcl-m small { font-size: .67rem; }
.ft .fet-sousdate { font-size: .68rem; }

/* ═══════════════════════════════════════════════════════════════
   L'APP INTERNE SUR TÉLÉPHONE — 6 OCTOBRE 2026
   La même passe que l'App entreprise : barre du bas collée au bord,
   en-tête réduit à l'essentiel, l'essentiel apparent et le reste au
   toucher, rien qui dépasse. Tout ce bloc ne vaut que sous 720 px :
   l'ordinateur n'en voit rien.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:720px){

  /* ── LA BARRE DU BAS, POSÉE SUR LE BORD ── */
  :root{--bas-barre:calc(78px + env(safe-area-inset-bottom,0px))}
  .mobilebar{left:0;right:0;bottom:0;border-radius:0;gap:2px;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
    background:#2E2017;-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:0 -8px 24px rgba(46,32,23,.16)}
  .mb-item{flex:1;min-width:0;font-size:.64rem;padding:8px 2px 7px;position:relative;cursor:pointer}
  .mb-item > span:not(.rn-badge){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .mb-item.on{color:#F69D00;background:rgba(246,157,0,.14)}
  .mb-item .rn-badge{position:absolute;top:3px;left:calc(50% + 5px);right:auto;min-width:18px;height:18px;
    padding:0 5px;border-radius:99px;font-size:.62rem;margin:0;border-color:#2E2017}
  .page{padding:16px 16px calc(var(--bas-barre) + 24px)}

  /* ── L'EN-TÊTE : LE LOGO, LA RECHERCHE, L'AIDE, LA CLOCHE ──
     Le campus se lit dans « Plus », la vue sombre aussi : la barre ne
     déborde plus. */
  .topbar{gap:8px;padding:10px 14px}
  .topbar .bs{display:none}
  .topbar .searchbar{flex:0 0 40px;width:40px;height:40px;padding:0;justify-content:center;margin-left:auto}
  .topbar .searchbar .kbd-group{display:none}
  #actions-entete{gap:6px;flex:none}
  #actions-entete > .badge.b-brand{display:none}
  #btn-theme{display:none}
  #sel-campus{min-width:0 !important;max-width:132px;font-size:.78rem}

  /* ── LA FEUILLE « PLUS » ── */
  .drawer-plus .drawer-b{padding:6px 16px 20px}
  .mp-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .mp-tuile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px 12px;
    border-radius:16px;border:1px solid var(--border);background:var(--surface);color:var(--ink);
    font:inherit;cursor:pointer}
  .mp-tuile.on{border-color:var(--brand);background:var(--brand-50)}
  .mp-ic{position:relative;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;
    justify-content:center;background:var(--brand-50);color:var(--brand-700)}
  .mp-ic svg{width:20px;height:20px}
  .mp-ic .rn-badge{position:absolute;top:-7px;right:-9px;margin:0;min-width:19px;height:19px;padding:0 5px;
    border-radius:99px;background:#F69D00;color:#2E2017;font-size:.66rem;font-weight:800;
    display:flex;align-items:center;justify-content:center;border:2px solid var(--surface)}
  .mp-nom{font-size:.76rem;font-weight:700;text-align:center;line-height:1.2}
  .mp-compte{margin-top:18px;border-top:1px solid var(--border);padding-top:14px;display:flex;flex-direction:column;gap:4px}
  .mp-qui{display:flex;align-items:center;gap:12px;padding:4px 2px 10px}
  .mp-qui b{display:block;font-size:.92rem}
  .mp-qui small{color:var(--ink-mute);font-size:.76rem}
  .mp-ligne{display:flex;align-items:center;gap:12px;height:46px;padding:0 10px;border:0;border-radius:12px;
    background:transparent;color:var(--ink);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;text-align:left}
  .mp-ligne svg{width:18px;height:18px;color:var(--ink-mute)}
  .mp-ligne.danger, .mp-ligne.danger svg{color:var(--danger)}
}

/* ── LE TABLEAU DE BORD SUR TÉLÉPHONE ──
   Il faisait 2 500 px de haut : cinq tuiles et cinq cartes empilées une
   à une, chacune plein écran. Deux colonnes, la première case en
   pleine largeur (Contrats en cours, puis le Potentiel), des chiffres
   à taille de pouce, et les deux jauges côte à côte. */
@media(max-width:720px){
  .db{gap:12px}
  .db-filtres{gap:8px}
  .db-seg-g{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .db-seg-g::-webkit-scrollbar{display:none}
  .db-seg{padding:0 11px;font-size:.8rem;white-space:nowrap;flex:none}

  .page[data-vue="dashboard"] .db-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-tuile{padding:14px 14px 15px;gap:8px}
  .db-tuile:first-child{grid-column:1/-1}
  .db-tuile + .db-tuile{border-left:0;border-top:1px solid var(--border)}
  .db-tuile:nth-child(odd):not(:first-child){border-left:1px solid var(--border)}
  .db-t-l{font-size:.78rem}
  .db-t-ic{width:28px;height:28px}
  .db-t-ic svg{width:13px;height:13px}
  .db-t-n{font-size:28px;letter-spacing:-.8px}
  .db-t-d{font-size:.72rem}

  .db-fin.db-fin-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .db-fin-5 > .db-f:first-child{grid-column:1/-1}
  .db-fin-5 .db-f{padding:14px}
  .db-fin-5 .db-f-t{font-size:.76rem}
  .db-fin-5 .db-f-n{font-size:21px;letter-spacing:-.5px}
  .db-fin-5 .db-f-b{margin-top:8px;font-size:.66rem}
  .db-fin-5 .db-f-j{margin-top:10px}
  .db-fin-5 .db-f-d{margin:8px 0 0;font-size:.7rem;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}

  .db-bas{grid-template-columns:1fr}
  .db-obj-corps{grid-template-columns:1fr 1fr!important}
  .db-mes{padding:8px 6px}
  .db-mes + .db-mes{border-top:0;border-left:1px solid var(--border)}
  .db-mes-tete{flex-direction:column;align-items:flex-start;gap:6px}
  .db-mes-tete span{font-size:.76rem}
  .db-jauge{max-width:150px}
}

/* ── CE QUI NE VAUT QUE SUR UN ÉCRAN ──
   .sur-ordi disparaît sur téléphone (« Ajouter une mission » → « Ajouter »),
   .sur-tel n'existe que sur téléphone. */
@media(min-width:721px){ .sur-tel{display:none!important} }
@media(max-width:720px){ .sur-ordi{display:none!important} }

/* ── TO DO LIST ET « À VALIDER » : UNE COLONNE À LA FOIS ── */
@media(max-width:720px){
  .page[data-vue="agenda"] .page-h, .page[data-vue="valider"] .page-h{gap:12px}
  .page[data-vue="agenda"] .page-h > div:first-child{display:flex;align-items:center;justify-content:space-between}
  .page[data-vue="agenda"] .ph-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;width:100%}
  .page[data-vue="agenda"] .filtre-qui{display:flex;flex-wrap:nowrap;gap:6px;min-width:0;flex:1;
    overflow-x:auto;scrollbar-width:none;padding:2px 0}
  .page[data-vue="agenda"] .filtre-qui::-webkit-scrollbar{display:none}
  .page[data-vue="agenda"] .filtre-qui .fq{flex:none}
  .page[data-vue="agenda"] .fq-tous{height:36px;padding:0 13px;white-space:nowrap}
  .page[data-vue="agenda"] #btn-mission{flex:none;width:40px;height:40px;padding:0;justify-content:center}
  .page[data-vue="agenda"] #btn-mission #lib-mission, .page[data-vue="agenda"] #btn-mission svg:last-child{display:none}
  .page[data-vue="agenda"] #btn-ajouter{flex:none;height:40px;padding:0 14px}

  .kanban{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:100%;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px;align-items:start}
  .kanban::-webkit-scrollbar{display:none}
  .kanban .kb-col{scroll-snap-align:start;min-height:180px}
  .kb-pil + .kanban .kb-h{display:none}
  .kb-pil{display:flex;align-items:center;gap:6px;height:48px;padding:3px;margin-bottom:10px;
    border-radius:99px;border:1.5px solid var(--border-2);background:var(--surface)}
  .kb-pil-fl{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--bg-2);
    color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
  .kb-pil-fl svg{width:17px;height:17px}
  .kb-pil-fl:disabled{opacity:.28;cursor:default}
  .kb-pil-c{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:9px;
    font-weight:800;font-size:.95rem;color:var(--ink)}
  .kb-pil-c .kb-pt{width:10px;height:10px;border-radius:50%;flex:none}
  .kb-pil-c .cnt{margin-left:2px}
}

@media(max-width:720px){
  /* La pastille de la boîte mail, sur la barre marron : orange, qui bat. */
  .mb-item .rn-badge, .mb-item .rn-badge.rn-badge-mail{background:#F69D00;color:#2E2017;border:2px solid #2E2017}
  .mb-item .rn-badge.rn-badge-mail{animation:rn-bat-tel 1.8s ease-out infinite}
  @keyframes rn-bat-tel{
    0%  {box-shadow:0 0 0 0 rgba(246,157,0,.6)}
    70% {box-shadow:0 0 0 9px rgba(246,157,0,0)}
    100%{box-shadow:0 0 0 0 rgba(246,157,0,0)}}

  /* ── LES LISTES (Étudiants, Contrats) ──
     La recherche et le référent sur toute la largeur ; les classes sur
     UNE ligne qui glisse ; le tableau ne défile plus dans le défilement. */
  .page[data-vue="etudiants"] .ph-actions, .page[data-vue="contrats"] .ph-actions{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%}
  .page[data-vue="etudiants"] .ph-actions .iwrap.rech,
  .page[data-vue="contrats"] .ph-actions .iwrap.rech{grid-column:1/-1;width:100%}
  .page[data-vue="etudiants"] .ph-actions .iwrap.rech input,
  .page[data-vue="contrats"] .ph-actions .iwrap.rech input{width:100%;height:44px}
  .page[data-vue="etudiants"] .ph-actions .select,
  .page[data-vue="contrats"] .ph-actions .select{width:100%;height:40px}
  .cl-barre{margin-left:-16px;margin-right:-16px}
  .cl-ruban{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 16px 4px}
  .cl-ruban::-webkit-scrollbar{display:none}
  .cl-ruban > *{flex:none}
  .tbl-corps{max-height:none;overflow:visible}
}

/* ── LES FICHES (étudiant, contrat, classe) SUR TÉLÉPHONE ── */
@media(max-width:720px){
  /* L'en-tête : l'avatar à côté du nom, plus au-dessus (88 px de moins). */
  .page .card > div:has(> .ava-xl){display:grid!important;grid-template-columns:52px minmax(0,1fr);
    gap:12px;align-items:start}
  .page .card > div:has(> .ava-xl) > .ava-xl{width:52px;height:52px;font-size:1.02rem}
  .page .card > div:has(> .ava-xl) > div:last-child:not(:nth-child(2)){grid-column:1/-1}
  .page .card > div:has(> .ava-xl) .h2{font-size:1.22rem;row-gap:6px}

  /* LA FRISE, DE HAUT EN BAS — comme dans l'App entreprise : un mois sous
     l'autre le long d'un trait vertical, les cartes en pleine largeur,
     les mois sans étape retirés. */
  .ft.fg-defil{flex-direction:column;align-items:stretch;overflow:visible;
    padding:4px 0 0;position:relative}
  .ft.fg-defil::before{content:'';position:absolute;left:6px;top:12px;bottom:18px;
    width:3px;border-radius:3px;background:var(--border-2)}
  .fg-mois{width:auto!important;padding:0 0 16px 28px}
  .fg-mois.est-vide{display:none}
  .fg-points{display:none}
  .fg-nom{position:relative;margin:0 0 9px}
  .fg-nom::before{content:'';position:absolute;left:-28px;top:50%;transform:translateY(-50%);
    width:9px;height:9px;border-radius:50%;background:var(--surface);
    border:3px solid var(--ink-mute);box-shadow:0 0 0 3px var(--surface)}
  .fg-mois:has(.fg-avance) .fg-nom::before{border-color:var(--avance,var(--brand))}
  .fg-cartes{flex-direction:column;align-items:stretch;gap:9px}
  .fg-cale{width:auto;margin-left:0!important}
  .ft .fet-actions .btn{min-height:38px;padding:8px 14px;font-size:.8rem}
}

@media(max-width:720px){
  /* La frise repliée autour du mois en cours ; « Toute la frise » déplie. */
  .ft-replie:not(.ft-ouverte) .ft.fg-defil{max-height:430px;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);
            mask-image:linear-gradient(180deg,#000 82%,transparent)}
  .ft-tout{display:flex;align-items:center;gap:6px;margin:12px auto 2px;height:40px;padding:0 18px;
    border-radius:99px;border:1px solid var(--border-2);background:var(--surface);color:var(--ink);
    font:inherit;font-weight:700;font-size:.84rem;cursor:pointer}
  .ft-tout svg{width:15px;height:15px;transition:transform .2s}
  .ft-ouverte .ft-tout svg{transform:rotate(180deg)}
}
@media(min-width:721px){ .ft-tout{display:none} }

/* ── LA BOÎTE MAIL SUR TÉLÉPHONE ──
   La liste ne pousse plus la page à 720 px (un aperçu de message trop
   long élargissait la colonne) ; les cinq onglets glissent sur une
   ligne ; un fil ouvert prend tout l'écran, comme dans l'App entreprise. */
@media(max-width:720px){
  .mail-wrap{grid-template-columns:minmax(0,1fr)}
  .mail-col, .mail-liste{min-width:0}
  .page[data-vue="mail"] .cr-barre{gap:10px}
  .page[data-vue="mail"] .cr-onglets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 -16px;padding:4px 16px;border-radius:0;border-left:0;border-right:0;max-width:none}
  .page[data-vue="mail"] .cr-onglets::-webkit-scrollbar{display:none}
  .page[data-vue="mail"] .cr-onglet{flex:none}
  .page[data-vue="mail"] .page-h .ph-actions .btn{height:42px}
  /* Un fil ouvert : ni titre de page, ni onglets — la conversation seule. */
  .page[data-vue="mail"]:has(.mail-wrap.fil-ouvert) .page-h,
  .page[data-vue="mail"]:has(.mail-wrap.fil-ouvert) .cr-barre{display:none}
}
@media(max-width:720px){
  /* Le fil ouvert tient pile entre l'en-tête et la barre du bas, la
     zone d'écriture comprise (la hauteur mesurée en JS ignorait la barre). */
  .page[data-vue="mail"] .mail-wrap.fil-ouvert{height:calc(100dvh - 180px)!important;min-height:360px}
  .page[data-vue="mail"] .fil-carte{padding:12px 12px 10px}
  .ml-tete{gap:10px;padding-bottom:10px}
  .ml-tete > div:not([class]){flex:1;min-width:0}
  .ml-tete .h3{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ml-tete .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ml-tete .ava{width:36px;height:36px;flex:none}
  .ml-tete .ml-retour{width:36px;height:36px;flex:none;justify-content:center}
}

/* ── INDICATEURS ET CAMPUS SUR TÉLÉPHONE ── */
@media(max-width:720px){
  .ind-titre{flex-wrap:wrap;width:100%;gap:10px}
  .ind-periode{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .ind-periode .seg-b{padding:0 6px;font-size:.8rem;white-space:nowrap}
  .ind-bande{display:flex!important;grid-template-columns:none!important;overflow-x:auto;gap:10px;
    scroll-snap-type:x proximity;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none}
  .ind-bande::-webkit-scrollbar{display:none}
  .ind-bande .ind-mini{flex:0 0 136px;scroll-snap-align:start}
  .ind-mini-h{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ind-c-haut h3{font-size:1.05rem}

  .camp-hero .ch-haut h1{font-size:1.65rem;line-height:1.15}
  .camp-hero .ch-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .camp-hero .ch-actions > *{flex:1 1 auto;justify-content:center;min-width:0}
}

/* ── LA FICHE CONTRAT ET LES PLANNINGS SUR TÉLÉPHONE ── */
@media(max-width:720px){
  /* Les six chiffres du contrat : deux par ligne, lisibles, au lieu de
     six colonnes de 50 px où les montants se chevauchaient. */
  .fk{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0}
  .fk .fk-c{min-width:0;padding:12px 12px 13px;border-left:0!important;border-top:1px solid var(--border)}
  .fk .fk-c:nth-child(-n+2){border-top:0}
  .fk .fk-c:nth-child(even){border-left:1px solid var(--border)!important}
  .fk .fk-l{font-size:.72rem}
  .fk .fk-v{font-size:1.25rem}
  .fk .fk-s{font-size:.7rem}
  /* La pastille d'accès de l'entreprise passe à la ligne au lieu de sortir. */
  .acces-k{max-width:100%;min-width:0;overflow:hidden}
  .acces-k, .acces-k *{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}
  .contrat-actions{display:grid;grid-template-columns:1fr;gap:8px;width:100%}
  .contrat-actions .btn{height:40px;justify-content:center}
  /* Le planning de classe : la date de la semaine tient dans sa case. */
  .plc-q{white-space:normal;font-size:.68rem;line-height:1.2}
  /* Les tableaux d'argent défilent dans leur cadre plutôt que de s'écraser. */
  .sue-t-wrap table, .enc-t-wrap table{min-width:640px}
  .ns2-titre{flex-wrap:wrap;row-gap:8px}
}

/* ── LES PETITS ÉCRANS (320 px) ──
   « 1fr » laissait une colonne s'élargir jusqu'au plus long de son
   contenu : la page dépassait de 30 px. minmax(0,1fr) la tient. */
@media(max-width:720px){
  .grid.g2,.grid.g3,.grid.g4,.g2,.g3,.g4,.g23,.g32{grid-template-columns:minmax(0,1fr)!important}
  .card{min-width:0}
  .row-item{min-width:0}
  .row-item .ri-body{min-width:0}
  .row-item .ri-body b, .row-item .ri-body small{overflow:hidden;text-overflow:ellipsis}
  .page[data-vue="mail"] .cr-barre{min-width:0;max-width:100%}
  .page[data-vue="mail"] .cr-onglets{width:auto;max-width:calc(100% + 32px);min-width:0}
  .page[data-vue="mail"] .mail-cherche{min-width:0;width:100%;max-width:100%}
}
@media(max-width:720px){
  /* « Nouveau message » : la ligne d'état passe au-dessus des deux boutons. */
  .modal-f:has(#mr-bilan), .modal-foot:has(#mr-bilan), div:has(> #mr-bilan){flex-wrap:wrap}
  #mr-bilan{flex:1 1 100%;order:-1;font-size:.8rem;margin:0 0 4px}
}

/* ═══════════════════════════════════════════════════════════════
   TÉLÉPHONE — LES DEMANDES DE THÉO (6 oct. 2026, après-midi)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:720px){
  /* ── LA TO DO LIST EN LIGNES D'AGENDA ──
     La date dans une pastille à gauche, le type et le titre au milieu,
     la personne (et la flèche pour avancer) à droite : 60 px au lieu de
     150, et toute la colonne se lit d'un coup d'œil. */
  .kanban .kb-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto;
    grid-template-areas:"jour type qui" "jour titre qui" "jour sous qui";
    column-gap:11px;row-gap:1px;align-items:center;padding:9px 10px 9px 9px;min-height:0}
  .kanban .kb-card .kb-jour{grid-area:jour;width:44px;height:46px;border-radius:12px;background:var(--bg-2);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;align-self:center}
  .kanban .kb-card .kb-jour b{font-size:1.02rem;font-weight:800;line-height:1;color:var(--ink)}
  .kanban .kb-card .kb-jour small{font-size:.6rem;font-weight:800;text-transform:uppercase;color:var(--ink-mute);letter-spacing:.02em}
  .kanban .kb-card .kb-jour svg{width:18px;height:18px}
  .kanban .kb-card .kb-jour.kb-jour-retard{background:var(--danger-soft)}
  .kanban .kb-card .kb-jour.kb-jour-retard b,.kanban .kb-card .kb-jour.kb-jour-retard small{color:var(--danger)}
  .kanban .kb-card .kb-type{grid-area:type;font-size:.6rem;margin:0;line-height:1.2}
  .kanban .kb-card > b{grid-area:titre;font-size:.88rem;line-height:1.25;margin:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kanban .kb-card .kb-sub,.kanban .kb-card .kb-classe{grid-area:sous;font-size:.74rem;margin:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kanban .kb-card:has(.kb-sub) .kb-classe{display:none}
  .kanban .kb-card .kb-foot{display:none}
  .kanban .kb-card .kb-renvoi{grid-column:1/-1;margin-top:6px}
  .kanban .kb-card .kb-qui{grid-area:qui;display:flex;align-items:center;gap:6px;margin:0;padding:0;border:0}
  .kanban .kb-card .kb-qui small{display:none}
  .kanban .kb-card .kb-fleches{margin:0;gap:4px}
  .kanban .kb-card .kb-fleches button{width:32px;height:32px}
  .kanban .kb-card .kb-fleches button:first-child:not(:last-child){display:none}
  .kanban .kb-card .kb-suppr{top:4px;right:4px}
  .kanban .kb-col{padding:8px}
  .kanban .kb-col .kb-card + .kb-card{margin-top:7px}

  /* ── LES ONGLETS DE LA BOÎTE MAIL : CINQ CASES QUI TIENNENT ──
     Ils débordaient à droite (une rangée qui défilait) : l'icône sur le
     mot, cinq cases égales, le compteur en pastille sur l'icône. */
  .page[data-vue="mail"] .cr-onglets{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));
    gap:2px;margin:0!important;padding:4px!important;width:100%!important;max-width:100%!important;
    overflow:visible!important;border-radius:16px!important;border:1px solid var(--border-2)!important}
  .page[data-vue="mail"] .cr-onglet{flex-direction:column;justify-content:center;gap:4px;min-height:54px;
    padding:7px 1px 6px;font-size:.6rem;letter-spacing:-.015em;text-align:center;position:relative;min-width:0;border-radius:12px}
  .page[data-vue="mail"] .cr-onglet span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .page[data-vue="mail"] .cr-onglet svg{width:18px;height:18px;margin:0}
  .page[data-vue="mail"] .cr-onglet .cr-n{position:absolute;top:3px;left:calc(50% + 4px);margin:0;
    min-width:17px;height:17px;padding:0 4px;font-size:.6rem;line-height:17px}
  .page[data-vue="mail"] .page-h .ph-actions{width:100%}
  .page[data-vue="mail"] .page-h .ph-actions .btn{width:100%;justify-content:center}
}
@media(max-width:380px){ .page[data-vue="mail"] .cr-onglet{font-size:.55rem} }

/* ═══════════════════════════════════════════════════════════════
   LE JOUR DE LA TO DO LIST — 6 OCTOBRE 2026 (maquette A de Théo)
   ‹ Aujourd'hui › à côté du titre : éteinte, la page montre tout ;
   enfoncée (orange), chaque colonne ne garde que le jour choisi.
   Et sans rien cliquer, les missions planifiées aujourd'hui sont
   encadrées d'orange. Orange #F69D00 et marron #2E2017 de la charte.
   ═══════════════════════════════════════════════════════════════ */
.todo-titre{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#zone-jour{display:inline-flex;align-items:center;gap:8px}
.jour-pil{display:inline-flex;align-items:center;height:36px;border-radius:99px;
  border:1.5px solid var(--border-2);background:var(--surface);overflow:hidden}
.jour-pil button{border:0;background:transparent;height:100%;padding:0;cursor:pointer;font:inherit;
  color:var(--ink-soft);display:flex;align-items:center;justify-content:center;
  transition:background .12s var(--ease),color .12s var(--ease)}
.jour-pil .jp-fl{width:34px}
.jour-pil .jp-fl svg{width:15px;height:15px}
.jour-pil .jp-fl:hover{background:var(--bg-2);color:var(--ink)}
.jour-pil .jp-c{padding:0 6px;min-width:100px;font-size:.82rem;font-weight:700;white-space:nowrap}
.jour-pil .jp-c:hover{color:var(--ink)}
.jour-pil.on{background:#F69D00;border-color:#F69D00}
.jour-pil.on button,.jour-pil.on .jp-c:hover{color:#2E2017}
.jour-pil.on .jp-fl:hover{background:rgba(46,32,23,.12)}
.jp-tous{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:99px;
  border:0;background:var(--bg-2);color:var(--ink-soft);font-size:.74rem;font-weight:700;cursor:pointer}
.jp-tous svg{width:12px;height:12px}
.jp-tous:hover{color:var(--ink)}
/* LES REPÈRES DE DATE, sur les cartes pas encore faites :
   aujourd'hui / dernier jour = cadre et fond orangés ; date passée sans
   être faite = cadre et fond rouges. Le repère se lit EN TÊTE de carte. */
.kb-col.kb-statut .kb-card.kb-auj{border:2px solid #F69D00;border-left-width:5px;background:var(--brand-50)}
.kb-col.kb-statut .kb-card.kb-passee{border:2px solid var(--danger);border-left-width:5px;background:var(--danger-soft)}
.kb-card .kb-marque{display:inline-flex;align-items:center;gap:5px;max-width:calc(100% - 22px);min-height:22px;
  padding:3px 9px;margin:0 0 7px;border-radius:11px;font-size:.7rem;font-weight:800;line-height:1.25}
.kb-card .kb-marque svg{width:12px;height:12px;flex:none}
.kb-card.kb-auj .kb-marque{background:#F69D00;color:#2E2017}
/* Une réclamation ouverte (7 oct. 2026) : rouge franc, en tête d'« À faire ». */
.kb-col.kb-statut .kb-card.kb-reclam{border:2px solid var(--danger);border-left-width:5px;background:var(--danger-soft)}
.kb-card.kb-reclam .kb-marque{background:var(--danger);color:#fff}
.kb-card.kb-reclam .kb-foot{color:var(--danger-ink);font-weight:700}
.kb-card.kb-passee .kb-marque{background:var(--danger);color:#fff}
/* La même chose en tête de la fiche qui s'ouvre au clic. */
.mi-repere{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;margin-bottom:12px;
  border-radius:99px;font-size:.78rem;font-weight:800}
.mi-repere svg{width:13px;height:13px}
.mi-repere.r-auj{background:#F69D00;color:#2E2017}
.mi-repere.r-passee{background:var(--danger);color:#fff}

/* Le calendrier : l'icône à côté de la pilule, le mois en petit cadre. */
.jp-cal{width:36px;height:36px;padding:0;border-radius:50%;border:1.5px solid var(--border-2);background:var(--surface);
  color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.jp-cal svg{width:16px;height:16px}
.jp-cal:hover{color:var(--ink);border-color:var(--ink-mute)}
.jcal{padding:12px;width:290px}
.jc-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.jc-tete b{font-size:.92rem;font-weight:800}
.jc-fl{width:32px;height:32px;padding:0;border-radius:50%;border:0;background:var(--bg-2);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.jc-fl svg{width:15px;height:15px}
.jc-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.jc-sem{font-size:.68rem;font-weight:800;color:var(--ink-mute);text-align:center;padding:4px 0}
.jc-j{position:relative;height:35px;padding:0;border:0;border-radius:9px;background:transparent;font:inherit;
  font-size:.84rem;font-weight:700;color:var(--ink);cursor:pointer}
.jc-j:hover{background:var(--bg-2)}
.jc-j.we{color:var(--ink-mute);font-weight:500}
.jc-j.auj{box-shadow:inset 0 0 0 2px #F69D00}
.jc-j.on,.jc-j.on:hover{background:#F69D00;color:#2E2017}
.jc-j i{position:absolute;left:50%;bottom:4px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#F69D00}
.jc-j i.rouge{background:var(--danger)}
.jc-j.on i{background:#2E2017}
.jc-pied{display:flex;gap:8px;margin-top:10px}
.jc-pied button{flex:1;height:34px;border-radius:99px;border:1.5px solid var(--border-2);background:var(--surface);
  font:inherit;font-size:.78rem;font-weight:700;color:var(--ink-soft);cursor:pointer}
.jc-pied button:hover{color:var(--ink);border-color:var(--ink-mute)}

@media(max-width:720px){
  /* Le titre à gauche, la pilule à droite, sur la même ligne. */
  /* Le titre ne se coupe jamais ; si la date choisie est longue, la
     pilule passe à la ligne, pas le titre. */
  .page[data-vue="agenda"] .todo-titre{flex-wrap:wrap;gap:8px}
  .page[data-vue="agenda"] .todo-titre .h1{white-space:nowrap}
  #zone-jour{gap:6px}
  .jour-pil{height:38px}
  .jour-pil .jp-fl{width:32px}
  .jour-pil .jp-c{min-width:0;padding:0 2px;font-size:.85rem}
  .jp-tous{display:none}
  /* En ligne d'agenda, le repère passe par la pastille de date :
     orange pour aujourd'hui, rouge pour une date passée pas faite. */
  .kanban .kb-card .kb-marque{display:none}
  .kanban .kb-card.kb-auj .kb-jour{background:#F69D00;border-color:#F69D00}
  .kanban .kb-card.kb-auj .kb-jour b,.kanban .kb-card.kb-auj .kb-jour small{color:#2E2017}
  .kanban .kb-card.kb-passee .kb-jour{background:var(--danger);border-color:var(--danger)}
  .kanban .kb-card.kb-passee .kb-jour b,.kanban .kb-card.kb-passee .kb-jour small{color:#fff}
  .jp-cal{width:38px;height:38px}
}
@media(max-width:720px){
  /* Une date limite (« À faire ») : pastille pointillée, « avant » au-dessus du jour. */
  .kanban .kb-card .kb-jour.kb-jour-delai{background:transparent;border:1.5px dashed var(--border-2);gap:0}
  .kanban .kb-card .kb-jour.kb-jour-delai small:first-child{text-transform:none;letter-spacing:0}
}
@media(max-width:720px){
  /* Un délai qui finit aujourd'hui ou qui est passé : la couleur du repère
     l'emporte sur les pointillés du délai. */
  .kanban .kb-card.kb-auj .kb-jour.kb-jour-delai{background:#F69D00;border:1.5px solid #F69D00}
  .kanban .kb-card.kb-passee .kb-jour.kb-jour-delai{background:var(--danger);border:1.5px solid var(--danger)}
}

/* ══ L'onglet « Compétences + » d'une classe (7 oct. 2026, soir) ══
   Un vrai tableau de 27 lignes : en-têtes soulignés, la saisie dans la
   case, le statut en pastille-menu, le total en bas. */
.cp-carte{padding:0;overflow:hidden}
.cp-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 8px}
.cp-tete h4{margin:0;display:flex;align-items:center;gap:8px}
.cp-tete h4 svg{width:18px;height:18px;color:var(--brand)}
.cp-compte{font-size:.76rem;font-weight:700;color:var(--ink-soft)}
.cp-note{margin:0 18px 12px}
.cp-note .cp-lien{color:inherit;font-weight:800;text-decoration:underline;text-underline-offset:2px}
.cp-defil{overflow-x:auto}
.cp-t{width:100%;border-collapse:collapse;font-size:.82rem;min-width:1060px}
.cp-t thead th{text-align:left;font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);padding:8px 10px;border-bottom:2px solid var(--brand);white-space:nowrap}
.cp-t td{padding:3px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
/* Des lignes entre les colonnes (Théo, 7 oct. 2026). */
.cp-t th,.cp-t td{border-right:1px solid var(--border)}
.cp-t th:last-child,.cp-t td:last-child{border-right:0}
.cp-t .cp-n{width:40px;text-align:center;color:var(--ink-mute);font-weight:700}
.cp-t .cp-d{width:140px}
.cp-t .cp-s{width:150px}
.cp-t .cp-b{width:100px;text-align:right}
.cp-t .cp-a{width:120px}
.cp-t thead th.cp-b{text-align:right}
.cp-in{width:100%;border:1px solid transparent;border-radius:8px;padding:6px 8px;font:inherit;
  background:transparent;color:var(--ink)}
.cp-in:hover{border-color:var(--border-2)}
.cp-in:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.cp-b .cp-in{text-align:right}
/* Les couleurs de Théo (7 oct. 2026) : à planifier = rouge transparent,
   en attente = jaune, planifié = orange FASUP', effectué = vert. */
.cp-statut{font-weight:700;border-radius:999px;padding:5px 10px;border:1px solid var(--border-2)}
.cp-l-aplanifier .cp-statut{background:rgba(214,69,69,.08);color:var(--danger-ink);border-color:rgba(214,69,69,.28)}
.cp-l-attente .cp-statut{background:#FFF4C2;color:#7A5A00;border-color:#E8C547}
.cp-l-planifie .cp-statut{background:var(--fa-orange);color:var(--fa-marron);border-color:var(--fa-orange)}
.cp-l-effectue .cp-statut{background:var(--ok);color:#fff;border-color:var(--ok)}
body[data-theme="dark"] .cp-l-attente .cp-statut{background:#3A3212;color:#FFE07A;border-color:#8A7420}
/* Les trois lignes dans la carte de la frise. */
.cp-t-carte{min-width:0}
.cp-t-carte .cp-a{display:none}
.cp-t-carte .cp-d{width:130px}
.cp-t-carte .cp-s{width:140px}
.cp-t-carte .cp-b{width:80px}
.cp-general td{font-weight:800;border-top:2px solid var(--ink);padding:10px;font-size:.86rem}

/* ══ Satisfaction : les deux moyennes de la classe, puis personne par
   personne (7 oct. 2026) ══ */
.sat-moyennes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.sat-moy{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:14px 16px;cursor:pointer;font:inherit;color:var(--ink)}
.sat-moy:hover{border-color:var(--border-2)}
.sat-moy.on{border-color:var(--brand);background:var(--brand-50)}
.sat-moy > span{font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.sat-moy > b{font-size:1.7rem;font-weight:800;line-height:1.1}
.sat-moy > b small{font-size:.8rem;color:var(--ink-mute);font-weight:700}
.sat-moy > b.bas{color:var(--danger)}
.sat-moy > small{font-size:.74rem;color:var(--ink-mute)}
.sat-personnes-l{display:flex;flex-direction:column;gap:10px}
.sat-carte-p{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--surface)}
.sat-cp-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.sat-cp-tete b{display:block;font-size:.9rem}
.sat-cp-tete small{display:block;font-size:.72rem;color:var(--ink-mute)}
.sat-pm{border-top:1px solid var(--border)}
.sat-pm > summary{display:flex;align-items:center;gap:8px;padding:7px 0;cursor:pointer;list-style:none;font-size:.82rem}
.sat-pm > summary::-webkit-details-marker{display:none}
.sat-pm > summary svg{width:13px;height:13px;color:var(--ink-mute);flex:none;transition:transform .15s}
.sat-pm[open] > summary svg{transform:rotate(90deg)}
.sat-pm > summary b{flex:1;min-width:0;font-weight:700}
.sat-pm > summary span{font-weight:800}
.sat-pm > summary span.bas{color:var(--danger)}
.sat-coms-mat{margin:0 0 6px 21px}
.sat-attente-l{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--ink-mute);margin:10px 0 0}
.sat-attente-l svg{width:14px;height:14px;flex:none}
@media (max-width:640px){.sat-moyennes{grid-template-columns:1fr}}
/* Le choix 1re / 2e année du tableau Compétences + (7 oct. 2026). */
.cp-tete .cp-annees{margin-left:auto}
.cp-tete .cp-compte{margin-left:12px}
.cp-total td{font-weight:700;border-top:1px solid var(--border-2);padding:9px 10px;color:var(--ink-soft)}
/* Le pilotage pédagogique (8 oct. 2026) : deux nouveaux types d'étape et
   la mention des circulaires académiques. */
.ft .fet-carte.t-entretien{border-left-color:var(--violet)}
.ft .t-entretien .fet-titre{color:var(--violet-ink)}
.ft .fet-carte.t-inscription{border-left-color:var(--info)}
.ft .t-inscription .fet-titre{color:var(--info-ink)}
.fep-note.fep-rectorat{margin-bottom:12px;background:var(--warn-soft);color:var(--warn-ink);border-color:var(--warn)}
/* Compétences + (8 oct. 2026) : l'intervenant plus étroit, le contenu
   qui s'agrandit vers le bas, la journée de cohésion. */
.cp-t .cp-qui{width:170px}
.cp-texte{display:block;resize:vertical;min-height:32px;overflow:hidden;line-height:1.4;white-space:pre-wrap}
.cp-cohesion{display:block;padding:6px 8px;font-size:.78rem;font-weight:700;color:var(--brand-800)}
.cp-hors{display:block;padding:0 8px 4px;font-size:.66rem;color:var(--ink-mute);text-align:right}
@media(max-width:720px){
  /* Téléphone : la pastille de date d'une réclamation ouverte passe au rouge. */
  .kanban .kb-card.kb-reclam .kb-jour{background:var(--danger);border-color:var(--danger)}
  .kanban .kb-card.kb-reclam .kb-jour b,.kanban .kb-card.kb-reclam .kb-jour small{color:#fff}
}

/* Les liens d'accès des équipes (page Comptes, 8 oct. 2026). */
.cpt-lien-infos{display:flex;flex-wrap:wrap;gap:6px}
.cpt-lien-infos span{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;
  color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:5px 11px}
.cpt-lien-infos svg{width:14px;height:14px}
.cpt-lien-alerte{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:.8rem;
  color:var(--warn-ink);background:var(--warn-soft);border-radius:10px;padding:10px 12px}
.cpt-lien-alerte svg{width:16px;height:16px;flex:none;margin-top:1px}
#cpt-msg{font-size:.84rem;line-height:1.45;resize:vertical}
.vb-chips .btn{padding:4px 10px}

/* ══ Avancement des campus — le pôle pédagogique (8 oct. 2026) ══
   La maquette C1 : les campus à gauche, le campus ouvert à droite. Les
   mêmes pièces que le reste de l'app : ruban de pastilles, contrôle
   segmenté, tableau `.sue-t` aux en-têtes soulignés de leur couleur. */
.pole-grille{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.pole-grille.pole-seul{grid-template-columns:minmax(0,1fr)}
.pole-campus{padding:6px;display:flex;flex-direction:column;gap:2px;position:sticky;top:12px}
.pole-c{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:9px 12px;border:0;border-radius:10px;background:transparent;font:inherit;
  color:var(--ink);text-align:left;cursor:pointer;transition:background .12s}
.pole-c:hover{background:var(--bg-2)}
.pole-c.on{background:var(--ink);color:#fff}
.pole-c-nom{display:flex;flex-direction:column;font-weight:700;font-size:.86rem;min-width:0}
.pole-c-nom small{font-weight:600;font-size:.72rem;color:var(--ink-mute)}
.pole-c.on .pole-c-nom small{color:var(--fa-beige)}
.pole-c-msg{display:inline-flex;vertical-align:middle;color:var(--fa-orange)}
.pole-c-msg svg{width:13px;height:13px}
.pole-ok{display:inline-flex;color:var(--fa-orange)}
.pole-ok svg{width:16px;height:16px}
.pole-detail{padding:18px 20px}
.pole-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.pole-tete-b{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pole-resume{margin-top:4px;font-size:.84rem;color:var(--ink-soft)}
.pole-rouge{color:var(--danger);font-weight:800}
.pole-orange{color:var(--fa-orange);font-weight:800}
.pole-relance{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:.74rem;color:var(--ink-mute)}
.pole-relance svg{width:12px;height:12px}
.sue-t thead th[class*="pg-h-"]{box-shadow:inset 0 -3px 0 var(--c, var(--border-2));color:var(--ink-2)}
.pg-h-fait{--c:var(--fa-orange)}
.pg-h-avalider{--c:var(--fa-marron)}
.pg-h-afaire{--c:var(--fa-beige)}
.pg-h-retard{--c:var(--danger)}
.sue-t thead th.pg-h-retard{color:var(--danger)}
.sue-t.pole-t{min-width:0;table-layout:auto}
.sue-t.pole-t th.n,.sue-t.pole-t td.n{width:15%;text-align:center}
.pole-t tbody tr{cursor:pointer}
.pole-t td.pole-case{text-decoration:underline;text-decoration-color:var(--border-2);text-underline-offset:3px}
.pole-t td.pole-case:hover{background:var(--fa-beige-clair)}
.pole-t td.pole-case.on{box-shadow:inset 0 0 0 2px var(--fa-orange);font-weight:800}
.pole-date{flex:none;width:52px;font-size:.76rem;font-weight:700;color:var(--ink-soft)}
.pole-voir{flex:none;display:inline-flex;color:var(--ink-mute)}
.pole-voir svg{width:15px;height:15px}
.pole-liste-t.v-afaire{border-bottom-color:var(--fa-beige)}
.pole-liste-t.v-realise{border-bottom-color:var(--fa-orange)}
.pole-t tbody tr.on td{background:var(--fa-beige-clair)}
.pole-t tbody tr.on td:first-child{border-left-color:var(--fa-orange);font-weight:800}
.pole-liste{margin-top:6px}
.pole-liste-t.v-avalider{border-bottom-color:var(--fa-marron)}
.pole-liste-t.v-tout{border-bottom-color:var(--fa-orange)}
.pole-liste-t{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-soft);padding:6px 0 8px;border-bottom:2px solid var(--danger)}
.pole-l{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--border);
  cursor:pointer;font-size:.84rem}
.pole-l:hover{background:var(--bg-2)}
.pole-l .bts-pill{font-size:.66rem;padding:2px 8px;flex:none}
.pole-l-t{flex:1;min-width:0;display:flex;flex-direction:column}
.pole-l-t small{display:flex;align-items:center;gap:4px;font-size:.7rem;color:var(--ink-mute)}
.pole-l-t small svg{width:11px;height:11px}
.pole-j{flex:none;color:var(--danger);font-weight:800;font-variant-numeric:tabular-nums}
.pole-q{flex:none;font-size:.76rem;color:var(--ink-mute)}
.pole-l .btn{flex:none}
.pole-plus{margin-top:8px}
.pole-vide{display:flex;align-items:center;gap:6px;padding:14px 4px}
.pole-vide svg{width:14px;height:14px;color:var(--fa-orange)}
.pole-msg{width:100%;font-size:.84rem;line-height:1.45;resize:vertical}
.pole-fil{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;margin-bottom:12px;
  padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--fa-blanc)}
.pole-fil-q{font-size:.76rem}
.pole-fil-t{font-size:.82rem;white-space:pre-wrap;line-height:1.4}
@media (max-width:720px){
  .pole-grille{grid-template-columns:minmax(0,1fr)}
  .pole-campus{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .pole-c{flex:none;width:auto}
  .pole-detail{padding:14px}
  .pole-l{flex-wrap:wrap}
}

/* ══ Frises — le programme tenu par le pôle pédagogique (8 oct. 2026, F2) ══ */
.fr-frise{padding:12px;overflow-x:auto}
.fr-piste{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(132px,1fr);gap:8px}
.fr-col{background:var(--fa-blanc);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:120px}
.fr-mois{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding:2px 2px 4px}
.fr-carte{display:flex;flex-direction:column;gap:3px;text-align:left;padding:8px 9px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface);font:inherit;font-size:.78rem;color:var(--ink);cursor:pointer;
  transition:border-color .12s,box-shadow .12s}
.fr-carte b{font-weight:700;line-height:1.25}
.fr-carte small{font-size:.68rem;color:var(--ink-mute)}
.fr-carte:hover{border-color:var(--border-2)}
.fr-carte.on{border-color:var(--fa-orange);box-shadow:inset 0 0 0 1px var(--fa-orange)}
.fr-carte.fr-ajout{border-left:3px solid var(--fa-orange)}
.fr-tag{align-self:flex-start;font-size:.62rem;font-weight:800;padding:1px 7px;border-radius:99px;
  background:var(--bg-2);color:var(--ink-soft)}
.fr-tag-n{background:var(--fa-beige-clair);color:var(--fa-marron);box-shadow:inset 0 0 0 1px var(--fa-orange)}
.fr-plus{display:flex;align-items:center;justify-content:center;height:28px;border:1px dashed var(--border-2);
  border-radius:9px;background:transparent;color:var(--ink-mute);cursor:pointer;margin-top:auto}
.fr-plus:hover{border-color:var(--fa-orange);color:var(--fa-orange)}
.fr-plus svg{width:14px;height:14px}
.fr-ed{margin-top:14px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.fr-ed-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fr-ed-t b{font-size:1.05rem;font-weight:800}
.fr-champ{display:flex;flex-direction:column;gap:5px;font-size:.76rem;font-weight:700;color:var(--ink-soft);min-width:0}
.fr-champ .input,.fr-champ .select,.fr-champ .textarea{font-weight:500}
.fr-ligne2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fr-ligne3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fr-jm{display:flex;gap:6px}
.fr-jm .select:first-child{width:76px;flex:none}
.fr-jm .select:last-child{flex:1;min-width:0}
.fr-coche{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-2)}
.fr-bloc{display:flex;flex-direction:column;gap:6px}
.fr-bloc-t{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);
  padding-bottom:6px;border-bottom:2px solid var(--fa-orange)}
.fr-q{display:grid;grid-template-columns:minmax(0,2fr) 180px minmax(0,1fr) auto;gap:8px;align-items:center}
.fr-q.fr-p{grid-template-columns:minmax(0,1fr) auto}
.fr-q-b{display:flex;gap:2px}
.fr-q-b .btn{padding:4px 8px}
.fr-ajout-q{align-self:flex-start}
.fr-mode{align-self:flex-start}
.fr-deja{margin:0;padding-left:18px;font-size:.82rem;color:var(--ink-2)}
.fr-periode{display:flex;align-items:center;gap:6px}
.fr-periode svg{width:14px;height:14px}
.fr-pied{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:10px;border-top:1px solid var(--border)}
.fr-lu{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);font-size:.84rem}
.fr-lu span{color:var(--ink-soft)}
@media (max-width:720px){
  .fr-ligne2,.fr-ligne3{grid-template-columns:minmax(0,1fr)}
  .fr-q{grid-template-columns:minmax(0,1fr) 130px}
  .fr-q .fr-q-b{grid-column:1/-1}
}
/* Frises : l'étape entière (8 oct. 2026, soir) */
.fr-carte.fr-supprimee{opacity:.55;border-style:dashed}
.fr-carte.fr-supprimee b{text-decoration:line-through}
.fr-tag-s{background:var(--danger-soft);color:var(--danger-ink)}
.fr-ed-suppr{border-style:dashed}
.fr-large{grid-column:1/-1}
.fr-sec{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--fa-blanc)}
.fr-sec-t{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}
.fr-sec-t .input{font-weight:700}
.fr-echelle{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.fr-bloc-b{display:flex;gap:6px;flex-wrap:wrap}
.fr-pied-g{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:720px){
  .fr-sec-t{grid-template-columns:minmax(0,1fr)}
  .fr-echelle{grid-template-columns:minmax(0,1fr)}
}
/* Frises en blocs libres (8 oct. 2026, nuit) */
.fr-sec-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;
  background:var(--fa-beige-clair);color:var(--fa-marron);flex:none}
.fr-sec-ic svg{width:15px;height:15px}
.fr-sec .fr-sec-t{grid-template-columns:auto minmax(0,1fr) auto}
.fr-q{grid-template-columns:minmax(0,2fr) 200px minmax(0,1.2fr) auto auto}
.fr-q.fr-p{grid-template-columns:minmax(0,1fr) auto}
.fr-oblig{font-size:.74rem;white-space:nowrap}
.fr-ajout-blocs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:4px}
.fc-oblig{color:var(--danger);font-weight:800}
.fc-multi{display:flex;flex-wrap:wrap;gap:8px 16px;padding:4px 0}
.fc-multi-o{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:500}
.fc-cran.fc-cran-mot{width:auto;padding:0 14px}
.enq-forme{font-size:.74rem;color:var(--ink-mute);font-style:italic;white-space:nowrap}
@media (max-width:720px){ .fr-q{grid-template-columns:minmax(0,1fr) 160px} }

/* ══════════ LE MOTEUR DES FORMULAIRES (js/formulaire-fasup.js, 9 oct. 2026) ══════════
   Mêmes codes que les questionnaires existants : une partie = une carte au
   liseré orange, numérotée ; une question = une bande. */
.fq{counter-reset:fqpartie}
.fq-cache{display:none!important}
.fq-groupe{display:block;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-700);border-bottom:2px solid var(--brand-100);margin:22px 0 12px;padding-bottom:5px}
.fq-groupe:first-child{margin-top:0}
.fq-sec{border:1px solid var(--border);border-left:4px solid var(--brand);border-radius:var(--r-md);
  margin-bottom:14px;box-shadow:var(--sh-sm);background:var(--surface);overflow:hidden;overflow:clip;counter-increment:fqpartie}
.fq-sec-t{display:flex;align-items:center;gap:11px;font-size:.95rem;font-weight:800;line-height:1.3;
  padding:13px 16px;background:var(--brand-50);border-bottom:1px solid var(--brand-100);color:var(--ink)}
.fq-sec-t::before{content:counter(fqpartie);flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:800}
.fq-code{margin-left:auto;flex:none;font-size:.62rem;font-weight:800;letter-spacing:.6px;color:var(--ink-mute);
  background:var(--surface);border:1px solid var(--border-2);border-radius:999px;padding:3px 9px}
.fq-sec > .fq-aide{margin:0;padding:11px 16px;background:var(--bg);font-style:italic;border-bottom:1px solid var(--border)}
.fq-aide{margin:4px 0 8px;font-size:.76rem;color:var(--ink-soft);line-height:1.5}
.fq-texte{padding:12px 16px;margin-bottom:14px;border-radius:var(--r-md);background:var(--fa-beige-clair);
  border:1px solid var(--fa-beige);font-size:.84rem;line-height:1.55}
.fq-texte b{display:block;margin-bottom:4px}
.fq-texte p{margin:0}
.fq-q{padding:13px 16px;border-bottom:1px solid var(--border)}
.fq-q:last-child{border-bottom:0}
.fq-l{display:block;font-size:.86rem;font-weight:700;color:var(--ink);margin-bottom:8px;line-height:1.4}
.fq-q > .fq-aide{margin-top:-4px}
.fq-oblig{color:var(--danger);font-weight:800}
.fq-crans{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.fq-cran{min-width:34px;height:34px;padding:0 6px;border-radius:9px;border:1px solid var(--border-2);background:var(--surface);
  color:var(--ink-soft);font:inherit;font-size:.82rem;font-weight:800;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.fq-cran:hover{border-color:var(--ink-mute)}
.fq-cran.on{background:var(--brand);border-color:var(--brand);color:#fff}
.fq-mots .fq-cran{padding:0 16px}
.fq-bout{font-size:.74rem;font-weight:600;color:var(--ink-soft);padding:0 4px}
.fq-opts{display:flex;flex-direction:column;gap:6px}
.fq-opt{display:flex;align-items:center;gap:9px;font-size:.86rem;font-weight:500;color:var(--ink-2);cursor:pointer}
.fq-opt input[type="radio"],.fq-opt input[type="checkbox"]{width:17px;height:17px;accent-color:var(--brand);flex:none}
.fq-autre .input{flex:1;min-width:0;max-width:360px;padding:6px 10px}
.fq-para{min-height:82px}
.fq-ligne{display:flex;align-items:center;gap:8px;max-width:420px}
.fq-ligne .input{flex:1;min-width:0}
.fq-euros span{font-weight:800;color:var(--ink-soft)}
.fq-grille-w{overflow-x:auto}
.fq-grille{border-collapse:collapse;font-size:.8rem;min-width:100%}
.fq-grille th,.fq-grille td{padding:7px 10px;text-align:center;border-bottom:1px solid var(--border)}
.fq-grille thead th{font-weight:700;color:var(--ink-soft);font-size:.74rem}
.fq-grille tbody th{text-align:left;font-weight:600;color:var(--ink)}
.fq-grille input{width:17px;height:17px;accent-color:var(--brand)}
.fq-duo{display:grid;grid-template-columns:1fr 1fr}
.fq-duo > .fq-q{border-bottom:1px solid var(--border)}
.fq-duo > .fq-q + .fq-q{border-left:1px solid var(--border)}
@media (max-width:560px){ .fq-duo{grid-template-columns:1fr} .fq-duo > .fq-q + .fq-q{border-left:0} }

/* ══════════ LE CONSTRUCTEUR (js/constructeur.js, page Frises) ══════════
   Façon Google Forms : une carte par partie, une carte par question ; la
   forme de la réponse se choisit à droite du libellé, ses réglages
   dessous, ses gestes au pied. */
.cf{display:flex;flex-direction:column;gap:12px}
.cf-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:6px}
.cf-tete-t{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-soft)}
.cf-tete-t svg{width:15px;height:15px}
.cf-carte{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.cf-carte-t{display:flex;align-items:center;gap:9px}
.cf-carte-t svg{width:16px;height:16px;color:var(--brand-700)}
.cf-carte-t b{font-size:.9rem;font-weight:800;flex:1}
.cf-ech-l{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.cf-ech-l label{display:flex;align-items:center;gap:6px}
.cf-ech-l .input{min-width:0}
.cf-cran{flex:none;width:26px;height:26px;border-radius:8px;background:var(--brand);color:#fff;font-weight:800;font-size:.78rem;
  display:inline-flex;align-items:center;justify-content:center}
.cf-mats-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.cf-mat-g{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;background:var(--fa-blanc)}
.cf-mat-gt{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.cf-mat{display:grid;grid-template-columns:minmax(0,1fr) 92px auto;gap:6px;align-items:center}
.cf-sec{border:1px solid var(--border);border-top:5px solid var(--brand);border-radius:14px;background:var(--surface);
  padding:12px 16px 14px;display:flex;flex-direction:column;gap:9px}
.cf-sec-liste{border-top-color:var(--ok)}
.cf-sec-piece{border-top-color:var(--fa-marron)}
.cf-sec-texte{border-top-color:var(--fa-beige)}
.cf-sec-systeme{border-top-color:var(--ink-mute);background:var(--fa-blanc)}
.cf-sec-tete{display:flex;align-items:center;gap:9px}
.cf-sec-ic{width:30px;height:30px;border-radius:9px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:var(--fa-beige-clair);color:var(--fa-marron)}
.cf-sec-ic svg{width:15px;height:15px}
.cf-sec-n{flex:1;min-width:0;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.cf-titre{font-size:1.02rem;font-weight:800;border-width:0 0 1px;border-radius:0;padding:6px 2px;background:transparent}
.cf-titre:focus{border-bottom:2px solid var(--brand);box-shadow:none}
.cf-desc{font-size:.84rem;border-width:0 0 1px;border-radius:0;padding:5px 2px;background:transparent;resize:none}
.cf-sec-opts{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap}
.cf-sec-pied{display:flex;gap:8px}
.cf-repet{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:10px;background:var(--fa-beige-clair);
  font-size:.78rem;color:var(--ink-2)}
.cf-repet svg{width:14px;height:14px;flex:none;color:var(--brand-700)}
.cf-repet span{flex:1;min-width:0}
.cf-q{border:1px solid var(--border);border-left:4px solid transparent;border-radius:12px;padding:12px 14px;
  display:flex;flex-direction:column;gap:9px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.cf-q:focus-within{border-left-color:var(--brand);box-shadow:var(--sh-sm)}
.cf-q-si{border-left-color:var(--fa-beige)}
.cf-q-l1{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:10px;align-items:start}
.cf-q-lib{resize:none;font-weight:700;font-size:.92rem;background:var(--fa-blanc);border-color:transparent;overflow:hidden;min-height:40px}
.cf-q-lib:focus{background:var(--surface)}
.cf-q-type{position:relative;display:block}
.cf-q-type-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:inline-flex;pointer-events:none;color:var(--brand-700)}
.cf-q-type-ic svg{width:15px;height:15px}
.cf-q-type .select{padding-left:34px;width:100%}
.cf-q-aide{display:flex;gap:6px;align-items:center}
.cf-q-aide .input{flex:1;min-width:0;font-size:.82rem}
.cf-q-corps:empty{display:none}
.cf-q-pied{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--border)}
.cf-sep{flex:1}
.cf-opts{display:flex;flex-direction:column;gap:6px}
.cf-opt{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center}
.cf-opt.cf-point{grid-template-columns:20px minmax(0,1fr) minmax(0,.7fr) auto}
.cf-opt-autre{grid-template-columns:20px minmax(0,1fr) auto;font-size:.82rem}
.cf-opt .input{padding:7px 10px}
.cf-puce{width:16px;height:16px;border-radius:50%;border:2px solid var(--border-2);display:inline-block}
.cf-puce-c{border-radius:4px}
.cf-num{font-style:normal;font-size:.76rem;font-weight:700;color:var(--ink-mute);display:inline-flex;align-items:center}
.cf-num svg{width:14px;height:14px}
.cf-opt-aj{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-left:28px}
.cf-mini-t{font-size:.72rem;font-weight:800;color:var(--ink-soft);margin:2px 0}
.cf-grille{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-grille .cf-opt-aj,.cf-grille > div > .cf-ajout-mini{padding-left:0}
.cf-echelle{display:grid;grid-template-columns:70px auto 70px minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}
.cf-bornes{display:grid;grid-template-columns:repeat(2,minmax(0,200px));gap:8px}
.cf-ph{font-size:.82rem;color:var(--ink-soft);max-width:520px}
.cf-apercu-crans{display:flex;align-items:center;gap:5px}
.cf-apercu-crans span{min-width:32px;height:32px;border-radius:9px;border:1px solid var(--border-2);display:inline-flex;
  align-items:center;justify-content:center;font-weight:800;font-size:.8rem;color:var(--ink-soft);padding:0 8px}
.cf-apercu-crans small{margin-left:8px}
.cf-note{margin:0;font-size:.8rem;color:var(--ink-soft);display:flex;gap:7px;align-items:flex-start;line-height:1.45}
.cf-note svg{width:14px;height:14px;flex:none;margin-top:2px}
.cf-si{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:10px;background:var(--fa-beige-clair);
  font-size:.8rem;font-weight:700;color:var(--fa-marron)}
.cf-si > svg{width:14px;height:14px;color:var(--brand-700)}
.cf-si .select,.cf-si .input{width:auto;min-width:120px;max-width:300px;padding:6px 10px;font-size:.8rem}
.cf-si .cf-si-op{min-width:0}
.cf-bts{display:inline-flex;gap:2px}
.cf-b{width:30px;height:30px;border:0;border-radius:8px;background:none;cursor:pointer;color:var(--ink-soft);
  display:inline-flex;align-items:center;justify-content:center}
.cf-b:hover{background:var(--bg-2);color:var(--ink)}
.cf-b svg{width:15px;height:15px}
.cf-b-x:hover{color:var(--danger);background:var(--danger-soft)}
.cf-bts-mini .cf-b{width:26px;height:26px}
.cf-haut{transform:rotate(90deg)}
.cf-bas{transform:rotate(-90deg)}
.cf-ajout-mini{border:0;background:none;cursor:pointer;font:inherit;font-size:.78rem;font-weight:700;color:var(--brand-700);
  display:inline-flex;align-items:center;gap:5px;padding:4px 6px;border-radius:7px}
.cf-ajout-mini:hover{background:var(--fa-beige-clair)}
.cf-ajout-mini svg{width:13px;height:13px}
.cf-ajout-q{align-self:flex-start;border:1px dashed var(--border-2);background:none;cursor:pointer;font:inherit;
  font-size:.82rem;font-weight:700;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px}
.cf-ajout-q:hover{border-color:var(--brand);color:var(--brand-700);background:var(--fa-beige-clair)}
.cf-ajout-q svg{width:14px;height:14px}
.cf-ajouts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 12px;border-radius:14px;border:1px dashed var(--border-2)}
.cf-ajouts-t{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-right:4px}
.cf-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.8rem;font-weight:600;color:var(--ink-2);user-select:none}
.cf-switch input{position:absolute;opacity:0;pointer-events:none}
.cf-switch i{width:32px;height:18px;border-radius:99px;background:var(--border-2);position:relative;transition:background .15s;flex:none}
.cf-switch i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.cf-switch input:checked + i{background:var(--brand)}
.cf-switch input:checked + i::after{transform:translateX(14px)}
.cf-switch input:focus-visible + i{outline:2px solid var(--brand);outline-offset:2px}
.cf-apercu{max-height:70vh;overflow:auto;padding-right:4px}
.cf-ap-zone{display:flex;align-items:center;gap:8px;padding:14px;border:2px dashed var(--border-2);border-radius:12px;
  color:var(--ink-soft);font-size:.82rem;font-weight:600;margin:8px 16px 12px}
.cf-ap-zone svg{width:16px;height:16px}
.cf-ap-sys{padding:12px 16px;display:block}
.cf-ap-sys svg{width:15px;height:15px;vertical-align:-2px}
@media (max-width:760px){
  .cf-q-l1{grid-template-columns:1fr}
  .cf-ech-l{grid-template-columns:1fr}
  .cf-echelle{grid-template-columns:70px auto 70px}
  .cf-echelle .input{grid-column:1/-1}
  .cf-grille{grid-template-columns:1fr}
  .cf-opt.cf-point{grid-template-columns:20px minmax(0,1fr) auto}
  .cf-point-n{grid-column:2/3}
}
.fq-texte.fq-alerte{background:var(--warn-soft);border-color:transparent;color:var(--warn-ink)}
details.fq-sec > summary{list-style:none;cursor:pointer}
details.fq-sec > summary::-webkit-details-marker{display:none}
details.fq-sec:not([open]) > summary{border-bottom:0}
details.fq-sec > summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--ink-mute);
  border-bottom:2px solid var(--ink-mute);transform:rotate(45deg);transition:transform .15s;flex:none}
details.fq-sec[open] > summary::after{transform:rotate(-135deg)}
details.fq-sec > summary .fq-code{margin-left:auto}
details.fq-sec > summary .fq-code + *{margin-left:0}
.fq-etape .fq{display:flex;flex-direction:column}
.fc-entete{margin-bottom:12px}
.fq-classement{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;max-width:480px}
.fq-classement li{display:flex;align-items:center;gap:9px;padding:6px 8px;border:1px solid var(--border);border-radius:9px;background:var(--surface);font-size:.86rem}
.fq-rang{width:22px;height:22px;border-radius:50%;background:var(--fa-beige-clair);color:var(--fa-marron);font-weight:800;font-size:.72rem;display:inline-flex;align-items:center;justify-content:center;flex:none}
.fq-opt-t{flex:1;min-width:0}
.fq-cl-b{display:inline-flex;gap:2px}
.fq-cl{width:26px;height:26px;border:1px solid var(--border-2);border-radius:7px;background:var(--surface);cursor:pointer;font:inherit;color:var(--ink-soft)}
.fq-cl:hover{color:var(--ink);border-color:var(--ink-mute)}
.cf-tete-b{display:flex;gap:6px}
.cf-poignee{cursor:grab;color:var(--ink-mute);display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;flex:none}
.cf-poignee:hover{background:var(--bg-2);color:var(--ink)}
.cf-poignee svg{width:14px;height:14px;transform:rotate(90deg)}
.cf-q{position:relative}
.cf-q > .cf-poignee{position:absolute;left:-2px;top:14px}
.cf-q .cf-q-l1{padding-left:18px}
.cf-traine{opacity:.4}
.cf-cible{outline:2px dashed var(--brand);outline-offset:2px}
.cf-replie .cf-sec-tete{margin:0}
.cf-si{flex-direction:column;align-items:stretch;gap:6px}
.cf-si-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cf-si-t > svg{width:14px;height:14px;color:var(--brand-700)}
.cf-si-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-left:22px}
.cf-si-mot{min-width:18px;font-weight:800;color:var(--brand-700)}
.cf-si-mode{font-weight:700}
.fr-reprendre{float:right;display:inline-flex;align-items:center;gap:6px;font-weight:600;text-transform:none;letter-spacing:0;font-size:.76rem}
.fr-reprendre .select{width:auto;max-width:260px;padding:5px 28px 5px 9px;font-size:.78rem}
.fr-reprendre svg{width:13px;height:13px}
.fr-coches{display:flex;gap:18px;flex-wrap:wrap}
.fr-apercu-alt{border:0;padding:0;margin:0}

/* ══════════ L'ACCUEIL DU PÔLE PÉDAGOGIQUE (9 oct. 2026) ══════════
   Le même système que le tableau de bord des campus : les règles
   scopées sur data-vue="dashboard" sont reprises pour data-vue="accueil". */
.page[data-vue="accueil"]{display:flex;flex-direction:column;padding-bottom:26px;min-height:0;overflow:auto}
.main:has(> .page[data-vue="accueil"]){height:100dvh;min-height:0;overflow:hidden}
.page[data-vue="accueil"] .card{padding:16px 19px 17px}
.page[data-vue="accueil"] .db-tuiles{padding:0;overflow:hidden;border-radius:var(--r-xl);display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.page[data-vue="accueil"] .db-tuiles:hover{box-shadow:var(--sh-md)}
.page[data-vue="accueil"] .db-f{padding:16px 18px;border-radius:var(--r-xl);display:flex;flex-direction:column;min-width:0}
.page[data-vue="accueil"] .db-f:hover{box-shadow:var(--sh-md)}
.page[data-vue="accueil"] .db-f.t-ink{background:var(--fa-marron);border-color:var(--fa-marron)}
.page[data-vue="accueil"] .db-f.t-ink .db-f-t,.page[data-vue="accueil"] .db-f.t-ink .db-f-n,.page[data-vue="accueil"] .db-f.t-ink .db-f-d{color:var(--always-light)}
.page[data-vue="accueil"] .db-f.t-ink .db-f-b{background:rgba(255,255,255,.18);color:var(--always-light)}
.page[data-vue="accueil"] .db-f.t-ink .db-f-j{background:rgba(255,255,255,.18)}
.page[data-vue="accueil"] .db-f.t-ink .db-f-j i{background:var(--fa-orange)}
body[data-theme="dark"] .page[data-vue="accueil"] .db-f.t-ink{background:var(--fa-beige-clair);border-color:var(--fa-beige-clair)}
.page[data-vue="accueil"] .db-obj{padding:22px 24px 20px;border-radius:var(--r-xl)}
.page[data-vue="accueil"] .db-obj:hover{box-shadow:var(--sh-md)}
.page[data-vue="accueil"] .db-fin{max-height:none;flex:none}
.page[data-vue="accueil"] .db-bas{min-height:0;flex:none}
.page[data-vue="accueil"] .db-obj{flex:none;max-height:none}
.pa-sur{font-size:.55em;font-weight:700;color:var(--ink-mute);letter-spacing:0;margin-left:2px}
.db-tuile.est-marque .pa-sur{color:var(--always-dark);opacity:.7}
.pa-liste{display:flex;flex-direction:column;border-radius:var(--r-xl)}
.pa-tete{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.pa-tete b{font-size:1rem;font-weight:800}
.pa-tete .muted{flex:1;min-width:0}
.pa-ic .db-obj-ic{width:34px;height:34px;border-radius:11px;background:var(--brand-50);color:var(--brand-700)}
.pa-ic .db-obj-ic.pa-ic-ok{background:var(--ok-soft);color:var(--ok-ink)}
.pa-tout{flex:none}
.pa-tout svg{width:13px;height:13px}
.pa-l{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border);cursor:pointer;border-radius:8px}
.pa-l:last-child{border-bottom:0}
.pa-l:hover{background:var(--bg-2)}
.pa-l:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.pa-l-nom{display:grid;grid-template-columns:150px minmax(60px,1fr) auto;align-items:center;gap:10px;flex:1;min-width:0}
.pa-l-nom b{font-size:.9rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-l-nom small{font-size:.74rem;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.pa-j{display:block;height:7px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.pa-j i{display:block;height:100%;border-radius:99px;background:var(--ok)}
.pa-chips{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pa-chips .badge svg{width:11px;height:11px}
.pa-vide{display:flex;align-items:center;gap:8px;padding:10px 4px;margin:0}
.pa-vide svg{width:14px;height:14px;color:var(--ok)}
.pa-date{flex:none;width:52px;font-size:.76rem;font-weight:800;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.pa-campus{flex:none;min-width:84px;font-size:.78rem;font-weight:800;color:var(--fa-marron)}
body[data-theme="dark"] .pa-campus{color:var(--fa-beige)}
.pa-l-t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:.86rem;line-height:1.3}
.pa-l-t > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-l-t small{font-size:.72rem;color:var(--ink-mute)}
.pa-jauge-sous{margin:4px 0 0;text-align:center;font-size:.76rem;font-weight:600;color:var(--ink-soft)}
@media (max-width:1080px){ .main:has(> .page[data-vue="accueil"]){height:auto;overflow:visible} }
@media (max-width:1000px){ .page[data-vue="accueil"] .db-fin{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .pa-bas{grid-template-columns:1fr} }
@media (max-width:880px){ .page[data-vue="accueil"] .db-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:720px){
  .pa-l-nom{grid-template-columns:110px minmax(40px,1fr)}
  .pa-l-nom small{grid-column:1/-1}
  .pa-campus{display:none}
  .page[data-vue="accueil"] .db-obj-corps{grid-template-columns:1fr!important}
}
@media (max-width:520px){ .page[data-vue="accueil"] .db-fin{grid-template-columns:1fr} }

/* ══════════ PAGE FRISES : LES COULEURS DE LA FRISE DES CAMPUS (9 oct. 2026) ══════════
   Même code que .ft .fet-carte.t-* : carte blanche, liseré gauche 5 px et
   titre à la couleur du type ; une pastille d'icône par type en plus. */
.fr-carte{border-left:5px solid var(--ink-mute);padding-left:10px;position:relative}
.fr-carte .fet-titre{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fr-carte .fet-titre{font-weight:700;line-height:1.25;font-size:.8rem;color:var(--ink)}
.fr-carte .fet-sousdate{font-size:.68rem;color:var(--ink-mute);font-weight:600}
.fr-bille{position:absolute;top:7px;right:7px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-2);color:var(--ink-soft)}
.fr-bille svg{width:11px;height:11px}
.fr-carte.on{border-color:var(--fa-orange);box-shadow:inset 0 0 0 1px var(--fa-orange)}
.fr-carte.fr-ajout{border-left-color:var(--fa-orange)}
.fr-legende{display:flex;flex-wrap:wrap;gap:6px 12px;padding:2px 4px 10px}
.fr-leg{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;color:var(--ink-soft)}
.fr-leg i{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-2);color:var(--ink-soft)}
.fr-leg i svg{width:10px;height:10px}
.fr-carte.t-reunion{border-left-color:var(--cyan)}   .fr-carte.t-reunion .fet-titre{color:var(--cyan-ink)}   .t-reunion .fr-bille,.fr-leg.t-reunion i{background:var(--cyan-soft);color:var(--cyan-ink)}
.fr-carte.t-conseil{border-left-color:var(--prune)}  .fr-carte.t-conseil .fet-titre{color:var(--prune-ink)}  .t-conseil .fr-bille,.fr-leg.t-conseil i{background:var(--prune-soft);color:var(--prune-ink)}
.fr-carte.t-verif{border-left-color:var(--teal)}     .fr-carte.t-verif .fet-titre{color:var(--teal-ink)}     .t-verif .fr-bille,.fr-leg.t-verif i{background:var(--teal-soft);color:var(--teal-ink)}
.fr-carte.t-bts{border-left-color:var(--olive)}      .fr-carte.t-bts .fet-titre{color:var(--olive-ink)}      .t-bts .fr-bille,.fr-leg.t-bts i{background:var(--olive-soft);color:var(--olive-ink)}
.fr-carte.t-fiches,.fr-carte.t-envoi{border-left-color:var(--bronze)} .fr-carte.t-fiches .fet-titre,.fr-carte.t-envoi .fet-titre{color:var(--bronze-ink)} .t-fiches .fr-bille,.t-envoi .fr-bille,.fr-leg.t-fiches i,.fr-leg.t-envoi i{background:var(--bronze-soft);color:var(--bronze-ink)}
.fr-carte.t-entretien{border-left-color:var(--violet)} .fr-carte.t-entretien .fet-titre{color:var(--violet-ink)} .t-entretien .fr-bille,.fr-leg.t-entretien i{background:var(--violet-soft);color:var(--violet-ink)}
.fr-carte.t-inscription{border-left-color:var(--info)} .fr-carte.t-inscription .fet-titre{color:var(--info-ink)} .t-inscription .fr-bille,.fr-leg.t-inscription i{background:var(--info-soft);color:var(--info-ink)}
.fr-carte.t-enquete.enq-etudiante{border-left-color:var(--rose)} .fr-carte.t-enquete.enq-etudiante .fet-titre{color:var(--rose-ink)} .t-enquete.enq-etudiante .fr-bille,.fr-leg.t-enquete.enq-etudiante i{background:var(--rose-soft);color:var(--rose-ink)}
.fr-carte.t-enquete.enq-entreprise{border-left-color:var(--fa-marron)} .fr-carte.t-enquete.enq-entreprise .fet-titre{color:var(--fa-marron)} .t-enquete.enq-entreprise .fr-bille,.fr-leg.t-enquete.enq-entreprise i{background:var(--fa-beige-clair);color:var(--fa-marron)}
body[data-theme="dark"] .fr-carte.t-enquete.enq-entreprise{border-left-color:var(--fa-beige)} body[data-theme="dark"] .fr-carte.t-enquete.enq-entreprise .fet-titre{color:var(--fa-beige)} body[data-theme="dark"] .t-enquete.enq-entreprise .fr-bille,body[data-theme="dark"] .fr-leg.t-enquete.enq-entreprise i{color:var(--fa-beige)}
.fr-carte.t-competences{border-left-color:var(--warn)} .fr-carte.t-competences .fet-titre{color:var(--warn-ink)} .t-competences .fr-bille,.fr-leg.t-competences i{background:var(--warn-soft);color:var(--warn-ink)}
.fr-carte.t-pole{border-left-color:var(--fa-orange)} .fr-carte.t-pole .fet-titre{color:var(--brand-800)} .t-pole .fr-bille,.fr-leg.t-pole i{background:var(--brand-50);color:var(--brand-700)}
.fr-carte.t-visite{border-left-color:var(--brand)}   .fr-carte.t-visite .fet-titre{color:var(--brand-800)}   .t-visite .fr-bille,.fr-leg.t-visite i{background:var(--brand-50);color:var(--brand-700)}
.fr-carte.t-mentorat{border-left-color:var(--violet)} .fr-carte.t-mentorat .fet-titre{color:var(--violet-ink)} .t-mentorat .fr-bille,.fr-leg.t-mentorat i{background:var(--violet-soft);color:var(--violet-ink)}
.fr-carte.fr-supprimee .fet-titre{text-decoration:line-through}
/* Et sur la frise des campus, les deux types qui n'avaient pas de couleur. */
.ft .fet-carte.t-competences{border-left-color:var(--warn)} .ft .t-competences .fet-titre{color:var(--warn-ink)}
.ft .fet-carte.t-pole{border-left-color:var(--fa-orange)} .ft .t-pole .fet-titre{color:var(--brand-800)}
/* L'intertitre posé entre les parties (bloc « Titre », 9 oct. 2026). */
.fq-intertitre{margin:22px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--brand-100)}
.fq-intertitre:first-child{margin-top:0}
.fq-intertitre b{display:block;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-700)}
.fq-intertitre p{margin:4px 0 0;font-size:.8rem;color:var(--ink-soft);line-height:1.5}
/* ── Constructeur : ce qu'on compose est ce qu'on voit (9 oct. 2026) ── */
.cf-sec-titre{border-top-color:var(--fa-marron);background:var(--fa-blanc)}
.cf-titre-grand{font-size:1.15rem;font-weight:900;letter-spacing:-.01em}
.cf-sec-matiere{border-top-color:var(--brand)}
.cf-sec-matiere .cf-sec-ic{background:var(--brand-50);color:var(--brand-700)}
.cf-matiere{display:grid;grid-template-columns:minmax(0,1fr) 110px 150px;gap:8px;align-items:center}
.cf-matiere .cf-mat-code{font-weight:800;text-transform:uppercase;font-size:.8rem}
.cf-matiere .select{font-size:.8rem}
.cf-sec-tete .bts-pill{flex:none}
.cf-sec-bas{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cf-ech-modale{grid-template-columns:1fr}
.cf-apercu-seg{margin-bottom:12px}
.cf-apercu-bts{display:contents}
@media (max-width:760px){ .cf-matiere{grid-template-columns:1fr 1fr} .cf-matiere .cf-titre{grid-column:1/-1} }

/* ══════════ L'ÉDITEUR D'ÉTAPE, EN QUATRE SECTIONS (9 oct. 2026) ══════════
   Toutes pareilles : un numéro, un titre, un filet ; les champs alignés
   sur la même grille. */
.fr-ed{gap:16px}
.fr-part{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.fr-part-t{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.fr-part-t b{font-size:.95rem;font-weight:800;flex:1;min-width:0}
.fr-num{width:26px;height:26px;border-radius:50%;background:var(--fa-marron);color:#fff;font-size:.78rem;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
body[data-theme="dark"] .fr-num{background:var(--fa-beige);color:var(--fa-marron)}
.fr-part-d{display:flex;align-items:center;gap:8px;flex:none}
.fr-reprendre{float:none;display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--ink-soft);text-transform:none;letter-spacing:0}
.fr-reprendre svg{width:14px;height:14px}
.fr-reprendre .select{width:240px;max-width:40vw;padding:6px 28px 6px 10px;font-size:.8rem}
.fr-info{margin:0;font-size:.82rem;color:var(--ink-soft);display:flex;gap:8px;align-items:flex-start}
.fr-info svg{width:15px;height:15px;flex:none;margin-top:1px}
.fr-todos{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:var(--fa-blanc)}
.fr-todos-t{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.fr-todo{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;padding:12px;border-radius:10px;background:var(--surface);border:1px solid var(--border)}
.fr-todo-ic{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-50);color:var(--brand-700)}
.fr-todo-ic svg{width:16px;height:16px}
.fr-todo-c{display:flex;flex-direction:column;gap:10px;min-width:0}
.fr-todo-c > b{font-size:.86rem;font-weight:800}
.fr-todo-dates{font-size:.84rem;font-weight:600;color:var(--ink-2)}
.fr-todo-champs{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px}
.fr-todo-off .fr-todo-champs{display:none}
.fr-todo-off .fr-todo-ic{background:var(--bg-2);color:var(--ink-mute)}
@media (max-width:760px){ .fr-todo-champs{grid-template-columns:1fr} .fr-reprendre .select{width:160px} .fr-part-t{flex-wrap:wrap} }

/* ── Le constructeur, calme : un menu « ⋯ », les gestes au même endroit ── */
.cf-menu-w{position:relative;display:inline-flex}
.cf-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:30;min-width:240px;padding:6px;border-radius:12px;background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--sh-md);display:flex;flex-direction:column}
.cf-menu[hidden]{display:none}
.cf-q-pied .cf-menu{left:0;right:auto}
.cf-menu-i{appearance:none;border:0;background:none;font:inherit;font-size:.82rem;font-weight:600;color:var(--ink-2);text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px}
.cf-menu-i:hover{background:var(--bg-2);color:var(--ink)}
.cf-menu-i svg{width:15px;height:15px;color:var(--ink-mute);flex:none}
.cf-menu-i[data-cfa$="-haut"] svg{transform:rotate(-90deg)}
.cf-menu-i[data-cfa$="-bas"] svg{transform:rotate(90deg)}
.cf-menu-x{color:var(--danger-ink)}
.cf-menu-x svg{color:var(--danger)}
.cf-q-pied{gap:6px}
.cf-q-pied .cf-switch{margin-right:6px}
/* Les options : seule la croix se voit, monter / descendre au survol. */
.cf-opt .cf-bts-mini .cf-b:not(.cf-b-x){opacity:0;transition:opacity .12s}
.cf-opt:hover .cf-bts-mini .cf-b,.cf-opt:focus-within .cf-bts-mini .cf-b{opacity:1}
/* La barre « Ajouter » : deux lignes alignées, des boutons tous pareils. */
.cf-ajouts{flex-direction:column;align-items:stretch;gap:10px;padding:14px}
.cf-ajouts-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cf-ajouts-t{display:inline-flex;align-items:center;gap:6px;width:150px;flex:none}
.cf-ajouts-t svg{width:13px;height:13px}
.cf-ajout-b{appearance:none;border:1px solid var(--border-2);background:var(--surface);font:inherit;font-size:.8rem;font-weight:700;color:var(--ink-2);
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px}
.cf-ajout-b:hover{border-color:var(--brand);background:var(--fa-beige-clair);color:var(--fa-marron)}
.cf-ajout-b svg{width:14px;height:14px;color:var(--brand-700)}
@media (max-width:760px){ .cf-ajouts-t{width:100%} }

/* ── L'aperçu : chaque bloc reste dans son cadre ── */
.cf-apercu .fq-sec .fq-q{padding:12px 16px}
.cf-apercu .fq-opts{gap:9px}
.cf-apercu .fq-opt span{min-width:0;overflow-wrap:anywhere}
.cf-ap-note{display:block;font-size:.74rem;color:var(--ink-mute);font-weight:500;margin-top:1px}
.cf-ap-demande{margin:0 0 10px}
.cf-ap-zone{margin:6px 0 0;padding:12px 14px;gap:10px}
.cf-ap-zone span{min-width:0;overflow-wrap:anywhere}
.cf-ap-sys{padding:0}
.cf-ap-sig{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--border-2);font-size:.84rem;font-weight:600}
.cf-ap-sig:last-child{border-bottom:0}
.cf-ap-sig i{font-style:normal;font-size:.76rem;font-weight:800;color:var(--ink-mute);border:1px solid var(--border-2);border-radius:8px;padding:4px 10px}
.cf-sig-auto{grid-template-columns:20px minmax(0,1fr);font-size:.82rem;font-weight:600;color:var(--ink-2);padding:2px 0}

/* ══════════ LE CONSTRUCTEUR, FORMULAIRE + PANNEAU (9 oct. 2026, soir) ══════════
   Théo : « trop lourd… on ne voit parfois que deux questions… je veux voir
   le formulaire en priorité, et les options seulement quand on sélectionne
   un élément ». Au centre, le formulaire au gabarit du rendu (.fq-sec :
   liseré orange, cercle numéroté, une ligne par question) ; à droite, le
   panneau : « Ajouter », puis les réglages de l'élément choisi. */
.fr-ed{padding:14px 16px;gap:14px}
.fr-ed-barre{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fr-ed-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.fr-ed-titre{border:0;background:transparent;font:inherit;font-size:1.2rem;font-weight:900;letter-spacing:-.01em;color:var(--ink);
  padding:3px 6px;margin-left:-6px;border-radius:8px;width:100%;min-width:0;outline:none}
.fr-ed-titre:hover{background:var(--bg)}
.fr-ed-titre:focus{background:var(--surface);box-shadow:inset 0 -2px 0 var(--brand)}
.fr-puces{display:flex;flex-wrap:wrap;gap:6px}
.fr-puce{appearance:none;display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);font:inherit;font-size:.74rem;font-weight:700;color:var(--ink-2);cursor:pointer;max-width:100%}
.fr-puce span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-puce svg{width:13px;height:13px;flex:none;color:var(--brand-700)}
.fr-puce:hover{border-color:var(--brand);background:var(--brand-50)}
.fr-puce-r{border-style:dashed;color:var(--ink-soft)}
.fr-ed-act{display:flex;align-items:center;gap:6px;flex:none}

.cf-atelier{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.cf-canevas{min-width:0}
.cf-barre{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cf-barre-t{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.cf-barre-b{display:flex;gap:4px}
.cf-feuille{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:var(--bg);min-height:120px}
.cf-vide-f{display:flex;align-items:center;justify-content:center;gap:6px;padding:28px;color:var(--ink-mute);font-size:.82rem;font-weight:700}
.cf-vide-f svg{width:14px;height:14px}

/* Les champs écrits sur place : sans cadre, soulignés quand on écrit. */
.cf-in{display:block;width:100%;min-width:0;border:0;background:transparent;font:inherit;color:inherit;padding:3px 6px;
  border-radius:6px;outline:none;resize:none;overflow:hidden}
.cf-in:hover{background:rgba(41,29,19,.035)}
.cf-in:focus{background:var(--surface);box-shadow:inset 0 -2px 0 var(--brand)}
.cf-in::placeholder{color:var(--ink-mute);font-weight:600}
.cf-in-titre{flex:1;font-size:.92rem;font-weight:800;color:var(--ink)}
.cf-in-grand{font-size:1.02rem;font-weight:900;letter-spacing:-.01em}
.cf-in-desc{font-size:.78rem;font-style:italic;color:var(--ink-soft);line-height:1.45}
.cf-blk:not(.cf-actif) .cf-in-desc.cf-vide:not(:focus){display:none}

/* Les blocs */
.cf-blk{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-sm);
  transition:box-shadow .12s,border-color .12s}
section.cf-blk{border-left:4px solid var(--brand);overflow:clip}
.cf-blk.cf-sel{box-shadow:0 0 0 2px var(--brand)}
.cf-part-t{display:flex;align-items:center;gap:6px;padding:7px 8px 7px 4px;background:var(--brand-50);border-bottom:1px solid var(--brand-100);cursor:pointer}
.cf-replie .cf-part-t{border-bottom:0}
.cf-part-n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;display:inline-flex;
  align-items:center;justify-content:center;font-size:.72rem;font-weight:800}
.cf-part-n svg{width:13px;height:13px}
.cf-part-nb{flex:none;font-size:.72rem;font-weight:600;color:var(--ink-mute);white-space:nowrap}
.cf-code{flex:none;font-size:.62rem;font-weight:800;letter-spacing:.6px;color:var(--ink-mute);background:var(--surface);
  border:1px solid var(--border-2);border-radius:999px;padding:2px 8px}
section.cf-blk > .cf-in-desc{padding:7px 14px;border-radius:0;border-bottom:1px solid var(--border);background:var(--bg)}
.cf-blk-liste{border-left-color:var(--ok)!important}
.cf-blk-liste .cf-part-t{background:var(--ok-soft);border-bottom-color:var(--border)}
.cf-blk-liste .cf-part-n{background:var(--ok)}
.cf-blk-piece{border-left-color:var(--fa-marron)!important}
.cf-blk-piece .cf-part-t{background:var(--fa-beige-clair);border-bottom-color:var(--border)}
.cf-blk-piece .cf-part-n{background:var(--fa-marron)}
body[data-theme="dark"] .cf-blk-piece .cf-part-n{background:var(--fa-beige);color:var(--fa-marron)}
div.cf-blk{display:flex;align-items:flex-start;gap:6px;padding:7px 8px 7px 4px;cursor:pointer}
.cf-blk-c{flex:1;min-width:0}
.cf-blk-ic{flex:none;width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-2);color:var(--ink-soft)}
.cf-blk-ic svg{width:14px;height:14px}
.cf-blk-l{flex:1;min-width:0;display:flex;flex-direction:column;padding-top:1px;font-size:.82rem}
.cf-blk-l b{font-weight:800}
.cf-blk-l span{font-size:.74rem;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-blk-titre{background:transparent;box-shadow:none;border-color:transparent;border-bottom:2px solid var(--brand-100);border-radius:0}
.cf-blk-titre.cf-sel{border-radius:var(--r-md)}
.cf-blk-texte{background:var(--fa-beige-clair);border-color:var(--fa-beige);box-shadow:none}
.cf-blk-texte .cf-in{font-size:.82rem;line-height:1.5}
.cf-blk-texte .cf-blk-ic{background:var(--surface);color:var(--brand-700)}
.cf-blk-alerte{background:var(--warn-soft);border-color:var(--warn)}
.cf-blk-alerte .cf-blk-ic{color:var(--warn-ink)}
.cf-blk-systeme{background:var(--fa-blanc);border-style:dashed;box-shadow:none}
.cf-blk-p{margin:0;padding:8px 14px 0}
.cf-ap-liste{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:9px 14px 11px;font-size:.78rem;color:var(--ink-2)}
.cf-ap-liste > span{display:inline-flex;align-items:center;gap:7px}

/* Une question = une ligne */
.cf-qs{display:flex;flex-direction:column}
.cf-qs-duos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cf-qs-duos > .cf-qr:nth-child(even){border-left:1px solid var(--border)}
.cf-qr{position:relative;display:grid;grid-template-columns:18px 20px minmax(0,1fr) auto;gap:2px 6px;align-items:start;
  padding:7px 8px 8px 4px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
.cf-qr:last-child{border-bottom:0}
.cf-qr:hover{background:var(--bg)}
.cf-qr.cf-sel{background:var(--brand-50);box-shadow:inset 3px 0 0 var(--brand)}
.cf-qr .cf-poignee,.cf-part-t .cf-poignee,div.cf-blk > .cf-poignee{opacity:0;transition:opacity .12s;width:18px}
.cf-qr:hover .cf-poignee,.cf-qr.cf-sel .cf-poignee,.cf-part-t:hover .cf-poignee,div.cf-blk:hover > .cf-poignee{opacity:1}
.cf-qr-n{font-size:.72rem;font-weight:800;color:var(--ink-mute);padding-top:5px;text-align:right}
.cf-qr-c{min-width:0}
.cf-qr-l1{display:flex;align-items:flex-start}
.cf-qr-lib{font-size:.86rem;font-weight:700;line-height:1.35;color:var(--ink)}
.cf-oblig{color:var(--danger);font-weight:800;padding:3px 2px 0 0}
.cf-qr-aide{margin:0 6px 2px;font-size:.74rem;color:var(--ink-soft);line-height:1.4}
.cf-qr-ap{padding:3px 6px 0;display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:.76rem;color:var(--ink-soft)}
.cf-ap-opts{display:flex;flex-wrap:wrap;gap:3px 14px}
.cf-ap-opts > span{display:inline-flex;align-items:center;gap:6px;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-pu{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--border-2);flex:none;display:inline-block}
.cf-pu-c{border-radius:3px}
.cf-ap-plus{font-weight:700;color:var(--ink-mute)}
.cf-ap-autre{color:var(--ink-mute)}
.cf-ap-rang{font-style:normal;font-weight:800;font-size:.7rem;color:var(--ink-mute)}
.cf-ap-champ{display:inline-flex;align-items:center;gap:6px;min-width:0;width:220px;max-width:100%;padding:2px 2px 3px;
  border-bottom:1px dashed var(--border-2);color:var(--ink-mute)}
.cf-ap-champ span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-ap-champ svg{width:13px;height:13px;flex:none}
.cf-ap-long{width:340px}
.cf-ap-select{width:180px;justify-content:space-between;border:1px solid var(--border-2);border-radius:7px;padding:2px 8px}
.cf-ap-crans{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.cf-ap-crans span{min-width:22px;height:22px;padding:0 5px;border-radius:6px;border:1px solid var(--border-2);display:inline-flex;
  align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:var(--ink-soft);background:var(--surface)}
.cf-ap-crans em{font-style:normal;font-size:.7rem;color:var(--ink-mute);padding:0 2px}
.cf-ap-mots span{padding:0 10px}
.cf-ap-mot{display:inline-flex;align-items:center;gap:6px;color:var(--ink-mute)}
.cf-ap-mot svg{width:13px;height:13px}
.cf-qr-d{display:flex;align-items:center;gap:4px;padding-top:2px}
.cf-qr-type{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:700;color:var(--ink-soft);
  padding:3px 8px;border-radius:999px;background:var(--bg-2);white-space:nowrap}
.cf-qr-type svg{width:12px;height:12px;flex:none}
.cf-badge{display:inline-flex;width:22px;height:22px;border-radius:6px;align-items:center;justify-content:center;flex:none;
  background:var(--fa-beige-clair);color:var(--brand-700)}
.cf-badge svg{width:12px;height:12px}
.cf-qr-act{display:inline-flex;opacity:0;transition:opacity .12s}
.cf-qr-act .cf-b{width:26px;height:26px}
.cf-qr:hover > .cf-qr-d > .cf-qr-act,.cf-qr.cf-sel > .cf-qr-d > .cf-qr-act,
.cf-part-t:hover > .cf-qr-act,section.cf-sel > .cf-part-t > .cf-qr-act,
div.cf-blk:hover > .cf-qr-act,div.cf-blk.cf-sel > .cf-qr-act{opacity:1}
.cf-plier{width:26px!important;height:26px!important}
.cf-ajout-q{display:inline-flex;align-items:center;gap:6px;margin:6px 10px 8px 42px;padding:5px 11px;border:1px dashed var(--border-2);
  border-radius:8px;background:none;font:inherit;font-size:.76rem;font-weight:700;color:var(--ink-soft);cursor:pointer}
.cf-ajout-q:hover{border-color:var(--brand);color:var(--brand-700);background:var(--brand-50)}
.cf-blk:not(.cf-actif) > .cf-ajout-q{display:none}
.cf-traine{opacity:.4}
.cf-cible{outline:2px dashed var(--brand);outline-offset:-2px}

/* Le panneau */
.cf-panneau{position:sticky;top:78px;max-height:calc(100vh - 92px);overflow:auto;overscroll-behavior:contain;
  border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:14px;display:flex;flex-direction:column;gap:14px}
.cf-pn-fermer{display:none}
.cf-pn-ajout{display:flex;flex-direction:column;gap:8px}
.cf-pn-gt{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute)}
.cf-pn-tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.cf-tuile{appearance:none;border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:8px 3px 7px;display:flex;
  flex-direction:column;align-items:center;gap:4px;font:inherit;font-size:.66rem;font-weight:700;color:var(--ink-2);cursor:pointer;
  text-align:center;line-height:1.15}
.cf-tuile svg{width:16px;height:16px;color:var(--brand-700)}
.cf-tuile:hover{border-color:var(--brand);background:var(--brand-50)}
.cf-tuile-1{background:var(--brand-50);border-color:var(--brand-100)}
.cf-pn-sys{display:flex;flex-wrap:wrap;gap:0 2px}
.cf-pn-corps{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--border)}
.cf-pn-tete{display:flex;align-items:center;gap:10px}
.cf-pn-ic{flex:none;width:30px;height:30px;border-radius:9px;background:var(--brand-50);color:var(--brand-700);display:inline-flex;
  align-items:center;justify-content:center}
.cf-pn-ic svg{width:15px;height:15px}
.cf-pn-titre{flex:1;min-width:0;display:flex;flex-direction:column}
.cf-pn-titre b{font-size:.92rem;font-weight:800}
.cf-pn-titre small{font-size:.74rem;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-pn-gestes{display:flex;flex:none}
.cf-pn-gestes .cf-b{width:28px;height:28px}
.cf-pn-g{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--border)}
.cf-pn-f{display:flex;flex-direction:column;gap:4px;font-size:.74rem;font-weight:700;color:var(--ink-soft);min-width:0}
.cf-pn-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cf-panneau .input,.cf-panneau .select,.cf-panneau .textarea{padding:7px 10px;font-size:.84rem;font-weight:500}
.cf-panneau .fr-champ{gap:4px;font-size:.74rem}
/* (.fr-champ porte aussi la barre d'écriture des fils, plus haut : ici rien de cet habit) */
.fr-ed .fr-champ{background:none;border:0;border-radius:0;padding:0;max-height:none;overflow:visible;flex:none;line-height:1.3}
.cf-panneau textarea{resize:none}
.cf-panneau .cf-q-type .select{padding-left:34px}
.cf-pn-lien{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border:0;background:none;font:inherit;font-size:.8rem;
  font-weight:700;color:var(--brand-700);cursor:pointer;padding:4px 0}
.cf-pn-lien svg{width:14px;height:14px}
.cf-pn-crans{display:flex;flex-direction:column;gap:2px;font-size:.78rem;color:var(--ink-2)}
.cf-pn-crans span{display:flex;gap:8px}
.cf-pn-crans b{width:14px;color:var(--brand-700)}
.cf-panneau .cf-ajout-mini{align-self:flex-start}
.cf-liste{display:flex;flex-direction:column;gap:5px}
.cf-liste .cf-opt{grid-template-columns:18px minmax(0,1fr) auto;gap:6px}
.cf-liste .cf-opt .input{padding:6px 9px}
.cf-liste .cf-opt-aj{padding-left:24px;gap:2px}
.cf-liste .cf-bts .cf-b{width:24px;height:24px}
.cf-liste .cf-bts .cf-b:not(.cf-b-x){opacity:0;transition:opacity .12s}
.cf-liste .cf-opt:hover .cf-bts .cf-b,.cf-liste .cf-opt:focus-within .cf-bts .cf-b{opacity:1}
.cf-opt.cf-point{grid-template-columns:18px minmax(0,1fr) auto;align-items:start}
.cf-opt.cf-point > .cf-pu,.cf-opt.cf-point > .cf-num{margin-top:9px}
.cf-point-c{display:flex;flex-direction:column;gap:4px;min-width:0}
.cf-point-c .cf-point-n{font-size:.78rem}
.cf-sig-auto{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--ink-2)}
.cf-sig-auto svg{width:13px;height:13px;color:var(--ink-mute)}
.cf-panneau .cf-si{padding:8px;gap:8px}
.cf-panneau .cf-si .select,.cf-panneau .cf-si .input{width:100%;min-width:0;max-width:none}
.cf-panneau .cf-si-l{display:grid;grid-template-columns:20px minmax(0,1fr);gap:6px;padding-left:0;align-items:center}
.cf-si-2{grid-column:2;display:flex;gap:6px;align-items:center}
.cf-si-2 .select,.cf-si-2 .input{flex:1}
.cf-si-pied{display:flex;justify-content:space-between;gap:6px}
.cf-ajout-x{color:var(--ink-soft)}
.cf-panneau .fr-todo{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--fa-blanc)}
.cf-panneau .fr-todo > b{font-size:.82rem;font-weight:800}
.cf-panneau .fr-todo-dates{font-size:.8rem}
.cf-panneau .fr-todo-champs{grid-template-columns:1fr;gap:8px}
.cf-panneau .cf-note{font-size:.78rem}
.cf-canevas > .fr-info{padding:14px;border-radius:14px;background:var(--bg)}

@media (max-width:1280px){ .cf-qr-type span{display:none} .cf-qr-type{padding:4px} }
/* Étroit : le panneau devient un tiroir qui monte du bas quand on touche
   un élément ; la croix le referme. */
@media (max-width:1000px){
  .cf-atelier{grid-template-columns:minmax(0,1fr)}
  .cf-panneau{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:74vh;z-index:500;border-radius:18px 18px 0 0;
    box-shadow:var(--sh-lg);transform:translateY(105%);transition:transform .22s var(--ease);
    padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .cf-pn-ouvert .cf-panneau{transform:none}
  .cf-pn-fermer{display:inline-flex;position:absolute;top:10px;right:10px}
  .cf-pn-ajout{padding-right:34px}
  .cf-atelier-fixe .cf-panneau{position:static;transform:none;max-height:none;box-shadow:none;border-radius:14px;z-index:auto}
  .fr-ed-barre{flex-direction:column}
  .fr-ed-act{align-self:stretch;justify-content:flex-end}
}
@media (max-width:560px){
  .cf-qr{grid-template-columns:14px 18px minmax(0,1fr) auto}
  .cf-ap-long{width:100%}
  .cf-qs-duos{grid-template-columns:minmax(0,1fr)}
  .cf-qs-duos > .cf-qr:nth-child(even){border-left:0}
  .cf-feuille{padding:8px}
  /* au doigt : Dupliquer · Supprimer seulement sur l'élément touché */
  .cf-qr-act,.cf-part-nb{display:none}
  .cf-qr.cf-sel > .cf-qr-d > .cf-qr-act,section.cf-sel > .cf-part-t > .cf-qr-act,div.cf-blk.cf-sel > .cf-qr-act{display:inline-flex}
}

/* ══════════ FRISES V2 (9 oct. 2026, maquettes A2 · B2 · C3 · D3) ══════════
   « Un enfant de 7 ans doit pouvoir créer un questionnaire parfait. »
   Une règle : on clique une chose, elle s'ouvre. */

/* ── La frise d'un seul tenant : BTS 1 puis BTS 2 ── */
.fr-frise{scroll-behavior:smooth}
.fr-an{flex:none;display:flex;align-items:stretch}
.fr-an span{writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:center;
  width:26px;border-radius:10px;background:var(--fa-marron);color:#fff;font-size:.72rem;font-weight:900;letter-spacing:.08em}
body[data-theme="dark"] .fr-an span{background:var(--fa-beige);color:var(--fa-marron)}
.fr-piste{grid-auto-columns:auto}
.fr-piste > .fr-col{width:158px}
.fr-carte{padding:0;cursor:default}
.fr-carte-b{appearance:none;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;
  display:flex;flex-direction:column;gap:3px;padding:8px 8px 10px 10px;border-radius:inherit}
.fr-carte-b .fet-titre{padding-right:20px}
.fr-carte-menu{position:absolute;right:3px;bottom:3px;width:24px;height:22px;border:0;border-radius:7px;background:var(--surface);
  color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .12s}
.fr-carte-menu svg{width:14px;height:14px}
.fr-carte:hover .fr-carte-menu,.fr-carte.on .fr-carte-menu,.fr-carte-menu:focus-visible{opacity:1}
.fr-carte-menu:hover{background:var(--bg-2);color:var(--ink)}
@media (hover:none){ .fr-carte-menu{opacity:1} }
.fr-menu-carte{position:fixed;z-index:560;min-width:200px;padding:6px;border-radius:12px;background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--sh-lg);display:flex;flex-direction:column}
.fr-vers{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.fr-vers-mois{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.fr-vers-m{appearance:none;border:1px solid var(--border);background:var(--surface);border-radius:10px;padding:9px 4px;font:inherit;
  font-size:.8rem;font-weight:700;color:var(--ink-2);cursor:pointer}
.fr-vers-m:hover{border-color:var(--brand)}
.fr-vers-m.on{background:var(--brand);border-color:var(--brand);color:var(--fa-marron)}
.fr-vers-res{margin:12px 0 0;font-size:.84rem;font-weight:700;color:var(--ink-2)}
@media (max-width:560px){ .fr-vers-mois{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ── Les trois dates côte à côte ── */
.fr-puce-fixe{cursor:default;border-style:solid;color:var(--ink-soft)}
.fr-puce-fixe:hover{border-color:var(--border);background:var(--surface)}
.fr-dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.fr-case{display:flex;flex-direction:column;gap:8px;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--fa-blanc)}
.fr-case-o{background:var(--brand-50);border-color:var(--brand-100)}
.fr-case-t{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.fr-case-c{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.fr-case-l{font-size:.78rem;font-weight:600;color:var(--ink-soft)}
.fr-case-in{padding:6px 10px;font-size:.8rem;width:100%}
.fr-case-off .fr-case-c{display:none}
.fr-case-ko{border-color:var(--danger);background:var(--danger-soft)}
.fr-case-ko .fr-date{border-color:var(--danger);color:var(--danger-ink)}
.fr-date{appearance:none;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1.5px solid var(--border-2);border-radius:10px;
  background:var(--surface);font:inherit;font-size:.95rem;font-weight:800;color:var(--ink);cursor:pointer}
.fr-date svg{width:15px;height:15px;color:var(--brand-700)}
.fr-date small{font-size:.68rem;font-weight:700;color:var(--ink-mute)}
.fr-date:hover{border-color:var(--brand)}
.fr-date-fixe{cursor:default;font-size:.82rem}
.fr-date-fixe:hover{border-color:var(--border-2)}
.fr-cal{position:fixed;z-index:560;width:272px;padding:10px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-lg)}
.fr-cal-t{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.fr-cal-t b{font-size:.92rem;font-weight:800;text-transform:capitalize}
.fr-cal-t small{font-size:.7rem;color:var(--ink-mute);text-transform:none;margin-left:4px}
.fr-cal-t .cf-b:disabled{opacity:.3;cursor:default}
.fr-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.fr-cal-g i{font-style:normal;font-size:.66rem;font-weight:800;color:var(--ink-mute);padding:3px 0}
.fr-cal-g button{appearance:none;border:0;background:none;font:inherit;font-size:.8rem;font-weight:600;color:var(--ink);height:32px;border-radius:8px;cursor:pointer}
.fr-cal-g button:hover{background:var(--bg-2)}
.fr-cal-g button.dans{background:var(--brand-50)}
.fr-cal-g button.prep{box-shadow:inset 0 0 0 2px var(--fa-beige)}
.fr-cal-g button.choisi{background:var(--brand);color:var(--fa-marron);font-weight:900}
.fr-cal-g button.hors{color:var(--ink-mute);opacity:.35;cursor:default}

/* ── Le panneau : Ajouter | Réglages ── */
.cf-onglets{display:flex;align-items:center;gap:4px;padding:3px;border-radius:12px;background:var(--bg-2)}
.cf-onglet{flex:1;appearance:none;border:0;background:none;font:inherit;font-size:.82rem;font-weight:800;color:var(--ink-soft);
  padding:8px 6px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.cf-onglet svg{width:14px;height:14px}
.cf-onglet.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)}
.cf-onglets .cf-pn-fermer{flex:none}
.cf-pn-corps{border-top:0;padding-top:0;gap:16px}
.cf-ici{display:flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;color:var(--brand-700);padding:6px 10px;border-radius:9px;background:var(--brand-50)}
.cf-ici svg{width:13px;height:13px;flex:none}
.cf-ici span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-fam{display:flex;flex-direction:column;gap:8px}
.cf-pn-tuiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.cf-tuile{padding:10px 4px 9px;font-size:.7rem;gap:5px;min-height:62px;justify-content:center}
.cf-tuile svg{width:18px;height:18px}
.cf-tuile-1{background:var(--surface);border-color:var(--border)}
.cf-tuile-1 svg{color:var(--brand)}
.cf-tuile-plus{border-style:dashed;color:var(--ink-soft)}
.cf-autres{margin-top:-8px}
.cf-panneau .cf-pn-g{padding-top:0;border-top:0}

/* ── La question ouverte (façon Google Forms) ── */
.cf-qr{cursor:pointer}
.cf-qr-lib{font-size:.86rem;font-weight:700;line-height:1.35;color:var(--ink);padding:3px 6px}
.cf-vide-t{color:var(--ink-mute)!important;font-weight:600}
.cf-qr.cf-ouverte{cursor:default;background:var(--surface);box-shadow:inset 4px 0 0 var(--brand),0 6px 20px -8px rgba(41,29,19,.25);
  border-radius:10px;margin:6px 4px;border:1px solid var(--brand-100);padding:10px 12px 8px 4px;grid-template-columns:18px 20px minmax(0,1fr)}
.cf-qs-duos > .cf-ouverte{grid-column:1/-1}
.cf-ouverte .cf-poignee{opacity:1}
.cf-ouv{min-width:0;display:flex;flex-direction:column;gap:10px}
.cf-ouv-l1{display:flex;align-items:flex-start;gap:8px}
.cf-ouv-lib{flex:1;font-size:.95rem;font-weight:700;background:var(--fa-blanc);padding:8px 10px;border-radius:8px;box-shadow:inset 0 -2px 0 var(--border-2)}
.cf-ouv-lib:focus{box-shadow:inset 0 -2px 0 var(--brand)}
.cf-type-b{flex:none;appearance:none;display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--border-2);border-radius:9px;
  background:var(--surface);font:inherit;font-size:.8rem;font-weight:700;color:var(--ink-2);cursor:pointer;max-width:46%}
.cf-type-b span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-type-b svg{width:15px;height:15px;flex:none;color:var(--brand-700)}
.cf-type-b svg:last-child{color:var(--ink-mute);width:13px;height:13px}
.cf-type-b:hover,.cf-type-b.on{border-color:var(--brand)}
.cf-types{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:12px;background:var(--fa-blanc);border:1px solid var(--border)}
.cf-types-g{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;align-items:start}
.cf-types-gt{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);padding-top:9px}
.cf-types-l{display:flex;flex-wrap:wrap;gap:6px}
.cf-type{appearance:none;display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface);
  font:inherit;font-size:.78rem;font-weight:700;color:var(--ink-2);cursor:pointer}
.cf-type svg{width:15px;height:15px;color:var(--brand-700)}
.cf-type:hover{border-color:var(--brand);background:var(--brand-50)}
.cf-type.on{background:var(--brand);border-color:var(--brand);color:var(--fa-marron)}
.cf-type.on svg{color:var(--fa-marron)}
@media (max-width:640px){ .cf-types-g{grid-template-columns:1fr} .cf-types-gt{padding-top:0} }
.cf-ouv-corps{display:flex;flex-direction:column;gap:8px;min-width:0}
.cf-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8rem;color:var(--ink-2)}
.cf-l b{font-weight:800;color:var(--ink-soft);min-width:14px}
.cf-l .select{width:auto;padding:5px 26px 5px 9px;font-size:.8rem}
.cf-l-desc{flex-wrap:nowrap}
.cf-l-desc > svg{width:14px;height:14px;color:var(--ink-mute);flex:none}
.cf-l-desc .cf-in{flex:1}
.cf-l-crans{gap:12px}
.cf-ap-grands span{min-width:32px;height:30px;font-size:.8rem}
.cf-ap-grands.cf-ap-mots span{padding:0 16px}
.cf-in-opt{font-size:.84rem;padding:5px 6px;border-radius:0;box-shadow:inset 0 -1px 0 var(--border)}
.cf-in-opt:hover{background:transparent;box-shadow:inset 0 -1px 0 var(--border-2)}
.cf-in-opt:focus{background:transparent;box-shadow:inset 0 -2px 0 var(--brand)}
.cf-in-2{font-size:.76rem;color:var(--ink-soft)}
.cf-court{width:120px!important;flex:none}
.cf-faux-champ{max-width:420px;font-size:.84rem;color:var(--ink-soft);padding:7px 2px;border-radius:0;box-shadow:inset 0 -1px 0 var(--border-2)}
.cf-faux-champ:hover{background:transparent}
.cf-faux-long{max-width:none;padding-bottom:22px}
.cf-liste{display:flex;flex-direction:column;gap:3px}
.cf-liste .cf-opt{grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center}
.cf-opt-c{display:flex;flex-direction:column;gap:2px;min-width:0}
.cf-opt-autre .cf-opt-c{font-size:.8rem;padding:5px 6px}
.cf-liste .cf-opt-aj{display:flex;align-items:center;gap:8px;padding:4px 0 0;flex-wrap:wrap}
.cf-ajout-lien{appearance:none;border:0;background:none;font:inherit;font-size:.82rem;font-weight:700;color:var(--brand-700);cursor:pointer;
  padding:4px 2px;display:inline-flex;align-items:center;gap:5px}
.cf-ajout-lien svg{width:13px;height:13px}
.cf-ajout-lien:hover{text-decoration:underline}
.cf-muet{color:var(--ink-mute);font-size:.8rem}
.cf-liste .cf-bts{display:inline-flex}
.cf-liste .cf-bts .cf-b{width:24px;height:24px}
.cf-liste .cf-bts .cf-b:not(.cf-b-x){opacity:0;transition:opacity .12s}
.cf-liste .cf-opt:hover .cf-bts .cf-b,.cf-liste .cf-opt:focus-within .cf-bts .cf-b{opacity:1}
@media (hover:none){ .cf-liste .cf-bts .cf-b:not(.cf-b-x){opacity:1} }
.cf-grille{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-echelle{display:flex;flex-direction:column;gap:8px}
.cf-pied{display:flex;align-items:center;gap:4px;padding-top:8px;border-top:1px solid var(--border);flex-wrap:wrap}
.cf-pied .cf-switch{margin-right:8px}
.cf-pied .cf-b{width:32px;height:32px}
.cf-pied .cf-menu{left:0;right:auto;bottom:calc(100% + 4px);top:auto}
.cf-si{background:var(--fa-beige-clair);border-radius:10px;padding:10px;gap:8px}
.cf-si-t{display:flex;align-items:center;gap:8px;font-size:.8rem}
.cf-si-t > svg{width:14px;height:14px;color:var(--brand-700)}
.cf-si-l{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-left:0}
.cf-si-l .select,.cf-si-l .input{width:auto;min-width:0;max-width:260px;padding:5px 26px 5px 9px;font-size:.8rem}
.cf-si .cf-ajout-mini{align-self:flex-start}

/* ── Les blocs fermés / ouverts ── */
.cf-blk-t{display:flex;align-items:flex-start;gap:6px;width:100%;min-width:0}
div.cf-blk{flex-direction:column;align-items:stretch}
div.cf-blk.cf-sel,section.cf-blk.cf-sel{box-shadow:0 0 0 2px var(--brand),0 6px 20px -8px rgba(41,29,19,.25)}
div.cf-blk.cf-sel > .cf-pied,section.cf-blk.cf-sel > .cf-pied{margin:0 10px 8px}
section.cf-blk.cf-sel > .cf-ouv-corps{padding:10px 14px}
div.cf-blk.cf-sel > .cf-ouv-corps{padding:6px 4px 8px 30px}
.cf-grand{display:block;font-size:1.02rem;font-weight:900;letter-spacing:-.01em;padding:3px 6px}
.cf-texte{margin:0;padding:3px 6px;font-size:.82rem;line-height:1.5;white-space:pre-line}
.cf-blk-texte .cf-blk-c b{display:block;padding:3px 6px 0;font-size:.84rem}
.cf-part-titre{flex:1;min-width:0;font-size:.92rem;font-weight:800;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-in-code{width:90px;flex:none;font-weight:800;text-transform:uppercase;font-size:.78rem}
.cf-part-desc{margin:0;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--bg)}
.cf-part-desc-l{font-size:.78rem;font-style:italic;color:var(--ink-soft)}
section.cf-blk > textarea.cf-part-desc{border-radius:0}
.cf-sig-auto{padding:3px 6px}
.cf-etroit{display:none}
@media (max-width:1000px){ .cf-etroit{display:inline-flex} }
@media (max-width:560px){
  .cf-ouv-l1{flex-direction:column;align-items:stretch}
  .cf-type-b{max-width:none}
  .cf-grille{grid-template-columns:1fr}
  .cf-qr.cf-ouverte{grid-template-columns:14px 18px minmax(0,1fr)}
}
.cf-blk-t > .cf-poignee{opacity:0;transition:opacity .12s;width:18px}
div.cf-blk:hover > .cf-blk-t > .cf-poignee,div.cf-blk.cf-sel > .cf-blk-t > .cf-poignee{opacity:1}
@media (hover:none){ .cf-poignee{opacity:1!important} }
.cf-barre-b{flex-wrap:wrap;justify-content:flex-end}

/* ══════════ FRISES : portée, trois étages, quatre dates (9 oct. 2026, nuit) ══════════ */
.fr-portee{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 14px}
.fr-portee-c{display:inline-flex;align-items:center;gap:7px}
.fr-portee-c svg{width:15px;height:15px;color:var(--ink-mute)}
.fr-portee-c .select{width:auto;min-width:180px;padding:7px 30px 7px 11px;font-size:.84rem;font-weight:700}
.fr-portee-l{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--ink-soft);padding:6px 12px;border-radius:999px;background:var(--brand-50)}
.fr-portee-l svg{width:14px;height:14px;color:var(--brand-700)}
.fr-portee-l b{color:var(--ink);font-weight:800}
/* La grille : une colonne par mois, quatre rangées (mois + trois étages)
   alignées d'un bout à l'autre (subgrid). */
.fr-piste2{display:grid;grid-auto-flow:column;grid-template-rows:auto auto auto auto;grid-auto-columns:max-content;column-gap:8px;row-gap:6px}
.fr-col2,.fr-etiquettes{display:grid;grid-row:1 / -1;grid-template-rows:subgrid;width:158px}
.fr-etiquettes{width:96px;position:sticky;left:-12px;z-index:3;background:var(--surface);padding-left:2px}
.fr-an{grid-row:1 / -1}
.fr-etq{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;color:var(--ink-soft);padding:8px 6px;border-radius:10px;writing-mode:horizontal-tb}
.fr-etq svg{width:14px;height:14px;flex:none}
.fr-etq-entreprise{background:color-mix(in srgb,var(--fa-marron) 9%,var(--surface));color:var(--fa-marron)}
.fr-etq-campus{background:var(--brand-50);color:var(--brand-800)}
.fr-etq-etudiant{background:var(--fa-beige-clair);color:var(--brand-700)}
body[data-theme="dark"] .fr-etq-entreprise{color:var(--fa-beige)}
.fr-cel{display:flex;flex-direction:column;gap:6px;min-height:56px;padding:6px;border-radius:10px;background:var(--fa-blanc)}
.fr-cel-entreprise{background:color-mix(in srgb,var(--fa-marron) 5%,var(--fa-blanc))}
.fr-cel-campus{background:var(--fa-blanc)}
.fr-cel-etudiant{background:color-mix(in srgb,var(--fa-beige) 25%,var(--fa-blanc))}
.fr-col2 .fr-mois{padding:2px 4px}
.fr-cel .fr-plus{opacity:0;transition:opacity .12s;height:24px;margin-top:auto}
.fr-cel:hover .fr-plus,.fr-cel .fr-plus:focus-visible{opacity:1}
@media (hover:none){ .fr-cel .fr-plus{opacity:.6} }
.fr-puce-entreprise{background:color-mix(in srgb,var(--fa-marron) 9%,var(--surface));color:var(--fa-marron)}
.fr-puce-campus{background:var(--brand-50);color:var(--brand-800)}
.fr-puce-etudiant{background:var(--fa-beige-clair);color:var(--brand-700)}
/* Quatre cases */
.fr-dates{grid-template-columns:repeat(4,minmax(0,1fr))}
.fr-case-t{display:inline-flex;align-items:center;gap:6px}
.fr-case-t > svg{width:13px;height:13px}
.fr-case-off{background:var(--surface);border-style:dashed}
.fr-pp{display:flex;flex-direction:column;gap:2px;width:100%}
.fr-pp-l{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:6px;align-items:center}
.fr-pp-l .cf-b{width:24px;height:24px}
.fr-cal-g button.plan{box-shadow:inset 0 0 0 2px var(--brand-700)}
.fr-cal-g button.prep{box-shadow:inset 0 0 0 2px var(--fa-marron)}
@media (max-width:1180px){ .fr-dates{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .fr-dates{grid-template-columns:minmax(0,1fr)} .fr-portee-c,.fr-portee-c .select{width:100%} .fr-etiquettes{width:70px} .fr-etq b{font-size:.62rem} }

/* ══════════ L'ÉTAPE EN DEUX PAGES (9 oct. 2026) ══════════
   « Une tâche, c'est deux pages : à gauche ouverture, échéance, les
   réglages ; à droite ce qu'ils sont censés effectuer » (Théo). La page de
   gauche reprend les cartes du panneau d'une étape (.fep-carte). */
.fr-pages{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:16px;align-items:start}
.fr-page{min-width:0;display:flex;flex-direction:column;gap:10px}
.fr-page-g{padding:12px;border-radius:14px;background:var(--fa-blanc);border:1px solid var(--border)}
.fr-page-t{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);padding:2px 2px 0}
.fr-page-t svg{width:14px;height:14px;color:var(--brand-700)}
.fr-carte-g{margin:0}
.fr-carte-g .fr-g-zone{width:100%;resize:none;font-size:.86rem}
.fr-carte-g .cf-pn-g{padding-top:10px;gap:6px}
.fr-carte-g .cf-pn-g:first-child{padding-top:0}
.fr-carte-g .cf-pn-gt{font-size:.66rem}
.fr-carte-g .cf-note{margin:0;font-size:.8rem}
.fr-page-g .fr-dates{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fr-page-g .fr-case{padding:9px 10px;gap:6px}
.fr-page-g .fr-case:nth-child(n+3){grid-column:1 / -1}
.fr-page-g .fr-date{font-size:.88rem;padding:6px 10px}
.fr-page-d .cf-atelier{grid-template-columns:minmax(0,1fr) 250px;gap:12px}
.fr-page-d .cf-pn-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.cf-onglets-seul{background:none;padding:0}
.cf-onglets-seul .cf-onglet{justify-content:flex-start;padding:4px 2px;box-shadow:none;background:none;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);cursor:default}
@media (max-width:1280px) and (min-width:1001px){
  .fr-page-d .cf-atelier{grid-template-columns:minmax(0,1fr)}
  .fr-page-d .cf-panneau{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:74vh;z-index:500;border-radius:18px 18px 0 0;
    box-shadow:var(--sh-lg);transform:translateY(105%);transition:transform .22s var(--ease)}
  .fr-page-d .cf-pn-ouvert .cf-panneau{transform:none}
  .fr-page-d .cf-pn-fermer{display:inline-flex}
  .fr-page-d .cf-etroit{display:inline-flex}
  .fr-page-d .cf-pn-tuiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1100px){ .fr-pages{grid-template-columns:minmax(0,1fr)} }
.fr-date{white-space:nowrap}
.fr-page-g .fr-date small{display:none}
.fr-page-g .fr-case-l{font-size:.74rem}

/* ── La première page de la tâche, au-dessus du questionnaire (9 oct. 2026) ── */
.fr-presentation{display:flex;flex-direction:column;gap:8px}
.fr-pres-t{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.fr-pres-t svg{width:14px;height:14px;color:var(--brand-700)}
.fr-pres-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.fr-pres-c{appearance:none;font:inherit;color:inherit;text-align:left;cursor:pointer;margin:0;width:100%;transition:border-color .12s,box-shadow .12s}
.fr-pres-c:hover{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-50)}
.fr-pres-c p{margin:0;white-space:pre-line;color:var(--ink-2)}
.fr-pres-vide{border-style:dashed}
.fr-pres-vide p{color:var(--ink-mute);font-style:italic}

/* ══════════ Missions : pôle, importance, liée à (9 oct. 2026) ══════════ */
.mi-seg{display:flex;flex-wrap:wrap;gap:4px;width:100%}
.mi-seg .seg-b{display:inline-flex;align-items:center;gap:6px}
.mi-seg .seg-b svg{width:14px;height:14px}
.mi-cible{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:12px;background:var(--fa-blanc);border:1px solid var(--border);margin-bottom:14px}
.mi-cible .field:last-child{margin-bottom:0}
.mi-etus{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto;margin-top:8px}
.mi-etu{appearance:none;display:flex;align-items:baseline;justify-content:space-between;gap:10px;text-align:left;padding:8px 11px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface);font:inherit;font-size:.86rem;color:var(--ink);cursor:pointer}
.mi-etu small{font-size:.74rem;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.mi-etu:hover{border-color:var(--brand)}
.mi-etu.on{background:var(--brand-50);border-color:var(--brand);box-shadow:inset 3px 0 0 var(--brand)}
.kb-pastilles{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 4px}
.kb-imp,.kb-pole{display:inline-flex;align-items:center;gap:4px;font-size:.66rem;font-weight:800;padding:2px 7px;border-radius:999px}
.kb-imp svg,.kb-pole svg{width:11px;height:11px}
.kb-imp-1{background:var(--danger-soft);color:var(--danger-ink)}
.kb-imp-2{background:var(--brand-50);color:var(--brand-800)}
.kb-pole{background:var(--bg-2);color:var(--ink-soft)}
.btn-filtre-on{border-color:var(--brand);background:var(--brand-50);color:var(--brand-800)}
.mi-seg{border-radius:14px;height:auto}

/* ── Le formulaire d'une mission, en trois temps (9 oct. 2026, refonte) ── */
.mi-etape{display:flex;align-items:center;gap:9px;margin:4px 0 10px}
.mi-etape b{font-size:.9rem;font-weight:800}
.mi-num{width:22px;height:22px;border-radius:50%;background:var(--fa-marron);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex:none}
body[data-theme="dark"] .mi-num{background:var(--fa-beige);color:var(--fa-marron)}
#mi-suite .mi-etape{margin-top:18px}
.mi-cartes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.mi-carte{appearance:none;display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 6px;border:1.5px solid var(--border);border-radius:14px;
  background:var(--surface);font:inherit;font-size:.82rem;font-weight:800;color:var(--ink-2);cursor:pointer;transition:border-color .12s,background .12s}
.mi-carte svg{width:22px;height:22px;color:var(--brand-700)}
.mi-carte:hover{border-color:var(--brand)}
.mi-carte.on{border-color:var(--brand);background:var(--brand-50);color:var(--ink);box-shadow:0 0 0 2px var(--brand-100)}
.mi-cible{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:var(--fa-blanc);border:1px solid var(--border);margin-bottom:6px}
.mi-cible > label{font-size:.76rem;font-weight:800;color:var(--ink-soft)}
.mi-pastilles{display:flex;flex-wrap:wrap;gap:6px}
.mi-pas{appearance:none;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border-2);border-radius:999px;background:var(--surface);
  font:inherit;font-size:.8rem;font-weight:700;color:var(--ink-2);cursor:pointer}
.mi-pas svg{width:13px;height:13px;color:var(--brand-700)}
.mi-pas:hover{border-color:var(--brand)}
.mi-pas.on{background:var(--brand);border-color:var(--brand);color:var(--fa-marron)}
.mi-pas.on svg{color:var(--fa-marron)}
.mi-imp .mi-imp-2.on{background:var(--brand-100);border-color:var(--brand);color:var(--brand-800)}
.mi-imp .mi-imp-1.on{background:var(--danger);border-color:var(--danger);color:#fff}
.mi-date{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mi-date .input{width:auto;flex:none}
@media (max-width:560px){ .mi-cartes{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ══════════ MISSIONS DU SIÈGE (9 oct. 2026) ══════════ */
.kb-card.kb-siege{border-left:4px solid var(--info,#2F6FB3)}
.kb-siege-p{display:inline-flex;align-items:center;gap:4px;font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:999px;
  background:var(--info-soft,#E6F0FA);color:var(--info-ink,#1F4E80)}
.kb-siege-p svg{width:11px;height:11px}
.mi-cartes.mi-cartes-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ms-pole-moi{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:.78rem;font-weight:800;color:var(--info-ink,#1F4E80);
  padding:4px 11px;border-radius:999px;background:var(--info-soft,#E6F0FA)}
.ms-pole-moi svg{width:14px;height:14px}
.ms-pole-f{margin-top:0;align-self:flex-start}
.ms-filtres{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ms-filtre{appearance:none;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--border-2);border-radius:999px;background:var(--surface);
  font:inherit;font-size:.8rem;font-weight:700;color:var(--ink-2);cursor:pointer}
.ms-filtre em{font-style:normal;font-size:.72rem;font-weight:800;color:var(--ink-mute)}
.ms-filtre.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.ms-filtre.on em{color:var(--surface)}
.ms-filtre.rouge em{color:var(--danger)}
.ms-tab-w{padding:0;overflow:auto;max-height:70vh}
.ms-tab{border-collapse:separate;border-spacing:0;font-size:.82rem;min-width:100%}
.ms-tab thead th{position:sticky;top:0;z-index:2;background:var(--surface);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-soft);padding:10px 8px;border-bottom:2px solid var(--brand);text-align:center;white-space:nowrap}
.ms-tab .ms-th-m,.ms-tab .ms-td-m{position:sticky;left:0;z-index:1;background:var(--surface);text-align:left;min-width:260px;max-width:340px}
.ms-tab thead .ms-th-m{z-index:3}
.ms-th-c span{display:inline-block;writing-mode:vertical-rl;transform:rotate(180deg);max-height:110px;overflow:hidden;text-overflow:ellipsis}
.ms-tab td,.ms-tab tbody th{padding:8px;border-bottom:1px solid var(--border);text-align:center;vertical-align:middle}
.ms-titre{appearance:none;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:0}
.ms-titre b{font-size:.86rem;font-weight:800;line-height:1.3}
.ms-titre:hover b{text-decoration:underline}
.ms-tags{display:flex;flex-wrap:wrap;gap:4px}
.ms-tags i{font-style:normal}
.ms-ech{white-space:nowrap;color:var(--ink-soft);font-weight:600}
.ms-av{white-space:nowrap}
.ms-av-n{display:block;font-weight:800;font-size:.8rem}
.ms-barre{display:block;width:70px;height:5px;border-radius:4px;background:var(--bg-2);margin:4px auto 0;overflow:hidden}
.ms-barre i{display:block;height:100%;background:var(--ok)}
.ms-c{appearance:none;width:28px;height:28px;border-radius:8px;border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font:inherit}
.ms-c svg{width:14px;height:14px}
.ms-fait{background:var(--ok-soft);color:var(--ok-ink)}
.ms-afaire{background:var(--bg-2);color:var(--ink-soft)}
.ms-planifie{background:var(--brand-50);color:var(--brand-800)}
.ms-retard{background:var(--danger-soft);color:var(--danger-ink)}
.ms-probleme{background:var(--danger);color:#fff}
.ms-c-in{width:22px;height:22px;margin-right:6px;vertical-align:middle;cursor:default}
.ms-rien{color:var(--ink-mute)}
.ms-retiree{opacity:.55}
.ms-aucune{color:var(--ink-mute);padding:22px!important}
.ms-legende{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:.76rem;color:var(--ink-soft)}
.ms-legende span{display:inline-flex;align-items:center;gap:6px}
.ms-legende .ms-c{width:20px;height:20px;cursor:default}
.ms-vide{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px}
.ms-vide > svg{width:28px;height:28px;color:var(--brand-700)}
.ms-campus-l{display:flex;flex-direction:column;gap:4px;margin-top:12px;max-height:46vh;overflow:auto}
.ms-cl{appearance:none;display:grid;grid-template-columns:28px 120px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface);font:inherit;font-size:.82rem;text-align:left;cursor:pointer}
.ms-cl:hover{border-color:var(--brand)}
.ms-cl span{color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-cl em{font-style:normal;font-size:.74rem;font-weight:700;color:var(--ink-mute)}
.ms-fil{display:flex;flex-direction:column;gap:8px;margin:14px 0 10px;max-height:34vh;overflow:auto}
.ms-msg{padding:8px 11px;border-radius:12px;font-size:.84rem;max-width:88%}
.ms-msg-campus{background:var(--bg-2);align-self:flex-start}
.ms-msg-pole{background:var(--info-soft,#E6F0FA);align-self:flex-end}
.ms-msg-pb{background:var(--danger-soft);border:1px solid var(--danger)}
.ms-msg-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:.74rem}
.ms-msg-t span{color:var(--ink-soft)}
.ms-msg-t small{color:var(--ink-mute);margin-left:auto}
.ms-msg p{margin:4px 0 0;white-space:pre-line}
.ms-repondre{display:flex;flex-direction:column;gap:8px}
.ms-rep-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ms-report{display:inline-flex;gap:6px;align-items:center}
.ms-report .input{width:auto}
.sg-pb{color:var(--danger-ink)}
.ms-confier{width:auto;min-width:200px;padding:5px 28px 5px 9px;font-size:.84rem}
.ms-campus-choix{margin-top:8px}
.ms-apercu{margin-top:10px}
.ms-ap{display:flex;flex-direction:column;gap:4px;max-height:280px;overflow:auto;padding:8px;border-radius:12px;background:var(--fa-blanc);border:1px solid var(--border)}
.ms-ap-l{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;align-items:center;padding:4px 6px;border-radius:8px}
.ms-ap-l .select{padding:6px 28px 6px 9px;font-size:.82rem}
.ms-ap-repli{background:var(--warn-soft)}
.ms-ap-note{grid-column:2;display:inline-flex;align-items:center;gap:5px;font-size:.72rem;color:var(--warn-ink)}
.ms-ap-note svg{width:12px;height:12px}
.ms-ap-alerte{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:.8rem;font-weight:700;color:var(--warn-ink)}
.ms-ap-alerte svg{width:14px;height:14px}
.ms-todo-t{margin-bottom:12px}
@media (max-width:560px){ .ms-ap-l{grid-template-columns:1fr} .ms-cl{grid-template-columns:28px minmax(0,1fr)} .ms-cl span,.ms-cl em{grid-column:2} }

/* Missions aux campus sur téléphone (9 oct. 2026) : les deux onglets et
   « Envoyer » tiennent sur la largeur, et les cartes de la to do des
   campus (sans pastille de date) ne gardent pas la colonne vide. */
@media (max-width: 720px){
  .page[data-vue="envoyees"] .ph-actions{flex-wrap:wrap;gap:8px}
  .page[data-vue="envoyees"] .ph-actions .seg{flex:1 1 100%}
  .page[data-vue="envoyees"] .ph-actions .seg-b{flex:1;justify-content:center}
  .page[data-vue="envoyees"] #ms-envoyer{flex:1 1 100%;justify-content:center}
  .kanban.ms-todo-k .kb-card{display:flex;flex-direction:column;align-items:stretch;gap:4px}
}

/* ⭐ « Le siège attend » (9 oct. 2026) : les missions du siège hautes ou
   urgentes, encadrées en tête de « À faire ». Orange pour haute, rouge
   dès qu'une est urgente. */
.kb-presse-cadre{border:2px solid var(--brand);background:var(--brand-50);border-radius:14px;padding:8px 7px 7px;margin:0 0 10px;
  display:flex;flex-direction:column;gap:7px;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent)}
.kb-presse-cadre.kb-presse-n3{border-color:var(--fa-marron,#2E2017);background:var(--bg-2);box-shadow:none}
.kb-presse-n3 .kb-presse-t{color:var(--ink)}
.kb-presse-n3 .kb-presse-t span{background:var(--ink)}
.kb-presse-cadre.kb-presse-n1{border-color:var(--danger);background:var(--danger-soft);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 14%,transparent);
  animation:kbPresse 2.4s ease-in-out infinite}
@keyframes kbPresse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--danger) 6%,transparent)}}
@media (prefers-reduced-motion: reduce){.kb-presse-cadre.kb-presse-n3{border-color:var(--fa-marron,#2E2017);background:var(--bg-2);box-shadow:none}
.kb-presse-n3 .kb-presse-t{color:var(--ink)}
.kb-presse-n3 .kb-presse-t span{background:var(--ink)}
.kb-presse-cadre.kb-presse-n1{animation:none}}
.kb-presse-t{display:flex;align-items:center;gap:6px;padding:0 4px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--brand-800)}
.kb-presse-n1 .kb-presse-t{color:var(--danger-ink)}
.kb-presse-t svg{width:14px;height:14px}
.kb-presse-t span{margin-left:auto;color:#fff;background:var(--brand-800);border-radius:999px;padding:0 7px;font-size:.7rem;line-height:18px}
.kb-presse-n1 .kb-presse-t span{background:var(--danger)}
.kb-presse-cadre .kb-card{margin:0!important}
.kb-card.kb-presse{border:2px solid var(--brand)}
.kb-card.kb-presse-1{border-color:var(--danger)}
.kb-campus-p{display:inline-flex;align-items:center;gap:4px;font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--bg-2);color:var(--ink)}
.kb-campus-p svg{width:11px;height:11px}
.ms-todo-c{cursor:pointer}
.ms-todo-t{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* Envoyer : deux grandes cartes pour la portée. */
.ms-portee{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.ms-portee-b{appearance:none;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--border-2);border-radius:14px;background:var(--surface);
  font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.ms-portee-b > svg{width:22px;height:22px;flex:none;color:var(--brand-700)}
.ms-portee-b span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ms-portee-b b{font-size:.92rem;font-weight:800}
.ms-portee-b small{font-size:.76rem;color:var(--ink-soft)}
.ms-portee-b.on{border-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.ms-date{max-width:220px}
@media (max-width: 720px){
  .ms-portee{grid-template-columns:1fr}
  .ms-date{max-width:none}
}

/* To do : titre, jour et filtres sur UNE ligne sur ordinateur (Théo,
   9 oct. 2026 : « dans l'alignement de la to-do list aujourd'hui avec le
   calendrier, pas en dessous »). */
@media (min-width: 721px){
  .page[data-vue="agenda"] .page-h{flex-wrap:nowrap;align-items:center}
  .page[data-vue="agenda"] .page-h .todo-titre{flex:none;flex-wrap:nowrap}
  .page[data-vue="agenda"] .page-h .ph-actions{flex:1 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end;row-gap:8px}
}

/* ═══════════ MISSIONS DU SIÈGE, V2 (9 oct. 2026 — maquettes A2 / B3 / C1 / D1) ═══════════ */
/* A2 : une couleur douce par pôle, portée par `--pc`. */
.pole-gestion{--pc:#3B6FB6}.pole-developpement{--pc:#2E9D6A}.pole-social{--pc:#139AA0}.pole-direction{--pc:#2E2017}
.pole-pedagogie{--pc:#7A55C7}.pole-finances{--pc:#B88A00}.pole-rh{--pc:#D9603F}.pole-communication{--pc:#D2468A}
body[data-theme="dark"] .pole-gestion{--pc:#7FA8E6}body[data-theme="dark"] .pole-developpement{--pc:#5CC796}
body[data-theme="dark"] .pole-social{--pc:#4CC6CB}body[data-theme="dark"] .pole-direction{--pc:#E9DCCB}
body[data-theme="dark"] .pole-pedagogie{--pc:#A98BE8}body[data-theme="dark"] .pole-finances{--pc:#E0B935}
body[data-theme="dark"] .pole-rh{--pc:#F08C70}body[data-theme="dark"] .pole-communication{--pc:#EE7DB3}

/* B3 : la carte du siège — bordée du pôle, cachet « SIÈGE », jours restants en gros. */
.kb-card.kb-sg{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;border:1.5px solid var(--pc);border-left-width:1.5px;
  padding:10px 11px 10px;background:var(--surface)}
.kb-card.kb-sg > b{font-size:.9rem;font-weight:800;line-height:1.3;padding-right:4px}
.kb-sg-cachet{position:absolute;top:0;right:0;background:var(--pc);color:#fff;font-size:.6rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 9px 4px 11px;border-bottom-left-radius:10px}
body[data-theme="dark"] .kb-sg-cachet{color:#1C1611}
.kb-sg-pole{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;color:var(--pc);padding-right:56px}
.kb-sg-pole i{width:8px;height:8px;border-radius:50%;background:var(--pc);flex:none}
.kb-sg-bas{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.kb-sg-qui{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;color:var(--ink-soft);font-weight:600;min-width:0}
.kb-sg-eq{background:var(--bg-2);color:var(--ink-soft)}
.kb-sg-eq svg{width:11px;height:11px}
.kb-sg-j{margin-left:auto;font-size:1.05rem;font-weight:900;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.kb-sg-j.o{color:var(--brand-800)}
.kb-sg-j.r{color:var(--danger)}
.kb-card.kb-sg-urg{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 22%,transparent)}
.kb-card.kb-sg-haute{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.kb-imp.kb-sg-norm{background:var(--bg-2);color:var(--ink-soft)}
.kb-imp.kb-sg-ok{background:var(--ok-soft);color:var(--ok-ink)}
.kb-imp.kb-sg-attente{background:var(--brand-50);color:var(--brand-800)}
.kb-sg-mot{display:flex;gap:7px;align-items:flex-start;background:color-mix(in srgb,var(--pc) 9%,var(--surface));border-left:3px solid var(--pc);
  border-radius:0 8px 8px 0;padding:6px 8px;font-size:.76rem;line-height:1.35}
.kb-sg-mot svg{width:13px;height:13px;flex:none;margin-top:1px;color:var(--pc)}
.kb-sg-mot em{display:block;font-style:normal;font-size:.62rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--pc);margin-bottom:1px}
.kb-sg-mot-l{margin:10px 0;font-size:.86rem}
.kb-card.kb-sg-renvoi{border-style:dashed}
.kb-siege-pc{background:color-mix(in srgb,var(--pc) 13%,var(--surface));color:var(--pc)}
@media(max-width:720px){
  .kanban .kb-card.kb-sg{display:flex;flex-direction:column;align-items:stretch;padding:10px 11px}
}

/* D1 : le Suivi — Pôle · Mission · Importance · Échéance · Statut · Ville. */
.ms-barre-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ms-barre-h .ms-filtres{margin:0}
.ms-sel{display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft)}
.ms-sel svg{width:15px;height:15px}
.ms-sel .select{min-width:170px}
.ms-filtre.chaud{border-color:var(--brand);color:var(--brand-800)}
.ms-filtre.chaud em{color:var(--brand-800)}
.ms-filtre.on.chaud{background:var(--brand);border-color:var(--brand);color:#2E2017}
.ms-filtre.on.chaud em{color:#2E2017}
.ms-tab2{width:100%}
.ms-tab2 td,.ms-tab2 thead th{text-align:left}
.ms-tab2 thead th{padding:10px 12px}
.ms-tab2 td{padding:9px 12px}
.ms-tab2 .ms-ligne{cursor:pointer;transition:background .1s}
.ms-tab2 .ms-ligne:hover,.ms-tab2 .ms-ligne:focus-visible{background:var(--bg-2);outline:none}
.ms-tab2 .ms-grp-t th{position:static;background:transparent;text-align:left;padding:14px 12px 6px;border-bottom:none;font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.ms-tab2 .ms-grp-t th span{display:inline-flex;align-items:center;gap:6px}
.ms-tab2 .ms-grp-t th svg{width:14px;height:14px}
.ms-tab2 .ms-grp-t th em{font-style:normal;margin-left:8px;background:var(--bg-2);border-radius:99px;padding:1px 8px;color:var(--ink-soft)}
.ms-grp-1 .ms-grp-t th{color:var(--danger-ink)}
.ms-grp-2 .ms-grp-t th{color:var(--brand-800)}
.ms-grp-3 .ms-grp-t th{color:var(--ink-soft)}
.ms-grp-1 .ms-ligne td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
.ms-grp-2 .ms-ligne td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
.ms-pole{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;font-size:.74rem;font-weight:800;white-space:nowrap;
  background:color-mix(in srgb,var(--pc) 13%,var(--surface));color:var(--pc)}
.ms-pole i{width:9px;height:9px;border-radius:3px;background:var(--pc);flex:none}
.ms-mis{min-width:220px}
.ms-mis b{display:block;font-size:.86rem;font-weight:800;line-height:1.3}
.ms-mis small{display:block;font-size:.72rem;color:var(--ink-mute);margin-top:2px}
.ms-tab2 .ms-ech{white-space:nowrap}
.ms-j{display:inline-block;margin-left:7px;font-size:.7rem;font-weight:900;padding:1px 6px;border-radius:6px;background:var(--bg-2);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ms-j.o{background:var(--brand-50);color:var(--brand-800)}
.ms-j.r{background:var(--danger-soft);color:var(--danger-ink)}
.ms-ville{font-weight:700;white-space:nowrap}
.ms-st{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:800;white-space:nowrap}
.ms-st svg{width:12px;height:12px}
.ms-st-afaire{background:var(--bg-2);color:var(--ink-soft)}
.ms-st-planifie{background:var(--brand-50);color:var(--brand-800)}
.ms-st-retard{background:var(--danger-soft);color:var(--danger-ink)}
.ms-st-probleme{background:var(--danger);color:#fff}
.ms-st-renvoyee{background:var(--fa-beige,#FBDEAA);color:#2E2017}
.ms-st-avalider{background:var(--brand);color:#2E2017}
.ms-st-valide{background:var(--ok-soft);color:var(--ok-ink)}
.ms-valide{background:var(--ok-soft);color:var(--ok-ink)}
.ms-avalider{background:var(--brand);color:#2E2017}
.ms-renvoyee{background:var(--fa-beige,#FBDEAA);color:#2E2017}
.ms-entete{margin-bottom:12px}
.ms-ville-p{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--bg-2)}
.ms-ville-p svg{width:12px;height:12px}
.ms-rep-l{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.ms-rep-date .input{max-width:170px}
.ms-b-renvoi{border-color:var(--brand);color:var(--brand-800)}
.ms-msg-ok{background:var(--ok-soft)}
@media (max-width:720px){
  .ms-sel,.ms-sel .select{flex:1 1 100%;min-width:0}
}
.kb-sg .kb-campus-p{align-self:flex-start}
/* Suivi sur téléphone : chaque ligne devient une petite fiche
   (pôle + statut, la mission, puis importance · échéance · ville). */
@media (max-width:720px){
  .ms-tab2,.ms-tab2 tbody{display:block}
  .ms-tab2 thead{display:none}
  .ms-tab2 .ms-grp-t{display:block}
  .ms-tab2 .ms-grp-t th{display:block;padding:12px 4px 6px}
  .ms-tab2 .ms-ligne{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"pole st" "mis mis" "imp ech";
    gap:6px 8px;padding:10px 12px;border-bottom:1px solid var(--border)}
  .ms-tab2 .ms-ligne td{display:block;padding:0;border:0;box-shadow:none!important}
  .ms-tab2 .ms-ligne td:nth-child(1){grid-area:pole}
  .ms-tab2 .ms-ligne td:nth-child(2){grid-area:mis;min-width:0}
  .ms-tab2 .ms-ligne td:nth-child(3){grid-area:imp}
  .ms-tab2 .ms-ligne td:nth-child(4){grid-area:ech;justify-self:end;align-self:center;font-size:.8rem}
  .ms-tab2 .ms-ligne td:nth-child(5){grid-area:st;justify-self:end}
  .ms-tab2 .ms-ligne td:nth-child(6){display:none}
  .ms-tab2 .ms-mis small::before{content:attr(data-ville)}
  .ms-grp-1 .ms-ligne{box-shadow:inset 3px 0 0 var(--danger)}
  .ms-grp-2 .ms-ligne{box-shadow:inset 3px 0 0 var(--brand)}
  .ms-mis{min-width:0}
  .ms-tab-w{max-height:none}
}
.ms-tab2 .ms-mis small::before{content:none}
@media (max-width:720px){ .ms-tab2 .ms-mis small::before{content:attr(data-ville);font-weight:800;color:var(--ink)} }

/* To do : TOUT sur une ligne, en plus petit (Théo, 9 oct. 2026, 3e passe) —
   titre, jour, calendrier, équipe, type, délai, campus/siège, ajouter. */
@media (min-width: 721px){
  .page[data-vue="agenda"] .page-h{flex-wrap:nowrap;align-items:center;gap:10px;margin-bottom:16px}
  .page[data-vue="agenda"] .page-h .h1{font-size:1.45rem;white-space:nowrap}
  .page[data-vue="agenda"] .todo-titre{gap:8px;flex:none;flex-wrap:nowrap}
  .page[data-vue="agenda"] #zone-jour{gap:5px}
  .page[data-vue="agenda"] .jour-pil{height:30px}
  .page[data-vue="agenda"] .jour-pil .jp-fl{width:26px}
  .page[data-vue="agenda"] .jour-pil .jp-c{min-width:0;padding:0 4px;font-size:.74rem}
  .page[data-vue="agenda"] .jp-cal{width:30px;height:30px}
  .page[data-vue="agenda"] .page-h .ph-actions{flex:1 1 auto;min-width:0;flex-wrap:nowrap;justify-content:flex-end;gap:6px}
  .page[data-vue="agenda"] .page-h .ph-actions .btn{height:30px;padding:0 9px;font-size:.74rem;gap:5px;white-space:nowrap;flex:none}
  .page[data-vue="agenda"] .page-h .ph-actions .btn svg{width:13px;height:13px}
  .page[data-vue="agenda"] .filtre-qui{flex:0 1 auto;gap:4px;flex-wrap:nowrap;min-width:0}
  .page[data-vue="agenda"] .filtre-qui .fq-tous{height:30px;padding:0 10px;font-size:.72rem}
  .page[data-vue="agenda"] .filtre-qui .ava{width:24px;height:24px;font-size:.6rem}
}
/* Sur un écran moyen, on raccourcit les libellés plutôt que de passer à la ligne. */
@media (min-width: 721px) and (max-width: 1360px){
  .page[data-vue="agenda"] .jour-pil .jp-c .sur-ordi{display:none}
  .page[data-vue="agenda"] #btn-ajouter .sur-ordi{display:none}
}
@media (min-width: 721px) and (max-width: 1180px){
  .page[data-vue="agenda"] .page-h{flex-wrap:wrap}
  .page[data-vue="agenda"] .page-h .ph-actions{flex-basis:100%;justify-content:flex-start}
}

/* ═══════════ SUIVI DES MISSIONS DU SIÈGE, V3 (9 oct. 2026) ═══════════
   Un vrai tableau quadrillé, en-tête marron souligné d'orange, UNE
   seule forme d'étiquette (rectangle arrondi) pour tout : pôle,
   importance, délai, statut, ville. */
.ms-et{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:7px;font-size:.74rem;font-weight:800;
  white-space:nowrap;line-height:1;border:1px solid transparent}
.ms-et svg{width:13px;height:13px;flex:none}
.ms-et-urg{background:var(--danger);color:#fff}
.ms-et-haute{background:#F69D00;color:#2E2017}
.ms-et-norm{background:#FBDEAA;color:#2E2017}
.ms-et-j{height:22px;padding:0 7px;font-size:.7rem;background:var(--bg-2);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ms-et-j.o{background:var(--brand-50);color:var(--brand-800);border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.ms-et-j.r{background:var(--danger-soft);color:var(--danger-ink);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.ms-et-pole{background:color-mix(in srgb,var(--pc) 14%,var(--surface));color:var(--pc);border-color:color-mix(in srgb,var(--pc) 40%,transparent)}
.ms-et-ville{background:var(--bg-2);color:var(--ink)}
.ms-st2-afaire{background:var(--surface);color:var(--ink-soft);border-color:var(--border-2)}
.ms-st2-planifie{background:var(--brand-50);color:var(--brand-800);border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
.ms-st2-retard{background:var(--danger-soft);color:var(--danger-ink);border-color:color-mix(in srgb,var(--danger) 50%,transparent)}
.ms-st2-probleme{background:var(--danger);color:#fff}
.ms-st2-renvoyee{background:#FBDEAA;color:#2E2017;border-color:#E8B45A}
.ms-st2-avalider{background:#F69D00;color:#2E2017}
.ms-st2-valide{background:var(--ok-soft);color:var(--ok-ink);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.ms-entete2{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}

/* La barre : deux menus encadrés + une barre de statuts d'un seul tenant. */
.ms-barre2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ms-sel2{position:relative;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 34px 0 12px;border:1.5px solid var(--border-2);
  border-radius:9px;background:var(--surface);color:var(--ink);font-weight:700;font-size:.82rem;cursor:pointer}
.ms-sel2 > svg{width:15px;height:15px;color:var(--ink-soft);flex:none}
.ms-sel2 > svg:last-child{position:absolute;right:11px;pointer-events:none}
.ms-sel2 select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;padding:0;outline:none;min-width:120px}
.ms-sel2:focus-within{border-color:var(--brand)}
.ms-sel2.ms-sel2-pole{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 10%,var(--surface));color:var(--pc)}
.ms-sel2.ms-sel2-pole > svg{color:var(--pc)}
.ms-seg2{display:inline-flex;border:1.5px solid var(--border-2);border-radius:9px;overflow:hidden;background:var(--surface)}
.ms-seg2-b{appearance:none;border:0;border-right:1px solid var(--border);background:transparent;font:inherit;font-size:.78rem;font-weight:700;color:var(--ink-soft);
  height:35px;padding:0 12px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap}
.ms-seg2-b:last-child{border-right:0}
.ms-seg2-b:hover{background:var(--bg-2);color:var(--ink)}
.ms-seg2-b em{font-style:normal;font-size:.7rem;font-weight:900;min-width:20px;height:20px;padding:0 5px;border-radius:6px;background:var(--bg-2);color:var(--ink-soft);
  display:inline-flex;align-items:center;justify-content:center}
.ms-seg2-traiter em{background:#F69D00;color:#2E2017}
.ms-seg2-retard em{background:var(--danger-soft);color:var(--danger-ink)}
.ms-seg2-b.on{background:#2E2017;color:#FBDEAA}
.ms-seg2-b.on em{background:#FBDEAA;color:#2E2017}

/* Le tableau. */
.ms-cadre2{border:1.5px solid var(--border-2);border-radius:14px;overflow:auto;background:var(--surface);max-height:72vh}
.ms-tab3{width:100%;border-collapse:separate;border-spacing:0;font-size:.84rem}
.ms-tab3 thead th{position:sticky;top:0;z-index:2;background:#2E2017;color:#FBDEAA;text-align:left;font-size:.7rem;font-weight:900;
  letter-spacing:.07em;text-transform:uppercase;padding:12px 14px;border-bottom:3px solid #F69D00;border-right:1px solid rgba(251,222,170,.18);white-space:nowrap}
.ms-tab3 thead th:last-child{border-right:0}
.ms-tab3 td{padding:10px 14px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);vertical-align:middle}
.ms-tab3 td:last-child{border-right:0}
.ms-tab3 tbody tr:last-child td{border-bottom:0}
.ms-tab3 .ms-ligne{cursor:pointer}
.ms-tab3 .ms-ligne:nth-child(even) td:not(.ms-c-pole){background:color-mix(in srgb,#FBDEAA 16%,var(--surface))}
.ms-tab3 .ms-ligne:hover td:not(.ms-c-pole),.ms-tab3 .ms-ligne:focus-visible td:not(.ms-c-pole){background:var(--brand-50)}
.ms-tab3 .ms-ligne:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.ms-c-pole{background:color-mix(in srgb,var(--pc) 11%,var(--surface));box-shadow:inset 5px 0 0 var(--pc);white-space:nowrap;width:1%}
.ms-c-pole span{display:inline-flex;align-items:center;gap:9px;font-weight:800;color:var(--pc);padding-left:4px}
.ms-c-pole i{width:24px;height:24px;border-radius:7px;background:var(--pc);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
body[data-theme="dark"] .ms-c-pole i{color:#1C1611}
.ms-c-pole i svg{width:13px;height:13px}
.ms-tab3 .ms-mis{min-width:240px}
.ms-tab3 .ms-mis b{display:block;font-size:.9rem;font-weight:800;line-height:1.3;color:var(--ink)}
.ms-tab3 .ms-mis small{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;margin-top:3px;font-size:.74rem;color:var(--ink-soft)}
.ms-tab3 .ms-mis small svg{width:12px;height:12px;margin-right:-1px}
.ms-vise{display:inline-flex;align-items:center;gap:4px;color:var(--ink)}
.ms-tab3 .ms-mis small::before{content:none}
.ms-c-imp,.ms-c-st{width:1%;white-space:nowrap}
.ms-c-ech{white-space:nowrap;width:1%}
.ms-c-ech b{font-weight:800;margin-right:8px}
.ms-sans{color:var(--ink-mute);font-weight:700!important}
.ms-c-ville{white-space:nowrap;width:1%}
.ms-c-ville span{display:inline-flex;align-items:center;gap:6px;font-weight:800}
.ms-c-ville svg{width:14px;height:14px;color:var(--ink-mute)}
.ms-tab3 .ms-aucune{text-align:center;color:var(--ink-mute);padding:30px!important}
@media (max-width:720px){
  .ms-sel2{flex:1 1 100%}
  .ms-sel2 select{flex:1}
  .ms-seg2{display:flex;flex-wrap:wrap;width:100%}
  .ms-seg2-b{flex:1 1 33%;justify-content:center;border-bottom:1px solid var(--border)}
  .ms-cadre2{max-height:none}
  .ms-tab3,.ms-tab3 tbody{display:block}
  .ms-tab3 thead{display:none}
  .ms-tab3 .ms-ligne{display:grid;grid-template-columns:1fr auto;grid-template-areas:"pole st" "mis mis" "imp ech";gap:7px 8px;padding:11px 12px;
    border-bottom:1px solid var(--border);box-shadow:inset 5px 0 0 var(--pc,transparent)}
  .ms-tab3 .ms-ligne td{display:block;padding:0;border:0;background:none!important;box-shadow:none;width:auto}
  .ms-tab3 .ms-ligne td:nth-child(1){grid-area:pole}
  .ms-tab3 .ms-ligne td:nth-child(2){grid-area:mis;min-width:0}
  .ms-tab3 .ms-ligne td:nth-child(3){grid-area:imp}
  .ms-tab3 .ms-ligne td:nth-child(4){grid-area:ech;justify-self:end;align-self:center}
  .ms-tab3 .ms-ligne td:nth-child(5){grid-area:st;justify-self:end}
  .ms-tab3 .ms-ligne td:nth-child(6){display:none}
  .ms-tab3 .ms-mis small::before{content:attr(data-ville);font-weight:800;color:var(--ink)}
  .ms-tab3 .ms-mis{min-width:0}
}

/* Envoi : la classe ou l'étudiant visé. */
.ms-lien{display:flex;flex-direction:column;gap:9px;margin-top:12px;padding:12px;border:1.5px dashed var(--border-2);border-radius:12px}
.ms-lien-t{font-size:.78rem;font-weight:800;color:var(--ink)}
.ms-lien .mi-pas svg{width:14px;height:14px}
.ms-lien-rech{max-width:340px}
.ms-etus{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;max-height:220px;overflow:auto}
.ms-etu{appearance:none;text-align:left;font:inherit;display:flex;flex-direction:column;gap:1px;padding:7px 10px;border:1.5px solid var(--border-2);border-radius:9px;
  background:var(--surface);color:var(--ink);cursor:pointer;min-width:0}
.ms-etu b{font-size:.8rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-etu small{font-size:.7rem;color:var(--ink-mute)}
.ms-etu:hover{border-color:var(--ink-mute)}
.ms-etu.on{border-color:#F69D00;background:var(--brand-50)}
.ms-lien-etu{appearance:none;border:0;background:none;padding:0;font:inherit;font-weight:800;color:var(--brand-800);cursor:pointer;display:inline-flex;align-items:center;gap:4px;text-decoration:underline}
.ms-lien-etu svg{width:13px;height:13px}

/* « Quand » : un seul bouton (jour, calendrier, délai). */
.jour-pil .jp-c{display:inline-flex;align-items:center;gap:6px}
.jour-pil .jp-c > svg{width:14px;height:14px;flex:none}
.jour-pil .jp-c > svg:last-child{width:12px;height:12px;opacity:.7}
.jc-racc{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.jc-racc button{height:32px;border-radius:8px;border:1.5px solid var(--border-2);background:var(--surface);font:inherit;font-size:.76rem;font-weight:700;
  color:var(--ink-soft);cursor:pointer;white-space:nowrap}
.jc-racc button:hover{color:var(--ink);border-color:var(--ink-mute)}
.jc-racc button.on{background:#F69D00;border-color:#F69D00;color:#2E2017}
.kb-sg-quand{color:var(--brand-800);font-weight:800}
/* Fiche d'une mission du siège, côté campus. */
.sgf-mission{border:1.5px solid color-mix(in srgb,var(--pc) 40%,var(--border));border-left:5px solid var(--pc);border-radius:12px;padding:12px 14px;
  background:color-mix(in srgb,var(--pc) 5%,var(--surface));display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.sgf-detail{margin:0;font-size:.92rem;line-height:1.5;white-space:pre-wrap}
.sgf-faits{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px 16px}
.sgf-faits > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.sgf-faits span{font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute)}
.sgf-faits b{font-size:.86rem;font-weight:800;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.sgf-faits i.ms-et{font-style:normal}
.sgf-qq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px;margin-bottom:6px}
.sgf-q{display:flex;flex-direction:column;gap:6px;padding:12px;border:1.5px solid var(--border-2);border-radius:12px;background:var(--surface);min-width:0}
.sgf-q label{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:800;color:var(--ink)}
.sgf-q label svg{width:14px;height:14px;color:var(--brand-700)}
.sgf-quand-l{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sgf-quand-l input[type=date]{flex:1 1 140px;min-width:0}
.sgf-quand-l input[type=time]{flex:0 0 110px}
.ms-st2-termine{background:var(--ok-soft);color:var(--ok-ink);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
@media (max-width:720px){ .sgf-qq{grid-template-columns:1fr} }

/* Suivi : menus avec leurs nombres, étape + validation (9 oct. 2026, 4e passe). */
.ms-sel2.ms-sel2-on{border-color:#2E2017;background:color-mix(in srgb,#FBDEAA 35%,var(--surface))}
.ms-sel2.ms-sel2-chaud:not(.ms-sel2-on){border-color:#F69D00}
.ms-sel2.ms-sel2-chaud > svg:first-child{color:#F69D00}
.ms-total{margin-left:auto;font-size:.76rem;font-weight:800;color:var(--ink-mute);white-space:nowrap}
.ms-c-st-l{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.ms-c-val{white-space:nowrap;width:1%}
.ms-val-vide{color:var(--ink-mute);font-weight:800}
@media (max-width:720px){
  .ms-total{margin-left:0}
  .ms-tab3 .ms-ligne{grid-template-areas:"pole val" "mis mis" "imp ech" "st st"}
  .ms-tab3 .ms-ligne td:nth-child(5){grid-area:st;justify-self:start}
  .ms-tab3 .ms-ligne td:nth-child(6){display:block;grid-area:val;justify-self:end}
  .ms-tab3 .ms-ligne td.ms-c-val-vide{display:none}
  .ms-tab3 .ms-ligne td:nth-child(7){display:none}
  .ms-c-st-l{flex-direction:row;flex-wrap:wrap}
}
.jc-racc button{white-space:normal;height:auto;min-height:30px;padding:4px 6px;font-size:.72rem;line-height:1.15}
.jc-racc button:last-child{grid-column:1/-1}

/* Suivi : importance, échéance, étape et validation CENTRÉES, étiquettes
   de même largeur (Théo, 9 oct. 2026). */
.ms-tab3 thead th:nth-child(n+3):nth-child(-n+6){text-align:center}
.ms-tab3 td.ms-c-imp,.ms-tab3 td.ms-c-ech,.ms-tab3 td.ms-c-st,.ms-tab3 td.ms-c-val{text-align:center}
.ms-tab3 .ms-c-st-l{align-items:center}
.ms-tab3 .ms-c-imp .ms-et,.ms-tab3 .ms-c-st .ms-et,.ms-tab3 .ms-c-val .ms-et{min-width:112px;justify-content:center;height:28px;font-size:.78rem}
.ms-tab3 .ms-c-st .ms-et + .ms-et{height:22px;min-width:0;font-size:.68rem}
.ms-tab3 .ms-c-ech b{margin-right:6px}
.ms-b-suppr{color:var(--danger-ink)}
.ms-suppr-z{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding:12px;border:1.5px solid var(--danger);border-radius:12px;background:var(--danger-soft)}
.ms-suppr-z > b{display:inline-flex;align-items:center;gap:7px;color:var(--danger-ink);font-size:.86rem}
.ms-suppr-z > b svg{width:15px;height:15px}

/* To do : TOUT en rectangles arrondis, comme les boutons (Théo, 9 oct.
   2026) — Toute l'équipe et le choix du jour aussi. */
.page[data-vue="agenda"] .filtre-qui .fq-tous{border-radius:8px}
.page[data-vue="agenda"] .jour-pil{border-radius:8px}
.page[data-vue="agenda"] .jour-pil .jp-fl:first-child{border-right:1px solid var(--border)}
.page[data-vue="agenda"] .jour-pil .jp-fl:last-child{border-left:1px solid var(--border)}
.page[data-vue="agenda"] .jour-pil.on .jp-fl{border-color:rgba(46,32,23,.18)}
.jc-racc button:last-child{grid-column:auto}
@media (max-width:720px){
  .ms-tab3 .ms-c-imp .ms-et,.ms-tab3 .ms-c-st .ms-et,.ms-tab3 .ms-c-val .ms-et{min-width:0}
  .ms-tab3 td.ms-c-imp,.ms-tab3 td.ms-c-ech,.ms-tab3 td.ms-c-st,.ms-tab3 td.ms-c-val{text-align:left}
}
.page[data-vue="agenda"] .page-h .ph-actions .btn{border-radius:8px}

/* Fiche campus d'une mission du siège : qui + quand sur UNE ligne alignée. */
.sgf-barre{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 120px auto;gap:10px;align-items:end;padding:12px;
  border:1.5px solid var(--border-2);border-radius:12px;background:var(--surface);margin-bottom:12px}
.sgf-c{display:flex;flex-direction:column;gap:6px;min-width:0}
.sgf-c label{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;color:var(--ink)}
.sgf-c label svg{width:13px;height:13px;color:var(--brand-700)}
.sgf-c .select,.sgf-c .input{height:42px;width:100%;min-width:0}
.sgf-c > b{font-size:.9rem;font-weight:800}
.sgf-planifier{height:42px;white-space:nowrap}
.sgf-barre-lu{grid-template-columns:1fr}
.ms-fil:empty{display:none}
@media (max-width:720px){
  .sgf-barre{grid-template-columns:1fr 1fr}
  .sgf-c-qui,.sgf-planifier{grid-column:1/-1}
}
/* Le message au campus ne colle plus à la consigne (Théo, 9 oct. 2026). */
.ms-repondre{margin-top:16px}
.ms-entete2 + .mi-fiche{margin-top:0}

/* ═══ Fenêtres d'une mission du siège : des CADRES, une logique
   (Théo, 9 oct. 2026) — la mission, le retour du campus, la décision. ═══ */
.mx-cadre{border:1.5px solid var(--border-2);border-radius:14px;padding:14px 16px;background:var(--surface);display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.mx-cadre h4{margin:0;display:flex;align-items:center;gap:8px;font-size:.74rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
.mx-cadre h4 svg{width:15px;height:15px}
.mx-mission{border-color:color-mix(in srgb,var(--pc) 45%,var(--border-2));border-left:5px solid var(--pc);background:color-mix(in srgb,var(--pc) 4%,var(--surface))}
.mx-mission h4{color:var(--pc)}
.mx-mission .ms-entete2{margin:0}
.mx-texte{margin:0;font-size:.92rem;line-height:1.5;white-space:pre-wrap}
.mx-faits{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px 16px;padding-top:10px;border-top:1px solid var(--border)}
.mx-faits > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.mx-faits span{font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute)}
.mx-faits b{font-size:.86rem;font-weight:800;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.mx-faits i.ms-et{font-style:normal}
.mx-etat{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.86rem}
.mx-etat > svg{width:18px;height:18px;flex:none}
.mx-etat b{font-size:.95rem;font-weight:900}
.mx-etat > span:last-child{color:var(--ink-soft)}
.mx-etat-ok{color:var(--ok-ink)}
.mx-etat-reserve{color:var(--danger-ink)}
.mx-cr{margin:0;padding:10px 14px;border-left:4px solid var(--border-2);background:var(--bg-2);border-radius:0 10px 10px 0;font-size:.9rem;line-height:1.5;white-space:pre-wrap;color:var(--ink)}
.mx-etat-reserve + .mx-cr{border-left-color:var(--danger);background:var(--danger-soft)}
.mx-renvoi{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:#FBDEAA;color:#2E2017;font-size:.86rem}
.mx-renvoi svg{width:15px;height:15px;flex:none;margin-top:2px}
.mx-renvoi em{display:block;font-style:normal;font-size:.68rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
.mx-decision{border-color:#F69D00;background:color-mix(in srgb,#F69D00 6%,var(--surface))}
.mx-decision h4{color:var(--brand-800)}
.mx-validee{border-color:color-mix(in srgb,var(--ok) 50%,transparent);background:var(--ok-soft)}
.mx-validee h4{color:var(--ok-ink)}
.mx-validee .btn{align-self:flex-start}
.mx-attente{border-style:dashed;background:var(--surface)}
.mx-attente-l{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.86rem;color:var(--ink-soft)}
.mx-choix{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mx-b{appearance:none;display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--border-2);background:var(--surface);
  font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.mx-b > svg{width:20px;height:20px;flex:none}
.mx-b span{display:flex;flex-direction:column;gap:2px;min-width:0}
.mx-b b{font-size:.92rem;font-weight:900}
.mx-b small{font-size:.74rem;color:var(--ink-soft)}
.mx-b-ok > svg{color:var(--ok)}
.mx-b-ok:hover{border-color:var(--ok);background:var(--ok-soft)}
.mx-b-renvoi > svg{color:var(--brand-800)}
.mx-b-renvoi:hover,.mx-b-renvoi.on{border-color:#F69D00;background:var(--brand-50)}
.mx-terminer .mx-b-renvoi > svg{color:var(--danger)}
.mx-terminer .mx-b-renvoi:hover{border-color:var(--danger);background:var(--danger-soft)}
.mx-terminer label,.mx-renvoi-f label{font-size:.76rem;font-weight:800;color:var(--ink)}
.mx-renvoi-f{display:flex;flex-direction:column;gap:7px;padding-top:6px}
.mx-renvoi-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mx-renvoi-l .input{max-width:180px}
.mx-renvoi-l .btn{margin-left:auto}
.mx-suite{display:flex;align-items:center;gap:7px;color:var(--ink-soft);font-size:.84rem}
.mx-suite svg{width:15px;height:15px}
.mx-histo{border:1px solid var(--border);border-radius:12px;padding:10px 14px;background:var(--surface)}
.mx-histo summary{cursor:pointer;display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;color:var(--ink-soft);list-style:none}
.mx-histo summary::-webkit-details-marker{display:none}
.mx-histo summary svg{width:14px;height:14px}
.mx-histo[open] summary{margin-bottom:10px}
.mx-histo-l{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--border);margin-left:8px}
.mx-h{display:flex;gap:10px;padding:0 0 10px 0;position:relative}
.mx-h > i{width:22px;height:22px;border-radius:7px;background:var(--bg-2);display:inline-flex;align-items:center;justify-content:center;margin-left:-12px;flex:none;color:var(--ink-soft)}
.mx-h > i svg{width:12px;height:12px}
.mx-h b{font-size:.82rem;font-weight:800}
.mx-h p{margin:2px 0 0;font-size:.82rem;white-space:pre-wrap}
.mx-h small{display:block;font-size:.7rem;color:var(--ink-mute);margin-top:1px}
.mx-h-faite > i,.mx-h-validee > i{background:var(--ok-soft);color:var(--ok-ink)}
.mx-h-faite_reserve > i{background:var(--danger-soft);color:var(--danger-ink)}
.mx-h-renvoyee > i{background:#FBDEAA;color:#2E2017}
@media (max-width:720px){ .mx-choix{grid-template-columns:1fr} .mx-renvoi-l .btn{margin-left:0} }

/* ══════════ LE FILTRE DES CAMPUS REGARDÉS (9 oct. 2026) ══════════
   Un compte qui suit plusieurs villes choisit celles qu'il regarde ;
   la pastille orange sur le bouton dit qu'un filtre est posé — sans
   elle, on oubliait pourquoi les chiffres avaient baissé. */
.tb-btn-on{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-800)}
.tb-btn-on .dot{background:var(--fa-orange)}
.perim-l{max-height:46vh;overflow:auto;padding:4px 6px 8px}
.perim-c{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:9px;cursor:pointer}
.perim-c:hover{background:var(--surface-2)}
.perim-c .check-txt{font-size:.86rem;font-weight:600}
.perim-pied{display:flex;gap:8px;justify-content:space-between;padding:8px 10px 10px}

/* Les campus suivis d'un compte du siège, sur sa carte (9 oct. 2026). */
.cpt-perim{display:flex;align-items:flex-start;gap:7px;margin:8px 0 2px;
  font-size:.78rem;font-weight:600;color:var(--ink-soft);line-height:1.35}
.cpt-perim svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px;color:var(--fa-orange)}
/* Les dix-neuf villes à cocher, dans une fenêtre : trois colonnes. */
.perim-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 10px}
@media(max-width:560px){.perim-grille{grid-template-columns:repeat(2,1fr)}}