/* ==========================================================================
   Studio Luceo : feuille de style unique
   Mobile d'abord. Toutes les couleurs, tailles et espacements sont des jetons.
   Règle absolue : le texte est toujours en encre verte (#1F2B23) sur fond clair
   (blanc cassé, sauge clair, miel). L'ambre n'est jamais une couleur de texte.
   Le site est volontairement clair : pas de mode sombre.
   Les animations n'existent que pour les visiteurs qui n'ont pas demandé
   de réduire les mouvements (voir la section « Animations »).
   ========================================================================== */

/* ---------- Police de la marque : Montserrat ExtraBold (licence OFL) ---------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Jetons ---------- */
:root {
  color-scheme: light;

  /* Palette : blanc cassé, vert sauge, encre verte, touches de miel et d'ambre */
  --c-blanc-casse: #FAF8F3;
  --c-sauge: #7C9A7E;
  --c-sauge-clair: #DCE7DA;
  --c-sauge-fonce: #4E6A51;
  --c-encre: #1F2B23;
  --c-ambre: #F0A830;
  --c-miel: #F7DFA8;

  /* Rôles */
  --fond: var(--c-blanc-casse);
  --texte: var(--c-encre);
  --bordure: rgba(78, 106, 81, 0.45);
  --focus: var(--c-encre);

  --bande-fond: var(--c-sauge-clair);
  --bande-texte: var(--c-encre);
  --bande-bordure: rgba(78, 106, 81, 0.45);

  --bouton-fond: var(--c-ambre);
  --bouton-texte: var(--c-encre);
  --bouton-bord: var(--c-encre);

  --puce-fond: var(--c-miel);
  --puce-texte: var(--c-encre);

  /* Halos et décors lumineux (jamais du texte) */
  --halo-etape-coeur: rgba(240, 168, 48, 0.5);
  --halo-etape-bord: rgba(240, 168, 48, 0);
  --halo-mascotte-coeur: rgba(240, 168, 48, 0.28);
  --halo-mascotte-bord: rgba(240, 168, 48, 0);
  --ligne-etape: rgba(78, 106, 81, 0.5);
  --lueur-etincelle: rgba(240, 168, 48, 0.45);

  /* Polices : SF Pro et SF Mono via le système (sur Apple, -apple-system et ui-monospace
     désignent SF Pro et SF Mono). Ailleurs, la police système prend le relais. */
  --police-texte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-titre: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --police-marque: "Montserrat", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, Arial, sans-serif;

  /* Tailles de texte */
  --t-petit: 0.875rem;
  --t-base: 1.0625rem;
  --t-lead: 1.1875rem;
  --t-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --t-h1: clamp(2.125rem, 1.6rem + 2.8vw, 3.5rem);
  --t-chiffre: clamp(3rem, 2rem + 5vw, 4.5rem);
  --interligne-texte: 1.65;
  --interligne-titre: 1.15;
  --graisse-titre: 700;
  --serrage-titre: -0.02em;

  /* Espacements */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6rem;
  --section-vertical: clamp(var(--s-7), 6vw, var(--s-9));

  /* Formes et gabarits */
  --rayon: 0.875rem;
  --rayon-pastille: 999px;
  --epaisseur-bordure: 2px;
  --taille-cible: 2.75rem;
  --largeur-page: 68rem;
  --largeur-texte: 42rem;
  --gouttiere: 1.25rem;

  /* Mascotte */
  --mascotte-entete: 2.5rem;
  --mascotte-hero: 9rem;
  --mascotte-pose: 8rem;
  --mascotte-etape: 4.5rem;
  --mascotte-pied: 2rem;

  /* Mouvement */
  --duree-douce: 1.2s;
  --duree-pulsation: 4.5s;
  --duree-flottement: 6s;
  --duree-courte: 0.2s;
  --duree-apparition: 0.85s;
  --courbe-apparition: cubic-bezier(0.2, 0.7, 0.2, 1);
  --decalage-apparition: 110ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--s-5);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  line-height: var(--interligne-texte);
  overflow-wrap: break-word;
}

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

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--police-titre);
  font-weight: var(--graisse-titre);
  letter-spacing: var(--serrage-titre);
  line-height: var(--interligne-titre);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 3px;
}

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

/* ---------- Gabarits ---------- */
.conteneur {
  width: min(100% - 2 * var(--gouttiere), var(--largeur-page));
  margin-inline: auto;
}

.section {
  position: relative;
  overflow-x: clip;
  padding-block: var(--section-vertical);
}

.section__titre {
  margin-bottom: var(--s-5);
}

.texte {
  max-width: var(--largeur-texte);
}

.texte > * + * {
  margin-top: var(--s-4);
}

.bande {
  background: var(--bande-fond);
  color: var(--bande-texte);
  --focus: var(--bande-texte);
  --bordure: var(--bande-bordure);
}

/* Lien d'évitement */
.evitement {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 10;
  padding: var(--s-3) var(--s-4);
  background: var(--texte);
  color: var(--fond);
  border-radius: var(--rayon);
  transform: translateY(-200%);
}

.evitement:focus {
  transform: translateY(0);
}

/* ---------- Bouton ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--taille-cible);
  padding: var(--s-3) var(--s-6);
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  border: var(--epaisseur-bordure) solid var(--bouton-bord);
  border-radius: var(--rayon-pastille);
  font-weight: 700;
  text-decoration: none;
}

.bouton:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* ---------- Mascotte avec halo doux (poses) ---------- */
.mascotte-halo {
  position: relative;
  width: var(--mascotte-pose);
}

.mascotte-halo img {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Lueur centrée sur l'abdomen (environ 66 % de la hauteur de l'image carrée) */
.mascotte-halo__lueur {
  position: absolute;
  left: -25%;
  top: -9%;
  z-index: 0;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo-mascotte-coeur), var(--halo-mascotte-bord));
  pointer-events: none;
}

/* ---------- Petites étincelles décoratives ---------- */
.etincelles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.etincelles span {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c-ambre);
  box-shadow: 0 0 0.75rem 0.25rem var(--lueur-etincelle);
  opacity: 0.55;
}

.etincelles span:nth-child(1) { left: 7%;  top: 12%; --d: 0s;   --t: 7s; }
.etincelles span:nth-child(2) { left: 22%; top: 4%;  --d: 1.4s; --t: 9s; }
.etincelles span:nth-child(3) { left: 38%; top: 9%;  --d: 3s;   --t: 8s; }
.etincelles span:nth-child(4) { left: 64%; top: 6%;  --d: 0.8s; --t: 10s; }
.etincelles span:nth-child(5) { left: 81%; top: 14%; --d: 2.2s; --t: 7.5s; }
.etincelles span:nth-child(6) { left: 93%; top: 5%;  --d: 4s;   --t: 9.5s; }

.etincelles--bande span:nth-child(1) { left: 5%;  top: 3%;  }
.etincelles--bande span:nth-child(2) { left: 30%; top: 95%; }
.etincelles--bande span:nth-child(3) { left: 55%; top: 4%;  }
.etincelles--bande span:nth-child(4) { left: 72%; top: 94%; }
.etincelles--bande span:nth-child(5) { left: 90%; top: 6%;  }
.etincelles--bande span:nth-child(6) { left: 12%; top: 92%; }

/* ---------- 1. En-tête ---------- */
.entete {
  padding-block: var(--s-4);
}

.entete__contenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--taille-cible);
  font-family: var(--police-marque);
  font-size: clamp(1.0625rem, 0.75rem + 1.6vw, 1.375rem);
  font-weight: 800;
  letter-spacing: 0;
  text-decoration: none;
}

.marque img {
  width: var(--mascotte-entete);
  height: var(--mascotte-entete);
}

.entete__lien {
  font-size: var(--t-petit);
  display: inline-flex;
  align-items: center;
  min-height: var(--taille-cible);
  font-weight: 600;
}

@media (min-width: 30em) {
  .entete__lien {
    font-size: var(--t-base);
  }
}

/* ---------- 2. Hero : tout est centré ---------- */
.hero {
  position: relative;
  overflow-x: clip;
  padding-block: var(--s-5) var(--section-vertical);
  text-align: center;
}

.hero__contenu {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

.hero__mascotte {
  width: var(--mascotte-hero);
}

.hero__titre {
  max-width: 22ch;
}

.hero__titre .mot {
  display: inline-block;
}

.hero__sous-titre {
  max-width: var(--largeur-texte);
  font-size: var(--t-lead);
}

.points {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-3);
}

.point {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: var(--epaisseur-bordure) solid var(--bordure);
  border-radius: var(--rayon-pastille);
  font-size: var(--t-petit);
  font-weight: 600;
}

.point svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

.hero__note {
  max-width: var(--largeur-texte);
  font-size: var(--t-petit);
}

/* ---------- 3 bis. Ce que ça change pour toi ---------- */
.avantages {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.avantage {
  padding: var(--s-5);
  border: var(--epaisseur-bordure) solid var(--bordure);
  border-radius: var(--rayon);
}

.avantage--accent {
  border-width: 3px;
  border-color: var(--texte);
}

.avantage__icone {
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--s-3);
}

.avantage__chiffre {
  display: inline-block;
  margin-bottom: var(--s-2);
  padding: 0 0.3em;
  background: var(--puce-fond);
  color: var(--puce-texte);
  border-radius: var(--rayon);
  font-family: var(--police-titre);
  letter-spacing: var(--serrage-titre);
  font-size: var(--t-chiffre);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.avantage h3 {
  margin-bottom: var(--s-2);
}

.avantages__note {
  margin-top: var(--s-5);
  font-size: var(--t-petit);
}

/* ---------- 4. Comment ça marche (bande) ---------- */
.etapes {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-6);
}

.etape {
  position: relative;
  display: grid;
  grid-template-columns: var(--mascotte-etape) 1fr;
  gap: var(--s-5);
  align-items: start;
  align-content: start;
}

.etape__mascotte {
  position: relative;
  width: var(--mascotte-etape);
}

.etape__mascotte img {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Halo qui s'allume : centré sur l'abdomen (environ 66 % de la hauteur) */
.etape__halo {
  position: absolute;
  left: 50%;
  top: 66%;
  z-index: 0;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.etape__halo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo-etape-coeur), var(--halo-etape-bord));
}

.etape__etiquette {
  font-family: var(--police-mono);
  font-size: var(--t-petit);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.etape__titre {
  margin-top: var(--s-1);
  margin-bottom: var(--s-2);
}

@media (min-width: 48em) {
  .etapes {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-7);
  }

  .etape {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }

  /* Fil lumineux entre deux étapes */
  .etape:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--mascotte-etape) * 0.66);
    left: calc(var(--mascotte-etape) + var(--s-4));
    right: calc(var(--s-4) - var(--s-7));
    height: 2px;
    background: linear-gradient(90deg, var(--ligne-etape), transparent);
    transform-origin: left center;
  }
}

/* ---------- 5. Garanties ---------- */
.garanties {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.garantie {
  padding: var(--s-5);
  border: var(--epaisseur-bordure) solid var(--bordure);
  border-radius: var(--rayon);
}

.garantie__icone {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: var(--s-3);
}

.garantie h3 {
  margin-bottom: var(--s-2);
  font-size: 1.1875rem;
}

.garanties__ia {
  margin-top: var(--s-6);
}

/* ---------- 6. Aperçu d'un plan ---------- */
.plan-bloc {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-5);
  justify-items: center;
}

.plan-bloc .pose {
  width: var(--mascotte-pose);
}

.plan {
  width: 100%;
  max-width: var(--largeur-texte);
  padding: var(--s-5);
  border: var(--epaisseur-bordure) solid var(--bordure);
  border-radius: var(--rayon);
}

.puce {
  font-family: var(--police-mono);
  display: inline-block;
  margin-bottom: var(--s-3);
  padding: var(--s-1) var(--s-3);
  background: var(--puce-fond);
  color: var(--puce-texte);
  border-radius: var(--rayon-pastille);
  font-size: var(--t-petit);
  font-weight: 700;
}

.plan__titre {
  margin-bottom: var(--s-4);
}

.modules {
  list-style: none;
  padding: 0;
  counter-reset: module;
  display: grid;
  gap: var(--s-3);
}

.modules li {
  counter-increment: module;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--s-3);
  align-items: start;
}

.modules li::before {
  content: counter(module);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background: var(--puce-fond);
  color: var(--puce-texte);
  border-radius: 50%;
  font-family: var(--police-mono);
  font-weight: 700;
  font-size: var(--t-petit);
}

.plan__note {
  margin-top: var(--s-4);
  font-size: var(--t-petit);
}

@media (min-width: 48em) {
  .plan-bloc {
    grid-template-columns: var(--mascotte-pose) minmax(0, var(--largeur-texte));
    justify-content: start;
    justify-items: start;
    align-items: start;
    gap: var(--s-7);
  }
}

/* ---------- 7. Questions fréquentes ---------- */
.faq {
  max-width: var(--largeur-texte);
  border-top: var(--epaisseur-bordure) solid var(--bordure);
}

.faq details {
  border-bottom: var(--epaisseur-bordure) solid var(--bordure);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--taille-cible);
  padding: var(--s-4) 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
}

.faq__reponse {
  padding-bottom: var(--s-4);
}

.faq__reponse > * + * {
  margin-top: var(--s-3);
}

/* ---------- 8. Contact ---------- */
.contact {
  text-align: center;
}

.contact .conteneur {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact .pose {
  margin-bottom: var(--s-5);
}

.contact__action {
  margin-top: var(--s-5);
}

.contact__adresse {
  margin-top: var(--s-4);
}

/* ---------- 9. Pied de page ---------- */
.pied {
  padding-block: var(--s-6);
  border-top: var(--epaisseur-bordure) solid var(--bordure);
  font-size: var(--t-petit);
}

.pied__contenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
}

.pied__marque {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}

.pied__marque img {
  width: var(--mascotte-pied);
  height: var(--mascotte-pied);
}

.pied__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-5);
  list-style: none;
  padding: 0;
}

.pied__liens a {
  display: inline-flex;
  align-items: center;
  min-height: var(--taille-cible);
}

.pied__origine {
  flex-basis: 100%;
}

/* ---------- Pages légales ---------- */
.legal {
  padding-block: var(--s-4) var(--section-vertical);
}

.legal .conteneur {
  max-width: var(--largeur-texte);
}

.legal__retour {
  display: inline-flex;
  align-items: center;
  min-height: var(--taille-cible);
  margin-bottom: var(--s-3);
}

.legal h1 {
  margin-bottom: var(--s-3);
  font-size: var(--t-h2);
}

.legal h2 {
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  font-size: var(--t-h3);
}

.legal p + p {
  margin-top: var(--s-3);
}

.fiche {
  display: grid;
  gap: var(--s-1) var(--s-5);
  margin: 0;
}

.fiche dt {
  margin-top: var(--s-3);
  font-weight: 700;
}

.fiche dd {
  margin: 0;
}

@media (min-width: 40em) {
  .fiche {
    grid-template-columns: 13rem 1fr;
    gap: var(--s-3) var(--s-5);
  }

  .fiche dt {
    margin-top: 0;
  }
}

