/* Charte DUERP — prolonge docs/mockups/mock_formulaire_duerp.html, qui fait foi.
   Les tokens du site public clairvia.fr n'ont pas été lus : clairvia.fr résout vers une
   adresse interdite à ce serveur (CLAUDE.md §2). La palette des maquettes est donc la
   référence ; le rapprochement avec le site public s'arbitrera à partir d'ici.
   Polices embarquées (/assets/fonts.css) : jamais de ressource externe.

   UNE SEULE DÉFINITION PAR COULEUR. Aucune valeur hexadécimale hors de ce bloc de tokens :
   sans cette règle, le mode sombre laisse derrière lui des îlots clairs impossibles à voir
   en relisant le code.

   Le gabarit du document (duerp/pdf/gabarits/document-v1/) n'a PAS de mode sombre et ne doit
   pas en recevoir : un DUERP s'imprime et se présente à un inspecteur, et le gabarit est figé
   — une nouvelle mise en page devient document-v2. Contrôlé par tests/test_charte_navigateur.py. */
@import url("/assets/fonts.css");

:root{
  color-scheme:light;
  /* --- encres et surfaces --- */
  --ink:#1A1F26; --ink-2:#3F4854; --ink-3:#5C6773;
  /* --ink-4, deux corrections successives, et la seconde dit pourquoi la première ne suffisait
     pas. Lot 9 : #737C87 ne donnait que 3,91:1 sur --field. Lot 14, trouvé par axe-core :
     #656E79 donnait 4,40:1 sur --admin-soft — le calcul du lot 9 vérifiait chaque encre sur SA
     surface, jamais sur toutes les surfaces teintées où elle atterrit réellement.
     #5F6873 tient ≥ 4,81:1 sur les dix fonds clairs du thème. */
  --ink-4:#5F6873;
  /* Hiérarchie de surfaces du mode clair (lot 18). Les valeurs ne sont pas choisies à l'œil :
     chacune est bornée par une mesure, et le contrôle `tests/test_profondeur_clair.py` les
     rejoue dans le navigateur. Le seuil de séparation porte sur ΔL* (CIELAB) et non sur le
     rapport WCAG : à ces clartés, le rapport écrase des écarts que l'œil voit très bien —
     --paper/--surface-2 valait 1,03:1, un chiffre muet, pour un ΔL* de 1,08, qui dit tout.
     ΔL* depuis --paper : surface-2 2,59 · field 3,95 · desk 6,72 (avant : 1,08 · 3,21 · 5,28).
     --field est PLAFONNÉ : au-delà, l'aplat --r2 qui s'y pose tombe sous 3:1 (3,01:1 ici).
     Pour creuser davantage, un seul token bouge : --desk. */
  --paper:#FFFFFF; --desk:#E9ECF0; --field:#F1F4F7; --surface-2:#F5F8FA; --survol:#EAEEF3;
  /* --rule DÉLIMITE : sa valeur est déduite de la contrainte 3:1 (WCAG 1.4.11) contre la
     surface la plus sombre qu'il touche, pas choisie. 3,01:1 sur --desk, 3,57:1 sur --paper ;
     il valait 1,22:1, trop pâle pour délimiter quoi que ce soit.
     --rule-fine RYTHME une liste à l'intérieur d'une seule surface : il ne sépare pas deux
     supports, donc 1.4.11 ne le vise pas. Et la preuve est dans le calcul — à 3:1 il prendrait
     exactement la valeur de --rule, et le produit n'aurait plus qu'un filet pour deux emplois. */
  --rule:#83888F; --rule-fine:#CCD4DD;
  --admin:#16456B; --admin-soft:#E5EEF5; --admin-hi:#1D5C8F;
  /* --- échelle de criticité : réservée à la cotation, jamais décorative --- */
  --r1:#1E7A57; --r2:#B5850F; --r3:#C0551B; --r4:#9E1B16;
  /* --r2-texte existe parce que l'ocre de remplissage ne peut pas servir de texte :
     #B5850F ne donne que 3,32:1 sur blanc, et 14,5 px gras n'est pas du « grand texte »
     au sens WCAG. Le remplissage des pastilles reste --r2, pour ne pas diverger du document
     scellé, qui est figé. Ne pas « réharmoniser » les deux : ils ne servent pas à la même chose. */
  --r2-texte:#8C660B;
  /* Même raison, découverte au lot 18 en mesurant les encres sur les surfaces où elles
     atterrissent RÉELLEMENT : --r3 servait de texte à 16 px gras sur --field, à 4,25:1 —
     sous le seuil AVANT ce lot, et le creusement du champ l'aurait aggravé. L'aplat --r3
     garde sa valeur : une pastille et un mot ne font pas le même travail. */
  --r3-texte:#AF4D19;
  /* Encre posée SUR une couleur pleine. --sur-r2 est l'exception : du blanc sur l'ocre ne
     donne que 3,32:1, l'encre sombre 4,99:1. */
  --sur-couleur:#FFFFFF; --sur-r2:#1A1F26; --sur-admin:#FFFFFF;
  /* --- états --- */
  --ok-soft:#E8F3EE; --ok-txt:#1B4D3A;
  --err:#69120F; --err-bg:#FBEDEC;
  --attention-bg:#FBF4DA; --attention-txt:#5A4A1E; --perime-bg:#FFF6E9;
  --jauge:#E4E8EC;
  --ombre-1:rgba(26,31,38,.13);

  /* --- échelle typographique (lot 17a) : une seule source, sept rôles ---
     Relevé avant travaux : 24 tailles écrites en dur, dont quatorze cohabitant sur le seul écran
     de l'étape 4. Le nom d'un token dit son EMPLOI, jamais sa valeur ; changer une valeur ici
     change la page entière, et c'est le but. Les tailles ne dépendent pas du thème : elles ne
     sont déclarées que dans ce bloc, et ajustées une seule fois sous 640 px. */
  --t-titre-page:28px; --t-titre-section:21px; --t-chapo:18px; --t-sous-titre:17px; --t-texte:16px;
  --t-secondaire:14px; --t-mention:13px; --t-micro:12px;
  /* Chaque rôle porte sa hauteur de ligne, déclarée avec lui : sans cela, on remplacerait
     24 tailles en dur par autant d'interlignes en dur. */
  --lh-titre-page:1.15; --lh-titre-section:1.25; --lh-chapo:1.45; --lh-sous-titre:1.35;
  --lh-texte:1.5; --lh-secondaire:1.45; --lh-mention:1.4; --lh-micro:1.3;
  /* Deux largeurs de lecture, et deux seulement : le texte suivi se lit, le texte en liste se
     balaie. Elles remplacent sept largeurs (56, 58, 62, 64, 66, 70 et 80 caractères). */
  --lecture:72ch; --lecture-dense:60ch;

  /* --- rythme vertical (lot 17a) : une seule échelle d'espacements ---
     Relevé avant travaux : 125 valeurs distinctes de marge, de remplissage et d'écart, inventées
     au cas par cas. Toute valeur rejoint le pas le plus proche ; à égalité, le pas inférieur, pour
     ne pas gonfler les pages. */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px;
  /* Deux rayons, et c'est une décision : ce produit imprime un document, son vocabulaire est
     anguleux. Le rond est réservé aux pastilles, qui doivent se distinguer d'un bouton. */
  --rayon-0:0; --rayon-rond:50%;
  /* Le remplissage d'une carte, partagé par la carte elle-même et par ce qui déborde
     volontairement de ses bords (le héros de la vitrine). */
  --carte-padding:var(--e-6);
  /* Largeur d'un champ isolé : au-delà, un champ de saisie devient une cible imprécise. */
  --champ:432px;
  /* Trois niveaux d'élévation : aucune, la carte posée, l'élément qui se soulève au survol. */
  /* Une ombre dit « au-dessus », elle ne décore pas — donc une carte POSÉE projette moins que
     ce qui la survole. L'inverse était écrit : 0 12px 30px pour la carte contre 0 2px 6px pour
     le flottant. La nappe diffuse est retirée ; c'est --rule qui délimite désormais la carte. */
  --ombre-carte:0 1px 2px var(--ombre-1);
  --ombre-flottante:0 2px 6px var(--ombre-1);
  /* Durées : de 150 à 320 ms, sortie douce, aucun rebond. */
  --duree-courte:150ms; --duree-moyenne:220ms; --duree-longue:320ms; --sortie:ease-out;
  /* La cible d'une ancre s'arrête sous l'en-tête collant : cette marge et la hauteur de l'en-tête
     sont le même fait. La seconde vaut pour une réponse dépliable, dont le titre doit rester vu. */
  --ancre:72px; --ancre-question:136px;
  --halo-focus:0 0 0 3px color-mix(in srgb,var(--admin) 35%,transparent);
  --ombre-barre:0 -3px 8px var(--ombre-1);
  /* Le mot-symbole a son propre rôle : mesuré au lot 17a, il est rendu partout dans la même fonte
     (Newsreader) et les mêmes métriques — il n'avait pas un défaut de police mais un défaut de
     présence, à 19 px face à un titre de 40 px. Graisse 500 : la fonte Medium est déjà embarquée. */
  --t-marque:22px; --lh-marque:1.2; --graisse-marque:500; --interlettrage-marque:-.015em;
  /* Deux rôles propres à la vitrine, qui a son premier écran à elle. */
  --t-heros:40px; --t-chiffre:clamp(42px,4.2vw,56px);
  /* --- vitrine (lot 16) : voir la charte §10. Aucune de ces valeurs ne sert au portail. ---
     --accent : UN SEUL rôle, l'emphase éditoriale. Jamais sur un lien, un bouton, un état, ni
     sur la criticité. Le violet est la seule famille libre (r1–r4 occupent vert, ocre, orange,
     rouge ; le bleu est l'interactif), et c'est l'encre des tampons administratifs. */
  --accent:#5B3A94;
  --accent-trait:color-mix(in srgb, var(--accent) 45%, transparent);
  --accent-grille:color-mix(in srgb, var(--accent) 7%, transparent);
  --accent-bord:color-mix(in srgb, var(--accent) 40%, var(--rule));
  --fond-vitrine:#F7F4EF;
  --halo-heros:none;
  /* Bordure des champs de la vitrine : >= 3:1 contre leur fond (WCAG 1.4.11). Le portail garde
     --rule, qui ne tient pas ce seuil : dette consignée (charte §9). */
  --bord-champ:#737B85;
  /* Appui : le troisième état du bleu interactif, partagé par les deux surfaces. */
  --admin-actif:#10385A;
}

/* Mode sombre. Il suit la préférence système, et le choix explicite du client le surclasse :
   le thème retenu est écrit par le serveur en data-theme sur <html>, depuis un cookie. Aucun
   script au chargement — la politique de sécurité interdit le script inline, et un fichier
   bloquant dans le <head> coûterait une requête pour une information que le serveur a déjà.

   Les quatre niveaux de criticité ne sont pas inversés mais REMPLACÉS : posées telles quelles
   sur fond sombre, les couleurs claires donnent 2,12:1 pour « critique », qui deviendrait le
   moins visible des quatre. Valeurs retenues au lot 9, toutes >= 4,5:1 sur les trois fonds,
   distance CIEDE2000 minimale de 17,2 en vision normale. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){ color-scheme:dark;
    --ink:#E7EAEE; --ink-2:#C3CAD3; --ink-3:#9AA3AE; --ink-4:#88919B;
    --paper:#181D23; --desk:#0F1317; --field:#21272E; --surface-2:#1C2229; --survol:#232A32;
    --rule:#657386; --rule-fine:#242B33;
    --admin:#7FB6E4; --admin-soft:#1B2B3A; --admin-hi:#A2CCF0;
    --r1:#68C7AC; --r2:#F5BC76; --r3:#E58554; --r4:#E96675;
    --r2-texte:#F5BC76; --r3-texte:#E58554;
    --sur-couleur:#12161B; --sur-r2:#12161B; --sur-admin:#0F1317;
    --ok-soft:#16261F; --ok-txt:#A8D8C0;
    --err:#F4ACA5; --err-bg:#2A1B1B;
    --attention-bg:#2A2418; --attention-txt:#F0D9A0; --perime-bg:#2A2118;
    --jauge:#2C333B;
    --ombre-1:rgba(0,0,0,.55);
    --accent:#BFA6F2;
    --accent-grille:color-mix(in srgb, var(--accent) 9%, transparent);
    --fond-vitrine:var(--desk);
    --halo-heros:radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
      radial-gradient(circle at 0 100%, color-mix(in srgb, var(--admin) 7%, transparent), transparent 58%);
    --bord-champ:#7C8591;
    --admin:#8CB8FF; --admin-hi:#A9C9FF; --admin-actif:#7AA8F0;
  }
}
:root[data-theme="sombre"]{ color-scheme:dark;
  --ink:#E7EAEE; --ink-2:#C3CAD3; --ink-3:#9AA3AE; --ink-4:#88919B;
  --paper:#181D23; --desk:#0F1317; --field:#21272E; --surface-2:#1C2229; --survol:#232A32;
  --rule:#657386; --rule-fine:#242B33;
  --admin:#7FB6E4; --admin-soft:#1B2B3A; --admin-hi:#A2CCF0;
  --r1:#68C7AC; --r2:#F5BC76; --r3:#E58554; --r4:#E96675;
  --r2-texte:#F5BC76; --r3-texte:#E58554;
  --sur-couleur:#12161B; --sur-r2:#12161B; --sur-admin:#0F1317;
  --ok-soft:#16261F; --ok-txt:#A8D8C0;
  --err:#F4ACA5; --err-bg:#2A1B1B;
  --attention-bg:#2A2418; --attention-txt:#F0D9A0; --perime-bg:#2A2118;
  --jauge:#2C333B;
  --ombre-1:rgba(0,0,0,.55);
  --accent:#BFA6F2;
  --accent-grille:color-mix(in srgb, var(--accent) 9%, transparent);
  --fond-vitrine:var(--desk);
  --halo-heros:radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
    radial-gradient(circle at 0 100%, color-mix(in srgb, var(--admin) 7%, transparent), transparent 58%);
  --bord-champ:#7C8591;
  --admin:#8CB8FF; --admin-hi:#A9C9FF; --admin-actif:#7AA8F0;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--desk);color:var(--ink);
  font-family:"Public Sans",system-ui,sans-serif;font-size:var(--t-texte);line-height:1.5;}
button{font:inherit;color:inherit;cursor:pointer;}
a{color:var(--admin);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;transition:text-decoration-thickness var(--duree-courte) var(--sortie);}
.btn,.marque,.destinations a,.step,.v-lien-fleche,.unites-nav a,.opts button,.yn button{text-decoration:none;}
:focus-visible{outline:2px solid var(--admin);outline-offset:2px;}
/* Pseudo-éléments compris : le trait des liens de la vitrine est un ::after (lot 16). */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;}}
[hidden]{display:none!important;}

.flag{margin:0;padding:var(--e-2) var(--e-5);font-size:var(--t-secondaire);line-height:var(--lh-secondaire);color:var(--attention-txt);background:var(--attention-bg);border-left:4px solid var(--attention-txt);}
/* ---------- gabarit unique (lot 14) ----------
   Il existait deux gabarits jamais réunis : `.app` (1180 px, parcours) et `.page` (880 px, tout
   le reste), l'en-tête calé sur le premier. À 1920 px, la marque tombait 150 px à gauche du fil
   d'Ariane placé juste en dessous : rien ne s'alignait. Un seul gabarit désormais, et l'en-tête,
   la ou les colonnes et le pied partagent **la même largeur et la même gouttière** — c'est ce
   partage, et non une valeur, qui garantit l'alignement. */
:root{--colonne:1180px;--lateral:300px;--gouttiere:28px;--gouttiere-bord:24px;}
.entete-in,.cadre,.pied-in{max-width:var(--colonne);margin:0 auto;padding:0 var(--gouttiere-bord);}

.entete{border-bottom:1px solid var(--rule);background:var(--paper);}
.entete-in{display:flex;align-items:center;gap:var(--e-5);min-height:56px;font-size:var(--t-secondaire);color:var(--ink-3);
  flex-wrap:wrap;}
.marque{font-family:"Newsreader",Georgia,serif;font-size:var(--t-marque);font-weight:var(--graisse-marque);
  line-height:var(--lh-marque);letter-spacing:var(--interlettrage-marque);color:var(--ink);
  text-decoration:none;white-space:nowrap;}
@media (hover:hover) and (pointer:fine){.marque:hover{text-decoration:underline;text-underline-offset:3px;}}
.destinations{display:flex;gap:var(--e-4);flex:1;}
.destinations a{color:var(--ink-2);text-decoration:none;padding:var(--e-1) 0;border-bottom:2px solid transparent;}
@media (hover:hover) and (pointer:fine){.destinations a:hover{color:var(--ink);border-bottom-color:var(--rule);}}
.destinations a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--admin);}
.entete-droite{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap;margin-left:auto;}
.entete form{display:inline;}
.linkbtn{background:none;border:0;padding:0;color:var(--admin);text-decoration:underline;text-underline-offset:2px;font-size:var(--t-secondaire);}

.cadre{margin:var(--e-4) auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gouttiere);
  align-items:start;}
.colonne{min-width:0;}
/* La colonne latérale n'apparaît qu'au-delà de 1400 px. En dessous, elle passe SOUS la colonne
   principale — elle ne disparaît pas : ce qu'elle porte oriente, et rester orienté ne dépend pas
   de la largeur de l'écran. */
.lateral{min-width:0;}
.lat-bloc{border:1px solid var(--rule);background:var(--surface-2);padding:var(--e-3) var(--e-4);margin:0 0 var(--e-3);
  font-size:var(--t-secondaire);line-height:var(--lh-secondaire);color:var(--ink-2);}
.lat-bloc h2{font-size:var(--t-secondaire);margin:0 0 var(--e-2);color:var(--ink);letter-spacing:0;}
.lat-bloc p{margin:0 0 var(--e-2);}
.lat-bloc p:last-child{margin-bottom:0;}
.lat-bloc .chiffres{list-style:none;margin:0 0 var(--e-2);padding:0;}
.lat-bloc .chiffres li{padding:var(--e-1) 0;border-bottom:1px solid var(--rule);}
.lat-bloc .chiffres li:last-child{border-bottom:0;}
.lat-bloc .chiffres b{font-size:var(--t-sous-titre);color:var(--ink);margin-right:var(--e-1);}
.lat-version{border-top:1px solid var(--rule);padding-top:var(--e-2);}
.lat-version .src{display:block;font-size:var(--t-mention);color:var(--ink-4);margin-top:var(--e-1);}
.lat-bloc .btn.sm{margin-top:var(--e-1);}
/* Sur l'accueil, la réassurance est portée par chaque carte : à plusieurs établissements, une
   colonne unique ne pourrait en montrer qu'un, et choisir lequel déciderait à la place du
   client. Une ligne, trois faits, un geste — jamais un score. */
.doc-chiffres{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-4);margin:var(--e-3) 0 0;
  font-size:var(--t-secondaire);line-height:var(--lh-secondaire);color:var(--ink-2);}
.doc-chiffres b{font-size:var(--t-sous-titre);color:var(--ink);margin-right:var(--e-1);}
.doc-chiffres .btn.sm{margin-left:auto;}
/* Fiche : un fait par ligne, libellé au-dessus. Ce n'est pas un formulaire, c'est un constat. */
.fiche{margin:0;display:grid;grid-template-columns:220px 1fr;gap:var(--e-2) var(--e-4);font-size:var(--t-texte);line-height:var(--lh-texte);}
.fiche dt{color:var(--ink-4);}
.fiche dd{margin:0;color:var(--ink);}
.fiche dd .src{display:block;font-size:var(--t-mention);color:var(--ink-4);margin-top:var(--e-1);max-width:var(--lecture);}
/* Emplacement annoncé et vide : il se voit comme une place réservée, jamais comme une
   fonctionnalité grisée — un bouton qui ne fait rien est pire qu'une case vide annoncée. */
/* Première connexion, et elle seule : un repère, pas une bannière. Il dit ce qu'on trouve ici
   et ce qu'on n'y trouve pas — à trois visites par an, personne n'explore. */
.bienvenue{background:var(--admin-soft);padding:var(--e-4) var(--e-4);margin:0 0 var(--e-5);}
.bienvenue h2{margin:0 0 var(--e-2);font-size:var(--t-titre-section);line-height:var(--lh-titre-section);}
.bienvenue p{margin:0 0 var(--e-2);color:var(--ink-2);max-width:var(--lecture);font-size:var(--t-texte);
  line-height:var(--lh-secondaire);}
.bienvenue p:last-child{margin-bottom:0;}
.bloc.vide{border-style:dashed;background:var(--surface-2);color:var(--ink-3);}
.bloc.vide h3{color:var(--ink-3);}
@media (max-width:640px){.fiche{grid-template-columns:1fr;gap:var(--e-1) 0;}.fiche dd{margin-bottom:var(--e-2);}}

/* ---------- site vitrine (lot 15, refondu au lot 16) ----------
   La même charte, le même gabarit, les mêmes points de rupture : la même maison, vue de la rue.
   Lot 16 (charte §10) : un fond chaud propre à la vitrine, un accent d'emphase qui ne porte
   JAMAIS l'interactivité, le schéma du moteur rendu depuis la base, des interactions en CSS seul.
   Tout survol est sous (hover: hover) and (pointer: fine) : sur un écran tactile, un survol
   reste collé après un tap. */
body[data-page="vitrine"]{background:var(--fond-vitrine);}
/* En-tête qui reste en place : fond plein (--paper, déjà posé), sans flou. Seulement quand il
   tient sur une ligne : mesuré à 173 px à 380 px et 101 px à 640 px, il masquait la cible des
   ancres (marge de 72 px) et mangeait l'écran. Contrôlé par la cause, à chaque largeur. */
@media (min-width:720px){
  body[data-page="vitrine"] .entete{position:sticky;top:0;z-index:20;}
}
.carte.vitrine section{margin:0 0 var(--e-7);}
.carte.vitrine section:last-child{margin-bottom:0;}
.carte.vitrine section section{margin:0;}
.carte.vitrine h2{font-size:var(--t-titre-page);line-height:var(--lh-titre-page);margin:0 0 var(--e-2);}
.carte.vitrine h3{font-size:var(--t-sous-titre);line-height:var(--lh-sous-titre);margin:var(--e-5) 0 var(--e-2);}
.carte.vitrine section[id],.carte.vitrine details[id]{scroll-margin-top:var(--ancre);}
.carte.vitrine p{max-width:var(--lecture);}

/* --- navigation : un trait qui se déploie depuis la gauche --- */
body[data-page="vitrine"] .destinations a{position:relative;border-bottom:0;}
body[data-page="vitrine"] .destinations a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--admin);transform:scaleX(0);transform-origin:left center;transition:transform var(--duree-moyenne) var(--sortie);}

/* --- boutons et liens d'action --- */
.btn{transition:background-color var(--duree-courte) var(--sortie),border-color var(--duree-courte) var(--sortie),
  transform var(--duree-courte) var(--sortie),box-shadow var(--duree-courte) var(--sortie);}
.btn:not(.ghost):active{background:var(--admin-actif);border-color:var(--admin-actif);transform:none;box-shadow:none;}
.v-lien-fleche{display:inline-flex;align-items:center;gap:var(--e-1);min-height:44px;margin-left:var(--e-3);padding:0 var(--e-1);
  font-weight:600;color:var(--admin);text-decoration:none;}
.v-lien-fleche .fleche{display:inline-block;transition:transform var(--duree-moyenne) var(--sortie);}

/* --- références d'articles : soulignées AU REPOS, repérables sans survol. L'icône de lien
   externe n'apparaît qu'au survol : c'est l'un des deux seuls usages permis de l'opacité
   (charte §7 nonies), l'autre étant les animations d'entrée, qui finissent à 1. --- */
.v-ref{position:relative;color:var(--admin);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}
/* Hors du flux : invisible au repos, elle ne doit pas écarter le texte qui suit. */
.v-ref::after{content:"↗" / "";position:absolute;left:100%;top:0;margin-left:var(--e-1);font-size:.8em;opacity:0;
  transition:opacity var(--duree-courte) var(--sortie);}

/* --- le héros --- */
.carte.vitrine section.v-heros{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-5);align-items:center;
  margin:calc(-1 * var(--carte-padding)) calc(-1 * var(--carte-padding)) var(--e-7);
  padding:var(--carte-padding);border-bottom:1px solid var(--rule);background-image:var(--halo-heros);}
.v-heros h1{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:var(--t-heros);line-height:1.12;
  letter-spacing:-.02em;margin:0 0 var(--e-3);max-width:20ch;}
.v-heros h1 em{font-style:italic;color:var(--accent);}
.v-surtitre{margin:0 0 var(--e-3);font-size:var(--t-mention);line-height:var(--lh-mention);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.v-promesse{font-size:var(--t-chapo);line-height:var(--lh-chapo);color:var(--ink-2);margin:0 0 var(--e-2);}
.v-sous{color:var(--ink-3);margin:0 0 var(--e-5);}
.v-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-1);margin:0;}
@media (min-width:980px){
  .carte.vitrine section.v-heros--schema{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e-6);}
}

/* --- le schéma du moteur : rendu depuis la base, rien n'y est cliquable. Grille légère en
   fond, nœuds pleins par-dessus. Le survol d'une branche éclaire son chemin, sans affordance. --- */
.v-schema{margin:0;padding:var(--e-4) var(--e-4) var(--e-3);min-width:0;border:1px solid var(--rule);background-color:var(--paper);
  background-image:linear-gradient(var(--accent-grille) 1px,transparent 1px),
    linear-gradient(90deg,var(--accent-grille) 1px,transparent 1px);
  background-size:24px 24px;background-position:-1px -1px;}
.v-schema-titre{margin:0 0 var(--e-3);font-size:var(--t-mention);line-height:var(--lh-mention);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.v-noeud{position:relative;max-width:320px;margin:0 auto;padding:var(--e-2) var(--e-3);text-align:center;
  background:var(--paper);border:1.5px solid var(--accent);}
.v-noeud b{display:block;font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:var(--t-titre-section);line-height:var(--lh-titre-section);color:var(--ink);}
.v-etiquette{display:block;font-size:var(--t-micro);line-height:var(--lh-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
.v-trait{display:block;width:2px;height:16px;margin:0 auto;background:var(--accent-trait);transform-origin:top;}
.v-branches{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e-4);margin-top:var(--e-4);align-items:start;}
.v-branches:has(> .v-branche:only-child){grid-template-columns:minmax(0,1fr);}
.v-branche{position:relative;min-width:0;padding:var(--e-2) var(--e-3) var(--e-3);background:var(--paper);border:1px solid var(--rule);
  transition:border-color var(--duree-moyenne) var(--sortie);}
/* L'accolade : chaque branche en porte sa moitié, pour que son survol n'éclaire que son chemin. */
.v-branche::before,.v-branche::after{content:"";position:absolute;border:0 solid var(--accent-trait);
  transition:border-color var(--duree-moyenne) var(--sortie);}
.v-branche::before{top:-17px;height:16px;border-top-width:2px;}
.v-branche:first-child::before{left:50%;right:-9px;border-left-width:2px;}
.v-branche:last-child::before{left:-9px;right:50%;border-right-width:2px;}
.v-branche:only-child::before{left:50%;right:auto;border-top-width:0;}
.v-branche-titre{margin:0 0 var(--e-1);font-size:var(--t-mention);line-height:var(--lh-mention);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);transition:color var(--duree-moyenne) var(--sortie);}
.v-branche ul{list-style:none;margin:0;padding:0;}
.v-item{padding:var(--e-1) 0;border-top:1px solid var(--rule-fine);font-size:var(--t-secondaire);line-height:1.4;color:var(--ink);}
.v-item:first-child{border-top:0;}
.v-article{display:block;margin-top:var(--e-1);font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-3);}
.v-bp{font-style:italic;}

/* Apparition unique au chargement : équipement, trait, risques, obligations — en 1,06 s.
   Aucune apparition au défilement, aucun chiffre animé. */
@keyframes v-apparaitre{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes v-deployer{from{transform:scaleY(0);}to{transform:none;}}
[data-apparition]{animation:v-apparaitre var(--duree-longue) var(--sortie) both;}
[data-apparition="2"]{animation-name:v-deployer;animation-delay:.24s;}
[data-apparition="3"]{animation-delay:.48s;}
[data-apparition="4"]{animation-delay:.74s;}

/* Empilé : un rail à gauche, relié à chaque branche. C'est ici que l'empreinte a déjà débordé
   sans créer de défilement (charte §7 ter) : contrôlé par la cause, à 380 px. */
@media (max-width:640px){
  .v-noeud{max-width:none;margin:0;text-align:left;}
  .v-trait{margin:0 0 0 var(--e-4);}
  .v-branches,.v-branches:has(> .v-branche:only-child){grid-template-columns:minmax(0,1fr);gap:var(--e-3);margin-top:0;padding-left:var(--e-6);}
  .v-branche::before,.v-branche:first-child::before,.v-branche:last-child::before,.v-branche:only-child::before{
    left:-15px;right:auto;top:-15px;width:14px;height:36px;
    border-width:0 0 2px 2px;}
  .v-branche:not(:last-child)::after{left:-15px;top:21px;bottom:-15px;border-left-width:2px;}
}

/* --- les faits : colonnes typographiques séparées par des filets neutres --- */
.v-faits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:var(--e-5) 0 0;}
.v-fait{min-width:0;padding:var(--e-1) var(--e-5) var(--e-1);border-left:1px solid var(--rule);}
.v-fait:first-child{border-left:0;padding-left:0;}
.carte.vitrine .v-fait p{margin:0;}
.v-chiffre{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:var(--t-chiffre);line-height:1;
  letter-spacing:-.02em;color:var(--accent);white-space:nowrap;}
.v-chiffre sup{font-size:.45em;vertical-align:top;position:relative;top:.25em;}
.carte.vitrine .v-fait .v-fait-titre{margin:var(--e-1) 0 var(--e-2);font-weight:600;font-size:var(--t-secondaire);line-height:var(--lh-secondaire);color:var(--ink);}
.v-fait p:not([class]){font-size:var(--t-secondaire);line-height:var(--lh-secondaire);color:var(--ink-2);}
.carte.vitrine .v-fait .src{margin-top:var(--e-2);font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-4);}
.carte.vitrine .v-ligne{max-width:none;margin:var(--e-5) 0 var(--e-6);padding:var(--e-3) 0 0;border-top:1px solid var(--rule);
  font-size:var(--t-secondaire);line-height:var(--lh-secondaire);color:var(--ink-2);}
.v-ligne .src{display:block;margin-top:var(--e-1);font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-4);}
@media (max-width:1100px){
  .v-faits{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--e-5);}
  .v-fait:nth-child(odd){border-left:0;padding-left:0;}
}
@media (max-width:640px){
  .v-faits{grid-template-columns:minmax(0,1fr);row-gap:0;}
  .v-fait,.v-fait:nth-child(odd){border-left:0;padding:var(--e-4) 0;border-top:1px solid var(--rule);}
  .v-fait:first-child{border-top:0;padding-top:0;}
}

.v-sanctions .src,.v-prix .src{display:block;font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-4);margin-top:var(--e-1);}
.v-temps td:nth-child(2),.v-temps td:nth-child(3){white-space:nowrap;}

.v-etape{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-4);margin:0 0 var(--e-6);}
.v-etape-txt h3{margin-top:0;display:flex;align-items:baseline;gap:var(--e-2);}
.v-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:var(--rayon-rond);background:var(--admin);color:var(--sur-admin);font-size:var(--t-secondaire);line-height:var(--lh-secondaire);flex:none;}

.v-atouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--e-4);margin-top:var(--e-4);}
.v-atouts>div{border:1px solid var(--rule);padding:var(--e-4) var(--e-4);}
.v-atouts h3{margin:0 0 var(--e-1);font-size:var(--t-texte);line-height:var(--lh-texte);}
.v-atouts p{margin:0;font-size:var(--t-secondaire);line-height:var(--lh-secondaire);color:var(--ink-2);}

/* L'échelle r1–r4 est réservée à la cotation (charte §3) : l'appel prend les tokens d'état. */
.v-appel{background:var(--ok-soft);color:var(--ok-txt);
  padding:var(--e-3) var(--e-4);margin-top:var(--e-4);}
.v-appel .btn.sm{margin-left:var(--e-2);}

/* --- questions : <details>/<summary> natifs, sans JavaScript --- */
.v-question{border-top:1px solid var(--rule);}
.v-question:last-of-type{border-bottom:1px solid var(--rule);}
.v-question>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);
  padding:var(--e-3) var(--e-1);cursor:pointer;list-style:none;}
.v-question>summary::-webkit-details-marker{display:none;}
.carte.vitrine .v-question h3{margin:0;font-size:var(--t-sous-titre);line-height:var(--lh-sous-titre);font-weight:600;transition:color var(--duree-courte) var(--sortie);}
.chevron{flex:none;position:relative;width:28px;height:28px;border:1px solid var(--rule);border-radius:var(--rayon-rond);
  transition:transform var(--duree-moyenne) var(--sortie);}
.chevron::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:translate(-50%,-70%) rotate(45deg);}
.v-question[open]>summary .chevron{transform:rotate(180deg);}
/* Cible des ancres : la question reste visible au-dessus de sa réponse. */
.v-reponse{padding:0 var(--e-1) var(--e-3);scroll-margin-top:var(--ancre-question);}
.carte.vitrine .v-reponse p{margin:0 0 var(--e-2);font-size:var(--t-texte);line-height:var(--lh-texte);color:var(--ink-2);}
.carte.vitrine .v-reponse .src{font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-4);}
.v-reponse ul{margin:0 0 var(--e-2);padding-left:var(--e-4);color:var(--ink-2);}

/* --- le formulaire --- */
.carte.vitrine .v-encadre{max-width:560px;margin:0 0 var(--e-4);padding:var(--e-3) var(--e-3);border:1px solid var(--rule);
  background:var(--surface-2);color:var(--ink-2);font-size:var(--t-secondaire);line-height:var(--lh-secondaire);}
#resume-erreurs{max-width:560px;}
#resume-erreurs p{margin:0 0 var(--e-1);}
#resume-erreurs ul{margin:0;padding-left:var(--e-4);}
#resume-erreurs a{color:var(--err);}
.v-form{max-width:560px;}
.v-choix{border:0;padding:0;margin:0 0 var(--e-4);}
.v-choix legend{padding:0;margin-bottom:var(--e-1);font-size:var(--t-secondaire);line-height:var(--lh-secondaire);color:var(--ink-2);}
.v-option{display:flex;align-items:center;gap:var(--e-2);min-height:44px;margin:0 0 var(--e-2);padding:var(--e-2) var(--e-3);cursor:pointer;
  border:1px solid var(--bord-champ);background:var(--paper);
  transition:border-color var(--duree-courte) var(--sortie),background-color var(--duree-courte) var(--sortie);}
.v-option input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--admin);}
.v-option:has(input:checked){border-color:var(--admin);background:var(--admin-soft);}
.champ{margin:0 0 var(--e-4);}
.champ label{display:block;margin-bottom:var(--e-1);font-size:var(--t-secondaire);line-height:var(--lh-secondaire);color:var(--ink-2);}
.champ label em{font-style:normal;color:var(--ink-4);}
.champ .src{display:block;margin:0 0 var(--e-1);font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-4);}
.champ-erreur{display:flex;align-items:flex-start;gap:var(--e-1);margin-top:var(--e-1);font-size:var(--t-secondaire);line-height:var(--lh-secondaire);color:var(--err);}
.champ-erreur .icone{flex:none;margin-top:var(--e-1);}

.v-accuse{max-width:560px;padding:var(--e-3) var(--e-4);border-left:3px solid var(--ok-txt);background:var(--ok-soft);color:var(--ok-txt);}
.carte.vitrine .v-accuse h3{margin:0 0 var(--e-1);font-size:var(--t-titre-section);line-height:var(--lh-titre-section);}
.carte.vitrine .v-accuse p{margin:0 0 var(--e-2);}

.carte.vitrine section.v-donnees{max-width:560px;margin-top:var(--e-5);padding-top:var(--e-4);border-top:1px solid var(--rule);}
.carte.vitrine .v-donnees h3{margin:0 0 var(--e-2);font-size:var(--t-texte);line-height:var(--lh-texte);}
.v-donnees dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--e-1) var(--e-4);margin:0;font-size:var(--t-secondaire);line-height:var(--lh-secondaire);}
.v-donnees dt{color:var(--ink-3);}
.v-donnees dd{margin:0;color:var(--ink-2);}
.v-donnees .a-fixer{font-style:italic;color:var(--ink-4);}

/* --- survols : seulement ce qui est cliquable, et le chemin du schéma --- */
@media (hover:hover) and (pointer:fine){
  body[data-page="vitrine"] .destinations a:hover::after{transform:scaleX(1);}
  .v-lien-fleche:hover .fleche{transform:translateX(4px);}
  .v-ref:hover::after{opacity:1;}
  .v-question>summary:hover h3{color:var(--admin);}
  .v-option:hover{border-color:var(--admin);}
  .v-branche:hover{border-color:var(--accent-bord);}
  .v-branche:hover .v-branche-titre{color:var(--accent);}
  .v-branche:hover::before,.v-branche:hover::after{border-color:var(--accent);}
}

@media (max-width:880px){
  .carte.vitrine section.v-heros{margin:calc(-1 * var(--carte-padding)) calc(-1 * var(--carte-padding)) var(--e-6);}
}
@media (max-width:640px){
  /* L'échelle se resserre d'un cran ; aucune règle n'est réécrite. */
  :root{--t-titre-page:24px;--t-heros:30px;--t-marque:20px;}
  .v-heros h1{font-size:var(--t-heros);max-width:none;}
  .v-lien-fleche{margin-left:0;}
  .v-donnees dl{grid-template-columns:minmax(0,1fr);}
  .v-donnees dd{margin-bottom:var(--e-1);}
}

