/* ======================================================================
   HUNE — LA FEUILLE UNIQUE
   Dérivée mot pour mot du CSS de la maquette validée
   (docs/audits_ergonomie/modele_hune_20260902.html), décision M-09 du
   03/09/2026. Une seule feuille pour tout le back-office ; aucun gabarit
   n'écrit de <style> ; aucune classe hors de celles-ci (garde A-08).

   CE QUI DIFFÈRE DE LA MAQUETTE, ET POURQUOI — chaque écart est signé :
     · les fontes sont EMBARQUÉES (D-04) : rien n'est chargé de l'extérieur ;
     · aucune taille sous 11 px (M-22) : la maquette en avait 22 emplois ;
     · la colonne des possibilités se replie (M-20) ;
     · le bandeau porte l'heure à la seconde et la date (R-13), un lien vers
       la carte (R-06) et le menu du compte (M-02) ;
     · un patron « formulaire » que la maquette ne dessine pas (A-02).
   Les classes gardent les NOMS de la maquette : c'est ce qui permet à
   l'audit de comparer l'application et la maquette à l'identique.
   ====================================================================== */

/* ---------------------------------------------------------- LES FONTES */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fontes/fraunces-latin.069cb90e11a3.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("../fontes/fraunces-latin-ext.a04d353989ad.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;
  src:url("../fontes/archivo-latin.cd56e2ec63d7.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;
  src:url("../fontes/archivo-latin-ext.c5e41aa17045.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------------------------------------------------- LES JETONS */
/* Jour : les valeurs finales de la maquette (les reprises de fin de feuille
   sont fondues ici, une seule définition par jeton). */
:root{
  --coque:#0B3A50; --coque-2:#0F4A63; --coque-3:#08303F;
  --veille:#0A6273; --veille-f:#E1EFF2;
  --lampe:#F0AE3F; --lampe-s:#926015; --lampe-f:#FCF2DF;
  --sur-coque:#E4F0F5; --sur-coque-2:#A7C6D3;
  --fond:#E7ECF0; --surf:#FFFFFF; --surf-2:#F2F5F8; --tete:#E2E9ED; --rail:#0D3A4E;
  --encre:#12232C; --encre-2:#3B505B; --encre-3:#596B74;
  --filet:#D2DCE3; --filet-2:#E5EBEF; --filet-fort:#B4C4CE;
  --dg:#A8321E; --dg-f:#FBEAE6; --al:#8F6008; --al-f:#FAF1DC; --ok:#1E6B47; --ok-f:#E6F2EA;
  --ombre:0 1px 2px rgba(16,40,52,.06), 0 4px 14px -8px rgba(16,40,52,.18);
  --sur-veille:#FFFFFF; --r:8px; --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;
  --display:"Fraunces",Georgia,"Times New Roman",serif; --texte:"Archivo","Segoe UI",system-ui,sans-serif;
  --etat:83ms; --interne:167ms; --vue:250ms;
  --entree:cubic-bezier(0,0,0,1); --sortie:cubic-bezier(.9,0,1,1);
  /* LE SEUL ÉTAGE AU-DESSUS DE LA COQUILLE. Un flottant passe devant le
     bandeau (40), la barre collante (20) et les en-têtes de table (2), et
     reste sous les volets de planning (65-70) et les modales (80), qui
     prennent l'écran entier et n'ont donc rien à négocier avec un menu. */
  --z-flottant:60;
  color-scheme:light;
}
/* Nuit — recalibrée, pas inversée. Le thème vient du serveur (data-theme
   sur <html>) ; le réglage « automatique » suit les bornes de la société. */
:root[data-theme="nuit"]{
  --coque:#07222E; --coque-2:#0E3A4B; --coque-3:#04161E;
  --veille:#7FB9CA; --veille-f:#193A44;
  --lampe:#F0AE3F; --lampe-s:#E8A93F; --lampe-f:#3A2E14;
  --sur-coque:#D7E8EF; --sur-coque-2:#95B4C2;
  --fond:#0D171D; --surf:#16242C; --surf-2:#1C2E38; --tete:#22363F; --rail:#0A141A;
  --encre:#E6EFF3; --encre-2:#B3C6D0; --encre-3:#889FA6;
  --filet:#2A3F49; --filet-2:#223640; --filet-fort:#3C5764;
  --dg:#F0917C; --dg-f:#3A1E18; --al:#E5B458; --al-f:#372A12; --ok:#78C79C; --ok-f:#14301F;
  --sur-veille:#0A141A;
  --ombre:0 1px 2px rgba(0,0,0,.45), 0 8px 20px -10px rgba(0,0,0,.7);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--fond)}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--texte);font-size:14px;
  line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
button{font:inherit;color:inherit}
a{color:var(--veille)}
a:hover{color:var(--coque)}
:root[data-theme="nuit"] a:hover{color:var(--lampe)}
h1,h2,h3{text-wrap:balance}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
[hidden]{display:none!important}
:where(button,a,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--lampe);outline-offset:2px;border-radius:5px}
.rubs button:focus-visible,.rubs a:focus-visible{outline-offset:-3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:-9999px;top:8px;z-index:60;background:var(--surf);color:var(--encre);
  border:1px solid var(--filet-fort);border-radius:6px;padding:8px 14px;font-size:13px;font-weight:600}
.evitement:focus{left:12px}
.nul{color:var(--encre-3)}
.al{color:var(--al)} .dg{color:var(--dg)} .ok{color:var(--ok)}

/* ---------------------------------------------------------- LE BANDEAU */
.bandeau{position:sticky;top:0;z-index:40;min-height:50px;background:var(--coque);color:#EAF3F6;
  display:flex;align-items:center;gap:var(--e4);padding:6px var(--e4);flex-wrap:wrap;row-gap:6px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.marque{font-family:var(--display);font-size:22px;letter-spacing:.01em;color:#EAF3F6;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px}
.marque i{font-style:italic;color:var(--lampe)}
.marque svg{width:22px;height:22px}
.longuevue-forme{display:contents}
.longuevue{flex:1;max-width:520px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);border-radius:999px;padding:7px 16px;font-size:13px;
  color:#EAF3F6;font-family:inherit;min-width:160px}
.longuevue::placeholder{color:#A7C6D3}
.longuevue:focus{background:rgba(255,255,255,.18);outline:2px solid var(--lampe);outline-offset:1px}
.resultats{width:min(520px,90vw);background:var(--surf);
  border:1px solid var(--filet);border-radius:var(--r);box-shadow:0 16px 40px -14px rgba(0,0,0,.4);
  color:var(--encre)}
.resultats .q{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3);
  font-weight:700;padding:8px 14px 2px;background:var(--surf-2)}
.resultats a,.resultats button{display:block;width:100%;text-align:left;background:transparent;border:0;
  border-bottom:1px solid var(--filet-2);padding:8px 14px;cursor:pointer;color:inherit;text-decoration:none}
.resultats a:last-child,.resultats button:last-child{border-bottom:0}
.resultats a:hover,.resultats a:focus-visible,.resultats button:hover,.resultats button:focus-visible{background:var(--surf-2)}
.resultats b{display:block;font-size:13.5px}
.resultats span{display:block;font-size:12px;color:var(--encre-3)}
.resultats .rien{padding:10px 14px;font-size:13px;color:var(--encre-3)}
.quart{margin-left:auto;display:flex;align-items:center;gap:var(--e3);font-size:12.5px;flex-wrap:wrap}
.quart b{font-variant-numeric:tabular-nums;font-size:14px;min-width:8ch}
.quart .date{font-size:12px;color:#B9D2DB;white-space:nowrap}
.pastille{background:var(--lampe);color:#3A2704;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700}
/* SUR QUELLE BASE EST-CE QUE JE TRAVAILLE ? (É-09, 08/09/2026) — le nom de
   l'instance, collé à la marque, sur toutes les pages. La PRODUCTION est
   sobre : un signal permanent s'éteint dans l'œil, et c'est alors la copie
   qu'on ne voit plus. Toute COPIE (recette, formation, développement) teinte
   le bandeau entier en ambre, et une instance dont la nature n'est pas
   déclarée le teinte en rouge : on ne devient pas la production par oubli. */
.instance{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:5px;
  border-radius:999px;padding:2px 10px;font-size:11px;white-space:nowrap;
  max-width:34ch;overflow:hidden;text-overflow:ellipsis;
  background:rgba(255,255,255,.12);color:#EAF3F6;border:1px solid rgba(255,255,255,.22)}
.instance b{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:10px}
.instance.i-al{background:var(--lampe);color:#3A2704;border-color:transparent}
.instance.i-dg{background:#B3261E;color:#FFF1EF;border-color:transparent}
/* La marque de copie est un ATTRIBUT et non une classe : le bandeau est
   repéré ailleurs par « <header class="bandeau" » littéral (garde de la
   coquille contextuelle), et lui ajouter une classe le rendait invisible
   à cette garde-là. */
.bandeau[data-instance="copie"]{box-shadow:inset 0 -3px 0 var(--lampe)}
@media(max-width:1280px){.instance{max-width:16ch}}
.b-nuit,.b-coque{background:transparent;border:1px solid rgba(255,255,255,.28);color:#D6E7EC;border-radius:999px;
  padding:4px 12px;font-size:11.5px;cursor:pointer;transition:background var(--etat);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.b-nuit:hover,.b-coque:hover{background:rgba(255,255,255,.12);color:#fff}
.b-coque svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* LE MENU DU COMPTE — gardé dans le bandeau (M-02, écart signé). */
.compte{position:relative}
.compte>button{background:transparent;border:1px solid rgba(255,255,255,.28);color:#D6E7EC;border-radius:999px;
  padding:4px 12px;font-size:11.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.compte>button:hover{background:rgba(255,255,255,.12);color:#fff}
.compte>button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.compte .menu{min-width:260px;background:var(--surf);
  color:var(--encre);border:1px solid var(--filet);border-radius:var(--r);box-shadow:0 16px 40px -14px rgba(0,0,0,.4);
  padding:var(--e2) 0;display:flex;flex-direction:column}
.compte .menu .tete{padding:6px var(--e4) 10px;border-bottom:1px solid var(--filet-2);margin-bottom:var(--e1)}
.compte .menu .tete b{display:block;font-size:13.5px}
.compte .menu .tete span{display:block;font-size:12px;color:var(--encre-3)}
.compte .menu a,.compte .menu button{display:flex;align-items:center;gap:var(--e2);width:100%;text-align:left;
  background:transparent;border:0;padding:7px var(--e4);font-size:13px;color:var(--encre);cursor:pointer;text-decoration:none}
.compte .menu a:hover,.compte .menu button:hover{background:var(--surf-2)}
.compte .menu .touche{margin-left:auto;font-size:11px;color:var(--encre-3);border:1px solid var(--filet);
  border-radius:4px;padding:0 5px;font-variant-numeric:tabular-nums}
.compte .menu hr{border:0;border-top:1px solid var(--filet-2);margin:var(--e1) 0}
.compte .menu form{display:contents}

/* ------------------------------------------------------------ LE PONT */
/* Trois colonnes : les rubriques appellent leurs possibilités, les
   possibilités appellent l'écran. */
.pont{display:grid;grid-template-columns:214px 286px 1fr;min-height:calc(100vh - 50px)}
.pont[data-etage="1"]{grid-template-columns:214px 1fr}
.pont[data-etage="1"] .poss{display:none}
/* La colonne repliée (M-20) : un liseré de 28 px qui la rouvre. */
.pont[data-etage="replie"]{grid-template-columns:214px 28px 1fr}
.pont[data-etage="replie"] .poss>*:not(.poss-repli){display:none}
.pont[data-etage="replie"] .poss{padding:var(--e3) 0}
.poss>.poss-repli{position:absolute;right:6px;top:14px;background:transparent;border:0;cursor:pointer;color:var(--encre-3);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:4px 6px;border-radius:4px;
  display:flex;align-items:center;gap:6px;line-height:1}
.poss>.poss-repli .mot{display:none}
.poss>.poss-repli:hover{color:var(--veille);background:var(--surf-2)}
.pont[data-etage="replie"] .poss>.poss-repli{position:static;writing-mode:vertical-rl;transform:rotate(180deg);
  width:100%;height:100%;justify-content:flex-end;padding:var(--e3) 4px}
.pont[data-etage="replie"] .poss>.poss-repli .mot{display:inline}
@media(max-width:1280px){.pont{grid-template-columns:200px 248px 1fr}
  .pont[data-etage="1"]{grid-template-columns:200px 1fr}
  .pont[data-etage="replie"]{grid-template-columns:200px 28px 1fr}}
@media(max-width:1100px){.pont,.pont[data-etage="1"],.pont[data-etage="replie"]{grid-template-columns:1fr}
  .rubs,.poss{position:static;height:auto}
  .pont[data-etage="replie"] .poss{display:none}}
/* Sans colonne du tout : les portails, la connexion. */
.pont[data-etage="0"]{grid-template-columns:1fr}

/* ---- colonne 1 : les rubriques, sur la coque ------------------------- */
.rubs{background:var(--coque);color:var(--sur-coque);padding:var(--e4) 0 var(--e6);
  position:sticky;top:50px;height:calc(100vh - 50px);overflow:auto;display:flex;flex-direction:column}
/* Le mât DÉFILE ; ses entrées ne se compriment pas. Un enfant de colonne
   flexible qui masque son débordement voit son « min-height:auto » résolu à 0
   et se fait écraser sans un mot — c'est ainsi que le volet « Pourvoir » a
   caché ses sept candidats (audit 05, P2). Garde :
   remplacement/tests_garde_geometrie.py. */
.rubs>*{flex:0 0 auto}
.rubs .t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sur-coque-2);
  font-weight:700;padding:0 var(--e4) var(--e2)}
.rubs .t+.t,.rubs a+.t,.rubs button+.t{margin-top:var(--e3)}
.rubs button,.rubs a{display:block;width:100%;text-align:left;background:transparent;border:0;
  border-left:3px solid transparent;padding:8px var(--e4);cursor:pointer;color:var(--sur-coque);
  text-decoration:none;transition:background var(--etat),border-color var(--etat)}
.rubs .n{font-family:var(--display);font-size:17px;line-height:1.2;display:flex;align-items:center;gap:var(--e2)}
.rubs .n svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.rubs .s{display:block;font-size:11px;color:var(--sur-coque-2);line-height:1.3;margin-top:1px}
.rubs button:hover,.rubs a:hover{background:var(--coque-2);color:var(--sur-coque)}
.rubs [aria-current="true"],.rubs [aria-current="page"]{background:var(--coque-2);border-left-color:var(--lampe)}
.rubs [aria-current="true"] .n,.rubs [aria-current="page"] .n{color:var(--lampe)}
.rubs .pas{margin-left:auto;background:var(--lampe);color:#3A2704;border-radius:999px;padding:0 7px;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;font-family:var(--texte)}
.rubs hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:var(--e3) var(--e4)}
.rubs .portail .n{font-size:14px}
/* Sous 900 px de hauteur, les sous-titres passent en infobulle (M-21). */
@media(max-height:899px){.rubs .s{display:none}.rubs button,.rubs a{padding:6px var(--e4)}}

/* ---- colonne 2 : les possibilités de la rubrique --------------------- */
.poss{background:var(--surf);border-right:1px solid var(--filet);padding:var(--e4) 0 var(--e6);
  position:sticky;top:50px;height:calc(100vh - 50px);overflow:auto}
.poss .tete{padding:0 var(--e4) var(--e3);border-bottom:1px solid var(--filet);display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e2)}
.poss .tete h2{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.1;margin:0}
.poss .tete h2 a{color:inherit;text-decoration:none}
.poss .tete h2 a:hover{color:var(--veille)}
.poss .tete p{margin:3px 0 0;font-size:12px;color:var(--encre-3);width:100%}
.grp{padding:var(--e3) 0 var(--e2)}
.grp>.q{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--encre-3);
  font-weight:700;padding:0 var(--e4) 5px;display:flex;align-items:baseline;gap:6px}
/* S-17 — « OÙ L'ON EN EST » SE LISAIT « OÙL'ONENEST ». Le titre de section
   porte 0,13 em d'interlettrage (1,43 px à 11 px) et le « b » le remettait à
   zéro : l'espace entre les MOTS devenait alors plus étroit que l'espace entre
   les LETTRES, et le titre se lisait d'un seul tenant. Mesuré au 07/09 sur le
   HTML rendu de la colonne : plus aucun titre de section ne porte de « b » —
   les six s'appellent « Dossiers », « Urgences », « Files de travail »,
   « Écrans », « Éditions et registres », « Paramétrage ». La règle est donc
   sans effet aujourd'hui, et c'est précisément pourquoi elle se corrige : elle
   attendait qu'on remette un compte dans un titre pour rendre le défaut. */
.grp>.q b{color:var(--lampe-s);font-size:11px;letter-spacing:inherit}
.lien{display:flex;align-items:center;gap:var(--e2);width:100%;text-align:left;background:transparent;
  border:0;padding:5px var(--e4);font-size:13px;cursor:pointer;color:var(--encre);text-decoration:none;
  border-left:3px solid transparent;transition:background var(--etat),border-color var(--etat)}
.lien:hover{background:var(--surf-2);color:var(--encre)}
/* UN GESTE QUI ÉCRIT PART EN POST, JUSQUE DANS LA COLONNE (N-04, 07/09/2026).
   « Archiver le client » y était rendu en <a href> vers une route
   ``require_POST`` : HTTP 405, page vide, sur les onze dossiers client — et un
   geste destructeur derrière un lien qu'un préchargement suffit à suivre. Le
   formulaire qui l'enveloppe ne doit rien changer à la colonne : il disparaît
   de la mise en page, exactement comme dans la barre du dossier. */
.grp>form{display:contents}
/* LE LIEN COURANT SE DIT PAR LA LAMPE, PAS PAR LA GRAISSE : le fond et le
   liseré suffisent à dire où l'on est, et une graisse de plus déforme la
   colonne — la ligne courante devient plus large que ses voisines et la
   liste bouge à chaque écran. */
.lien[aria-current="page"],.lien[aria-current="true"]{background:var(--lampe-f);border-left-color:var(--lampe)}
.lien .d{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--veille)}
.lien .d.nb{font-weight:400;letter-spacing:0;font-size:11px;color:var(--encre-3)}
/* S-16 — UNE TAILLE DE MOINS. Le compte d'une ligne s'écrivait 11,5 px et son
   voisin immédiat, le détail, 11 px : un demi-pixel d'écart entre deux
   étiquettes de la même ligne n'est pas une hiérarchie, c'est une hésitation —
   et il compte pour un style de plus dans une colonne qui en portait sept. */
.lien .c{margin-left:auto;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
  min-width:24px;text-align:right}
.lien .c.dg{color:var(--dg)} .lien .c.m{color:var(--al)}
.lien.gros{font-family:var(--display);font-size:16px;padding:6px var(--e4)}
/* LA CHAÎNE D'UNE RUBRIQUE — client › site › prestation — est EMBOÎTÉE et non
   plate : ce sont trois plans du même objet, pas trois objets sœurs, et un
   rendu plat laissait deviner la subordination. Le retrait est le rang déclaré
   dans « rangement_valide », jamais un calcul. */
.lien.e1{font-size:14px;padding-left:calc(var(--e4) + 14px)}
.lien.e2{font-size:13px;padding-left:calc(var(--e4) + 28px)}
.lien.e1::before,.lien.e2::before{content:"›";position:absolute;margin-left:-14px;color:var(--encre-3)}
.lien.e1,.lien.e2{position:relative}
/* UNE URGENCE À ZÉRO GARDE SA LIGNE, avec un tiret. */
.lien .c.nul{color:var(--encre-3);font-weight:400}
.plus{font-size:11.5px;color:var(--veille);background:transparent;border:0;cursor:pointer;
  padding:3px var(--e4);text-decoration:underline;text-underline-offset:2px;display:block;list-style:none}
.plus::-webkit-details-marker{display:none}
details.plus-boite>summary{display:block}
details.plus-boite:not([open])>*:not(summary){display:none}
details.plus-boite[open]>summary{display:none}
/* LA LIGNE D'UN PARCOURS : le nom mène à la page du parcours, le chevron
   seul déplie ce qu'il reste à traiter. Le résumé du <details> est posé sur
   la droite de la ligne du lien (il est hors flux), de sorte que les deux
   cibles se lisent comme UNE ligne et que la liste des restes-à-faire coule
   dessous. Sans cela il aurait fallu deux lignes par parcours, ou un lien
   dans un <summary> — qui navigue ET replie du même clic. */
.par{position:relative}
.par>.lien{padding-right:52px}
.par>.acc>.t{position:absolute;top:0;right:0;display:flex;align-items:center;gap:4px;
  height:28px;padding:0 var(--e3);cursor:pointer;list-style:none;color:var(--encre-3)}
.par>.acc>.t::-webkit-details-marker{display:none}
.par>.acc>.t:hover{color:var(--veille)}
.par>.acc>.t .chevron{font-size:10px;transition:transform var(--etat);display:inline-block;transform:rotate(-90deg)}
.par>.acc[open]>.t .chevron{transform:none}
.acc ol{list-style:none;margin:0;padding:0 0 var(--e2)}
.acc ol li a,.acc ol li span.rien{display:flex;align-items:center;gap:var(--e2);width:100%;text-align:left;
  background:transparent;border:0;padding:4px var(--e4) 4px 34px;font-size:12px;line-height:1.35;cursor:pointer;
  position:relative;color:var(--encre-2);transition:background var(--etat);text-decoration:none}
.acc ol li a:hover{background:rgba(0,0,0,.04)}
.acc ol li .pt{position:absolute;left:20px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--filet-fort)}
.acc ol li a.cours .pt{background:var(--veille)}
.acc ol li a.bloc .pt{background:var(--dg)} .acc ol li a.bloc{color:var(--dg)}
.acc ol li a .c{margin-left:auto;padding-left:var(--e2);font-size:11.5px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--encre-3)}
.acc ol li a[aria-current="page"]{background:rgba(0,0,0,.06)}
/* RIEN À TRAITER GARDE SA LIGNE : une ligne qui disparaît déplace les
   suivantes, et une position qui bouge ne se mémorise pas. */
.acc ol li span.rien{color:var(--encre-3);font-style:italic;cursor:default}
.acc ol li span.rien .pt{background:transparent;border:1px dashed var(--filet-fort)}
/* LES DEUX POCHES FROIDES, SOUS UN SEUL DÉPLIANT, EN PIED DE COLONNE. */
.grp.froid{border-top:1px solid var(--filet);margin-top:var(--e3);padding-top:var(--e3)}
.grp.froid .autres{border:0;box-shadow:none;background:transparent}
.grp.froid .autres>div{border-top:0}
.grp.froid .autres .q{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--encre-3);
  font-weight:700;padding:var(--e2) var(--e4) 4px}
.poss .perimetre{font-size:12px;color:var(--encre-2);width:100%}
.poss .perimetre b{color:var(--encre)}

/* ---- colonne 3 : l'écran ---------------------------------------------- */
.large{padding:var(--e5) var(--e5) 64px;min-width:0;display:flex;flex-direction:column;gap:var(--e5)}
@media(max-width:900px){.large{padding:var(--e4)}}

/* ------------------------------------------------------------- LE CAP */
.fil-ariane{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--encre-3);font-weight:700;flex-wrap:wrap}
.fil-ariane span{color:var(--filet-fort)}
.fil-ariane a,.fil-ariane button{background:transparent;border:0;color:var(--encre-3);font:inherit;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;cursor:pointer;padding:2px 4px;border-radius:4px;text-decoration:none}
.fil-ariane a:hover,.fil-ariane button:hover{color:var(--veille);text-decoration:underline}
.fil-ariane .retour{margin-left:auto;color:var(--veille);text-transform:none;letter-spacing:0;font-size:12.5px}
.cap{border-left:4px solid var(--lampe);padding-left:var(--e4)}
.cap .fil{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3);font-weight:700}
.cap h1{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,34px);line-height:1.08;
  margin:5px 0 0;text-wrap:balance}
