/* ============================================================================
   SECTIONS — la mise en page des grandes zones.
   ========================================================================== */

/* ── Le premier écran ─────────────────────────────────────────────────────
   Sa hauteur est volontairement PLUS PETITE que la fenêtre. Un hero qui remplit
   exactement l'écran fabrique « l'illusion de complétude » : dans les tests de
   Nielsen Norman Group, 6 utilisateurs sur 8 ne devinaient pas qu'il y avait
   quelque chose en dessous. On laisse donc toujours dépasser le début de la
   suite. `svh` et non `vh` : sur mobile, `vh` ignore la barre d'adresse et le
   bloc saute au premier défilement. */
.hero {
  position: relative;
  min-block-size: min(78svh, 760px);
  display: flex;
  align-items: center;
  padding-block: var(--e9) var(--e7);
  overflow: clip;
}
/* La lumière de la page : une source unique, en haut à droite, rasante.
   Décorative — elle ne doit jamais intercepter un clic. */
.hero::before {
  content: '';
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -10%;
  inline-size: min(80vw, 900px);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    oklch(0.945 0.185 122 / 0.16) 0%,
    oklch(0.945 0.185 122 / 0.06) 34%,
    transparent 68%);
}
.hero__logo { color: var(--texte); inline-size: clamp(150px, 20vw, 224px); margin-block-end: var(--e5); }
.hero__logo svg { inline-size: 100%; block-size: auto; }
.hero h1 { max-inline-size: 15ch; }
.hero__accroche { font-size: var(--fs-lead); color: var(--texte-attenue); max-inline-size: 56ch; margin-block-start: var(--e5); }
.hero__chiffres { display: flex; flex-wrap: wrap; gap: var(--e6); margin-block-start: var(--e6); }
.hero__chiffre strong { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); color: var(--lime); line-height: 1; }
.hero__chiffre span { font-size: var(--fs-petit); color: var(--texte-discret); }

/* ── Rythme des sections ──────────────────────────────────────────────────── */
.section { padding-block: var(--e9); position: relative; }
.section + .section { border-block-start: 1px solid var(--bordure); }
.section__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  margin-block-end: var(--e4);
}
.section__eyebrow::before { content: ''; inline-size: 28px; block-size: 1px; background: currentColor; }
.section__intro { font-size: var(--fs-lead); color: var(--texte-attenue); max-inline-size: 62ch; margin-block-start: var(--e5); }

/* ── Le rail de navigation ─────────────────────────────────────────────────
   Une page de vingt-huit mille mots et quatorze sections ne se parcourt pas
   sans repère permanent : on sait qu'on lit, jamais où l'on en est ni ce qui
   reste. La barre du haut ne peut pas porter quatorze entrées sans devenir
   illisible ; le sommaire de début de page, lui, disparaît dès qu'on descend.

   Ce rail apparaît donc à partir de 1200 px — c'est-à-dire exactement là où
   l'écran était jusqu'ici à moitié vide, avec 575 px inutilisés à droite d'un
   texte de 841 px. Il ne mange pas la mesure de lecture : il occupe une place
   qui ne servait à rien.

   En dessous de 1200 px il n'existe pas, et le sommaire de début de page
   reprend son rôle — un rail sur petit écran prendrait la place du contenu. */
.rail { display: none; }

@media (min-width: 1200px) {
  .rail {
    display: block;
    position: fixed;
    inset-block-start: calc(var(--h-nav) + var(--e5));
    inset-inline-start: var(--e5);
    inline-size: 216px;
    max-block-size: calc(100svh - var(--h-nav) - var(--e5));
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 40;
    padding-inline-end: var(--e3);
    /* Seize entrées à 44 px font 704 px incompressibles : sur un écran court, ce rail DEVRA
       défiler, aucune mise en page ne l'évite. La barre native prenait 16 px — 7 % de la
       largeur, prélevés sur le texte des libellés — pour un débordement qui n'était que de
       21 px à 900 px de haut ; d'où le réflexe de la masquer.
       C'était la mauvaise réponse, et la mesure l'a montré : à 1280×720, le rail déborde de
       164 px pour de bon, et sans barre les quatre dernières sections devenaient à la fois
       invisibles ET insoupçonnables — rien n'indiquait qu'il y avait autre chose en dessous.
       Masquer un indicateur ne supprime pas ce qu'il indique. On la garde donc, en `thin` et
       aux couleurs du thème : elle coûte deux fois moins large et elle dit la vérité. */
    scrollbar-width: thin;
    scrollbar-color: var(--bordure-forte) transparent;
  }
  .rail__titre {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texte-discret);
    margin-block-end: var(--e3);
  }
  .rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
  .rail a {
    display: flex;
    align-items: center;
    gap: var(--e2);
    /* 44 px, comme partout ailleurs. J'avais d'abord mis 34 px en me disant qu'un rail
       affiché seulement au-dessus de 1200 px ne servait qu'au pointeur fin — un écran large
       peut être tactile, et surtout l'exigence de 44 px est posée comme mécanique, pas comme
       négociable au cas par cas. Argumenter une exception, c'est affaiblir le contrôle. */
    min-block-size: 44px;
    padding: var(--e1) var(--e3);
    font-size: var(--fs-micro);
    line-height: 1.3;
    color: var(--texte-discret);
    text-decoration: none;
    border-inline-start: 2px solid var(--bordure);
    border-radius: 0 var(--r-petit) var(--r-petit) 0;
    transition: color var(--t-court), border-color var(--t-court), background var(--t-court);
  }
  .rail a:hover { color: var(--texte); background: var(--surface); }
  .rail a[aria-current='true'] {
    color: var(--lime);
    border-inline-start-color: var(--lime);
    background: var(--surface);
  }
  .rail__num { font-family: var(--font-mono); color: var(--texte-discret); flex: none; }
  .rail a[aria-current='true'] .rail__num { color: var(--lime); }

  /* Le rail est posé au-dessus de la page : il lui faut son propre fond, sinon le
     contenu d'une section pleine largeur défilerait au travers de ses libellés. */
  .rail {
    background: var(--bg);
    border-inline-end: 1px solid var(--bordure);
    padding-block: var(--e4);
    padding-inline: var(--e3);
    border-radius: var(--r-carte);
  }

  /* Le décalage se pose sur la SECTION, pas sur le conteneur. La nuance décide de tout :
     `.contenant` est dimensionné en `min(100% − marges, largeur max)`, et ce `100 %` est
     celui de son parent. Décaler le conteneur le poussait vers la droite sans réduire sa
     largeur de référence — les quatre sections amples sortaient alors de 189 px hors de
     l'écran. En décalant la section, l'espace disponible diminue d'autant et le conteneur
     s'y ajuste seul, en restant centré dans ce qui reste.
     ⚠️ La barre du haut est EXCLUE du décalage : elle occupe toute la largeur, et la
     décaler poussait ses derniers liens hors champ — « Le drawdown » était coupé en deux. */
  main > .section, main > .hero { padding-inline-start: 252px; }
}

/* ── Sommaire de début de page ────────────────────────────────────────────
   Écrit d'abord comme colonne latérale collante, puis ramené à un bloc en flux.
   La raison est mesurable : collant, il portait `max-block-size: 100svh` et
   `overflow-y: auto`, donc sur un écran large mais court (1280×720, très courant
   sur les portables d'entrée de gamme) ses 13 entrées se retrouvaient dans un
   défilement interne — un sommaire qu'il faut faire défiler pour voir le plan
   ne remplit plus sa fonction. Le repérage pendant la lecture est assuré par la
   barre de navigation collante, qui marque la section courante (js/ui.js).
   Deux colonnes dès qu'il y a la place : 13 lignes sur une colonne obligent à
   balayer verticalement là où l'œil embrasse deux colonnes d'un coup. */
.sommaire ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
@media (min-width: 900px) {
  .sommaire ol { display: block; columns: 2; column-gap: var(--e6); }
  .sommaire li { break-inside: avoid; }
}
.sommaire a {
  display: block;
  min-block-size: 44px;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  font-size: var(--fs-petit);
  color: var(--texte-discret);
  text-decoration: none;
  border-inline-start: 2px solid var(--bordure);
  border-radius: 0 var(--r-petit) var(--r-petit) 0;
  transition: color var(--t-court), background var(--t-court), border-color var(--t-court);
}
.sommaire a:hover { color: var(--texte); background: var(--surface); }
.sommaire a[aria-current='true'] { color: var(--lime); border-inline-start-color: var(--lime); background: var(--surface); }
.sommaire__num { font-family: var(--font-mono); font-size: var(--fs-micro); opacity: 0.7; }

/* ── Grilles ──────────────────────────────────────────────────────────────── */
.grille { display: grid; gap: var(--e5); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

/* ── Pied de page ─────────────────────────────────────────────────────────── */
.pied { padding-block: var(--e8) var(--e7); border-block-start: 1px solid var(--bordure); background: var(--bg-eleve); }
.pied__mention { font-size: var(--fs-petit); color: var(--texte-discret); max-inline-size: 78ch; }
.pied__mention strong { color: var(--texte-attenue); }

/* Ces sections ont porté `content-visibility: auto` — l'optimisation qui épargne
   au navigateur le rendu de ce qui est hors écran. Elle a été RETIRÉE, et la
   raison mérite d'être écrite pour que personne ne la remette sans savoir.

   Tant qu'une section n'a pas été rendue une fois, sa hauteur n'est qu'une
   estimation (`contain-intrinsic-size`). Le navigateur calcule donc la position
   d'une ancre avec des hauteurs fausses, et l'erreur se cumule sur douze
   sections. Mesuré ici : un lien vers `#contradictions` déposait le lecteur
   7 802 px à côté — plusieurs sections trop haut. Un double calage en JavaScript
   n'y suffisait pas, parce que les sections traversées continuent de grandir à
   mesure qu'elles se rendent, sous la position déjà atteinte.

   Sur une page de référence dont le sommaire est le principal moyen d'accès,
   une ancre qui tombe à côté est un défaut plus coûteux que quelques
   millisecondes de rendu initial. L'arbitrage est donc tranché en faveur de la
   navigation, et il est mesurable : voir le relevé de performance au bilan. */