/* ============================================================================
   CORTI — « la feuille technique »

   Direction verrouillée sur trois références :
     · 19–86 (primaire)   papier blanc, encre noire, filets 1 px, display léger
                          et monumental, contenu présenté en tableaux réglés.
     · PlanetScale        le monospace pour TOUT le texte fonctionnel — labels,
                          références, prix, en-têtes — et 0 px de rayon partout.
                          L'accent bleu reste réservé à l'interactif.
     · mono               l'image est enfermée dans un cadre tracé avec les
                          mêmes filets que le reste de l'interface.

   Règles de rôle à ne pas transgresser :
     — l'accent --trace ne sert QU'à l'interactif et à l'action principale ;
     — la profondeur vient du trait, jamais de l'ombre ni du dégradé ;
     — aucun angle arrondi, nulle part ;
     — le mono ne sert jamais à la prose, le display jamais aux labels.
   ========================================================================== */

@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-var.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrains-mono-var.woff2') format('woff2-variations'); font-weight: 100 800; font-display: swap; }

:root {
  --paper: #ffffff;
  --ink: #000000;          /* texte, filets de structure */
  --graphite: #414141;     /* prose secondaire */
  --smoke: #737373;        /* légendes, métadonnées */
  --stone: #c1c1c1;        /* filets internes, séparations faibles */
  --wash: #f4f4f4;         /* aplat de respiration, jamais une carte */
  --trace: #0b6ec5;        /* UNIQUEMENT : lien, état actif, action principale */

  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: 32px;
  --gap: 24px;
  --rule: 1px solid var(--ink);
  --rule-soft: 1px solid var(--stone);
}

@media (max-width: 720px) { :root { --pad: 18px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--trace); outline-offset: 2px; }

/* ── Ossature ─────────────────────────────────────────────────────────── */

.wrap { max-width: 1320px; margin-inline: auto; }
.section { padding: clamp(52px, 7vw, 104px) var(--pad); }
.section--flush { padding-top: 0; }
.section--wash { background: var(--wash); }

/* ── Typographie ──────────────────────────────────────────────────────── */

/* Le display reprend le geste de 19–86 : très grand, très léger, très serré. */
.display {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.9rem, 8.2vw, 7.4rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  margin: 0;
  text-wrap: balance;
}
.display--sm { font-size: clamp(2.2rem, 5.4vw, 4.2rem); line-height: 0.98; }

.h2 { font-family: var(--display); font-weight: 300; font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1.04; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.h3 { font-family: var(--display); font-weight: 400; font-size: 1.14rem; line-height: 1.25; letter-spacing: -0.02em; margin: 0; }

.lede { font-size: clamp(1rem, 1.35vw, 1.14rem); line-height: 1.6; color: var(--graphite); max-width: 62ch; margin: 0; text-wrap: pretty; }
.muted { color: var(--smoke); }

/* Tout ce qui est fonctionnel passe au mono, très espacé — règle de PlanetScale
   croisée avec les labels tracés de mono. */
.label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
}
.num { font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: 0.1em; color: var(--smoke); }
.mono { font-family: var(--mono); }

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

.hdr {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 0 var(--pad);
  height: 62px;
  background: var(--paper);
  border-bottom: var(--rule);
}
.hdr__mark { font-family: var(--display); font-weight: 500; font-size: 19px; letter-spacing: -0.05em; }
.hdr__mark span { color: var(--trace); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--mono); font-weight: 400; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--graphite);
  padding: 7px 11px;
  border: 1px solid transparent;
}
.nav a:hover { color: var(--ink); border-color: var(--stone); }
/* L'état actif est signalé par le trait, pas par un aplat — règle de mono. */
.nav a[aria-current="page"] { color: var(--trace); border-color: var(--trace); }

.cart-count {
  display: inline-block; margin-left: 6px; padding: 0 5px;
  background: var(--trace); color: var(--paper);
  font-family: var(--mono); font-size: 10px; line-height: 16px;
}

.burger {
  display: none; background: none; border: var(--rule); color: var(--ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 7px 13px; cursor: pointer;
}

@media (max-width: 940px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 62px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: var(--rule);
    padding: 8px var(--pad) 20px;
    transform: translateY(-120%); transition: transform 0.24s ease;
  }
  .nav.is-open { transform: translateY(0); }
  .nav a { padding: 13px 0; border: 0; border-bottom: var(--rule-soft); font-size: 12px; }
}

/* ── Messages ─────────────────────────────────────────────────────────── */

.flashes { padding: 0 var(--pad); }
.flash {
  margin: 12px 0 0; padding: 11px 14px;
  border: var(--rule);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.01em;
}
.flash--error { border-color: var(--trace); color: var(--trace); }
.flash--info, .flash--ok { border-color: var(--ink); }

/* ── Ouverture ────────────────────────────────────────────────────────── */

.hero { border-bottom: var(--rule); }
.hero__inner { padding: clamp(44px, 6vw, 92px) var(--pad) clamp(28px, 3.6vw, 48px); max-width: 1320px; margin-inline: auto; }
.hero__inner .label { display: block; margin-bottom: clamp(20px, 3vw, 36px); }
.hero .display { margin-bottom: clamp(28px, 4vw, 52px); }

/* Trois colonnes réglées sous le titre : le pied de page d'un plan. */
.hero__meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: var(--rule);
}
.hero__meta > div { padding: 18px 20px 0 0; border-right: var(--rule-soft); }
.hero__meta > div:last-child { border-right: 0; padding-right: 0; }
.hero__meta > div + div { padding-left: 20px; }
.hero__meta p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--graphite); max-width: 34ch; }
@media (max-width: 860px) {
  .hero__meta { grid-template-columns: 1fr; }
  .hero__meta > div { border-right: 0; border-bottom: var(--rule-soft); padding: 16px 0; }
  .hero__meta > div + div { padding-left: 0; }
}

/* L'image d'ouverture est enfermée dans un cadre, comme chez mono. */
.hero__media { border-top: var(--rule); }
.hero__media img { width: 100%; aspect-ratio: 21/8; object-fit: cover; filter: grayscale(1) contrast(1.06); }
@media (max-width: 720px) { .hero__media img { aspect-ratio: 3/2; } }

/* ── Le bordereau : le catalogue comme une table de prix ──────────────── */

.plate { border-top: var(--rule); }

.tile {
  display: grid;
  grid-template-columns: 92px 132px minmax(0, 1fr) 240px 150px;
  align-items: center;
  gap: 0;
  padding: 0;
  border-bottom: var(--rule-soft);
  background: var(--paper);
  transition: background 0.16s ease;
}
.tile:hover { background: var(--wash); }
.tile:hover .tile__name { color: var(--trace); }

/* Chaque cellule est placée explicitement en ligne 1 : sans cela, la répartition
   automatique renvoie à la ligne suivante tout élément qui redemande une colonne
   déjà dépassée — et la désignation passait sous la vignette. */
.tile > img,
.tile__thumb { grid-column: 2; grid-row: 1; }
.tile img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-left: var(--rule-soft); border-right: var(--rule-soft);
  filter: grayscale(1) contrast(1.05);
}
.tile__body { display: contents; }
.tile__code { grid-column: 1; grid-row: 1; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; color: var(--smoke); padding: 0 16px; }
.tile__name { grid-column: 3; grid-row: 1; font-family: var(--display); font-weight: 400; font-size: clamp(1.05rem, 1.8vw, 1.45rem); letter-spacing: -0.03em; padding: 18px 24px; transition: color 0.16s ease; }
.tile__cat { grid-column: 4; grid-row: 1; padding: 0 16px; }
.tile__price { grid-column: 5; grid-row: 1; font-family: var(--mono); font-weight: 500; font-size: 15px; text-align: right; padding: 0 16px 0 0; white-space: nowrap; }
.tile__price sup { font-size: 9px; letter-spacing: 0.1em; color: var(--smoke); margin-left: 4px; }
.tile .num { display: none; }

