/* ==========================================================================
   Base — réinitialisation, typographie et primitives réutilisables.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-accent);
}

a:hover {
  color: var(--color-accent-hover);
}

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

/* --- Conteneur ------------------------------------------------------------
   Centre le contenu et porte la marge latérale. Toute section l'utilise.

   `--container-max` décrit la largeur du CONTENU (1200 px, la grille sur
   laquelle la maquette a été dessinée). Comme tout le site est en
   `border-box`, on ajoute les marges latérales au max-width pour que le
   contenu mesure bien 1200 px et pas 1144. */

.container {
  max-width: calc(var(--container-max) + 2 * var(--container-px));
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + 2 * var(--container-px));
}

/* --- Rythme vertical des sections ---------------------------------------- */

.section {
  padding-block: var(--section-py);
}

.section--alt {
  background: var(--color-bg-alt);
}

.section--deep {
  background: var(--color-bg-deep);
  border-block: 1px solid var(--color-border-soft);
}

/* Empile les blocs d'une section avec un écart régulier. */
.stack {
  display: flex;
  flex-direction: column;
}

.stack--sm { gap: 16px; }
.stack--md { gap: 22px; }
.stack--lg { gap: 36px; }
.stack--xl { gap: 44px; }

/* --- Titres ---------------------------------------------------------------
   Classes plutôt que sélecteurs d'éléments : le niveau de titre reste libre
   (h1/h2/h3) et répond à la structure du document, pas à l'apparence. */

.title-hero,
.title-section,
.title-sub {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
}

.title-hero {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

.title-section {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.title-sub {
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-h3);
}

/* Fragment de titre mis en vert. <em> reste sémantique, le style est neutre. */
.title-accent {
  font-style: normal;
  color: var(--color-accent);
}

/* Petit intitulé italique au-dessus d'un titre : « 01 — Mon histoire ». */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent);
}

/* Intitulé court en capitales espacées. */
.overline {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* --- Paragraphes ---------------------------------------------------------- */

.lead {
  margin: 0;
  font-size: var(--fs-lead);
  font-style: italic;
  color: var(--color-text);
}

.prose {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.prose--soft {
  line-height: 1.75;
  color: var(--color-text-soft);
}

/* Phrase d'accroche courte : interlignage resserré. */
.prose--compact {
  line-height: 1.5;
}

.note {
  font-size: var(--fs-base);
  font-style: italic;
  color: var(--color-text-muted);
}

/* --- Boutons et liens d'action -------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  padding: 18px 30px;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.btn--primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

/* Contour vert sur fond sombre. */
.btn--outline {
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-text);
}

.btn--outline:hover {
  background: rgba(46, 229, 91, 0.1);
  color: var(--color-text);
}

/* Inversé : posé sur un aplat vert. */
.btn--invert {
  padding: 18px 32px;
  background: var(--color-bg);
  color: var(--color-text);
}

.btn--invert:hover {
  color: var(--color-accent);
}

/* Le padding compense la bordure de 2 px : même hauteur que .btn--invert. */
.btn--invert-outline {
  padding: 16px 28px;
  background: transparent;
  border: 2px solid var(--color-bg);
  color: var(--color-bg);
}

.btn--invert-outline:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* En-tête. */
.btn--sm {
  font-size: var(--fs-xs);
  padding: 12px 22px;
}

/* Section « Mon histoire » et carte de recommandation. */
.btn--md {
  padding: 16px 26px;
}

/* Bouton d'une carte de pack : occupe toute la largeur. */
.btn--block {
  width: 100%;
  padding: 16px;
}

/* Bouton rond (flèches du carrousel, icône TikTok). */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.btn-icon:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-icon--filled {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.btn-icon--filled:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.btn-icon--sm {
  width: 46px;
  height: 46px;
}

/* --- Étiquettes ------------------------------------------------------------ */

/* Pastille de réassurance du hero : « Top Rated », « 47 missions »… */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
}

/* Badge d'une carte de pack : « Recommandé », « Places limitées ». */
.badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 7px 11px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-accent);
}

.badge--solid {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* --- Icônes ---------------------------------------------------------------
   Les tracés vivent une seule fois dans le sprite SVG en haut de la page ;
   ici on ne règle que la taille, la couleur et l'épaisseur du trait. */

.icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--xs { width: 15px; height: 15px; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 30px; height: 30px; }

.icon--accent { color: var(--color-accent); }

.icon--bold { stroke-width: 2.4; }
.icon--bolder { stroke-width: 2.6; }

/* Puce de liste : alignée sur la première ligne de texte. */
.icon--bullet { margin-top: 4px; }

/* --- Listes ---------------------------------------------------------------- */

.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Utilitaires rares ----------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Le sprite d'icônes ne doit occuper aucune place dans le flux. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}