/* ------------------------------------------------------------------
   base.css — réinitialisation, typographie, primitives de mise en page.
   Mobile-first : les styles de base visent le téléphone, les media
   queries élargissent. Aucune valeur littérale — tout vient de tokens.css.
   ------------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-corps);
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

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

/* <picture> n'est qu'une enveloppe : il n'hérite d'aucune dimension. Dans un
   cadre à ratio fixe, un <img height:100%> se mesure contre la hauteur « auto »
   du <picture>, retombe sur auto, et laisse des bandes vides. Partout où un
   cadre impose ses dimensions, le <picture> doit donc les relayer. */
.cadre { overflow: hidden; }
.cadre > picture,
.cadre > picture > img,
.cadre > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1, h2, h3, h4 { font-family: var(--police-titre); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

button { font: inherit; color: inherit; }

::selection { background: var(--jaune); color: var(--sur-jaune); }

/* Focus clavier visible partout (§6). :focus-visible évite l'anneau au clic
   souris tout en le gardant pour la navigation au clavier. */
:focus-visible {
  outline: var(--focus-epaisseur) solid var(--focus-couleur);
  outline-offset: var(--focus-ecart);
  border-radius: var(--rad-sm);
}

/* Lien d'évitement : premier élément focusable de la page. */
.saut-au-contenu {
  position: absolute;
  left: var(--e-8);
  top: calc(-1 * var(--e-56));
  z-index: 100;
  background: var(--texte);
  color: var(--fond);
  padding: var(--e-10) var(--e-16);
  border-radius: var(--rad-pill);
  font-weight: var(--g-extra);
  text-decoration: none;
  transition: top var(--transition);
}
.saut-au-contenu:focus { top: var(--e-8); }

/* ---------- Primitives ---------- */

.conteneur {
  max-width: var(--conteneur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* Haut généreux, bas resserré : c'est le padding haut de la section SUIVANTE
   qui crée la respiration, pas la somme des deux. */
.section { padding-block: var(--section-y) var(--section-bas); }
.section--accueil { padding-block: var(--section-y-lg) var(--section-bas-lg); }
.section--texte { max-width: 68ch; }
/* Encart dont le fond porte déjà sa marge intérieure : inutile d'en rajouter. */
.section--serree { padding-block: var(--e-34) 0; }

.section__entete {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-16);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--e-22);
}

.grille { display: grid; gap: var(--grille-gap); }
.grille--2      { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grille--3      { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--grille-gap-lg); }
.grille--cartes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }

@media (min-width: 700px) {
  .grille--cartes { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

/* ---------- Titres et textes ---------- */

.titre-hero {
  font-size: var(--t-hero);
  font-weight: var(--g-gras);
  line-height: var(--lh-titre);
  letter-spacing: var(--ls-hero);
  margin-block: var(--e-18) 0;
}

.titre-page {
  font-size: var(--t-page);
  font-weight: var(--g-gras);
  letter-spacing: var(--ls-page);
  line-height: var(--lh-serre);
}

.titre-section {
  font-size: var(--t-section);
  font-weight: var(--g-gras);
  letter-spacing: var(--ls-section);
  line-height: var(--lh-serre);
}
.titre-section--petit { font-size: var(--t-titre3); font-weight: var(--g-demi);
                        margin-block: var(--e-34) var(--e-14); }

.titre-bloc {
  font-size: var(--t-bloc);
  font-weight: var(--g-gras);
  letter-spacing: var(--ls-section);
  line-height: var(--lh-serre);
}

.chapo {
  color: var(--texte-doux);
  margin-block: var(--e-8) var(--e-26);
  max-width: 52em;
}
.chapo--large { font-size: var(--t-corps-lg); max-width: 46em; }

.note { color: var(--texte-meta); font-size: var(--t-meta); margin-top: var(--e-14); }

.sur-titre {
  display: inline-flex;
  align-items: center;
  gap: var(--e-8);
  font-weight: var(--g-extra);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--jaune);
}
.sur-titre--rouge { color: var(--rose); }

.fil { font-size: var(--t-meta); color: var(--texte-meta); margin-bottom: var(--e-8); }
.fil a { text-decoration: none; font-weight: var(--g-gras); }
.fil a:hover { text-decoration: underline; }

/* Titre au dégradé arc-en-ciel. Le repli color garantit un texte lisible si
   background-clip:text n'est pas supporté. */
.texte-degrade {
  color: var(--rose-texte);
  background: var(--grad-accent);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: decalage var(--duree-degrade) ease infinite;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .texte-degrade { color: transparent; }
}

@keyframes decalage {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Bloc de mentions légales : titre et texte forment une seule unité éditable. */
.mention + .mention { margin-top: var(--e-26); }

/* Les mentions légales contiennent des adresses : les retours à la ligne
   saisis doivent se voir. `pre-line` les conserve sans toucher au reste, et
   le texte reste échappé — aucune balise ne peut s'y glisser. */
.mention .chapo { white-space: pre-line; }