/* En dessous de 1000 px la table ne tient plus : on la replie en fiche. */
@media (max-width: 1000px) {
  .tile { grid-template-columns: 108px minmax(0, 1fr); align-items: start; padding: 16px 0; column-gap: 16px; }
  .tile img { grid-column: 1; grid-row: 1 / span 4; aspect-ratio: 1; border: var(--rule-soft); }
  .tile__code { grid-column: 2; grid-row: 1 !important; padding: 0; }
  .tile__name { grid-column: 2; grid-row: 2 !important; padding: 4px 0 0; font-size: 1.15rem; }
  .tile__cat { grid-column: 2; grid-row: 3 !important; padding: 6px 0 0; }
  .tile__price { grid-column: 2; grid-row: 4 !important; text-align: left; padding: 8px 0 0; }
}

/* ── Titres de section ────────────────────────────────────────────────── */

.sec-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(24px, 5vw, 80px); align-items: end;
  padding-bottom: clamp(26px, 3.4vw, 48px);
}
.sec-head .label { display: block; margin-bottom: 14px; }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; align-items: start; } }

/* ── Bloc d'interruption : l'aplat d'encre, une seule fois par page ───── */

.slab { background: var(--ink); color: var(--paper); padding: clamp(52px, 7vw, 104px) var(--pad); }
.slab .label { color: var(--stone); }
.slab .lede { color: #d8d8d8; }
.slab__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ── Index numéroté ───────────────────────────────────────────────────── */

.index { border-top: var(--rule); }
.index__row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(20px, 2.4vw, 32px) 0;
  border-bottom: var(--rule-soft);
  align-items: start;
}
.index__row p { margin: 0; color: var(--graphite); font-size: 14.5px; line-height: 1.6; }
.index__row a { color: var(--trace); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 860px) {
  .index__row { grid-template-columns: 1fr; gap: 8px; }
  .index__row .num { order: -1; }
}

/* ── Boutons ──────────────────────────────────────────────────────────── */

/* Fantômes par défaut (mono), plein uniquement pour l'action principale
   (PlanetScale), dans l'accent et nulle part ailleurs. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px;
  border: var(--rule); background: transparent; color: var(--ink);
  font-family: var(--mono); font-weight: 500; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: background 0.16s ease, color 0.16s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--accent { background: var(--trace); border-color: var(--trace); color: var(--paper); }
.btn--accent:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--dark { border-color: var(--paper); color: var(--paper); }
.btn--dark:hover { background: var(--paper); color: var(--ink); }
.btn--block { width: 100%; }

.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--trace);
  border-bottom: 1px solid currentColor;
}

/* ── Fiche de prestation ──────────────────────────────────────────────── */

.crumbs { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke); padding: 20px var(--pad) 0; }
.crumbs a { color: var(--smoke); }
.crumbs a:hover { color: var(--trace); }

.offer-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(24px, 3vw, 44px) var(--pad) 0;
  max-width: 1320px; margin-inline: auto;
}
@media (max-width: 1000px) { .offer-grid { grid-template-columns: 1fr; } }

.offer-head .label { display: block; margin-bottom: 12px; }
.offer-figure { margin: clamp(24px, 3vw, 40px) 0 0; border: var(--rule); }
.offer-figure img { width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.offer-figure figcaption { padding: 9px 12px; border-top: var(--rule-soft); font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--smoke); }

/* Les caractéristiques : une vraie table, en-têtes réglés (19–86). */
.specs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--rule); margin-top: clamp(28px, 3.4vw, 44px); }
.specs > div { padding: 14px 20px 16px 0; border-right: var(--rule-soft); }
.specs > div:last-child { border-right: 0; }
.specs > div + div { padding-left: 20px; }
.specs dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke); margin: 0; }
.specs dd { margin: 7px 0 0; font-size: 14.5px; }
@media (max-width: 720px) { .specs { grid-template-columns: 1fr; } .specs > div { border-right: 0; border-bottom: var(--rule-soft); padding: 12px 0; } .specs > div + div { padding-left: 0; } }

.legal p, .offer-prose p { color: var(--graphite); max-width: 68ch; }

.steps { border-top: var(--rule); margin-top: clamp(28px, 3.4vw, 44px); }
.step { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: var(--rule-soft); align-items: baseline; }
.step > div { min-width: 0; }
.step .h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.step .h3 .label { flex: none; }
.step__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--trace); }
.step__time { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke); text-align: right; }
.step p { margin: 6px 0 0; font-size: 14px; color: var(--graphite); }
@media (max-width: 720px) { .step { grid-template-columns: 40px minmax(0, 1fr); } }

