:root {
  --papier: #f6f4ef;
  --surface: #fffdf9;
  --encre: #1b1f24;
  --attenue: #6a7078;
  --trait: #e2ded4;
  --trait-fort: #cec8ba;
  --accent: #0d5c63;
  --accent-doux: #d8ecec;
  --alerte: #9c4a0a;
  --alerte-doux: #f6e6d5;
  --vert: #2f6b45;
  --ombre: 0 1px 2px rgba(27, 31, 36, .05), 0 8px 24px -12px rgba(27, 31, 36, .18);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #0f1216;
    --surface: #161a1f;
    --encre: #e9e6e0;
    --attenue: #939aa3;
    --trait: #262b32;
    --trait-fort: #39404a;
    --accent: #56c4ca;
    --accent-doux: #12312f;
    --alerte: #e09a55;
    --alerte-doux: #33230f;
    --vert: #6cc691;
    --ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.enveloppe { max-width: 1280px; margin: 0 auto; padding: 0 20px 64px; }

/* ---------- En-tête ---------- */

header { padding: 40px 0 26px; }

.marque {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.marque h1 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
}

.marque .rose { width: 26px; height: 26px; flex: none; align-self: center; }

.baseline {
  margin: 10px 0 0;
  font-size: 17px;
  max-width: 62ch;
  color: var(--encre);
  font-family: var(--serif);
}

.baseline em { color: var(--accent); font-style: normal; box-shadow: inset 0 -.4em var(--accent-doux); }

.sous-baseline { margin: 8px 0 0; color: var(--attenue); font-size: 14px; max-width: 68ch; }

/* ---------- Sélecteur de modèles ---------- */

.exemples {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.exemples .puce {
  display: inline-block;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--trait-fort);
  color: var(--attenue);
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}

.exemples .puce:hover { color: var(--encre); border-color: var(--encre); }

.exemples .puce[aria-current] {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--papier);
}

nav { margin: 0 0 14px; }
nav .exemples { margin-bottom: 0; }

/* Treize pastilles en tête de page demandaient de choisir avant d'avoir compris
   ce qu'on choisissait. Elles viennent maintenant après la réponse, précédées
   de la phrase qui dit à quoi elles servent. */
.autres { margin: 30px 0 0; }
.autres-intro {
  margin: 0 0 12px;
  max-width: 62ch;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--attenue);
}
.autres-intro em { color: var(--encre); font-style: normal; box-shadow: inset 0 -.4em var(--accent-doux); }

/* Le brouillon d'un visiteur qui revient : on ne remplace pas la page par son
   travail sans le lui dire, on le lui propose. */
.reprise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 14px;
  border-top: 1px solid var(--trait);
  background: var(--accent-doux);
  font-size: 13px;
  color: var(--encre);
}
.reprise[hidden] { display: none; }
.reprise > span { flex: 1 1 16ch; }
.reprise button {
  font: inherit;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--trait-fort);
  background: var(--surface);
  color: var(--attenue);
  cursor: pointer;
}
.reprise button:hover { color: var(--encre); border-color: var(--encre); }

/* Sur un écran étroit, dix pastilles empilées repoussent le verdict sous la
   ligne de flottaison. Une bande défilante rend la liste à une seule ligne. */
@media (max-width: 700px) {
  .exemples {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .exemples::-webkit-scrollbar { display: none; }
  .exemples .puce { white-space: nowrap; }
}

/* Sur une page de modèle, le nom du site s'efface : c'est un fil d'Ariane,
   pas le titre de la page. Le titre, c'est la question posée. */
.marque .retour,
.marque .marque-nom {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--attenue);
  text-decoration: none;
}
.marque .retour:hover { color: var(--accent); }

/* À quoi sert ce site — la seule phrase qui le dise, et elle vivait sous
   l'éditeur, c'est-à-dire après quarante lignes de code. Elle tient sur la
   ligne de la marque : lue en une seconde, avant le titre, sans reprendre la
   place que la question posée doit occuper. */
.marque-quoi {
  font-size: 13px;
  color: var(--attenue);
  line-height: 1.4;
  margin-left: -4px;
}
.marque-quoi em { font-style: normal; color: var(--encre); box-shadow: inset 0 -.4em var(--accent-doux); }
@media (max-width: 560px) {
  .marque { gap: 4px 10px; }
  .marque-quoi { flex-basis: 100%; margin-left: 0; }
}
.marque:has(.retour) .rose,
.marque:has(.marque-nom) .rose { width: 19px; height: 19px; opacity: .7; }

.titre-modele {
  font-size: 27px;
  font-weight: 600;
  line-height: 1.2;
  margin: 14px 0 0;
  letter-spacing: -.01em;
}

/* ---------- Disposition ---------- */

/* La saisie d'abord, la réponse ensuite. C'est l'inverse de ce que cette
   feuille a porté des sessions 6 à 19 — « la réponse passe avant l'outil qui la
   produit » — et l'inversion a une raison, pas un nouveau lecteur : l'outil
   était un éditeur de code, et « personne n'a demandé à programmer en
   arrivant ». Depuis la session 18 c'est un formulaire en français, dont le
   premier champ se remplit sans rien apprendre. Ce n'est plus la même chose
   qu'on met devant.

   Septième passage, première lectrice qui ne connaissait pas le projet : « il
   faudrait commencer par la saisie des paramètres du modèle, et ensuite
   expliquer ». C'est l'ordre du DOM qui le porte : tabulation et lecteurs
   d'écran suivent la même route que l'œil. */
.atelier {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: 28px;
  align-items: start;
}

.colonne { display: flex; flex-direction: column; min-width: 0; }

@media (max-width: 940px) {
  /* minmax(0, 1fr) et non 1fr : le minimum d'une piste « 1fr » est la largeur
     min-content de son contenu, si bien qu'une seule ligne non sécable
     (l'échelle d'élargissement) élargissait la grille et donc la page. */
  .atelier { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ---------- La cinématique ---------- */

/* « Dans l'ergonomie, cette cinématique doit être explicite. » Les trois temps
   du site, écrits une fois en haut, et repris en pastille sur chaque panneau
   pour qu'on retrouve où l'on en est en scrollant. */
.cinematique {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 16px;
  padding: 0;
  font-size: 13px;
  color: var(--attenue);
}
.cinematique li { display: flex; align-items: center; gap: 7px; }
.cinematique li + li::before {
  content: "→";
  margin-right: 4px;
  color: var(--trait-fort);
}
.cinematique em { font-style: normal; }

.etape-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.etape-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--attenue);
}
.etape-titre em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.etape-trois { margin: 30px 0 10px; }

/* La réponse suit la saisie sur un téléphone. Le verdict courant en une ligne,
   tant que la réponse n'est pas à l'écran ; au-delà de 940 px les deux colonnes
   sont côte à côte et la barre n'existe pas. */
.barre-reponse { display: none; }

/* Sur un téléphone, la bande se casse en trois lignes et les flèches se
   retrouvent en début de ligne, où elles ne relient plus rien. Elle s'empile. */
@media (max-width: 560px) {
  .cinematique { display: grid; gap: 4px; }
  .cinematique li + li::before { content: none; }
}

@media (max-width: 940px) {
  .barre-reponse {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 20;
    display: none;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--trait-fort);
    background: var(--surface);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    text-decoration: none;
    color: var(--encre);
  }
  .barre-reponse.montre { display: flex; }
  .barre-etiquette {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--attenue);
  }
  .barre-texte {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.panneau {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 10px;
  box-shadow: var(--ombre);
}

/* ---------- Éditeur ---------- */

.editeur { position: relative; }

.editeur-entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--trait);
  font-size: 12px;
  color: var(--attenue);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.editeur-actions { display: flex; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; text-transform: none; letter-spacing: 0; }

.editeur-actions button {
  font: inherit;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--trait-fort);
  background: transparent;
  color: var(--attenue);
  cursor: pointer;
}
.editeur-actions button:hover { color: var(--encre); border-color: var(--encre); }

/* ---------- Le modèle comme formulaire ---------- */

/* Six champs « basse / haute » avec des libellés, à la place de quarante lignes
   de code : c'est ce que le lecteur extérieur attendait au cinquième passage,
   et le site avait déjà le mot français, l'unité et les intertitres. Le texte
   n'est pas remplacé, il est replié — c'est toujours lui la vérité. */
.reglages { padding: 4px 0 10px; }
.reglages[hidden] { display: none; }

.reglages-intro {
  margin: 0;
  padding: 12px 16px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--attenue);
}