/* ==========================================================================
   Animations
   Tout ce qui bouge est ici, et uniquement pour les visiteurs qui n'ont pas
   demandé de réduire les mouvements. Seuls opacity et transform sont animés.
   Sans JavaScript, ou avec « réduire les animations », la page est complète
   et immobile : rien n'est caché.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* -- Bouton -- */
  .bouton {
    transition: transform var(--duree-courte) ease;
  }

  .bouton:hover {
    transform: translateY(-2px);
  }

  /* Anneau de lumière qui respire autour du bouton principal */
  .bouton--pulse {
    animation: anneau 3.2s ease-out 2.4s infinite;
  }

  /* -- Hero : arrivée orchestrée au chargement -- */
  .entete {
    animation: descente 0.8s var(--courbe-apparition) both;
  }

  .hero__mascotte {
    animation: arrivee-mascotte 1.3s cubic-bezier(0.2, 1.2, 0.4, 1) 0.15s both;
  }

  .hero__mascotte img {
    animation: flottement var(--duree-flottement) ease-in-out 1.5s infinite;
  }

  .hero__mascotte .mascotte-halo__lueur {
    animation: lueur-mascotte 1.4s ease-out 0.3s both, respiration var(--duree-pulsation) ease-in-out 1.7s infinite;
  }

  .hero__titre .mot {
    animation: mot-monte 0.7s var(--courbe-apparition) both;
    animation-delay: calc(0.55s + var(--n, 0) * 60ms);
  }

  .hero__titre .mot:nth-child(1)  { --n: 0; }
  .hero__titre .mot:nth-child(2)  { --n: 1; }
  .hero__titre .mot:nth-child(3)  { --n: 2; }
  .hero__titre .mot:nth-child(4)  { --n: 3; }
  .hero__titre .mot:nth-child(5)  { --n: 4; }
  .hero__titre .mot:nth-child(6)  { --n: 5; }
  .hero__titre .mot:nth-child(7)  { --n: 6; }
  .hero__titre .mot:nth-child(8)  { --n: 7; }
  .hero__titre .mot:nth-child(9)  { --n: 8; }
  .hero__titre .mot:nth-child(10) { --n: 9; }
  .hero__titre .mot:nth-child(11) { --n: 10; }
  .hero__titre .mot:nth-child(12) { --n: 11; }
  .hero__titre .mot:nth-child(13) { --n: 12; }
  .hero__titre .mot:nth-child(14) { --n: 13; }
  .hero__titre .mot:nth-child(15) { --n: 14; }

  .hero__sous-titre { animation: montee 0.8s var(--courbe-apparition) 1.5s both; }
  .hero__action     { animation: montee 0.8s var(--courbe-apparition) 1.7s both; }
  .point            { animation: montee 0.7s var(--courbe-apparition) both; }
  .point:nth-child(1) { animation-delay: 1.9s; }
  .point:nth-child(2) { animation-delay: 2.05s; }
  .point:nth-child(3) { animation-delay: 2.2s; }
  .hero__note       { animation: montee 0.8s var(--courbe-apparition) 2.4s both; }

  /* -- Petites étincelles décoratives : elles dérivent et scintillent -- */
  .etincelles span {
    animation:
      derive var(--t, 8s) ease-in-out var(--d, 0s) infinite,
      scintille calc(var(--t, 8s) / 2.4) ease-in-out var(--d, 0s) infinite;
  }

  /* -- Apparition au défilement (le JavaScript ajoute .visible) -- */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(1.75rem);
    transition:
      opacity var(--duree-apparition) ease,
      transform var(--duree-apparition) var(--courbe-apparition);
    transition-delay: calc(var(--i, 0) * var(--decalage-apparition));
  }

  .js [data-reveal="zoom"] {
    transform: scale(0.8) translateY(1rem);
  }

  .js [data-reveal].visible {
    opacity: 1;
    transform: none;
  }

  /* Décalage en cascade dans les listes et les paragraphes */
  .avantage:nth-child(2),
  .garantie:nth-child(2),
  .etape:nth-child(2),
  .texte > :nth-child(2) { --i: 1; }

  .avantage:nth-child(3),
  .garantie:nth-child(3),
  .etape:nth-child(3),
  .texte > :nth-child(3) { --i: 2; }

  .garantie:nth-child(4) { --i: 3; }
  .garantie:nth-child(5) { --i: 4; }

  /* -- Icônes qui se dessinent -- */
  .js .avantage__icone path,
  .js .garantie__icone path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.9s ease 0.35s;
  }

  .js .avantage.visible .avantage__icone path,
  .js .garantie.visible .garantie__icone path {
    stroke-dashoffset: 0;
  }

  /* -- Modules du plan : ils apparaissent un par un -- */
  .js .plan .modules li {
    opacity: 0;
    transform: translateX(-1rem);
    transition: opacity 0.6s ease, transform 0.6s var(--courbe-apparition);
  }

  .js .plan.visible .modules li {
    opacity: 1;
    transform: none;
  }

  .js .plan.visible .modules li:nth-child(1) { transition-delay: 0.3s; }
  .js .plan.visible .modules li:nth-child(2) { transition-delay: 0.5s; }
  .js .plan.visible .modules li:nth-child(3) { transition-delay: 0.7s; }
  .js .plan.visible .modules li:nth-child(4) { transition-delay: 0.9s; }
  .js .plan.visible .modules li:nth-child(5) { transition-delay: 1.1s; }

  /* -- Poses de la mascotte : elles flottent doucement une fois arrivées -- */
  .pose.visible img {
    animation: flottement var(--duree-flottement) ease-in-out 1s infinite;
  }

  .pose.visible .mascotte-halo__lueur {
    animation: respiration var(--duree-pulsation) ease-in-out infinite;
  }

  /* -- Étapes : la mascotte s'allume, le halo respire, le fil se déroule -- */
  .js .etape:not(.allumee) .etape__halo {
    opacity: 0;
  }

  .js .etape:not(.allumee) .etape__mascotte img {
    opacity: 0.55;
  }

  .etape__halo,
  .etape__mascotte img {
    transition: opacity var(--duree-douce) ease var(--delai, 0s);
  }

  .etape.allumee .etape__halo::before {
    animation: respiration var(--duree-pulsation) ease-in-out infinite;
  }

  .js .etape:not(.allumee)::after {
    transform: scaleX(0);
  }

  .etape::after {
    transition: transform 1.2s ease calc(var(--delai, 0s) + 0.5s);
  }

  /* -- FAQ : la réponse apparaît en douceur -- */
  .faq details[open] .faq__reponse {
    animation: montee 0.5s var(--courbe-apparition) both;
  }

  .faq summary::after {
    transition: transform var(--duree-courte) ease;
  }

  /* -- Images clés -- */
  @keyframes montee {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes descente {
    from {
      opacity: 0;
      transform: translateY(-1rem);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes mot-monte {
    from {
      opacity: 0;
      transform: translateY(0.6em) rotate(2deg);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes arrivee-mascotte {
    from {
      opacity: 0;
      transform: translateY(-2rem) scale(0.6) rotate(-8deg);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes lueur-mascotte {
    from {
      opacity: 0;
      transform: scale(0.2);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes flottement {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }

    50% {
      transform: translateY(-0.5rem) rotate(-1.5deg);
    }
  }

  @keyframes respiration {
    0%,
    100% {
      opacity: 0.75;
      transform: scale(0.94);
    }

    50% {
      opacity: 1;
      transform: scale(1.04);
    }
  }

  @keyframes derive {
    0%,
    100% {
      transform: translate(0, 0);
    }

    25% {
      transform: translate(0.9rem, 1.2rem);
    }

    50% {
      transform: translate(-0.7rem, 2.4rem);
    }

    75% {
      transform: translate(0.8rem, 1.1rem);
    }
  }

  @keyframes scintille {
    0%,
    100% {
      opacity: 0.15;
    }

    50% {
      opacity: 0.85;
    }
  }

  @keyframes anneau {
    0% {
      box-shadow: 0 0 0 0 rgba(240, 168, 48, 0.55);
    }

    70%,
    100% {
      box-shadow: 0 0 0 1rem rgba(240, 168, 48, 0);
    }
  }
}

/* ---------- Mouvement réduit : rien ne bouge, tout est visible ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .etincelles {
    display: none;
  }
}