/* ═══════════════════════════════════════════════════════════════════════
   VINGT MILLE — Landing page (styles spécifiques)
   Dépend de tokens.css et components.css.
   La page est une plongée : chaque section descend d'un palier, le fond
   glisse de l'écume vers l'eau claire — sans jamais quitter le thème clair.
   ═══════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--vm-encre); color: var(--vm-ecume);
  padding: var(--vm-space-3) var(--vm-space-5); border-radius: var(--vm-radius-m);
}
.skip-link:focus { left: 8px; }

.lede { font-size: var(--vm-text-l); color: var(--vm-text-soft); max-width: 56ch; }

/* ── Héros (surface) ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top: var(--vm-space-9);
  background:
    radial-gradient(1100px 500px at 85% -10%, var(--vm-eau-100) 0%, transparent 60%),
    radial-gradient(800px 420px at -10% 30%, var(--vm-soleil-100) 0%, transparent 55%),
    var(--vm-ecume);
  overflow: hidden;
}
.hero__inner { position: relative; text-align: center; max-width: 56rem; margin-inline: auto; padding-bottom: var(--vm-space-9); }
.hero h1 { font-size: var(--vm-text-3xl); margin-block: var(--vm-space-4) var(--vm-space-5); }
.hero h1 em { font-style: normal; color: var(--vm-lagon-700); position: relative; }
.hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 0.18em;
  background: var(--vm-soleil-400); border-radius: var(--vm-radius-full); z-index: -1;
}
.hero__lede { font-size: var(--vm-text-l); max-width: 46rem; margin-inline: auto; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--vm-space-4); justify-content: center; margin-top: var(--vm-space-6); }
.hero__reassure { font-size: var(--vm-text-s); color: var(--vm-encre-soft); margin-top: var(--vm-space-5); }

/* Apparition orchestrée du héros (une seule fois, au chargement) */
@media (prefers-reduced-motion: no-preference) {
  .hero__inner > * { animation: hero-in 0.7s var(--vm-ease) both; }
  .hero__inner > *:nth-child(2) { animation-delay: 0.08s; }
  .hero__inner > *:nth-child(3) { animation-delay: 0.16s; }
  .hero__inner > *:nth-child(4) { animation-delay: 0.26s; }
  .hero__inner > *:nth-child(5) { animation-delay: 0.36s; }
  .hero__inner > *:nth-child(6) { animation-delay: 0.46s; }
}
@keyframes hero-in { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }

/* ── Bandeau valeurs ───────────────────────────────────────────────────── */
.valeurs { padding-block: var(--vm-space-8); background: var(--vm-sable); }
.valeur { text-align: center; padding-inline: var(--vm-space-3); }
.valeur span { font-size: 2rem; display: inline-grid; place-items: center; width: 64px; height: 64px; background: var(--vm-ecume); border-radius: var(--vm-radius-full); box-shadow: var(--vm-shadow-s); margin-bottom: var(--vm-space-3); }
.valeur h3 { font-size: var(--vm-text-l); margin-bottom: var(--vm-space-2); }
.valeur p { font-size: var(--vm-text-s); margin: 0; }

/* ── La descente (paliers de fonctionnalités) ─────────────────────────── */
/* Le fond descend : écume → eau-050 → eau-100, en douceur. */
.paliers { background: linear-gradient(180deg, var(--vm-ecume) 0%, var(--vm-eau-050) 45%, var(--vm-eau-100) 100%); }
.palier-row {
  display: grid; gap: var(--vm-space-6); align-items: center;
  padding-block: var(--vm-space-8);
}
@media (min-width: 48rem) {
  .palier-row { grid-template-columns: 1.15fr 1fr; gap: var(--vm-space-8); }
  .palier-row--inv .palier-row__txt { order: 2; }
  .palier-row--inv .palier-row__visu { order: 1; }
}
.palier-row__txt h3 { margin-bottom: var(--vm-space-3); }
.palier-points { list-style: none; margin: var(--vm-space-4) 0 0; padding: 0; }
.palier-points li {
  position: relative; padding: var(--vm-space-2) 0 var(--vm-space-2) 2em;
  color: var(--vm-text-soft); font-size: var(--vm-text-s);
}
.palier-points li::before { content: "🫧"; position: absolute; left: 0; }

.palier-row__visu { display: grid; place-items: center; }
.mini-ui { width: min(100%, 360px); display: grid; gap: var(--vm-space-3); rotate: -1.2deg; }
.palier-row--inv .mini-ui { rotate: 1.2deg; }
.mini-ui__head { margin: 0; font-size: var(--vm-text-s); color: var(--vm-text-soft); }
.mini-ui__head strong { color: var(--vm-encre); }
.mini-ui__row { display: flex; flex-wrap: wrap; gap: var(--vm-space-2); margin: 0; }
.mini-ui .vm-btn { justify-self: start; }
.mini-ui--code { background: var(--vm-eau-050); }

/* ── Tarifs ────────────────────────────────────────────────────────────── */
.tarifs { background: linear-gradient(180deg, var(--vm-eau-100) 0%, var(--vm-ecume) 30%); }
.tarifs .vm-toggle { margin-top: var(--vm-space-5); }
.tarifs__garanties {
  text-align: center; font-size: var(--vm-text-s); color: var(--vm-encre-soft);
  max-width: 60ch; margin: var(--vm-space-7) auto 0;
}

/* ── À propos ──────────────────────────────────────────────────────────── */
.apropos__inner { display: grid; gap: var(--vm-space-7); align-items: center; }
@media (min-width: 48rem) { .apropos__inner { grid-template-columns: 1fr 1.6fr; } }
.apropos__blob {
  width: min(70vw, 280px); aspect-ratio: 1; margin-inline: auto;
  display: grid; place-items: center; font-size: 5rem;
  background: linear-gradient(150deg, var(--vm-eau-100), var(--vm-lagon-300));
  border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%;  /* blob organique */
  box-shadow: var(--vm-shadow-m);
}

/* ── CTA final (remontée) ──────────────────────────────────────────────── */
.embarquer {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 400px at 50% 120%, var(--vm-eau-200) 0%, transparent 65%),
    var(--vm-ecume);
}

/* ── Affinage responsive ───────────────────────────────────────────────── */
@media (max-width: 30rem) {
  .hero__cta .vm-btn { width: 100%; }
  .mini-ui { rotate: none; }
}