/* ==========================================================================
   MERIDIEN, fichier de jetons, volet operationnel v1.1
   Reprend a l'identique les sections 2, 3 et 7 de la charte.
   Aucun jeton ne s'ajoute ici sans passer par la charte.
   ========================================================================== */

/* --- Polices locales. Spectral n'est pas encore dans le depot : IBM Plex
       Serif sert de doublure declaree jusqu'a son integration. --- */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/statique/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/statique/IBMPlexSans-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/statique/IBMPlexSans-SemiBold.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/statique/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('/statique/IBMPlexSerif-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Serif';
  src: url('/statique/IBMPlexSerif-Light.woff2') format('woff2');
  font-weight: 300; font-display: swap;
}

:root {
  /* 2.1 Couleurs, palette fermee. Aucune autre valeur n'est admise. */
  --papier:            #FFFFFF;
  --papier-froid:      #F7F9FC;
  --encre:             #122752;
  --encre-70:          #596886;
  --encre-45:          #949EB1;
  --encre-20:          #D0D4DC;
  --bleu-travail:      #003F88;
  --bleu-donnee:       #42A5F5;
  --vert-robustesse:   #1E6E5C;
  --orange-decision:   #E16610;
  --rouge-systeme:     #C00000;

  /* Camaieu de bleu, echelle sequentielle de Papier vers Encre */
  --bleu-1: #E3EAF4;
  --bleu-2: #B9CBE4;
  --bleu-3: #7E9CC8;
  --bleu-4: #4A6FA5;
  --bleu-5: #234275;

  /* 2.2 Typographie */
  --font-titre:  'Spectral', 'IBM Plex Serif', Georgia, serif;
  --font-texte:  'IBM Plex Sans', sans-serif;
  --font-mono:   'IBM Plex Mono', ui-monospace, monospace;

  /* 2.3 Traits, trois graisses pour toute la plateforme */
  --trait-fin:   1px;
  --trait-moyen: 1.5px;
  --trait-fort:  2.5px;

  /* Espacement, multiples de 4 */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e6: 24px; --e8: 32px; --e12: 48px; --e16: 64px;

  /* Formes. Deux valeurs, rien d'autre. */
  --rayon: 2px;
  --rayon-nul: 0;

  /* Une seule ombre, reservee aux surfaces flottantes */
  --ombre-flottante: 0 2px 8px rgba(18, 39, 82, 0.12);

  /* Transitions, seulement pour expliquer un changement d'etat */
  --transition: 160ms ease-out;

  /* Grille */
  --gouttiere: 24px;
  --colonne-lecture: 68ch;
}

/* ==========================================================================
   Socle
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--papier-froid);
  color: var(--encre);
  font-family: var(--font-texte);
  font-size: 14px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-titre); font-weight: 400; margin: 0; }
h1 { font-size: 28px; line-height: 36px; }
h2 { font-size: 22px; line-height: 30px; }
h3 { font-size: 18px; line-height: 26px; }

a { color: var(--bleu-travail); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono, .m-id { font-family: var(--font-mono); font-size: 13px; line-height: 20px; }

.m-lecture { max-width: var(--colonne-lecture); font-size: 16px; line-height: 26px; }
.m-legende { font-size: 12px; line-height: 16px; color: var(--encre-70); }
.m-secondaire { color: var(--encre-70); }
.m-tertiaire { color: var(--encre-70); }

/* ==========================================================================
   4.1 Enveloppe applicative
   ========================================================================== */

/* Les rangees sont declarees : sans `auto 1fr`, une page plus courte que la
   fenetre voit ses deux rangees s'etirer, et le bandeau se retrouve pousse a
   211 px de haut au lieu de 52. Mesure sur le cockpit des files. */
.m-app {
  display: grid;
  grid-template-columns: 216px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.m-bandeau {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--e6);
  height: 52px; padding: 0 var(--e6);
  background: var(--papier-froid);
  border-bottom: var(--trait-fin) solid var(--encre-20);
}
.m-marque {
  font-family: var(--font-titre); font-size: 18px; letter-spacing: 0.06em;
  color: var(--encre); text-transform: uppercase;
}
.m-fil { font-size: 13px; color: var(--encre-70); flex: 1; }
.m-fil a { color: var(--encre-70); }
.m-fil .sep { color: var(--encre-70); padding: 0 var(--e1); }

