/* Surfaces du démonstrateur.
 *
 * Deux fonds, un seul système : papier clair pour l'acheteur (Vitrine, bac à sable), atelier
 * sombre pour l'évaluateur (Salle des machines). Le signal trois états — rapprochement,
 * doute, distinct — est le fil conducteur : il porte la même couleur d'un bout à l'autre.
 *
 * AUCUNE ressource distante. Les fontes de la maquette — Space Grotesk, Inter, JetBrains
 * Mono — sont AUTO-HÉBERGÉES : récupérées une fois au build par deploiement/recupere_fontes.py,
 * versionnées dans le dépôt avec leurs licences OFL et leurs empreintes, servies par ce
 * serveur. Le navigateur ne contacte aucun tiers, et la typographie du modèle est exacte.
 */

:root {
  --paper: #F4F5F2;
  --paper-2: #FBFBF9;
  --ink: #171A1D;
  --ink-2: #565B62;
  --ink-3: #6B7077;          /* 4,56:1 sur --paper, 4,82:1 sur --paper-2 (mesuré) */
  --line: #E4E5E1;

  --dark: #16181C;
  --dark-2: #1E2127;
  --dark-3: #262A31;
  --dark-line: #2D3037;
  --on-dark: #E8E9E6;
  --on-dark-2: #A7ADB4;      /* éclairci vs maquette (#9CA2A9) : contraste AA sur --dark-2 */
  --on-dark-3: #868C94;

  --match: #0E7C6B;
  --match-lite: #15A791;
  --doubt: #8A6522;          /* assombri vs maquette (#B0812F) : contraste AA sur papier */
  --doubt-lite: #D6A24A;
  --nomatch: #6E737A;
  --match-soft: rgba(14, 124, 107, .09);
  --doubt-soft: rgba(176, 129, 47, .11);

  /* Les fontes de la maquette, AUTO-HÉBERGÉES (voir fontes.css, engendré par
   * deploiement/recupere_fontes.py). Servies d'ici : aucun serveur tiers n'est contacté
   * à l'exécution. Les piles système restent en repli — le temps que la fonte arrive, et
   * pour un navigateur qui refuserait le woff2. */
  --sans: 'Inter', "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --disp: 'Space Grotesk', var(--sans);
  --mono: 'JetBrains Mono', "Cascadia Mono", Consolas, "DejaVu Sans Mono", ui-monospace, monospace;
  --wrap: 1000px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* `[hidden]` doit gagner sur tout `display` de composant : `.etapes` est en `display:flex`,
 * et sans cette règle le bandeau de pipeline s'affichait alors qu'il était marqué caché —
 * la surface annonçait un traitement qui n'avait pas eu lieu. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
/* Une empreinte ou un identifiant de cellule n'a pas d'espace où se couper : sans cette
 * règle, la Salle des machines débordait de 248 px à 360 px de large. */
code { overflow-wrap: anywhere; word-break: break-word; font-family: var(--mono); font-size: .95em; }
.ligne-verdict p, .parite span { min-width: 0; }
body {
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background: var(--paper);
  color: var(--ink);
}
img { max-width: 100%; }

/* Le mouvement est sobre par défaut ; ici, il disparaît. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Le focus clavier est VISIBLE partout, sur les deux fonds. `--match` (4,66:1 sur le papier)
 * et non `--match-lite` (2,75:1) : l'évaluateur au clavier est le public de la page
 * « auditable ». Pas de `border-radius` ici — il déformait visiblement les boutons au focus,
 * ce qui se lisait comme un défaut de rendu. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--match);
  outline-offset: 2px;
}
body.sombre a:focus-visible, body.sombre button:focus-visible,
body.sombre summary:focus-visible, body.sombre [tabindex]:focus-visible {
  outline-color: var(--match-lite);          /* 5,8:1 sur --dark : lisible sur fond sombre */
}

.saut-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; border-radius: 0 0 8px 0; z-index: 50;
}
.saut-contenu:focus { left: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; width: 100%; }

/* ============================ NAVIGATION ============================ */
.nav { display: flex; align-items: center; gap: 18px; padding: 22px 0; flex-wrap: wrap; }
.marque {
  font: 600 18px/1 var(--disp); letter-spacing: -.01em;
  display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit;
}
.marque i {
  width: 16px; height: 16px; border-radius: 5px; background: var(--match);
  display: inline-block; position: relative; flex: none;
}
.marque i::after {
  content: ""; position: absolute; inset: 4px; border-radius: 2px; background: var(--paper);
}
.nav .liens { margin-left: auto; display: flex; gap: 22px; align-items: center; font-size: 14px; }
.nav .liens a { color: var(--ink-2); text-decoration: none; }
.nav .liens a:hover { color: var(--ink); }

.btn {
  display: inline-block; font-size: 14px; font-weight: 500; padding: 10px 18px;
  border-radius: 9px; text-decoration: none; border: 1px solid transparent;
  cursor: pointer; font-family: inherit;
}
.btn-plein { background: var(--ink); color: var(--paper); }
.btn-plein:hover { background: #000; }
.btn-fantome { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-fantome:hover { background: var(--paper-2); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ============================ VITRINE ============================ */
.hero {
  padding: 30px 0 24px; display: grid; grid-template-columns: 1.14fr .86fr;
  gap: 46px; align-items: center;
}
/* L'accroche est passée de six mots à deux phrases (briefing de clôture, point 2) : elle
 * nomme le désordre puis le résultat. À 46 px dans une colonne de 490, elle tenait onze
 * lignes et écrasait l'encadré qui la précède désormais ; à 28, elle se lit comme une phrase
 * forte et la carte d'exemple retrouve son équilibre. La hiérarchie est la même, sur un
 * texte quatre fois plus long. */
.hero h2 {
  font: 600 clamp(22px, 2.2vw, 28px)/1.32 var(--disp);
  letter-spacing: -.015em; max-width: 30ch;
}
.hero .sous { margin-top: 20px; font-size: 17px; color: var(--ink-2); max-width: 42ch; }
.hero .cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }

.fiche-paire {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 13px; padding: 20px;
}
.fiche-paire .entete {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; gap: 10px;
}
.fiche {
  font-family: var(--mono); font-size: 12.5px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 9px; padding: 12px 13px;
}
.fiche + .fiche { margin-top: 9px; }
.fiche .source { color: var(--ink-3); font-size: 11px; display: block; margin-bottom: 5px; }
.fiche .ligne { display: flex; justify-content: space-between; gap: 12px; padding: 1.5px 0; }
.fiche .cle { color: var(--ink-3); flex: none; }
.fiche .val { text-align: right; word-break: break-word; }
.fiche .concorde { color: var(--match); font-weight: 500; }
/* Accord PARTIEL : le même vert, en trait souligné — « Alex » pour « Alexandre » concorde,
 * mais pas de la même façon que deux valeurs identiques. La nuance est celle du moteur. */
.fiche .concorde-partiel {
  color: var(--match); text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px; opacity: .85;
}
.fiche .diverge {
  color: var(--doubt); text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.fiche .absent { color: var(--ink-3); font-style: italic; }

.verdict-fiche {
  display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 13px 15px;
  background: var(--match-soft); border: 1px solid rgba(14, 124, 107, .25);
  border-radius: 10px; flex-wrap: wrap;
}
.verdict-fiche .pastille {
  font: 600 12px/1 var(--sans); color: #fff; background: var(--match);
  padding: 7px 11px; border-radius: 6px; flex: none;
}
.verdict-fiche small { color: var(--ink-2); font-size: 13px; }
.verdict-fiche small b { color: var(--ink); font-weight: 600; }

/* Le chiffre d'affiche */
.affiche {
  background: var(--ink); color: var(--paper); border-radius: 12px;
  padding: 26px 30px; display: flex; align-items: center; gap: 26px;
  flex-wrap: wrap; margin: 8px 0 40px;
}
.affiche .grand {
  font: 600 46px/1 var(--disp); letter-spacing: -.02em; flex: none; color: #fff;
}
.affiche .texte { font-size: 15px; color: #C9CBC5; max-width: 46ch; }
.affiche .texte b { color: #fff; font-weight: 600; }
/* Le renvoi au dossier vit sur le bandeau encre : il lui faut sa propre couleur, sinon il
 * hérite de l'encre du corps de page et devient invisible sur fond sombre. */
.affiche .texte a { color: #fff; text-decoration-color: rgba(255, 255, 255, .45); }
.affiche .texte a:hover { text-decoration-color: #fff; }

.arguments {
  padding: 34px 0 46px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px;
}
.argument h3 { font: 600 16px/1.2 var(--disp); margin-bottom: 8px; }
.argument p { font-size: 14px; color: var(--ink-2); }
.argument .icone {
  width: 30px; height: 30px; border-radius: 8px; background: var(--match-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 13px; color: var(--match);
}

/* ---- Encadré commercial « sur mesure » — EN TÊTE de l'accueil ----
 * Le titre et le sous-titre restent à découvert : ce sont eux qui cadrent tout ce qui suit
 * (« ce démonstrateur est une version réduite »), et les replier les rendrait facultatifs.
 * Les onze exemples, eux, sont derrière un chevron replié : le premier écran doit rester
 * court, et le budget de la Vitrine se compte jusqu'au premier texte lisible. */
.surmesure { padding: 22px 0 8px; }
.offre {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--paper-2); overflow: hidden;
}
.entete-offre { display: flex; gap: 18px; align-items: flex-start; padding: 24px 26px 0; }
.entete-offre .marqueur {
  width: 34px; height: 34px; border-radius: 9px; background: var(--match);
  color: var(--paper-2); display: flex; align-items: center; justify-content: center; flex: none;
}
.entete-offre h1 { font: 600 19.5px/1.28 var(--disp); letter-spacing: -.01em; max-width: 56ch; }
.entete-offre p {
  font-size: 14px; color: var(--ink-2); margin-top: 9px; max-width: 84ch;
}

.offre details {
  margin: 18px 26px 24px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--paper); overflow: hidden;
}
.offre details[open] { box-shadow: 0 20px 50px -34px rgba(14, 124, 107, .5); }
.offre summary {
  list-style: none; cursor: pointer; padding: 14px 18px;
  display: flex; align-items: center; gap: 11px; transition: background .2s;
  font: 600 14px/1.3 var(--sans); color: var(--ink);
}
.offre summary::-webkit-details-marker { display: none; }
/* Le libellé du dépliant est un `h2` — le plan de titres de la page l'exige — mais il ne doit
 * pas en porter la taille : c'est une ligne de commande, pas un titre de section. */
.offre summary h2 { font: inherit; letter-spacing: 0; }
.offre summary:hover { background: var(--match-soft); }
.offre summary .chevron {
  flex: none; width: 17px; height: 17px;
  color: var(--ink-3); transition: transform .28s ease;
}
.offre details[open] summary .chevron { transform: rotate(90deg); color: var(--match); }

/* La bannière de signature : fond encre, jamais en petits caractères. */
.signature {
  margin: 6px 18px 18px; padding: 16px 18px; background: var(--ink); color: #fff;
  border-radius: 11px; display: flex; align-items: center; gap: 14px;
}
.signature svg { flex: none; color: var(--match-lite); }
.signature p { margin: 0; font: 500 15px/1.4 var(--sans); color: #EDEEEA; }
.signature b { color: #fff; font-weight: 700; }

.pistes {
  padding: 4px 18px 10px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px;
}
.piste { display: flex; gap: 14px; padding: 17px 0; border-top: 1px solid var(--line); }
.piste .icone {
  width: 32px; height: 32px; border-radius: 8px; background: var(--match-soft);
  color: var(--match); display: flex; align-items: center; justify-content: center; flex: none;
}
.piste h3 { font: 600 14.5px/1.25 var(--sans); color: var(--ink); }
.piste p { font-size: 13px; color: var(--ink-2); margin-top: 4px; }

/* ============================ SALLE DES MACHINES ============================ */
body.sombre { background: var(--dark); color: var(--on-dark); }
body.sombre .nav .liens a { color: var(--on-dark-2); }
body.sombre .nav .liens a:hover { color: var(--on-dark); }
body.sombre .marque i::after { background: var(--dark); }
body.sombre .btn-fantome { border-color: var(--dark-line); color: var(--on-dark); }
body.sombre .btn-fantome:hover { background: var(--dark-2); }
body.sombre .btn-plein { background: var(--on-dark); color: var(--dark); }

.sdm-titre { max-width: 60ch; padding-top: 14px; }
.sdm-titre h1 { font: 600 30px/1.12 var(--disp); letter-spacing: -.02em; }
.sdm-titre .sous { margin-top: 14px; color: var(--on-dark-2); font-size: 15.5px; }

/* L'encart d'indépendance : ce n'est pas un ornement, c'est la garantie. */
.independance {
  margin-top: 22px; padding: 16px 18px; border: 1px solid var(--dark-line);
  border-left: 3px solid var(--match-lite); border-radius: 10px; background: var(--dark-2);
  display: flex; gap: 14px; align-items: flex-start;
}
.independance svg { color: var(--match-lite); flex: none; margin-top: 2px; }
.independance p { margin: 0; color: var(--on-dark-2); font-size: 14px; }
.independance b { color: var(--on-dark); font-weight: 600; }

.panneau {
  margin-top: 22px; background: var(--dark-2); border: 1px solid var(--dark-line);
  border-radius: 12px; padding: 22px 24px;
}
.panneau > .entete {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.panneau > .entete h2 { font: 600 16px/1.2 var(--disp); }
.panneau > .entete .tag {
  font: 400 12px/1 var(--mono); color: var(--on-dark-3); margin-left: auto;
}

table.banc { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.banc th, table.banc td { padding: 11px 6px; border-bottom: 1px solid var(--dark-line); }
table.banc thead th {
  color: var(--on-dark-3); font: 400 11.5px/1.3 var(--mono); text-align: right;
}
table.banc thead th:first-child { text-align: left; }
table.banc td { font-family: var(--mono); color: var(--on-dark-2); text-align: right; }
table.banc td:first-child {
  font-family: var(--sans); color: var(--on-dark); font-weight: 500; text-align: left;
}
table.banc td small {
  display: block; color: var(--on-dark-3); font-weight: 400; font-size: 11px; margin-top: 2px;
}
table.banc tr.nous td { color: var(--on-dark); }
table.banc tr.nous td:first-child { color: var(--match-lite); }
table.banc tr:last-child td { border-bottom: none; }
.defilable { overflow-x: auto; }

/* Le tableau de la Salle des machines porte, depuis le retrait de la comparaison, une
 * colonne de PROSE entre le nom de la mesure et sa valeur : « ce qu'elle veut dire ». En
 * mono aligné à droite — la règle du tableau comparatif — elle se lisait comme un code. */
table.banc.explique td:nth-child(2) {
  font-family: var(--sans); text-align: left; color: var(--on-dark-2); font-weight: 400;
}
table.banc.explique thead th:nth-child(2) { text-align: left; }

/* La phrase de lecture simple : le seul énoncé de cette page qu'un non-technicien lit
 * jusqu'au bout. Deux lignes, et la séparation est le propos — la première porte une MESURE
 * (le rappel du tableau qui précède), la seconde décrit qui tient la décision. Les coudre en
 * un seul paragraphe les ferait lire comme deux moitiés d'un même taux. */
.lecture-simple {
  margin-top: 22px; border-radius: 12px; overflow: hidden;
  background: var(--dark-2); border: 1px solid var(--dark-line);
}
.lecture-simple p {
  margin: 0; padding: 20px 24px; font: 400 17px/1.5 var(--sans); color: var(--on-dark-2);
}
.lecture-simple b { color: var(--on-dark); font-weight: 600; }
.lecture-simple .qui {
  display: block; margin-bottom: 7px; font: 500 11.5px/1 var(--mono);
  letter-spacing: .04em; text-transform: uppercase;
}
.lecture-simple .part-moteur { border-left: 3px solid var(--match-lite); }
.lecture-simple .part-moteur .qui { color: var(--match-lite); }
/* La seconde ligne prend l'autre accent : ce n'est ni un doute ni une mesure, c'est la main
 * de l'utilisateur. La distinguer par la couleur autant que par l'étiquette. */
.lecture-simple .part-vous {
  border-left: 3px solid var(--doubt-lite); border-top: 1px solid var(--dark-line);
}
.lecture-simple .part-vous .qui { color: var(--doubt-lite); }
.lecture-simple .completude { color: inherit; }

.parite {
  margin-top: 16px; display: flex; gap: 12px; align-items: center;
  font-size: 13.5px; color: var(--on-dark-2); flex-wrap: wrap;
}
.pastille-parite {
  font: 500 12px/1 var(--sans); padding: 6px 11px; border-radius: 20px;
  background: var(--match-soft); color: var(--match-lite);
  border: 1px solid rgba(21, 167, 145, .3); flex: none;
}
.parite b { color: var(--on-dark); }

.ligne-verdict {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 0;
  border-top: 1px solid var(--dark-line);
}
.ligne-verdict:first-of-type { border-top: none; }
.etiquette {
  font: 600 11px/1 var(--sans); padding: 6px 10px; border-radius: 6px;
  flex: none; letter-spacing: .02em;
}
.etiquette.haute {
  background: rgba(176, 129, 47, .16); color: var(--doubt-lite);
  border: 1px solid rgba(214, 162, 74, .3);
}
.etiquette.ok {
  background: var(--match-soft); color: var(--match-lite);
  border: 1px solid rgba(21, 167, 145, .3);
}
.etiquette.neutre {
  background: rgba(154, 159, 166, .16); color: var(--on-dark-2);
  border: 1px solid var(--dark-line);
}
.ligne-verdict p { font-size: 14px; color: var(--on-dark-2); }
.ligne-verdict p b { color: var(--on-dark); font-weight: 600; }

.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grand-nombre { font: 600 40px/1 var(--disp); color: var(--on-dark); letter-spacing: -.02em; }
.grand-nombre span { color: var(--on-dark-3); font-size: 22px; }

ul.asymetries { list-style: none; }
ul.asymetries li {
  font-size: 13px; color: var(--on-dark-2); padding: 9px 0 9px 20px;
  position: relative; border-bottom: 1px solid var(--dark-line);
}
ul.asymetries li:last-child { border-bottom: none; }
ul.asymetries li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--nomatch);
}
ul.asymetries li.moteur_maison::before { background: var(--match-lite); }
ul.asymetries li.splink::before { background: var(--doubt-lite); }
ul.asymetries li.baselines::before { background: var(--doubt-lite); }
ul.asymetries li.symetrique::before { background: var(--on-dark-2); }
ul.asymetries li.indetermine::before { background: var(--nomatch); }
/* La correction d'un texte gelé se lit SOUS le texte gelé, pas dans le JSON. */
ul.asymetries .mesure-asym {
  display: block; margin-top: 6px; font: 400 11.5px/1.45 var(--mono);
  color: var(--on-dark-3); padding-left: 10px; border-left: 2px solid var(--dark-line);
}
ul.asymetries .qui {
  font: 400 10.5px/1 var(--mono); color: var(--on-dark-3);
  float: right; margin-left: 12px; padding-top: 3px;
}

.empreinte {
  font-family: var(--mono); font-size: 12.5px; color: var(--on-dark-2);
  background: var(--dark-3); border-radius: 8px; padding: 13px 15px;
  overflow-x: auto; white-space: nowrap;
}
.empreinte .vert { color: var(--match-lite); }

.reserves { margin-top: 22px; }
.reserves h2 { font: 600 14px/1.3 var(--sans); color: var(--on-dark-2); margin-bottom: 12px; }
.reserves li {
  list-style: none; font-size: 13px; color: var(--on-dark-3);
  border: 1px solid var(--dark-line); border-radius: 10px;
  padding: 10px 13px; margin-bottom: 8px;
}
.reserves li b { color: var(--on-dark-2); font-weight: 500; }
.note-discrete {
  margin-top: 18px; font: 400 12px/1.5 var(--mono);
  color: var(--on-dark-3); padding-top: 14px; border-top: 1px solid var(--dark-line);
}

/* ============================ BAC À SABLE ============================ */
.bac-titre { padding-top: 14px; }
.bac-titre h1 { font: 600 26px/1.14 var(--disp); letter-spacing: -.02em; }
.bac-titre .sous { margin-top: 12px; color: var(--ink-2); font-size: 15px; max-width: 54ch; }

/* La maquette montrait l'entrée et le résultat côte à côte, sur une liste de quatre champs.
 * Un enregistrement réel en porte dix : en deux colonnes, chaque champ tombait sous 50 px et
 * la saisie devenait impraticable. On empile — l'entrée pleine largeur, le résultat dessous.
 * L'écart au modèle est assumé : le budget de 5 s se compte jusqu'au résultat LISIBLE. */
.bac-grille { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 26px; }
.bac-panneau {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px; min-width: 0;
}
.bac-panneau > .titre {
  font: 500 12px/1 var(--mono); color: var(--ink-3); margin-bottom: 13px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
/* Les titres de section sont de vrais `h2` — un lecteur d'écran doit pouvoir naviguer par
 * titres sur la seule page interactive. Ils gardent l'apparence discrète du modèle. */
.bac-panneau > .titre h2 { font: inherit; color: inherit; font-weight: 500; }

table.saisie { width: 100%; border-collapse: collapse; font-size: 12px; }
table.saisie th {
  font: 500 10.5px/1 var(--mono); color: var(--ink-3); text-align: left;
  padding: 4px 3px; font-weight: 500;
}
table.saisie td { padding: 2px 3px; }
/* Fond blanc et bordure à 3:1 : une fois l'extrait effacé — cas d'usage annoncé — un champ
 * bordé de `--line` (1,22:1) devenait invisible, et le tableau de saisie une surface vide. */
table.saisie input {
  width: 100%; font-family: var(--mono); font-size: 12px; color: var(--ink);
  background: #fff; border: 1px solid #B0B4AF;
  border-radius: 6px; padding: 6px 7px;
}
table.saisie input:focus { border-color: var(--match); }
.bac-actions { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chrono { font: 400 12px/1 var(--mono); color: var(--ink-3); }

.etapes { display: flex; align-items: center; gap: 6px; margin: 4px 0 14px; flex-wrap: wrap; }
.etapes .etape {
  font: 500 11.5px/1 var(--sans); color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--line); border-radius: 20px; padding: 7px 12px;
}
.etapes .etape.faite { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.etapes .fleche { color: var(--ink-3); font-size: 12px; }

.entite { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; margin-bottom: 12px; }
.entite .haut {
  background: var(--match-soft); padding: 11px 15px; display: flex;
  justify-content: space-between; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.entite .haut b { font-size: 13.5px; color: var(--ink); }
.entite .haut .compte { font: 500 11.5px/1 var(--mono); color: var(--match); }
.dore { padding: 13px 15px; font-family: var(--mono); font-size: 12px; }
.dore .ligne { display: flex; justify-content: space-between; gap: 12px; padding: 2.5px 0; }
.dore .cle { color: var(--ink-3); flex: none; }
.dore .val { text-align: right; word-break: break-word; }
/* La valeur écartée, montrée à côté de celle retenue : l'arbitrage se lit au lieu de se
 * deviner. C'est la promesse d'auditabilité appliquée à la fusion. */
/* La graphie écartée : grise et en italique, pour qu'on la distingue de la valeur retenue.
   La règle ne portait que sur `.dore`, alors que le titre de la carte porte lui aussi une
   `.ecartee` — elle héritait donc du gras du `<b>` et de la couleur d'encre pleine, et
   « Aubri (ou Aubry) » sortait d'un seul bloc : les deux graphies devenaient indistinguables,
   l'inverse exact de ce que la mention est là pour faire. Le sélecteur est commun. */
.ecartee { color: var(--ink-3); font-style: italic; font-weight: 400; }
.dore .ligne.arbitre .cle::after { content: " ⚖"; color: var(--doubt); }
.membres { padding: 0 15px 13px; font: 400 11px/1.5 var(--mono); color: var(--ink-3); }

.pourquoi {
  margin: 0 15px 13px; padding: 11px 13px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; color: var(--ink-2);
}
.pourquoi + .pourquoi { margin-top: -4px; }
.pourquoi b { color: var(--ink); }
.pourquoi .oui { color: var(--match); font-weight: 500; }
.pourquoi .non { color: var(--doubt); font-weight: 500; }

.a-verifier {
  margin-top: 16px; padding: 13px 15px; border: 1px solid rgba(138, 101, 34, .4);
  background: var(--doubt-soft); border-radius: 10px; font-size: 13px; color: var(--ink-2);
}
.a-verifier b { color: #6b4f1c; }
.a-verifier .paire {
  font-family: var(--mono); font-size: 12px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid rgba(138, 101, 34, .25);
}
.avis {
  margin-top: 14px; padding: 11px 13px; border-radius: 9px; font-size: 12.5px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
}
.avis.alerte { border-color: rgba(138, 101, 34, .45); background: var(--doubt-soft); }
.avis.erreur { border-color: #C6524A; background: rgba(198, 82, 74, .08); color: #8d2f28; }

/* ============================ BAC À SABLE — choix des scénarios ============================ */
.choix-scenarios { margin-top: 26px; }
.titre-choix { font: 600 15px/1.3 var(--disp); color: var(--ink-2); margin-bottom: 14px; }
.cartes-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 940px) { .cartes-scenarios { grid-template-columns: 1fr; } }

.carte-scenario {
  display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer;
  padding: 20px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--paper-2); font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.carte-scenario:hover { border-color: var(--match); box-shadow: 0 12px 30px -22px rgba(14,124,107,.6); }
.carte-scenario .nom { font: 600 15.5px/1.3 var(--disp); color: var(--ink); }
.carte-scenario .chiffres { font: 500 13px/1.3 var(--mono); color: var(--match); }
.carte-scenario .sources {
  font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-top: auto; padding-top: 6px;
}
.carte-scenario.secondaire { background: transparent; border-style: dashed; }
.carte-scenario.secondaire .chiffres { color: var(--ink-3); }
.jeton-format {
  font: 500 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 5px; border-radius: 4px; background: var(--line); color: var(--ink-2);
}
.jeton-format.pdf { background: #F2DEDE; color: #7A2E2E; }
.jeton-format.xlsx { background: #DCEFE1; color: #1E5B33; }
.jeton-format.csv { background: #DEE6F2; color: #24406B; }

/* ---- La zone de dépôt : « mes fichiers entrent ici » ---- */
.titre-scenario { font: 600 20px/1.25 var(--disp); letter-spacing: -.01em; }
.accroche-scenario { font-size: 14.5px; color: var(--ink-2); margin-top: 8px; max-width: 74ch; }
.depot {
  margin-top: 18px; padding: 18px; border: 2px dashed var(--line);
  border-radius: 12px; background: var(--paper);
}
.consigne-depot { font: 500 12px/1 var(--mono); color: var(--ink-3); margin-bottom: 12px; }
.cartes-fichiers { display: flex; gap: 12px; flex-wrap: wrap; }
.carte-fichier {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2);
}
.carte-fichier .format {
  font: 600 9.5px/1 var(--mono); padding: 4px 6px; border-radius: 4px;
  background: var(--line); color: var(--ink-2);
}
.carte-fichier .format.pdf { background: #F2DEDE; color: #7A2E2E; }
.carte-fichier .format.xlsx { background: #DCEFE1; color: #1E5B33; }
.carte-fichier .format.csv { background: #DEE6F2; color: #24406B; }
.carte-fichier .nom { font: 500 13px/1 var(--mono); color: var(--ink); }
.carte-fichier .lignes { font-size: 12px; color: var(--ink-3); }
.note-depot { margin-top: 13px; font-size: 12.5px; color: var(--ink-2); max-width: 78ch; }
.note-depot b { color: var(--ink); }
.benefice { margin-top: 12px; font: 500 14px/1.4 var(--disp); color: var(--match); }

/* ---- Le résultat : avant → après, puis trois sections ---- */
.resume-nettoyage {
  margin-top: 22px; padding: 24px 26px; background: var(--ink); color: var(--paper);
  border-radius: 13px;
}
.avant-apres { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.avant-apres .nombre { font: 600 40px/1 var(--disp); color: #fff; letter-spacing: -.02em; }
.avant-apres .nombre.resultat { color: var(--match-lite); }
.avant-apres .legende { font-size: 14px; color: #C9CBC5; }
.avant-apres .fleche { font-size: 26px; color: var(--ink-3); margin: 0 6px; }
.detail-sections { margin-top: 12px; font: 500 13.5px/1 var(--mono); color: #9FA3A0; }

.section-resultat {
  margin-top: 20px; padding: 20px 22px; border: 1px solid var(--line);
  border-left: 3px solid var(--match); border-radius: 12px; background: var(--paper-2);
}
.section-resultat.section-doute { border-left-color: var(--doubt); }
.section-resultat.section-unique { border-left-color: var(--nomatch); }
.entete-section { display: flex; align-items: baseline; gap: 12px; }
.entete-section h3 { font: 600 16px/1.2 var(--disp); }
.compte-section {
  font: 600 13px/1 var(--mono); color: var(--match); margin-left: auto;
  background: var(--match-soft); padding: 5px 10px; border-radius: 20px;
}
.section-doute .compte-section { color: var(--doubt); background: var(--doubt-soft); }
.section-unique .compte-section { color: var(--ink-2); background: var(--line); }
.description-section { font-size: 13px; color: var(--ink-2); margin: 6px 0 14px; }
.reste { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; font-style: italic; }
/* Le réglage du scénario affiché : discret, mais lisible. Il dit quels seuils ont produit ce
   qu'on vient de regarder, et pourquoi la file de doutes y est courte. */
.note-point { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
              font-size: 12.5px; color: var(--ink-2); max-width: 82ch; }

.liste-uniques { display: flex; flex-wrap: wrap; gap: 7px; }
.puce-unique {
  font: 400 12px/1 var(--mono); padding: 6px 10px; border-radius: 20px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink-2);
}
.puce-unique .lieu { color: var(--ink-3); }
.puce-unique .siret-puce { color: var(--doubt); }

/* ---- Le doute, montré et soumis à l'avis ---- */
.doute {
  border: 1px solid rgba(138, 101, 34, .35); background: var(--doubt-soft);
  border-radius: 11px; padding: 16px 18px; margin-bottom: 14px;
}
.doute h4 { font: 600 15px/1.2 var(--disp); color: #6b4f1c; margin-bottom: 12px; }
.deux-fiches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .deux-fiches { grid-template-columns: 1fr; } }
.doute .raison { font-size: 13px; color: var(--ink-2); margin-top: 12px; }
.doute .raison.siret-note {
  margin-top: 8px; padding: 10px 12px; background: var(--paper-2);
  border-radius: 9px; border: 1px solid var(--line);
}
.doute .ligne.siret { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 5px; }
.doute .ligne.siret .val { color: var(--doubt); font-weight: 500; }
.arbitrage { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.arbitrage .btn { background: var(--paper-2); }
.arbitre-fait {
  margin-top: 13px; font-size: 13px; color: #6b4f1c; font-weight: 500;
  background: var(--paper-2); border-radius: 9px; padding: 10px 12px;
}

/* ============================ PIED ============================ */
.pied-page {
  margin-top: 40px; padding: 28px 0 56px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-3);
}
body.sombre .pied-page { border-color: var(--dark-line); color: var(--on-dark-3); }
.pied-page a { color: inherit; }

/* ============================ RESPONSIVE ============================ */
/* Le résultat, lui, respire en deux colonnes quand la place existe : entités à gauche,
 * file « à vérifier » et avis à droite. */
@media (min-width: 941px) {
  .bac-resultat { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: start; }
}

@media (max-width: 940px) {
  .deux-colonnes { grid-template-columns: 1fr; }
  .pistes { grid-template-columns: 1fr; column-gap: 0; }
  /* Sous cette largeur, deux colonnes écrasent le titre : une seule colonne le rend lisible.
   * La mesure de 18ch venait d'une accroche de six mots ; sur deux phrases, elle imposait dix
   * lignes dans un ruban de 256 px alors que la colonne en fait 829. */
  .hero { grid-template-columns: 1fr; gap: 30px; padding-top: 22px; }
  .hero h2 { max-width: 34ch; }
  .arguments { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 18px; }
  .arguments { grid-template-columns: 1fr; gap: 26px; }
  .affiche { padding: 22px; gap: 16px; }
  .affiche .grand { font: 600 38px/1 var(--disp); }
  .nav .liens { gap: 14px; width: 100%; margin-left: 0; }
  /* Le titre de l'encadré tient sur cinq lignes à 375 px : il occupe alors le premier écran
   * à lui seul, alors que sa fonction est d'introduire ce qui suit. */
  .entete-offre { padding: 20px 18px 0; gap: 12px; }
  .entete-offre h1 { font-size: 17px; line-height: 1.3; }
  .entete-offre p { font-size: 13.5px; }
  .offre details { margin: 16px 18px 18px; }
  .signature { margin: 6px 12px 12px; }
  .pistes { padding-left: 12px; padding-right: 12px; }
  table.saisie { font-size: 11px; }
}