/* Deux façons de répondre, pas une option : deux boutons, et celui qui est
   choisi se voit. Sixième passage : « donner deux bornes à 9 chances sur 10 est
   une chose que je ne sais pas faire ». */
.reglages-mode {
  display: flex;
  gap: 6px;
  padding: 0 16px 10px;
}

.mode-bouton {
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--trait-fort);
  border-radius: 999px;
  background: var(--papier);
  color: var(--attenue);
  cursor: pointer;
}
.mode-bouton:hover { color: var(--encre); }
.mode-bouton.choisi {
  background: var(--accent-doux);
  border-color: var(--accent);
  color: var(--encre);
  font-weight: 600;
}
.mode-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.reglages-titre {
  margin: 16px 0 2px;
  padding: 0 16px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--attenue);
}
.reglages-titre:first-child { margin-top: 4px; }

.reglage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  padding: 9px 16px;
  border-top: 1px solid var(--trait);
}
.reglages-titre + .reglage { border-top: 0; }

.reglage-tete { flex: 1 1 15ch; min-width: 0; }

.reglage-quoi {
  display: block;
  font-size: 14px;
  line-height: 1.35;
}

/* Le nom de la ligne n'apparaît que si le texte est ouvert. Sixième passage du
   lecteur extérieur : « sous chaque libellé français il y a un nom de variable
   dont je n'ai pas l'usage ». C'est une adresse — la ligne où aller dans le
   modèle —, et une adresse ne sert à rien quand il n'y a nulle part où aller.
   Texte ouvert, elle redevient le seul lien entre le champ et sa ligne. */
.reglage-nom { display: none; }
.reglages.avec-noms .reglage-nom { display: inline; }
.reglage-nom {
  font: inherit;
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--attenue);
  cursor: pointer;
  text-align: left;
}
.reglage-nom:hover { color: var(--accent); text-decoration: underline; }

.reglage-champs {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.reglage-case { display: flex; flex-direction: column; gap: 2px; }

.reglage-role {
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--attenue);
}

.reglage-champ {
  font: inherit;
  font-family: var(--mono);
  font-size: 13px;
  width: 8ch;
  padding: 5px 7px;
  text-align: right;
  border: 1px solid var(--trait-fort);
  border-radius: 6px;
  background: var(--papier);
  color: var(--encre);
}
.reglage-champ:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.reglage-champ[aria-invalid="true"] { border-color: var(--alerte); color: var(--alerte); }

.reglage-unite {
  font-size: 12.5px;
  color: var(--attenue);
  padding-bottom: 6px;
  white-space: nowrap;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* L'hypothèse que le verdict désigne, marquée là où on la règle. Sur ce fond
   plus soutenu, le gris atténué tombe sous 4,5:1 — axe le dit, et il a raison :
   ces trois éléments passent à l'encre pleine. */
.reglage.decisive { background: var(--accent-doux); }
.reglage.decisive .reglage-nom,
.reglage.decisive .reglage-role,
.reglage.decisive .reglage-unite { color: var(--encre); }
.reglage-note {
  flex: 1 1 100%;
  margin: 0;
  font-size: 12px;
  color: var(--accent);
}

/* Sous 560 px, le libellé prend sa ligne et les champs la leur : deux entrées
   de 8 caractères, une unité et une phrase en français ne tiennent pas côte à
   côte sur 390 px, et c'est là qu'on ouvre un lien partagé. */
@media (max-width: 560px) {
  .reglage { gap: 4px 10px; padding: 10px 14px; }
  .reglage-tete { flex: 1 1 100%; }
  .reglage-champs { flex: 1 1 100%; justify-content: flex-start; }
  .reglages-intro, .reglages-titre { padding-left: 14px; padding-right: 14px; }
  .reglages-mode { padding-left: 14px; padding-right: 14px; }
  /* « exceptionnellement » ne tient pas sur 8 caractères de champ : sous cette
     largeur, le mot passe au-dessus de son champ et la ligne respire. */
  .reglage-case { flex: 0 1 auto; min-width: 0; }
  .reglage-role { white-space: nowrap; }
}

/* ---------- Le texte, replié ---------- */

.texte-modele > summary {
  padding: 9px 16px;
  border-top: 1px solid var(--trait);
  font-size: 12px;
  color: var(--attenue);
  cursor: pointer;
  list-style-position: inside;
}
.texte-modele > summary:hover { color: var(--encre); }
.texte-modele[open] > summary { border-bottom: 1px solid var(--trait); }
.texte-modele:not([open]) > summary { border-radius: 0 0 10px 10px; }

#modele {
  display: block;
  width: 100%;
  min-height: 560px;
  resize: vertical;
  border: 0;
  border-radius: 0;
  padding: 16px 18px;
  background: transparent;
  color: var(--encre);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.62;
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
#modele:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Clavier : un contour visible et identique partout. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#contenu:focus { outline: none; }

/* Lien d'évitement : invisible jusqu'au premier Tab. */
.saut {
  position: absolute; left: 12px; top: -100px;
  padding: 8px 12px; border-radius: 6px;
  background: var(--accent); color: var(--surface);
  font-size: 14px; z-index: 10;
}
.saut:focus { top: 12px; }

/* Pour les lecteurs d'écran seulement : hors écran, jamais display:none. */
.annonce {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.erreur {
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--trait);
  background: var(--alerte-doux);
  color: var(--alerte);
  font-size: 13px;
  border-radius: 0 0 10px 10px;
}
.erreur code { font-family: var(--mono); }
.erreur[hidden] { display: none; }

/* Les avertissements ne bloquent rien : ton neutre, pas alarmiste. */
.avertissements {
  margin: 0;
  padding: 10px 14px 10px 30px;
  border-top: 1px solid var(--trait);
  font-size: 13px;
  color: var(--attenue);
  border-radius: 0 0 10px 10px;
}
.avertissements[hidden] { display: none; }
.avertissements li { margin: 3px 0; }
.avertissements li::marker { color: var(--alerte); }

.renvoi {
  font: inherit;
  font-family: var(--mono);
  font-size: 12px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--alerte);
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
}