.m-recherche {
  width: 240px; height: 28px; padding: 0 var(--e2);
  background: var(--papier);
  border: var(--trait-fin) solid var(--encre-20);
  border-radius: var(--rayon);
  font-family: var(--font-texte); font-size: 13px; color: var(--encre);
}
.m-recherche:focus { outline: none; border-color: var(--bleu-travail); }

/* Les controles natifs tirent sinon le bleu par defaut du navigateur,
   qui n'appartient pas a la palette. */
input[type="checkbox"], input[type="radio"], progress { accent-color: var(--bleu-travail); }
select, input { color: var(--encre); }
:focus-visible { outline: var(--trait-moyen) solid var(--bleu-travail); outline-offset: 1px; }

.m-lateral {
  background: var(--papier-froid);
  border-right: var(--trait-fin) solid var(--encre-20);
  padding: var(--e4) 0;
}
.m-lateral .groupe {
  display: block;
  font-size: 11px; line-height: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--encre-70); padding: var(--e4) var(--e4) var(--e2);
  border-left: var(--trait-fort) solid transparent;
}
a.m-lateral-groupe:hover, .m-lateral a.groupe:hover { color: var(--encre); text-decoration: none; }
.m-lateral a.groupe.ouvert { color: var(--encre); }
.m-lateral a {
  display: block; padding: var(--e2) var(--e4);
  color: var(--encre); font-size: 14px;
  border-left: var(--trait-fort) solid transparent;
}
.m-lateral a:hover { background: var(--papier); text-decoration: none; }
.m-lateral a.actif {
  border-left-color: var(--bleu-travail);
  color: var(--bleu-travail); font-weight: 500; background: var(--papier);
}

.m-travail { background: var(--papier); padding: var(--e6) var(--e8); }

/* La Meridienne, seul element anime de l'enveloppe.
   Ligne graduee servant de chargement et de progression. */
.m-meridienne { position: relative; width: 12px; background: var(--papier-froid); }
.m-meridienne::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: var(--trait-fin); background: var(--encre-20);
}
.m-meridienne .graduation {
  position: absolute; left: 2px; width: 8px; height: var(--trait-fin);
  background: var(--encre-45);
}
.m-meridienne .curseur {
  position: absolute; left: 0; width: 12px; height: var(--trait-fort);
  background: var(--encre); transition: top var(--transition);
}

/* Meridienne horizontale, barre de progression */
.m-progression { position: relative; height: 12px; }
.m-progression::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: var(--trait-fin); background: var(--encre-20);
}
.m-progression .fait {
  position: absolute; left: 0; top: 50%; height: var(--trait-moyen);
  background: var(--encre);
}
.m-progression .graduation {
  position: absolute; top: 2px; width: var(--trait-fin); height: 8px;
  background: var(--encre-45);
}

/* ==========================================================================
   3. La Legende PANDORA
   ========================================================================== */

/* Niveaux de preuve E0 a E4 : quatre points de 5 px, espaces de 3 px,
   pleins ou vides, en Encre. Jamais de couleur pour la preuve. */
.m-preuve { display: inline-flex; align-items: center; gap: var(--e2); }
.m-preuve .points { display: inline-flex; gap: 3px; }
.m-preuve .pt {
  width: 5px; height: 5px; border-radius: 50%;
  border: 1px solid var(--encre); background: transparent;
}
.m-preuve .pt.plein { background: var(--encre); }
.m-preuve .libelle { font-size: 12px; line-height: 16px; color: var(--encre-70); }