.cap .verdict{margin:var(--e2) 0 0;font-size:14.5px;color:var(--encre-2);max-width:80ch}
.cap .verdict b{color:var(--encre);font-weight:600;font-variant-numeric:tabular-nums}
.cap .ajour{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--encre-3);margin-left:var(--e3);
  font-variant-numeric:tabular-nums;vertical-align:middle}
.cap .ajour i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}
.cap .ajour.fige i{background:var(--filet-fort)}

/* --- RÈGLE 1 : TROIS PLANS. Tout contenu vit dans un bloc matérialisé. */
.bloc{background:var(--surf);border:1px solid var(--filet);border-radius:var(--r);
  box-shadow:var(--ombre);overflow:hidden}
.bloc>.bloc-tete{background:var(--tete);border-bottom:1px solid var(--filet);padding:10px var(--e4);
  display:flex;align-items:baseline;gap:var(--e3);flex-wrap:wrap}
.bloc>.bloc-tete h2{margin:0;font-size:13.5px;font-weight:700;letter-spacing:.01em;color:var(--encre)}
/* Le « pourquoi » PLIE : c'est lui qui cède la place, jamais le nombre. Sans
   la base souple, un pourquoi de douze mots poussait le .n hors de la tête. */
.bloc>.bloc-tete .pq{font-size:12px;color:var(--encre-3);flex:1 1 160px;min-width:0}
.bloc>.bloc-tete .n{margin-left:auto;font-size:12px;font-weight:700;color:var(--encre-2);background:var(--surf);
  border:1px solid var(--filet);border-radius:999px;padding:1px 10px;font-variant-numeric:tabular-nums}
/* « Modifier » est un verbe du bloc, à droite de son titre, à la taille du nombre (M-25). */
.bloc>.bloc-tete .verbe{margin-left:auto;font-size:12px;font-weight:600;color:var(--veille);background:var(--surf);
  border:1px solid var(--filet);border-radius:999px;padding:1px 10px;text-decoration:none;cursor:pointer}
.bloc>.bloc-tete .n+.verbe{margin-left:0}
/* Un bloc porte jusqu'à DEUX verbes — « Ajouter » puis « Modifier » : le
   second se range contre le premier, il ne repart pas à droite. */
.bloc>.bloc-tete .verbe+.verbe{margin-left:0}
.bloc>.bloc-tete .verbe:hover{background:var(--veille-f)}
.bloc .corps{padding:var(--e4)}
.bloc .corps>:first-child{margin-top:0}.bloc .corps>:last-child{margin-bottom:0}
.bloc .corps p{max-width:80ch}
.pile{display:flex;flex-direction:column;gap:var(--e4)}
/* Le pied du bloc est un BLOC, pas une rangée (03/09/2026). En flex, chaque
   nœud d'une phrase — un <b>, un mot entre deux <b> — devenait un article de
   liste espacé de 12 px : « Les 21 éditions relevées » se lisait « Les » « 21 »
   « éditions relevées ». La prose se découpe donc, et ce qui EST une rangée
   (la pagination, les commandes) le redit pour son compte, juste dessous. */
.bloc>.bloc-pied{background:var(--surf-2);border-top:1px solid var(--filet);padding:7px var(--e4);font-size:12px;color:var(--encre-2);
  display:block}
.bloc-pied .pages{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap}
.bloc-pied .bt{margin:2px var(--e2) 2px 0;vertical-align:middle}

/* --- RÈGLE 3 : les tables sont denses. --- RÈGLE 4 : le grave se voit. */
.cadre{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px;color:var(--encre)}
.tbl caption{text-align:left}
.tbl th{background:var(--surf-2);text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--encre-2);font-weight:700;padding:7px var(--e3);border-bottom:1px solid var(--filet);white-space:nowrap}
.tbl th a{color:inherit;text-decoration:none}
.tbl th a:hover{color:var(--veille)}
.tbl th[aria-sort] a::after{content:" ↑";color:var(--veille)}
.tbl th[aria-sort="descending"] a::after{content:" ↓"}
.tbl td{padding:7px var(--e3);border-bottom:1px solid var(--filet-2);vertical-align:middle}
.tbl td a{color:var(--veille);text-decoration:none}
.tbl td a:hover{text-decoration:underline}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--surf-2)}
.tbl .num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr.g td:first-child{box-shadow:inset 3px 0 0 var(--dg)}
.tbl tr.m td:first-child{box-shadow:inset 3px 0 0 var(--al)}
.tbl tr.g td:first-child,.tbl tr.m td:first-child{padding-left:15px}
.tbl tr.g{background:linear-gradient(var(--dg-f),var(--dg-f))}
.tbl .coche{width:28px;color:var(--encre-3)}
.tbl .coche input{margin:0;width:15px;height:15px;accent-color:var(--veille);vertical-align:middle}
.tbl tfoot td{background:var(--surf-2);font-weight:700;border-top:1px solid var(--filet)}
.tbl small{color:var(--encre-3);font-size:11.5px}
.tbl tr.total td{font-weight:700;background:var(--surf-2)}

.jeton{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:1px 9px;white-space:nowrap}
.j-dg{background:var(--dg-f);color:var(--dg)}.j-al{background:var(--al-f);color:var(--al)}
.j-ok{background:var(--ok-f);color:var(--ok)}.j-in{background:var(--surf-2);color:var(--encre-3)}
.j-veille{background:var(--veille-f);color:var(--veille)}

/* --- RÈGLE 5 : un seul bandeau d'état, pas quatre cartes flottantes. */
.cadrans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.cadr{padding:var(--e3) var(--e4);border-right:1px solid var(--filet)}
.cadr:last-child{border-right:0}
.cadr .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-2);font-weight:700}
.cadr .v{font-family:var(--display);font-size:29px;line-height:1.1;margin-top:1px;font-variant-numeric:tabular-nums}
.cadr .u{font-size:11.5px;color:var(--encre-3)}
.cadr .v.dg{color:var(--dg)}.cadr .v.al{color:var(--al)}.cadr .v.ok{color:var(--ok)}
a.cadr{text-decoration:none;color:inherit;display:block}
a.cadr:hover{background:var(--surf-2)}
@media(max-width:640px){.cadr{border-right:0;border-bottom:1px solid var(--filet)}}

/* ------------------------------------------------------ LES INDEX DENSES */
.index{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(268px,100%),1fr));gap:0}
.ix{display:flex;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--filet-2);
  padding:6px var(--e4);font-size:13px;cursor:pointer;align-items:center;gap:var(--e2);color:inherit;text-decoration:none;
  transition:background var(--etat)}
.ix:hover{background:var(--surf-2)}
.ix .d{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--veille)}
.ix .c{margin-left:auto;font-size:11.5px;font-variant-numeric:tabular-nums;font-weight:700}
.glose{position:sticky;bottom:0;background:var(--surf-2);border-top:1px solid var(--filet);
  padding:7px var(--e4);font-size:12px;color:var(--encre-2);min-height:31px}

/* ----------------------------------------------------------- LE DOSSIER */
.verbes{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;background:var(--surf);
  border:1px solid var(--filet);border-radius:var(--r);padding:8px var(--e3);box-shadow:var(--ombre)}
.verbes .sujet{font-weight:700;font-size:13px;margin-right:var(--e2)}
.bt{background:var(--surf);border:1px solid var(--encre-3);border-radius:6px;padding:5px 12px;
  font-size:12.5px;cursor:pointer;color:var(--encre);text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  transition:background var(--etat),border-color var(--etat);line-height:1.4}
.bt:hover{background:var(--surf-2);color:var(--encre)}
.bt svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* LA RANGÉE DE GESTES D'UNE LIGNE DE TABLEAU. Une cellule qui porte
   plusieurs gestes les empile par défaut, parce qu'un ``form`` est un bloc :
   le bouton constructif passe alors AU-DESSUS du bouton destructeur, et sur
   un écran étroit la ligne s'allonge d'un cran par geste. Les poser côte à
   côte n'est pas une préférence de forme — c'est ce qui rend lisible, d'un
   seul regard, que le geste irréversible n'est pas le seul de la ligne.
   ⛔ Sans cette classe le gabarit portait un ``style=""`` en dur, que la
   garde de style refuse : la forme vit ici, jamais dans le gabarit. */
.gestes{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gestes form{display:contents}
.bt-p{background:var(--veille);border-color:var(--veille);color:var(--sur-veille);font-weight:600}
.bt-p:hover{background:var(--coque);border-color:var(--coque);color:var(--sur-veille)}
:root[data-theme="nuit"] .bt-p:hover{background:var(--lampe);border-color:var(--lampe);color:#3A2704}
.bt-dg{border-color:var(--dg);color:var(--dg)}
.bt-dg:hover{background:var(--dg-f);color:var(--dg)}
.bt-fin{margin-left:auto;border-style:dashed}
/* D-36 : un verbe éteint est un « span », plus un lien vide — il garde donc
   l'apparence du bouton, et il n'est plus focalisable. */
.bt[disabled],.bt[aria-disabled="true"],span.bt[aria-disabled="true"]{opacity:.5;
  cursor:not-allowed}
.bt.petit{font-size:11px;padding:3px 10px}
.nav-enr{margin-left:auto;display:flex;align-items:center;gap:var(--e1);font-size:12px;color:var(--encre-3)}
.nav-enr a,.nav-enr button{background:var(--surf);border:1px solid var(--filet-fort);border-radius:6px;width:28px;height:26px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:var(--encre);text-decoration:none}
.nav-enr .rang{font-variant-numeric:tabular-nums;padding:0 var(--e1)}
/* le menu « … » des verbes : ce que l'onglet ne montre pas (D-09) */
.verbes details{position:relative}
.verbes details>summary{list-style:none}
.verbes details>summary::-webkit-details-marker{display:none}
.verbes details .menu{min-width:240px;background:var(--surf);
  border:1px solid var(--filet);border-radius:var(--r);box-shadow:0 16px 40px -14px rgba(0,0,0,.4);padding:var(--e1) 0}
.verbes details .menu a,.verbes details .menu button,
.verbes details .menu span[aria-disabled="true"]{display:block;width:100%;text-align:left;background:transparent;border:0;
  padding:7px var(--e4);font-size:13px;color:var(--encre);cursor:pointer;text-decoration:none;white-space:nowrap}
.verbes details .menu span[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.verbes details .menu a:hover,.verbes details .menu button:hover{background:var(--surf-2)}
.verbes details .menu .q{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3);font-weight:700;padding:6px var(--e4) 2px}
.onglets{display:flex;gap:2px;border-bottom:1px solid var(--filet);flex-wrap:wrap}
.onglets a,.onglets button{background:transparent;border:0;border-bottom:2px solid transparent;padding:8px 14px;
  font-size:13px;color:var(--encre-2);cursor:pointer;text-decoration:none;transition:color var(--etat),border-color var(--etat)}
.onglets a:hover,.onglets button:hover{color:var(--encre)}
.onglets [aria-selected="true"],.onglets [aria-current="page"]{color:var(--lampe-s);border-bottom-color:var(--lampe);font-weight:700}
.onglets .n{font-size:11px;color:var(--encre-3);margin-left:5px;font-variant-numeric:tabular-nums}
.dossier{display:grid;grid-template-columns:266px 1fr;gap:var(--e4);align-items:start}
@media(max-width:980px){.dossier{grid-template-columns:1fr}}
.echine{min-width:0}
.echine .portrait{display:flex;flex-direction:column;align-items:center;gap:var(--e2);padding:var(--e4) 0 var(--e3)}
.echine .portrait svg,.echine .portrait img{width:92px;height:92px;border-radius:10px;object-fit:cover}
.echine .portrait .bt{font-size:11px;padding:3px 10px}
.echine .qui{font-family:var(--display);font-size:21px;line-height:1.12;margin:0;text-align:center;padding:0 var(--e3)}
.echine .sous{font-size:11.5px;color:var(--encre-3);margin:2px 0 0;text-align:center;font-variant-numeric:tabular-nums}
.echine dl{margin:0;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:5px var(--e3);font-size:12.5px;
  padding:var(--e3) var(--e4);border-top:1px solid var(--filet)}
.echine dt{color:var(--encre-3)}.echine dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
@media(max-width:520px){.echine dl{grid-template-columns:1fr}.echine dd{text-align:left}}
.etats{padding:var(--e3) var(--e4);border-top:1px solid var(--filet);display:flex;flex-direction:column;gap:6px}
.etats .e{display:flex;align-items:center;justify-content:space-between;gap:var(--e2);font-size:12px}
.etats.gestes{flex-direction:row;flex-wrap:wrap}
.alarme{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;background:var(--al-f);
  border:1px solid var(--al);color:var(--al);border-radius:var(--r);padding:9px var(--e4);font-size:13px}
.alarme.grave{background:var(--dg-f);border-color:var(--dg);color:var(--dg)}
.alarme .geste{margin-left:auto;font-weight:700;text-decoration:underline;cursor:pointer;color:inherit}

dl.champs{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px var(--e4);font-size:13px;align-items:baseline}
dl.champs dt{color:var(--encre-3)}dl.champs dd{margin:0;font-weight:500;overflow-wrap:anywhere}
dl.champs dt.titre{grid-column:1/3;font-weight:700;color:var(--encre)}
.paire{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5)}
@media(max-width:760px){.paire{grid-template-columns:1fr;gap:var(--e4)}}

/* la frise du mois — un seul langage de couverture dans tout le produit */
.mois{display:grid;grid-template-columns:repeat(31,1fr);gap:3px;padding:var(--e4)}
.mois i{display:block;aspect-ratio:1;border-radius:3px;background:var(--ok)}
.mois i[data-t="0"]{background:var(--filet)}
.mois i[data-t="1"]{background:var(--al)}
.mois i[data-t="2"]{background:#C4622F}
.mois i[data-t="3"]{background:var(--dg)}

/* --- LA BARRE : ce qui agit, à la sélection, cinq commandes au plus. */
.barre{position:sticky;bottom:0;z-index:20;background:var(--surf);border:1px solid var(--filet);
  border-radius:var(--r);box-shadow:0 -2px 14px -6px rgba(16,40,52,.24);padding:9px var(--e4);
  display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap}
.barre .pris{font-size:12.5px;font-weight:700;margin-right:var(--e2)}
.barre .note{font-size:12px;color:var(--encre-3)}
.barre form{display:contents}

/* --- « Et ensuite » : la suite est proposée SOUS l'écran ouvert. */
.suite{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center;background:var(--surf);
  border:1px solid var(--filet);border-radius:var(--r);padding:9px var(--e4);box-shadow:var(--ombre)}
.suite .q{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3);
  font-weight:700;margin-right:var(--e2)}
.suite a,.suite button{background:var(--lampe-f);border:1px solid var(--lampe);color:var(--lampe-s);
  border-radius:999px;padding:4px 13px;font-size:12.5px;cursor:pointer;font-weight:600;text-decoration:none;
  transition:background var(--etat)}
.suite a:hover,.suite button:hover{background:var(--lampe);color:#3A2704}

/* ------------------------------------ L'ACCUEIL D'UNE RUBRIQUE */
.acc-g{display:grid;grid-template-columns:1fr 320px;gap:var(--e5);align-items:start}
@media(max-width:1240px){.acc-g{grid-template-columns:1fr}}
.acc-c,.acc-c2{display:flex;flex-direction:column;gap:var(--e3);min-width:0}
.acc-q{font-family:var(--display);font-weight:400;font-size:19px;margin:var(--e2) 0 0;color:var(--encre);
  display:flex;align-items:baseline;gap:var(--e3);flex-wrap:wrap}
.acc-q .ry{font-family:var(--texte);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--encre-3)}
.ch-ry{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--encre-2);margin-top:-4px}
.ch-ok .ch-ry{color:var(--ok)} .ch-bl .ch-ry{color:var(--dg)}
.ch-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(288px,100%),1fr));gap:var(--e3)}
.ch{background:var(--surf);border:1px solid var(--filet);border-radius:12px;box-shadow:var(--ombre);
  padding:var(--e4);display:flex;flex-direction:column;gap:9px;border-top:3px solid var(--lampe);color:inherit;
  transition:transform var(--interne) var(--entree),box-shadow var(--interne),border-color var(--etat)}
