/* ==========================================================================
   CRÉAPROD-JISTA V2 — Base (reset, typographie, éléments génériques)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Garde-fou anti-débordement horizontal : le menu mobile (.primary-nav)
     combine position:fixed + transform (translateX) pour se glisser hors
     champ — cette combinaison fait sortir l'élément du calcul normal du
     "fixed" et peut élargir le scroll horizontal du document même quand le
     panneau est visuellement hors écran. Sans overflow-x:hidden ici, cela
     provoque un débordement horizontal constaté à 1024px de large. */
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
  color: var(--color-white);
}
p { margin: 0 0 var(--space-sm); }

/* Respect des préférences de mouvement réduit (accessibilité) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Lien d'évitement clavier */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--color-green); color: #fff;
  padding: 0.75rem 1.25rem; z-index: 1000; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--color-gold-bright); outline-offset: 3px; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); }

/* Espacement vertical resserré (07/09, optimisation homepage) : un espacement
   fixe de 8rem (var(--space-xl)) en haut ET en bas de CHAQUE section, à
   toutes les largeurs, créait des transitions trop hautes entre sections et
   un excès d'espace vide notable sur mobile (256px de marge cumulée sur un
   écran de 390px de large). clamp() garde une vraie respiration autour du
   contenu tout en resserrant le rythme global et en réduisant d'autant
   l'espace sur les petits écrans. Les sections qui ont besoin de plus ou
   moins d'air gardent leurs propres surcharges (voir components.css). */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }

.kicker {
  font-family: var(--font-accent); font-style: italic;
  color: var(--color-gold); font-size: 1.05rem; margin-bottom: var(--space-xs);
}
.lead { font-size: 1.15rem; max-width: 60ch; color: var(--color-white-soft); }

.text-accent { color: var(--color-gold); }

/* Animation légère d'apparition au scroll (réutilisée site entier) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }