/* ============================================================================
   sections.css — la mise en page des grandes zones.
   Les règles responsives sont COLOCALISÉES avec le composant qu'elles
   concernent plutôt que rassemblées dans un fichier à part : on lit une règle
   et son adaptation au même endroit, et rien ne se désynchronise.
   ============================================================================ */

main { position: relative; }

section[id] {
  padding-block: var(--space-8);
  scroll-margin-block-start: calc(var(--nav-h) + var(--space-4));
}
section[id] + section[id] { border-block-start: 1px solid var(--grid-line); }

.section__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-cyan);
  margin-block-end: var(--space-3);
}
.section__eyebrow::before { content: ""; inline-size: 22px; block-size: 2px; background: currentColor; }

.section__head { max-inline-size: 74ch; margin-block-end: var(--space-6); }

/* ------------------------------------------------------------------ héros -- */
.hero {
  padding-block: clamp(var(--space-7), 6vw, var(--space-10)) var(--space-8);
  position: relative;
}
.hero__lockup { display: flex; align-items: center; gap: var(--space-4); margin-block-end: var(--space-5); flex-wrap: wrap; }
.hero__logo {
  block-size: 34px; inline-size: auto;
  color: var(--text-strong);
  padding: var(--space-3) var(--space-4);
  background: var(--brand-navy);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-sizing: content-box;
}
.hero h1 { margin-block-end: var(--space-5); }
.hero__accent { color: var(--accent-cyan); }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin-block-start: var(--space-6);
  font-size: var(--fs-small); color: var(--text-faint);
}
.hero__stats {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border);
}

/* --------------------------------------------------- corps + sommaire ------ */
/* `minmax(0, 1fr)` et NON `1fr` : le raccourci `1fr` vaut `minmax(auto, 1fr)`,
   et ce minimum `auto` vaut la largeur min-content de l'élément le plus large
   de la colonne. Un seul tableau large suffit alors à élargir toute la colonne
   et à faire déborder la page — mesuré ici à 375 px : la colonne partait à
   708 px pour 365 px disponibles. */
.layout { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr); }
.layout > * { min-inline-size: 0; }
@media (min-width: 1080px) {
  /* PAS de `align-items: start` ici. Ce réglage, qui semble pourtant l'allié
     naturel d'un sommaire collant, l'empêche en réalité de coller : la colonne
     prend alors la hauteur de son seul contenu (745 px mesurés), et un élément
     `sticky` ne peut jamais coller au-delà des limites de son parent. Le sommaire
     décrochait donc après le premier écran, sur une page de 37 000 px de haut.
     En laissant l'étirement par défaut, la colonne fait toute la hauteur de la
     ligne et le sommaire colle sur tout le parcours. Mesuré le 2026-08-07. */
  .layout { grid-template-columns: minmax(0, 1fr) 250px; }
  .layout__aside { order: 2; }
  .layout__main { order: 1; }
}
.layout__aside .toc {
  position: sticky;
  inset-block-start: calc(var(--nav-h) + var(--space-4));
  max-block-size: calc(100vh - var(--nav-h) - var(--space-8));
  overflow-y: auto;
}

/* ------------------------------------------------------ grilles de cartes --
   Volontairement ASYMÉTRIQUES : trois cartes identiques alignées est la
   signature visuelle d'une page générée. Ici la première tuile est plus large. */
.grid-bento {
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .grid-bento { grid-template-columns: repeat(6, 1fr); }
  .grid-bento > :nth-child(1) { grid-column: span 6; }
  .grid-bento > :nth-child(2) { grid-column: span 3; }
  .grid-bento > :nth-child(3) { grid-column: span 3; }
  .grid-bento > :nth-child(4) { grid-column: span 2; }
  .grid-bento > :nth-child(5) { grid-column: span 4; }
}
@media (min-width: 1180px) {
  .grid-bento > :nth-child(1) { grid-column: span 4; }
  .grid-bento > :nth-child(2) { grid-column: span 2; }
  .grid-bento > :nth-child(3) { grid-column: span 2; }
  .grid-bento > :nth-child(4) { grid-column: span 2; }
  .grid-bento > :nth-child(5) { grid-column: span 2; }
}

.grid-2 { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.grid-2 > *, .grid-bento > * { min-inline-size: 0; }
@media (min-width: 820px) { .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* `auto-fit` + `minmax(240px, 1fr)` : trois colonnes quand la place existe, deux
   puis une sinon, sans point de rupture à maintenir. Le `minmax(0, …)` du premier
   argument est inutile ici puisque la borne basse est déjà explicite. */
.grid-3 { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-3 > * { min-inline-size: 0; }

.stack > * + * { margin-block-start: var(--space-5); }

/* ---------------------------------------------------------- prose longue --- */
.prose { max-inline-size: var(--measure); }
.prose h3 { margin-block-start: var(--space-7); }
.prose h4 { margin-block-start: var(--space-5); }
.prose > :first-child { margin-block-start: 0; }

/* -------------------------------------------------- fiche d'un modèle ------ */
.modele__entete {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-5);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--border);
  margin-block-end: var(--space-5);
}
.modele__prix { margin-inline-start: auto; color: var(--text-muted); font-size: var(--fs-small); }
.modele__params { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.param {
  padding: var(--space-4);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.param__k { font-size: var(--fs-micro); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.param__v { font-size: var(--fs-h4); font-weight: 650; color: var(--text-strong); margin-block-start: var(--space-1); }
.param__n { font-size: var(--fs-micro); color: var(--text-muted); margin-block-start: var(--space-2); }

/* ---------------------------------------------- bandeau de contrôle motion -- */
.motion-ctl {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-block-size: 44px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font: inherit; font-size: var(--fs-micro); font-weight: 600;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out-cubic), border-color var(--t-fast) var(--ease-out-cubic);
}
.motion-ctl:hover { color: var(--text-strong); border-color: var(--accent); }
.motion-ctl__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--success); flex: none; }
html[data-mouvement="pause"] .motion-ctl__dot { background: var(--text-faint); }

/* ----------------------------------------------------------- légende ------- */
.legende { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); padding: var(--space-4) var(--space-5); background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); }
.legende__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); }

/* ------------------------------------------------------------- impression -- */
@media print {
  .aura, .nav, .toc, .motion-ctl, .tool { display: none !important; }
  body { background: #fff; color: #111; }
  .card, .rule, .versus, .callout { break-inside: avoid; border-color: #999; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}