/* Rituel — socle : remise à zéro, mise en page, typographie.
   Les jetons viennent de brand.css. Aucun hex en dur ici (README §6). */

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

/* Pas de `scroll-behavior: smooth` ici : il ferait ANIMER la remise du scroll
   à zéro lors d'un changement de page, alors que la spécification la veut
   instantanée (§8), et il entrerait en concurrence avec le rail piloté au
   scroll. Le mouvement du site vient de sa boucle d'images, pas du navigateur. */
/* `clip`, surtout PAS `hidden`. Avec overflow-x:hidden la spec fait calculer
   overflow-y:auto (une valeur non-visible sur un axe force l'autre à auto) :
   body devient un conteneur de défilement et le position:sticky du rail
   s'accroche à lui au lieu de la page. Mesuré : le sticky s'échappait de -619
   à -2474 px au fil de la section — on traversait le rail sans rien voir.
   `clip` découpe le débordement horizontal (badges en retrait négatif, cartes
   inclinées, aimants) sans créer de conteneur de défilement. */
html, body { margin: 0; padding: 0; overflow-x: clip }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

}

/* Écrites à chaque image par la boucle rAF (README §6.2). Elles vivent sur
   :root et NON sur body : le moteur les pose sur documentElement, et une
   déclaration portée par body les masquerait pour tout le document — la
   navigation serait restée en encre claire sur la page nuit. Les valeurs
   ci-dessous sont celles du thème clair : elles tiennent seules si le JS ne
   démarre jamais. */
:root {
  --ink: var(--color-text);
  --ink-dim: var(--color-neutral-700);
  --nav-ink: var(--color-neutral-700);
  --foot-scrim: none;
  --expo: cubic-bezier(.16, 1, .3, 1);
  --orb-x: 70%; --orb-y: 40%; --orb-r: 420px; --orb-lum: .4;
}

/* ══ Gouttières et largeurs ══
   Jamais de largeur fixe : le site doit reflow sous 1000 px (README §4). */
.shell { max-width: 1280px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 56px) }
.shell--narrow { max-width: 920px }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(18px, 2.2vw, 26px);
}
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) }

/* ══ Typographie ══ */
h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; margin: 0; letter-spacing: -.02em }
p { margin: 0 }

.kicker {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
  color: var(--color-accent-700);
}
.lead {
  font-size: clamp(17px, 1.75vw, 20.5px); line-height: 1.55;
  max-width: 42ch; color: var(--color-neutral-700);
}

/* ══ Accessibilité ══ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 100;
  padding: 12px 20px; border-radius: var(--radius-pill);
  background: var(--color-neutral-100); color: var(--color-accent-800);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 16px }