/* ==========================================================================
   BASE – Typographie globale, éléments HTML, accessibilité
   La police Outfit est chargée depuis Google Fonts (cf. functions.php),
   graisses 200 / 300 / 400 / 500 / 600, avec font-display: swap.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typographie globale
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--font-size-base);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-base);
  color: var(--color-text);
  background-color: var(--color-background);
  overflow-x: hidden; /* contient les débords volontaires (km-img-bleed-*, km-row-full…) sans supprimer l'effet visuel */

}

/* Préfixe body : bat la règle de couleur du système global de Divi 5
   (h1…h6 { color: var(--gcid-heading-color) }, injectée après nos feuilles),
   qui rendait les titres en noir au lieu du vert maquette. */
body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  margin: 0 0 0.5em;
}

/* H1 : Outfit SemiBold 54/55 */
h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h1);
}

/* H2 : Outfit SemiBold 35/35, interlettrage 10, 50px en dessous, vert */
body h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  color: var(--color-primary);
  margin-bottom: calc(var(--space-lg) / 2); /* 25px — moitié des 50px maquette */
}

/* H3 : Outfit SemiBold 23/30, interlettrage 40, 20px en dessous, couleur sable */
body h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
  color: var(--color-secondary);
  margin-bottom: 0.3515625rem; /* ~5.6px — 20px maquette réduits successivement de 50%, 25%, 25% */
}

/* H4 : Outfit SemiBold 20/28, interlettrage 20 */
h4 {
  font-size: var(--font-size-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-base);
}

/* H5 : Outfit ExtraLight 54/75, interlettrage -20 — réservé aux chiffres clés.
   Blanc par défaut : les chiffres clés vivent sur les bandes vert forêt.
   Marge basse nulle : le libellé (H6) vient se coller sous le chiffre. */
body h5 {
  font-size: var(--font-size-2xl);
  font-weight: var(--weight-xlight);
  line-height: var(--leading-stat);
  letter-spacing: var(--tracking-stat);
  color: var(--color-on-primary);
  margin-bottom: 0;
}

/* H6 : Outfit Medium 20/28, interlettrage 20 — sans marge haute (suit un H5) */
h6 {
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-base);
  margin-top: 0;
}

p {
  margin: 0 0 1em;
}

ul, ol {
  margin: 0 0 1em;
  padding-left: 1.25em;
}

/* Légendes et textes secondaires */
figcaption,
.km-text-muted {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Liens
   -------------------------------------------------------------------------- */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-default), opacity var(--transition-default);
}

a:hover {
  opacity: 0.75;
}

/* Focus clavier visible sur tous les éléments interactifs */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Images et médias responsives
   -------------------------------------------------------------------------- */
img,
video {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Accessibilité : animations réduites
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important; /* neutralise les animations Divi sans casser les callbacks JS */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}