@media (min-width:1400px){
  :root{--colonne:calc(1180px + 300px + 28px);}
  .cadre{grid-template-columns:minmax(0,1180px) var(--lateral);}
}
/* Les écrans de parcours n'ont pas de colonne latérale (arbitrage Q4). Ils gardent donc la
   largeur d'une seule colonne — et l'en-tête avec eux, sinon il surplomberait la carte de
   330 px : le défaut du 1920 px, vu de l'autre côté. C'est la page qui le déclare, parce que
   l'en-tête est hors de la grille et ne peut pas l'observer. */
body[data-gabarit="colonne"]{--colonne:1180px;}
body[data-gabarit="colonne"] .cadre{grid-template-columns:minmax(0,1fr);}

.carte{background:var(--paper);padding:var(--carte-padding);border-radius:var(--rayon-0);
  box-shadow:var(--ombre-carte);}
.carte.etroite{max-width:460px;margin:0 auto;}
/* Une page, une tâche : le bloc de connexion est seul, centré dans l'espace qui reste entre
   l'en-tête et le pied — mesuré par la disposition, jamais par une soustraction approximative. */
body[data-page="connexion"]{min-height:100dvh;display:flex;flex-direction:column;}
body[data-page="connexion"] .cadre{flex:1;align-content:center;}
.carte.app{padding:0;display:grid;grid-template-columns:250px 1fr;min-height:660px;}

/* ---------- rail ---------- */
.rail{border-right:1px solid var(--rule);background:var(--surface-2);display:flex;flex-direction:column;padding:var(--e-5) 0 var(--e-4);}
.rail h1{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:var(--t-titre-section);margin:0 var(--e-4) var(--e-1);letter-spacing:-.01em;}
.rail .who{font-size:var(--t-secondaire);color:var(--ink-4);margin:0 var(--e-4) var(--e-4);}
.step{display:flex;gap:var(--e-2);align-items:flex-start;width:100%;text-align:left;text-decoration:none;color:var(--ink);
  padding:var(--e-2) var(--e-4);border:0;background:none;border-left:3px solid transparent;}
.step:hover{background:var(--survol);}
.step[aria-current="page"]{border-left-color:var(--admin);background:var(--admin-soft);}
.step .tick{flex:0 0 16px;height:16px;margin-top:var(--e-1);border:1.5px solid var(--rule);
  border-radius:var(--rayon-rond);line-height:13px;text-align:center;color:transparent;}
.step.done .tick{background:var(--admin);border-color:var(--admin);color:var(--sur-admin);}
.step[aria-current="page"] .tick{border-color:var(--admin);}
.step .lbl{font-size:var(--t-secondaire);line-height:1.35;}
.step[aria-current="page"] .lbl{font-weight:600;}
.step .sub{display:block;font-size:var(--t-micro);color:var(--ink-4);font-weight:400;}
.rail-foot{margin-top:auto;padding:var(--e-3) var(--e-4) 0;border-top:1px solid var(--rule-fine);font-size:var(--t-micro);color:var(--ink-4);}
.rail-foot b{display:block;color:var(--r1);font-weight:600;font-size:var(--t-mention);}
.rail-lien{display:block;margin-top:var(--e-2);font-size:var(--t-mention);}
.actions-document{display:flex;gap:var(--e-2);flex-wrap:wrap;}

/* ---------- panneau ---------- */
.panel{display:flex;flex-direction:column;min-width:0;}
.panel-body{padding:var(--e-5) var(--e-6) var(--e-4);flex:1;}
.eyebrow{font-size:var(--t-secondaire);color:var(--ink-4);margin:0 0 var(--e-1);}
/* Un titre de page par page : h1 le porte, h2 devient le titre de section. */
h1{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:var(--t-titre-page);
  line-height:var(--lh-titre-page);letter-spacing:-.015em;margin:0 0 var(--e-2);}
h2{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:var(--t-titre-section);
  line-height:var(--lh-titre-section);letter-spacing:-.01em;margin:0 0 var(--e-2);}
.intro{font-size:var(--t-chapo);line-height:var(--lh-chapo);color:var(--ink-2);max-width:var(--lecture);margin:0 0 var(--e-5);}
h3{font-size:var(--t-sous-titre);line-height:var(--lh-sous-titre);font-weight:700;margin:0 0 var(--e-1);}
h4{font-size:var(--t-texte);line-height:var(--lh-texte);font-weight:700;margin:var(--e-4) 0 var(--e-1);}

/* ---------- champs ---------- */
/* min() : dans une cellule étroite — le suivi d'une action, à 880 px — une largeur fixe
   débordait du tableau. La largeur de confort ne s'applique que si la place existe. */
label.f{display:block;margin-bottom:var(--e-4);max-width:min(var(--champ),100%);}
label.f>span{display:block;font-size:var(--t-texte);line-height:var(--lh-texte);color:var(--ink-2);margin-bottom:var(--e-1);}
/* input[type=tel] ajouté au lot 16 : le champ Téléphone de la vitrine restait étroit et nu —
   même classe de défaut que input:not([type]) au lot 14 (charte §7 septies). */
input:not([type]),input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;padding:var(--e-2) var(--e-3);border:1px solid var(--bord-champ);background:var(--field);font:inherit;color:var(--ink);
  transition:border-color var(--duree-courte) var(--sortie),box-shadow var(--duree-courte) var(--sortie);}
input:not([type]):focus-visible,input[type=text]:focus-visible,input[type=email]:focus-visible,input[type=tel]:focus-visible,
input[type=password]:focus-visible,input[type=number]:focus-visible,input[type=date]:focus-visible,select:focus-visible,
textarea:focus-visible{outline:none;border-color:var(--admin);box-shadow:var(--halo-focus);}
/* Aussi spécifique que la règle de bordure ci-dessus, sinon un <input> en erreur garde sa
   bordure ordinaire : le sélecteur de type l'emporterait sur un simple attribut. Défaut corrigé
   au lot 16 sur la vitrine, réintroduit en généralisant la règle au lot 17a, retrouvé par le
   test du lot 16 — c'est à cela qu'il sert. */
input:not([type=radio])[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--err);}
textarea{min-height:120px;resize:vertical;}
input:focus,select:focus,textarea:focus{background:var(--paper);}
.champs2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--e-5);}
.champs2 label.f{max-width:none;}
/* L'état d'erreur ne repose pas sur la teinte : --err vaut --r4 en clair, la couleur du
   risque critique, et un daltonien ne distingue pas un texte rouge d'un texte sombre. La
   forme le porte aussi — un triangle, tracé dans la couleur courante — et le texte le dit.
   Un message d'erreur annonce ce qu'il faut corriger : il porte une décision, donc il est
   en secondaire et non en mention. */
.err{display:block;color:var(--err);font-size:var(--t-secondaire);line-height:var(--lh-secondaire);margin-top:var(--e-1);}
.err[hidden]{display:none;}
.err:not([hidden])::before{content:"";display:inline-block;width:1em;height:1em;vertical-align:-.15em;
  margin-right:var(--e-1);background:currentColor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 15 14.5H1z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8 6v4' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12.2' r='.9'/%3E%3C/svg%3E") center/contain no-repeat;}
.alerte{border-left:3px solid var(--err);background:var(--err-bg);padding:var(--e-2) var(--e-3);margin:0 0 var(--e-4);max-width:var(--lecture);font-size:var(--t-texte);line-height:var(--lh-texte);}
.hint{font-size:var(--t-secondaire);color:var(--ink-4);margin:0 0 var(--e-4);max-width:var(--lecture);}
.btn{display:inline-block;padding:var(--e-2) var(--e-4);border:1px solid var(--admin);background:var(--admin);
  color:var(--sur-admin);font-weight:600;text-decoration:none;}
@media (hover:hover) and (pointer:fine){
  .btn:not(.ghost):hover{background:var(--admin-hi);border-color:var(--admin-hi);
    transform:translateY(-1px);box-shadow:var(--ombre-flottante);}
  a:not(.btn):not(.marque):not(.destinations a):hover{text-decoration-thickness:2px;}
}
.btn.ghost{background:none;color:var(--admin);}
@media (hover:hover) and (pointer:fine){.btn.ghost:hover{background:var(--admin-soft);}}
.btn.danger{background:var(--err);border-color:var(--err);}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:default;pointer-events:none;}
.btn.sm{padding:var(--e-1) var(--e-3);font-size:var(--t-secondaire);line-height:var(--lh-secondaire);}

.siret-row{display:flex;gap:var(--e-2);align-items:flex-end;max-width:520px;margin-bottom:var(--e-1);}
.siret-row label.f{flex:1;margin-bottom:0;}
.recap{border:1px solid var(--rule);padding:var(--e-4) var(--e-4);margin:var(--e-3) 0;}
.recap dl{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e-3) var(--e-5);margin:0;}
.recap dt{font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-4);}
.recap dd{margin:0;font-weight:600;}
.recap .src{margin:var(--e-3) 0 0;font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-4);}

/* ---------- listes de dossiers ---------- */
table.liste{width:100%;border-collapse:collapse;font-size:var(--t-secondaire);line-height:var(--lh-secondaire);}
/* La première cellule nomme le sujet de la ligne : l'unité de travail dont on saisit
   l'effectif, la version qu'on télécharge. C'est le texte lu pour agir sur la ligne. */
table.liste td:first-child{font-size:var(--t-texte);line-height:var(--lh-texte);}
table.liste th{text-align:left;font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-4);font-weight:600;padding:0 var(--e-3) var(--e-2) 0;border-bottom:1px solid var(--ink-4);}
table.liste td{padding:var(--e-3) var(--e-3) var(--e-3) 0;border-bottom:1px solid var(--rule-fine);vertical-align:top;}
/* Un complément prend sa ligne, à toute largeur. Posée au lot 9 dans la seule requête média
   du mobile, cette règle corrigeait une largeur et pas le défaut : en desktop, « en cours de
   création » et « 8 étapes sur 10 » se lisaient comme une phrase unique. */
table.liste .src{display:block;font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-4);margin-top:var(--e-1);}
.nowrap{white-space:nowrap;}

/* ---------- checklist équipements ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--e-5);}
.chk{display:flex;gap:var(--e-3);padding:var(--e-2) 0;border-bottom:1px solid var(--rule-fine);cursor:pointer;align-items:flex-start;}
.chk input{margin:var(--e-1) 0 0;accent-color:var(--admin);width:16px;height:16px;flex:0 0 auto;}
.chk b{font-weight:600;display:block;font-size:var(--t-texte);line-height:var(--lh-texte);}
.chk em{font-style:normal;font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-4);display:block;}
.chk .presume{color:var(--admin);font-size:var(--t-mention);line-height:var(--lh-mention);display:block;margin-top:var(--e-1);}
.trigger{margin-top:var(--e-4);border:1px solid var(--rule);background:var(--surface-2);padding:var(--e-4) var(--e-4);}
.trigger h3{font-size:var(--t-texte);line-height:var(--lh-texte);}
.trigger ul{margin:0 0 var(--e-2);padding-left:var(--e-4);font-size:var(--t-texte);line-height:var(--lh-texte);color:var(--ink-2);}
.trigger li{margin-bottom:var(--e-1);}
.trigger .art{color:var(--admin);font-weight:600;font-size:var(--t-mention);line-height:var(--lh-mention);}
.trigger .partielle{color:var(--r2-texte);font-size:var(--t-mention);line-height:var(--lh-mention);}

/* ---------- unités ---------- */
/* Les unités sont une liste : `<ul>` ne peut contenir que des `<li>`, et l'annoncer comme
   une liste dit à une synthèse vocale combien d'unités restent à parcourir. */
.ucard-liste{list-style:none;margin:0;padding:0;}
.ucard{border:1px solid var(--rule);padding:var(--e-4) var(--e-4);margin-bottom:var(--e-3);}
/* L'écarté n'est PAS marqué par l'opacité. Elle s'applique à tous les descendants et annule
   les garanties de contraste calculées token par token : `--ink-4` tombait à 2,4:1 en clair et
   3,6:1 en sombre, sous le seuil AA, pour du texte que le client doit pouvoir relire s'il veut
   revenir sur sa décision. L'état est porté par une bordure tiretée et un fond retiré — et il
   reste annoncé sans ambiguïté par l'`aria-pressed` du bouton « Retirer ». */
.ucard.out{border-style:dashed;background:var(--field);}
/* Unité à rouvrir : c'est l'exception qui doit se voir, pas la règle qui doit s'effacer. */
.ucard.a-revoir{border-left:3px solid var(--r3);}
.ucard.a-revoir .why{color:var(--r3-texte);font-weight:600;}
.ucard-liste{list-style:none;margin:0;padding:0;}
.ucard-head{display:flex;justify-content:space-between;gap:var(--e-4);align-items:flex-start;}
.ucard h3{margin-bottom:var(--e-1);}
.ucard .sit{font-size:var(--t-texte);line-height:var(--lh-texte);color:var(--ink-2);margin:0;max-width:var(--lecture-dense);}
.ucard .why{font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-4);margin:var(--e-2) 0 0;}
.yn{display:flex;gap:var(--e-1);flex:0 0 auto;}
.yn button{padding:var(--e-1) var(--e-3);border:1px solid var(--rule);background:var(--paper);font-size:var(--t-texte);line-height:var(--lh-texte);}
.yn button:hover{border-color:var(--admin);}
.yn button[aria-pressed="true"]{background:var(--admin);border-color:var(--admin);color:var(--sur-admin);font-weight:600;}
.yn button.no[aria-pressed="true"]{background:var(--ink-3);border-color:var(--ink-3);}
.fixe{font-size:var(--t-mention);color:var(--ink-3);}

/* ---------- barre de progression unité ---------- */
.unites-nav{display:flex;flex-wrap:wrap;gap:var(--e-1);margin:0 0 var(--e-4);}
.unites-nav a{font-size:var(--t-secondaire);padding:var(--e-1) var(--e-2);border:1px solid var(--rule);text-decoration:none;color:var(--ink-2);}
.unites-nav a[aria-current="page"]{border-color:var(--admin);background:var(--admin-soft);color:var(--admin);font-weight:600;}
.ubar{display:flex;align-items:center;gap:var(--e-4);border-bottom:1px solid var(--rule);padding-bottom:var(--e-3);margin-bottom:var(--e-4);flex-wrap:wrap;}
.ubar .lead{font-weight:600;}
.ubar progress{flex:1;height:6px;max-width:280px;appearance:none;border:0;background:var(--jauge);}
.ubar progress::-webkit-progress-bar{background:var(--jauge);}
.ubar progress::-webkit-progress-value{background:var(--admin);}
.ubar progress::-moz-progress-bar{background:var(--admin);}
.ubar .cnt{font-size:var(--t-secondaire);color:var(--ink-3);font-variant-numeric:tabular-nums;}
.ubar .hot{font-size:var(--t-secondaire);color:var(--r3-texte);font-weight:600;}

/* ---------- carte risque ---------- */
.risk{border:1px solid var(--rule);margin-bottom:var(--e-3);}
.risk.done{border-left:3px solid var(--r1);}
.risk.out{border-style:dashed;background:var(--field);}
.risk-top{display:flex;justify-content:space-between;gap:var(--e-4);align-items:flex-start;padding:var(--e-4) var(--e-4);}
.risk-top h3{font-size:var(--t-texte);margin-bottom:var(--e-1);}
.risk-top .sit{font-size:var(--t-texte);line-height:var(--lh-texte);color:var(--ink-2);margin:0;max-width:var(--lecture-dense);}
.risk-top .why{font-size:var(--t-mention);color:var(--ink-4);margin:var(--e-2) 0 0;}
.risk-body{padding:0 var(--e-4) var(--e-4);border-top:1px dashed var(--rule);}
.risk-body .ask{font-weight:600;font-size:var(--t-texte);line-height:var(--lh-texte);margin:var(--e-3) 0 var(--e-2);}
.m-list{margin:0 0 var(--e-3);}
/* Trois colonnes : case, libellé, marqueur. Le marqueur « deviendra une action » était dans le
   flux du libellé et se retrouvait rejeté sous lui dès que la ligne était pleine — 62 px au lieu
   de 40, cinq fois sur la seule première carte (constaté sur capture, lot 17a). Il a désormais sa
   colonne, et le libellé garde la taille du texte courant : c'est sur lui que le client décide. */
.m-list label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--e-1) var(--e-3);padding:var(--e-2) 0;
  border-bottom:1px solid var(--rule-fine);cursor:pointer;align-items:start;}
.m-list label:last-child{border-bottom:0;}
.m-list input{margin:var(--e-1) 0 0;accent-color:var(--r1);width:16px;height:16px;flex:0 0 auto;}

/* Le libellé s'étirait sur 738 px, environ 82 caractères — au-delà de la plage de confort, et
   c'est le texte sur lequel le client décide. Il prend la largeur de lecture dense. */
.m-list .lib{font-size:var(--t-texte);line-height:var(--lh-texte);max-width:var(--lecture-dense);}
/* Une conséquence neutre n'est pas un niveau de risque : ce marqueur annonce qu'une mesure
   non cochée deviendra une action, il ne cote rien. Il quitte --r3 pour l'encre secondaire.
   Au passage, --r3 tombait à 4,49:1 sur --surface-2 en clair, sous le seuil d'un texte. */
.m-list .todo{font-size:var(--t-mention);color:var(--ink-3);font-weight:600;white-space:nowrap;
  justify-self:end;padding-top:var(--e-1);}
.en-clair{font-size:var(--t-texte);line-height:var(--lh-texte);color:var(--ink-2);margin:0 0 var(--e-2);}

.verdict{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap;background:var(--field);padding:var(--e-3) var(--e-3);}
.verdict .score{color:var(--sur-couleur);font-weight:700;padding:var(--e-1) var(--e-3);font-size:var(--t-sous-titre);font-variant-numeric:tabular-nums;background:var(--ink-3);}
.verdict .lv{font-weight:700;font-size:var(--t-texte);}
.verdict .delay{font-size:var(--t-secondaire);color:var(--ink-3);}
.verdict .basis{font-size:var(--t-mention);color:var(--ink-4);margin-left:auto;}
.v1 .score{background:var(--r1);} .v1 .lv{color:var(--r1);}
.v2 .score{background:var(--r2);color:var(--sur-r2);} .v2 .lv{color:var(--r2-texte);}
.v3 .score{background:var(--r3);} .v3 .lv{color:var(--r3-texte);}
.v4 .score{background:var(--r4);} .v4 .lv{color:var(--r4);}
.adjust{margin-top:var(--e-2);}
.adjust>button{background:none;border:0;padding:0;font-size:var(--t-secondaire);color:var(--admin);text-decoration:underline;text-underline-offset:2px;}
.adj-panel{margin-top:var(--e-3);padding-top:var(--e-3);border-top:1px solid var(--rule-fine);}
.adj-row{display:grid;grid-template-columns:110px 1fr;gap:var(--e-2);align-items:center;margin-bottom:var(--e-2);}
.adj-row>span{font-size:var(--t-secondaire);color:var(--ink-2);}
.opts{display:flex;flex-wrap:wrap;gap:var(--e-1);}
.opts button{padding:var(--e-1) var(--e-3);border:1px solid var(--rule);background:var(--paper);font-size:var(--t-texte);line-height:var(--lh-texte);}
.opts button:hover{border-color:var(--admin);}
.opts button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.unsure{display:inline-flex;align-items:center;gap:var(--e-2);margin-top:var(--e-3);font-size:var(--t-secondaire);color:var(--ink-3);background:none;border:1px dashed var(--rule);padding:var(--e-1) var(--e-3);}
.unsure[aria-pressed="true"]{border-style:solid;border-color:var(--r2-texte);color:var(--r2-texte);font-weight:600;}

.wrapup{border:1px solid var(--rule);border-top:3px solid var(--admin);padding:var(--e-4) var(--e-4);margin-top:var(--e-5);}
.wrapup h3{font-size:var(--t-sous-titre);}
.wrapup .row{display:flex;gap:var(--e-5);margin:var(--e-3) 0;flex-wrap:wrap;}
.wrapup .row div b{display:block;font-family:"Newsreader",serif;font-weight:400;font-size:var(--t-titre-page);line-height:1;}
.wrapup .row div span{font-size:var(--t-mention);color:var(--ink-4);}

/* ---------- actions ---------- */
.table-wrap{overflow-x:auto;}
table.act{width:100%;border-collapse:collapse;font-size:var(--t-secondaire);}
table.act th{text-align:left;font-size:var(--t-mention);color:var(--ink-4);font-weight:600;padding:0 var(--e-3) var(--e-2) 0;border-bottom:1px solid var(--ink-4);}
table.act td{padding:var(--e-3) var(--e-3) var(--e-3) 0;border-bottom:1px solid var(--rule-fine);vertical-align:top;}
table.act .a{font-weight:600;}
table.act .a em{display:block;font-style:normal;font-weight:400;font-size:var(--t-mention);color:var(--admin);margin-bottom:var(--e-1);}
table.act .src{display:block;font-weight:400;font-size:var(--t-mention);color:var(--ink-4);margin-top:var(--e-1);}
table.act input{padding:var(--e-2);font-size:var(--t-secondaire);min-width:0;width:100%;}
.pill{font-size:var(--t-mention);padding:var(--e-1) var(--e-2);color:var(--sur-couleur);white-space:nowrap;font-weight:600;background:var(--ink-3);}
.p-faible{background:var(--r1);} .p-moyen{background:var(--r2);color:var(--sur-r2);} .p-eleve{background:var(--r3);} .p-critique{background:var(--r4);}
/* Suivi du plan d'actions et tableau de bord (lot 8). */
.compteurs{display:flex;flex-wrap:wrap;gap:var(--e-2);margin:var(--e-3) 0 var(--e-1);}
.cpt{border:1px solid var(--rule);background:var(--paper);padding:var(--e-2) var(--e-3);font-size:var(--t-secondaire);line-height:var(--lh-secondaire);color:var(--ink-2);}
.cpt b{font-size:var(--t-titre-section);line-height:var(--lh-titre-section);font-weight:700;color:var(--ink);margin-right:var(--e-1);font-variant-numeric:tabular-nums;}
.alerte-cpt{border-color:var(--err);color:var(--err);}
.alerte-cpt b{color:var(--err);}
.depassee{color:var(--err);font-weight:600;}
.e-a_trancher{background:var(--r3);} .e-realisee{background:var(--r1);}
.e-abandonnee,.e-a_engager,.e-en_cours,.e-reportee{background:var(--ink-3);}
.etat-cell{min-width:150px;}
table.act .maj{color:var(--admin);}
/* --- groupes du plan d'actions (lot 21) : `details/summary` natifs ---
   Un groupe replié garde ses lignes dans le document. Le style ne doit donc jamais suggérer
   qu'il n'y a rien : le compte est dans le résumé, et la flèche native reste visible. */
.plan-geste{margin:var(--e-2) 0 var(--e-3);}
.plan-geste a{margin-left:var(--e-2);white-space:nowrap;}
details.groupe{border-top:1px solid var(--rule);}
details.groupe:last-of-type{border-bottom:1px solid var(--rule);}
details.groupe>summary{padding:var(--e-3) 0;cursor:pointer;font-weight:600;color:var(--ink);
  font-size:var(--t-secondaire);line-height:var(--lh-secondaire);}
details.groupe>summary:hover{color:var(--admin);}
details.groupe[data-groupe="retard"]>summary{color:var(--err);}
details.groupe>.table-wrap{padding-bottom:var(--e-3);}
/* Second étage (lot 23) : par unité de travail, en retrait sous son groupe. Même règle : le
   nombre est dans le résumé, la flèche native reste visible. */
.sous-groupes{padding:0 0 var(--e-3) var(--e-4);}
details.sous-groupe{border-top:1px solid var(--rule);}
details.sous-groupe>summary{padding:var(--e-2) 0;cursor:pointer;color:var(--ink-2);
  font-size:var(--t-secondaire);line-height:var(--lh-secondaire);}
details.sous-groupe>summary:hover{color:var(--admin);}
details.sous-groupe>.table-wrap{padding-bottom:var(--e-2);}
table.act .bouge{color:var(--admin);font-weight:600;}

/* Cases à cocher d'un réglage à clés connues (lot 21). */
fieldset.cases{border:1px solid var(--rule);padding:var(--e-2);margin:0 0 var(--e-2);min-width:0;}
fieldset.cases legend{padding:0 var(--e-1);}
label.case{display:flex;align-items:center;gap:var(--e-2);font-size:var(--t-secondaire);
  line-height:var(--lh-secondaire);padding:var(--e-1) 0;}
label.case input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--admin);}
table.act textarea{width:100%;min-width:0;padding:var(--e-2);font-family:var(--police-code, monospace);
  font-size:var(--t-mention);line-height:var(--lh-mention);}

details.suivi{margin-top:var(--e-1);}
details.suivi summary{font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--admin);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
/* Aucune largeur minimale : ce formulaire vit dans une cellule de tableau, qui peut être
   étroite. Une largeur plancher le faisait déborder de la page à 880 px (mesuré : 230 px
   demandés dans une cellule de 138 px). Défaut antérieur au lot 17, corrigé ici. */
details.suivi form{margin-top:var(--e-2);padding:var(--e-2);border:1px solid var(--rule);background:var(--paper);min-width:0;}
details.suivi .f{display:block;margin-bottom:var(--e-2);font-weight:400;}
details.suivi .f span{display:block;font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-3);margin-bottom:var(--e-1);}
details.suivi select,details.suivi input{width:100%;padding:var(--e-2);font-size:var(--t-secondaire);line-height:var(--lh-secondaire);}
.etat-doc{background:var(--admin-soft);padding:var(--e-4) var(--e-4);margin:var(--e-3) 0;}
.etat-doc h3{margin:0 0 var(--e-2);font-size:var(--t-sous-titre);line-height:var(--lh-sous-titre);}
.etabli{list-style:none;margin:var(--e-2) 0 0;padding:0;}
.etabli li{padding:var(--e-1) 0 var(--e-1) var(--e-5);position:relative;font-size:var(--t-texte);line-height:var(--lh-texte);}
.etabli li::before{content:"\2713";position:absolute;left:0;color:var(--r1);font-weight:700;}
.etabli li.manque::before{content:"\2014";color:var(--ink-4);}
.etabli .src{display:block;font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-4);}
.perime{border-left:3px solid var(--attention-txt);background:var(--perime-bg);padding:var(--e-3) var(--e-4);margin:var(--e-4) 0;font-size:var(--t-texte);line-height:var(--lh-texte);}
.perime ul{margin:var(--e-1) 0 var(--e-2);padding-left:var(--e-4);}
.money{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
th.money{text-align:right;}
/* Le vert du produit EST une cotation : `--r1` et la famille `--ok-*` disent « risque
   faible ». Un bandeau qui annonce « 12 actions à trancher » n'est pas un risque faible, et
   le porter en vert dit le contraire de son texte. `.aid` est donc neutre, et le vert reste
   là où il signifie quelque chose : la cotation, et l'accusé de réception d'un geste réussi
   (`.aid.succes`). Aucun jeton nouveau — les couleurs employées existaient toutes. */
.aid{margin-top:var(--e-4);border-left:3px solid var(--rule);background:var(--surface-2);padding:var(--e-3) var(--e-4);font-size:var(--t-secondaire);line-height:var(--lh-secondaire);color:var(--ink-2);}
.aid.succes{border-left-color:var(--ok-txt);background:var(--ok-soft);color:var(--ok-txt);}
.aid.attention{border-left-color:var(--admin);}
.aid ul{margin:var(--e-1) 0 0;padding-left:var(--e-4);}

/* ---------- événements, aperçu ---------- */
.bloc{border:1px solid var(--rule);padding:var(--e-4) var(--e-4);margin-bottom:var(--e-3);}
.bloc ul{margin:0;padding-left:var(--e-4);}
.points{border-left:3px solid var(--attention-txt);background:var(--attention-bg);padding:var(--e-3) var(--e-4);margin-bottom:var(--e-4);}
.points ul{margin:var(--e-1) 0 0;padding-left:var(--e-4);}
.apercu h3{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:var(--t-titre-section);line-height:var(--lh-titre-section);margin:var(--e-5) 0 var(--e-2);}

/* ---------- barre basse ---------- */
.footbar{border-top:1px solid var(--rule);background:var(--surface-2);padding:var(--e-3) var(--e-6);display:flex;align-items:center;gap:var(--e-4);}
.footbar .save{font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-4);}
.footbar .save b{color:var(--r1);font-weight:600;}
.footbar .save.echec b{color:var(--err);}
.footbar .spacer{flex:1;}
.footbar .left{font-size:var(--t-secondaire);color:var(--ink-3);}

