/* =========================================================
   Base — typographie, conteneurs, utilitaires
   ========================================================= */
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: -.01em;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { color: inherit; }
strong { font-weight: 700; }
small { font-size: var(--fs-sm); }

::selection { background: var(--color-red); color: var(--color-white); }

:focus-visible { outline: 3px solid var(--color-red); outline-offset: 2px; border-radius: 2px; }
.site-main:focus, .auth-main:focus, [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
h2[tabindex="-1"]:focus { outline: none; }

/* Container unique : les bandes de couleur restent pleine largeur, le contenu est centré dans cet axe. */
.container { width: min(100% - (var(--container-padding) * 2), var(--container-max)); margin-inline: auto; }
.container--narrow { width: min(100% - (var(--container-padding) * 2), var(--container-narrow)); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--cream { background: var(--color-cream); }
.section--muted { background: var(--color-surface-2); }

.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--xs { width: .9em; height: .9em; }
.icon--lg { width: 1.6em; height: 1.6em; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: var(--space-4); top: -60px; z-index: var(--z-toast);
  background: var(--color-dark); color: var(--color-white); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); font-weight: 600; transition: top var(--t-fast);
}
.skip-link:focus { top: var(--space-4); }

.text-muted { color: var(--color-text-muted); }
.text-red { color: var(--color-red); }
.text-green { color: var(--color-green); }
.text-gold { color: var(--color-gold); }
.text-center { text-align: center; }
.lead { font-size: var(--fs-md); color: var(--color-text-muted); }

.prose { color: #3c4246; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--space-10); color: var(--color-dark); scroll-margin-top: 120px; }
.prose h3 { font-size: var(--fs-md); margin-top: var(--space-6); color: var(--color-green); }
.prose ul { list-style: disc; padding-inline-start: var(--space-6); }
.prose ul li + li { margin-top: var(--space-2); }
.prose a { color: var(--color-red); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--color-dark); }

mark.hl { background: rgba(233, 185, 73, .35); color: inherit; padding: 0 .1em; border-radius: 2px; }

/* Animation d'apparition : active uniquement quand le JS a démarré (classe .js sur <html>) */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Espacements utilitaires (marges haute) */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }