/* =====================================================================
   BASE.CSS — Styles de document (rythme typographique, conteneur, section)
   ===================================================================== */

body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Empêche tout scroll horizontal transitoire (ex. transforms « slide » des
   révélations qui débordent hors écran) sans créer de conteneur de défilement :
   le header/footer sticky restent fonctionnels (ils sont hors de <main>). */
main {
  overflow-x: clip;
}

/* ---------- Conteneur ---------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow { max-width: 820px; }
.container--wide   { max-width: 1320px; }

/* ---------- Sections ---------- */
.section {
  padding-block: var(--section-py);
}
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section--alt   { background: var(--color-bg-alt); }
.section--navy  { background: var(--color-navy); color: var(--color-text-invert); }
.section--navy-radial {
  background: radial-gradient(circle at 30% 0, var(--color-navy-soft), var(--color-navy) 55%);
  color: var(--color-text-invert);
}

/* ---------- Titres & intitulés ---------- */
h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.section-title {
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.section-title--left { text-align: left; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-yellow);
  margin-bottom: 0.5rem;
}
.eyebrow--orange { color: var(--color-orange); }

.lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--color-muted);
}
.section--navy .lead,
.section--navy-radial .lead { color: var(--color-muted-light); }

/* ---------- Liens texte ---------- */
.link {
  color: var(--color-orange);
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap var(--transition-fast);
}
.link:hover { gap: 0.7rem; }

/* ---------- Accents de couleur ---------- */
.text-orange { color: var(--color-orange); }
.text-yellow { color: var(--color-yellow); }
.text-navy   { color: var(--color-navy); }
.text-muted  { color: var(--color-muted); }

/* ---------- Listes à puces (checks) ---------- */
.checklist { display: grid; gap: 0.6rem; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: var(--lh-snug);
}
.checklist li::before {
  content: '';
  flex: 0 0 auto;
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--color-yellow);
  /* coche SVG masquée */
  -webkit-mask: center / 0.7rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
          mask: center / 0.7rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-color: var(--color-yellow);
}
/* fallback : pastille pleine si mask non géré */
@supports not (mask: url('#')) {
  .checklist li::before { content: '✓'; background: none; color: var(--color-yellow); font-weight: 900; }
}

/* ---------- Fil d'Ariane ---------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: var(--fs-small);
  color: var(--color-muted);
}
.breadcrumb a:hover { color: var(--color-orange); }
.breadcrumb [aria-current] { color: var(--color-text); font-weight: var(--fw-semibold); }

/* ---------- Utilitaires ---------- */
.text-center { text-align: center; }
.mt-auto { margin-top: auto; }
.flow > * + * { margin-top: 1rem; }
.flow--lg > * + * { margin-top: 1.5rem; }