.ch:is(:hover,:focus-within){transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,40,52,.08),0 14px 26px -12px rgba(16,40,52,.30)}
.ch-bl{border-top-color:var(--dg)} .ch-ok{border-top-color:var(--ok)}
.ch-t{display:flex;align-items:baseline;gap:var(--e2)}
.ch-t h3{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.1;margin:0}
.ch-t h3 a{color:inherit;text-decoration:none}
.ch-c{margin-left:auto;font-family:var(--display);font-size:22px;line-height:1;font-variant-numeric:tabular-nums}
.ch-c.nul{color:var(--encre-3);font-weight:400}
.ch-c span{font-size:13px;color:var(--encre-3)}
.jg{height:6px;background:var(--filet-2);border-radius:3px;overflow:hidden}
.jg i{display:block;height:100%;background:var(--lampe);border-radius:3px;animation:pousse var(--vue) var(--entree) both}
.jg i.bl{background:var(--dg)} .jg i.fini{background:var(--ok)}
@keyframes pousse{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}}
.ch-e{margin:0;font-size:12.5px;color:var(--encre-2)}
/* CE QU'IL RESTE À TRAITER, sur la carte d'un parcours : une ligne par
   étape qui attend, la phrase de sa sonde, son nombre, son écran. */
.cha{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cha li a{display:flex;align-items:flex-start;gap:var(--e2);padding:4px 0 4px 16px;position:relative;
  font-size:12.5px;line-height:1.35;color:var(--encre-2);text-decoration:none;border-radius:var(--r)}
.cha li a:hover{background:var(--surf-2);color:var(--encre)}
.cha li .pt{position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--filet-fort)}
.cha li a.cours .pt{background:var(--veille)}
.cha li a.bloc .pt{background:var(--dg)} .cha li a.bloc{color:var(--dg)}
.cha li a .c{margin-left:auto;padding-left:var(--e2);font-size:11.5px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--encre-3)}
.ch-e b{color:var(--encre)}
.ch-p{display:flex;gap:3px}
.ch-p span{flex:1;height:7px;border-radius:3px;background:var(--filet);animation:pousse var(--vue) var(--entree) both}
.ch-p .pas-fait{background:var(--ok)} .ch-p .pas-cours{background:var(--lampe)} .ch-p .pas-bloc{background:var(--dg)}
.ch-p .vise{box-shadow:0 0 0 2px var(--surf),0 0 0 3px currentColor}
.ch-p .pas-bloc.vise{color:var(--dg)} .ch-p .pas-cours.vise{color:var(--lampe-s)}
.ch-go{margin-top:2px;background:var(--veille);border:0;color:var(--sur-veille);border-radius:7px;
  padding:7px 12px;font-size:12.5px;font-weight:700;cursor:pointer;text-align:left;text-decoration:none;display:block;
  transition:filter var(--etat)}
.ch-go:hover{filter:brightness(1.12);color:var(--sur-veille)}
.ch-bl .ch-go{background:var(--dg);color:var(--surf)}
/* CE QUI PRESSE : le nombre d'abord, et il est gros. */
.pr{display:flex;flex-direction:column}
.pr-l{display:flex;align-items:center;gap:var(--e4);width:100%;text-align:left;background:transparent;
  border:0;border-bottom:1px solid var(--filet-2);padding:11px var(--e4);cursor:pointer;color:inherit;text-decoration:none;
  transition:background var(--etat)}
.pr-l:last-child{border-bottom:0}
.pr-l:hover{background:var(--surf-2)}
.pr-n{font-family:var(--display);font-size:27px;line-height:1;min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
.pr-l.dg .pr-n{color:var(--dg)} .pr-l.m .pr-n{color:var(--al)}
.pr-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.pr-t b{font-size:13.5px;font-weight:600}
.pr-t span{font-size:12px;color:var(--encre-3)}
.pr-f{margin-left:auto;color:var(--encre-3);font-size:16px;transition:transform var(--etat),color var(--etat)}
.pr-l:is(:hover,:focus-visible) .pr-f{color:var(--veille);transform:translateX(3px)}
/* OUVRIR UN DOSSIER : une porte, pas une ligne de liste. */
.do{padding:var(--e4);display:flex;flex-direction:column;gap:var(--e3)}
.do-t{background:transparent;border:0;text-align:left;cursor:pointer;padding:0;display:flex;
  align-items:baseline;gap:var(--e2);color:inherit;text-decoration:none}
.do-n{font-family:var(--display);font-size:24px;line-height:1}
.do-s{font-size:12px;color:var(--encre-3);margin-left:auto;font-variant-numeric:tabular-nums}
.do-r .lo{display:block;width:100%;background:var(--surf-2);border:1px solid var(--filet);border-radius:999px;
  padding:7px 14px;font-size:12.5px;color:var(--encre);font-family:inherit}
.do-r .lo::placeholder{color:var(--encre-3)}
.do-h{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.do-h>span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3);font-weight:700;width:100%}
.do-h a,.do-h button{background:var(--veille-f);border:0;color:var(--veille);border-radius:999px;
  padding:3px 11px;font-size:12px;cursor:pointer;font-weight:600;text-decoration:none;transition:background var(--etat)}
.do-h a:hover,.do-h button:hover{background:var(--veille);color:var(--sur-veille)}
/* LE RESTE, REPLIÉ. */
.autres{background:var(--surf);border:1px solid var(--filet);border-radius:var(--r);box-shadow:var(--ombre)}
/* UN REPLI QUI NE REPLIE PAS N'EST PAS UN REPLI. Un « details » fermé cache
   son contenu à l'œil, mais le navigateur lui laisse une boîte : le contenu
   reste dans la mise en page, il s'imprime, il se cherche, et il compte pour
   ce qui mesure l'écran. On le retire donc vraiment. */
.autres:not([open])>div{display:none}
.autres summary{cursor:pointer;padding:10px var(--e4);font-size:12.5px;font-weight:600;color:var(--encre-2);
  display:flex;align-items:center;gap:var(--e2);list-style:none}
.autres summary::-webkit-details-marker{display:none}
.autres summary b{margin-left:auto;font-size:11.5px;color:var(--encre-3);
  background:var(--surf-2);border-radius:999px;padding:1px 9px;font-variant-numeric:tabular-nums}
.autres>div{padding:0 0 var(--e2);border-top:1px solid var(--filet-2)}
.autres .lien{padding:5px var(--e4);font-size:12.5px}
.autres>div .q{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--encre-3);
  font-weight:700;padding:var(--e2) var(--e4) 4px}
/* LES ÉCRANS DE LA RUBRIQUE, VISIBLES SUR SON ACCUEIL : une liste, pas une
   grille de cartes — « Fiche agent » s'ouvre cent fois par jour et
   « Provision de congés payés » une fois par an. */
.liste-ecrans{display:flex;flex-direction:column;padding:var(--e2) 0}
.liste-ecrans .lien{font-size:12.5px}

/* ------------------------------------------------ LE PATRON FORMULAIRE */
/* La maquette ne dessine aucune saisie (A-02). Le formulaire est un bloc
   comme les autres ; ses champs sont des paires étiquette / saisie, ses
   commandes vivent dans la barre. */
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:var(--e3) var(--e5);align-items:start}
.form .large-champ,.form .champ.large-champ{grid-column:1/-1}
.champ{display:flex;flex-direction:column;gap:4px;min-width:0}
.champ>label,.champ>legend,.champ .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-2);font-weight:700}
.champ .obl{color:var(--dg)}
.champ input:not([type="checkbox"]):not([type="radio"]),.champ select,.champ textarea{
  width:100%;background:var(--surf);color:var(--encre);border:1px solid var(--filet-fort);border-radius:6px;
  padding:6px 10px;font:inherit;font-size:13px;line-height:1.4}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--veille);outline:2px solid var(--lampe);outline-offset:1px}
.champ input[readonly],.champ input[disabled],.champ select[disabled],.champ textarea[readonly]{background:var(--surf-2);color:var(--encre-2)}
.champ textarea{min-height:88px;resize:vertical}
.champ .aide{font-size:12px;color:var(--encre-3)}
.champ .err,.err{font-size:12px;color:var(--dg);font-weight:600}
.champ.erreur input,.champ.erreur select,.champ.erreur textarea{border-color:var(--dg)}
.champ.coche{flex-direction:row;align-items:center;gap:var(--e2)}
.champ.coche>label{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--encre)}
.champ input[type="checkbox"],.champ input[type="radio"]{width:15px;height:15px;accent-color:var(--veille);margin:0}
.champ .choix{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);font-size:13px}
.champ .choix label{display:inline-flex;align-items:center;gap:6px}
fieldset.champ{border:0;padding:0;margin:0}
.form .ligne{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5)}
.form .ligne .champ{flex:1 1 200px}
.erreurs{background:var(--dg-f);border:1px solid var(--dg);color:var(--dg);border-radius:var(--r);padding:9px var(--e4);font-size:13px}
.erreurs ul{margin:4px 0 0;padding-left:18px}
/* le filtre d'une liste : un formulaire en ligne, dans la tête d'un bloc */
.filtre{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e3);align-items:end;padding:var(--e3) var(--e4);
  background:var(--surf-2);border-bottom:1px solid var(--filet)}
.filtre .champ{flex:0 1 auto;min-width:120px}
.filtre .champ input:not([type="checkbox"]),.filtre .champ select{padding:4px 8px;font-size:12.5px}
.filtre .bt{align-self:end}

/* ------------------------------------------------------- LES MESSAGES */
.toasts{position:fixed;right:var(--e4);bottom:var(--e4);z-index:70;display:flex;flex-direction:column;gap:var(--e2);max-width:min(420px,90vw)}
.toast{background:var(--surf);color:var(--encre);border:1px solid var(--filet);border-left:4px solid var(--veille);
  border-radius:var(--r);box-shadow:var(--ombre);padding:10px var(--e4);font-size:13px}
.toast.ok,.toast.success{border-left-color:var(--ok)}
.toast.al,.toast.warning{border-left-color:var(--al)}
.toast.dg,.toast.error{border-left-color:var(--dg)}

/* --------------------------------------------------------- LES PAGES */
.pages{display:flex;align-items:center;gap:var(--e2);font-size:12.5px;color:var(--encre-2);flex-wrap:wrap}
.pages a,.pages span.p{border:1px solid var(--filet-fort);border-radius:6px;padding:3px 10px;text-decoration:none;color:var(--encre)}
.pages a:hover{background:var(--surf-2)}
.pages .compte{margin-left:auto;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------- L'ÉTAT VIDE */
/* Un vide dit lequel des trois vides c'est : la récompense, l'attente, le
   manque. Il tient dans un corps de bloc, sans illustration. */
.vide{padding:var(--e5) var(--e4);text-align:center;color:var(--encre-2);font-size:13px}
.vide b{display:block;font-family:var(--display);font-weight:400;font-size:18px;color:var(--encre);margin-bottom:4px}
.vide.ok b{color:var(--ok)}
.vide .bt{margin-top:var(--e3)}

/* ------------------------------------------------ LES ILLUSTRATIONS */
.jauge{height:4px;background:var(--filet-2);border-radius:2px;overflow:hidden}
.jauge i{display:block;height:100%;background:var(--ok);transition:width var(--vue) var(--entree)}
.jauge i.bl{background:var(--dg)}
.jauge i.al{background:var(--al)}
.trame{display:grid;gap:3px}
.grille-jours{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;font-size:12px}
.icone{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.tabulaire{font-variant-numeric:tabular-nums}
.prose{max-width:72ch;font-size:13.5px}
.prose p{margin:0 0 var(--e2)}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4);align-items:start}
.trois{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--e4);align-items:start}
@media(max-width:980px){.deux,.trois{grid-template-columns:1fr}}
.large-etroit{max-width:920px}

/* ------------------------------------------------- LES PAGES SANS PONT */
/* La connexion, l'écran de première ouverture : un seul bloc, centré. */
.seul{min-height:calc(100vh - 50px);display:flex;align-items:center;justify-content:center;padding:var(--e5)}
.seul .bloc{width:min(440px,100%)}

/* ---------------------------------------------------------- LA CARTE */
/* /carte/ : la table des écrans, par rubrique, sans panneau (R-06). */
.carte-rub{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--e4)}

/* ------------------------------------------- LE SIGNAL D'UN BLOC (M-07) */
/* Un bloc dont la SUBSTANCE a bougé pendant qu'on regardait ailleurs : un
   liseré lampe bref, effacé au prochain geste. Pas une pulsation — un poste
   qui pulse partout ne prévient plus de rien. */
.bloc.signal{box-shadow:0 0 0 2px var(--lampe),var(--ombre);animation:bloc-signal 1.6s ease-out 1}
@keyframes bloc-signal{from{box-shadow:0 0 0 5px var(--lampe),var(--ombre)}to{box-shadow:0 0 0 2px var(--lampe),var(--ombre)}}
/* ------------------------------------------ LES LISTES QUI SE COMPTENT */
/* Les composants de liste (templates/composants/ : recherche, raffinement,
   en-têtes, case, compteur, barre, composeur, grille de masse) parlent le
   vocabulaire ci-dessus. Ce qui suit est le peu que la maquette ne dessine
   pas : la colonne calculée qui ne se trie pas, le rang d'un tri multiple,
   la ligne prise ou modifiée, le menu « … » d'une barre, la boîte du
   composeur et de l'édition en masse. Les états sont des attributs data-*,
   jamais des classes : c'est le script qui les pose. */
.tbl th[data-hors-tri]{border-bottom:1px dotted var(--filet-fort);cursor:help}
.tbl th sup{color:var(--veille);font-size:11px;margin-left:2px}
.tbl tr[data-prise]>td{background:var(--veille-f)}
.tbl tr[data-modifiee]>td{background:var(--al-f)}
.tbl td .attente{display:inline-flex;gap:5px;align-items:baseline;margin-left:6px;font-size:12px}
.filtre .note{font-size:12px;color:var(--al);align-self:center}
.filtre .champ.ligne{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}
.filtre .champ.ligne>.l{width:100%}
.barre .pris b{font-variant-numeric:tabular-nums}
.barre .pris span{font-weight:400;color:var(--encre-3);margin-left:var(--e2)}
.barre details{position:relative}
.barre details>summary{list-style:none}
.barre details>summary::-webkit-details-marker{display:none}
.barre details .menu,.barre .autres>div{min-width:240px;
  background:var(--surf);border:1px solid var(--filet);border-radius:var(--r);box-shadow:0 16px 40px -14px rgba(0,0,0,.4);
  padding:var(--e1) 0;display:flex;flex-direction:column}
.barre .autres{box-shadow:none;border:0;background:transparent}
.barre .autres>summary{padding:0}
.barre details .menu a,.barre details .menu button{display:block;width:100%;text-align:left;background:transparent;border:0;
  padding:7px var(--e4);font-size:13px;color:var(--encre);cursor:pointer;text-decoration:none;white-space:nowrap}