/* Badges de statut de curation : rectangles a coins de 2 px, filet fin */
.m-badge {
  display: inline-block; padding: 1px var(--e2);
  border: var(--trait-fin) solid var(--encre-70);
  border-radius: var(--rayon);
  font-size: 12px; line-height: 16px; color: var(--encre);
  background: var(--papier); white-space: nowrap;
}
.m-badge.robuste { border-color: var(--vert-robustesse); color: var(--vert-robustesse); }
.m-badge.arbitrage { border-color: var(--orange-decision); color: var(--encre); }
.m-badge.systeme { border-color: var(--rouge-systeme); color: var(--rouge-systeme); }

/* ==========================================================================
   Composants transverses
   ========================================================================== */

/* Le Cartouche. Rien ne s'exporte sans Cartouche complet. */
.m-figure { margin: 0 0 var(--e8); background: var(--papier); }
.m-figure > .titre {
  font-family: var(--font-titre); font-weight: 600;
  font-size: 16px; line-height: 22px; margin-bottom: var(--e3);
}
.m-figure > .toile {
  border: var(--trait-fin) solid var(--encre-20);
  border-radius: var(--rayon); background: var(--papier);
}
/* Une figure agrandie au-dela de sa taille naturelle gonfle ses textes et
   sort de l'echelle typographique. Le trace se plafonne et se centre. */
.m-figure > .toile > svg { display: block; width: 100%; max-width: 760px; margin: 0 auto; }
.m-cartouche {
  border: var(--trait-fin) solid var(--encre-20); border-top: none;
  padding: var(--e2) var(--e3);
  font-size: 11px; line-height: 15px; color: var(--encre-70);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--e1) var(--e4);
}
.m-cartouche dt {
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--encre-70); margin: 0;
}
.m-cartouche dd { margin: 0; color: var(--encre); }
.m-cartouche .pastille {
  grid-column: 1 / -1; font-style: normal;
}

/* Chiffres-cles. Jamais de jauge, d'anneau ni de compteur anime. */
.m-chiffre { border-left: var(--trait-fort) solid var(--encre); padding-left: var(--e3); }
.m-chiffre .valeur {
  font-family: var(--font-texte); font-weight: 600;
  font-size: 36px; line-height: 42px; font-variant-numeric: tabular-nums;
}
.m-chiffre .libelle { font-size: 12px; line-height: 16px; color: var(--encre-70); }
.m-chiffre .variation { font-size: 12px; line-height: 16px; margin-top: var(--e1); }
.m-chiffre .variation.favorable { color: var(--vert-robustesse); }
.m-chiffre .variation.favorable .m-tri { color: var(--vert-robustesse); }
.m-chiffre .variation.critique { color: var(--encre-70); }
.m-chiffre .variation.critique .m-tri { color: var(--orange-decision); }
.m-tri { font-size: 10px; }

/* Tableaux, type annuaire statistique */
.m-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.m-table caption {
  text-align: left; font-family: var(--font-titre); font-weight: 600;
  font-size: 16px; line-height: 22px; padding-bottom: var(--e3);
}
.m-table th {
  text-align: left; font-weight: 500; font-size: 12px; line-height: 16px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-70);
  padding: var(--e2) var(--e3);
  border-bottom: var(--trait-moyen) solid var(--encre);
  white-space: nowrap;
}
.m-table td {
  padding: var(--e2) var(--e3);
  border-bottom: var(--trait-fin) solid var(--encre-20);
  vertical-align: top;
}
.m-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.m-table tr:hover td { background: var(--papier-froid); }
.m-table .actions { white-space: nowrap; text-align: right; }

/* Boutons */
.m-bouton {
  display: inline-block; padding: var(--e1) var(--e3); min-height: 28px;
  font-family: var(--font-texte); font-size: 13px; line-height: 20px;
  border-radius: var(--rayon); cursor: pointer;
  border: var(--trait-fin) solid var(--encre-45);
  background: var(--papier); color: var(--encre);
  transition: background var(--transition), border-color var(--transition);
}
.m-bouton:hover { border-color: var(--encre); text-decoration: none; }
.m-bouton.principal {
  background: var(--bleu-travail); border-color: var(--bleu-travail); color: var(--papier);
}
.m-bouton.principal:hover { background: var(--encre); border-color: var(--encre); }