/* ---------- Résultats ---------- */

.resultats { display: flex; flex-direction: column; gap: 22px; }

.bloc { padding: 20px 22px; }

.bloc h2 {
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--attenue);
  margin: 0 0 14px;
  font-weight: 600;
}

/* Verdict */

.verdict { border-left: 3px solid var(--accent); }

.verdict-chapeau {
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--attenue);
  margin: 0 0 6px;
}

.verdict .verdict-titre {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--encre);
}

.verdict .verdict-titre .unite { font-size: .55em; color: var(--attenue); margin-left: .2em; }

.verdict-phrase {
  margin: 0;
  font-size: 15.5px;
  max-width: 58ch;
  font-family: var(--serif);
}
.verdict-phrase + .verdict-phrase { margin-top: 10px; }
.verdict-phrase code, .cle {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--accent-doux);
  color: var(--accent);
  padding: .1em .35em;
  border-radius: 4px;
}

.serre { border-left-color: var(--alerte); }
.verdict.serre .verdict-titre { color: var(--alerte); }

/* Options */

.options { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.option-ligne { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline; }
.option-nom { font-weight: 600; }
.option-nom .fanion {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: 8px;
}
.option-valeur { font-family: var(--mono); font-size: 13.5px; text-align: right; white-space: nowrap; }
.option-jauge {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 3px;
  background: var(--trait);
  overflow: hidden;
}
.option-jauge i { display: block; height: 100%; background: var(--trait-fort); border-radius: 3px; }
.option-ligne.gagnante .option-jauge i { background: var(--accent); }
.option-detail { grid-column: 1 / -1; font-size: 12.5px; color: var(--attenue); margin-top: -2px; }

/* De quoi le nombre est le total, au-dessus des nombres. Sixième passage :
   « "Garder l'actuelle −19,1 k€" en tête : je ne sais pas de quoi ce nombre est
   le total. » */
.option-intro {
  margin: -4px 0 12px;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--attenue);
}
.verdict .option-intro { margin: 2px 0 10px; }

/* Liste des hypothèses */

.hypotheses { list-style: none; margin: 0; padding: 0; }

.hypothese {
  padding: 13px 0;
  border-top: 1px solid var(--trait);
}
.hypothese:first-child { border-top: 0; padding-top: 0; }

.hypothese-tete {
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: space-between;
}

.hypothese-nom {
  font-family: var(--mono);
  font-size: 13.5px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--encre);
  cursor: pointer;
  text-align: left;
  border-bottom: 1px dotted var(--trait-fort);
}
.hypothese-nom:hover { color: var(--accent); border-bottom-color: var(--accent); }

.hypothese-chiffre { font-size: 13px; color: var(--attenue); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hypothese-chiffre b { color: var(--encre); font-weight: 600; }

.barre { height: 5px; border-radius: 3px; background: var(--trait); margin: 7px 0 8px; overflow: hidden; }
.barre i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.barre.pale i { background: var(--trait-fort); }

.hypothese p { margin: 0; font-size: 13.5px; color: var(--attenue); }
/* Ce que l'hypothèse est, en français, sous son nom de code. Sans elle, la
   liste est une liste d'identifiants — c'est ce qu'a lu le premier visiteur. */
.hypothese .quoi { margin-top: 3px; font-size: 13px; }
.hypothese p + p { margin-top: 4px; }
.hypothese .bascule { color: var(--encre); }
.hypothese .plage { font-family: var(--mono); font-size: 12px; }

.rien { color: var(--attenue); font-size: 14px; margin: 0; max-width: 60ch; }

/* L'échelle d'élargissement : une ligne de chiffres, pas un tableau de bord. */
.echelle {
  max-width: 100%;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--attenue);
  margin: 12px 0 0;
  overflow-x: auto;
  white-space: nowrap;
}
.note-basse { margin-top: 14px; }

/* L'ouverture de l'accueil : un exemple travaillé, avec ses chiffres, avant
   que le visiteur ne voie la moindre ligne de code. Sans elle, le site
   s'ouvrait sur deux abstractions puis un éditeur — « abrupt », a dit le
   premier visiteur, et il avait raison. Ses chiffres sont épinglés par un
   test : ce sont ceux du modèle servi juste en dessous. */
.exemple-ouverture {
  max-width: 66ch;
  margin: 14px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--trait-fort);
}
.exemple-ouverture p { margin: 0; font-size: 15px; color: var(--attenue); }
.exemple-ouverture p + p { margin-top: 8px; }
.exemple-ouverture b { color: var(--encre); font-weight: 600; }
.exemple-ouverture .exemple-suite { font-size: 13.5px; margin-top: 10px; }

/* L'exemple lu, à l'étape 3 : les chiffres du modèle servi, une fois qu'on a vu
   le formulaire et la réponse. Il était au-dessus des deux jusqu'à la session
   20 — « il faudrait commencer par la saisie des paramètres du modèle, et
   ensuite expliquer ». Comme l'ouverture, il disparaît dès que le texte à
   l'écran n'est plus celui que la page sert (`ajusterOuverture`). */
.exemple-lu { padding: 16px 20px; margin-bottom: 18px; }
.exemple-lu p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--attenue); max-width: 78ch; }
.exemple-lu b { color: var(--encre); font-weight: 600; }

/* Aller savoir, ou décider maintenant. Une entrée par ligne « savoir ».
   Même trait de séparation que la liste des hypothèses : c'est la même
   matière, lue sous l'angle de la dépense. */
.attente { padding: 13px 0; border-top: 1px solid var(--trait); }
.attente:first-of-type { border-top: 0; padding-top: 0; }
.attente .verdict-phrase { margin-top: 7px; }
.attente .bascule {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--encre);
  max-width: 58ch;
}

/* La note de tolérance du panneau d'aide : ce que le site accepte sans qu'on
   ait à le deviner. Elle suit un tableau, d'où la marge haute. */
.aide-note { margin: 14px 0 0; color: var(--attenue); font-size: 13.5px; max-width: 72ch; }

/* Le contre-argument : un scénario, pas un tableau. Chaque ligne se lit comme
   une phrase — « prix_m2, de 49,6 à 60,4, 37 % de l'écart » — et la grille sert
   seulement à aligner les colonnes pour qu'on puisse les comparer d'un coup. */
.contre-liste { list-style: none; margin: 14px 0 16px; padding: 0; }
.contre-liste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--trait);
}
.contre-liste li:first-child { border-top: 0; }
.contre-nom {
  font-family: var(--mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.contre-valeurs {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.contre-valeurs b { font-weight: 600; }
.contre-avant { color: var(--attenue); }
.contre-part {
  font-size: 12.5px;
  color: var(--attenue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 4ch;
  text-align: right;
}
.contre-hors {
  grid-column: 2 / -1;
  justify-self: start;
  font-size: 11.5px;
  color: var(--alerte);
  background: var(--alerte-doux);
  border-radius: 3px;
  padding: 1px 6px;
}
@media (max-width: 560px) {
  /* Le nom passe sur sa propre ligne : « revenu_regulier » et « 1 077 → 1 109 »
     ne tiennent pas côte à côte sur un écran de téléphone. */
  .contre-liste li { grid-template-columns: minmax(0, 1fr) auto; }
  .contre-nom { grid-column: 1 / -1; }
}

/* La robustesse : même forme dépliante que le détail des calculs, et pour la
   même raison — c'est une épreuve du résultat, pas le résultat. Elle occupait
   un panneau ouvert entre la réponse et le détail, avec ce que la page a de
   plus mathématique dedans (« 1,25× 63 % · 1,5× 61 % »). */
#robustesse > summary {
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--attenue);
  font-weight: 600;
}
#robustesse > summary::-webkit-details-marker { display: none; }
#robustesse > summary::before { content: "+ "; }
#robustesse[open] > summary::before { content: "\2212  "; }
#robustesse > summary:hover { color: var(--encre); }
#robustesse[open] > summary { margin-bottom: 14px; }

/* Le détail des calculs : un panneau dépliant, parce que c'est une lecture de
   vérification, pas le verdict. Trois colonnes — nom, médiane, fourchette —
   et les termes d'une somme en retrait, avec une jauge de leur poids. */
.detail summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.detail summary::-webkit-details-marker { display: none; }
.detail summary h2 { margin: 0; }
.detail summary h2::before { content: "+ "; color: var(--attenue); }
.detail[open] summary h2::before { content: "\2212  "; }
.detail-compte { font-size: 12.5px; color: var(--attenue); }
.detail > .rien { margin-top: 12px; }
.detail-liste { list-style: none; margin: 14px 0 0; padding: 0; }
.detail-liste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(72px, 38%);
  gap: 4px 12px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid var(--trait);
}
.detail-liste li:first-child { border-top: 0; }
.detail-liste li.terme { border-top: 0; padding: 2px 0 2px 16px; }
.detail-liste li.terme + li:not(.terme) { margin-top: 4px; }
.detail-nom {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--encre);
  overflow-wrap: anywhere;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  justify-self: start;
}
button.detail-nom { cursor: pointer; border-bottom: 1px dotted var(--trait-fort); }
button.detail-nom:hover { color: var(--accent); border-bottom-color: var(--accent); }
.terme .detail-nom { color: var(--attenue); font-size: 12.5px; }
.terme-signe { display: inline-block; width: 1.1em; color: var(--attenue); }
.detail-val {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.terme .detail-val { font-size: 12.5px; color: var(--attenue); }
.detail-plage {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--attenue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.terme .barre { margin: 0; height: 4px; align-self: center; }
.detail-liste li.origines {
  display: block;
  border-top: 0;
  padding: 0 0 4px 16px;
  font-size: 12.5px;
  color: var(--attenue);
}
.detail-liste li.origines code { font-family: var(--mono); font-size: 12px; color: var(--encre); }
@media (max-width: 560px) {
  .detail-liste li { grid-template-columns: minmax(0, 1fr) auto; }
  .detail-plage { grid-column: 1 / -1; text-align: left; }
  .terme .barre { grid-column: 1 / -1; }
}

/* Distribution */

.distribution { margin: 0; }
.distribution svg { display: block; width: 100%; height: 96px; overflow: visible; }
.distribution .aire { fill: var(--accent); opacity: .16; }
.distribution .contour { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.distribution .central { fill: var(--accent); opacity: .13; }
.distribution .mediane { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.distribution .seuil { stroke: var(--alerte); stroke-width: 1.5; }
.distribution .zero { stroke: var(--trait-fort); stroke-width: 1; }

/* La fourchette d'une hypothèse, et le seuil qui la coupe.
   En HTML positionné : les étiquettes doivent rester nettes à toute largeur,
   ce qu'un SVG en preserveAspectRatio="none" ne permet pas. */
.fourchette { margin: 8px 0 2px; }
.fourchette-piste { flex: 1 1 auto; min-width: 0; }
.fourchette-piste svg { display: block; width: 100%; height: 26px; }
.fourchette-piste .aire { fill: var(--accent); opacity: .2; }
/* La part de la densité qui est du mauvais côté du seuil. Sur une densité,
   cette aire vaut la proportion annoncée à côté ; sur un segment colorié à
   l'échelle des valeurs, elle ne la vaudrait pas — c'est la raison d'être de
   ce dessin plutôt que d'une barre pleine. */
.fourchette-piste .aire-bascule { fill: var(--alerte); opacity: .3; }
.fourchette-piste .contour { fill: none; stroke: var(--encre); stroke-opacity: .42; stroke-width: 1.1; }
.fourchette-piste .central { fill: var(--accent); opacity: .1; }
.fourchette-piste .mediane { stroke: var(--encre); stroke-opacity: .55; stroke-width: 1.4; stroke-dasharray: 3 2; }
.fourchette-piste .seuil { stroke: var(--alerte); stroke-width: 1.6; }

.fourchette-sous { position: relative; height: 17px; margin-top: 2px; }
.fourchette-etiquette {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--attenue);
}
/* Près d'un bord, l'étiquette s'ancre par son bout plutôt que par son milieu :
   translateX(-50%) la ferait déborder du cadre. */
.fourchette-etiquette.a-gauche { transform: none; }
.fourchette-etiquette.a-droite { transform: translateX(-100%); }
.fourchette-etiquette { font-family: var(--mono); }
.fourchette-etiquette.seuil { font-family: var(--sans); }
.fourchette-etiquette b { color: var(--alerte); }

@media (max-width: 480px) {
  .fourchette-etiquette { font-size: 10.5px; }
}

/* La distribution de l'écart, en mode décision : deux aires que zéro sépare.
   Le vert et l'ocre du site sont déjà les couleurs du « ça tient » et du « fais
   attention » ailleurs dans la page — on ne réinvente pas une palette pour un
   dessin, sinon il faut l'expliquer. */
.distribution.pari { margin: 16px 0 4px; }
.distribution.pari svg { height: 104px; }
.distribution.pari .aire-gain { fill: var(--accent); opacity: .2; }
.distribution.pari .aire-perte { fill: var(--alerte); opacity: .2; }
.distribution.pari .contour { stroke: var(--encre); stroke-opacity: .5; stroke-width: 1.25; }
.distribution.pari .zero { stroke: var(--encre); stroke-width: 1.5; stroke-opacity: .75; }
.distribution.pari .pire { stroke: var(--alerte); stroke-width: 1; stroke-dasharray: 3 3; }

.pari-legende { display: flex; margin-top: 7px; font-size: 12px; line-height: 1.35; }
.pari-cote { box-sizing: border-box; color: var(--attenue); }
.pari-cote b { color: var(--encre); }
/* Chaque moitié fait la largeur de son aire : la légende est alignée sur le
   dessin, elle n'est pas une liste de couleurs à décoder sous le graphique. */
.pari-cote.perte { padding-right: 8px; border-top: 2px solid var(--alerte); padding-top: 5px; }
.pari-cote.gain { padding-left: 8px; text-align: right; border-top: 2px solid var(--accent); padding-top: 5px; }
.exemple-suite a { display: inline-block; margin-top: 4px; }

.pari-note { margin-top: 8px; font-size: 12px; color: var(--attenue); line-height: 1.45; }
.distribution.pari .axe { margin-top: 5px; }

/* Sous 420 px, deux colonnes de largeur inégale deviennent deux colonnes de
   deux mots : la légende repasse en pile, alignée à gauche, et perd le calage. */
@media (max-width: 420px) {
  .pari-legende { display: block; }
  .pari-cote { display: block; width: auto !important; text-align: left; padding: 5px 0 0; }
  .pari-cote.gain { margin-top: 6px; }
}

.axe {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--attenue);
  margin-top: 6px;
}

/* ---------- Aide ---------- */

.aide { margin-top: 22px; }
.aide summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--attenue);
  padding: 12px 16px;
  list-style: none;
}
.aide summary::-webkit-details-marker { display: none; }
.aide summary::before { content: "+ "; }
.aide[open] summary::before { content: "\2212  "; }
.aide summary:hover { color: var(--encre); }
.aide-corps { padding: 0 18px 18px; font-size: 13.5px; }
.aide-corps h3 { font-size: 13px; margin: 16px 0 6px; }
.aide-corps table { border-collapse: collapse; width: 100%; font-size: 13px; }
.aide-corps td { padding: 4px 10px 4px 0; vertical-align: top; border-top: 1px solid var(--trait); }
.aide-corps td:first-child { font-family: var(--mono); white-space: nowrap; color: var(--accent); }
.aide-corps p { color: var(--attenue); max-width: 70ch; }
.aide-corps code { font-family: var(--mono); background: var(--papier); padding: .1em .3em; border-radius: 3px; }

/* ---------- Page de contenu ---------- */

.article {
  margin-top: 8px;
  padding: 32px 40px 36px;
}

.article > p, .chapitre p {
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 68ch;
  margin: 0 0 14px;
}

.article > p:first-child {
  font-family: var(--serif);
  font-size: 18px;
}

.chapitre { margin-top: 38px; }

.chapitre h2 {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--trait);
}

.article code, .chapitre code {
  font-family: var(--mono);
  font-size: .87em;
  background: var(--papier);
  padding: .1em .3em;
  border-radius: 3px;
}
.article b, .chapitre b { font-weight: 600; }

/* La réponse que le site donne à l'exemple qui précède. */
.reponse {
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 14px;
  color: var(--accent);
  font-family: var(--serif);
}
.reponse code { background: var(--accent-doux); color: inherit; }

/* Les questions du bas d'une page de contenu. Elles sont servies dépliées :
   ce sont les questions qu'on se pose avant de faire confiance à un calcul, et
   les replier obligerait à cliquer sept fois pour lire ce que le site déclare
   par ailleurs aux moteurs de recherche. */
.faq-item { margin: 0 0 22px; }

.faq-item h3 {
  font-family: var(--serif);
  font-size: 17.5px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--accent);
}

.faq-item p { margin-bottom: 8px; }

