/* ============================================================
   BASE — annesoeapas.fr
   Reset léger + styles de base + a11y (G6 : focus visible, cibles 24px, skip-link)
   Charger APRÈS tokens.css.
   ============================================================ */

/* --- Reset léger --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
/* Header sticky (layout.css) → les ancres internes (#contenu, FAQ) ne se cachent pas dessous.
   ≈ hauteur header (~3,8rem) + marge ; miroir du scroll-padding-bottom de la sticky-cta mobile. */
html { scroll-padding-top: 4.5rem; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

/* --- Titres --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--heading);
  line-height: 1.2;
  text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }
p, li { text-wrap: pretty; }

/* --- Liens --- */
a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { color: var(--link-hover); }

/* --- Médias (anti-CLS : jamais débordants) --- */
img, picture, svg, video { max-width: 100%; height: auto; display: block; }

/* --- Focus visible (WCAG 2.2 SC 2.4.7) — JAMAIS outline:none sans alternative ---
   outline-offset décale l'anneau hors de l'élément → contraste fort même sur bouton brun */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Cibles tactiles (SC 2.5.8) : zone interactive ≥ 24px ---
   (les liens en ligne dans un paragraphe sont exemptés → on ne force que les contrôles) */
button, [role="button"], input[type="submit"], input[type="button"],
input[type="checkbox"], input[type="radio"] {
  min-height: var(--target-min);
  min-width: var(--target-min);
}

/* --- Skip-link (navigation clavier : aller au contenu) --- */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -4rem;                 /* masqué hors écran */
  z-index: 1000;
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--space-3); } /* réapparaît au focus clavier */

/* --- Conteneur de contenu --- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* --- Rythme de section centralisé (NOUVEAU 2026-06-04) ---
   Convention : tout nouveau <section> top-level porte .section
   (ou .section-hero pour le hero). L'existant est remappé via ses
   sélecteurs propres (home.css / components.css / quiz.css). */
.section      { padding-block: var(--section-py); }
.section-hero { padding-block: var(--hero-py); }

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