/* =========================================================================
   BASE — reset moderne, typographie, primitives de mise en page
   Dépend de tokens.css. Aucune valeur en dur.
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-m));
  /* barre de défilement discrète et cohérente avec le thème */
  scrollbar-color: var(--border-strong) transparent;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-height: 100svh;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--lh-base);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;              /* garde-fou contre les débordements d'animation */
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
img { background: var(--surface-sunken); }   /* évite le flash blanc au chargement */

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

p, h1, h2, h3, h4, li, figcaption { overflow-wrap: break-word; text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

/* --- Titres ------------------------------------------------------------ */
h1, .h1 { font-family: var(--font-display); font-size: var(--step-6); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 700; }
h2, .h2 { font-family: var(--font-display); font-size: var(--step-4); line-height: var(--lh-snug);  letter-spacing: var(--tracking-tight); font-weight: 650; }
h3, .h3 { font-size: var(--step-2); line-height: var(--lh-snug); font-weight: 600; }
h4, .h4 { font-size: var(--step-1); line-height: var(--lh-snug); font-weight: 600; }
.display { font-family: var(--font-display); font-size: var(--step-7); line-height: .95; letter-spacing: -0.04em; font-weight: 700; }
.eyebrow {
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--brand);
}
.lead { font-size: var(--step-1); line-height: var(--lh-base); color: var(--text-muted); max-width: var(--measure); }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); font-size: var(--step--1); }

/* --- Liens ------------------------------------------------------------- */
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--brand); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--brand); color: var(--text-on-brand); }

/* --- Primitives de mise en page ---------------------------------------
   Composables : .container > .stack, .grid, .cluster, .split
   ----------------------------------------------------------------------- */
.container   { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.container-narrow { width: min(100% - var(--gutter) * 2, var(--container-narrow)); margin-inline: auto; }
.container-wide   { width: min(100% - var(--gutter) * 2, var(--container-wide));   margin-inline: auto; }
.full-bleed  { width: 100vw; margin-inline: calc(50% - 50vw); }

.stack > * + * { margin-block-start: var(--flow, var(--space-m)); }
.stack-s  { --flow: var(--space-s); }
.stack-l  { --flow: var(--space-l); }
.stack-xl { --flow: var(--space-xl); }

.section { padding-block: var(--space-section); }
.section-sunken { background: var(--surface-sunken); }

/* grille auto-responsive sans media query */
.grid {
  display: grid;
  gap: var(--gap, var(--space-m));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col, 280px), 100%), 1fr));
}
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--space-s)); align-items: center; }
.split   { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-m); align-items: center; }
.center  { display: grid; place-items: center; text-align: center; }
.sidebar { display: flex; flex-wrap: wrap; gap: var(--space-l); }
.sidebar > :first-child { flex: 1 1 20rem; }
.sidebar > :last-child  { flex: 999 1 30rem; }

.prose { max-width: var(--measure); line-height: var(--lh-loose); }
.prose > * + * { margin-block-start: var(--space-s); }
.prose h2 { margin-block-start: var(--space-xl); }
.prose h3 { margin-block-start: var(--space-l); }
.prose ul, .prose ol { padding-inline-start: var(--space-m); }
.prose li + li { margin-block-start: var(--space-2xs); }
.prose blockquote {
  border-inline-start: 3px solid var(--brand);
  padding-inline-start: var(--space-s);
  font-size: var(--step-1); color: var(--text-muted); font-style: italic;
}
.prose code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-sunken); padding: .15em .4em; border-radius: var(--radius-xs); }

/* --- Utilitaires sobres ------------------------------------------------ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--space-s);
  z-index: var(--z-toast); background: var(--brand); color: var(--text-on-brand);
  padding: var(--space-2xs) var(--space-s); border-radius: var(--radius-s);
}
.skip-link:focus { inset-block-start: var(--space-s); }

.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.no-scroll { overflow: hidden; }