/* ---------------------------------------------------------------
   /exemple — le banc d'essai

   La page se déplie avec la largeur, sans jamais serrer les tableaux
   sous ~340 px, en dessous de quoi les libellés se cassent :

     < 1100   une colonne, le rapport d'abord, l'instrumentation dessous
     ≥ 1100   rapport | panneau (profil au-dessus du reste)
     ≥ 1400   rapport | profil | debug
     ≥ 1900   rapport | profil | ce que les réponses fabriquent
                               | ce que le moteur en fait

   Chaque colonne d'instrumentation défile pour son compte, collée en
   haut : on lit le rapport sans perdre le tableau qu'on consultait.
   --------------------------------------------------------------- */
.lab { padding: 0 var(--pad); }
.lab__report { max-width: var(--measure); margin: 0 auto; }
.lab__panel { max-width: var(--measure); margin: 30px auto 0; }

/* le bloc collant, décliné sur l'élément qui porte la colonne */
.lab__panel, .lab__debug, .lab__pane {
  --lab-pad: 18px 22px 40px;
}

@media (min-width: 1100px) {
  .lab {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 42%);
    gap: clamp(20px, 3vw, 56px);
    align-items: start;
    padding-right: 0;
  }
  /* même retrait des deux côtés : sans padding à droite, le texte venait
     buter sur le filet du panneau */
  .lab__report {
    grid-column: 1; grid-row: 1;
    margin: 0 0 0 clamp(8px, 2vw, 48px);
    padding-right: clamp(8px, 2vw, 48px);
    max-width: calc(var(--measure) + clamp(8px, 2vw, 48px));
  }
  .lab__panel {
    grid-column: 2; grid-row: 1;
    max-width: none; margin: 0;
    position: sticky; top: 0;
    /* pleine hauteur : sinon le filet de séparation s'arrête avec le contenu */
    min-height: 100dvh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--lab-pad);
    border-left: 1px solid var(--hair);
    background: var(--panel-soft);
  }
  .lab__panel::-webkit-scrollbar, .lab__pane::-webkit-scrollbar,
  .lab__debug::-webkit-scrollbar { width: 3px; }
  .lab__panel::-webkit-scrollbar-thumb, .lab__pane::-webkit-scrollbar-thumb,
  .lab__debug::-webkit-scrollbar-thumb { background: var(--hair); }
}

/* Le profil prend sa propre colonne : le debug ne le pousse plus vers le bas. */
@media (min-width: 1400px) {
  .lab {
    grid-template-columns: minmax(0, 1.1fr) minmax(330px, .8fr) minmax(340px, .85fr);
    gap: clamp(18px, 2vw, 40px);
  }
  .lab__panel { display: contents; }

  .lab__pane--profile, .lab__debug,
  .lab[data-solo] .lab__pane--a, .lab[data-solo] .lab__pane--b {
    grid-row: 1;
    position: sticky; top: 0;
    /* pleine hauteur : sinon le filet de séparation s'arrête avec le contenu */
    min-height: 100dvh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--lab-pad);
    border-left: 1px solid var(--hair);
    background: var(--panel-soft);
  }
  .lab__pane--profile { grid-column: 2; }
  .lab__debug { grid-column: 3; }
}

/* Quatre colonnes : ce que les réponses fabriquent d'un côté, ce que le
   moteur en fait de l'autre. En dessous de 1900 px ce serait au prix de la
   lisibilité des tableaux — ils resteraient sous 340 px. */
@media (min-width: 1900px) {
  .lab { grid-template-columns: minmax(0, 1.05fr) repeat(3, minmax(340px, .8fr)); }
  .lab__debug { display: contents; }
  .lab__pane--a, .lab__pane--b {
    grid-row: 1;
    position: sticky; top: 0;
    /* pleine hauteur : sinon le filet de séparation s'arrête avec le contenu */
    min-height: 100dvh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--lab-pad);
    border-left: 1px solid var(--hair);
    background: var(--panel-soft);
  }
  .lab__pane--a { grid-column: 3; }
  .lab__pane--b { grid-column: 4; }
}

/* --- volets --- */
.fold { border-bottom: 1px solid var(--hair-soft); }
.fold__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 0;
  cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.fold__head::-webkit-details-marker { display: none; }
