/* Avantlot — système visuel.
   Une famille : Archivo. Sept corps : --t1 à --t7, et rien entre les deux.
   Un accent : le cuivre. Il tient la marque, le bouton primaire, le filet de la
   réponse citable, la barre d'avancement, la colonne « ce que rend Avantlot »,
   les repères de la sélection et les états de choix du formulaire.
   Fond sombre, produit clair : la carte est la seule surface qui émet, et elle
   éclaire réellement le fond derrière elle.
   Espacements : --s1 à --s8 pour les blocs. Les valeurs fines des composants
   internes (bordures, pastilles, jauges) restent locales et assumées. */

@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ground: #0b0e0d;
  --ground-2: #151a19;
  --line: #2c3633;        /* séparateurs : ils rythment, ils ne délimitent pas */
  --line-soft: #1e2523;
  --line-control: #5d6764; /* bordure d'un contrôle : 3,3:1, elle doit se voir */
  --paper: #edf0ec;
  --muted: #949e99;
  --muted-strong: #b6bfb9;
  --copper: #c4814f;
  --copper-lit: #dd9a63;

  /* jetons du produit, repris tels quels */
  --card: #f7f8f5;
  --card-ink: #243738;
  --card-muted: #697372;
  --card-green: #346b58;
  --card-line: #e2e7e1;

  --s1: 8px;
  --s2: 12px;
  --s3: 18px;
  --s4: 26px;
  --s5: 40px;
  --s6: 64px;
  --s7: 96px;
  --s8: 140px;

  --t1: 11px;
  --t2: 13px;
  --t3: 15px;
  --t4: 17px;
  --t5: 21px;
  --t6: 34px;
  --t7: 54px;

  --r: 4px;
  --r-lg: 12px;
  --wrap: 1240px;
  --col: 720px;
  --rail: 320px;
  --rail-gap: 96px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  overflow-x: clip;
  /* Une seule source. Le lavis d'avant valait 4,8 niveaux sur 617 px : déclaré
     au fichier, absent de l'écran. Le halo du hero est la lumière de la page. */
  background: var(--ground);
  color: var(--paper);
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: var(--t4);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

