/* =====================================================================
   SAMKO HUB, la feuille de style commune. SYSTEME V2 (03/10/2026).

   La direction est ecrite dans samko-hub-deploiement/SYSTEME-V2.md et
   son parti pris dans DESIGN.md ("Le systeme v2"). En cinq lignes :
   UNE surface marine par ecran (le sceau), l'or seulement pour le geste
   qui engage, l'echeance en colonne vertebrale, quatre matieres (le mur,
   la feuille, le creux, la vitre), et la forme qui dit l'etat avant le
   mot.

   CE QUI N'A PAS CHANGE : aucune etape de construction, aucun appel
   tiers, une seule feuille servie a part (`/hub.css?v=<mtime>`), lue et
   ecrite a la main. Le CSS propre a UN ecran reste dans son
   `@section('styles')` ; ce qui sert a deux ecrans monte ici.

   REGLE DE TRANSITION, et elle commande : les ecrans d'avant la refonte
   emploient des classes definies ici. Elles sont toutes CONSERVEES (un
   test refuse toute classe employee sans regle), restylees dans le
   systeme v2, et les nouvelles formes vivent a cote. La liste de ce qui
   pourra partir une fois les ecrans refaits est en fin de fichier.

   Chaque jeton et chaque composant porte en commentaire son motif : une
   valeur sans motif se change au premier doute, et le doute revient a
   chaque session.
   ===================================================================== */

/* --- Polices, auto-hebergees ------------------------------------------
   Aucun appel a un tiers : pas de resolution DNS supplementaire, pas de
   poignee de main TLS, rien qui parte chez un tiers depuis un poste de
   cabinet. `swap` affiche le texte tout de suite dans la police de
   repli plutot que de le cacher. Deux sous-ensembles : `latin` couvre le
   francais, `latin-ext` ne se telecharge que si un caractere l'exige.

   /!\ UN SEUL FICHIER PAR SOUS-ENSEMBLE, ET C'EST UNE MESURE DU
   03/10/2026. `inter-400-latin.woff2` et `inter-600-latin.woff2` sont
   le MEME fichier octet pour octet (md5 identiques) : une police
   VARIABLE, axe wght de 100 a 900, qui porte `tnum`. Deux @font-face
   sous deux adresses faisaient telecharger deux fois 48 Ko (85 Ko en
   latin-ext). Une seule declaration avec `font-weight: 100 900` sert les
   deux graisses depuis le meme fichier : 48 Ko de moins au premier
   affichage, zero octet ajoute. Playfair Display est variable de la meme
   facon (400 a 900) et ne porte PAS tnum : la serif ne porte jamais une
   colonne de chiffres. Les fichiers `*-600-*` restent sur le disque mais
   ne sont plus references (voir la liste de fin). */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/polices/inter-400-latin.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:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/polices/inter-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/polices/playfairdisplay-600-latin.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:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/polices/playfairdisplay-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,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;}

/* =====================================================================
   JETONS. Tous ici, tous AVANT le premier usage, jamais dans un
   `@section('styles')` : un jeton defini dans une vue passe le test et
   reste non resolu partout ailleurs, et un `font-size` non resolu ne
   leve rien, il retombe sur l'herite.

   TOUT EST RESOLU EN HEXADECIMAL. Jamais `color-mix` sur une propriete
   personnalisee : la ou `color-mix` manque, `var()` devient invalide et
   la propriete entiere tombe, sans erreur. Les valeurs sont mesurees
   (contraste WCAG) et le ratio est note la ou il borne l'usage.
   ===================================================================== */