.fold__head h3 {
  font-family: var(--serif); font-size: 23px; font-weight: 400; letter-spacing: -.015em;
  transition: color var(--t-fast) var(--ease);
}
.fold__head:hover h3 { color: var(--accent); }
.fold__head:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.fold__more { display: flex; align-items: center; gap: 12px; flex: none; min-width: 0; }
.fold__more .meta { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }

/* Le volet Profil porte quatre commandes : sur un écran étroit la ligne
   déborde. Le titre et le libellé cèdent, jamais les boutons. */
@media (max-width: 480px) {
  .fold__head { gap: 8px; }
  .fold__head h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fold__more { flex: 0 1 auto; gap: 8px; }
  .fold__more .meta {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 9.5px; letter-spacing: .08em;
  }
  .fold__act { width: 26px; height: 26px; font-size: 12px; }
}
.fold__chev {
  width: 7px; height: 7px; border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}
.fold[open] .fold__chev { transform: translateY(1px) rotate(-135deg); }
.fold__body { padding-bottom: 24px; }

/* le bouton logé dans l'en-tête d'un volet */
.fold__act {
  width: 30px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair);
  color: var(--accent); font-size: 14px; line-height: 1;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-med) var(--ease-out);
}
.fold__act:hover { border-color: var(--accent); transform: rotate(180deg); }

/* --- textes d'appui --- */
.lab__note {
  font-size: 12.5px; line-height: 1.5; color: var(--bone-45);
  margin-bottom: 14px; text-wrap: pretty;
}
.lab__note b { color: var(--bone-70); font-weight: 400; }
.lab__warn {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5; letter-spacing: .04em;
  color: var(--accent); border-left: 1px solid var(--accent);
  padding: 6px 0 6px 10px; margin-bottom: 14px;
}
.lab__select {
  width: 100%; margin-bottom: 14px; padding: 9px 10px;
  background: var(--ink-1); color: var(--bone);
  border: 1px solid var(--hair);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
}

/* --- chiffres clés --- */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.kpis > div { border-top: 1px solid var(--hair); padding-top: 9px; }
.kpis b {
  display: block; font-family: var(--mono); font-size: 17px; font-weight: 400;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.kpis span {
  display: block; margin-top: 3px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bone-45); line-height: 1.35;
}

/* --- profil : une réponse et ce qu'elle injecte ---
   Libellé à gauche, réponse et effets à droite : les quinze questions
   tiennent alors dans la colonne sans avoir à la faire défiler. */
.prows { border-top: 1px solid var(--hair); }
.prow {
  display: grid; grid-template-columns: minmax(58px, 24%) minmax(0, 1fr);
  gap: 3px 10px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--hair-soft);
}
.prow__q {
  display: flex; gap: 7px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--bone-45); line-height: 1.5;
}
.prow__q span { color: var(--accent); }
.prow__a { font-size: 13px; color: var(--bone); line-height: 1.25; }
.prow__fx { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }

/* En colonne étroite les deux blocs se rempilent, sinon la réponse
   se casse mot à mot. */
@media (max-width: 419px) {
  .prow { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}
.prow__fx.is-none {
  font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--bone-28);
}
/* Serrées à dessein : c'est ce qui permet aux quinze questions de tenir
   dans la colonne sans la faire défiler. */
.chip-w, .chip-t {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 1px 5px; border: 1px solid var(--hair-soft);
  font-family: var(--mono); font-size: 9px; letter-spacing: .02em; color: var(--bone-45);
  white-space: nowrap; line-height: 1.5;
}
.chip-w b { color: var(--bone); font-weight: 400; font-variant-numeric: tabular-nums; }
.chip-t { border-color: color-mix(in srgb, var(--accent) 34%, transparent); color: var(--accent); }
.chip-t b { color: var(--accent); font-weight: 400; }
/* Une cible écrasée doit rester lisible : c'est une information, pas un
   déchet. On la sort de l'accent et on la barre, sans la faire disparaître. */
.chip-t.is-dead {
  color: var(--bone-45); border-color: var(--hair-soft);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--bone-45) 55%, transparent);
  text-decoration-thickness: 1px;
}
.chip-t.is-dead b { color: var(--bone-45); }
.chip-w, .chip-t { cursor: help; }

/* --- lignes chiffrées : poids, cibles, influence --- */
.wrows { border-top: 1px solid var(--hair); }
.wrow {
  display: grid; grid-template-columns: minmax(64px, 1.3fr) minmax(78px, 1fr) 1fr 42px 48px;
  gap: 8px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--hair-soft);
  font-family: var(--mono); font-size: 10.5px; font-variant-numeric: tabular-nums;
}
/* même principe dans les tableaux : atténuée, jamais illisible */
.wrow.is-dead .wrow__n, .wrow.is-dead .wrow__v {
  color: var(--bone-45); text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--bone-45) 55%, transparent);
}
.wrow.is-dead .wrow__m, .wrow.is-dead .wrow__p { color: var(--bone-45); }
.wrow.is-dead .wrow__rail i { background: var(--bone-45); }
.wrow__n { color: var(--bone); letter-spacing: .02em; min-width: 0; overflow-wrap: anywhere; }
.wrow__m { color: var(--bone-45); font-size: 9.5px; letter-spacing: .04em; }
.wrow__m[data-mode="max"] { color: var(--bone-28); }
/* la cible collée à son mode : « cible 93 » se lit d'un bloc */
.wrow__m em {
  font-style: normal; margin-left: 4px;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.wrow.is-dead .wrow__m em { color: var(--bone-45); }

/* La barre de poids se lit en deux temps : le socle posé d'office, puis ce
   que les réponses ont ajouté. Les deux couches sont superposées, la
   seconde découpée pour ne peindre que son propre segment. */
.wrow__b { position: relative; height: 4px; background: var(--hair-soft); overflow: hidden; }
/* Deux segments posés bout à bout, en pourcentages : mesurable, et sans la
   subtilité d'un clip-path sur un élément transformé. */
.wrow__b i {
  position: absolute; top: 0; bottom: 0; left: 0;
  display: block; background: var(--accent);
  transition: width var(--t-med) var(--ease-out), left var(--t-med) var(--ease-out);
}
/* Le socle reste de la même famille que le reste — c'est du poids, il n'a
   simplement pas été demandé. En clair, --bone-28 est presque noir et se
   confondait avec l'accent : un accent dilué se distingue mieux. */
.wrow__b i.is-base { background: color-mix(in srgb, var(--accent) 32%, transparent); }

/* Une cible est un point sur une échelle, pas une quantité : un repère,
   jamais une barre qui se remplit — la remplir dirait « plus, c'est mieux »,
   ce qui est exactement le contraire de ce que fait une cible. */
.wrow__rail { position: relative; height: 12px; }
.wrow__rail::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--hair);
}
.wrow__rail::after {
  content: ''; position: absolute; left: 50%; top: 3px; bottom: 3px;
  width: 1px; background: var(--hair-soft);
}
.wrow__rail i {
  position: absolute; top: 1px; bottom: 1px; width: 2px;
  margin-left: -1px; background: var(--accent);
  transition: left var(--t-med) var(--ease-out);
}

/* l'en-tête nomme les colonnes : sans lui on devine ce qu'on lit */
.wrow--head {
  color: var(--bone-28); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; padding: 4px 0 6px;
  border-bottom-color: var(--hair);
}
.wrow--head span:nth-child(4), .wrow--head span:nth-child(5) { text-align: right; }

/* la légende des deux tons de la barre de poids */
.wlegend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin-bottom: 10px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bone-45);
}
.wlegend__k {
  width: 14px; height: 4px; flex: none; background: var(--accent);
  margin-right: -8px;
}
.wlegend__k--base { background: color-mix(in srgb, var(--accent) 32%, transparent); }
.wrow__v { text-align: right; color: var(--bone); }
.wrow__p {
  text-align: right; color: var(--bone-45); font-size: 9.5px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* En dessous de deux colonnes, la place manque : la part chiffrée saute,
   la barre et la valeur suffisent à comparer. */
@media (max-width: 699px) {
  .wrow { grid-template-columns: minmax(0, 1.7fr) 68px 1fr 42px; gap: 7px; font-size: 10px; }
  .wrow__p, .wrow--head span:nth-child(5) { display: none; }
  .crow { grid-template-columns: minmax(0, 1.6fr) 28px 38px 40px 1fr; gap: 6px; font-size: 10px; }
}

/* --- calcul : la décomposition d'un score --- */
.calc__head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--hair);
}
.calc__rank { font-family: var(--mono); font-size: 10.5px; color: var(--bone-45); }
.calc__name { flex: 1; font-size: 16px; }
.calc__aff { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.crows { margin-bottom: 14px; }
.crow {
  display: grid; grid-template-columns: minmax(66px, 1.5fr) 32px 40px 44px 1fr;
  gap: 8px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--hair-soft);
  font-family: var(--mono); font-size: 10.5px; font-variant-numeric: tabular-nums;
}
.crow--head { color: var(--bone-28); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.crow--head span:nth-child(-n+4) { text-align: right; }
.crow--head span:first-child { text-align: left; }
.crow__n { color: var(--bone); min-width: 0; overflow-wrap: anywhere; }
.crow__s, .crow__w, .crow__pt { text-align: right; color: var(--bone-70); }
.crow__s[data-lo="true"] { color: var(--band-hot); }
.crow__pt { color: var(--bone); }
.crow__b { height: 3px; background: var(--hair-soft); overflow: hidden; }
.crow__b i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
.calc__sum { border-top: 1px solid var(--hair); }
.calc__sum > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--hair-soft);
  font-family: var(--mono); font-size: 10.5px;
}
.calc__sum dt { color: var(--bone-45); letter-spacing: .06em; }
.calc__sum dd { color: var(--bone); font-variant-numeric: tabular-nums; }
.calc__sum > div:last-child dd, .calc__sum > div:nth-last-child(2) dd { color: var(--accent); }