.barre details .menu a:hover,.barre details .menu button:hover{background:var(--surf-2)}
.boite{background:var(--surf);color:var(--encre);border:1px solid var(--filet);border-radius:var(--r);padding:0;
  width:min(860px,96vw);max-height:92vh;overflow:auto;box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
.boite::backdrop{background:rgba(10,36,56,.45)}
.boite>.bloc-tete{background:var(--tete);border-bottom:1px solid var(--filet);padding:10px var(--e4);
  display:flex;align-items:baseline;gap:var(--e3);flex-wrap:wrap}
.boite>.bloc-tete h2{margin:0;font-size:13.5px;font-weight:700}
.boite>.bloc-tete .verbe{margin-left:auto}
.boite .corps{padding:var(--e4)}
.boite .barre{position:static;border:0;border-top:1px solid var(--filet);border-radius:0;box-shadow:none}
.boite ul,.boite ol{list-style:none;margin:0;padding:0}
.boite ol li,.boite ul li{display:flex;gap:6px;align-items:center;font-size:12.5px;padding:3px 4px;border-bottom:1px solid var(--filet-2)}
.boite li[data-choisi]{background:var(--veille-f)}
.boite li[data-deja]{color:var(--encre-3)}
.boite details>summary{cursor:pointer;font-size:11.5px;font-weight:700;color:var(--veille);letter-spacing:.02em;padding:4px 0}
.boite .catalogue{max-height:300px;overflow:auto}
.boite .milieu{display:flex;flex-direction:column;gap:6px;justify-content:center}
.boite li .lib{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.boite li .ordre{color:var(--encre-3);font-variant-numeric:tabular-nums;min-width:18px}
button.cadr{background:transparent;border:0;border-right:1px solid var(--filet);text-align:left;cursor:pointer;font:inherit;color:inherit;transition:background var(--etat)}
button.cadr:hover{background:var(--surf-2)}
button.cadr[aria-pressed="true"]{background:var(--lampe-f);box-shadow:inset 0 -3px 0 var(--lampe)}

/* ===================================================================
   L'AUTOCOMPLÉTION DES LISTES DÉROULANTES (portée de static/ux/ux.css,
   03/09/2026). Dix-huit gabarits posent « js-autocomplete » sur un
   <select> de plusieurs centaines de lignes — un site, un agent, une
   société. La feuille ux.css n'est plus chargée par personne : ses deux
   seules règles encore vivantes vivent ici, dans le vocabulaire de la
   maquette (le menu reprend la forme de « .resultats », la longue-vue).
   Le <select> RESTE dans le formulaire : c'est lui qui porte la valeur
   soumise ; seul son affichage cède la place au champ de recherche.
   =================================================================== */
select.js-autocomplete{display:none !important}
.ac{position:relative;display:inline-block;min-width:240px;width:100%}
.ac .ac-champ{width:100%;padding-right:26px}
.ac .ac-fleche{position:absolute;right:9px;top:50%;transform:translateY(-50%);
  pointer-events:none;font-size:9px;color:var(--encre-3)}
.ac-liste{display:none;
  background:var(--surf);border:1px solid var(--filet-fort);border-radius:var(--r);
  box-shadow:var(--ombre);padding:4px}
.ac-liste.ouverte{display:block}
.ac-item{padding:6px 10px;cursor:pointer;font-size:13px;border-radius:6px}
.ac-item.actif,.ac-item:hover{background:var(--lampe-f);color:var(--lampe-s)}
.ac-vide,.ac-plus{padding:6px 10px;font-size:12px;color:var(--encre-3)}


/* ======================================================================
   LA CHARTE DE MOUVEMENT — reprise de static/design/systeme.css le
   03/09/2026, à la remise à la maquette validée. La feuille d'origine n'est
   plus servie par aucun gabarit ; sa charte, elle, vaut toujours, et la
   garde « plateforme/tests_mouvement.py » la lit désormais ICI.

   Les jetons ont pris les noms de la maquette, aux MÊMES valeurs :
     --d-etat → --etat (83 ms) · --d-interne → --interne (167 ms)
     --d-vue → --vue (250 ms) · --c-entree → --entree · --c-sortie → --sortie
   Les deux durées de SORTIE de l'ancienne charte (117 ms, 200 ms) n'ont pas
   de jeton propre : la maquette n'emploie qu'une durée par mouvement, et la
   courbe de sortie suffit à en changer le caractère.

   D'OÙ VIENNENT CES VALEURS. Ce sont celles de WinUI 3 (le système de
   Microsoft) : 83 ms pour un retour d'état, 167 ms pour une transition
   interne, 250 ms pour un changement de vue. On ne les a pas inventées, et
   on ne les renégocie pas à chaque chantier.

   LES QUATRE RÈGLES

   1. RIEN NE BOUGE SANS UN GESTE DE L'UTILISATEUR. Une animation qui part
      toute seule interrompt quelqu'un qui lisait.
   2. RIEN NE BOUGE HORS DU POINT DE REGARD. Un mouvement en périphérie
      capte l'attention de façon quasi réflexe — Pratt, Radulescu, Guo &
      Abrams. C'est un défaut partout, sauf là où l'on VEUT être interrompu.
   3. RIEN AU-DELÀ DE 300 ms. Au-delà d'une demi-seconde, « les animations
      commencent à traîner » (Material, Understanding motion) ; dans un
      outil tenu huit heures par jour la marge doit être plus courte encore,
      et 250 ms suffisent au plus long de nos mouvements. Une garde
      exécutable le vérifie sur TOUTES les feuilles du produit.
   4. prefers-reduced-motion ÉTEINT TOUT, sauf les retours critiques (le
      focus, l'état d'une case) : la règle est en tête de cette feuille.

   CE QU'ON NE FERA PAS, ET POURQUOI — écrit ici pour que personne ne le
   refasse en croyant bien faire :

   · PAS DE SQUELETTES DE CHARGEMENT. L'étude qui les a mesurés contre une
     roue et contre un écran nu les donne PERDANTS sur les quatre
     indicateurs relevés. Un squelette est du travail investi pour faire
     semblant d'être rapide ; le même travail investi sur la requête rend
     l'écran vraiment rapide.
   · PAS DE DÉCALAGE EN CASCADE SUR DE GRANDS GROUPES. Un tableau dont les
     lignes arrivent une à une se lit moins vite, parce que l'œil doit
     attendre la dernière avant de balayer.
   · PAS DE MOUVEMENT LINÉAIRE, sauf ROTATION. Une translation linéaire se
     lit comme mécanique : rien dans le monde physique ne démarre et ne
     s'arrête à vitesse constante. Une roue d'attente, si.
   · UN SEUL COMPTEUR ANIMÉ DANS TOUT LE PRODUIT, au poste de commandement,
     et --d-compteur (400 ms) est la seule durée du produit à dépasser
     300 ms avec l'alarme. Elle est nommée, et la garde l'accepte à ce
     titre : un chiffre qui monte n'est pas une transition, c'est une
     LECTURE — on doit avoir le temps de lire d'où il vient.

   LES DEUX SEULES EXCEPTIONS, ET ELLES SONT NOMMÉES. --d-alarme est le
   pouls du SOS d'un travailleur isolé, la SEULE animation du produit qui
   démarre sans geste de l'utilisateur : la règle n° 2 y est délibérément
   retournée.
   ====================================================================== */
:root{
  --d-compteur:400ms;
  --d-alarme:2400ms;
}

/* ===================================================================
   LES EN-TÊTES D'UNE GRANDE MATRICE COLLENT (repris de static/droits/
   droits.css le 03/09/2026). Le défaut tenait en une ligne : sur la
   matrice des droits — 44 lignes sur sept colonnes —, on perdait le nom
   du groupe par le haut et le nom du droit par la gauche dès qu'on
   défilait, et une case cochée ne voulait plus rien dire. Le « sticky »
   se pose sur la CELLULE d'en-tête, jamais sur le <thead> : les
   navigateurs ne collent pas un <thead>. La garde
   « perimetre/tests.py::test_les_entetes_verticaux_restent_quand_on_defile »
   éprouve la feuille en plus du gabarit — des classes sans cette règle
   ne sont que des noms.
   =================================================================== */
.cadre{max-height:none}
.cadre .tbl thead th{position:sticky;top:0;z-index:2}

/* ===================================================================
   LE CHAMP QUI INTERROGE — la forme du sélecteur des éditions, portée
   ici le 03/09/2026 (décision A-08). Elle vivait dans un <style> de
   templates/editions/index.html avec six classes « cr- » à elle
   seule ; la garde refuse désormais l'un et l'autre. Le composant est
   un ``.champ`` comme les autres : ce qui reste ci-dessous est le seul
   supplément que la maquette ne dessine pas — une liste de propositions
   qui se pose SOUS la saisie sans pousser le reste du formulaire.

   Les accroches sont des ``data-*`` et non des classes : le script
   (static/editions/selecteur.js) lit un contrat, pas un vocabulaire de
   forme, et l'on peut donc changer l'un sans casser l'autre.
   =================================================================== */
.champ[data-selecteur]{position:relative}
.champ [data-saisie]{width:100%}
/* Le champ REMPLI se distingue du champ où l'on a seulement TAPÉ : c'est la
   différence entre « un nom est écrit » et « une ressource est retenue », et
   c'est elle qui décide si le bouton produira un document ou un 404. */
.champ[data-rempli] [data-saisie]{border-color:var(--ok);box-shadow:inset 2px 0 0 var(--ok)}
.champ [data-liste]{padding:2px;
  list-style:none;background:var(--surf);color:var(--encre);
  border:1px solid var(--filet-fort);border-radius:var(--r);box-shadow:var(--ombre)}
.champ [data-liste] li{padding:5px 8px;font-size:12.5px;cursor:pointer;display:flex;
  justify-content:space-between;gap:var(--e3);border-radius:4px}
.champ [data-liste] li:hover,.champ [data-liste] li[data-actif]{background:var(--surf-2)}
.champ [data-liste] li span{color:var(--encre-3);font-size:11.5px;white-space:nowrap}
/* « 20 propositions sur 63 — précisez » : le champ DIT ce qu'il a écarté.
   La hauteur est réservée pour qu'un message n'agrandisse pas le formulaire. */
.champ [data-message]{min-height:14px}

/* ==========================================================================
   LES PORTAILS — 04/09/2026
   Ce que voient ceux qui ne sont pas de l'exploitation : l'agent, le manager,
   le client, le partenaire, la recrue. Ils partagent les jetons, les fontes,
   le bloc, la table, la barre et le champ du back-office — et RIEN de sa
   coquille : pas de mât des onze rubriques, pas de colonne des possibilités,
   pas de longue-vue. Un porteur de portail a un rôle et cinq écrans ; lui
   servir la charpente de l'exploitation lui donnerait un produit qui n'est
   pas le sien.
   Chaque lot écrit SOUS son propre repère, et nulle part ailleurs : trois
   équipes travaillent ici en parallèle.
   ====================================================================== */

/* --- REPÈRE LOT A : espace agent (mobile d'abord) ---------------------- */
/* L'espace agent se tient dans UNE MAIN. Il prend tout le système de Hune —
   jetons, fontes, bloc, table, jeton, cadrans, barre, champ, vide — et rien
   de sa coquille. Ce qui suit est le seul supplément que la feuille ne
   portait pas, et il tient en une phrase : le back-office se dessine pour une
   souris posée sur un écran large, celui-ci pour un pouce sur 375 px, la
   nuit, parfois ganté. On n'a modifié aucune règle existante : tout est
   ajouté, et porté par « po-mobile » sur le corps de page, donc sans effet
   ailleurs. */

/* L'ÉCRAN — une colonne, jamais deux. « large » (la troisième colonne du
   pont) ne convenait pas : elle paie 24 px de marge sur trois côtés, et sous
   900 px sa règle lui retire les 64 px de pied — justement là où la rangée
   d'onglets vient les réclamer. */
.po-ecran{max-width:640px;margin:0 auto;min-width:0;
  padding:var(--e4) var(--e3) var(--e5);display:flex;flex-direction:column;gap:var(--e4)}
/* La rangée d'onglets est fixe : le corps lui réserve sa hauteur, sinon le
   dernier bloc de chaque écran finit dessous et ne se lit jamais. */
body.po-tabs{padding-bottom:calc(64px + env(safe-area-inset-bottom))}

/* LES CIBLES SE PRENNENT AU POUCE : 44 px, la borne d'accessibilité mobile.
   Les commandes du back-office font 26 px de haut — c'est juste pour une
   souris et faux pour un doigt. On ne touche pas à leur règle : on les
   grandit ici, et seulement dans l'espace agent. */
.po-mobile .bt,.po-mobile .b-nuit,.po-mobile .b-coque,.po-mobile .pages a{
  min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.po-mobile .bt{padding:9px var(--e4);font-size:13.5px}
.po-mobile .autres summary,.po-mobile .lien{min-height:44px}
/* 16 px sur une saisie : en dessous, l'iPhone zoome tout seul à la mise au
   point et l'agent perd la page qu'il remplissait. */
.po-mobile .champ input:not([type="checkbox"]):not([type="radio"]),
.po-mobile .champ select,.po-mobile .champ textarea{min-height:44px;font-size:16px}
.po-mobile .champ input[type="checkbox"],.po-mobile .champ input[type="radio"]{width:22px;height:22px}
/* Le bandeau de la maquette, resserré : sur 375 px, 16 px de gouttière entre
   la marque et le nom coupait le nom en deux. */
.po-mobile .bandeau{padding:6px var(--e3);gap:var(--e2)}
.po-mobile .quart{gap:var(--e2)}

/* LA RANGÉE D'ONGLETS EST EN BAS, ET ELLE Y RESTE. C'est la géométrie
   d'aujourd'hui et c'est la bonne : le pouce atteint le bas de l'écran sans
   changer la prise du téléphone. « onglets » donne le vocabulaire (l'onglet
   courant, sa lampe) ; ce qui suit ne fait que la poser en bas, répartir ses
   sept onglets à parts égales et retourner le signe de l'onglet courant vers
   le haut — au ras du bas, un liseré passe sous la barre du système. */
.po-onglets{position:fixed;left:0;right:0;bottom:0;z-index:30;gap:0;
  background:var(--surf);border-top:1px solid var(--filet);border-bottom:0;
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 14px -6px rgba(16,40,52,.24)}
.po-onglets a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;min-height:52px;
  padding:5px 0;font-size:11px;line-height:1.15;text-align:center;
  border-bottom:0;border-top:2px solid transparent}
.po-onglets a i{font-style:normal;font-size:18px;line-height:1}
/* Un mot d'onglet ne déborde pas sur son voisin : à sept onglets, une cellule
   fait 53 px et « Équipements » n'y tient pas d'un seul tenant. */
.po-onglets a span{display:block;width:100%;overflow-wrap:anywhere;hyphens:auto}
/* L'onglet courant se dit par la lampe, son fond et sa couleur — PAS par la
   graisse : en gras, « Demandes » ne tient plus dans une cellule de 53 px et
   se coupe en deux. C'est la règle déjà retenue pour la colonne des
   possibilités : une graisse de plus déforme la liste. */
.po-onglets a[aria-current="page"]{border-top-color:var(--lampe);background:var(--lampe-f);font-weight:400}
/* LA BARRE NE COLLE PAS ICI. Dans le back-office elle suit le regard sur un
   écran large ; sur 375 px, collée en bas, elle s'ajoute aux onglets et au
   pastillon SOS — trois barres superposées sur un tiers de l'écran, et le
   bouton d'envoi passait SOUS le SOS. Elle garde donc son vocabulaire et sa
   forme, et se pose à la fin du formulaire, là où le pouce arrive en dernier. */
.po-mobile .barre{position:static;box-shadow:none}
/* Les messages passent au-dessus des onglets : collés à zéro, ils se rangeaient
   derrière et l'on ne les lisait jamais. */
body.po-tabs .toasts{bottom:calc(72px + env(safe-area-inset-bottom));right:var(--e3);left:var(--e3)}

/* LE SOS FLOTTE AU-DESSUS DES ONGLETS (décision Q12 du 07/08/2026). Il ne
   peut pas être un « bt » : celui-ci doit se trouver sans être cherché, d'un
   pouce, dans le noir, et il n'est pas une commande d'écran mais le seul
   geste qui vaut sur toutes les pages.
   LE ROUGE EST ÉCRIT EN CLAIR, et c'est voulu : « --dg » s'éclaircit la nuit
   (#F0917C) pour rester lisible EN TEXTE sur fond sombre — en APLAT, il ne
   porterait plus de blanc. Le pastillon garde donc le rouge du jour dans les
   deux thèmes. C'est le seul aplat rouge du produit. */
.po-sos{position:fixed;right:var(--e3);z-index:35;
  bottom:calc(70px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;min-height:56px;padding:0 var(--e5);
  background:#A8321E;color:#fff;border:2px solid var(--surf);border-radius:999px;
  font-weight:700;font-size:17px;letter-spacing:.06em;text-decoration:none;
  box-shadow:0 6px 20px -4px rgba(0,0,0,.45)}
.po-sos:hover,.po-sos:active{color:#fff;background:#8E2917}
/* Le numéro d'urgence DU SITE, à gauche du pastillon : l'agent qui a besoin
   d'aide est SUR le site, et c'est son PC sécurité qui le rejoint en trois
   minutes. Un numéro rangé dans un onglet est un numéro qu'on ne trouve pas. */
.po-urgence{position:fixed;left:var(--e3);z-index:35;
  bottom:calc(70px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:center;min-height:56px;
  padding:6px var(--e4);background:var(--surf);color:var(--encre);
  border:1px solid var(--filet-fort);border-radius:999px;text-decoration:none;
  line-height:1.15;box-shadow:var(--ombre)}
.po-urgence span{font-size:11px;color:var(--encre-3)}
.po-urgence b{font-size:15px;font-variant-numeric:tabular-nums}
/* L'écran du SOS : le bouton EST la page. 140 px de haut, atteignable sans
   viser, et le mot écrit dedans — la couleur seule ne dit jamais rien. */
.po-sos-grand{width:100%;min-height:140px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--e2);border:0;
  border-radius:var(--r);background:#A8321E;color:#fff;cursor:pointer;
  box-shadow:0 8px 26px -8px rgba(0,0,0,.5)}
.po-sos-grand b{font-size:46px;font-weight:700;letter-spacing:.1em;line-height:1}
.po-sos-grand span{font-size:15px;font-weight:600}
.po-sos-grand[disabled]{opacity:.75;cursor:default}

/* La photo de « Ma fiche » : une preuve d'identité, pas une vignette. Le seul
   portrait de la feuille vit dans « echine », l'os d'un dossier de
   back-office, que le portail n'a pas. */
.po-photo{width:84px;height:84px;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--filet)}
/* La teinte de l'activité, posée par « data-fond » (static/planning/palette.js,
   le mécanisme des couleurs paramétrées par l'exploitant) : elle accompagne
   toujours le libellé, jamais seule. */
.po-teinte{display:inline-block;width:10px;height:10px;border-radius:3px;
  background:var(--filet-fort);margin-right:6px;vertical-align:-1px}
/* --- fin lot A --------------------------------------------------------- */

/* --- REPÈRE LOT B : espace manager ------------------------------------- */
/* L'espace manager est le JUMEAU de l'espace agent : même base mobile, même
   bandeau, même rangée d'onglets en bas, même bascule de thème dans le
   navigateur. Il reprend donc « po-ecran », « po-mobile », « po-tabs » et
   « po-onglets » du lot A tels quels, et n'ajoute que ce qu'aucune classe de la
   feuille ne sait dire. Trois choses, et chacune tient à la même cause : le
   back-office se dessine pour une souris sur un écran large, celui-ci pour un
   pouce sur 375 px, souvent en plein soleil. */

/* LA GRAVITÉ D'UN BLOC. La doctrine interdit la table dense ici : une liste de
   choses sur lesquelles on agit devient une pile de blocs. Or la feuille ne
   sait dire la gravité que dans une TABLE (« tr.g », « tr.m » et leur liseré) —
   un bloc n'a pas d'équivalent. Sans lui, la seule marque de gravité d'une
   pile de dix vacations serait le jeton, qui se lit mais ne se BALAIE pas : on
   ne trouve plus d'un coup d'œil le site que personne ne tient. Les deux
   lettres sont celles de la table, préfixées, pour que le vocabulaire reste
   celui de la maquette. */
.bloc.po-g{border-left:4px solid var(--dg)}
.bloc.po-m{border-left:4px solid var(--al)}

/* LES DEUX VUES D'UNE LISTE (« à traiter » / « toutes »). C'est la rangée
   d'onglets de la maquette, et elle en garde le vocabulaire et la lampe ; ce
   qui suit ne fait que la rendre prenable au pouce. « onglets » pose 8 px de
   marge haute et basse, soit 34 px de cible : juste pour une souris, faux pour
   un doigt. On ne touche pas à sa règle — et surtout pas par « .po-mobile
   .onglets a », qui redescendrait du même coup la rangée du bas du lot A. */
.po-vues a{min-height:44px;display:inline-flex;align-items:center;padding-left:var(--e4);
  padding-right:var(--e4)}

/* LE GROUPE DE CHOIX, UNE OPTION PAR RANG. « choix » range les options en
   rangée, à leur hauteur naturelle — 22 px, et deux verdicts de six mots ne
   tiennent pas côte à côte sur 375 px. Le constat de terrain est LE geste de
   cet espace : ses deux réponses ont le même prix, donc la même cible. */
.po-choix{flex-direction:column;gap:var(--e2)}
.po-choix label{min-height:44px;font-size:14px}
/* --- fin lot B --------------------------------------------------------- */

/* --- REPÈRE LOT C : portail client et portail partenaire --------------- */
/* LE CLIENT ET LE PARTENAIRE NE SONT PAS DES PRODUITS DE TÉLÉPHONE, et c'est
   la seule chose qui les sépare des lots A et B. Un donneur d'ordre relit un
   mois de prestations et rapproche des heures ; un sous-traitant accepte des
   bons de commande, affecte ses agents et contrôle un récapitulatif de
   facturation avant d'émettre sa facture. Ce sont des matrices de nombres, sur
   un écran de bureau. Ces deux portails prennent donc la géométrie du
   back-office telle quelle — « pont » à l'étage 0, « large », « onglets » en
   haut, « tbl », « cadrans », « barre », « form » — et n'ajoutent RIEN d'autre
   que la borne ci-dessous. Ils réemploient au passage « po-g » et « po-m » du
   lot B là où une liste de choses sur lesquelles on agit reste une pile de
   blocs (les demandes du client) : la gravité d'un bloc ne se dit nulle part
   ailleurs dans la feuille.

   LA BORNE DE L'ÉCRAN. « large » est la TROISIÈME COLONNE du pont et n'a pas
   de largeur maximale : ce sont les 500 px des deux colonnes de gauche qui la
   bornent, et le back-office n'a donc jamais eu besoin de le dire. Un portail
   n'a aucune de ces colonnes : sans borne, sur un 1920 px, un bandeau de trois
   cadrans donne trois nombres de 620 px de large, une phrase de verdict perdue
   au milieu d'une ligne vide, et un œil qui doit traverser tout l'écran pour
   relier la première colonne d'une table à la dernière. 1280 px tient les dix
   colonnes du récapitulatif de facturation sans ascenseur, et laisse la ligne
   de texte à une longueur qui se lit. */
.po-large{max-width:1280px;width:100%;margin:0 auto}
/* --- fin lot C --------------------------------------------------------- */

/* --- REPÈRE LOT D : le dossier de recrue ------------------------------- */
/* LE DOSSIER DE RECRUE EST UN PRODUIT DE TÉLÉPHONE, comme les espaces agent et
   manager et contrairement aux portails client et partenaire. La recrue n'est
   pas encore salariée : elle n'a ni poste de travail, ni compte, ni bureau ;
   elle reçoit un courriel et l'ouvre là où elle lit ses courriels. Le geste le
   plus lourd du parcours — déposer une pièce — est d'ailleurs un geste de
   téléphone : on PHOTOGRAPHIE sa carte professionnelle, on ne la numérise pas.
   Et rien ici n'est une matrice de nombres à comparer, la seule table du
   parcours ayant trois colonnes. Ce lot reprend donc « po-mobile » et
   « po-ecran » du lot A tels quels, et n'ajoute que les deux choses ci-dessous.
   Il ne prend en revanche NI « po-tabs » NI « po-onglets » : le parcours de la
   recrue est linéaire (le sommaire, une section, la suivante, les pièces, la
   relecture, l'envoi), et une rangée d'onglets fixe promettrait un va-et-vient
   qui n'existe pas tout en mangeant 64 px sur un écran où l'on saisit du
   texte. */

/* LE PIED DU PORTAIL. Il porte, sur CHAQUE page, les deux réponses à la
   question que se pose quelqu'un qui va taper son numéro de sécurité sociale
   sur un site qu'il ne connaît pas : où lire ce qu'on fait de ses données, et
   par quoi elles voyagent. Aucune classe de la feuille ne dit cela : « glose »
   colle au bas d'une liste et lui appartient, « bloc-pied » exige d'être dans
   un bloc, et « note » n'existe que dans une barre ou un filtre. Le
   back-office, lui, n'a pas de pied du tout — il finit sur « Et ensuite ». */
.po-pied{border-top:1px solid var(--filet);padding-top:var(--e3);
  font-size:12px;color:var(--encre-3)}

/* LES ÉTAPES DU DOSSIER. Le sommaire est un INDEX — des portes qu'on ouvre —
   et c'est la forme que le lot C a retenue pour les sites du donneur d'ordre.
   Mais chaque porte porte ici trois choses de plus que l'index ne sait pas
   empiler : son état, la phrase qui dit ce qu'on y demande, et parfois la
   correction que la RH réclame. « ix » est une rangée d'UNE ligne, et
   « index » range ses rangées en autant de colonnes que la largeur en tient.
   Ni l'un ni l'autre ne convient tel quel, et on ne touche à aucune de leurs
   deux règles : ce qui suit ne fait que les tenir, sous une classe qui n'existe
   que sur cet écran-là. */
/* UNE SEULE COLONNE, à toute largeur. Sur 640 px, « index » en formait deux et
   les hauteurs de rangée s'égalisaient sur la plus haute : une étape courte
   traînait alors sa phrase 40 px sous son titre, comme si un élément manquait
   entre les deux. Et une liste qu'on descend en cochant ne se lit pas en
   serpentin. */
.po-etapes{grid-template-columns:1fr}
/* LA RANGÉE PASSE À LA LIGNE, et sa cible monte à 44 px — la borne du pouce,
   comme partout dans les portails de téléphone. */
.po-etapes .ix{flex-wrap:wrap;align-items:center;row-gap:3px;min-height:44px;
  padding-top:9px;padding-bottom:9px}
/* L'état à droite, là où l'œil le balaie d'une colonne. */
.po-etapes .jeton{margin-left:auto}
/* La phrase et la correction prennent le rang suivant, en entier : coupées en
   colonne, elles ne se lisent pas — et une demande de correction qu'on ne lit
   pas est un dossier qui repart en l'état. */
.po-etapes .pq,.po-etapes .err{flex:1 1 100%;font-size:12px}
.po-etapes .pq{color:var(--encre-3)}
/* --- fin lot D --------------------------------------------------------- */

/* --- REPÈRE CORRECTIONS DE PORTAIL, 05/09/2026 ------------------------- */

/* LE LOGO DES ÉCRANS DE CONNEXION — la seule règle de ce chantier.

   Décision du dirigeant du 05/09/2026 : le remettre. Le logo de 72 px avait
   disparu des six écrans où l'on n'est pas encore identifié — les quatre
   connexions (client, partenaire, agent, manager) et les deux « mot de passe
   oublié ». C'est le seul endroit du produit où le bandeau ne suffit pas :
   quelqu'un qui suit un lien reçu par courriel et à qui l'on demande un mot de
   passe a besoin de reconnaître la maison AVANT de le taper. Un mot en 22 px
   dans une coque sombre ne fait pas cela ; une marque le fait.

   POURQUOI UNE CLASSE, ET POURQUOI CELLE-CI SEULEMENT. Rien dans « hune.css »
   ne posait une image centrée : « marque » habille du texte sur la coque,
   « portrait » est le rond d'un dossier, « icone » est un pictogramme de
   20 px collé devant un mot. Les trois auraient menti sur ce que l'élément
   est. La classe ne fait rien d'autre que ce que son nom dit — poser l'image,
   la centrer, l'écarter de ce qui l'entoure.

   ELLE EST DANS LA CARTE, PREMIÈRE, AVANT « bloc-tete ». Au-dessus, il aurait
   fallu une SECONDE règle : « seul » centre UN élément et le dimensionne par
   « seul .bloc » ; lui en donner deux demandait d'empiler puis de borner la
   pile, faute de quoi le logo se centrait sur la page pendant que la carte
   restait à gauche. Dans la carte, il se cadre sur ses 440 px tout seul.

   72 px : la taille à laquelle l'écusson se lit encore sur un téléphone tenu
   à bout de bras, et celle que les bases déclarent déjà en
   « apple-touch-icon » — c'est le même fichier, servi à la même échelle. */
.po-logo{display:block;width:72px;height:72px;margin:var(--e5) auto var(--e4)}

/* --- fin corrections de portail ---------------------------------------- */

/* --- REPÈRE MAIN COURANTE MOBILE : les dix écrans du terrain ---------- */
/* LA MAIN COURANTE EST LE SIXIÈME PORTAIL DE TÉLÉPHONE, et le dernier arbre
   passé à la forme Hune (05/09/2026). Elle vit sous « /moncompte/ », étend la
   base de l'espace agent et reprend donc, TELS QUELS, « po-mobile »,
   « po-ecran », « po-tabs » et « po-onglets » du lot A, « po-g » et « po-m » du
   lot B, « po-teinte », « po-sos » et « po-urgence ». Ses dix écrans se disent
   avec le vocabulaire de la feuille — bloc, table absente, jeton, champ, barre,
   vide, alarme, lien, pr, ch-p — et n'ont eu besoin que des DEUX règles
   ci-dessous, chacune née d'un défaut vu à la capture en 375 px. */

/* L'HEURE TIENT LE RANG DU NOMBRE. Une main courante est un JOURNAL : ce qu'on
   y balaie du pouce, c'est l'heure, et « pr » (« ce qui presse : le nombre
   d'abord, et il est gros ») est la seule liste de la feuille qui donne au
   nombre ce rang-là. Mais « pr-n » a été écrit pour un compte à un ou deux
   chiffres : il ne se réserve que 44 px et, faute de le lui interdire, il
   rétrécit sous son contenu — « 12:46 » en demande 70 et se couchait sur le
   titre de l'événement. On ne touche pas à sa règle, qui sert l'accueil de
   l'agent et celui du manager : on lui interdit de rétrécir, ici seulement. */
.po-heure{flex:none}

/* LA FICHE DE TERRAIN : L'ÉTIQUETTE AU-DESSUS DE SA VALEUR. « champs » range
   ses paires en deux colonnes (« auto 1fr »), ce qui est juste quand la valeur
   est une date, un horaire ou un état — le rapport de vacation et le point de
   contrôle la gardent telle quelle. Ce l'est beaucoup moins quand la valeur est
   une PHRASE et l'étiquette un numéro d'événement de vingt-deux caractères :
   sur 375 px, le numéro prend la moitié du rang et la synthèse d'une passation
   se lit dans un ruban de 150 px, trois mots par ligne. C'est le même remède
   que l'échine d'un dossier applique déjà sous 520 px — mais sa règle
   appartient à l'échine, qu'un portail n'a pas, et élargir « champs » lui-même
   déformerait toutes les fiches du back-office. La classe ne vaut donc que là
   où on la pose. */
dl.po-fiche{grid-template-columns:1fr}
dl.po-fiche dt{margin-top:var(--e2)}
dl.po-fiche dt:first-child{margin-top:0}
/* --- fin main courante mobile ------------------------------------------ */

/* ------------------------------------------------ LA MODALE DE CONFIRMATION
   Écrite le 05/09/2026, et c'est une réparation. « static/ux/dialogues.js »
   parlait encore le vocabulaire de la feuille d'avant la refonte du 03/09 —
   « btn », « dlg-titre » — et aucun gabarit ne le chargeait : tout geste passant
   par une confirmation échouait EN SILENCE (générer le mois, affecter par
   trame, désaffecter, déroger, supprimer une vacation, remplacer). Un audit
   métier l'a trouvé en cliquant ; aucun test ne le voyait, parce qu'un test
   appelle l'API et ne clique pas.

   POURQUOI UNE MODALE ET NON UN BLOC DE PLUS. Ce dialogue interrompt un geste
   en cours pour demander « êtes-vous sûr » ou « pourquoi » : il doit prendre la
   main et la rendre. Un bandeau dans la page se lit après coup, quand le geste
   est déjà parti. */
.modale-fond{position:fixed;inset:0;z-index:80;display:flex;align-items:center;
  justify-content:center;padding:var(--e4);background:rgba(11,58,80,.45);
  animation:modale-paraitre var(--vue) var(--entree)}
@keyframes modale-paraitre{from{opacity:0}to{opacity:1}}
.modale{width:min(520px,100%);max-height:85vh;overflow:auto;background:var(--surf);
  color:var(--encre);border:1px solid var(--filet-fort);border-radius:var(--r);
  box-shadow:0 12px 40px -12px rgba(11,58,80,.5)}
.modale-tete{padding:var(--e4) var(--e4) 0}
.modale-tete h2{font-family:var(--display);font-weight:400;font-size:18px;margin:0}
.modale-corps{padding:var(--e3) var(--e4) var(--e4)}
.modale-corps p{margin:0 0 var(--e3);color:var(--encre-2);font-size:13px}
.modale-corps p:last-child{margin-bottom:0}
.modale-corps .dlg-champ{width:100%;padding:6px 9px;font:inherit;font-size:13px;
  color:var(--encre);background:var(--surf);border:1px solid var(--filet-fort);
  border-radius:5px}
.modale-corps .dlg-champ:focus{outline:2px solid var(--lampe);outline-offset:1px}
.modale-pied{display:flex;justify-content:flex-end;gap:var(--e3);
  padding:var(--e3) var(--e4) var(--e4)}
@media (prefers-reduced-motion:reduce){.modale-fond{animation:none}}

/* ======================================================================
   REPÈRE COQUILLE CONTEXTUELLE — 06/09/2026

   LE DÉFAUT CORRIGÉ (audit du modèle d'affichage, Q-01, Q-02, Q-07, Q-08).
   La coquille était une fonction de l'adresse : les 25 liens de la colonne,
   leurs adresses et ses 1 008 px étaient identiques sur la liste des agents
   et sur le dossier de BENALI Karim ; le bandeau écrivait l'heure ; le fil
   écrivait « AGENTS ». Sur les 892 px de large et les 320 px de haut que la
   coquille prenait avant la première ligne de contenu, pas un pixel ne
   parlait de l'agent ouvert.

   CE QUE CETTE SECTION POSE :
     · un bandeau à QUATRE QUARTIERS et à HAUTEUR CONSTANTE de 56 px — une
       hauteur qui varierait à l'ouverture d'un dossier déplacerait tout
       l'écran, et l'on perdrait au repérage ce qu'on gagne à la lecture ;
     · la ligne de bascule de la colonne, 30 px, toujours au même pixel ;
     · les quatre blocs de la colonne d'objet ;
     · les gouttières de « main », ramenées de 24 px à 16 px : cinq espaces
       de 24 px séparaient cinq bandes qui, réunies, faisaient 160 px de
       matière — la coquille interne était aérée à 43 % de vide (Q-08).
   ====================================================================== */

/* ---- LE BANDEAU : quatre quartiers, 56 px, jamais deux rangées -------- */
/* Il enveloppait ses éléments (« flex-wrap:wrap ») : à 1280 px, la ligne
   passait à deux et le pont descendait de 44 px sans prévenir. Une hauteur de
   bandeau qui dépend de la largeur de la fenêtre n'est pas un repère. */
.bandeau{height:56px;min-height:56px;flex-wrap:nowrap;row-gap:0;overflow:hidden;
  gap:var(--e3);padding:0 var(--e4)}
.bandeau>.marque{flex:0 0 auto;min-width:96px}
.pont{min-height:calc(100vh - 56px)}
.rubs,.poss{top:56px;height:calc(100vh - 56px)}

/* QUARTIER B — LA RÉFÉRENCE : « qu'est-ce que je regarde ? »
   IL NE SE RÉDUIT JAMAIS (min 320 px) : c'est la seule réponse que la
   coquille doive à l'utilisateur, et la première qu'il cherche. */
.b-ref{flex:1 1 auto;min-width:320px;display:grid;
  grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;
  align-items:baseline;column-gap:var(--e2);overflow:hidden}
.b-ref .chaine{grid-column:1/-1;display:flex;align-items:center;gap:4px;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#A7C6D3;
  white-space:nowrap;overflow:hidden}
.b-ref .chaine a{color:#A7C6D3;text-decoration:none;max-width:22ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.b-ref .chaine a:hover{color:var(--lampe);text-decoration:underline}
.b-ref .chaine span{color:rgba(255,255,255,.35)}
/* LE NOM DE L'OBJET — écrit UNE SEULE FOIS dans toute la page. */
.b-ref .nom{font-family:var(--display);font-weight:500;font-size:16px;line-height:1.1;
  color:#FFFFFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.b-ref .ecran{font-family:var(--display);font-weight:400;font-size:16px;line-height:1.1;
  color:#EAF3F6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;grid-column:1/-1}
.b-ref .sous{font-size:11.5px;color:#A7C6D3;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:28ch}
/* LE FEUILLETAGE, COLLÉ AU NOM : il répondait à « où en suis-je dans la
   pile ? » au milieu de vingt-six verbes, où personne ne le lisait. */
.b-ref .feuille{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;
  color:#A7C6D3;font-variant-numeric:tabular-nums;white-space:nowrap}
.b-ref .feuille a{color:#D6E7EC;text-decoration:none;padding:0 4px;border-radius:4px}
.b-ref .feuille a:hover{background:rgba(255,255,255,.14)}
/* D-36 : la flèche éteinte est un « span », plus un lien vide. */
.b-ref .feuille a[aria-disabled="true"],
.b-ref .feuille span[aria-disabled="true"]{color:rgba(255,255,255,.28);
  pointer-events:none;padding:0 4px}
.b-ref .feuille b{font-weight:400}

/* QUARTIER C — L'ÉTAT : il NE PORTE QUE DES LECTURES. Un jeton ne se clique
   pas ; son geste est dans la colonne, sous « ce que ce dossier réclame ». */
/* LES JETONS SONT RANGÉS PAR GRAVITÉ, ET LE DÉBORDEMENT COUPE PAR LA FIN.
   Alignés à droite, c'était l'INVERSE : le premier jeton — celui qui empêche —
   sortait de la boîte par la gauche et se faisait couper, pendant que les
   jetons verts restaient entiers. Ce qui empêche se lit toujours en entier. */
/* UN JETON EST ENTIER OU IL N'EST PAS. Les quatre jetons écrits en entier
   demandent plus de place que le bandeau n'en a à 1 440 px. Deux mauvaises
   réponses ont été essayées et mesurées : les aligner à droite coupait le
   PREMIER — celui qui empêche — par la gauche ; les laisser rétrécir rendait
   « Co… » et « Sou… », c'est-à-dire du bruit à la place d'une lecture.
   La bonne réponse est le retour à la ligne dans une boîte d'UNE ligne de
   haut : un jeton qui ne tient pas passe à la ligne suivante, qui n'existe
   pas. On ne montre donc que des jetons entiers, dans l'ordre de gravité, et
   les autres restent lisibles dans l'échine du dossier. */
.b-etat{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;
  justify-content:flex-start;overflow:hidden;flex-wrap:wrap;height:20px;
  align-content:flex-start}
.b-etat .jeton{flex:0 0 auto;max-width:30ch;overflow:hidden;text-overflow:ellipsis;
  font-weight:400;font-size:11px;padding:2px 8px;line-height:16px}
.b-etat .jeton b{font-weight:700;margin-left:3px}
/* LA RÈGLE DE RÉDUCTION DU QUARTIER C, ET ELLE NE PERD JAMAIS CE QUI EMPÊCHE.
   Les quatre jetons écrits en entier demandent environ 540 px ; sous 1 600 px
   de fenêtre, le poste et la référence n'en laissent pas autant. On réduit
   donc par le SENS et non par une ellipse : sur les deux tons qui ne
   réclament rien — le vert « c'est en règle » et le gris « rien à signaler » —
   la couleur porte déjà l'information, et la valeur passe en infobulle. Ce
   qui EMPÊCHE (rouge) et ce qui ALERTE (ambre) garde sa valeur écrite, à
   toutes les définitions. Une ellipse au milieu d'une date aurait fait
   l'inverse : elle coupe d'abord ce qui compte, parce qu'elle coupe la fin. */
@media(max-width:1600px){.b-etat .j-ok b,.b-etat .j-in b{display:none}}
/* À 1280 px, le quartier C se réduit à ce qui EMPÊCHE. Le quartier B, lui,
   ne se réduit jamais : c'est la réponse à « qu'est-ce que je regarde ? ». */
@media(max-width:1280px){.b-etat .j-ok,.b-etat .j-in{display:none}}
@media(max-width:1100px){.b-etat{display:none}}

/* QUARTIER D — LE POSTE : inchangé, et c'est voulu. C'est le seul repère qui
   ne doit jamais bouger. */
.b-poste{flex:0 0 auto;display:flex;align-items:center;gap:var(--e3);margin-left:auto}
.b-poste .longuevue{max-width:150px;min-width:110px;padding:5px 12px}
.b-poste .quart{margin-left:0;flex-wrap:nowrap;gap:var(--e2)}
/* CE QUE LE POSTE CÈDE, ET DANS QUEL ORDRE. Il ne perd aucune fonction : le
   mot « La carte » passe en infobulle derrière son icône, la date passe
   derrière l'heure — la date du jour est la seule chose du bandeau que
   personne ne vient y chercher. L'heure, elle, fait foi pour un pointage et
   ne bouge jamais. */
@media(max-width:1600px){.b-poste .b-coque .mot{display:none}
  .b-poste .quart .date{display:none}}
@media(max-width:1280px){.b-poste .longuevue{max-width:120px}}

/* ---- LA BASCULE DE LA COLONNE : une ligne de 30 px, toujours la première,
   toujours au même pixel. ELLE DIT TOUJOURS CE QU'ON OBTIENDRA, avec le
   nombre — jamais « Basculer », jamais une icône seule. ------------------ */
.poss .bascule{margin:0;border-bottom:1px solid var(--filet)}
.poss .bascule button{display:flex;align-items:center;gap:6px;width:100%;height:30px;
  background:transparent;border:0;padding:0 var(--e4);cursor:pointer;text-align:left;
  font:inherit;font-size:12px;color:var(--encre-2);white-space:nowrap;overflow:hidden}
.poss .bascule button:hover{background:var(--surf-2);color:var(--encre)}
/* CE QUI SE COUPE EN PREMIER EST LA PHRASE, JAMAIS LE NOM. À 1 280 px la
   colonne fait 248 px et la ligne en demande 267 : quelque chose doit céder.
   Ce n'est pas le nom — c'est LUI la réponse à « qu'obtiendra-t-on ? ». */
.poss .bascule button b{flex:0 0 auto;font-weight:700;color:var(--encre)}
.poss .bascule button .quoi{flex:0 1 auto;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.poss .bascule .chevron{color:var(--veille);font-size:11px}

/* ---- « CE QUE CE DOSSIER RÉCLAME » : hauteur FIXE de trois lignes.
   La hauteur ne dépend jamais des données — c'est la condition pour que
   « Modifier sa fiche », juste dessous, soit au même pixel tous les jours. */
/* TRENTE PIXELS PAR LIGNE, ET PAS UN DE PLUS : la hauteur du bloc est
   annoncée (3 × 30 + 40 d'intitulé = 130 px) et elle ne bouge pas d'un jour à
   l'autre. C'est ce qui met « Modifier sa fiche » au même pixel tous les
   matins. */
.lien.reclame{height:30px;min-height:30px;padding-top:0;padding-bottom:0;
  font-size:12.5px;line-height:30px;align-items:center}
.lien.reclame>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lien.reclame.dg{color:var(--dg)}
.lien.reclame.al{color:var(--al)}
.lien.reclame.nul,.lien.reclame.vide{color:var(--encre-3);cursor:default}
.lien.reclame.vide{pointer-events:none}
span.lien{cursor:default}
/* UN GESTE QUI NE S'APPLIQUE PAS RESTE VISIBLE ET S'ÉTEINT, avec sa raison en
   infobulle : c'est en voyant le geste éteint qu'on apprend ce qui manque. */
.poss .lien[aria-disabled="true"]{color:var(--encre-3);cursor:not-allowed}

/* ---- CE QUE L'ÉCRAN A GAGNÉ ------------------------------------------- */
/* Les gouttières de « main » : 24 px → 16 px. Cent vingt pixels de gouttière
   séparaient cinq bandes qui font 160 px de matière (Q-08). */
.large{gap:var(--e4);padding-top:var(--e4)}
/* Le cap d'un dossier n'existe plus que s'il porte un verdict : le nom est au
   bandeau, et un filet de 4 px pour une phrase absente ne dit rien. */
.cap-dossier{border-left-width:3px;padding-left:var(--e3)}
.cap-dossier .verdict{margin:0}

/* ═════════════════════════════════════════════════════════════════════════
   REPÈRE FORMES DE DOSSIER — chantier A2 du 06/09/2026
   ─────────────────────────────────────────────────────────────────────────
   Les cinq formes de section qui manquaient (calendrier, série, fil, arbre,
   matrice), l'échine renversée, les onglets qui portent leur compte, la
   barre rangée et le pied du dossier. Rien ici ne redéfinit une couleur :
   tout passe par les variables de la tête de feuille, thème nuit compris.
   ═════════════════════════════════════════════════════════════════════════ */

/* ---- LA BARRE : UNE LIGNE, 44 px, jamais deux ------------------------- */
/* Elle en prenait 48 à 85 selon le sujet, et deux lignes dès que les cinq
   verbes ne tenaient plus : une barre dont la hauteur dépend des libellés
   déplace tout ce qui est dessous d'un dossier à l'autre. */
.verbes{flex-wrap:nowrap;overflow-x:auto;padding:5px var(--e3);min-height:44px;
  scrollbar-width:thin}
.verbes>*{flex:0 0 auto}
/* LE REPLI PORTE SON NOM ET SON COMPTE. « … » ne se cherche pas : on tombe
   dessus. Il est poussé à droite — c'est le seul élément de la barre qui
   n'est pas un geste mais un tiroir. */
.verbes .repli-gestes{margin-left:auto}
.verbes .repli-gestes>summary{border-style:dashed}
.verbes .repli-gestes>summary b{font-variant-numeric:tabular-nums;
  color:var(--encre-3);font-weight:700}
/* Les quatre rubriques du tiroir : un filet les sépare, sauf la première. */
.verbes .repli-gestes .menu .q+*{margin-top:0}
.verbes .repli-gestes .menu .q:not(:first-child){border-top:1px solid var(--filet-2);
  margin-top:var(--e1);padding-top:var(--e2)}

/* ---- LES ONGLETS : leur compte, et le creux GRISÉ --------------------- */
/* Une seule ligne, toujours : à 1280 px, six libellés passaient à deux
   lignes sur le site et la prestation — 39 px de plus, et le premier bloc
   d'autant plus bas. */
.onglets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
.onglets a{white-space:nowrap}
.onglets a em{font-style:normal;font-size:11px;color:var(--encre-3);
  margin-left:5px;font-variant-numeric:tabular-nums;font-weight:600}
/* UN ONGLET VIDE EST GRISÉ, JAMAIS RETIRÉ : un onglet retiré fait croire que
   la structure change d'un sujet à l'autre ; un onglet grisé apprend la
   structure, et son infobulle dit pourquoi il est creux. Il reste
   CLIQUABLE — on doit pouvoir vérifier que c'est bien vide. */
.onglets a.creux{color:var(--encre-3)}
.onglets a.creux em{opacity:.7}

/* ---- L'ÉCHINE RENVERSÉE ---------------------------------------------- */
/* 1. LE VERDICT — une phrase chiffrée, en tête. Il quitte le cap : ce n'est
   pas un titre d'écran, c'est un fait sur le sujet. */
.echine .verdict{margin:0;padding:var(--e3) var(--e4);font-size:12.5px;
  line-height:1.45;color:var(--encre-2)}
.echine .verdict b{color:var(--encre);font-variant-numeric:tabular-nums}
/* 2. LES QUATRE ÉTATS puis 3. LES DEUX GESTES : ce qui EMPÊCHE passe devant
   ce qui identifie. Sur les six sujets, ils étaient sous le pli à 1280×768. */
.echine .etats:first-child{border-top:0}
.echine .verdict+.etats{border-top:1px solid var(--filet)}
/* 5. LE PORTRAIT descend en dernier quand il n'y a pas d'image : une
   silhouette générique ne vaut pas 152 px, soit 20 % de la hauteur utile.
   Une vraie photo, si — elle remonte alors en tête, à sa taille pleine. */
.echine .portrait{border-top:1px solid var(--filet);padding:var(--e3) 0}
.echine .portrait svg{width:64px;height:64px}
.echine.avec-image{display:flex;flex-direction:column}
.echine.avec-image .portrait{order:-1;border-top:0;padding:var(--e4) 0 var(--e3)}
.echine.avec-image .portrait img{width:92px;height:92px}

/* ---- LE CALENDRIER : la forme qui manquait ---------------------------- */
/* Grille 7 × 5 ou 6, case ~78 × 62 px, numéro du jour, une pastille par
   vacation portant son horaire et son lieu. La frise qu'elle remplace
   rendait 31 carrés de 17 px dont la seule information était une infobulle :
   trente et un survols pour lire un mois. */
.cal-cadre{padding:var(--e3) var(--e4) 0}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.cal .jc{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre-3);font-weight:700;text-align:center;padding-bottom:2px}
.cal .c{min-height:62px;border:1px solid var(--filet-2);border-radius:5px;
  background:var(--surf);padding:3px 4px;display:flex;flex-direction:column;
  gap:2px;overflow:hidden;color:inherit;text-decoration:none}
a.cal-lien,.cal a.c{cursor:pointer}
.cal a.c:hover{border-color:var(--veille);background:var(--veille-f)}
.cal .c .d{font-size:11px;font-weight:700;color:var(--encre-3);
  font-variant-numeric:tabular-nums;line-height:1.1}
/* Hors mois : présent, mais muet — une grille dont la première ligne est
   amputée se lit de travers, on cherche le 1er et on trouve un trou. */
.cal .c.hors{background:var(--surf-2);border-color:transparent}
.cal .c.hors .d{opacity:.45}
.cal .c.we{background:var(--surf-2)}
.cal .c.ferie{background:var(--dg-f);border-color:var(--dg)}
.cal .c.auj{border-color:var(--lampe);border-width:2px}
/* LA PASTILLE PORTE SON HORAIRE ET SON LIEU : « 14–22 Reims » répond à
   « suis-je libre ce jour-là ? » et à « où » sans ouvrir la journée. */
.cal .c .v{font-size:10.5px;line-height:1.25;border-radius:3px;padding:1px 4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-left:3px solid var(--ok);background:var(--ok-f);color:var(--encre)}
.cal .c .v.nuit{border-left-color:var(--veille);background:var(--veille-f)}
.cal .c .v.abs{border-left-color:var(--al);background:var(--al-f)}
.cal .c .v.trou{border-left-color:var(--dg);background:var(--dg-f);color:var(--dg);
  font-weight:700}
/* LA LÉGENDE NE SE REPLIE PAS. Vingt pixels contre trente et un survols. */
.cal-cadre .legende{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center;
  padding:var(--e2) 0;font-size:11px;color:var(--encre-3)}
.cal-cadre .legende span{display:inline-flex;align-items:center;gap:5px}
.cal-cadre .legende i{width:10px;height:10px;border-radius:2px;display:inline-block;
  border-left:3px solid var(--ok);background:var(--ok-f)}
.cal-cadre .legende i.nuit{border-left-color:var(--veille);background:var(--veille-f)}
.cal-cadre .legende i.abs{border-left-color:var(--al);background:var(--al-f)}
.cal-cadre .legende i.trou{border-left-color:var(--dg);background:var(--dg-f)}
.cal-cadre .legende i.ferie{border-left-color:var(--dg);background:var(--dg-f)}
.cal-cadre+.cadrans{border-top:1px solid var(--filet)}

/* ---- LA NAVIGATION DE PÉRIODE ---------------------------------------- */
/* Le produit calculait vingt-cinq mois à chaque rendu de chaque fiche, et
   aucun gabarit ne les rendait : seize endroits du dossier montraient une
   période sans permettre d'en changer, onze sans même l'écrire. */
.bloc-tete .periode{display:inline-flex;align-items:center;gap:var(--e1);
  margin-left:auto;position:relative}
.bloc-tete .periode .bt{padding:2px 9px;font-size:11.5px}
.bloc-tete .periode .choix-periode{position:relative}
.bloc-tete .periode summary{list-style:none;font-variant-numeric:tabular-nums}
.bloc-tete .periode summary::-webkit-details-marker{display:none}
.bloc-tete .periode .menu{min-width:170px;background:var(--surf);
  border:1px solid var(--filet);border-radius:var(--r);
  box-shadow:0 16px 40px -14px rgba(0,0,0,.4);padding:var(--e1) 0}
.bloc-tete .periode .menu a{display:block;padding:5px var(--e3);font-size:12.5px;
  color:var(--encre);text-decoration:none;white-space:nowrap}
.bloc-tete .periode .menu a:hover{background:var(--surf-2)}
.bloc-tete .periode .menu a[aria-current="true"]{font-weight:700;background:var(--surf-2)}

/* ---- LA SÉRIE : douze barres ----------------------------------------- */
/* Deux blocs du produit étaient déclarés « vide » pour dire « Les douze
   derniers mois » : la loi n'avait pas de forme pour une série, il a donc
   fallu écrire un vide là où il fallait un graphique. */
.serie{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--e1);align-items:end;height:120px;padding:var(--e4) var(--e4) var(--e2)}
.serie .sb{display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%;gap:2px;position:relative}
.serie .bh{display:block;width:100%;background:var(--veille);border-radius:3px 3px 0 0;
  min-height:2px}
.serie .sb.courant .bh{background:var(--lampe)}
.serie .et{font-size:10px;color:var(--encre-3);font-variant-numeric:tabular-nums;
  position:absolute;top:0;left:0;right:0;text-align:center}
.serie .sm{font-size:10px;color:var(--encre-3);font-weight:700}
.serie .sb.courant .sm{color:var(--encre)}
/* LA HAUTEUR EST PORTÉE PAR LA FEUILLE, jamais par un style en ligne (garde
   A-08) : le serveur arrondit le pourcentage au pas de cinq, et ces
   vingt-et-une règles font le reste. */
.serie .bh[data-pct="0"]{height:2px}
.serie .bh[data-pct="5"]{height:5%}
.serie .bh[data-pct="10"]{height:10%}
.serie .bh[data-pct="15"]{height:15%}
.serie .bh[data-pct="20"]{height:20%}
.serie .bh[data-pct="25"]{height:25%}
.serie .bh[data-pct="30"]{height:30%}
.serie .bh[data-pct="35"]{height:35%}
.serie .bh[data-pct="40"]{height:40%}
.serie .bh[data-pct="45"]{height:45%}
.serie .bh[data-pct="50"]{height:50%}
.serie .bh[data-pct="55"]{height:55%}
.serie .bh[data-pct="60"]{height:60%}
.serie .bh[data-pct="65"]{height:65%}
.serie .bh[data-pct="70"]{height:70%}
.serie .bh[data-pct="75"]{height:75%}
.serie .bh[data-pct="80"]{height:80%}
.serie .bh[data-pct="85"]{height:85%}
.serie .bh[data-pct="90"]{height:90%}
.serie .bh[data-pct="95"]{height:95%}
.serie .bh[data-pct="100"]{height:100%}

/* ---- LE FIL : une chronologie ---------------------------------------- */
/* Huit tables des six dossiers faisaient la même chose — une suite
   d'événements datés — avec huit jeux de colonnes. La date est un RAIL, pas
   une colonne : c'est ce qui permet d'en apprendre la forme une seule fois. */
.fil{list-style:none;margin:0;padding:var(--e3) var(--e4)}
.fil li{display:grid;grid-template-columns:72px 1fr;gap:var(--e3);
  padding:7px 0 7px var(--e3);border-left:2px solid var(--filet);
  margin-left:72px;position:relative}
.fil li>.fq{position:absolute;left:-86px;width:72px;text-align:right;
  font-size:11.5px;color:var(--encre-3);font-variant-numeric:tabular-nums;
  line-height:1.6}
.fil li::before{content:"";position:absolute;left:-5px;top:13px;width:8px;height:8px;
  border-radius:50%;background:var(--filet-fort)}
.fil li .fj{grid-column:1}
.fil li .ft{grid-column:2;font-size:13px;min-width:0}
.fil li .fd{display:block;font-size:12px;color:var(--encre-2);
  overflow-wrap:anywhere}
.fil li .fp{display:block;font-size:11.5px;color:var(--encre-3)}

/* ---- L'ARBRE : Sites │ Prestations │ Profils -------------------------- */
/* Il fallait trois écrans pour descendre client → site → prestation →
   profil, qui est le modèle de données du métier. */
.arbre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;padding:0;border-top:1px solid var(--filet)}
.arbre .ab{border-right:1px solid var(--filet);padding:var(--e2) 0;min-width:0;
  max-height:280px;overflow-y:auto}
.arbre .ab:last-child{border-right:0}
.arbre .abt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-3);font-weight:700;padding:2px var(--e3) var(--e2)}
.arbre .abl{display:block;padding:5px var(--e3);font-size:12.5px;color:var(--encre);
  text-decoration:none;border-left:3px solid transparent}
.arbre a.abl:hover{background:var(--surf-2)}
.arbre .abl.ouverte{background:var(--veille-f);border-left-color:var(--veille);
  font-weight:700}
.arbre .abd{display:block;font-size:11px;color:var(--encre-3);
  font-variant-numeric:tabular-nums}
.arbre .ab p.nul{padding:var(--e2) var(--e3);font-size:12px;margin:0}
@media(max-width:760px){.arbre{grid-template-columns:1fr}
  .arbre .ab{border-right:0;border-bottom:1px solid var(--filet)}}

/* ---- LA MATRICE : première colonne figée ------------------------------ */
/* Une grille de tarifs est une matrice à deux entrées (activité ×
   majoration), pas une liste : sans colonne figée, on lit un prix à dix ou
   treize colonnes de distance sans savoir de quelle activité il est. */
.tbl.matrice th:first-child,.tbl.matrice td:first-child{position:sticky;left:0;
  z-index:2;background:var(--surf);
  box-shadow:1px 0 0 var(--filet)}
.tbl.matrice thead th:first-child{z-index:3;background:var(--tete)}
.tbl.matrice tr.g td:first-child{background:var(--dg-f)}
.tbl.matrice tr.m td:first-child{background:var(--al-f)}

/* ---- LE PIED DU DOSSIER : 32 px, et il ramène à la liste --------------- */
/* « Et ensuite » coûtait 49 à 86 px, ne variait jamais, et ne proposait
   JAMAIS « revenir à la liste » — la suite réelle une fois sur deux. */
.pied-dossier{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3);min-height:32px;font-size:12.5px;color:var(--encre-2);
  border-top:1px solid var(--filet);padding-top:var(--e2)}
.pied-dossier .retour-liste{color:var(--veille);text-decoration:none;font-weight:600}
.pied-dossier .retour-liste:hover{color:var(--coque)}
:root[data-theme="nuit"] .pied-dossier .retour-liste:hover{color:var(--lampe)}
.pied-dossier .note{color:var(--encre-3);font-weight:400}
.pied-dossier .feuilletage{display:inline-flex;gap:var(--e1);align-items:center;
  font-variant-numeric:tabular-nums}
.pied-dossier .feuilletage .nul{color:var(--encre-3)}
/* L'ARBRE : DÉPLIER N'EST PAS OUVRIR. La ligne remplit la colonne suivante,
   le chevron ouvre le dossier — les confondre obligeait à choisir entre voir
   la hiérarchie et y aller. */
.arbre .abr{display:flex;align-items:center;gap:2px}
.arbre .abr .abl{flex:1 1 auto;min-width:0}
.arbre .abo{flex:0 0 auto;padding:5px 9px;color:var(--veille);text-decoration:none;
  font-weight:700}
.arbre .abo:hover{color:var(--coque)}
:root[data-theme="nuit"] .arbre .abo:hover{color:var(--lampe)}
/* UN BLOC VIDE NE DÉPASSE PAS 56 px — une ligne de texte, pas un cadre de
   98 px. Sur « Contrat & tarifs » d'un client neuf, cinq blocs sur cinq sont
   vides : 392 px de « Aucun contrat », « Aucune grille », « Aucun indice »,
   « Aucun forfait ». Les messages sont bons — ils disent lequel des trois
   vides c'est — mais quatre bons messages empilés font un mauvais écran. */
.bloc>.corps.court{padding:var(--e2) var(--e4)}
.bloc>.corps.court>p.nul{margin:0;font-size:12.5px;line-height:1.5}
/* LE DOSSIER NE FAIT JAMAIS DÉFILER LA PAGE EN LARGEUR. La colonne de droite
   d'une grille CSS prend par défaut la largeur de son contenu : une table à
   treize colonnes poussait donc TOUT l'écran à 1 348 px, et la page se
   déplaçait sous le doigt à chaque défilement horizontal — bandeau, colonne
   et onglets compris. Ce qui est large défile DANS SON CADRE ; c'est la
   condition pour qu'une matrice à première colonne figée ait un sens. */
.dossier>.pile{min-width:0}
.dossier .bloc{min-width:0}

/* ======================================================================
   REPÈRE LISTE — le gabarit unique des ~145 écrans de la famille
   Chantier A3, 06/09/2026. Spécification : docs/modele_affichage_cible_
   20260906.md § « LA LISTE » ; constats L-32 à L-47.

   LE BUDGET VERTICAL, ET RIEN D'AUTRE. Une liste ne se juge pas sur son
   dessin mais sur un nombre : combien de lignes un exploitant voit sans
   défiler. Il en voyait QUATRE à 1280×768 sur les prestations, parce que
   529 px — 69 % de la fenêtre — passaient avant la première donnée. La
   coquille contextuelle en a rendu 57. Cette section rend le reste :

     cap + compteurs, sur UNE ligne          71 + 43 + 42 px  →  48
     filtre, sur UNE ligne                        73 px       →  56
     raffinement (il descend dans la barre)      111 px       →   0
     en-tête de colonnes                          31 px       →  32
     hauteur de ligne, FIXE                    35 à 54 px     →  32

   Une liste dont les lignes ne font pas toutes la même hauteur ne se
   balaie pas : le texte trop long est TRONQUÉ avec son infobulle, jamais
   replié. C'est la seule règle de cette section qui coûte quelque chose,
   et c'est celle qui rend les quinze autres lignes visibles.
   ====================================================================== */

/* ---- LE CAP D'UNE LISTE : 48 px, une ligne, le verdict compris -------- */
/* LES GOUTTIÈRES D'UNE LISTE SONT PLUS SERRÉES QUE CELLES D'UN DOSSIER, et
   c'est la seule chose qui manquait pour passer de quinze lignes à seize à
   1280×768. Cap, filtre et table forment UNE zone continue — le regard y
   descend sans marche —, là où un dossier sépare des blocs qui ne parlent pas
   de la même chose. Les marges négatives annulent la gouttière de « main »
   plutôt que de la redéfinir : « main » est partagé par les 272 écrans. */
.cap-l{display:flex;align-items:center;gap:var(--e3);flex-wrap:nowrap;
  height:48px;padding-top:0;padding-bottom:0;margin-top:calc(-1 * var(--e2))}
.cap-l h1{font-size:20px;line-height:48px;margin:0;flex:0 0 auto;white-space:nowrap}
.cap-l h1 .fil{font-family:var(--texte);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--encre-3);font-weight:700;
  vertical-align:middle;margin-right:2px}
/* LES COMPTEURS NOMMÉS, sur la ligne du titre. Ils étaient en pied de
   document, à y = 1 312 dans 1 594 px (L-42) : il fallait défiler deux
   fenêtres pour lire le chiffre qui résume l'écran. */
/* LES COMPTEURS TIENNENT SUR UNE LIGNE, ou ils se coupent en disant qu'ils
   se coupent : un verdict qui passe à trois lignes rend au cap la hauteur
   qu'on venait de lui prendre. Le titre complet reste en infobulle. */
.cap-l .compteurs{margin:0;display:flex;flex-wrap:nowrap;gap:var(--e1) var(--e3);
  font-size:12px;color:var(--encre-2);flex:1 1 160px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:48px}
.cap-l .compteurs b{color:var(--encre);font-weight:700;font-variant-numeric:tabular-nums}
.cap-l .compteurs span{white-space:nowrap}
.cap-l .compteurs span+span::before{content:"· ";color:var(--filet-fort)}
.cap-l .gestes{margin-left:auto;display:flex;align-items:center;gap:var(--e2);flex:0 0 auto}
/* Le composeur s'ouvre par un bouton du cap : son repli flotte, il ne
   pousse pas la première ligne vers le bas. */
.cap-l .gestes .autres{position:relative;border:0;box-shadow:none;background:transparent}
.cap-l .gestes .autres summary{padding:0}
.cap-l .gestes .autres>div{min-width:200px;background:var(--surf);border:1px solid var(--filet);
  border-radius:var(--r);box-shadow:var(--ombre);padding:var(--e1) 0}
.cap-l .gestes .autres .lien{display:block;padding:6px var(--e3);white-space:nowrap}

/* ---- LE FILTRE : UNE ligne de 56 px ---------------------------------- */
/* Quatre critères visibles, le reste sous un repli qui FLOTTE — un repli
   qui pousse la table vers le bas coûte la place qu'il prétend rendre. */
/* LE FILTRE TIENT SUR UNE LIGNE DE 56 px. Il en occupait 73, et le
   raffinement 111 de plus juste dessous : 128 px pour trois critères dont
   deux ne servaient pas à l'exploitation. */
.filtre-l{height:56px;flex-wrap:nowrap;align-items:center;overflow:visible;
  padding:var(--e2) var(--e3);border:1px solid var(--filet);
  border-radius:var(--r);background:var(--surf);
  margin-top:calc(-1 * var(--e3))}
.filtre-l .champ{margin:0;flex:0 1 130px;min-width:80px}
.filtre-l .champ:first-child{flex:1 1 160px}
/* « Effacer tous les filtres » est le compagnon obligatoire de la recherche
   (§87 : on sait toujours revenir à l'état non filtré) — mais son intitulé
   entier prenait la place de deux critères. Il garde son nom en infobulle. */
.filtre-l .bt.raz{max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filtre-l .champ{gap:1px}
.filtre-l .champ label{font-size:10px;line-height:1.1}
.filtre-l .champ input:not([type="checkbox"]),.filtre-l .champ select{padding:2px 6px}
.filtre-l>.bt{flex:0 0 auto}
.filtre-l .autres{position:relative;flex:0 0 auto;border:0;box-shadow:none;background:transparent}
.filtre-l .autres summary{padding:5px 10px;border:1px solid var(--filet-fort);
  border-radius:var(--r);background:var(--surf)}
.filtre-l .autres>div{min-width:320px;display:flex;flex-wrap:wrap;gap:var(--e2);padding:var(--e3);
  background:var(--surf);border:1px solid var(--filet);border-radius:var(--r);
  box-shadow:var(--ombre)}
/* Le champ de recherche de la LISTE porte le nom de sa population : rien ne
   le distinguait de la longue-vue du bandeau, et l'on remplissait l'une en
   croyant filtrer l'autre (L-37). */
.filtre-l .champ input,.filtre-l .champ select{width:100%;min-width:0;max-width:100%}
/* L'AUTOCOMPLÉTION RÉCLAME 240 px DE LARGE : c'est juste sur un formulaire,
   c'est trop dans une ligne de filtres qui en porte quatre. Elle prend ici la
   largeur de son critère, comme un sélecteur ordinaire. */
.filtre-l .champ .ac{min-width:0;width:100%}

/* ---- LA TABLE : la ligne de 32 px, fixe ------------------------------ */
.tableau-l{overflow-x:auto;background:var(--surf);border:1px solid var(--filet);
  border-radius:var(--r);box-shadow:var(--ombre);margin-top:calc(-1 * var(--e4))}
/* LA MISE EN PAGE EST FIXE, et c'est ce qui fait tenir sept colonnes dans la
   largeur. En mise en page automatique, « max-width » sur une cellule est
   ignoré par l'algorithme du tableau : une désignation longue élargit sa
   colonne, la table déborde, et la dernière colonne — l'état, celle qu'on
   vient lire — sort de l'écran. En mise en page fixe, chaque genre de colonne
   prend ce qu'il lui faut, le texte prend le reste, et la troncature avec
   infobulle joue enfin son rôle. */
.tbl-l{width:100%;table-layout:fixed}
/* L'EN-TÊTE SE TRONQUE COMME SA COLONNE : sans cela, un intitulé long
   déborde sur le voisin et l'on lit « RAISON SOCIALE ↑VILLE ». */
.tbl-l th{padding:0 var(--e3);height:32px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.tbl-l td{padding:0 var(--e3);height:32px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl-l td.coche,.tbl-l th.coche{width:28px;max-width:28px}
/* LES COLONNES DE NOMBRE ET DE JETON SE CONTENTENT DE LEUR CONTENU. Sinon la
   largeur se partage à parts égales et ce sont les NOMS — ce qu'on lit — qui
   se tronquent au profit de colonnes qui n'en demandaient pas tant. */
.tbl-l th.num{width:82px}
.tbl-l th.jet{width:104px}
.tbl-l th.num a,.tbl-l th.jet a{white-space:nowrap}
/* LA PREMIÈRE COLONNE OUVRE LA LIGNE, et la ligne entière la relaie : la
   cible passe de 49 × 35 px à toute la ligne (L-45). Le curseur le dit
   avant le clic. */
.tbl-l tr[data-ouvre]{cursor:pointer}
.tbl-l td.ouvre a{color:var(--encre);font-weight:600}
.tbl-l tr[data-ouvre]:hover td.ouvre a{color:var(--veille);text-decoration:underline}
.tbl-l tr.rien td{height:auto;padding:var(--e4) var(--e3);white-space:normal;max-width:none}
/* LE CODE DE COMÈTE : les heures en défaut en vert — de la place à donner,
   à affecter en priorité —, les heures supplémentaires en rouge — du coût
   déjà engagé. C'est ce qui fait d'une liste un outil de décision et non
   un annuaire. La couleur est DOUBLÉE par l'en-tête, jamais seule. */
.tbl-l td.num.t-vert{color:var(--ok);font-weight:600}
.tbl-l td.num.t-rouge{color:var(--dg);font-weight:600}
/* La ligne d'où l'on est parti se retrouve d'un coup d'œil au retour. */
.tbl-l tr[data-place]>td{box-shadow:inset 0 0 0 1px var(--veille)}
/* L'ENCADRÉ ROUGE DE LA GRILLE (J-2.3, parité Comète). Il marque la case d'une
   grille tarifaire qui ne suit PAS la majoration classique du prix de base —
   c'est le seul contrôle de cohérence entre les huit cases, et il portait
   jusqu'ici sur rien : les huit se saisissaient à la main. L'encadré est une
   BORDURE et non une couleur d'encre, à la différence de « t-rouge » : dans
   une matrice de huit colonnes de nombres, une encre rouge se perd, un cadre
   se compte. La couleur est DOUBLÉE par l'infobulle, jamais seule. */
.hors-bareme{display:inline-block;padding:0 var(--e1);
  border:1px solid var(--dg);border-radius:var(--r);
  background:var(--dg-f);color:var(--dg);font-weight:600}

/* ---- LA PAGE ET LA BARRE --------------------------------------------- */
.pages-l{display:flex;align-items:center;gap:var(--e2);font-size:12px;
  color:var(--encre-2);padding:0 var(--e1)}
/* LA BARRE COLLANTE NE RECOUVRE PLUS LA DERNIÈRE LIGNE. Elle est en
   « sticky bottom » : elle flotte au-dessus de ce qui la précède, et elle
   masquait la treizième ligne (L-44). La réserve la remet à sa place. */
.barre-l{height:48px;flex-wrap:nowrap;overflow:visible;padding:0 var(--e3);
  margin-top:calc(-1 * var(--e4))}
.barre-l>*{flex:0 0 auto}
/* LE COMPTE ET L'AGRÉGAT PRENNENT CE QUI RESTE, et les gestes gardent leur
   nom entier : c'est l'agrégat qu'on vient chercher dans cette barre, pas la
   confirmation qu'on a coché. */
.barre-l .pris{margin-right:var(--e2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;flex:1 1 120px;min-width:0}
.tableau-l{margin-bottom:56px}
/* LE RAFFINEMENT, DESCENDU DANS LA BARRE (L-39) : 111 px rendus aux
   lignes, et le geste enfin voisin de la sélection sur laquelle il porte. */
.barre-l .autres[data-raffinement]{position:relative;border:0;box-shadow:none;
  background:transparent;margin-left:auto}
.barre-l .autres[data-raffinement] summary{padding:5px 10px;border:1px solid var(--filet-fort);
  border-radius:var(--r);background:var(--surf)}
.barre-l .autres[data-raffinement]>div{min-width:340px;display:flex;flex-wrap:wrap;gap:var(--e2);padding:var(--e3);
  background:var(--surf);border:1px solid var(--filet);border-radius:var(--r);
  box-shadow:var(--ombre)}
.barre-l [data-cmd-repli]{position:relative}
.barre-l [data-cmd-repli]>.menu{min-width:200px;display:flex;flex-direction:column;background:var(--surf);
  border:1px solid var(--filet);border-radius:var(--r);box-shadow:var(--ombre);padding:var(--e1) 0}
.barre-l [data-cmd-repli]:not([open])>.menu{display:none}
.barre-l [data-cmd-repli]>.menu button{border:0;background:transparent;text-align:left;
  padding:6px var(--e3);font:inherit;font-size:12.5px;color:var(--encre-2);cursor:pointer}
.barre-l [data-cmd-repli]>.menu button:hover{background:var(--surf-2);color:var(--veille)}

/* ======================================================================
   REPÈRE FORMULAIRE ET DOCUMENT — 06/09/2026, chantier A4

   Les trois dernières familles du modèle d'affichage cible : LE FORMULAIRE
   (38 écrans), LE DOCUMENT (≈ 20) et LA GRILLE DE TEMPS (≈ 6).

   CE QUE CETTE SECTION RÉPARE, ET QUI SE MESURE :
     · le formulaire n'était jamais groupé — 28 champs sous un seul titre,
       le téléphone à y = 900 px dans une fenêtre de 768 (L-48, L-49) ;
     · l'erreur n'avait ni résumé, ni ancre, ni focus : la troisième était à
       y = 1 009 px et l'on ne savait pas qu'elle existait (L-52) ;
     · le document n'existait pas comme forme — on commandait un PDF dans un
       formulaire pour le découvrir dans un autre onglet ;
     · la légende du planning DÉFILAIT avec la grille : à 1280×768 elle était
       mesurée à y = 845, hors de l'écran au moment où l'on lit les couleurs.
   ====================================================================== */

/* ---- LA TÊTE DU FORMULAIRE : ce qu'on modifie, et ce qui manque ------- */
/* Le compte des obligatoires vit ICI et non au pied : on veut savoir ce qui
   est exigé AVANT de saisir, pas après avoir été refusé. */
.form-tete{display:flex;align-items:baseline;gap:var(--e3);
  padding:0 var(--e2) var(--e2)}
.form-tete h2{font-size:15px;font-weight:600;color:var(--encre);margin:0}
.form-tete .pq{margin-left:auto;white-space:nowrap}

/* ---- LE GROUPE : huit champs au plus, nommé par le geste -------------- */
/* Le titre du groupe est une ÉTIQUETTE et non un titre d'écran : il range,
   il n'annonce pas. Il reste donc au second rang typographique. */
.form-groupe .bloc-tete h2{font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--encre-2)}
.form-groupe .bloc-tete .pq{margin-left:auto}
.form-groupe+.form-groupe{margin-top:0}

/* ---- LE REPLI, ET SON COMPTE ------------------------------------------ */
/* « Ce qu'on remplit rarement — 15 champs ». Sans le nombre, le repli est une
   invitation à cliquer pour voir ; avec lui, c'est une information. */
.form-repli>div .corps{padding-top:var(--e3)}

/* ---- LE RÉSUMÉ D'ERREURS, ET SES ANCRES ------------------------------- */
/* Les libellés sont des LIENS, et ils se voient comme tels : c'est la seule
   chose de ce bandeau qu'on doive pouvoir cliquer. */
.erreurs.resume{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;
  font-size:12.5px;line-height:1.5}
.erreurs.resume a{color:var(--dg);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}
.erreurs.resume a:hover{background:var(--dg-f)}
/* LE CHAMP OÙ L'ON ARRIVE SE SIGNALE. Un focus qui pose le curseur sans rien
   montrer laisse croire que le lien n'a rien fait. */
.champ:target input,.champ:target select,.champ:target textarea,
.champ.vise input,.champ.vise select,.champ.vise textarea{
  border-color:var(--dg);outline:2px solid var(--dg);outline-offset:1px}
/* LA BARRE COLLANTE NE DOIT PAS RECOUVRIR LE DERNIER CHAMP (L-44) : le
   formulaire se réserve la hauteur de sa propre barre. */
form.formulaire{padding-bottom:var(--e2)}

/* ---- LE DOCUMENT : l'aperçu EST l'écran ------------------------------- */
/* On ne prépare pas un document dans un formulaire pour le découvrir ensuite.
   Le cap dit à qui, quoi, quand — et le fondement réglementaire quand il y en
   a un —, l'aperçu occupe tout le reste, et la barre porte quatre verbes,
   toujours les mêmes, dans le même ordre. */
.doc-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e2) var(--e4);
  padding:var(--e3) var(--e4);background:var(--surf);border:1px solid var(--filet);
  border-radius:var(--r);box-shadow:var(--ombre)}
.doc-cap .qui{font-size:13px;color:var(--encre)}
.doc-cap .qui b{font-weight:600}
.doc-cap .quand{font-size:12px;color:var(--encre-3)}
/* LE FONDEMENT RÉGLEMENTAIRE, quand il y en a un. Un registre qu'on présente
   au contrôle se lit avec l'article qui l'exige : c'est ce qui distingue un
   état de gestion d'une obligation légale, et c'est la première chose que
   l'inspecteur cherche. */
.doc-cap .fondement{flex:0 0 auto;margin-left:auto;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3);
  white-space:nowrap}
/* L'APERÇU — le papier, sur son fond d'atelier. Le fond gris est ce qui dit
   « ceci est une feuille » sans qu'on ait à l'écrire. */
.doc-apercu{background:var(--surf-2);border:1px solid var(--filet);
  border-radius:var(--r);padding:var(--e4);overflow:auto}
/* LA FEUILLE EST DU PAPIER, ET LE PAPIER NE CHANGE PAS AVEC LE THÈME : ses
   couleurs sont écrites en dur, y compris celles des liens, parce que ce qu'on
   regarde est le document tel qu'il SORTIRA. Un registre en encre claire sur
   fond sombre à l'écran et en noir sur blanc à l'impression ne serait pas un
   aperçu, ce serait une autre page. */
.doc-apercu .feuille{background:#FFFFFF;color:#12232C;margin:0 auto;
  width:max-content;min-width:min(820px,100%);max-width:100%;
  padding:26px 30px;box-shadow:0 1px 4px rgba(18,35,44,.18);border-radius:2px}
.doc-apercu .feuille a,.doc-apercu .feuille .tbl td a{color:#0A6273}
.doc-apercu .feuille .nul,.doc-apercu .feuille .pq{color:#59636B}
/* La table du produit prend ses couleurs du THÈME : posée sur du papier, elle
   doit prendre celles du papier. Sans cela, le registre se lisait en encre
   claire sur blanc dès qu'on passait en nuit — c'est-à-dire ne se lisait pas. */
.doc-apercu .feuille .tbl{color:#12232C}
.doc-apercu .feuille .tbl th{background:#F1F4F6;color:#59636B;
  border-bottom:1px solid #C9D3D8}
.doc-apercu .feuille .tbl td{border-bottom:1px solid #E6ECEF}
.doc-apercu .feuille .tbl tbody tr:hover{background:#F7F9FA}
.doc-apercu .feuille .jeton{background:#F1F4F6;color:#59636B}
.doc-apercu .feuille .code{color:#12232C}
.doc-apercu .feuille h3{font-family:var(--display);font-weight:400;font-size:19px;
  margin:0 0 2px}
.doc-apercu .feuille .entete{font-size:11.5px;color:#59636B;margin-bottom:14px}
.doc-apercu .feuille table{width:100%;border-collapse:collapse;font-size:11.5px}
.doc-apercu .feuille th{text-align:left;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:#59636B;font-weight:700;
  border-bottom:1px solid #C9D3D8;padding:4px 6px}
.doc-apercu .feuille td{padding:3px 6px;border-bottom:1px solid #E6ECEF;
  vertical-align:top}
/* « NON RENSEIGNÉ » N'EST PAS UN TIRET. Un registre qui devine est un registre
   faux, et c'est le registre faux que le contrôle sanctionne : le vide se dit
   en toutes lettres, et il se voit. */
.doc-apercu .feuille .creux{color:#A8321E;font-style:italic}
.doc-apercu iframe{width:100%;min-height:60vh;border:0;background:#FFFFFF}

/* ---- LA GRILLE DE TEMPS : le bandeau de période ----------------------- */
/* CINQ ÉLÉMENTS FIXES, TOUJOURS AUX MÊMES PLACES : reculer, la période,
   avancer, et les deux verbes qui la produisent. Ils étaient répartis entre un
   bloc de filtre en tête et la barre du bas, qui NAVIGUAIT au lieu d'agir. */
.periode{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
  background:var(--surf);border:1px solid var(--filet);border-radius:var(--r);
  box-shadow:var(--ombre);padding:6px var(--e3);min-height:44px}
.periode .quoi{font-size:14px;font-weight:600;color:var(--encre);
  min-width:11ch;text-align:center;font-variant-numeric:tabular-nums}
.periode .champ{flex-direction:row;align-items:center;gap:6px;margin-left:var(--e3)}
.periode .champ>label{white-space:nowrap}
.periode .champ select{min-width:150px}
.periode .verbes{margin-left:auto;display:flex;align-items:center;gap:var(--e2)}

/* ---- LA LÉGENDE EST PERMANENTE ---------------------------------------- */
/* Elle ne se replie pas et ne défile pas. Une couleur qui code un sens doit
   être lisible AU MOMENT OÙ ON LA LIT : mesurée à y = 845 px dans une fenêtre
   de 768, elle ne l'était jamais. Collée au bas de la zone de grille, elle
   l'est toujours, et elle ne coûte que 30 px. */
/* LE COLLANT EST SUR LE PIED, PAS SUR LA LÉGENDE. Une boîte ``sticky`` ne
   peut se déplacer que DANS SON PARENT : posée sur la légende, elle avait pour
   parent un pied de bloc de sa propre hauteur, et n'avait donc nulle part où
   coller — mesuré à y = 846 px dans une fenêtre de 768, exactement comme
   avant. C'est le pied qui colle, et la légende voyage avec lui. */
.pied-legende{position:sticky;bottom:0;z-index:15;padding:0;
  background:var(--surf);border-top:1px solid var(--filet)}
.legende-permanente{z-index:15;
  background:var(--surf);padding:5px var(--e3);display:flex;flex-wrap:wrap;align-items:center;
  gap:4px var(--e3);font-size:11.5px;color:var(--encre-2);min-height:30px}
.legende-permanente .pl-lg{display:inline-flex;align-items:center;gap:5px}
.legende-permanente i{width:12px;height:12px;border-radius:3px;
  border:1px solid var(--filet);display:inline-block}
.legende-permanente .mot{color:var(--encre-3)}

/* ---- LE FORMAT EST UNE MENTION, JAMAIS UN VERBE ----------------------- */
/* « Exporter » est le seul mot ; « CSV », « XLSX », « XML » descendent au
   second rang, dans le bouton, en petit. C'est ce qui permet de garder UN
   verbe sans perdre l'information dont l'utilisateur a besoin pour choisir
   entre deux sorties de la même liste. */
.bt small,.bt .pq{margin-left:6px;font-size:10.5px;font-weight:400;
  letter-spacing:.04em;text-transform:uppercase;color:var(--encre-3)}
.bt-p small,.bt-p .pq{color:rgba(255,255,255,.72)}

/* ---- LE BANDEAU DE PÉRIODE TIENT SUR UNE LIGNE, ET IL LA TIENT TOUJOURS. */
/* Une hauteur de bandeau qui dépend de la largeur de la fenêtre n'est pas un
   repère : à 1280 px, ses cinq éléments passaient à trois rangées et la grille
   descendait de 66 px sans prévenir. Ce qui cède est la LARGEUR du sélecteur
   de périmètre, jamais le nombre de rangées. */
.periode{flex-wrap:nowrap;overflow:hidden}
.periode>.bt{flex:0 0 auto;min-width:30px;padding:5px 10px;font-size:14px}
.periode .filtre{flex:1 1 auto;min-width:0;margin:0;padding:0;border:0;
  background:transparent;box-shadow:none;gap:var(--e2);align-items:center;
  flex-wrap:nowrap;overflow:hidden}
.periode .filtre .champ{flex:0 1 auto;min-width:0;flex-direction:row;
  align-items:center;gap:6px;margin:0}
.periode .filtre select{min-width:0;max-width:230px}
.periode .verbes{flex:0 0 auto;margin-left:auto;border:0;padding:0;
  background:transparent;box-shadow:none}
.periode .verbes.onglets{gap:0}
@media(max-width:1280px){.periode .filtre .champ>label{display:none}
  .periode .filtre select{max-width:170px}}

/* ---- LE BLOC QUI PORTE UNE GRILLE DE TEMPS NE COUPE PAS SON PIED. ------ */
/* ``.bloc`` rogne ce qui dépasse (``overflow:hidden``) pour que ses coins
   arrondis tiennent sur une table. Un pied COLLANT dans une boîte qui rogne
   ne colle à rien : il reste où il est né, et la légende était mesurée à
   y = 846 px dans une fenêtre de 768 — c'est-à-dire nulle part, exactement
   comme avant. Le bloc d'une grille de temps rend donc son rognage ; sa table
   a déjà le sien, dans ``.cadre``. */
.bloc-temps{overflow:visible}

/* =======================================================================
   REPÈRE C3 — L'ARGENT DU CLIENT ET DU SITE, LES LISTES, LE PARAMÉTRAGE
   07/09/2026. Une seule règle neuve : la GLOSE EN LIGNE, la phrase qui dit
   d'où vient un chiffre, sous le chiffre. Elle manquait, et son absence
   obligeait à écrire un chiffre nu — or « 40,1 % de marge » ne veut rien
   dire tant qu'on ne sait pas que 236 heures non affectées y sont
   valorisées au coût observé (AR-53).
   ======================================================================= */
.dit{display:block;font-size:11.5px;line-height:1.35;color:var(--encre-3);
  margin-top:2px;font-weight:400}

/* ═══════════════════════════════════════════════════════════════════════
   LE FLOTTANT — L'UNIQUE FAÇON DE POSER UN ÉLÉMENT AU-DESSUS DU RESTE
   Chantier G3, 07/09/2026.

   CE QUE LE DIRIGEANT A VU, DE SES YEUX, CE JOUR-LÀ : « le bouton de
   paramétrage sur le clic du nom en haut à droite ouvre une liste qui ne
   s'affiche pas à l'écran ; sur l'écran agent le clic sur *autre geste*
   ouvre un ascenseur qui n'est visible que dans la fenêtre des boutons
   plannings. » Ce sont DEUX SYMPTÔMES D'UNE SEULE MALADIE.

   LA MALADIE. Onze éléments du produit flottaient en ``position:absolute``
   dans un parent positionné. Un tel élément reste DANS la boîte de son
   parent : si ce parent porte un ``overflow``, il le DÉCOUPE ou le RETIENT.
   Mesuré au navigateur, à 1440 × 900, avant ce chantier :

     · le menu du compte, 260 × 287 px, posé à y = 49 dans un bandeau qui
       rogne à 56 px de haut : 280 px découpés, RIEN à l'écran ;
     · la longue-vue, 520 × 540, dans le même bandeau : 536 px découpés ;
     · le tiroir « Autres gestes » du dossier, 240 × 630, dans une barre de
       verbes de 44 px qui porte ``overflow-x:auto`` : la barre passe de 44
       à 672 px de contenu et se met à DÉFILER — c'est l'ascenseur vu par le
       dirigeant, et il est dans la barre parce que le tiroir n'a jamais
       quitté la barre ;
     · les propositions d'un champ qui interroge et la liste
       d'autocomplétion, découpées par le ``.bloc`` qui les contient (il
       rogne pour ses coins arrondis) ;
     · le repli du filtre et celui du raffinement, qui sortaient de 84 à
       101 px par la DROITE de la fenêtre.

   52 flottants ouverts et mesurés sur onze écrans, 42 en faute.

   LE REMÈDE, ET IL EST UNIQUE. Un flottant se déclare par ``data-flottant``
   et prend son cadre du VIEWPORT (``position:fixed``) : aucun ``overflow``
   d'ancêtre ne l'atteint plus. Ses coordonnées viennent de deux variables
   que ``design/hune.js`` calcule à l'ouverture, au défilement et au
   redimensionnement — jamais d'une règle écrite ici, parce qu'un décalage
   écrit dans la feuille ne sait pas où est l'ancre ni où finit l'écran.

   SANS SCRIPT, RIEN N'EST PERDU : ``--fl-x`` et ``--fl-y`` ne sont pas
   posées, ``left`` et ``top`` retombent sur ``auto``, et un élément fixé
   sans décalage se rend à sa POSITION STATIQUE — sous son bouton, hors de
   toute découpe. Le produit reste utilisable au clavier et sans JavaScript,
   comme tout le reste de la coquille.

   LA VALEUR DE L'ATTRIBUT dit le côté PRÉFÉRÉ (« bas » ou « haut »,
   « gauche » ou « droite ») ; le script le retourne quand la place manque.
   « etale » demande la largeur de l'ancre — c'est la forme des listes de
   propositions, qui doivent faire exactement la largeur de leur champ.

   AUCUN AUTRE MÉCANISME N'EST PERMIS : ``plateforme/tests_flottants.py``
   refuse toute règle de cette feuille qui poserait un ``position:absolute``
   avec un ``z-index``, c'est-à-dire tout élément qui se hisserait au-dessus
   de ses voisins par l'ancienne porte.
   ═══════════════════════════════════════════════════════════════════════ */
[data-flottant]{position:fixed;z-index:var(--z-flottant);
  left:var(--fl-x,auto);top:var(--fl-y,auto);right:auto;bottom:auto;margin:0;
  max-width:var(--fl-larg,none);max-height:var(--fl-haut,none);
  overflow:auto;overscroll-behavior:contain}
/* LA LISTE DE PROPOSITIONS FAIT LA LARGEUR DE SON CHAMP, et pas 240 px de
   plus : on lit la proposition au-dessus de ce qu'on a tapé. */
[data-flottant~="etale"]{width:var(--fl-ancre,auto)}

/* ═══════════════════════════════════════════════════════════════════════
   LE MANUEL DANS LE PRODUIT (/manuel/, 09/09/2026)

   Demande du dirigeant : « je veux que le manuel d'utilisation soit
   lisible directement dans le portail ». Le manuel fait 8 844 lignes de
   prose : c'est le seul écran du produit dont le contenu est un TEXTE
   SUIVI, et non des blocs, des tables et des verbes.

   Ce qu'il ajoute au vocabulaire est donc de la typographie de lecture,
   et rien d'autre : une mesure (72 caractères, comme « .prose »), un
   interligne, et la hiérarchie des titres du chapitre. Les tableaux du
   manuel — il en compte 132 — prennent « .tbl » comme partout ailleurs :
   le manuel ne dessine pas sa propre forme.
   ═══════════════════════════════════════════════════════════════════════ */
/* Le plan à gauche, le texte à droite. Sous 980 px le plan passe dessus :
   sur un téléphone, un plan en colonne de 200 px n'est plus un plan. */
.man-page{display:grid;grid-template-columns:minmax(220px,280px) 1fr;gap:var(--e4);align-items:start}
@media(max-width:980px){.man-page{grid-template-columns:1fr}}
.man-page>.bloc:first-child{position:sticky;top:66px}
@media(max-width:980px){.man-page>.bloc:first-child{position:static}}

.man-plan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.man-plan li{padding:3px 0;font-size:13px}
.man-plan a{text-decoration:none;color:var(--encre);font-weight:600}
.man-plan a:hover{color:var(--veille);text-decoration:underline}
.man-plan .glose{display:block;font-size:12px;color:var(--encre-3);font-weight:400}
.man-num{display:inline-block;min-width:1.6em;color:var(--encre-3);font-variant-numeric:tabular-nums}
.man-plan-ch .man-n2 a{font-weight:600}
.man-plan-ch .man-n3{padding-left:var(--e3);font-size:12.5px}
.man-plan-ch .man-n3 a{font-weight:400;color:var(--encre-2)}

/* LES PASSAGES TROUVÉS. Le titre du chapitre porte, l'extrait explique :
   c'est l'ordre dans lequel on décide d'ouvrir ou non. */
.man-res{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e3)}
.man-res li{border-left:2px solid var(--filet);padding-left:var(--e3)}
.man-res a{text-decoration:none;color:var(--veille)}
.man-res a:hover{text-decoration:underline}
.man-res .glose{display:block;font-size:12.5px;color:var(--encre-2);margin-top:2px}

/* LE TEXTE DU CHAPITRE. « max-width » en ch et non en px : la mesure d'une
   ligne se compte en caractères, et c'est elle qui décide si un paragraphe
   se lit ou se relit. */
.man{font-size:13.5px;line-height:1.62;color:var(--encre);max-width:78ch}
.man h2{font-family:var(--display);font-size:20px;line-height:1.25;margin:var(--e6) 0 var(--e3);
  padding-top:var(--e2);border-top:1px solid var(--filet);color:var(--encre)}
.man h3{font-size:15.5px;margin:var(--e5) 0 var(--e2);color:var(--encre)}
.man h4{font-size:13.5px;margin:var(--e4) 0 var(--e2);color:var(--encre-2);
  text-transform:uppercase;letter-spacing:.06em}
.man>:first-child{margin-top:0}
.man p{margin:0 0 var(--e3)}
.man ul,.man ol{margin:0 0 var(--e3);padding-left:var(--e5)}
.man li{margin-bottom:var(--e1)}
.man li>ul{margin:var(--e1) 0 0}
.man code{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:12.5px;
  background:var(--surf-2);border:1px solid var(--filet-2);border-radius:4px;padding:0 4px}
.man pre{background:var(--surf-2);border:1px solid var(--filet);border-radius:var(--r);
  padding:var(--e3) var(--e4);overflow-x:auto;font-size:12.5px;line-height:1.5;margin:0 0 var(--e3)}
.man hr{border:0;border-top:1px solid var(--filet-2);margin:var(--e5) 0}
.man a{color:var(--veille)}
/* L'ENCADRÉ PORTE LES « Dans Comète… », LES « POURQUOI » ET LES REFUS.
   Le manuel en compte 1 438 lignes : c'est sa deuxième voix, celle qui
   explique pendant que le corps décrit. Elle doit se distinguer d'un coup
   d'œil, sans crier — un filet à gauche, un fond à peine posé. */
.man blockquote{margin:0 0 var(--e3);padding:var(--e3) var(--e4);background:var(--surf-2);
  border-left:3px solid var(--veille);border-radius:0 var(--r) var(--r) 0}
.man blockquote>:last-child{margin-bottom:0}
.man .cadre{margin:0 0 var(--e4)}
.man .tbl td{vertical-align:top}
/* LA CAPSULE D'INTERFACE — l'image du bouton DANS la phrase (09/09/2026).
   C'est le geste de forme que Comète fait et que nous ne faisions pas :
   « cliquez sur ⟨image du bouton⟩ » au lieu d'une planche pleine page à
   trois écrans de là. Elle se pose à sa TAILLE RÉELLE, celle de l'écran :
   l'œil doit pouvoir comparer le petit rectangle du texte au grand
   rectangle de l'application, et une image redimensionnée casse cette
   comparaison. « vertical-align: middle » l'assied sur la ligne ;
   « margin: -2px 1px » reprend les deux pixels qu'une image en ligne
   ajoute sous la ligne de base, pour que l'interligne d'un paragraphe qui
   en porte trois reste celui des autres. Le filet et l'arrondi la
   détachent du fond du chapitre — sans eux, un bouton clair posé sur une
   page claire ne se voit pas comme une image. */
.man-capsule{display:inline-block;vertical-align:middle;margin:-2px 1px;max-width:100%;
  border:1px solid var(--filet-2);border-radius:3px;background:var(--surf)}
/* LE RAYÉ DU REGISTRE DES ÉCARTS. La règle d'entretien du manuel dit
   « un écart corrigé se RAYE, il ne s'efface pas : on garde la ligne et
   l'on écrit ce qui l'a soldée ». Le registre en compte cent quatre-vingt-
   dix. Il s'efface d'un ton — ce qui est soldé n'a plus à retenir l'œil —
   sans disparaître : c'est la trace qui fait la valeur du registre. */
.man s{color:var(--encre-3);text-decoration-thickness:1px}