:where(a, button, select, summary, input):focus-visible {
  outline: 2px solid var(--copper-lit);
  outline-offset: 3px;
  border-radius: var(--r);
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
section { padding: var(--s6) 0; }
.rule { border-top: 1px solid var(--line-soft); }

/* ---------- typographie ---------- */

h1 {
  /* Les clamp() interpolaient en continu et fabriquaient les corps
     intermédiaires : neuf corps peints à 700 px pour sept déclarés. Des
     paliers, puisque c'est une échelle. */
  font-size: var(--t6);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.032em;
}
h2 {
  font-size: var(--t5);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
h3 { font-size: var(--t4); font-weight: 600; letter-spacing: -0.012em; line-height: 1.35; }

.eyebrow {
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.lede .lead-in { color: var(--paper); font-weight: 600; }
.tight-top { padding-top: 0; }
.lede { font-size: var(--t4); line-height: 1.5; color: var(--muted-strong); max-width: 36em; }
.dated { font-size: var(--t2); color: var(--muted); }
.ilink { color: var(--muted-strong); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ilink:hover { color: var(--paper); }

.eyebrow + h2, .eyebrow + h1 { margin-top: var(--s2); }
h2 + .lede, h1 + .lede { margin-top: var(--s3); }
.lede + ul, .lede + .cols, .lede + .table-scroll, .lede + .criteria, .lede + .form-shell { margin-top: var(--s5); }
h2 + .table-scroll, h2 + .cols, h2 + ul, h2 + .faq { margin-top: var(--s5); }
.stack { margin-top: var(--s7); }

/* ---------- barre haute ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ground);
  border-bottom: 1px solid var(--line-soft);
}
.topbar .wrap { display: flex; align-items: center; gap: var(--s3); min-height: 62px; }

.wordmark { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -0.03em; font-size: var(--t5); }
.wordmark svg.mark { width: 1.05em; height: 1.05em; display: block; flex: 0 0 auto; }
/* Le logotype est un tracé, pas un réglage : le mot ne peut plus être retapé.
   Les deux bras du t sont en cuivre, le dernier sort du mot — la tranche du
   signe, dans le nom. */
.wordmark svg.logotype { height: 0.92em; width: auto; display: block; flex: 0 0 auto; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.topbar nav { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
.topbar nav a.link { display: none; padding: 10px var(--s2); font-size: var(--t3); color: var(--muted-strong); border-radius: var(--r); }
.topbar nav a.link:hover { color: var(--paper); }
.topbar .btn { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--r);
  font-weight: 600;
  font-size: var(--t3);
  letter-spacing: -0.01em;
  background: var(--copper);
  color: #17110b;
  border: 1px solid var(--copper);
  transition: background 0.16s ease, transform 0.16s ease;
}
.btn:hover { background: var(--copper-lit); border-color: var(--copper-lit); }
.btn:active { transform: translateY(1px); filter: brightness(0.94); }
.btn.ghost { background: transparent; color: var(--paper); border-color: var(--line-control); }
.btn.ghost:hover { border-color: var(--muted); background: rgba(255, 255, 255, 0.03); }
.btn.wide { width: 100%; }

/* ---------- hero ---------- */

.hero { padding: var(--s5) 0 var(--s1); position: relative; isolation: isolate; }
/* La lumière appartient à la pièce, pas à l'objet : un sol éclairé sous la carte,
   une seule fois, sans flou — un dégradé radial est déjà lisse. */
.hero::before {
  content: "";
  position: absolute;
  inset: -160px -10vw -260px 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(52% 56% at 58% 73%,
    rgba(214, 229, 214, 0.2) 0%,
    rgba(214, 229, 214, 0.155) 38%,
    rgba(214, 229, 214, 0.05) 66%,
    transparent 100%);
}
.hero-grid { display: grid; gap: var(--s5); align-items: start; }
.hero h1 { margin: var(--s2) 0 var(--s3); max-width: 820px; }
.hero .lede { margin-bottom: var(--s4); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.hero-cta .btn { background: transparent; color: var(--paper); border-color: var(--line-control); }
.hero-cta .btn:hover { border-color: var(--muted); background: rgba(255, 255, 255, 0.03); }
/* Le compteur du hero : il répond avant qu'on demande quoi que ce soit. */
.counter {
  border: 1px solid var(--line-control);
  border-radius: var(--r-lg);
  padding: var(--s3);
  margin-bottom: var(--s4);
  background: var(--ground-2);
}
.counter .count { font-size: var(--t1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: var(--s2); }
.counter-row { display: grid; gap: var(--s1); margin-bottom: var(--s1); }
.counter select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--ground);
  border: 1px solid var(--line-control);
  border-radius: var(--r);
  color: var(--paper);
}
.counter select:focus { border-color: var(--copper); }
.counter-out { margin-top: var(--s3); font-size: var(--t3); color: var(--muted-strong); }
.counter-price { margin-top: var(--s3); font-size: var(--t2); color: var(--muted); }
.counter-go { margin-top: var(--s3); }
.counter-go + .counter-go { margin-left: var(--s1); }
.already { color: var(--copper); }
.continue { margin-bottom: var(--s3); }
/* Sur téléphone, la porte passe devant la réponse : elle était sous le pli de
   dix-huit pixels au moment exact où elle compte. */
@media (max-width: 767px) {
  .counter-out { display: flex; flex-direction: column; }
  .counter-out .counter-go { order: -1; margin: 0 0 var(--s3); }
  .counter-out .counter-price { order: 1; }
}
.counter-out b { color: var(--paper); font-weight: 600; }
.counter-out:empty { margin: 0; }
.counter-go { display: inline-flex; margin-top: var(--s3); }
.counter-note { margin-top: var(--s2); font-size: var(--t2); color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (min-width: 520px) { .counter-row { grid-template-columns: 1fr 1fr; } }

.hero-note { margin-top: var(--s2); font-size: var(--t2); color: var(--muted); max-width: 42ch; }

/* ---------- la carte du produit : la seule surface qui émet ---------- */

.screen {
  position: relative;
  background: var(--card);
  color: var(--card-ink);
  border-radius: var(--r-lg);
  font-size: var(--t2);
  line-height: 1.5;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.55),
    0 18px 32px -12px rgba(0, 0, 0, 0.62),
    0 60px 90px -40px rgba(0, 0, 0, 0.7);
}
.screen-body { padding: var(--s3) var(--s3) var(--s4); }
.screen.wide { max-width: 940px; }
@media (min-width: 900px) {
  /* La marche unique de l'échelle : un corps de plus, jamais un entre-deux. */
  .hero h1 { font-size: var(--t7); }
  .hero-title .sub, .strip b, .step h3, .verdict h3 { font-size: var(--t6); }
  .screen.wide .lot { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: baseline; column-gap: 28px; }
  .screen.wide .lot b { grid-column: 1 / -1; }
  .screen.wide .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .screen.wide .todo { max-width: 68ch; }
}
.screen .caption-in { display: block; margin-top: 6px; font-size: var(--t1); color: var(--card-muted); }

.lane {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e8f1e9;
  color: #1f4c3c;
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lane i { width: 6px; height: 6px; border-radius: 50%; background: var(--card-green); display: block; }
.lane.partner { background: #f4ece2; color: #7a4f22; }
.lane.partner i { background: #a2703c; }
.deadline-chip {
  margin-left: auto;
  font-size: var(--t1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--card-muted);
  background: transparent;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: 3px 9px;
  letter-spacing: 0.03em;
}
.screen-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }

.screen h4 { margin: 0 0 6px; font-size: var(--t3); font-weight: 600; line-height: 1.32; letter-spacing: -0.015em; color: var(--card-ink); }
.screen .who { color: var(--card-muted); font-size: var(--t2); margin-bottom: var(--s2); }

.gauges { display: flex; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--card-line); border-bottom: 1px solid var(--card-line); margin-bottom: var(--s2); font-variant-numeric: tabular-nums; }
.gauge { flex: 1; min-width: 0; }
.gauge b { display: block; font-size: var(--t5); font-weight: 600; letter-spacing: -0.03em; color: var(--card-green); line-height: 1.1; }
.gauge span { font-size: var(--t1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--card-muted); }

.screen .lot {
  background: #eef4ef;
  border-radius: var(--r);
  padding: 13px 14px;
  margin-bottom: var(--s2);
}
.screen .lot b { display: block; font-size: var(--t1); text-transform: uppercase; letter-spacing: 0.09em; color: var(--card-muted); margin-bottom: 6px; font-weight: 600; }
.screen .lot-no {
  display: block;
  font-size: var(--t6);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--card-green);
  margin-bottom: 6px;
}
.screen .lot-title { font-weight: 600; color: var(--card-ink); font-size: var(--t3); display: block; }

.screen .todo {
  background: #eef4ef;
  border-left: 2px solid var(--card-green);
  padding: 11px 13px;
  border-radius: 0 var(--r) var(--r) 0;
  margin-bottom: var(--s2);
  font-size: var(--t2);
}
.screen .todo b { display: block; font-size: var(--t1); text-transform: uppercase; letter-spacing: 0.09em; color: var(--card-green); margin-bottom: 5px; font-weight: 600; }

.facts { display: grid; gap: 9px; font-variant-numeric: tabular-nums; }
.facts li { display: grid; grid-template-columns: 14px 1fr; gap: 9px; font-size: var(--t2); color: #3b4a4a; }
.facts svg { width: 14px; height: 14px; margin-top: 2px; color: var(--card-green); }
.facts .quoted { display: block; margin-top: 3px; color: var(--card-muted); }
.src { display: inline-block; margin-top: var(--s2); font-size: var(--t1); color: var(--card-muted); border-top: 1px solid var(--card-line); padding-top: 10px; width: 100%; }

/* ---------- réponse citable + bandeau de chiffres ---------- */

.answer {
  border-left: 2px solid var(--copper);
  padding: 4px 0 4px var(--s3);
  max-width: 64ch;
  color: var(--muted-strong);
  font-variant-numeric: tabular-nums;
}
.answer strong { color: var(--paper); font-weight: 600; }

.strip { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--ground-2); }
.strip .wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s3); padding-top: var(--s4); padding-bottom: var(--s4); }
.strip b { display: block; font-size: var(--t5); font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.strip span { display: block; margin-top: 6px; font-size: var(--t2); color: var(--muted); }

/* ---------- listes, colonnes, tableaux ---------- */

.cols { display: grid; gap: var(--s4); }
.col { padding-top: var(--s3); border-top: 1px solid var(--line); }
.col .num { font-size: var(--t1); font-weight: 600; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.col h3 { margin: 10px 0 var(--s1); }
.col p { color: var(--muted); font-size: var(--t3); }

.never, .criteria { display: grid; gap: 0; max-width: var(--col); }
.faq { max-width: var(--col); }
.table-scroll { max-width: var(--col); }
.gate .table-scroll, .gate .faq { max-width: none; }
.never li, .criteria li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: var(--s2);
  align-items: start;
  padding: var(--s3) 0;
  border-top: 1px solid var(--line-soft);
}
.never li:last-child, .criteria li:last-child { border-bottom: 1px solid var(--line-soft); }
.tick { display: block; width: 14px; height: 2px; border-radius: 1px; background: var(--muted); margin-top: 11px; }
.criteria .tick { background: var(--copper); }
.never b, .criteria b { font-weight: 600; }
.never span.say, .criteria span.say { display: block; color: var(--muted); font-size: var(--t3); margin-top: 2px; }
.criteria li > div { color: var(--muted-strong); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: var(--t3); min-width: 560px; }
th, td { text-align: left; padding: 13px var(--s3) 13px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-size: var(--t1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 600; }
td:first-child { color: var(--paper); font-weight: 500; width: 42%; }
td { color: var(--muted); }
table.figures { font-variant-numeric: tabular-nums; }
/* Les quatre verdicts étaient posés en `hidden` : 357 signes à zéro pixel au
   premier rendu, sur l'argument central de la page. `details` les garde
   repliés — le lecteur choisit avant de voir — mais ils existent. */
.unveil > summary {
  min-height: 44px;
  padding: 8px 0;
  color: var(--copper);
  font-size: var(--t2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.unveil > summary:hover { color: var(--copper-lit); }
.unveil[open] > summary { display: none; }
.unveil .read { display: block; padding: 8px 0; }
table.compare td:last-child { border-left: 2px solid var(--copper); padding-left: var(--s3); color: var(--muted-strong); }
/* La référence d'un avis : elle doit être recopiable, donc lisible, sans
   concurrencer l'intitulé qu'elle date. Corps 1, comme les autres mentions. */
table.compare td .ref { display: block; margin-top: 6px; font-size: var(--t1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
table.figures td:nth-child(2) { color: var(--paper); width: 12%; }

/* ---------- section sélection ---------- */

.gate { background: var(--ground-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.gate .wrap { display: grid; gap: var(--s5); }
.slots { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); background: var(--ground); }
.slots b { display: block; font-size: var(--t4); font-weight: 600; margin-bottom: var(--s1); }
.slots p { color: var(--muted); font-size: var(--t3); }
.slots p + p { margin-top: var(--s2); }

/* ---------- candidature ---------- */

.apply { background: var(--ground); }
.promise {
  border: 1px solid var(--copper);
  border-radius: var(--r-lg);
  padding: var(--s4);
  margin-bottom: var(--s5);
  max-width: var(--col);
  background: rgba(196, 129, 79, 0.07);
}
.promise b { display: block; font-size: var(--t5); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--s2); }
.promise p { color: var(--muted-strong); font-size: var(--t3); }
.form-shell {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ground-2);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 34px 64px -34px rgba(0, 0, 0, 0.9);
}
.progress { height: 2px; background: var(--line-control); }
.progress i { display: block; height: 100%; width: 0%; background: var(--copper); transition: width 0.35s cubic-bezier(0.2, 0.7, 0.3, 1); }
.step, .verdict { padding: var(--s4) var(--s3); border: 0; margin: 0; }
.step .count, .verdict .count { font-size: var(--t1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.step h3, .verdict h3 { margin: 10px 0 var(--s3); font-size: var(--t5); font-weight: 700; letter-spacing: -0.024em; line-height: 1.22; }

.choices { display: grid; gap: var(--s1); }
.choice {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-height: 54px;
  padding: 13px 15px;
  text-align: left;
  border: 1px solid var(--line-control);
  border-radius: var(--r);
  color: var(--paper);
  font-size: var(--t3);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.choice:hover { border-color: var(--muted); background: rgba(255, 255, 255, 0.03); }
.choice[aria-pressed="true"] { border-color: var(--copper); background: rgba(196, 129, 79, 0.12); }
.choice .key {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-control);
  border-radius: 3px;
  font-size: var(--t1);
  font-weight: 600;
  color: var(--muted);
}
.choice[aria-pressed="true"] .key { border-color: var(--copper); color: var(--copper); }

.step-nav { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; }
.back { min-height: 44px; padding: 0 4px; color: var(--muted); font-size: var(--t2); }
.back:hover { color: var(--paper); }

.fields { display: grid; gap: var(--s2); margin-top: var(--s2); }
.wide-field { max-width: 420px; margin-bottom: var(--s3); }
.spaced-under { margin-bottom: 10px; }
.verdict .ask { margin-top: var(--s4); }
.verdict .note-privacy { margin-top: var(--s3); }
.verdict .status { margin-top: var(--s3); }
.field label { display: block; font-size: var(--t2); color: var(--muted); margin-bottom: 6px; }
.field input, .field select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--ground);
  border: 1px solid var(--line-control);
  border-radius: var(--r);
  color: var(--paper);
}
.field input::placeholder { color: #7c8783; }
.field input:focus, .field select:focus { border-color: var(--copper); }
.field .err { display: none; margin-top: 6px; font-size: var(--t2); color: #e0876c; }
.field.invalid input, .field.invalid select { border-color: #b4614a; }
.field.invalid .err { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.verdict .mark { width: 34px; height: 34px; color: var(--muted-strong); }
.verdict p { color: var(--muted-strong); font-size: var(--t3); max-width: 52ch; }
.verdict .recap { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-soft); display: grid; gap: 6px; font-size: var(--t2); color: var(--muted); }
.verdict .recap b { color: var(--muted-strong); font-weight: 500; }

/* ---------- questions ---------- */

.faq details { border-top: 1px solid var(--line-soft); }
.faq details:last-child { border-bottom: 1px solid var(--line-soft); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s3) 34px var(--s3) 0; position: relative; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 25px;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq p { padding: 0 0 var(--s3); color: var(--muted); font-size: var(--t3); max-width: 64ch; }

/* ---------- pied ---------- */

footer { border-top: 1px solid var(--line-soft); padding: var(--s5) 0 var(--s6); color: var(--muted); font-size: var(--t2); }
footer .wrap { display: grid; gap: var(--s2); }
footer a:hover { color: var(--paper); }
footer .links { display: flex; flex-wrap: wrap; gap: 4px var(--s3); margin: -11px 0; }
footer .links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- le débit ---------- */

.flow { margin: var(--s4) 0 var(--s3); }
.flow-bars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 88px));
  align-items: end;
  gap: var(--s3);
  height: 196px;
  padding-top: var(--s3);
  border-bottom: 1px solid var(--line);
}
.flow-bar { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.flow-bar i {
  display: block;
  align-self: end;
  background: linear-gradient(180deg, var(--copper-lit), var(--copper));
  border-radius: 2px 2px 0 0;
  min-height: 3px;
}
.flow-n {
  font-size: var(--t5);
  line-height: 1.1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  padding-bottom: 6px;
}
.flow-bar b {
  font-size: var(--t1);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-strong);
  padding-top: 10px;
}
.flow figcaption {
  font-size: var(--t2);
  color: var(--muted-strong);
  max-width: var(--col);
  margin-top: var(--s2);
}

/* ---------- tailles ---------- */

@media (max-width: 999px) {
  /* Sur mobile le pli est court. Le compteur ne demande rien — il donne avant
     de prendre — donc il peut précéder la reconnaissance ; le lien vers le test,
     lui, demande, et il passe après. Personne n'est renvoyé vers une action
     avant d'avoir été nommé. */
  .hero-grid > .hero-count { order: 2; }
  .hero-grid > .hero-reco { order: 3; }
  .hero-grid > .hero-shot { order: 4; }
  .hero-grid > .hero-act { order: 5; }
  /* La reconnaissance passait sous la carte, donc deux écrans sous le pli. Elle
     remonte juste après le compteur ; ses marges se resserrent pour que la carte
     reste dans le deuxième écran, mesuré. */
  .hero-grid > .hero-reco { margin: 0; }
  .hero-grid > .hero-reco .hero-note { margin: 0; }
}

@media (max-width: 699px) {
  .hero { padding: var(--s3) 0 0; }
  /* Le pli mobile est court et la page y met quatre choses : l'accroche, la
     lede comptée, le compteur et sa porte. La gouttière de grille passe de 40 à
     26 px pour que la porte d'après-clic reste atteignable sans défiler. */
  .hero-grid { gap: var(--s4); }
  .hero h1 { margin: var(--s1) 0 var(--s2); }
  .hero .lede { margin-bottom: var(--s2); }

  /* Le pli mobile ne montrait aucun produit : 0,0 % de 390 × 844, la carte
     commençant 130 px sous le pli. Titre, compteur, puis la carte — dont le
     haut entre dans le pli et appelle le premier défilement. La reconnaissance
     et la note passent après : elles se lisent, elles ne se montrent pas. */
  .hero-grid > .hero-title { order: 1; }
  .hero-grid > .hero-count { order: 2; }
  .hero-grid > .hero-shot  { order: 3; }
  .hero-grid > .hero-act   { order: 4; }
  .hero-grid > .hero-say   { order: 5; }
  .hero-grid > .hero-reco  { order: 6; }
}

@media (min-width: 700px) {
  section { padding: var(--s7) 0; }
  .strip .wrap { grid-template-columns: repeat(4, 1fr); }
  .cols { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
  .step, .verdict { padding: var(--s5) var(--s5) var(--s4); }
  .choices { grid-template-columns: repeat(2, 1fr); }
  .fields { grid-template-columns: repeat(2, 1fr); }
  .topbar nav a.link, .topbar .btn { display: inline-flex; }
  .hero { padding-top: var(--s6); }
}

@media (min-width: 1000px) {
  /* Grille nommée : sans elle, le placement automatique renvoie la carte
     en deuxième rangée et le produit tombe sous le pli. */
  .hero-grid {
    grid-template-columns: 440px minmax(0, 1fr);
    grid-template-areas: "title title" "text card" "reco card" "count card" "act card";
    gap: 0 76px;
    align-items: start;
  }
  .hero-grid > .hero-title { grid-area: title; }
  .hero-grid > .hero-say { grid-area: text; }
  .hero-grid > .hero-reco { grid-area: reco; }
  .hero-grid > .hero-count { grid-area: count; margin-top: var(--s4); }
  .hero-grid > .hero-act { grid-area: act; margin-top: var(--s4); }
  .hero-grid > .hero-shot { grid-area: card; align-self: center; }
  .gate .wrap { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .screen { font-size: var(--t3); }
  .screen-body { padding: 22px 24px 24px; }
  .screen h4 { font-size: var(--t4); }
  .gauge b { font-size: var(--t6); }
  .gauges { gap: 24px; padding: 16px 0; }
}

@media (min-width: 1600px) { :root { --wrap: 1400px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}


/* ---------- le rail : deuxième piste, ferrée à droite du wrap ----------
   Le corps tient sa mesure à gauche, les faits tiennent la droite. Le vide est
   alors dessiné entre deux bords tenus ; il ne reste plus après un seul.
   Mesuré sur maquette : une annotation par bloc de prose, ancrée à la rangée de
   la phrase qu'elle porte. Deux par section ne changent rien. */

.rail-item {
  font-size: var(--t2);
  line-height: 1.45;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.rail-item b {
  display: block;
  font-size: var(--t5);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.rail-item.lit b { color: var(--copper-lit); }
.rail-item cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: var(--t1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 1120px) {
  .wrap.railed {
    display: grid;
    grid-template-columns: minmax(0, var(--col)) minmax(0, var(--rail));
    /* « space-between » distribuait le reste : 80 px déclarés, 310 mesurés.
       Le jeton doit produire ce qu'il annonce. */
    justify-content: start;
    column-gap: var(--rail-gap);
    align-items: start;
  }
  .wrap.railed > * { grid-column: 1; }
  .wrap.railed > :is(.cols, .hero-shot, .form-shell, .table-scroll) { grid-column: 1 / -1; }
  .wrap.railed > .table-scroll { max-width: none; }
  .wrap.railed > .rail-item { grid-column: 2; }
}

@media (max-width: 1119px) {
  .rail-item { display: none; }
}

/* Ancrages de rangée, déclarés ici et pas en ligne. */
.rail-item.r2 { grid-row: 2; }
.rail-item.r3 { grid-row: 3; }
.rail-item.r4 { grid-row: 4; }
.rail-item.r5 { grid-row: 5; }
.rail-item.r6 { grid-row: 6; }
.rail-item.r7 { grid-row: 7; }


/* ---------------------------------------------------------------------------
   Ce que la direction artistique a mesuré, et ce qui le répare.
   Chaque règle porte le nombre qu'elle corrige : sans lui, la règle est un goût.
   --------------------------------------------------------------------------- */

/* La mesure : amplitude ×6,39 à 1280 px, et un span.src à 81 em au corps 11 —
   le plus petit corps à la plus longue ligne. 22 blocs sur 96 hors de 22–37 em
   à 1280, 70 sur 92 à 390. Une mesure se déclare. */
p, li, td, figcaption, .rail-item { max-width: 34em; }
.lede { max-width: 32em; }
span.src, .caption-in, .dated { max-width: 40em; }
h1, h2 { max-width: 17em; }

/* 21 blocs finissaient sur une ligne de moins de 18 % de la mesure, le pire à
   3,8 % — « duit ne / change ça ». */
h1, h2, h3, .lede { text-wrap: balance; }
p, li, td { text-wrap: pretty; }

/* 159 éléments portaient un nombre d'au moins deux chiffres en chasse
   proportionnelle, dont neuf cellules de tableau. Sur une page dont l'argument
   entier est numérique, les colonnes doivent s'aligner. */
:where(p, li, td, th, cite, .rail-item, .lede, .src, .strip, .gauges) {
  font-variant-numeric: tabular-nums;
}

/* Le rail disparaissait sous 1120 px : 16 blocs, 2 374 signes, 8,1 % du texte.
   Il devient une note de bloc au lieu de s'évaporer. */
@media (max-width: 1119px) {
  .rail-item {
    display: block;
    margin: var(--s4) 0;
    padding-left: var(--s2);
    border-left: 2px solid var(--copper);
    font-size: var(--t2);
    color: var(--muted-strong);
    max-width: 34em;
  }
  .rail-item b { font-size: var(--t5); display: inline-block; margin-right: var(--s1); }
}

/* Deux accents dans le premier écran : cuivre 1,84 %, vert 0,84 % — un rapport
   de 2,2 pour 1. Le vert reprend son rôle plus bas, là où il tranche entre
   « oui » et « non » ; dans le pli, la carte parle en encre. */
.hero .screen .lane, .hero-shot .screen .lane { color: var(--card-muted); }
.hero .screen .lot-no, .hero-shot .screen .lot-no { color: var(--card-ink); }

/* Sept rayons mesurés pour deux déclarés. */
.lane, .tagbadge, .deadline-chip { border-radius: var(--r); }

/* --s8 était déclaré et jamais employé : un jeton mort dans une échelle de huit.
   Il devient le seul palier de respiration entre deux mouvements de la page. */
#horloge { padding-top: var(--s8); }