.ticks, .check { list-style: none; margin: 0; padding: 0; }
.ticks li, .check li { position: relative; padding-left: 20px; margin-bottom: 9px; font-size: 14px; color: var(--graphite); }
.ticks li::before, .check li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 1px; background: var(--trace); }

.faq { border-top: var(--rule); margin-top: clamp(28px, 3.4vw, 44px); }
.faq details { border-bottom: var(--rule-soft); padding: 15px 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; font-family: var(--display); font-weight: 400; font-size: 1rem; letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); color: var(--trace); }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 12px 0 0; color: var(--graphite); font-size: 14px; max-width: 70ch; }

/* Bloc d'achat : encadré, collant, sans ombre. */
.buy { border: var(--rule); padding: clamp(20px, 2.2vw, 28px); position: sticky; top: 86px; align-self: start; }
.buy__price { font-family: var(--display); font-weight: 300; font-size: clamp(2.1rem, 4vw, 2.9rem); letter-spacing: -0.045em; line-height: 1; margin: 12px 0 6px; }
.buy__price sup { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--smoke); margin-left: 6px; vertical-align: super; }
.buy__note { font-size: 13px; color: var(--smoke); margin: 0 0 20px; }
.buy__list { list-style: none; margin: 20px 0 0; padding: 20px 0 0; border-top: var(--rule-soft); }
.buy__list li { position: relative; padding-left: 20px; margin-bottom: 9px; font-size: 13px; color: var(--graphite); }
.buy__list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 1px; background: var(--trace); }
@media (max-width: 1000px) { .buy { position: static; } }

/* ── Panier et commande ──────────────────────────────────────────────── */

.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 1000px) { .checkout { grid-template-columns: 1fr; } }

.cart { border-top: var(--rule); }
.cart__row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto auto;
  gap: clamp(14px, 2.2vw, 28px); align-items: center;
  padding: 18px 0; border-bottom: var(--rule-soft);
}
.cart__row > div { min-width: 0; }
.cart__row h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.02rem, 1.6vw, 1.25rem); letter-spacing: -0.025em; margin: 0; }
.cart__thumb { display: block; border: var(--rule-soft); }
.cart__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.cart__sub { font-size: 13px; color: var(--smoke); margin: 5px 0 0; max-width: 54ch; }
.cart__price { font-family: var(--mono); font-weight: 500; font-size: 14px; white-space: nowrap; }
.cart__price.is-off { text-decoration: line-through; color: var(--smoke); }
.cart__owned { color: var(--trace); font-size: 12.5px; margin-top: 6px; }
.cart__row--owned > div:first-child { opacity: 0.7; }
@media (max-width: 720px) { .cart__row { grid-template-columns: 62px 1fr; row-gap: 10px; } }

.summary { align-self: start; }
.summary__inner { border: var(--rule); padding: clamp(20px, 2.2vw, 28px); }
.summary__line { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 14px; }
.summary__line--total { border-top: var(--rule); margin-top: 10px; padding-top: 16px; align-items: baseline; }
.summary__line--total strong { font-family: var(--display); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.04em; }
.summary__note { font-size: 12.5px; color: var(--smoke); margin: 14px 0 20px; }

/* ── Formulaires ─────────────────────────────────────────────────────── */

.form .field { margin: 0 0 22px; }
.form label, .field label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke); margin-bottom: 7px; }
.field input, .field select, .field textarea, .form input, .form select, .form textarea {
  width: 100%; padding: 11px 12px;
  background: var(--paper); color: var(--ink);
  border: var(--rule-soft); border-radius: 0;
  font-family: var(--display); font-size: 15px;
}
.field input:focus, .field textarea:focus, .field select:focus,
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--trace); }
.field input:disabled { color: var(--smoke); }
.field textarea, .form textarea { min-height: 128px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .field-row { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; }

.errors { border: 1px solid var(--trace); padding: 12px 14px; margin-bottom: 22px; }
.errors p { margin: 0 0 4px; color: var(--trace); font-size: 13px; }

.notice { border: var(--rule); padding: clamp(18px, 2.2vw, 26px); }
.notice p { margin: 0 0 8px; }
.notice p:last-child { margin-bottom: 0; }

.empty { border: var(--rule-soft); padding: clamp(28px, 4vw, 52px); text-align: center; color: var(--smoke); }

/* ── Espace client ───────────────────────────────────────────────────── */

.account-nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: var(--rule); padding-bottom: 14px; margin-bottom: 28px; }
.account-nav a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); padding: 7px 11px; border: 1px solid transparent; }
.account-nav a:hover { border-color: var(--stone); }
.account-nav a[aria-current="page"] { color: var(--trace); border-color: var(--trace); }

.orders { border-top: var(--rule); }
.order { border-bottom: var(--rule-soft); padding: 20px 0; }
.order__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: baseline; }
.order__items { margin: 12px 0 0; padding: 0; list-style: none; }
.order__items li { font-size: 14px; color: var(--graphite); padding: 3px 0; }
.order__foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 14px; }

.tag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 9px; border: var(--rule-soft); color: var(--smoke); }
.tag--on { border-color: var(--trace); color: var(--trace); }
.tag--done { border-color: var(--ink); color: var(--ink); }

.track { border-top: var(--rule); margin-top: 24px; }
.files { list-style: none; margin: 0; padding: 0; }
.files li { border-bottom: var(--rule-soft); padding: 12px 0; display: flex; justify-content: space-between; gap: 16px; align-items: center; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 11px 14px 11px 0; border-bottom: var(--rule-soft); font-size: 14px; }
.table th { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke); border-bottom: var(--rule); }

.page-head { padding: clamp(40px, 5.5vw, 84px) var(--pad) clamp(24px, 3vw, 40px); border-bottom: var(--rule); max-width: 1320px; margin-inline: auto; }
.page-head .label { display: block; margin-bottom: 16px; }
.page-head .lede { margin-top: 20px; }
.dot { color: var(--trace); }

.dots { display: flex; gap: 5px; }

/* ── Bandeau du bac à sable ──────────────────────────────────────────── */

.sandbox-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px var(--pad);
  background: var(--trace); color: var(--paper);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
}
.sandbox-bar strong { font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; }
.sandbox-bar .linkish { color: var(--paper); }

/* ── Pied de page ────────────────────────────────────────────────────── */

.ftr { border-top: var(--rule); padding: clamp(40px, 5vw, 72px) var(--pad) 28px; }
.ftr__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 48px); }
@media (max-width: 860px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr__grid { grid-template-columns: 1fr; } }
.ftr h4 { margin: 0 0 14px; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 7px; }
.ftr a { font-size: 14px; color: var(--graphite); }
.ftr a:hover { color: var(--trace); }
.ftr__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: var(--rule-soft); margin-top: 36px; padding-top: 18px; }

.credits { border-top: var(--rule-soft); margin-top: 14px; padding-top: 14px; }
.credits p { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--stone); margin: 0; line-height: 1.7; }
.credits a { color: var(--stone); }

/* ── Apparition au défilement ────────────────────────────────────────── */

/* La classe posée par main.js est « on » — ne pas la renommer sans toucher au JS.
   Et sans JS, rien ne doit disparaître : d'où le repli sur :not(.js). */
.rv { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.rv.on { opacity: 1; transform: none; }
html:not(.js) .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition: none !important; }
}

/* En-tête du bordereau : les colonnes sont nommées, comme sur une table de prix. */
.plate__head {
  display: grid;
  grid-template-columns: 92px 132px minmax(0, 1fr) 240px 150px;
  align-items: end;
  border-bottom: var(--rule);
  padding-bottom: 10px;
}
.plate__head span {
  font-family: var(--mono); font-weight: 500; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--smoke);
  padding: 0 16px;
}
.plate__head span:last-child { text-align: right; padding-right: 0; }
@media (max-width: 1000px) { .plate__head { display: none; } }

/* Trois planches côte à côte : même cadre que sur les fiches. */
.plan-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
@media (max-width: 900px) { .plan-figures { grid-template-columns: 1fr; } }