/* ============================================================
   01 — BASE
   Reset, typographie de base, comportements d'accessibilité
   globaux. Rien ici n'est spécifique à une section : ça vaut
   pour n'importe quelle page du site.
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }

/* overflow-x sur html ET body : un élément position:fixed qui déborde
   (ex. nav.links, le panneau mobile hors-écran via transform) se
   positionne par rapport au viewport, pas à body — seul overflow-x
   sur html empêche la page (html/documentElement, le scroller racine)
   de devenir défilable horizontalement à cause de lui. */
/* scroll-snap-type ici (pas seulement sur l'accueil) : inerte tant
   qu'aucun descendant ne porte scroll-snap-align, donc sans effet sur
   les pages qui n'en posent pas (ex. mentions légales). Sert de socle
   partagé pour tout scroll-snap ajouté page par page. */
html{ scroll-behavior:smooth; overflow-x:hidden; scroll-snap-type:y mandatory; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--text-dark);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* garde-fou site-wide : certains blocs (galerie
    Notre approche, filigranes) débordent volontairement de leur
    section en largeur pendant leurs animations de scroll */
}

::selection{ background:var(--indigo); color:var(--text-light); }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

:focus-visible{
  outline:2px solid var(--indigo-lt);
  outline-offset:3px;
}

h1,h2,h3,h4{ margin:0; font-family:var(--heading); font-weight:700; letter-spacing:-0.01em; }

/* ---------- Lien d'évitement clavier ----------
   Premier élément focusable de la page : permet à un usager
   clavier ou lecteur d'écran de sauter directement au contenu
   sans retraverser toute la navigation à chaque page. */
.skip-link{
  position:absolute;
  left:16px; top:-60px;
  z-index:1000;
  background:var(--paper);
  color:var(--indigo);
  font-family:var(--body); font-weight:600; font-size:13.5px;
  padding:12px 20px;
  border-radius:var(--radius);
  transition:top .2s ease;
}
.skip-link:focus{ top:16px; }

/* ---------- Étiquette de section (typographie utilitaire) ---------- */
.eyebrow{
  font-family:var(--body);
  font-weight:600;
  font-size:11.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:currentColor;
  opacity:0.5;
}
/* Variantes de couleur — évitent un style="" en dur dans le HTML
   quand l'eyebrow n'hérite pas déjà de la bonne couleur via .section-head */
.eyebrow-indigo{ color:var(--indigo); }
.eyebrow-light{ color:var(--indigo-lt); }

/* ---------- Conteneur de grille éditoriale ---------- */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--edge);
  padding-right:var(--edge);
}