/* --- flux : réponses → dimensions ---
   Sous ~540 px le texte du schéma tomberait sous 6 px : on le laisse
   défiler à sa taille utile plutôt que de le réduire. */
.flow__scroll { overflow-x: auto; overscroll-behavior-x: contain; margin-top: 4px; }
.flow { width: 100%; min-width: 520px; height: auto; display: block; }
/* l'opacité de repos passe par une variable : la sélection écrase la
   déclaration finale sans avoir à rejouer chaque cas */
.flow__links path {
  fill: none; stroke: var(--bone-28);
  opacity: var(--o, .5);
  transition: opacity 320ms var(--ease), stroke 320ms var(--ease);
}
.flow__links path.is-target { stroke: var(--accent); --o: .72; }
.flow__links path.is-base { stroke-dasharray: 2 3; --o: .3; }

.flow__q, .flow__d {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; fill: var(--bone-70);
}
.flow__q.is-base, .flow__d.is-base { fill: var(--bone-28); }
.flow__d.is-target { fill: var(--accent); }
.flow__w { fill: var(--bone-28); }
.flow__dot { fill: var(--bone-28); }
.flow__dot.is-target { fill: var(--accent); }
.flow__dot.is-base { fill: var(--hair); }
.flow__key.is-target { color: var(--accent); font-weight: 400; }
/* `.lab__note b` l'emporterait sinon : l'invite doit rester en retrait */
.lab__note .flow__hint { display: block; margin-top: 8px; color: var(--bone-45); font-weight: 400; }

/* --- flux : un libellé retenu éteint tout ce qu'il ne touche pas --- */
.flow__node { cursor: pointer; transition: opacity 320ms var(--ease); }
.flow__hit { fill: transparent; pointer-events: all; }
.flow__node:focus { outline: none; }
.flow__node:focus-visible .flow__hit { fill: color-mix(in srgb, var(--accent) 12%, transparent); }

.flow__node.is-off { opacity: .2; }
.flow__node.is-sel .flow__q,
.flow__node.is-sel .flow__d { fill: var(--accent); }
.flow__node.is-sel .flow__dot { fill: var(--accent); }
.flow__node.is-sel .flow__w { fill: var(--bone-45); }

.flow__links path.is-off { opacity: .05; }
.flow__links path.is-on  { opacity: .95; }

/* =============================================================
   Le repli du rapport — la commande vit en tête du rapport
   ============================================================= */
.report__bar {
  display: flex; justify-content: flex-end;
  padding: max(14px, env(safe-area-inset-top)) 0 8px;
  border-bottom: 1px solid var(--hair-soft);
  margin-bottom: 6px;
}
.lab__solo {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 0 6px 4px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone-45);
  transition: color var(--t-fast) var(--ease);
}
.lab__solo:hover { color: var(--accent); }
/* deux colonnes qui se replient en une : l'icône dit l'état */
.lab__solo__i {
  width: 16px; height: 11px; flex: none; position: relative;
  border: 1px solid currentColor;
}
.lab__solo__i::after {
  content: ''; position: absolute; top: -1px; bottom: -1px; left: 5px;
  border-left: 1px solid currentColor;
  transition: left var(--t-med) var(--ease-out), opacity var(--t-fast) var(--ease);
}
.lab__solo[aria-pressed="true"] .lab__solo__i::after { left: -1px; opacity: 0; }