@media (max-width:880px){
  /* Le remplissage de carte se resserre ici, et une seule fois : ce qui s'aligne sur ses bords —
     le héros de la vitrine — suit automatiquement, au lieu de déborder de la page. */
  :root{--carte-padding:var(--e-4);}
  /* Sous le point de rupture, la carte reprend toute la largeur : c'est une décision du lot 9,
     la gouttière de 24 px coûtait assez de place pour faire déborder l'en-tête de tableau de
     l'étape 5. L'en-tête et le pied gardent, eux, une gouttière tactile. */
  .cadre{padding:0;}
  .entete-in,.pied-in{padding:0 var(--e-4);}
  .carte.app{grid-template-columns:1fr;}
  .rail{border-right:0;border-bottom:1px solid var(--rule);}
  .rail-foot{margin-top:var(--e-3);}
  .panel-body{padding:var(--e-4) var(--e-4) var(--e-4);}
  .footbar{padding:var(--e-3) var(--e-4);flex-wrap:wrap;}
  .grid2,.champs2{grid-template-columns:1fr;}
  .recap dl{grid-template-columns:1fr;}
  .siret-row{flex-direction:column;align-items:stretch;}
  .risk-top,.ucard-head{flex-direction:column;}
  .verdict .basis{margin-left:0;width:100%;}
  .adj-row{grid-template-columns:1fr;gap:var(--e-1);}
  .carte{padding:var(--e-4) var(--e-4);}
}
/* Une empreinte fait 64 caractères sans espace. Sans règle de coupure elle sort de sa carte
   sous 400 px — et sans défiler, donc sans que le contrôle de défilement horizontal la voie :
   elle est simplement tronquée. La règle est portée par `code` lui-même et non par un
   conteneur, pour qu'aucun écran futur ne puisse la perdre en oubliant la classe. */
code{overflow-wrap:anywhere;}
.empreintes code{font-size:var(--t-micro);line-height:var(--lh-micro);word-break:break-all;}
.unites-extrait{border:0;padding:0;margin:0 0 var(--e-3);}
.unites-extrait legend{font-size:var(--t-texte);line-height:var(--lh-texte);color:var(--ink-2);margin-bottom:var(--e-1);}

/* ---------- ergonomie mobile (lot 9) ----------
   Le rail occupait tout le premier écran d'un téléphone : la liste des étapes est bornée en
   hauteur et défile sur elle-même, le contenu reste visible sans avoir à faire défiler la page.
   À l'étape 4, celle où le client passe le plus de temps, le verdict de criticité colle au bas
   de sa carte : on coche des mesures et on voit le score bouger sans remonter. */
@media (max-width:880px){
  .rail .etapes{max-height:34vh;overflow-y:auto;overscroll-behavior:contain;}
  .step{scroll-margin:var(--e-2);}
  .verdict{position:sticky;bottom:0;z-index:2;box-shadow:var(--ombre-barre);}
  /* Cibles tactiles : 44 px de haut, case agrandie. */
  .m-list label{grid-template-columns:auto minmax(0,1fr);min-height:44px;align-items:center;}
  .m-list .todo{grid-column:2;justify-self:start;padding-top:0;white-space:normal;}
  .chk{min-height:44px;align-items:center;}
  .m-list input,.chk input{width:22px;height:22px;margin-top:0;}
  .yn button,.opts button{min-height:44px;padding-left:var(--e-4);padding-right:var(--e-4);}
  .btn{min-height:44px;}
}

/* Tables repliées en blocs libellé/valeur : à 380 px, aucune page ne défile horizontalement.
   Masquer des colonnes reviendrait à amputer le suivi de ce qui le rend utile. */
@media (max-width:640px){
  .table-wrap{overflow-x:visible;}
  table.liste,table.act{display:block;max-width:none;}
  table.liste thead,table.act thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  table.liste tbody,table.act tbody{display:block;}
  table.liste tr,table.act tr{display:block;padding:var(--e-3) 0;border-bottom:1px solid var(--rule);}
  /* Libellé au-dessus de la valeur : une cellule contient parfois plusieurs éléments et du
     texte nu ; en deux colonnes, ces morceaux se dispersent hors de leur colonne. */
  table.liste td,table.act td{display:block;padding:var(--e-1) 0;border:0;}
  table.liste td[data-label]::before,table.act td[data-label]::before{
    content:attr(data-label);display:block;font-size:var(--t-mention);line-height:var(--lh-mention);font-weight:600;color:var(--ink-4);margin-bottom:var(--e-1);}
  table.act td:empty,table.liste td:empty{display:none;}
  table.liste td .hint{display:block;}
  .etat-cell{min-width:0;}
  .empreintes code{font-size:var(--t-micro);line-height:var(--lh-micro);}
  .compteurs{gap:var(--e-2);}
  .cpt{flex:1 1 auto;}
}

/* ---------- barre du haut, basculement de thème, pied de page (lot 9) ---------- */
.topbar-compte{color:var(--ink-4);}
.bascule{display:inline-flex;align-items:center;gap:var(--e-1);text-decoration:none;padding:var(--e-1) var(--e-1);}
@media (hover:hover) and (pointer:fine){.bascule:hover .bascule-txt{text-decoration:underline;text-underline-offset:2px;}}
.bascule-icone{font-size:var(--t-texte);line-height:1;}
.pied{margin:var(--e-4) 0 var(--e-5);font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-4);}
.pied b{font-weight:600;color:var(--ink-3);}
@media (max-width:640px){
  /* Icône seule : l'intitulé reste porté par aria-label et title, jamais perdu. */
  .bascule-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  .bascule{min-height:44px;min-width:44px;justify-content:center;}
}

/* ---------- accueil et console (lot 13) ---------- */

.doc-carte{border:1px solid var(--rule);background:var(--paper);padding:var(--e-4) var(--e-4);margin:0 0 var(--e-4);}
/* « Rien à faire » est l'état PRINCIPAL, pas un cas dégradé : il ne doit ni alarmer, ni
   ressembler à un écran vide. Les états qui appellent une action portent une marque. */
.attendu{background:var(--field);padding:var(--e-3) var(--e-4);}
.attendu h3{margin:0 0 var(--e-1);font-size:var(--t-sous-titre);line-height:var(--lh-sous-titre);}
.attendu p{margin:0 0 var(--e-2);color:var(--ink-2);max-width:var(--lecture);}
.attendu p:last-child{margin-bottom:0;}
.attendu.e-rien_attendu{border-left-color:var(--r1);background:var(--ok-soft);color:var(--ok-txt);}
.attendu.e-rien_attendu p{color:var(--ok-txt);}
.attendu.e-revision_proche{border-left-color:var(--r2);background:var(--attention-bg);}
.attendu.e-revision_depassee,.attendu.e-evenement_non_integre,.attendu.e-production_en_echec{
  border-left-color:var(--r4);background:var(--err-bg);}
.attendu.e-actions_a_trancher,.attendu.e-echeance_action_depassee{
  border-left-color:var(--r3);background:var(--perime-bg);}
table.console .pill{white-space:normal;display:inline-block;max-width:34ch;}
.pill.e-rien_attendu{background:var(--r1);color:var(--sur-couleur);}
.pill.e-revision_proche{background:var(--r2);color:var(--sur-r2);}
.pill.e-revision_depassee,.pill.e-evenement_non_integre,.pill.e-production_en_echec{background:var(--r4);}
.pill.e-actions_a_trancher,.pill.e-echeance_action_depassee{background:var(--r3);}
.pill.e-creation_en_cours,.pill.e-mise_a_jour_en_cours,.pill.e-production_en_cours,
.pill.e-aucun_document{background:var(--ink-3);}

/* ===== agencement A (proposition, lot 17b) ===== */
.doc-societe{margin:0 0 var(--e-2);font-variant-caps:all-small-caps;letter-spacing:.04em;
  font-size:var(--t-sous-titre);line-height:var(--lh-sous-titre);color:var(--ink-2);}
.doc-societe .src{display:block;font-variant-caps:normal;letter-spacing:0;
  font-size:var(--t-mention);line-height:var(--lh-mention);color:var(--ink-4);}
.doc-livrable{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);
  flex-wrap:wrap;margin:var(--e-5) 0;padding:var(--e-4);border:1px solid var(--admin-soft);
  background:var(--surface-2);}
.doc-livrable h3{margin:0;}
.doc-livrable .src{margin:var(--e-1) 0 0;font-size:var(--t-secondaire);line-height:var(--lh-secondaire);color:var(--ink-3);}
.doc-renvois{list-style:none;margin:var(--e-5) 0 0;padding:0;display:grid;gap:var(--e-3);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.doc-renvois a{display:block;padding:var(--e-3) var(--e-4);border:1px solid var(--rule);
  text-decoration:none;color:var(--ink);background:var(--paper);}
/* Tout survol est sous (hover: hover) and (pointer: fine) — charte §7 : sur un écran
   tactile, un survol reste collé après le tap. Contrôlé par test_socle_navigateur, D. */
@media (hover:hover) and (pointer:fine){.doc-renvois a:hover{border-color:var(--admin);}}
.doc-renvois b{display:block;font-size:var(--t-texte);line-height:var(--lh-texte);color:var(--admin);}
.doc-renvois .src{display:block;margin-top:var(--e-1);font-size:var(--t-texte);
  line-height:var(--lh-texte);color:var(--ink-3);}
.repere{margin-top:var(--e-7);border:1px solid var(--rule);padding:var(--e-4);background:var(--surface-2);}
.repere h2{margin:0 0 var(--e-2);font-size:var(--t-sous-titre);line-height:var(--lh-sous-titre);
  font-family:inherit;font-weight:600;letter-spacing:0;}
.repere p{margin:0 0 var(--e-2);font-size:var(--t-texte);line-height:var(--lh-texte);
  color:var(--ink-2);max-width:var(--lecture);}
.repere p:last-child{margin-bottom:0;}