:root{
  /* --- Surfaces et bords : douze pas derives de la marine ----------- */
  --n-1:  #f4f7fb;   /* le mur : fond de page */
  --n-2:  #eef3f9;   /* le creux : ce que la machine a produit, en-tete de table, bulle d'appel */
  --n-3:  #f3f4f6;   /* ligne survolee (souris seule), fond du champ de recherche : encre-3 y tient 4,57:1 */
  --n-4:  #e9ecee;   /* entree de rail active, pas courant : encre-2 au minimum dessus */
  --n-5:  #dde1e5;   /* segment presse, mois vide du graphe, fond d'une jauge */
  --n-6:  rgba(15,42,71,.08);  /* anneau des cartes, filet separateur : un repere, jamais la seule frontiere */
  --n-7:  #7b8a9a;   /* bord de champ au repos, bord du bouton calme : 3,53:1 blanc, 3,29:1 fond, 3,17:1 creux (WCAG 1.4.11) */
  --n-8:  #5c7189;   /* bord de champ survole, icone au repos */
  --n-9:  #0f2a47;   /* marine : titres, marque, icone active */
  --n-10: #0a1d33;   /* marine profonde : bulle d'aide, encre sur or, bas du sceau */
  --n-11: #5c7189;   /* encre tertiaire : metadonnees 12 et 13 px ; SEULEMENT sur blanc, --n-1, --n-2, --n-3 (5,10:1 blanc) */
  --n-12: #0b1b2c;   /* encre pleine */
  --c-ink-2: #4a5c71; /* encre secondaire : aide, legendes, sous-titres */
  --c-surf: #ffffff;

  /* Le sceau : le SEUL degrade du produit, sur la seule tuile pleine. */
  --g-sceau: linear-gradient(160deg, #0f2a47 0%, #0a1d33 100%);
  /* Le halo : la seule lumiere du mur, dans le `background` du body
     (jamais un pseudo-element en z-index negatif : il serait peint SOUS
     le fond du body et personne ne le verrait). 6 % : present, jamais lu. */
  --halo: radial-gradient(60rem 42rem at 8% -10%, rgba(15,42,71,.06), transparent 70%);

  /* --- Ce qui se clique --------------------------------------------- */
  --c-bleu: #1f6bb5;          /* liens, bouton primaire, trait de l'entree active, focus : 5,49:1 blanc */
  --c-bleu-survol: #185a9a;   /* survol et presse du primaire : blanc 7,08:1 */
  --c-bleu-doux: #e4edf6;     /* fond du choix coche, puce encours : bleu dessus 4,63:1 */

  /* --- L'or, trois valeurs bornees. L'or ne sert qu'au geste qui
     engage (rendre la decision, son relais, la carte de sens cochee) et
     aux initiales du profil. Jamais un etat, jamais un decor. ---------- */
  --c-or: #b98d3a;            /* l'aplat du geste : encre --n-10 dessus 5,61:1 ; jamais une encre */
  --c-or-survol: #c69a46;     /* le survol ECLAIRE, n'assombrit pas : --n-10 dessus 6,56:1 */
  --c-or-marque: #c9a961;     /* l'or de la marque, UNIQUEMENT sur les surfaces marines : 7,55:1 sur --n-10 ; interdit sur blanc */
  --c-or-encre: #7a5a18;      /* l'or lisible comme texte : 6,36:1 blanc */
  --c-or-doux: #f5f0e3;       /* fond de la carte de sens cochee : or-encre dessus 5,57:1 */

  /* --- Les etats, hors palette de marque : un etat n'est pas une
     identite. Assombris jusqu'a tenir 4,5:1 sur blanc parce qu'ils
     portent du texte et pas seulement un point. ----------------------- */
  --c-vert:  #1a6b46;
  --c-ambre: #8a5d0f;
  --c-rouge: #a32318;
  /* Fonds d'etat resolus (puces, surfaces de ligne, bandeaux). */
  --s-faite:   #e4ede9;  /* vert dessus 5,44:1 */
  --s-encours: #e4edf6;  /* bleu dessus 4,63:1 */
  --s-attente: #f1ece2;  /* ambre dessus 4,88:1 */
  --s-rejet:   #f6e9e8;  /* rouge dessus 6,31:1 */
  --s-neutre:  #eef3f9;  /* encre-2 dessus 6,15:1 */
  --c-rouge-fond: #f9f0ef; /* .refus, .erreur : rouge dessus 6,67:1 */

  /* --- La vitre : 86 % et non 78, pour que l'encre secondaire y vive.
     Composite au-dessus de la tuile marine (#dddfe2) : encre-2 5,14:1,
     encre 13:1 ; le bleu n'y tient que 3,6:1, donc AUCUN texte bleu dans
     une vitre. ------------------------------------------------------- */
  --verre: rgba(255,255,255,.86);
  --verre-repli: rgba(255,255,255,.97);
  --verre-flou: blur(12px) saturate(1.2);
  --verre-flou-mobile: blur(8px);      /* sans saturate : un GPU de telephone modeste */
  --verre-porte: rgba(255,255,255,.92); /* la carte de connexion sur le degrade marine, blur(16px) */

  /* --- Profondeur : ombres teintees marine, jamais noires ------------ */
  --o-anneau: 0 0 0 1px rgba(15,42,71,.08);
  --o-1: 0 1px 2px rgba(15,42,71,.06), 0 2px 4px rgba(15,42,71,.04);                 /* la feuille au repos */
  --o-2: 0 2px 4px rgba(15,42,71,.06), 0 8px 16px -8px rgba(15,42,71,.18);           /* la feuille soulevee (par un ::after en opacite) */
  --o-3: 0 0 0 1px rgba(15,42,71,.08), 0 12px 24px -12px rgba(15,42,71,.28);         /* ce qui flotte : bulle, bandeau de resultat, porte */
  --o-haut: 0 -1px 0 rgba(15,42,71,.10), 0 -12px 24px -16px rgba(15,42,71,.28);      /* la barre de suivi, ombre vers le haut */

  /* --- Rayons, proportionnels : 6 pour ce qui se tient (champ, bouton,
     segment), 12 pour ce qui se pose (carte, tuile, bandeau), 16 pour
     les panneaux (rail, porte). Un meme rayon sur un champ de 44 px et
     une carte de 400 px dit qu'ils ont la meme taille. Aucun 8, 10, 14.
     Divergence ecrite avec le portail RH (16 partout la-bas). --------- */
  --r-1: 6px;  --r-2: 12px;  --r-3: 16px;  --r-pilule: 999px;

  /* --- Mouvement : trois durees, deux courbes, rien d'autre. Ce qui
     bouge : `transform` et `opacity` seulement. ----------------------- */
  --d-1: 120ms;  --d-2: 200ms;  --d-3: 320ms;
  --e-in: cubic-bezier(.2,0,0,1);  --e-out: cubic-bezier(.3,0,.8,.15);

  /* --- Echelle de texte fermee (ratio 1,2 ; 1,3 pour le chiffre de
     tuile). 12 px seulement en encre-3 ou plus sombre sur blanc, mur ou
     creux. ------------------------------------------------------------ */
  --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-15: 15px; --t-16: 16px; --t-18: 18px;
  --t-20: 20px; --t-22: 22px; --t-24: 24px; --t-28: 28px; --t-34: 34px; --t-44: 2.75rem;

  /* --- Largeurs et hauteurs de structure ----------------------------- */
  --l-dedans: 72rem;  --l-rail: 16rem;  --h-barre: 64px;  --h-barre-mobile: 56px;
  /* La gouttiere du corps, redefinie par palier (16 / 24 / 32 / 48) :
     la barre de suivi s'en sert pour deborder jusqu'au bord. */
  --gouttiere: 16px;

  /* --- Espacements : echelle de 4, inchangee -------------------------- */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  /* --- Polices ---------------------------------------------------------
     `--f-chiffre` (monospace systeme) est RESERVEE aux references,
     numeros d'avis, empreintes, codes RF1 / C3, a 13 px : le zero barre
     disparait des grands chiffres, qui passent en Inter 600 tabulaire. */
  --f-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-titre: 'Playfair Display', Georgia, serif;
  --f-chiffre: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

/* --- Les gouttieres, par palier --------------------------------------- */
@media (min-width: 40rem){  :root{ --gouttiere: 24px; } }
@media (min-width: 64rem){  :root{ --gouttiere: 32px; } }
@media (min-width: 100rem){ :root{ --gouttiere: 48px; } }

/* =====================================================================
   SOCLE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* /!\ SANS CETTE LIGNE, L'ATTRIBUT `hidden` NE CACHE RIEN DES QU'UNE
   CLASSE POSE UN `display`. La regle du navigateur est
   `[hidden]{display:none}` avec la specificite d'un selecteur
   d'attribut ; `.champ{display:block}` a la meme specificite et vient
   APRES, donc elle gagne. MESURE a 375 px : un champ `hidden` restait a
   l'ecran sur une decision Go. Le defaut ne leve rien. */
[hidden]{ display: none !important; }

/* UN DEPLIANT FERME NE POSE AUCUNE BOITE. Le navigateur cache le contenu
   d'un <details> ferme par `content-visibility: hidden` : rien ne se
   peint, mais tout se DISPOSE, a la largeur du pli ferme. MESURE le
   03/10/2026 sur les pieces d'un dossier : le bouton de confirmation
   d'un retrait replie, pose a droite de sa rangee, sortait de 16 px a
   1024 et de 32 px a 375 ; la page ne defilait pas, mais toute sonde de
   debordement le comptait, et chaque revue le relevait. `display: none`
   rend au pli ferme la geometrie de ce qu'il montre. Le script
   d'impression du gabarit ouvre les plis AVANT d'imprimer : la regle ne
   s'applique plus a ce moment-la. */
details:not([open]) > :not(summary){ display: none !important; }

html{
  /* Le mur, pose aussi sur html : le body n'a pas toujours la hauteur
     de la fenetre, et la zone en dessous prendrait la couleur par
     defaut. Sous un systeme en mode sombre, `color-scheme: light` garde
     les controles natifs clairs : le mode sombre n'est pas traite, le
     declarer clair est la verite. */
  background: var(--n-1);
  color-scheme: light;
}

body{
  margin: 0;
  min-height: 100dvh;
  /* Le mur et son halo : UNE lumiere, statique, en haut a gauche, la ou
     se pose la tuile pleine. */
  background: var(--halo) no-repeat, var(--n-1);
  color: var(--n-12);
  font-family: var(--f-texte);
  font-size: 16px;
  line-height: 1.55;
  /* Supprime le delai que le navigateur garde pour guetter un double
     tapotement. Le pincement pour zoomer reste possible. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* --- Titres ------------------------------------------------------------
   PLAYFAIR SEULEMENT A 24 PX ET PLUS : en dessous les hairlines cassent
   et la page sent le "serif partout". Donc le h1 d'ecran (28, 34 sur
   le tableau de bord) et le h2 "Prochaine etape" (24) ; tout autre
   titre travaille en Inter par le poids. */
h1, h2, h3{ margin: 0; font-weight: 600; text-wrap: balance; }
h1{
  font-family: var(--f-titre);
  font-size: var(--t-28);
  line-height: 1.15;
  letter-spacing: -.01em;
}
h2{ font-family: var(--f-texte); font-size: var(--t-22); line-height: 1.25; }
h3{ font-family: var(--f-texte); font-size: var(--t-18); line-height: 1.3; }

a{ color: var(--c-bleu); }

/* Visible partout, et jamais retire. */
:focus-visible{
  outline: 2px solid var(--c-bleu);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- Icones ------------------------------------------------------------
   Le jeu vit dans `components/icones.blade.php` : grille 24, trait 1,5,
   `currentColor`. `--trait` traverse le `<use>` : un symbole lit
   `stroke-width: var(--trait, 1.5)` dans son attribut `style`, et les
   proprietes personnalisees HERITENT jusque dans l'arbre d'ombre du
   `<use>`, la ou aucun selecteur CSS ne peut entrer. C'est ainsi que la
   puce epaissit son glyphe de 14 px a 2,25 et le rail a 1,75. */
.i, .ico{ width: 20px; height: 20px; flex: none; --trait: 1.5; }

/* --- Les chiffres ------------------------------------------------------
   Inter 600 tabulaire : une colonne de nombres se lit en diagonale. Le
   monospace systeme est reserve aux references et codes (.reference). */
.chiffre{ font-weight: 600; font-variant-numeric: tabular-nums; }
.reference{ font-family: var(--f-chiffre); font-size: var(--t-13); }

/* Longueur de ligne : sur l'element de prose, jamais sur le conteneur. */
.prose-mesure{ max-width: 60ch; }

/* =====================================================================
   NAVIGATION : lien d'evitement, barre haute, corps, rail
   ===================================================================== */

/* --- Le lien d'evitement ----------------------------------------------
   Il saute la barre et pose le curseur sur le contenu. Il n'est pas
   cache : il est hors champ et revient au premier `Tab`. Un lien
   d'evitement en `display:none` ne serait jamais atteint.
   z-index 40 et non 10 : il doit paraitre AU-DESSUS de la barre (30),
   sinon la vitre collante le recouvre au moment ou il sert. */
.evitement{
  position: absolute;
  left: var(--e4);
  top: -100px;
  z-index: 40;
  padding: var(--e3) var(--e4);
  background: #fff;
  color: var(--n-9);
  box-shadow: var(--o-3);
  border-radius: var(--r-1);
  font-weight: 600;
  text-decoration: none;
}
.evitement:focus{ top: var(--e3); }

/* Lu par les lecteurs d'ecran, invisible a l'ecran. `clip-path` plutot
   que `display:none`, qui retirerait le texte de l'arbre d'accessibilite.
   /!\ Un `.lu-seulement` est ABSOLU : son conteneur porte
   `position: relative`, sinon il se place par rapport a la page et
   peut en etendre la largeur (35 px de defilement mesures). */
.lu-seulement{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- La barre haute : la vitre ------------------------------------------
   Collante, en verre a 86 % de blanc : la seule surface marine de
   l'ecran est la tuile "A decider", pas la barre. Le verre n'a de sens
   que parce qu'un contenu reel defile dessous ; il est repli en opaque
   la ou `backdrop-filter` manque ou est refuse. `-webkit-` toujours
   avant la standard. Aucun `position: fixed` a l'interieur : le filtre
   en deviendrait le bloc conteneur. Encres de la barre : --n-12, --n-9,
   --c-ink-2 ; JAMAIS bleu (3,6:1 au-dessus de la tuile marine). */
.barre{
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--e3) var(--e4);
  min-height: var(--h-barre);
  padding-top:    env(safe-area-inset-top);
  padding-left:   calc(var(--gouttiere) + env(safe-area-inset-left));
  padding-right:  calc(var(--gouttiere) + env(safe-area-inset-right));
  background: var(--verre);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  box-shadow: 0 1px 0 rgba(15,42,71,.10);
  color: var(--n-12);
}
.barre a{ color: inherit; text-decoration: none; }

/* La marque : sceau SK 24 px, jamais reteinte, et le nom en Inter 600 18
   (Playfair a 18 px violait la regle des 24 px). */
.barre .marque{
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 44px;
  font-weight: 600; font-size: var(--t-18); color: var(--n-9);
  white-space: nowrap;
}
.barre .lockup-mk{ width: 30px; height: 24px; flex: none; }
.barre-sep{ width: 1px; height: 24px; background: var(--n-7); flex: none; }
/* Ou l'on est : le nom de l'outil, en Inter 400, encre secondaire. */
.barre .ici{ font-size: var(--t-14); color: var(--c-ink-2); white-space: nowrap; }
.barre form{ margin: 0; }
.barre .droite{ margin-left: auto; display: flex; align-items: center; gap: var(--e3); }

/* La recherche dans la barre : fond --n-3, filet --n-7, loupe --n-8.
   Base de 12 rem et non 22 : elle PREND le reste de la rangee (grow 1,
   plafond 30 rem), elle ne le reserve pas. A 22 rem elle faisait passer
   la barre sur deux rangees de 961 a 1 149 px (mesure le 03/10/2026).
   Aucune marge : `.barre form{ margin: 0 }` (0,1,1) battait toute marge
   posee ici (0,1,0), l'ecart vient du `gap` de la barre. */
.barre-cherche{
  position: relative; flex: 1 1 12rem; max-width: 30rem; min-width: 0;
}
.barre-loupe{
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--n-8); pointer-events: none;
}
.barre-cherche input{
  width: 100%; min-height: 40px; padding: 0 var(--e3) 0 36px;
  font: inherit; font-size: var(--t-14);
  color: var(--n-12); background: var(--n-3);
  border: 1px solid var(--n-7); border-radius: var(--r-1);
}
.barre-cherche input::placeholder{ color: var(--n-11); }
.barre-cherche input:focus{
  outline: 2px solid var(--c-bleu); outline-offset: 1px;
  border-color: var(--c-bleu); background: #fff;
}

/* Le profil : la pastille d'initiales (or de la marque sur marine
   profond, le seul or hors du geste), le nom, le cabinet. */
.profil{ display: flex; align-items: center; gap: var(--e3); }
.profil-pastille{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--n-10); color: var(--c-or-marque);
  font-size: var(--t-13); font-weight: 600; letter-spacing: .02em;
}
.profil-texte{ display: grid; line-height: 1.25; }
.barre .qui{ font-size: var(--t-14); font-weight: 600; color: var(--n-12); }
.profil-texte .ou{ font-size: var(--t-13); color: var(--c-ink-2); }
.profil-texte .puce{ justify-self: start; margin-top: 2px; }

/* Se deconnecter : un bouton calme, 44 px (mesure a 36 avant). */
.barre .sortir{ font-size: var(--t-14); white-space: nowrap; }
.sortir-mot{ min-width: 0; }

/* Sous 72 rem, "Se deconnecter" ne garde que son icone, en 44 x 44 : le
   mot sort de l'ecran mais pas de l'arbre d'accessibilite, il reste le nom
   du bouton. Le bouton porte `position: relative` parce que le mot devient
   absolu (meme piege que `.lu-seulement`). Le telephone et la tablette
   couchee partagent cette regle : le mot et son bouton font 169 px, de
   quoi faire passer la barre sur deux rangees entre 60 et 72 rem. */
@media (max-width: 72rem){
  .sortir-mot{
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .barre .sortir{ width: 44px; padding: 0; justify-content: center; position: relative; }
}

/* Des 48 rem, a TOUTE largeur : UNE rangee (64 px des 60 rem, 56 en
   dessous). La vitre est collante, chaque rangee de plus est de la
   hauteur utile mangee sur un portable ou une tablette.
   MESURE avant ce correctif : a 961, 1 000, 1 024 et 1 100 px la barre
   faisait 100 px, le profil et la deconnexion tombes sous la recherche.
   Un premier correctif borne a 60-72 rem deplacait le defaut sans le
   retirer : avec un nom et un cabinet longs (37 et 43 signes), la barre
   repassait a 100 px (114 pour le lecteur) de 1 153 a 1 279 px, parce
   qu'elle restait en `flex-wrap` au-dessus de 72 rem.
   Donc `nowrap` partout au-dessus du telephone, et ce qui pourrait
   deborder plie : la recherche (min-width 0) cede la place, le texte du
   profil est borne a 16 rem avec points de suspension (le nom entier
   reste dans le texte, donc lu par les lecteurs d'ecran).
   Le texte du profil RESTE visible des 60 rem : il porte le badge
   "Lecture seule" du lecteur, et la barre dit qui regarde. */
@media (min-width: 48.01rem){
  .barre{ flex-wrap: nowrap; }
}
@media (min-width: 60.01rem){
  .profil-texte{ min-width: 0; max-width: 16rem; grid-template-columns: minmax(0, 1fr); }
  .profil-texte .qui, .profil-texte .ou{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Sous 60 rem : marque et pastille, deconnexion en icone 44 x 44 (regle
   ci-dessus), le nom du module et le texte du profil sortis de l'ecran
   mais pas de l'arbre d'accessibilite. */
@media (max-width: 60rem){
  .barre{
    min-height: var(--h-barre-mobile);
    gap: var(--e2) var(--e3);
    -webkit-backdrop-filter: var(--verre-flou-mobile);
    backdrop-filter: var(--verre-flou-mobile);
  }
  .barre .marque{ font-size: var(--t-16); }
  .barre-sep, .barre .ici{ display: none; }
  .profil{ position: relative; }
  .profil-texte{
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* Le telephone et la tablette debout (48 rem et moins) : la recherche
   en seconde rangee, PLEINE largeur.
   MESURE avant ce correctif (03/10/2026) : `order: 3` et `flex-basis:
   100%` etaient poses jusqu'a 60 rem, mais le plafond de 30 rem
   ramenait la taille hypothetique a 480 px : seconde rangee mais pas
   pleine largeur de 513 a 774 px, et des 775 px elle tenait sur la
   premiere rangee, APRES le profil et la deconnexion (order 3). De 775
   a 960 px la barre lisait "marque, pastille, Se deconnecter,
   recherche" : la deconnexion au milieu, et l'ordre visuel contraire a
   l'ordre de tabulation (marque, recherche, profil, deconnexion).
   Donc ici le plafond tombe (seconde rangee pleine largeur, 92 px au
   telephone comme avant), et de 48 a 60 rem la recherche reprend sa
   place entre la marque et le profil, dans une rangee de 56 px. */
@media (max-width: 48rem){
  .barre-cherche{ order: 3; flex: 1 1 100%; max-width: none; }
}

/* Les replis du verre, dans l'ordre : moteur sans filtre, puis
   transparence refusee par la personne. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .barre, .suivi{ background: var(--verre-repli); }
}
@media (prefers-reduced-transparency: reduce){
  .barre, .suivi{ background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* --- Le corps et son conteneur centre ---------------------------------- */
.dedans{ max-width: var(--l-dedans); margin: 0 auto; }
.corps{
  padding-top: var(--e5);
  padding-bottom: calc(var(--e8) + env(safe-area-inset-bottom));
  padding-left:  calc(var(--gouttiere) + env(safe-area-inset-left));
  padding-right: calc(var(--gouttiere) + env(safe-area-inset-right));
}
@media (min-width: 40rem){ .corps{ padding-top: var(--e6); } }

/* --- La grille a deux colonnes : rail + contenu --------------------------
   /!\ `min-width: 0` SUR LES DEUX COLONNES. La taille minimale d'une
   boite de grille vaut celle de son contenu : sans lui, la bande
   horizontale du rail imposait 491 px a une fenetre de 371. */
.avec-rail{
  display: grid; grid-template-columns: var(--l-rail) minmax(0, 1fr);
  gap: var(--e6); align-items: start;
}
/* SANS COLONNE, UNE SEULE COLONNE : le module ferme et la fiche d'avis
   traversent le meme gabarit. Le gabarit pose `sans-rail` quand la
   section `rail` n'existe pas (plomberie A6). */
.avec-rail.sans-rail{ grid-template-columns: minmax(0, 1fr); }
.rail-place{ position: sticky; top: calc(var(--h-barre) + var(--e4)); min-width: 0; }
.rail{ min-width: 0; }
.rail-contenu{ min-width: 0; }

/* --- Le rail : la colonne de navigation ----------------------------------
   Une feuille a trois sections ; "Travailler" mene a des files
   comptees, pas a des pages. L'entree active se DERIVE de la requete
   (etape, ecran), et c'est le trait, la graisse et le fond qui la
   disent : la couleur ne fait qu'appuyer. Zero masque : un "0" gris
   repete transforme la colonne en tableau de bord pauvre. */
.rail{
  background: #fff; border: 0;
  border-radius: var(--r-3);
  box-shadow: var(--o-anneau), var(--o-1);
  padding: var(--e4) var(--e3);
}
.rail-titre{
  margin: 0 0 var(--e2); padding: 0 var(--e3) var(--e2);
  font-size: var(--t-12); font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--n-11);
  border-bottom: 1px solid var(--n-6);
}
.rail-titre + .rail-titre, .rail ul + .rail-titre{ margin-top: var(--e5); }

/* `position: relative` sur la liste : les `.lu-seulement` des compteurs
   sont absolus et doivent se placer dans le rail, pas dans la page. */
.rail ul{ position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail li.decale .rail-lien{ padding-left: var(--e5); }

.rail-lien{
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: 2px var(--e2);
  min-height: 44px; padding: var(--e2) var(--e3);
  border-radius: var(--r-1); text-decoration: none;
  font-size: var(--t-14); color: var(--n-12); line-height: 1.3;
}
/* Les etapes d'un dossier : sans icone, avec une note et un etat. */
.rail.sans-icone .rail-lien{ grid-template-columns: minmax(0, 1fr) auto auto; }
.rail-icone{ width: 20px; height: 20px; flex: none; color: var(--n-8); --trait: 1.75; }
.rail .ico{ --trait: 1.75; }
.rail-lien.ici .rail-icone{ color: var(--n-9); }
@media (hover: hover) and (pointer: fine){
  .rail-lien:hover{ background: var(--n-3); }
}
.rail-lien:focus-visible{ outline: 2px solid var(--c-bleu); outline-offset: 1px; }

/* L'ENDROIT OU L'ON EST SE LIT SANS COULEUR : le trait a gauche, le fond
   et la graisse le disent. */
.rail-lien.ici{
  background: var(--n-4); color: var(--n-12); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--c-bleu);
}
/* Une porte fermee reste ecrite, n'est jamais un lien, jamais masquee. */
.rail-lien.ferme{ color: var(--n-11); cursor: not-allowed; }

.rail-nom{ min-width: 0; }
/* Le compteur : Inter 600 tabulaire, plus de monospace. */
.rail-note{
  font-weight: 600; font-size: var(--t-12); color: var(--n-11);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rail-lien.ici .rail-note{ color: var(--c-ink-2); }

/* La pastille d'etat est un APPUI, jamais le seul porteur : la note
   chiffree a cote dit la meme chose en toutes lettres.
   /!\ LES MODIFICATEURS PORTENT LE NOM DU BLOC : `fait` nu est deja le
   bandeau de succes, avec seize pixels de marge interieure. */
.rail-etat{ width: 8px; height: 8px; border-radius: 50%; flex: none;
            background: var(--n-5); padding: 0; margin: 0; }
.rail-etat.rail-fait{ background: var(--c-vert); }
.rail-etat.rail-encours{ background: var(--c-bleu); }
.rail-etat.rail-refus{ background: var(--c-rouge); }
/* A faire : un anneau creux, pas un point plein. */
.rail-etat.rail-a-faire{ background: transparent; box-shadow: inset 0 0 0 2px var(--n-7); }

/* Au telephone : UNE rangee de 56 px qui defile dans son propre cadre.
   /!\ `flex: none` : sans lui chaque entree RETRECIT et sa colonne de
   nom tombe a zero, le texte se pose sur l'entree voisine (mesure :
   "La fiche" faisait 42 px). `overscroll-behavior-x: contain` : le
   geste ne quitte pas la page. Pas de bouton de repli : il demanderait
   du script et un etat a retenir, pour un gain nul. */
@media (max-width: 60rem){
  .avec-rail{ grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
  .rail-place{ position: relative; top: auto; }
  /* UNE rangee, et c'est le rail lui-meme qui defile : les trois listes
     passent en `display: contents` pour que leurs entrees se suivent
     dans la meme bande, les titres de section s'effacent. Trois listes
     empilees faisaient trois rangees et 150 px de rail a 375. */
  .rail{
    position: relative;   /* les .lu-seulement absolus restent DANS la bande qui defile, pas a sa droite dans la page */
    display: flex; flex-wrap: nowrap; align-items: center; gap: var(--e2);
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
    /* 56 = 44 + 2 x 6 : l'entree garde sa cible de 44 (SYSTEME-V2 sec. 3)
       et la bande ses 56. Pas hors echelle, assume : 4 donnerait 52,
       8 donnerait 60. Les 6 px logent aussi le contour de focus (2 px a
       1 px de l'entree), que le cadre defilant couperait sinon. A gauche
       on garde --e2, la meme valeur que `scroll-padding-inline` plus bas. */
    padding: 6px 28px 6px var(--e2);
    border-radius: var(--r-2);
  }
  /* L'ENTREE ACTIVE NE SE POSE JAMAIS SOUS LE DEGRADE DE BORD.
     Deux causes, mesurees a 375 sur alpha (revue du 03/10/2026) :
     1. `scrollIntoView({inline:'nearest'})` cale le bord droit de
        l'entree SUR le bord droit du cadre, donc sous les 24 px du
        degrade : "Ouvrir un dossie". `scroll-padding` retrecit la zone
        ou le navigateur depose l'entree : 32 px, le degrade plus 8.
     2. Le script tourne pendant l'analyse de la page, AVANT l'arrivee
        d'Inter (`font-display: swap`) : les entrees s'elargissent ensuite
        et poussent l'entree active de 20 px hors du cadre, sans que
        `scrollLeft` bouge. Seule l'accroche y repond sans script : un
        cadre accroche se RE-ACCROCHE a la meme entree quand la mise en
        page change. Chaque entree s'accroche par son bord droit, a 32 px
        du bord : au repos aucune entree n'est mangee par le degrade, et
        seul le debut de la suivante s'y efface, ce qui dit "la bande
        continue". `proximity` et non `mandatory` : rien n'est force, une
        entree plus large que le cadre se lit encore en entier (mesure dans
        Chrome : le repos tombe quand meme sur l'entree la plus proche).
        La premiere s'accroche par son bord gauche, pour que le debut de
        la bande reste un point d'arret. */
  .rail{ scroll-padding-inline: var(--e2) var(--e6); scroll-snap-type: x proximity; }
  .rail li{ scroll-snap-align: end; }
  .rail ul:first-of-type > li:first-child{ scroll-snap-align: start; }
  .rail-titre{ display: none; }
  .rail ul{ display: contents; }
  .rail li{ flex: none; }
  .rail li.decale .rail-lien{ padding-left: var(--e3); }
  .rail-lien{
    grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e2);
    white-space: nowrap; min-height: 44px; padding: 0 var(--e3);
    background: #fff; border: 1px solid var(--n-7); border-radius: var(--r-pilule);
  }
  .rail-lien.ici{ border-color: var(--n-4); box-shadow: inset 0 -3px 0 var(--c-bleu); }
  .rail-lien.ferme{ border-color: var(--n-6); }
  /* Le degrade de bord : la bande continue a droite, et ce bord le dit.
     Pose sur l'enveloppe, qui ne defile pas, et non sur le rail qui
     emporterait son pseudo-element avec le contenu. Blanc sur blanc :
     ce n'est pas une couleur de plus. */
  .rail-place::after{
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 24px;
    border-radius: 0 var(--r-2) var(--r-2) 0;
    background: linear-gradient(to right, rgba(255,255,255,0), #fff 70%);
    pointer-events: none;
  }
  .avec-rail.sans-rail .rail-place::after{ display: none; }
}

/* =====================================================================
   MESSAGES : ce que la page raconte apres un acte
   /!\ SANS CES BLOCS, UN CONTROLEUR QUI REFUSE CORRECTEMENT EN BASE ET
   REDIRIGE CORRECTEMENT N'AFFICHE RIEN. C'est pour cela qu'ils vivent
   dans le gabarit. Une bande de 4 px a gauche et une surface d'etat :
   la forme dit l'etat avant le mot. Aucun toast, rien ne disparait seul,
   aucune croix de fermeture.
   ===================================================================== */
.refus, .fait{
  margin: 0 0 var(--e5);
  padding: var(--e4) var(--e4) var(--e4) calc(var(--e4) + 4px);
  border: 0; border-radius: var(--r-2);
  font-size: var(--t-15);
}
.refus{ color: var(--c-rouge); background: var(--c-rouge-fond); box-shadow: inset 4px 0 0 var(--c-rouge); }
.fait{ color: var(--c-vert); background: var(--s-faite); box-shadow: inset 4px 0 0 var(--c-vert); }
.refus .quoi, .fait .quoi{ display: block; font-weight: 600; margin-bottom: 2px; }
.refus code{ font-family: var(--f-chiffre); font-size: var(--t-12); opacity: .8; }

/* Le recapitulatif des erreurs de saisie : il porte le curseur clavier a
   l'arrivee, il doit donc se voir comme un refus, pas une remarque. */
.erreurs-saisie{
  margin: 0 0 var(--e5);
  padding: var(--e4) var(--e5) var(--e4) calc(var(--e5) + 4px);
  background: var(--c-rouge-fond);
  box-shadow: inset 4px 0 0 var(--c-rouge);
  border: 0; border-radius: var(--r-2);
}
.erreurs-saisie:focus{ outline: 2px solid var(--c-rouge); outline-offset: 2px; }
.erreurs-saisie .quoi{ margin: 0 0 var(--e2); font-weight: 600; color: var(--c-rouge); }
.erreurs-saisie ul{ margin: 0; padding-left: var(--e5); }
.erreurs-saisie li{ margin-bottom: var(--e1); }
.erreurs-saisie a{ color: var(--n-12); }

/* L'erreur unique de la porte d'entree (connexion). */
.erreur{
  margin: 0 0 var(--e5);
  padding: var(--e3) var(--e4) var(--e3) calc(var(--e4) + 4px);
  font-size: var(--t-15);
  color: var(--c-rouge);
  background: var(--c-rouge-fond);
  box-shadow: inset 4px 0 0 var(--c-rouge);
  border: 0; border-radius: var(--r-1);
}
.erreur a{ color: inherit; }

/* Le bandeau de RESULTAT, apres un acte irreversible (depot, creation) :
   reference, date, lien vers le livrable, prochaine etape. Il remplace
   un message eclair qui disparaissait : ce qui a engage le cabinet reste
   ecrit. Une feuille a rayon 16 qui flotte (--o-3), bande verte. */
.resultat{
  margin: 0 0 var(--e5);
  padding: var(--e5) var(--e5) var(--e5) calc(var(--e5) + 4px);
  background: #fff;
  border-radius: var(--r-3);
  box-shadow: inset 4px 0 0 var(--c-vert), var(--o-3);
}
.resultat h2{ font-size: var(--t-18); color: var(--c-vert); }
.resultat-ref{ font-family: var(--f-chiffre); font-size: var(--t-13); color: var(--n-12); }
.resultat-meta{
  display: flex; flex-wrap: wrap; gap: var(--e1) var(--e5);
  margin: var(--e2) 0 0; font-size: var(--t-14); color: var(--c-ink-2);
}
.resultat-gestes{ display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e4); }

/* Le role qui lit : en TETE de l'ecran, l'oeil, une phrase, un lien calme
   de sortie. Les controles sont dans un `fieldset.enveloppe` desactive ;
   ce qu'une permission interdit est ABSENT du DOM, jamais grise. */
.lecture-seule{
  display: flex; gap: var(--e3); align-items: flex-start;
  margin: 0 0 var(--e5); padding: var(--e4) var(--e4) var(--e4) calc(var(--e4) + 4px);
  background: #fff; border: 0; border-radius: var(--r-2);
  box-shadow: inset 4px 0 0 var(--n-8), var(--o-anneau);
  font-size: var(--t-15); color: var(--n-12);
}
.lecture-seule .i, .lecture-seule .ico{ color: var(--n-8); margin-top: 3px; }
.lecture-seule p{ margin: 0; }
.lecture-seule strong{ display: block; }
/* Une phrase et un lien calme de sortie : le corps passe le lien sous la
   phrase quand la ligne est trop etroite (pose dans la rangee du
   bandeau, il la faisait deborder de 82 px a 375). Fiche du dossier et
   pieces, le 03/10/2026. */
.lecture-seule-corps{
  flex: 1 1 0; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4);
}
.lecture-seule-corps p{ flex: 1 1 16rem; min-width: 0; }
.lecture-seule-sortie{ flex: none; }

/* L'enveloppe d'un formulaire : un fieldset sans habillage, pour
   desactiver d'un coup tous les controles du role qui lit. `min-width:
   0` parce qu'un fieldset prend par defaut la largeur de son contenu. */
.enveloppe{ border: 0; margin: 0; padding: 0; min-width: 0; }

/* =====================================================================
   BOUTONS .action
   Une base commune ; les variantes sont des classes AUTONOMES prefixees
   du nom du bloc (`action-calme`, pas `action calme`) : un ecran peut
   ainsi compter ses primaires (`.action` seul, UN par vue) et aucun
   nom global nu n'est emprunte comme second mot. Les anciennes formes
   `.action.calme` et `.action.engage` restent stylees a l'identique.
   Le libelle vit dans `<span class="action-mot">`, l'icone (20 px)
   APRES le mot : le script d'envoi unique remplace le mot sans perdre
   l'icone.
   ===================================================================== */
.action, .action-calme, .action-texte, .action-engage, .action-danger{
  display: flex; align-items: center; justify-content: center;
  gap: var(--e2);
  width: 100%;
  min-height: 44px;
  padding: 10px var(--e4);
  font: inherit; font-weight: 600; font-size: var(--t-16); line-height: 1.25;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: transform var(--d-1) var(--e-in);
}
.action-mot{ min-width: 0; }

/* La primaire : le bleu est ce qui se clique, le marine reste au sceau. */
.action{ color: #fff; background: var(--c-bleu); }
/* La calme : fond blanc, filet --n-7 (3,53:1), encre pleine. */
.action-calme, .action.calme{ color: var(--n-12); background: #fff; border-color: var(--n-7); }
/* Le lien-bouton : sans fond, largeur naturelle. */
.action-texte{
  display: inline-flex; width: auto;
  padding-left: var(--e2); padding-right: var(--e2);
  color: var(--c-bleu); background: transparent;
}
/* Ce qui retire ou detruit : rouge, et jamais plein. 24 px au moins le
   separent des autres gestes dans un rang. */
.action-danger{ color: var(--c-rouge); background: #fff; border-color: var(--n-7); }
.action-texte.action-danger{ background: transparent; border-color: transparent; }
/* L'OR NE SERT QU'A UN SEUL GESTE : rendre la decision Go / No Go, et son
   relais. Encre marine profonde et non blanche : du blanc sur #b98d3a
   donne 3,03:1 ; --n-10 tient 5,61:1. Le couple se lit comme un sceau. */
.action-engage, .action.engage{ color: var(--n-10); background: var(--c-or); }

/* Largeur naturelle : remplace tout `style="display:inline-flex"`. */
.action-inline{ display: inline-flex; width: auto; }
/* Plus petite par le texte, jamais par la cible : 44 px tenus. */
.action-petite{ font-size: var(--t-14); padding: 6px var(--e3); }

/* Un lien qui porte la classe est un bouton : pas de soulignement. */
a.action, a.action-calme, a.action-texte, a.action-engage, a.action-danger{ text-decoration: none; }

/* Le survol, seulement sous un pointeur fin : un survol non garde reste
   colle apres un tap. L'or ECLAIRE au survol, il n'assombrit pas. */
@media (hover: hover) and (pointer: fine){
  .action:hover{ background: var(--c-bleu-survol); transform: translateY(-1px); }
  .action-calme:hover, .action.calme:hover{ background: var(--n-3); transform: translateY(-1px); }
  .action-texte:hover{ text-decoration: underline; }
  .action-danger:hover{ background: var(--s-rejet); }
  .action-engage:hover, .action.engage:hover{ background: var(--c-or-survol); color: var(--n-10); transform: translateY(-1px); }
}
.action:active, .action-calme:active, .action-engage:active, .action-danger:active{ transform: scale(.98); transition-duration: 60ms; }

.action:focus-visible, .action-calme:focus-visible, .action-texte:focus-visible, .action-danger:focus-visible{
  outline: 2px solid var(--c-bleu); outline-offset: 2px;
}
.action-engage:focus-visible, .action.engage:focus-visible{ outline-color: var(--n-10); }

/* Desactive : opacite .55 UNIQUEMENT avec un `.apres` qui dit pourquoi.
   Ce qu'une permission interdit n'est pas grise, il est absent. */
.action:disabled, .action-calme:disabled, .action-texte:disabled, .action-engage:disabled, .action-danger:disabled{
  opacity: .55; cursor: not-allowed; transform: none;
}

/* En cours : `aria-busy="true"` pose par le script d'envoi. Le mot
   devient transparent, un anneau de 18 px tourne (900 ms, lineaire),
   seulement pendant l'envoi. Sous `prefers-reduced-motion`, trois
   points statiques (bordure pointillee, sans rotation). */
.action[aria-busy="true"], .action-calme[aria-busy="true"], .action-engage[aria-busy="true"], .action-danger[aria-busy="true"]{
  position: relative; color: transparent; pointer-events: none;
}
.action[aria-busy="true"]::after, .action-calme[aria-busy="true"]::after,
.action-engage[aria-busy="true"]::after, .action-danger[aria-busy="true"]::after{
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: tourne 900ms linear infinite;
}
.action-calme[aria-busy="true"]::after, .action-engage[aria-busy="true"]::after, .action-danger[aria-busy="true"]::after{
  border-color: rgba(15,42,71,.2); border-top-color: var(--n-10);
}
@keyframes tourne{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .action[aria-busy="true"]::after, .action-calme[aria-busy="true"]::after,
  .action-engage[aria-busy="true"]::after, .action-danger[aria-busy="true"]::after{
    animation: none; border-style: dotted; border-top-color: inherit;
  }
}

/* Le rang d'action : le bouton, et A COTE la phrase qui dit ce que le
   clic fait. Le prix du geste se dit AVANT le clic. Ce module n'a
   aucune boite de dialogue. */
.rang-agir{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3);
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--n-6);
}
.rang-agir .action, .rang-agir .action-calme, .rang-agir .action-engage{ width: auto; min-width: 14rem; }
.rang-agir .action-danger{ width: auto; margin-left: var(--e5); }
.apres{ margin: 0; flex: 1 1 18rem; font-size: var(--t-14); color: var(--c-ink-2); }

/* =====================================================================
   FORMULAIRES : .champ, .etiquette, .saisie, .segments
   Ces classes vivent dans le socle parce que tout outil heberge en a
   besoin ; laissees dans la vue qui les a vues naitre, elles ont deja
   disparu une fois avec le formulaire de connexion, sans aucune erreur.
   `.champ` est un <div>, jamais un <label> : aide, erreur et compteur ne
   vivent pas dans le nom accessible du controle.
   ===================================================================== */
.champ{ display: block; margin-bottom: var(--e5); }
.etiquette, .champ .etiquette{ display: block; font-weight: 600; color: var(--n-9); }
/* La mention "obligatoire", a droite de l'etiquette. */
.champ-obligatoire{ font-weight: 400; font-size: var(--t-13); color: var(--c-ink-2); margin-left: var(--e2); }
.champ .aide{ display: block; margin-top: 2px; font-size: var(--t-14); color: var(--c-ink-2); }
.aide{ margin: var(--e2) 0 0; color: var(--c-ink-2); font-size: var(--t-14); }
.err{ margin: var(--e2) 0 0; color: var(--c-rouge); font-size: var(--t-14); font-weight: 600; }

.saisie{
  display: block;
  width: 100%;
  margin-top: var(--e2);
  /* 48 px de haut, au-dessus des 44 px de cible tactile ; 16 px de
     texte, en dessous desquels iOS zoome de lui-meme a la mise au
     point, ce qui deplace la page sous le doigt. */
  min-height: 48px;
  padding: var(--e3) var(--e4);
  font: inherit; font-size: var(--t-16);
  color: var(--n-12);
  background: #fff;
  border: 1px solid var(--n-7);
  border-radius: var(--r-1);
}
.saisie::placeholder{ color: var(--n-11); }
@media (hover: hover) and (pointer: fine){ .saisie:hover{ border-color: var(--n-8); } }
.saisie:focus{ border-color: var(--c-bleu); outline: 2px solid var(--c-bleu); outline-offset: 2px; }
/* Invalide : bord rouge double (sans deplacer la ligne), surface rejet.
   Le message `.err` dessous dit QUOI. */
.saisie[aria-invalid="true"]{
  border-color: var(--c-rouge); box-shadow: inset 0 0 0 1px var(--c-rouge);
  background: var(--s-rejet);
}
/* Lisible en lecture : fond transparent, bord attenue, encre pleine. */
.saisie[readonly]{ background: transparent; border-color: var(--n-6); color: var(--n-12); }
/* Desactive : seulement dans `fieldset.enveloppe`, pour le role qui lit. */
.enveloppe:disabled .saisie{ background: var(--n-2); border-color: var(--n-6); color: var(--c-ink-2); }
/* L'autofill du navigateur : bleu doux, et l'encre reste la notre. */
.saisie:-webkit-autofill{ -webkit-box-shadow: 0 0 0 1000px var(--c-bleu-doux) inset; -webkit-text-fill-color: var(--n-12); }
textarea.saisie{ min-height: 8rem; resize: vertical; line-height: 1.55; }
select.saisie{ cursor: pointer; }

/* Le champ fichier : un bouton calme qui porte le controle, et le nom du
   fichier choisi ecrit a cote (le script de l'ecran l'y pose). */
.champ-fichier{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-top: var(--e2); position: relative; }
.champ-fichier-nom{ font-size: var(--t-14); color: var(--c-ink-2); min-width: 0; overflow-wrap: anywhere; }

/* Les segments : une rangee de choix exclusifs (red flags, niveaux 1 a
   5, sens de la decision). Les radios sont en `.lu-seulement`, le label
   est la cible (44 px). Coche : bord 2 px bleu et fond bleu doux ; le
   "Oui" d'un red flag en rouge ; la carte de sens cochee en or (le
   seul etat qui engage). Le focus se lit sur le label par `:has()`.
   `position: relative` sur le groupe : les radios absolus restent dans
   leur boite. */
.segments{ position: relative; display: flex; flex-wrap: wrap; gap: var(--e2); }
.segments > label{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--e2) var(--e4);
  background: #fff; border: 1px solid var(--n-7); border-radius: var(--r-1);
  font-size: var(--t-14); color: var(--n-12);
  cursor: pointer;
}
.segments > label:has(:checked){
  border-color: var(--c-bleu); box-shadow: inset 0 0 0 1px var(--c-bleu);
  background: var(--c-bleu-doux); color: var(--c-bleu); font-weight: 600;
}
.segments > label:has(:focus-visible){ outline: 2px solid var(--c-bleu); outline-offset: 2px; }
.segments-rouge > label:has(:checked){
  border-color: var(--c-rouge); box-shadow: inset 0 0 0 1px var(--c-rouge);
  background: var(--s-rejet); color: var(--c-rouge);
}
.segments-or > label:has(:checked){
  border-color: var(--c-or); box-shadow: inset 0 0 0 1px var(--c-or);
  background: var(--c-or-doux); color: var(--c-or-encre);
}
/* En lecture : les choix s'estompent, le choix enregistre reste coche. */
.enveloppe:disabled .segments > label{ opacity: .6; border-color: transparent; cursor: default; }
.enveloppe:disabled .segments > label:has(:checked){ opacity: 1; }
/* Grille de niveaux : une rangee de cinq des 46rem, deux rangees avant. */
.segments-niveaux{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segments-niveaux > label{ padding-left: var(--e2); padding-right: var(--e2); }
@media (min-width: 46rem){ .segments-niveaux{ grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* =====================================================================
   PUCES ET CATEGORIES
   Le MOT porte l'etat, la couleur l'appuie, un glyphe double la couleur.
   Cinq teintes douces, en casse normale (plus de capitales espacees :
   "Routine : A verifier" en 17 capitales debordait). Les mots viennent
   des tables PHP (Dossier::PUCES, Decision::PUCES...), le glyphe est
   choisi par la MEME source que la teinte dans `<x-puce>`. UNE seule
   puce pleine dans tout le module : `.puce-urgence`, posee par la seule
   bande d'echeance "passee sans depot".
   ===================================================================== */
.puce{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px;
  border-radius: var(--r-pilule);
  font-size: var(--t-12); font-weight: 600; line-height: 1.5;
  letter-spacing: 0; text-transform: none;
  white-space: nowrap;
}
.puce .ico, .puce-glyphe{ width: 14px; height: 14px; --trait: 2.25; }
.puce.faite  { color: var(--c-vert);  background: var(--s-faite); }
.puce.encours{ color: var(--c-bleu);  background: var(--s-encours); }
.puce.attente{ color: var(--c-ambre); background: var(--s-attente); }
.puce.rejet  { color: var(--c-rouge); background: var(--s-rejet); }
.puce.neutre { color: var(--c-ink-2); background: var(--s-neutre); }
.puce-urgence{ color: #fff; background: var(--c-rouge); }

/* Une CATEGORIE n'est jamais une puce : espace, nature, langue, pays,
   origine, "Hors liste". Sans glyphe, Inter 400, encre tertiaire sur
   le creux. */
.categorie{
  display: inline-flex; align-items: center;
  padding: 2px 10px;
  border-radius: var(--r-pilule);
  font-size: var(--t-12); font-weight: 400; line-height: 1.5;
  color: var(--n-11); background: var(--n-2);
  white-space: nowrap;
}

/* =====================================================================
   LA BANDE D'ECHEANCE : la colonne vertebrale
   Un nombre tabulaire, son mot a cote, une teinte sortie d'une fonction
   PHP unique. Six etats : passee sans depot (rouge, et la seule puce
   pleine), sous 7 jours (ambre, en bloc), sous 30 (encre pleine), plus
   tard (encre-2), inconnue (encre-3, "sans echeance"), fermee (en
   creux, "Marche non poursuivi", jamais un compte a rebours). Trois
   tailles : 44 sur la fiche, 28 au registre, 14 en ligne.
   La classe nue ne porte que la tabulation : les gabarits d'avant la
   refonte posent `echeance` avec leurs propres teintes.
   ===================================================================== */
.echeance{ font-variant-numeric: tabular-nums; }
.echeance-ligne, .echeance-moyenne, .echeance-grande{
  display: inline-flex; align-items: baseline; gap: var(--e2); min-width: 0;
}
.echeance-nombre{ font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.echeance-mot{ font-size: var(--t-14); line-height: 1.3; }
.echeance-ligne .echeance-nombre{ font-size: var(--t-14); }
.echeance-moyenne .echeance-nombre{ font-size: var(--t-28); letter-spacing: -.01em; }
.echeance-grande{ flex-direction: column; align-items: flex-start; gap: var(--e1); }
.echeance-grande .echeance-nombre{ font-size: var(--t-44); letter-spacing: -.02em; }
.echeance-grande .echeance-mot{ font-size: var(--t-16); }
.echeance-passee{ color: var(--c-rouge); }
.echeance-proche{ color: var(--c-ambre); }
.echeance-sous-30{ color: var(--n-12); }
.echeance-loin{ color: var(--c-ink-2); }
.echeance-inconnue{ color: var(--n-11); }
.echeance-fermee{ color: var(--c-ink-2); }
/* Sous 7 jours "en bloc" : la surface ambre entoure la bande. */
.echeance-proche.echeance-bloc{ background: var(--s-attente); padding: var(--e2) var(--e3); border-radius: var(--r-1); }
.echeance-fermee.echeance-bloc{ background: var(--n-2); padding: var(--e2) var(--e3); border-radius: var(--r-1); }

/* =====================================================================
   SURFACES : la feuille (.carte, .section, .tuile), le creux
   Quatre matieres, un seul moyen de separation a la fois (anneau OU
   filet OU espace). La feuille repose, elle ne flotte pas : anneau a
   8 % plus ombre teintee. Jamais une feuille dans une feuille : a
   l'interieur, un titre 18, de l'espace, un filet ou un encart creux.
   ===================================================================== */
.carte{
  background: #fff; border: 0;
  border-radius: var(--r-2);
  box-shadow: var(--o-anneau), var(--o-1);
  padding: var(--e5);
  min-width: 0;
}
.carte > h2:first-child, .carte > h3:first-child, .carte-titre{ font-size: var(--t-18); margin-bottom: var(--e4); }
/* La carte-lien : toute la surface est un <a>, le chevron en bas a
   droite, l'ombre soulevee portee par un ::after en opacite (jamais une
   transition de box-shadow, qui repeint a chaque image). */
.carte-lien{
  position: relative; display: block;
  color: inherit; text-decoration: none;
  transition: transform var(--d-2) var(--e-in);
}
.carte-lien::after, a.tuile::after, a.outil::after{
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: var(--o-2); opacity: 0; pointer-events: none;
  transition: opacity var(--d-2) var(--e-in);
}
@media (hover: hover) and (pointer: fine){
  .carte-lien:hover, a.tuile:hover, a.outil:hover{ transform: translateY(-1px); }
  .carte-lien:hover::after, a.tuile:hover::after, a.outil:hover::after{ opacity: 1; }
}
.carte-chevron, .tuile-chevron{
  position: absolute; right: var(--e4); bottom: var(--e4);
  width: 16px; height: 16px; color: var(--n-8);
}
/* Le creux : ce que la machine a produit, sans champ, sans anneau. */
.carte-creuse{ background: var(--n-2); box-shadow: none; }
/* Une carte qui PORTE un etat : bande de 3 px et surface teintee. */
.carte-etat{ box-shadow: inset 3px 0 0 var(--c-ink-2), var(--o-anneau), var(--o-1); }
.carte-etat.faite  { box-shadow: inset 3px 0 0 var(--c-vert),  var(--o-anneau), var(--o-1); background: var(--s-faite); }
.carte-etat.encours{ box-shadow: inset 3px 0 0 var(--c-bleu),  var(--o-anneau), var(--o-1); background: var(--s-encours); }
.carte-etat.attente{ box-shadow: inset 3px 0 0 var(--c-ambre), var(--o-anneau), var(--o-1); background: var(--s-attente); }
.carte-etat.rejet  { box-shadow: inset 3px 0 0 var(--c-rouge), var(--o-anneau), var(--o-1); background: var(--s-rejet); }
.carte-etat.neutre { box-shadow: inset 3px 0 0 var(--n-7),     var(--o-anneau), var(--o-1); background: var(--s-neutre); }
@media (max-width: 40rem){ .carte, .section{ padding: 20px; } }

/* La section : la brique de page d'avant la refonte, meme feuille. Le
   rythme entre deux sections est de 48 (32 sous 40rem). */
.section{
  background: #fff; border: 0;
  border-radius: var(--r-2);
  box-shadow: var(--o-anneau), var(--o-1);
  padding: var(--e5);
  margin-bottom: var(--e4);
  min-width: 0;
}
.section + .section{ margin-top: var(--e7); }
.grille > .section{ margin-top: 0; }
@media (max-width: 40rem){ .section + .section{ margin-top: var(--e6); } }
.section > h2{ font-size: var(--t-20); margin-bottom: var(--e4); }
.section > h2 + .aide{ margin-top: calc(var(--e4) * -1 + var(--e1)); margin-bottom: var(--e4); }

/* L'encart creux dans une feuille : ce que la machine a produit. */
.encart{ background: var(--n-2); border-radius: var(--r-1); padding: var(--e3) var(--e4); }

/* --- Les tuiles : la rangee d'attention ---------------------------------
   Trois rangees fixes (icone 20 + libelle avec un verbe sur UNE ligne /
   chiffre 44 tabulaire sur une ligne de base commune / contexte vrai
   "7 sur 23 lignes"), lien sur toute la surface, chevron interne.
   `.tuile-pleine` est le sceau : UNE par ecran, en haut a gauche, la
   seule a afficher un zero ("Rien a decider"). `.tuile-alerte` porte
   la seule `.puce-urgence`, bande et puce seulement si le compte est
   non nul. Zero masque ailleurs : la tuile dit "Aucune". Pas une
   tendance, pas une variation : un appel d'offres n'a pas de mois
   dernier. */
.tuiles{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
@media (min-width: 52rem){ .tuiles{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tuile{
  position: relative; min-width: 0;
  display: grid; grid-template-rows: 20px auto auto; row-gap: var(--e3); align-content: start;
  padding: var(--e5);
  background: #fff; border-radius: var(--r-2);
  box-shadow: var(--o-anneau), var(--o-1);
  color: inherit; text-decoration: none;
  transition: transform var(--d-2) var(--e-in);
  /* L'encre des petits textes de la tuile est PORTEE PAR LA SURFACE, pas
     par chaque classe : le contexte et son alias `.quoi` lisent
     --tuile-encre-3, la phrase du zero lit --tuile-encre-2, et
     `.tuile-pleine` redefinit les deux pour le marine. Un alias oublie
     ne peut plus retomber sur l'encre du blanc (le contexte du sceau du
     registre l'a fait : --n-11 sur marine, 3,3:1, revue du 03/10/2026).
     Ce sont des proprietes de la tuile, lues sous elle seule : aucun
     gabarit n'en depend hors d'une `.tuile`. */
  --tuile-encre-3: var(--n-11);
  --tuile-encre-2: var(--c-ink-2);
}
@media (max-width: 40rem){ .tuile{ padding: 20px; } }
.tuile-libelle{
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t-14); font-weight: 600; color: var(--c-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tuile .ico{ color: var(--n-8); }
.tuile-chiffre, .tuile .valeur{
  display: block;
  font-family: var(--f-texte); font-weight: 600; font-size: var(--t-44);
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: var(--n-12);
}
.tuile-contexte, .tuile .quoi{ display: block; font-size: var(--t-13); color: var(--tuile-encre-3); }
/* "Aucune" a la place du zero, en 14, sur une ligne de la hauteur du
   chiffre (44) : les tuiles d'une rangee gardent leur contexte au meme
   niveau, qu'elles comptent quelque chose ou non (38 px avant le
   03/10/2026, mesure sur le tableau de bord). */
.tuile-aucune{ display: block; font-size: var(--t-14); color: var(--tuile-encre-2); line-height: var(--t-44); padding: 0; }
.tuile-pleine{
  background: var(--g-sceau); color: #fff;
  box-shadow: none;
  padding: var(--e6) var(--e5);
  /* La table d'encre du sceau (SYSTEME-V2 section 1) : .72 pour le
     tertiaire ; la phrase du zero y prend la meme valeur. */
  --tuile-encre-3: rgba(255,255,255,.72);
  --tuile-encre-2: rgba(255,255,255,.72);
}
.tuile-pleine .tuile-libelle{ color: rgba(255,255,255,.82); }
.tuile-pleine .ico, .tuile-pleine .tuile-chevron{ color: rgba(255,255,255,.82); }
.tuile-pleine .tuile-chiffre, .tuile-pleine .valeur{ color: var(--c-or-marque); }
/* Le contexte et la phrase du zero du sceau ne sont plus repeints ici,
   classe par classe : `.tuile-pleine` redefinit --tuile-encre-3 et
   --tuile-encre-2 (ci-dessus), que `.tuile-contexte`, son alias `.quoi`
   et `.tuile-aucune` lisent tous. */
.tuile-pleine:focus-visible{ outline-color: #fff; }
.tuile-alerte{ box-shadow: inset 3px 0 0 var(--c-rouge), var(--o-anneau), var(--o-1); }
.tuile-alerte .tuile-chiffre{ color: var(--c-rouge); }
.tuile-alerte .puce-urgence{ position: absolute; top: var(--e4); right: var(--e4); }

/* --- L'etat vide, en trois formes ------------------------------------------
   Feuille, aligne a gauche, titre en positif (18), une phrase (48ch),
   une action, aucune illustration, aucun squelette, plus jamais de
   bordure tiretee. `.vide-filtre` : "Rien sous ce filtre", le compte
   total ecrit, "Tout effacer" en lien-bouton. `.etat-ferme` : bordure
   pleine --n-7, cadenas, puce neutre "Non ouvert a ce cabinet", la
   phrase qui nomme le seul geste possible, un bouton plein. */
.vide{
  text-align: left;
  padding: var(--e6) var(--e5);
  background: #fff; border: 0;
  border-radius: var(--r-2);
  box-shadow: var(--o-anneau), var(--o-1);
}
.vide h2{ font-family: var(--f-texte); font-size: var(--t-18); }
.vide p{ margin: var(--e2) 0 var(--e5); max-width: 48ch; color: var(--c-ink-2); }
.vide .action, .vide .action-calme{ display: inline-flex; width: auto; }
.vide-filtre .vide-total{ font-size: var(--t-14); color: var(--n-11); }
.etat-ferme{
  padding: var(--e6) var(--e5);
  background: #fff;
  border: 1px solid var(--n-7);
  border-radius: var(--r-2);
}
.etat-ferme-tete{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-bottom: var(--e3); }
/* Enfant DIRECT : un selecteur descendant attrapait aussi le glyphe de la
   puce posee dans la meme tete et le passait a 24 px. */
.etat-ferme-tete > .ico{ width: 24px; height: 24px; color: var(--n-8); }
.etat-ferme h2{ font-size: var(--t-18); }
.etat-ferme p{ margin: 0 0 var(--e5); max-width: 48ch; color: var(--c-ink-2); }
.etat-ferme .action, .etat-ferme .action-calme{ display: inline-flex; width: auto; }

/* --- La grille a deux colonnes du contenu --------------------------------- */
.grille{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
.grille > *{ min-width: 0; }
/* Une grille de CHAMPS : l'ecart entre deux rangees vient de la grille
   (24), et la marge basse du champ ne s'y ajoute plus (24 + 16 = 40,
   mesure sur nouveau et sur l'offre financiere le 03/10/2026). */
.grille:has(> .champ){ row-gap: var(--e5); }
.grille > .champ{ margin-bottom: 0; }
@media (min-width: 40rem){ .grille{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .grille .large{ grid-column: 1 / -1; } }
/* Deux tiers et un tiers, des 64rem : la lecture a gauche, les reperes
   a droite. */
.grille-deux-tiers{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e5); align-items: start; }
.grille-deux-tiers > *{ min-width: 0; }
@media (min-width: 64rem){ .grille-deux-tiers{ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

/* Une liste de couples (identite d'un marche) : <dl> deux colonnes. */
.couples{ display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e2) var(--e4); margin: 0; font-size: var(--t-14); }
.couples dt{ color: var(--n-11); }
.couples dd{ margin: 0; color: var(--n-12); overflow-wrap: anywhere; }
@media (max-width: 30rem){ .couples{ grid-template-columns: minmax(0, 1fr); gap: 0; } .couples dd{ margin-bottom: var(--e2); } }

/* =====================================================================
   L'EN-TETE DE PAGE : <x-entete-de-page>
   Fil (segments bleus, dernier sans lien), UN h1 Playfair, 1 a 3
   badges, 1 a 4 couples de metadonnees, une primaire et des calmes a
   droite. Sous 48rem tout s'empile, la primaire pleine largeur en
   premiere rangee, le segment du milieu du fil tronque (jamais le
   dernier). Il remplace `.tete`, `.sous`, `.retour`, definis quatre
   fois differemment dans les ecrans.
   ===================================================================== */
.entete{
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e3) var(--e5); align-items: start;
  margin-bottom: var(--e6);
}
/* LE FIL EST DANS UN <nav> (repere de navigation) : c'est le NAV qui est
   l'enfant de la grille, pas la liste. Une regle de placement posee sur
   `.entete-fil` est donc inerte : le nav tombait en colonne 1 et le h1
   montait a sa droite des 48rem (mesure a 1440 par huit ecrans, chacun
   l'ayant corrige chez lui le 03/10/2026). */
.entete > nav{ grid-column: 1 / -1; grid-row: 1; }
.entete-fil{
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e2);
  margin: 0; padding: 0; list-style: none;
  font-size: var(--t-13); color: var(--n-11); line-height: 1.4;
}
.entete-fil li{ display: inline-flex; align-items: center; gap: var(--e2); min-width: 0; }
/* Le chevron du fil, en encre tertiaire : il separe, il ne mene nulle part. */
.entete-fil li + li::before{ content: '\203A'; color: var(--n-11); }
/* Un segment est une cible de 44 px sans gonfler la ligne : les marges
   negatives rendent la place que le padding prend. */
.entete-fil a{
  display: inline-flex; align-items: center; min-height: 44px;
  margin: -12px 0; padding: 0 2px;
  color: var(--c-bleu); text-decoration: none; min-width: 0;
}
@media (hover: hover) and (pointer: fine){ .entete-fil a:hover{ text-decoration: underline; } }
.entete-fil li:last-child{ color: var(--c-ink-2); }
.entete-titre{ min-width: 0; }
.entete h1{ font-size: var(--t-28); }
.entete-grand h1{ font-size: var(--t-34); }
.entete .sous{ margin: var(--e2) 0 0; color: var(--c-ink-2); max-width: 60ch; }
.entete-badges{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-top: var(--e2); }
.entete-meta{
  display: flex; flex-wrap: wrap; gap: var(--e1) var(--e5);
  margin: var(--e3) 0 0; font-size: var(--t-14);
}
.entete-meta > div{ display: flex; gap: var(--e1); min-width: 0; }
.entete-meta dt{ color: var(--n-11); }
.entete-meta dt::after{ content: ' :'; }
.entete-meta dd{ margin: 0; color: var(--n-12); font-weight: 600; overflow-wrap: anywhere; }
.entete-actions{
  grid-column: 2; grid-row: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: var(--e3);
}
.entete-actions .action, .entete-actions .action-calme, .entete-actions .action-engage{ width: auto; }
/* Sans fil, l'en-tete n'a qu'une rangee de titre : la primaire se pose au
   niveau du h1, pas sous le sous-titre. Au telephone, la regle du palier
   garde la primaire en premiere rangee. */
@media (min-width: 48.0625rem){ .entete:not(:has(> nav)) .entete-actions{ grid-row: 1; align-self: start; } }
@media (max-width: 48rem){
  .entete{ grid-template-columns: minmax(0, 1fr); gap: var(--e3); margin-bottom: var(--e5); }
  .entete-actions{ grid-column: 1; grid-row: 2; flex-direction: column; align-items: stretch; }
  .entete-titre{ grid-row: 3; }
  .entete-actions .action, .entete-actions .action-calme, .entete-actions .action-engage{ width: 100%; }
  .entete-fil li:not(:first-child):not(:last-child){ max-width: 12ch; }
  .entete-fil li:not(:first-child):not(:last-child) a{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* =====================================================================
   LA CARTE "PROCHAINE ETAPE" : <x-prochaine-etape>
   Bande gauche 3 px bleue (or quand c'est la decision), etiquette 13,
   h2 Playfair 24, phrase de 60ch, UN bouton, "Pourquoi cette etape ?".
   Alimentee par App\Services\ProchaineEtape : elle LIT l'etat, elle ne
   decide rien.
   ===================================================================== */
.prochaine-etape{
  padding: var(--e5) var(--e5) var(--e5) calc(var(--e5) + 3px);
  background: #fff; border-radius: var(--r-2);
  box-shadow: inset 3px 0 0 var(--c-bleu), var(--o-anneau), var(--o-1);
  min-width: 0;
}
/* Au telephone, le padding des feuilles (20 et non 24, comme `.carte`) :
   "Consulter le dossier assemble" tient alors sur une ligne a 375. */
@media (max-width: 40rem){ .prochaine-etape{ padding: 20px 20px 20px 23px; } }
.prochaine-etape-decision{ box-shadow: inset 3px 0 0 var(--c-or), var(--o-anneau), var(--o-1); }
.prochaine-etape-quoi{ margin: 0; font-size: var(--t-13); font-weight: 600; color: var(--n-11); }
.prochaine-etape h2{ font-family: var(--f-titre); font-size: var(--t-24); line-height: 1.15; margin-top: var(--e1); }
.prochaine-etape-texte{ margin: var(--e3) 0 0; max-width: 60ch; color: var(--c-ink-2); }
.prochaine-etape-geste{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-top: var(--e4); }
.prochaine-etape-geste .action, .prochaine-etape-geste .action-engage, .prochaine-etape-geste .action-calme{ width: auto; min-width: 14rem; }
@media (max-width: 30rem){
  .prochaine-etape-geste .action, .prochaine-etape-geste .action-engage, .prochaine-etape-geste .action-calme{ width: 100%; }
}

/* =====================================================================
   LA LISTE DE TACHES .taches / .tache (GOV.UK)
   Une ligne par chose a faire : icone propre, nom 16, statut en puce,
   compte tabulaire, 48 px, separateur --n-6, ligne entiere <a>, compte
   "X sur Y" en tete. Etats : faite (encre pleine), en cours, a faire
   (encre-2), impossible pour l'instant (<span>, raison en 13), perimee
   (bande rouge), designee par la prochaine etape (bande bleue).
   ===================================================================== */
.taches{ list-style: none; margin: 0; padding: 0; }
.taches-tete{ display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); margin-bottom: var(--e2); }
.taches-compte{ font-weight: 600; font-size: var(--t-14); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.tache{ border-top: 1px solid var(--n-6); }
.tache:first-child{ border-top: 0; }
.tache-ligne{
  position: relative;
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--e3);
  min-height: 48px; padding: var(--e2) var(--e3);
  border-radius: var(--r-1);
  color: var(--n-12); text-decoration: none;
}
.tache-ligne .ico{ color: var(--n-8); }
.tache-nom{ font-size: var(--t-16); min-width: 0; }
.tache-raison{ display: block; font-size: var(--t-13); color: var(--c-ink-2); }
.tache-compte{ font-size: var(--t-14); color: var(--c-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) and (pointer: fine){ a.tache-ligne:hover{ background: var(--n-3); } }
.tache-a-faire .tache-nom, .tache-impossible .tache-nom{ color: var(--c-ink-2); }
.tache-perimee .tache-ligne{ box-shadow: inset 3px 0 0 var(--c-rouge); }
.tache-designee .tache-ligne{ box-shadow: inset 3px 0 0 var(--c-bleu); background: var(--n-2); }
@media (max-width: 30rem){
  .tache-ligne{ grid-template-columns: 24px minmax(0, 1fr); row-gap: var(--e1); }
  .tache-ligne .puce, .tache-compte{ grid-column: 2; justify-self: start; }
}

/* =====================================================================
   LA PROGRESSION D'UN PARCOURS .progression / .prog-pas
   Repond a "ou en suis-je" sans un mot de plus que les noms d'etapes.
   Les pas sont NUMEROTES parce que le contenu EST une sequence, et
   chaque pas est un lien vers sa section. 4, 5 ou 6 pas en une rangee,
   2 colonnes sous 40rem (jamais une bande qui defile : une progression
   se lit d'un coup d'oeil). Etats : faite (rang plein marine, coche
   blanche), courante (fond --n-4, trait bleu, rang borde bleu,
   `aria-current="step"`), a venir (rang creux, encre-3), erreur (rang
   ambre apres un refus), fermee (rang barre, opacite .6, sans lien).
   Les anciens noms `prog-fini`, `prog-encours`, `prog-saute` restent.
   ===================================================================== */
.progression{
  list-style: none; margin: 0 0 var(--e5); padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2);
  counter-reset: prog;
}
.progression.progression-cinq{ grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 0; }
.progression.progression-six{ grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 0; }
.prog-pas{ min-width: 0; }
.prog-pas a, .prog-pas .prog-boite{
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 0 var(--e3); min-height: 56px; height: 100%;
  padding: var(--e2) var(--e3);
  background: #fff; border-radius: var(--r-1);
  box-shadow: var(--o-anneau);
  color: var(--c-ink-2); text-decoration: none; line-height: 1.25;
}
@media (hover: hover) and (pointer: fine){ .prog-pas a:hover{ background: var(--n-3); } }
/* Le rang : 28 px rond, Inter 600 tabulaire ; creux et encre-3 tant que
   le pas est a venir. */
.prog-pas a::before, .prog-pas .prog-boite::before{
  counter-increment: prog; content: counter(prog);
  grid-row: span 2;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: var(--t-13); font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--n-11); background: #fff; box-shadow: inset 0 0 0 1px var(--n-7);
}
.prog-nom{ font-size: var(--t-14); font-weight: 600; color: var(--n-12); min-width: 0; }
.prog-compte{ font-size: var(--t-12); color: var(--n-11); font-variant-numeric: tabular-nums; }
/* Courante : fond, trait bleu, rang borde bleu 2 px. */
.prog-pas.prog-courante a, .prog-pas.prog-courante .prog-boite,
.prog-pas.prog-encours a, .prog-pas.prog-encours .prog-boite{
  background: var(--n-4); box-shadow: inset 3px 0 0 var(--c-bleu), var(--o-anneau);
}
.prog-pas.prog-courante a::before, .prog-pas.prog-courante .prog-boite::before,
.prog-pas.prog-encours a::before, .prog-pas.prog-encours .prog-boite::before{
  color: var(--c-bleu); box-shadow: inset 0 0 0 2px var(--c-bleu);
}
/* Faite : le rang plein marine, la coche remplace le numero. */
.prog-pas.prog-faite a::before, .prog-pas.prog-faite .prog-boite::before,
.prog-pas.prog-fini a::before, .prog-pas.prog-fini .prog-boite::before{
  content: '\2713'; color: #fff; background: var(--n-9); box-shadow: none;
}
.prog-pas.prog-faite .prog-compte, .prog-pas.prog-fini .prog-compte{ color: var(--c-vert); }
/* Erreur : un rang ambre, apres un refus. */
.prog-pas.prog-erreur a::before, .prog-pas.prog-erreur .prog-boite::before{
  content: '!'; color: var(--c-ambre); box-shadow: inset 0 0 0 2px var(--c-ambre);
}
/* Fermee par une regle (No Go) : le pas existe, il ne s'applique pas. */
.prog-pas.prog-fermee a, .prog-pas.prog-fermee .prog-boite,
.prog-pas.prog-saute a, .prog-pas.prog-saute .prog-boite{ background: var(--n-2); box-shadow: none; opacity: .6; }
.prog-pas.prog-fermee .prog-nom, .prog-pas.prog-saute .prog-nom{
  color: var(--c-ink-2); text-decoration: line-through; text-decoration-color: var(--n-11);
}
.prog-pas.prog-fermee a::before, .prog-pas.prog-saute a::before,
.prog-pas.prog-fermee .prog-boite::before, .prog-pas.prog-saute .prog-boite::before{ text-decoration: line-through; }
/* Une etape sans lien n'est pas encore ouverte : meme boite, sans survol. */
.prog-pas .prog-boite{ color: var(--n-11); }

@media (max-width: 64rem){ .progression.progression-cinq, .progression.progression-six{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem){
  .progression, .progression.progression-cinq, .progression.progression-six{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progression.progression-cinq .prog-pas:last-child{ grid-column: 1 / -1; }
}

/* Une section dont le titre porte son rang dans la sequence. */
.section-rang{
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  margin-right: var(--e2); vertical-align: 3px; border-radius: 50%;
  font-size: var(--t-13); font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--n-9); background: var(--n-2);
}

/* =====================================================================
   CE QUI BLOQUERA L'ENREGISTREMENT, dit AVANT le clic : .verif
   Le module n'a ni bouton grise ni boite de dialogue. La liste dit,
   ligne par ligne, ce que la base refusera, et chaque ligne mene au
   champ qui la leve. Elle n'empeche rien : la base reste seule juge.
   `.verif-prevenir` (bande ambre, cadenas) pour la liste PREVENTIVE de
   la fiche ; `.refus` reste reserve aux refus reels.
   ===================================================================== */
.verif{ margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e2); }
.verif-ligne{
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--e3); align-items: start;
  padding: var(--e3) var(--e4); border-radius: var(--r-1);
  background: var(--n-2); font-size: var(--t-15); color: var(--n-12);
}
/* Le repere : un anneau ambre tant que la regle bloque, une coche verte
   quand elle est levee. Un glyphe du jeu pose dans la ligne le
   remplace. */
.verif-ligne::before{
  content: ''; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  border: 2px solid var(--c-ambre); box-sizing: border-box;
}
.verif-ligne:has(> .ico)::before{ display: none; }
.verif-ligne > .ico{ width: 22px; height: 22px; color: var(--c-ambre); margin-top: 1px; }
.verif-ligne a{ color: var(--n-12); }
.verif-ligne.verif-ok{ background: transparent; color: var(--c-ink-2); }
.verif-ligne.verif-ok::before{
  content: '\2713'; border: 0; background: var(--c-vert); color: #fff;
  font-size: var(--t-13); font-weight: 600; line-height: 22px; text-align: center;
}
.verif-ligne.verif-ok > .ico{ color: var(--c-vert); }
.verif-ligne .verif-etat{ display: block; font-size: var(--t-13); color: var(--c-ink-2); }
.verif-ligne.verif-ok .verif-etat{ color: var(--c-vert); }
.verif-prevenir{
  padding: var(--e4) var(--e4) var(--e4) calc(var(--e4) + 4px);
  background: var(--s-attente); border-radius: var(--r-2);
  box-shadow: inset 4px 0 0 var(--c-ambre);
  color: var(--n-12);
}
.verif-prevenir .ico{ color: var(--c-ambre); }
.verif-prevenir .verif-ligne{ background: #fff; }

/* =====================================================================
   LA BARRE DE SUIVI .suivi : la seconde vitre
   Collee en bas d'un ecran de saisie qui fait plusieurs hauteurs : ce
   que la saisie PRODUIT reste sous les yeux. Verre, filet haut, ombre
   vers le haut, encre pleine et secondaire, chiffres tabulaires 28, UN
   relais vers le bouton (or si c'est la decision). Deux rangees sous
   30rem, coins hauts arrondis des 64rem. Absente pour le lecteur et a
   l'impression. JAMAIS sur un ecran qui porte une tuile pleine.
   ===================================================================== */
.suivi{
  position: sticky; bottom: 0; z-index: 20;
  margin: var(--e5) calc(var(--gouttiere) * -1) calc((var(--e8) + env(safe-area-inset-bottom)) * -1);
  padding: var(--e3) var(--gouttiere) calc(var(--e3) + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4);
  background: var(--verre);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  color: var(--n-12);
  border-top: 1px solid var(--n-6);
  box-shadow: var(--o-haut);
}
@media (max-width: 60rem){
  .suivi{ -webkit-backdrop-filter: var(--verre-flou-mobile); backdrop-filter: var(--verre-flou-mobile); }
}
@media (min-width: 64rem){
  .suivi{ margin-left: 0; margin-right: 0; padding-left: var(--e5); padding-right: var(--e5); border-radius: var(--r-2) var(--r-2) 0 0; }
}
.suivi-score{ display: flex; align-items: baseline; gap: 4px; }
/* Le score change par fondu, jamais par deplacement de texte. */
.suivi-score .chiffre{ font-size: var(--t-28); line-height: 1; letter-spacing: -.01em; transition: opacity var(--d-2) var(--e-in); }
.suivi-score .suivi-sur{ font-size: var(--t-13); color: var(--c-ink-2); }
.suivi-bande{ font-weight: 600; font-size: var(--t-15); }
.suivi-reste{ font-size: var(--t-14); color: var(--c-ink-2); }
.suivi-total{ font-weight: 600; font-variant-numeric: tabular-nums; }
/* Le relais : UN lien vers le bouton, en or (decision) ou bleu. */
.suivi a, .suivi .suivi-relais{
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 44px; padding: 0 var(--e4); border-radius: var(--r-1);
  color: var(--n-10); background: var(--c-or);
  font-weight: 600; font-size: var(--t-14); text-decoration: none;
}
.suivi a.action, .suivi .action{ color: #fff; background: var(--c-bleu); width: auto; }
@media (hover: hover) and (pointer: fine){
  .suivi a:hover{ background: var(--c-or-survol); }
  .suivi a.action:hover{ background: var(--c-bleu-survol); }
}
.suivi a:focus-visible{ outline-color: var(--n-10); }
/* Au telephone, DEUX rangees et pas trois : ce qui est produit en haut,
   ce qui reste a faire et le geste en bas. Mesure a 375 px : trois
   rangees prenaient pres d'un quart de l'ecran. */
@media (max-width: 30rem){
  .suivi{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e1) var(--e3); }
  .suivi-bande{ font-size: var(--t-14); line-height: 1.3; }
  .suivi-reste{ font-size: var(--t-13); align-self: center; }
  .suivi a, .suivi .suivi-relais{ margin-left: 0; justify-self: end; padding: 0 var(--e3); }
  .suivi-score .chiffre{ font-size: var(--t-24); }
}

/* =====================================================================
   L'EXPLICATION SECONDAIRE : <x-aide> et <x-pourquoi>
   L'ecran explique par sa FORME ; le texte ne porte que ce qu'on ne peut
   pas montrer, et le reste se demande.
   ===================================================================== */
.infobulle{ position: relative; display: inline-flex; vertical-align: middle; }
/* Le "?" : 18 px, Inter 600, encre tertiaire sur le creux. */
.infobulle-appel{
  width: 18px; height: 18px; padding: 0; margin: 0 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1;
  color: var(--n-11); background: var(--n-2);
  border: 0; border-radius: 50%;
  cursor: help;
}
/* LA ZONE VISEE FAIT 44 px, le rond en fait 18 : un point d'interrogation
   de 18 px ne se touche pas au doigt, et l'agrandir abimerait la ligne. */
.infobulle-appel::after{ content: ''; position: absolute; inset: -13px; }
@media (hover: hover) and (pointer: fine){ .infobulle-appel:hover{ color: var(--c-bleu); background: var(--c-bleu-doux); } }
.infobulle-appel:focus-visible{ outline: 2px solid var(--c-bleu); outline-offset: 2px; }

/* LA BULLE AU REPOS NE PREND AUCUNE PLACE, ET C'EST LA REGLE QUI COMPTE.
   /!\ `visibility: hidden` la masquait et elle etait TOUJOURS disposee :
   cinq ecrans sur six debordaient a 375 px a cause de bulles que
   personne ne voyait. La forme ci-dessous est celle du texte reserve aux
   lecteurs d'ecran : un pixel, decoupe, dans l'arbre d'accessibilite.
   Opaque (--n-10), jamais en verre : c'est du texte de lecture. */
.infobulle-texte{
  position: absolute; left: -8px; top: calc(100% + 8px); z-index: 60;
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  padding: var(--e3) var(--e4);
  font-size: var(--t-13); font-weight: 400; line-height: 1.55; text-align: left;
  color: #fff; background: var(--n-10); border-radius: var(--r-2);
  box-shadow: var(--o-3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-1) var(--e-in);
}
/* `:focus` ET NON `:focus-visible` POUR REVELER LA BULLE : `:focus-visible`
   ne s'applique pas a un appui du DOIGT, et sur telephone la bulle
   n'aurait jamais paru. */
.infobulle-appel:hover + .infobulle-texte,
.infobulle-appel:focus + .infobulle-texte{
  width: max-content; height: auto; overflow: visible; clip-path: none;
  max-width: min(42ch, calc(100vw - 2rem));
  /* La bulle fixe son propre retour a la ligne : un hote en `nowrap`
     (compte colle a son "?") le lui transmettait, et `max-width` borne
     la boite, pas le texte, qui sortait alors de 490 px. */
  white-space: normal;
  opacity: 1;
}
/* Pres du bord droit, la bulle s'ancre a droite. */
.infobulle.a-gauche .infobulle-texte{ left: auto; right: -8px; }
@media (prefers-reduced-motion: reduce){ .infobulle-texte{ transition: none; } }

/* AU TELEPHONE ET AU DOIGT, LA BULLE OUVERTE SE POSE EN BAS DE L'ECRAN.
   Ancree au "?" (left: -8px) et large de 343 px a 375, elle sortait de
   l'ecran des que le "?" etait a plus de 24 px du bord gauche. MESURE le
   03/10/2026 a 375 px, bulle ouverte par le focus : 60 px coupes au
   filtre du registre, de 28 a 296 px sur la fiche d'un dossier, l'avis,
   l'ouverture, les pieces, la bibliotheque et l'offre (33 des 47 bulles
   mesurees sur neuf ecrans). Les captures au repos ne le voyaient pas : la bulle y est
   decoupee a 1 px.
   Le CSS ne connait pas la place du "?" dans sa ligne, et `.a-gauche`
   juste a une largeur est faux a une autre : seule une position fixe
   rend la bulle entiere ou que tombe le doigt. Centree, au-dessus de la
   barre de suivi (palier 60 contre 20), refermee au toucher suivant.
   `top: auto` ne suffirait pas : CSS 2.1 (10.3.7) calcule la place
   statique d'une boite fixe comme si la page n'etait PAS defilee, la
   bulle d'un "?" place sous le premier pan sortirait par le bas. D'ou
   `bottom`, explicite.
   /!\ `transform`, `filter`, `backdrop-filter` ou `container-type` sur un
   ancetre en font le bloc conteneur de la bulle : aucun "?" dans une
   vitre (.barre, .suivi) ni dans une boite a `container-type`. */
@media (max-width: 48rem), (hover: none), (pointer: coarse){
  .infobulle-appel:hover + .infobulle-texte,
  .infobulle-appel:focus + .infobulle-texte{
    position: fixed; top: auto; left: 0; right: 0;
    bottom: calc(var(--e4) + env(safe-area-inset-bottom));
    margin-inline: auto;
    max-width: min(42ch, calc(100vw - 2 * var(--gouttiere)));
  }
}

/* Le depliant "Pourquoi ?" : le guide qu'on deplie quand on en a
   besoin, sous chaque chiffre calcule. */
.pourquoi{ margin-top: var(--e2); }
.pourquoi > summary{
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  cursor: pointer;
  font-size: var(--t-13); font-weight: 600; color: var(--c-bleu);
  list-style: none;
}
.pourquoi > summary::-webkit-details-marker{ display: none; }
.pourquoi > summary::before{
  content: '?';
  display: grid; place-items: center;
  width: 16px; height: 16px;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: 11px; font-weight: 600; line-height: 1;
}
@media (hover: hover) and (pointer: fine){ .pourquoi > summary:hover{ text-decoration: underline; } }
.pourquoi .dedans-pourquoi{
  margin-top: var(--e2);
  padding: var(--e3) var(--e4);
  background: var(--n-2);
  border-left: 2px solid var(--n-6);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  font-size: var(--t-14); color: var(--c-ink-2);
}
.pourquoi .dedans-pourquoi p{ margin: 0 0 var(--e2); }
.pourquoi .dedans-pourquoi p:last-child{ margin-bottom: 0; }

/* =====================================================================
   TABLEAUX .table / .table-boite
   Lignes 48, padding 12 16, texte a gauche, `.num` a droite tabulaire,
   en-tete collant sur le creux avec filet --n-7, un seul separateur,
   aucune ligne verticale, pas de zebrure, survol souris seule. Une table
   defile dans sa propre boite (`min-width: 0`, `overscroll-behavior-x:
   contain`), premiere colonne collante au telephone.
   ===================================================================== */
table{ width: 100%; border-collapse: collapse; font-size: var(--t-14); line-height: 1.4; }
th{
  text-align: left; font-weight: 600; color: var(--c-ink-2); font-size: var(--t-13);
  padding: var(--e3) var(--e4);
  background: var(--n-2); border-bottom: 1px solid var(--n-7);
}
/* L'en-tete ne colle que dans sa boite : hors d'un cadre qui defile, un
   `th` collant glisserait SOUS la barre en verre et s'y lirait en
   fantome. */
.table-boite th{ position: sticky; top: 0; }
td{ padding: var(--e3) var(--e4); border-bottom: 1px solid var(--n-6); vertical-align: top; }
tr{ height: 48px; }
tr:last-child td{ border-bottom: 0; }
td.chiffre, th.chiffre, .num, td.num, th.num{ text-align: right; font-variant-numeric: tabular-nums; }
td.coupe{ max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table{ width: 100%; }
@media (hover: hover) and (pointer: fine){ .table tbody tr:hover td{ background: var(--n-3); } }
.table-boite{
  min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
  background: #fff; border-radius: var(--r-2);
  box-shadow: var(--o-anneau), var(--o-1);
}
.table-boite table{ margin: 0; }
@media (max-width: 40rem){
  .table-boite th:first-child, .table-boite td:first-child{
    position: sticky; left: 0; z-index: 1; background: #fff;
    box-shadow: 1px 0 0 var(--n-6);
  }
  .table-boite th:first-child{ background: var(--n-2); z-index: 2; }
}

/* =====================================================================
   LA PAGINATION (composants/pagination.blade.php)
   Trois liens et un compte, pas une rangee de numeros : sur un
   telephone, neuf numeros tiennent mal et se visent mal.
   ===================================================================== */
.pagination{
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  margin-top: var(--e5); font-size: var(--t-14);
}
.pagination a, .pagination .pas-de-page{
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e4);
  border-radius: var(--r-1); white-space: nowrap;
}
.pagination a{ color: var(--c-bleu); background: #fff; border: 1px solid var(--n-7); text-decoration: none; }
@media (hover: hover) and (pointer: fine){ .pagination a:hover{ background: var(--c-bleu-doux); } }
.pagination .pas-de-page{ color: var(--n-11); }
.pagination .ou{ color: var(--c-ink-2); font-size: var(--t-13); font-variant-numeric: tabular-nums; text-align: center; }

/* =====================================================================
   LE LANCEUR D'OUTILS .outils / .outil (forme testee : le bloc commence
   par <div class="outils">, chaque carte commence par `outil`, premier
   enfant <span class="nom">)
   Grille 4 / 2 / 1 fixe (jamais une carte orpheline), cartes-liens,
   icone apres le nom, barre d'avancement 6 px avec le chiffre ecrit pour
   un outil en preparation, `#i-sortant` sur les seules cartes externes,
   carte fermee en <div> avec puce neutre "Non ouvert a ce cabinet".
   ===================================================================== */
.outils{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e4); }
@media (max-width: 64rem){ .outils{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem){ .outils{ grid-template-columns: minmax(0, 1fr); } }
.outil{
  position: relative; min-width: 0;
  display: grid; gap: var(--e2); align-content: start;
  padding: var(--e5);
  background: #fff; border-radius: var(--r-2);
  box-shadow: var(--o-anneau), var(--o-1);
  color: inherit; text-decoration: none;
  transition: transform var(--d-2) var(--e-in);
}
.outil .nom{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); font-size: var(--t-18); font-weight: 600; color: var(--n-12); }
.outil .nom .ico{ color: var(--n-8); }
.outil .quoi{ font-size: var(--t-14); color: var(--c-ink-2); }
.outil .ou{ display: flex; align-items: center; gap: var(--e1); font-size: var(--t-13); color: var(--n-11); overflow-wrap: anywhere; }
.outil .ou .ico{ width: 14px; height: 14px; }
/* L'avancement d'un outil en preparation : la barre ET le chiffre, parce
   que personne ne mesure un huitieme de largeur a l'oeil. */
.outil-avancement{ display: flex; align-items: center; gap: var(--e2); font-size: var(--t-13); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.outil-jauge{ flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--n-5); overflow: hidden; }
.outil-jauge > span{ display: block; height: 100%; background: var(--c-bleu); border-radius: 3px; }
/* En retrait : l'outil pas encore ouvert ou non ouvert a ce cabinet.
   Toujours affiche, jamais un lien mort. */
.outil-prepare, .outil-ferme{ background: var(--n-2); box-shadow: none; }
.outil-prepare .nom, .outil-ferme .nom{ color: var(--c-ink-2); }

/* =====================================================================
   L'ASSISTANCE IA (03/10/2026)
   Le parti pris : la machine propose DANS le champ de l'humain, la preuve
   reste DANS LE CREUX. Une valeur proposee se reconnait a une bande ambre
   de 3 px et a la puce « Propose par l'IA » (a confirmer : ambre, comme
   tout ce qui attend quelqu'un) ; un drapeau que l'IA signale porte la
   bande rouge et n'est JAMAIS coche a la place de l'humain. Les preuves
   se lisent a leur sigle en chasse fixe (.reference) et a leur statut de
   verification, pose par le serveur ; l'extrait se deplie.
   ===================================================================== */
.preuves{ list-style: none; margin: var(--e1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e3); }
.preuves > li{ min-width: 0; }
.preuves > li:has(> .preuve[open]){ flex-basis: 100%; }
.preuve > summary{
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px var(--e2);
  min-height: 44px; cursor: pointer; list-style: none;
  color: var(--n-9);
}
.preuve > summary::-webkit-details-marker{ display: none; }
.preuve > summary .reference{ text-decoration: underline; text-decoration-color: var(--n-7); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine){ .preuve > summary:hover .reference{ text-decoration-color: currentColor; } }
.preuve > summary:focus-visible{ outline: 2px solid var(--c-bleu); outline-offset: 2px; border-radius: var(--r-1); }
.preuve-dedans{
  margin: 0 0 var(--e2); padding: var(--e3) var(--e4);
  max-width: 70ch;
  background: var(--n-2); border-left: 2px solid var(--n-6);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  font-size: var(--t-14); color: var(--n-12);
}
.preuve-extrait{ margin: 0; overflow-wrap: anywhere; }
.preuve-note{ margin: var(--e1) 0 0; font-size: var(--t-13); color: var(--c-ink-2); }
.preuve-lien{ display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-14); }

/* La valeur proposee : un creux borde d'ambre, sous le champ qu'elle a
   pre-rempli. Le motif d'abord, les preuves ensuite. */
.ia-propose{
  margin: var(--e2) 0 0; padding: var(--e2) var(--e3) var(--e1) calc(var(--e3) + 3px);
  background: var(--n-2); box-shadow: inset 3px 0 0 var(--c-ambre);
  border-radius: var(--r-1);
  font-size: var(--t-14); color: var(--n-12);
}
.ia-propose.ia-signale{ box-shadow: inset 3px 0 0 var(--c-rouge); }
.ia-propose-tete{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e2); margin: var(--e1) 0; }
/* La puce porte ici le niveau propose en toutes lettres (« Propose par
   l'IA : 4, Maitrise avec adaptation ») : a 375 px elle sortait de la
   page de 76 px. Elle revient a la ligne, ici seulement. */
.ia-propose-tete .puce{ white-space: normal; }
.ia-propose-motif{ margin: 0 0 var(--e1); max-width: 70ch; overflow-wrap: anywhere; }
.ia-a-completer{ margin: 0 0 var(--e1); color: var(--c-ink-2); overflow-wrap: anywhere; }

/* Le bandeau d'une proposition affichee : ce qu'elle remplit, ce qui
   reste a trancher, ce qu'elle a coute. */
.ia-bandeau{
  display: grid; gap: var(--e2);
  margin: 0 0 var(--e5); padding: var(--e4) var(--e5) var(--e4) calc(var(--e5) + 3px);
  background: var(--s-attente); box-shadow: inset 3px 0 0 var(--c-ambre);
  border-radius: var(--r-2);
  color: var(--n-12);
}
@media (max-width: 40rem){ .ia-bandeau{ padding: var(--e3) var(--e4) var(--e3) calc(var(--e4) + 3px); } }
.ia-bandeau-titre{ margin: 0; font-size: var(--t-16); font-weight: 600; max-width: 70ch; }
.ia-bandeau-detail{ margin: 0; font-size: var(--t-13); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.ia-bandeau ul{ margin: 0; padding-left: 1.2em; font-size: var(--t-14); max-width: 70ch; }
.ia-bandeau .pourquoi{ margin-top: 0; }
.ia-bandeau .pourquoi .dedans-pourquoi{ background: #fff; }

/* Le geste « Assister » : un bouton calme, et son prix a cote. */
.ia-assister{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); margin: 0 0 var(--e5); }
.ia-assister .apres{ margin: 0; flex: 1 1 18rem; }

/* =====================================================================
   IMPRESSION
   ===================================================================== */
@media print{
  html, body{ background: #fff; }
  .barre, .evitement, .rail-place, .rang-agir, .filtres, .suivi, .progression, .infobulle,
  .action, .action-calme, .action-engage, .action-texte, .action-danger, .pagination{ display: none !important; }
  .section, .carte, .vide, .tuile, .outil{ box-shadow: none; border: 1px solid #999; page-break-inside: avoid; }
  .avec-rail{ display: block; }
}

/* =====================================================================
   CE QUI RESTE A RETIRER, ET CE QUI LE RETIENT ENCORE
   Nettoyage du 03/10/2026, apres la refonte des ecrans : sont partis les
   alias de jetons du 23/09 (--c-fond, --c-surf-2, --c-bord, --c-ink,
   --c-ink-3, --c-navy, --c-navy-profond, --rayon ; le portail public est
   passe aux jetons v2 de meme valeur), `.puce.urgence`, `.outil.attente`
   et le point `::before` des puces sans glyphe (toute puce passe par
   <x-puce>, qui en dessine toujours un). Reste, chaque nom avec ce qui
   l'emploie encore (grep sur resources/views et app avant de retirer) :
   - `.action.calme`, `.action.engage` : App\Services\ProchaineEtape les
     rend encore, et ProchaineEtapeTest les fige ; a retirer avec eux ;
   - `.prog-fini`, `.prog-encours`, `.prog-saute` : la progression de
     l'ecran de decision (dao/decision.blade.php, PHP et script) ;
   - `.tuile .valeur` et `.tuile .quoi` : les tuiles du registre, dont
     les tests lisent le chiffre dans <span class="valeur"> ;
   - `.erreur` : l'ecran de connexion ;
   - `.section > h2 + .aide` et `.grille .large` : decision, fiche de
     l'avis, nouveau, dossier, bibliotheque, offre financiere ;
   - `.sortir-mot` : la deconnexion du gabarit des outils ;
   - sur le disque, `public/polices/inter-600-latin.woff2` et
     `inter-600-latin-ext.woff2` (copies octet pour octet des fichiers
     400, references par aucune @font-face).
   ===================================================================== */