/* Rapport replié : la place libérée passe au banc d'essai. Ces règles
   viennent après la mise en page de base — à spécificité égale, c'est
   l'ordre qui tranche, et c'est le repli qui doit gagner. */
/* Le corps s'en va, pas la commande : sans elle on ne pourrait plus
   rouvrir le rapport. .lab__report passe en display:contents pour ne plus
   occuper de colonne, et la barre part en position fixe — un élément fixe
   n'occupe aucune piste de la grille. */
.lab[data-solo] .lab__report { display: contents; }
.lab[data-solo] .report__body { display: none; }
.lab[data-solo] .report__bar {
  position: fixed; z-index: 30;
  top: 0; right: clamp(12px, 2vw, 30px);
  padding: 10px 0 8px; border-bottom: 0; margin: 0;
}

@media (min-width: 1100px) and (max-width: 1399px) {
  .lab[data-solo] { grid-template-columns: minmax(0, 1fr); padding-right: var(--pad); }
  .lab[data-solo] .lab__panel {
    grid-column: 1; grid-row: 1;
    position: static; max-height: none; overflow: visible;
    border-left: 0; background: none;
    padding-left: clamp(8px, 2vw, 48px); padding-right: clamp(8px, 2vw, 48px);
  }
}

/* Au-delà, le banc d'essai prend directement ses trois colonnes —
   profil, ce que les réponses fabriquent, ce que le moteur en fait. */
@media (min-width: 1400px) {
  .lab[data-solo] { grid-template-columns: repeat(3, minmax(330px, 1fr)); }
  .lab[data-solo] .lab__debug { display: contents; }
  .lab[data-solo] .lab__pane--profile { grid-column: 1; border-left: 0; }
  .lab[data-solo] .lab__pane--a { grid-column: 2; }
  .lab[data-solo] .lab__pane--b { grid-column: 3; }
}

/* =============================================================
   Les modales d'explication
   ============================================================= */
/* Le conteneur ne porte rien : sans hauteur ni placement, il ne prend pas
   de colonne quand .lab__panel passe en display:contents. Une modale
   ouverte part de toute façon dans la couche supérieure. */
.lab__docs { display: contents; }

.doc {
  width: min(660px, calc(100vw - 28px));
  max-height: min(82dvh, 760px);
  padding: 0; border: 1px solid var(--hair);
  background: var(--ink-1); color: var(--bone);
  flex-direction: column; overflow: hidden;
}
/* le display ne se pose qu'à l'ouverture : sinon il écrase le display:none
   que le navigateur applique à un <dialog> fermé, et les sept modales se
   retrouvent rendues dans la page */
.doc[open] { display: flex; }
.doc::backdrop { background: var(--scrim); }
.doc[open] { animation: docIn 340ms var(--ease-out); }
.doc[open]::backdrop { animation: docVeil 340ms var(--ease) }
@keyframes docIn   { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes docVeil { from { opacity: 0; } }

.doc__head {
  /* centré, pas aligné sur la ligne de base : le bouton × est une boîte de
     30 px dont la baseline poussait le titre de trente pixels vers le bas */
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 20px 15px;
  border-bottom: 1px solid var(--hair);
  flex: none;
}
.doc__title {
  font-family: var(--serif); font-size: 24px; font-weight: 400;
  letter-spacing: -.015em; line-height: 1.12; text-wrap: balance;
}
.doc__x {
  flex: none; width: 30px; height: 30px; margin-right: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: var(--bone-45);
  transition: color var(--t-fast) var(--ease);
}
.doc__x:hover { color: var(--accent); }

.doc__body {
  padding: 16px 20px 24px;
  overflow-y: auto; overscroll-behavior: contain;
  font-size: 14px; line-height: 1.62; color: var(--bone-70);
  text-wrap: pretty;
}
.doc__body > * + * { margin-top: 12px; }
.doc__body b { color: var(--bone); font-weight: 500; }
.doc__body i { color: var(--bone-45); }
/* Le tiret est posé en absolu, pas en grille : une grille sur le <li> ferait
   de chaque nœud inline (<b>, <code>, texte) un élément de grille distinct et
   casserait la phrase en morceaux. */
.doc__body ul { display: grid; gap: 8px; padding-left: 0; }
.doc__body li { position: relative; padding-left: 21px; }
.doc__body li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 10px; height: 1px; background: var(--accent);
}
.doc__body code {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em;
  color: var(--bone); background: var(--wash-2); padding: 1px 4px;
}

/* la formule, isolée */
.doc__f {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em;
  color: var(--accent); text-align: center; line-height: 1.7;
  padding: 13px 12px; border: 1px solid var(--hair-soft);
  overflow-x: auto;
}
.doc__f sup { font-size: .78em; }

/* l'exemple travaillé */
.doc__eg {
  padding: 13px 14px 14px;
  border-left: 2px solid var(--accent);
  background: var(--wash);
}
.doc__eg > b {
  display: block; margin-bottom: 9px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); font-weight: 500;
}
.doc__eg > * + * { margin-top: 9px; }
.doc__eg p { font-size: 13.5px; line-height: 1.55; }

.doc__t {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.doc__t td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--hair-soft); color: var(--bone-45); }
.doc__t tr:last-child td { border-bottom: 0; }
.doc__t b { color: var(--accent); font-weight: 500; }
.doc__t--n td:last-child { text-align: right; padding-right: 0; }

@media (prefers-reduced-motion: reduce) {
  .doc[open], .doc[open]::backdrop { animation: none; }
}

/* --- mise en page du cours --- */
.doc__stage {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  padding: 9px 11px;
  border: 1px solid var(--hair-soft);
  background: var(--wash);
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  color: var(--bone-45); line-height: 1.5;
}
.doc__stage b {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}
.doc__stage code { background: none; padding: 0; color: var(--bone-70); font-size: 10.5px; }
.doc__stage span { flex: 1 1 100%; }

.doc__h {
  margin-top: 22px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  padding-bottom: 7px; border-bottom: 1px solid var(--hair-soft);
}
.doc__body > .doc__h + * { margin-top: 11px; }

/* le tableau « à quoi correspond cette colonne » */
.doc__cols { width: 100%; border-collapse: collapse; }
.doc__cols th {
  width: 34%; padding: 8px 12px 8px 0; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--hair-soft);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .03em;
  color: var(--bone); line-height: 1.45;
}
.doc__cols td {
  padding: 8px 0; vertical-align: top;
  border-bottom: 1px solid var(--hair-soft);
  font-size: 13px; line-height: 1.5; color: var(--bone-45);
}
.doc__cols tr:last-child th, .doc__cols tr:last-child td { border-bottom: 0; }
.doc__cols th code { background: none; padding: 0; color: var(--accent); }

/* une puce, citée dans le texte comme elle apparaît à l'écran */
.doc__k {
  display: inline-block; padding: 1px 6px;
  border: 1px solid var(--hair-soft);
  font-family: var(--mono); font-size: 10px; color: var(--bone-45);
}

.doc__src {
  margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--hair);
  font-size: 12.5px; line-height: 1.55; color: var(--bone-45);
}
.doc__src b {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bone-45); font-weight: 500;
}

@media (max-width: 560px) {
  .doc__cols th { width: 42%; font-size: 10px; }
  .doc__cols td { font-size: 12.5px; }
}

/* --- mode inversé : ville → réponses --- */
.inv__pick { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.inv__pick .lab__select { margin: 0; }
.inv__go { min-height: 0; padding: 0 14px; gap: 10px; font-size: 11px; letter-spacing: .14em; }

.inv__bar { height: 3px; background: var(--hair-soft); overflow: hidden; margin: 10px 0 7px; }
.inv__bar i {
  display: block; height: 100%; background: var(--accent);
  transform-origin: left; transition: transform 120ms linear;
}
.inv__meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em; color: var(--bone-45);
  margin-top: 10px; line-height: 1.5; word-break: break-all;
}
.inv__meta code { font-family: inherit; color: var(--bone-70); }

.inv__verdict {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.inv__city { font-family: var(--serif); font-size: 24px; letter-spacing: -.015em; }
.inv__rank {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone-45);
}
.inv__verdict[data-win="true"] .inv__rank { color: var(--accent); }
.inv__rank sup { font-size: .7em; }

.inv__rows { margin-top: 4px; }
.inv__swap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 3px; }
.inv__swap s { color: var(--bone-28); font-size: 13px; text-decoration-thickness: 1px; }
.inv__swap b {
  font-weight: 400; font-size: 14px; color: var(--accent);
}
.inv__swap b::before { content: '→'; margin-right: 7px; color: var(--bone-28); }

.inv__actions { margin-top: 20px; display: grid; gap: 6px; justify-items: start; }
.inv__actions .btn { justify-content: space-between; }
.inv__swap i {
  font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--bone-45);
}