/* ==========================================================================
   Base : remise à zéro, typographie, accessibilité.
   ========================================================================== */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--creme-calcaire);
  color: var(--vert-profond);
  font-family: var(--font-texte);
  font-size: var(--taille-corps);
  font-weight: var(--poids-regular);
  line-height: var(--interligne-corps);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* --- Titres ---------------------------------------------------------------
   Fraunces s'arrête à h2. h3 et en dessous relèvent de l'interface : Outfit.
   font-weight est TOUJOURS explicite — l'instance par défaut de Fraunces est
   wght 900, un oubli sortirait tous les titres en Black. */
h1, h2 {
  font-family: var(--font-titre);
  font-weight: var(--poids-semibold);
  font-optical-sizing: auto;
  line-height: var(--interligne-titre);
  margin: 0;
}
h1 { font-size: var(--taille-h1); }
h2 { font-size: var(--taille-h2); }

h3, h4, h5, h6 {
  font-family: var(--font-texte);
  font-weight: var(--poids-semibold);
  line-height: 1.2;
  margin: 0;
}
h3 { font-size: var(--taille-h3); }

.titre-display {
  font-family: var(--font-titre);
  font-weight: var(--poids-semibold);
  font-optical-sizing: auto;
  font-size: var(--taille-display);
  line-height: 1.1;
  margin: 0;
}

p { margin: 0; }
.prose { max-width: var(--largeur-lecture); }
.prose > * + * { margin-top: var(--esp-4); }

/* --- Liens ---------------------------------------------------------------- */
a { color: var(--bleu-lien); }
a:hover { color: var(--vert-profond); }

/* --- Focus visible : exigence RGAA, absent du prototype ------------------- */
:focus-visible {
  outline: 3px solid var(--vert-coteau);
  outline-offset: 2px;
  border-radius: var(--rayon-petit);
}

/* --- Lien d'évitement ----------------------------------------------------- */
.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--vert-profond);
  color: var(--creme-calcaire);
  padding: var(--esp-3) var(--esp-4);
  border-radius: 0 0 var(--rayon-petit) 0;
  text-decoration: none;
}
.evitement:focus { left: 0; }

/* --- Cibles tactiles ------------------------------------------------------ */
a[class*="bouton"], button, .cible {
  min-height: var(--cible-tactile-min);
}

.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}