.retour-outil { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--trait); }

@media (max-width: 700px) {
  .article { padding: 20px 18px 24px; }
  .chapitre h2 { font-size: 20px; }
  .article > p, .chapitre p { font-size: 15px; }
}

/* ---------- Texte de fond ---------- */

.fond {
  margin-top: 22px;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.fond-part h2 {
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--attenue);
  margin: 0 0 10px;
  font-weight: 600;
}

.fond-part p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--encre);
  max-width: 46ch;
}
.fond-part p:last-child { margin-bottom: 0; }
.fond-part b { font-weight: 600; }
.fond-part code {
  font-family: var(--mono);
  font-size: .87em;
  background: var(--papier);
  padding: .1em .3em;
  border-radius: 3px;
}

.exemple, .fond .exemple {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  background: var(--papier);
  border: 1px solid var(--trait);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 10px;
  overflow-x: auto;
}
.fond .exemple code { background: none; padding: 0; }

@media (max-width: 940px) {
  .fond { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px; }
  .fond-part p { max-width: none; }
}

/* ---------- Pied ---------- */

footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--trait);
  font-size: 13px;
  color: var(--attenue);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
footer p { margin: 0; max-width: 62ch; }

.copie-ok { color: var(--vert); }

/* Le panneau d'aide est un tableau à deux colonnes dont la première ne se coupe
   pas : sur écran étroit il débordait la page entière. Les colonnes s'empilent. */
@media (max-width: 700px) {
  .aide-corps table, .aide-corps tbody, .aide-corps tr, .aide-corps td { display: block; }
  .aide-corps tr { border-top: 1px solid var(--trait); padding: 9px 0; }
  .aide-corps tr:first-child { border-top: 0; }
  .aide-corps td { border-top: 0; padding: 0; }
  .aide-corps td:first-child { white-space: normal; margin-bottom: 3px; font-size: 12.5px; }
}

@media (max-width: 560px) {
  header { padding: 26px 0 20px; }
  .enveloppe { padding: 0 14px 48px; }
  .marque h1 { font-size: 25px; }
  .marque .retour { font-size: 17px; }
  .baseline { font-size: 16px; }
  .sous-baseline { font-size: 13.5px; }
  .titre-modele { font-size: 22px; }
  .exemples { gap: 6px; }
  .exemples .puce { font-size: 12px; padding: 4px 10px; }
  .verdict .verdict-titre { font-size: 25px; }
  .verdict-phrase { font-size: 15px; }
  .bloc { padding: 16px; }
  #modele { min-height: 340px; font-size: 12.5px; }
  .hypothese-tete { flex-wrap: wrap; gap: 2px 10px; }
}