/* =========================================================================
   ELEMENTS — Styles des balises nues (pas de classes ici)
   Défaut de lecture : texte noir sur fond crème (CLAUDE.md §2.2 — 17,6:1).
   ========================================================================= */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-black);
  background-color: var(--color-cream);
}

/* --- Titres : font display, interlignage serré ------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: inherit;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-h3); }

p {
  max-width: 65ch;
  text-wrap: pretty;
}

/* --- Liens ------------------------------------------------------------ */
a {
  color: var(--color-red);
  text-decoration-thickness: from-font;
  text-underline-offset: .15em;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--color-black);
}

/* --- Focus visible global (ajout DA) ---------------------------------
   Outline 2px solid + offset 2px, couleur contextuelle.
   Défaut = rouge (sur fond clair). Les contextes sombres/rouges
   redéfinissent --focus-color localement (cf. components / utilities). */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color, var(--color-red));
  outline-offset: var(--focus-offset);
}

/* On ne retire jamais l'outline sans remplacement : pas de `outline: none` ici. */

/* --- Divers ----------------------------------------------------------- */
hr {
  border: 0;
  border-top: 1px solid currentColor;
  opacity: .25;
}

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