/* Panneaux */
.m-panneau {
  border: var(--trait-fin) solid var(--encre-20); border-radius: var(--rayon);
  background: var(--papier);
}
.m-panneau > .entete {
  padding: var(--e2) var(--e3);
  border-bottom: var(--trait-fin) solid var(--encre-20);
  background: var(--papier-froid);
  font-size: 12px; line-height: 16px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--encre-70);
}
.m-panneau > .corps { padding: var(--e3); }

/* Bloc d'instructions ouvertes : pas de constat sans instruction */
.m-instructions {
  border-left: var(--trait-fort) solid var(--vert-robustesse);
  background: var(--papier-froid);
  padding: var(--e3) var(--e4);
}
.m-instructions h3 { font-size: 16px; line-height: 22px; margin-bottom: var(--e2); }
.m-instructions ol { margin: 0; padding-left: var(--e6); }
.m-instructions li { margin-bottom: var(--e2); }

/* Etat vide, calme et informatif, portant la citation de Morin */
.m-vide {
  border: var(--trait-fin) dashed var(--encre-20); border-radius: var(--rayon);
  padding: var(--e12) var(--e8); text-align: center; color: var(--encre-70);
}
.m-vide blockquote {
  font-family: var(--font-titre); font-size: 18px; line-height: 26px;
  color: var(--encre); max-width: 46ch; margin: 0 auto var(--e3);
}
.m-vide cite { font-style: normal; font-size: 12px; color: var(--encre-70); }

/* Utilitaires de mise en page */
.m-grille { display: grid; gap: var(--gouttiere); }
.m-c2 { grid-template-columns: repeat(2, 1fr); }
.m-c3 { grid-template-columns: repeat(3, 1fr); }
.m-c4 { grid-template-columns: repeat(4, 1fr); }
.m-fiche-3col { display: grid; grid-template-columns: 200px minmax(0, 1fr) 260px; gap: var(--gouttiere); }
.m-filet { border: none; border-top: var(--trait-fin) solid var(--encre-20); margin: var(--e6) 0; }
.m-flottant { box-shadow: var(--ombre-flottante); }

/* ==========================================================================
   7. Graphes, jetons de tracage (consommes par le SVG et par D3)
   ========================================================================== */

.g-noeud { fill: var(--encre); stroke: var(--encre); }
.g-noeud.curation { fill: var(--papier); stroke-width: var(--trait-moyen); }
.g-meta { fill: var(--papier); stroke: var(--encre); stroke-width: 2.5; }
.g-relation-naire { fill: var(--encre); }
.g-etiquette { font-family: var(--font-texte); font-size: 12px; fill: var(--encre); }
.g-verbe { font-family: var(--font-texte); font-size: 11px; fill: var(--encre-70); }

.g-arete { fill: none; stroke: var(--encre); }
.g-arete.e0 { stroke-width: 1; stroke-dasharray: 3 3; }
.g-arete.e1, .g-arete.e2 { stroke-width: 1; }
.g-arete.e3 { stroke-width: 1.5; }
.g-arete.e4 { stroke-width: 2.5; }
.g-arete.critique { stroke: var(--orange-decision); }
.g-arete.estompe { stroke: var(--encre-20); }
.g-noeud.estompe { fill: var(--encre-20); stroke: var(--encre-20); }
.g-etiquette.estompe { fill: var(--encre-20); }

.g-seuil { stroke: var(--encre); stroke-width: 2.5; }
.g-seuil.approche { stroke: var(--orange-decision); }
.g-coupe-feu { stroke: var(--vert-robustesse); stroke-width: 2.5; }
.g-levier { stroke: var(--vert-robustesse); stroke-width: 2.5; }
.g-boucle { fill: var(--papier); stroke: var(--encre); stroke-width: 1.5; }
.g-boucle-lettre { font-family: var(--font-texte); font-size: 11px; fill: var(--encre); }

/* Graphiques statistiques : filets horizontaux uniquement */
.s-axe { stroke: var(--encre); stroke-width: 1; }
.s-grille { stroke: var(--encre-20); stroke-width: 1; }
.s-serie { fill: none; stroke: var(--bleu-donnee); stroke-width: 1.5; }
.s-serie.temoin { stroke: var(--encre-45); stroke-dasharray: 3 3; }
.s-bande { fill: var(--encre); opacity: 0.08; }
.s-texte { font-family: var(--font-texte); font-size: 12px; fill: var(--encre-70); }
.s-barre { fill: var(--bleu-3); }
.s-barre.signal { fill: var(--orange-decision); }

/* Impression : l'ecran et le livrable sont le meme objet */
@media print {
  body { background: var(--papier); }
  .m-lateral, .m-recherche { display: none; }
  .m-travail { padding: 0; }
}

/* Planche de contact des pictogrammes : juger 91 traces d'un coup d'oeil.
   Trois tailles cote a cote, parce que le defaut ne se voit qu'a la plus
   petite : deux traces sur douze de la planche d'essai ne tenaient pas a
   16 px, ce qui n'etait pas previsible sur le papier. */
.contact-grille { display: grid; gap: 16px;
                  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.contact-case { margin: 0; padding: 12px; border: 1px solid var(--encre-20);
                border-radius: 2px; background: var(--papier); }
.contact-tailles { display: flex; align-items: flex-end; gap: 12px;
                   min-height: 32px; color: var(--encre); }
.contact-case figcaption { margin-top: 8px; font-size: 12px; color: var(--encre-70);
                           line-height: 1.4; }

/* Planche de choix : le trace en place a cote de ses concurrents.
   Une seule taille, 16 px, parce que c'est elle qui decide. */
.choix-ligne { display: grid; grid-template-columns: 200px 1fr;
               gap: 16px; align-items: center;
               padding: 8px 0; border-bottom: 1px solid var(--encre-20); }
.choix-besoin { font-size: 13px; line-height: 18px; color: var(--encre); }
.choix-cases { display: flex; flex-wrap: wrap; gap: 12px; }
.choix-case { margin: 0; padding: 6px 8px; text-align: center;
              border: 1px solid transparent; border-radius: 2px;
              color: var(--encre); min-width: 76px; }
.choix-case.choix-actuel { border-color: var(--bleu-travail);
                           background: var(--papier-froid); }
.choix-case figcaption { margin-top: 4px; font-size: 11px; line-height: 14px;
                         color: var(--encre-70); word-break: break-all; }

/* Registre « a revoir » : un doute consigne doit se VOIR, sinon il se perd.
   Orange Decision, la couleur de ce qui appelle un arbitrage. */
.contact-case.a-revoir { border-color: var(--orange-decision); }
/* Le TEXTE est en Encre, le filet en Orange Decision. L'arbitrage du
   2026-08-02 dit que l'Orange Decision ne porte pas de texte sous 24 px :
   mesure a 3,44:1 sur Papier, pour 4,5 exiges en AA. La porte du rendu a
   attrape la faute des la premiere generation de ce badge. La couleur reste
   sur le filet et la bordure de la case, ou le seuil est de 3,0. */
.marque-revoir { display: inline-block; margin-top: 4px; padding: 1px 6px;
                 border: 1px solid var(--orange-decision); border-radius: 2px;
                 font-family: var(--font-mono); font-size: 10px;
                 letter-spacing: 0.06em; color: var(--encre); }

/* Planche de choix, pilotage. Sobre : aucune animation, aucun effet.
   Le retenu se marque par un filet Bleu Travail, pas par une couleur de texte. */
.choix-case { cursor: pointer; background: var(--papier);
              font: inherit; color: inherit; }
.choix-case:hover { border-color: var(--encre-45); }
.choix-case.choix-retenu { border-color: var(--bleu-travail);
                           border-width: 2px; background: var(--papier-froid); }
.choix-revoir { margin-top: 4px; padding: 2px 8px; cursor: pointer;
                background: var(--papier); color: var(--encre);
                border: 1px solid var(--encre-20); border-radius: 2px;
                font-family: var(--font-texte); font-size: 12px; }
.choix-revoir:hover { border-color: var(--orange-decision); }
.choix-etat { margin-top: 4px; font-size: 11px; line-height: 15px; }
.choix-etat.etat-choisi { color: var(--bleu-travail); }
.choix-etat.etat-revoir { color: var(--encre); }
.choix-compte { font-family: var(--font-mono); font-size: 13px; }
.m-bouton { padding: 6px 14px; margin-right: 8px; cursor: pointer;
            background: var(--papier); color: var(--encre);
            border: 1px solid var(--encre-20); border-radius: 2px;
            font-family: var(--font-texte); font-size: 13px; }
.m-bouton:hover { border-color: var(--bleu-travail); color: var(--bleu-travail); }

/* La case « aucun » : meme geste que les autres, au bout de la rangee.
   Filet en pointilles pour dire qu'elle ne porte pas de dessin. */
.choix-aucun { border-style: dashed; border-color: var(--encre-45);
               min-height: 46px; display: inline-flex; flex-direction: column;
               align-items: center; justify-content: center; }
.choix-aucun .aucun-marque { font-family: var(--font-texte); font-size: 12px;
                             color: var(--encre-70); }
.choix-aucun.choix-retenu { border-style: solid;
                            border-color: var(--orange-decision);
                            border-width: 2px; background: var(--papier-froid); }
.choix-aucun.choix-retenu .aucun-marque { color: var(--encre); }

/* Portail d'arbitrage : poser une decision, pas recolter une humeur.
   Le COUT de chaque option est affiche sous son libelle et compte autant que
   lui : un choix presente sans son cout retient toujours le mot le plus
   sympathique, defaut deja mesure sur ce depot sous le nom de critere de
   niveau. D'ou la place donnee au texte gris sous chaque option. */
.arb-constat { border-left: 2px solid var(--bleu-travail);
               padding: var(--e2) 0 var(--e2) var(--e3);
               margin: var(--e3) 0; color: var(--encre-70); }
.arb-options { display: grid; gap: var(--e2); margin: var(--e3) 0; }
.arb-option { display: grid; grid-template-columns: 20px 1fr;
              gap: 0 var(--e2); align-items: start; cursor: pointer;
              padding: var(--e2); border: 1px solid var(--encre-20);
              border-radius: var(--rayon); background: var(--papier); }
.arb-option:hover { border-color: var(--bleu-travail); }
.arb-option input { grid-row: 1 / 3; margin-top: 3px; }
.arb-libelle { font-weight: 600; color: var(--encre); }
.arb-cout { font-size: 13px; line-height: 19px; color: var(--encre-70); }
.arb-option:has(input:checked) { border-color: var(--bleu-travail);
                                 border-width: 2px; padding: 7px;
                                 background: var(--papier-froid); }
.arb-reserve { display: block; font-size: 13px; color: var(--encre-70); }
.arb-reserve textarea { display: block; width: 100%; margin-top: var(--e1);
                        padding: var(--e2); font-family: var(--font-texte);
                        font-size: 13px; color: var(--encre);
                        background: var(--papier);
                        border: 1px solid var(--encre-20);
                        border-radius: var(--rayon); }

/* Les traces : deux tailles cote a cote, et c'est la petite qui decide. */
.arb-grille { display: grid; gap: var(--e3);
              grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.arb-case { margin: 0; padding: var(--e3); border: 1px solid var(--encre-20);
            border-radius: var(--rayon); background: var(--papier); }
.arb-tailles { display: flex; align-items: flex-end; gap: var(--e3);
               min-height: 28px; color: var(--encre); }
.arb-case figcaption { margin: var(--e2) 0; font-size: 13px;
                       line-height: 19px; color: var(--encre-70); }
.arb-verdicts { display: grid; gap: var(--e1); }
.arb-verdict { display: flex; gap: var(--e2); align-items: center;
               font-size: 12px; color: var(--encre); cursor: pointer; }
.arb-case:has(input:checked) { border-color: var(--bleu-travail); }

/* Pilotage. Il colle en bas parce qu'une page de cent douze decisions se
   parcourt longtemps, et qu'un compteur qu'il faut aller chercher ne dit
   jamais a son lecteur qu'il a saute la moitie des questions. */
#arb-pilotage { position: sticky; bottom: 0; z-index: 2;
                background: var(--papier-froid);
                border-top: 2.5px solid var(--bleu-travail); }
.arb-nom { display: block; font-size: 13px; color: var(--encre-70); }
.arb-nom input { display: block; margin-top: var(--e1); padding: var(--e2);
                 min-width: 260px; font-family: var(--font-texte);
                 font-size: 14px; color: var(--encre); background: var(--papier);
                 border: 1px solid var(--encre-20); border-radius: var(--rayon); }
.arb-etat { font-family: var(--font-mono); font-size: 13px; color: var(--encre); }

/* Colonne de la page de consultation. Une classe, pas un attribut `style` :
   la politique de securite du site interdit le style en ligne, et l'attribut
   etait bloque en silence, donc la colonne n'etait pas bornee du tout. */
.m-travail--consultation { max-width: 1100px; }
.m-travail--message { max-width: 680px; }

/* Accessibilite du portail, defauts mesures le 2026-08-10 sur la page servie.
   ==========================================================================
   La legende nomme le groupe de boutons pour une aide technique, sans occuper
   la place a l'ecran ou le titre le dit deja. `display:none` la retirerait de
   l'arbre d'accessibilite, ce qui annulerait l'objet meme de la correction. */
.arb-legende { position: absolute; width: 1px; height: 1px; padding: 0;
               margin: -1px; overflow: hidden; clip-path: inset(50%);
               white-space: nowrap; border: 0; }
fieldset.arb-options, fieldset.arb-verdicts { border: 0; padding: 0; margin: 0; }

/* Cible tactile de 24 px au moins, WCAG 2.5.8. Les verdicts mesuraient 20 px
   de haut : 336 cibles etaient sous le seuil. */
.arb-verdict { min-height: 24px; padding: 2px 0; }
.arb-option { min-height: 24px; }

/* Lien d'evitement. Sans lui, 366 tabulations separaient le haut de la page
   du panneau d'enregistrement. Il ne se voit qu'au clavier, la ou il sert. */
.arb-evitement { position: absolute; left: -9999px; }
.arb-evitement:focus { position: static; display: inline-block;
                       padding: var(--e2) var(--e3); background: var(--papier-froid);
                       border: 1px solid var(--bleu-travail);
                       border-radius: var(--rayon); color: var(--bleu-travail); }

/* Le reste des traces, replie : ferme, son contenu sort du trajet clavier. */
.arb-reste > summary { cursor: pointer; font-weight: 600; color: var(--encre);
                       padding: var(--e2) 0; }
.arb-reste > summary:hover { color: var(--bleu-travail); }

/* Demonstrations : le meme fragment, une fois par variante.
   ==========================================================================
   L'objectif du chantier n'est pas la conformite, c'est que les interfaces
   fassent professionnel, et cela ne se juge pas sur une description. La
   vignette porte donc un vrai panneau, pas un carre de couleur. */
.demo-grille { display: flex; flex-wrap: wrap; gap: var(--e4);
               border: 0; padding: 0; margin: var(--e3) 0 0 0; }
.demo-choix { display: block; cursor: pointer; }
.demo-cadre { display: block; padding: var(--e3);
              border: 1px solid var(--encre-20); border-radius: var(--rayon); }
.demo-pied { display: flex; align-items: flex-start; gap: var(--e2);
             max-width: 372px; margin-top: var(--e2); padding: 2px 0;
             min-height: 24px; font-size: 13px; line-height: 19px;
             color: var(--encre); }
.demo-choix:has(input:checked) .demo-cadre { border-color: var(--bleu-travail);
                                             border-width: 2px; padding: 11px; }
.demo-choix:has(input:checked) .demo-pied { font-weight: 600; }
.demo-choix:hover .demo-cadre { border-color: var(--encre-45); }