/* ============================================
   ASTRAE — Brand stylesheet
   Palette: cosmos onirique
   navy profond + lavande + rose lilas + cream stellaire
   ============================================ */

:root {
  /* Backgrounds */
  --bg-deep:        #14173a;  /* navy profond du fond */
  --bg-mid:         #2a2d5e;  /* navy mid */
  --bg-soft:        #4a4880;  /* lavande sourde */

  /* Accents — couleurs des nuages cosmos */
  --lilac:          #c8a8d8;  /* rose lilas */
  --lilac-soft:     #d8c0e0;  /* rose pale */
  --lilac-deep:     #9d7eb5;  /* lilas profond */

  --lavender:       #9b9bc8;  /* lavande */
  --lavender-soft:  #bcb2d9;  /* lavande claire */

  /* Stars / highlights — cream warm */
  --cream:          #f5e8c0;  /* etoiles dorees du visuel */
  --cream-soft:     #faf0d4;
  --cream-deep:     #d4c089;

  /* Texts */
  --text-primary:   #f0ecf8;  /* blanc lavande */
  --text-secondary: #b8b3d0;  /* gris lavande */
  --text-muted:     #7a749a;

  /* Borders */
  --border:         rgba(245, 232, 192, 0.18);
  --border-strong:  rgba(245, 232, 192, 0.35);

  /* Shadows */
  --shadow-card:    0 30px 80px rgba(20, 23, 58, 0.5), 0 0 60px rgba(200, 168, 216, 0.12);

  /* Typography */
  --font-display:   'Fraunces', 'Times New Roman', serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius:         20px;
  --radius-sm:      12px;

  --ease:           cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

input, select {
  font-family: inherit;
  outline: none;
  border: none;
  background: none;
  color: inherit;
}

/* ============================================
   BACKGROUND COSMOS DEFILANT
   Image qui scroll de gauche a droite en boucle infinie
   ============================================ */
.bg-wrapper {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg-deep);
}

/* Mirror tiling: 4 tiles (normal, mirrored, normal, mirrored) scrolling infinitely.
   Mirror flips ensure the right edge of any tile matches the left edge of the next,
   guaranteeing zero seams regardless of source image. */
.bg-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  width: max-content;
  animation: bgScroll 90s linear infinite;
  will-change: transform;
}

.bg-tile {
  flex: 0 0 auto;
  height: 100%;
  width: 1800px;
  background-image: url('assets/cosmos-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Even tiles are flipped so every junction has matching pixels */
.bg-tile-mirror {
  transform: scaleX(-1);
}

@keyframes bgScroll {
  from { transform: translate3d(0, 0, 0); }
  /* Move by exactly 2 tiles (3600px) so the cycle restarts on identical pixels */
  to   { transform: translate3d(-3600px, 0, 0); }
}

.bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, transparent 0%, rgba(20, 23, 58, 0.35) 70%),
    linear-gradient(180deg, rgba(20, 23, 58, 0.15) 0%, rgba(20, 23, 58, 0.45) 100%);
  pointer-events: none;
}

.bg-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(245, 232, 192, 0.7), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(245, 232, 192, 0.5), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(245, 232, 192, 0.6), transparent),
    radial-gradient(2px 2px at 40% 80%, rgba(245, 232, 192, 0.4), transparent),
    radial-gradient(1px 1px at 90% 50%, rgba(245, 232, 192, 0.6), transparent),
    radial-gradient(1px 1px at 10% 60%, rgba(245, 232, 192, 0.5), transparent),
    radial-gradient(2px 2px at 70% 10%, rgba(245, 232, 192, 0.5), transparent);
  background-size: 100% 100%;
  animation: twinkle 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.3; }
}

/* ============================================
   BRAND HEADER
   ============================================ */
.brand {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 22px 32px 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s var(--ease);
}

/* Hide the header logo when the hero is showing — avoids duplicate logo */
body.on-hero .brand {
  opacity: 0;
  pointer-events: none;
}

/* Pendant le funnel (pas le hero), réduire le z-index du header
   pour qu'il passe SOUS la card au lieu de chevaucher les titres */
body:not(.on-hero) .brand {
  z-index: 0;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  text-decoration: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  opacity: 0.95;
}

.brand-mark:hover {
  opacity: 1;
  transform: scale(1.02);
}

/* Wordmark — League Spartan with cream gradient + soft glow */
.brand-wordmark {
  font-family: 'League Spartan', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.02em;
  line-height: 1;
  background: linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 50%, var(--cream-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3))
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
  user-select: none;
}

@media (max-width: 540px) {
  .brand {
    padding-top: 16px;
  }
  .brand-wordmark {
    font-size: 20px;
  }
}

/* ============================================
   STAGE & CARD
   ============================================ */
.stage {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px 40px;
}

.card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 100px);
  min-height: 0;
  height: 540px;
  background: linear-gradient(145deg,
    rgba(20, 23, 58, 0.78) 0%,
    rgba(42, 45, 94, 0.72) 100%);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: block;
  /* Disable text selection so dragging doesn't auto-scroll the step.
     Inputs and selectable fields override this locally. */
  user-select: none;
  -webkit-user-select: none;
}

.card input,
.card textarea {
  user-select: text;
  -webkit-user-select: text;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(245, 232, 192, 0.4) 0%,
    transparent 30%,
    transparent 70%,
    rgba(245, 232, 192, 0.2) 100%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ============================================
   PROGRESS BAR (bottom of card)
   ============================================ */
.progress-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 28px 18px;
  /* Fully opaque sandwich that masks any content scrolling underneath */
  background:
    linear-gradient(180deg,
      rgba(20, 23, 58, 0) 0%,
      rgba(20, 23, 58, 0.55) 22%,
      rgba(20, 23, 58, 0.95) 45%,
      rgba(28, 28, 70, 1) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}

.progress-wrap.visible {
  opacity: 1;
  transform: translateY(0);
}

.progress-track {
  width: 100%;
  height: 4px;
  background: rgba(245, 232, 192, 0.12);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cream-deep), var(--cream-soft), var(--cream));
  box-shadow: 0 0 12px rgba(245, 232, 192, 0.6);
  border-radius: 2px;
  transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.progress-text {
  font-weight: 400;
  opacity: 0.7;
}

.progress-percent {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--cream-soft);
  text-transform: none;
  font-weight: 500;
  transition: color 0.4s var(--ease);
}

/* ============================================
   STEPS (slides)
   ============================================ */
.step {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.15s ease-out;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 80px;
}

.step.active {
  display: flex;
  opacity: 1;
}

/* Hide scrollbar entirely — pagination is the primary mechanism for long content */
.step::-webkit-scrollbar { width: 0; height: 0; }
.step { scrollbar-width: none; -ms-overflow-style: none; }

.step-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  padding: 48px 32px 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* Top : the actual reveal content. Centered, scrolls if too long. */
.step-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  width: 100%;
  min-height: 0;            /* allow shrinking inside flex */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.step-content::-webkit-scrollbar { width: 0; }
.step-content { scrollbar-width: none; }

/* Bottom : pagination + button. Always visible, never overlapped. */
.step-footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding-top: 18px;
  padding-bottom: 32px;     /* default : no progress bar to clear */
}

/* When the progress bar is visible at the bottom of the card, the footer
   needs extra bottom padding so the button stays clear of it. */
.card.has-progress .step-footer {
  padding-bottom: 92px;     /* VALEUR DOCUMENTÉE — voir docs/project_notes/bugs.md "chevauchement bouton / progress bar". Ne jamais réduire. */
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 500;
  opacity: 0.85;
}

.title {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* When the step has many options below, the title is more compact AND
   the content aligns to the top (sinon le centrage flex clip la dernière option
   et la rend inaccessible au scroll). */
/* Steps with many children (options, date fields, reveals) : align top to avoid clipping */
.step-content:has(.options),
.step-content:has(.date-fields) {
  justify-content: flex-start;
  padding-top: 4px;
  gap: 10px;
}
/* Quand le contenu AI est injecté, aligner en haut pour que le titre reste visible */
.step-content:has(.reveal-text),
.step-content:has(#branchR1Text),
.step-content:has(#branchR2Text),
.step-content:has(#reveal5Text),
.step-content:has(.reveal-chunk) {
  justify-content: flex-start;
  padding-top: 4px;
}
.step-content:has(.options) .title {
  font-size: 20px;
  line-height: 1.2;
  margin-bottom: 2px;
}

.subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 360px;
}

.reveal-title {
  font-style: italic;
  color: var(--cream-soft);
}

.reveal-text {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-primary);
  max-width: 380px;
  font-weight: 300;
}

.reveal-text p {
  margin-bottom: 14px;
}

.reveal-text strong {
  color: var(--cream-soft);
  font-weight: 500;
}

.ai-loading {
  font-style: italic;
  color: var(--text-secondary);
  opacity: 0.7;
  animation: aiLoadingPulse 1.6s ease-in-out infinite;
}

/* Reveal pagination dots */
.reveal-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 4px 0 -2px;
}

.reveal-pagination .rp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(245, 232, 192, 0.18);
  transition: all 0.3s var(--ease);
}

.reveal-pagination .rp-dot.active {
  background: var(--cream);
  box-shadow: 0 0 6px rgba(245, 232, 192, 0.5);
  transform: scale(1.25);
}

.reveal-pagination .rp-dot.done {
  background: rgba(245, 232, 192, 0.5);
}

/* ============================================
   COMPATIBILITY BLOCK (sentimental branch only)
   ============================================ */
.compat-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.compat-block[hidden] { display: none; }

.compat-divider {
  width: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  margin: 4px 0;
}

.compat-q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--cream-soft);
  text-align: center;
  line-height: 1.35;
  max-width: 320px;
}

.compat-sub {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 2px;
}

.compat-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 280px;
  margin-top: 4px;
}

.compat-cta { width: 100%; }
.compat-skip { width: 100%; padding: 12px; }

.compat-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.compat-form[hidden] { display: none; }

.compat-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-top: 8px;
  animation: fadeInUp 0.6s var(--ease-out);
}

.compat-result[hidden] { display: none; }

.compat-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--cream-soft);
  text-align: center;
  line-height: 1.3;
  font-weight: 500;
}

/* When the compat result is showing, dim the R2 reveal above */
.step[data-step="9"].compat-active #branchR2Text,
.step[data-step="9"].compat-active #branchR2Title,
.step[data-step="9"].compat-active #branchR2Eyebrow,
.step[data-step="9"].compat-active .reveal-mark {
  opacity: 0.35;
  transition: opacity 0.5s var(--ease);
}

#branchR2NextBtn {
  margin-top: 4px;
}

@keyframes aiLoadingPulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.85; }
}

.name-echo {
  color: var(--cream-soft);
  font-style: italic;
}

/* ============================================
   HERO STEP
   ============================================ */
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;          /* tout centré verticalement */
  text-align: center;
  padding: 32px 32px 32px !important;
  gap: 22px;
}

/* Groupe 1 : wordmark + orbe, collés ensemble */
.hero-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hero-wordmark { margin: 0 !important; }

.hero-top .orbit {
  width: 40px;
  height: 40px;
  margin: 0;
}

.hero-top .orbit .astrae-star {
  width: 28px;
  height: 28px;
}

/* Groupe 2 : tagline + bouton */
.hero-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.hero-mid .hero-tag { margin: 0; }

.hero-mid .btn-primary {
  align-self: center;
  min-width: 280px;
  max-width: 340px;
  width: auto;
  margin: 0;
}

.hero-inner > .social-proof {
  margin: 6px 0 0;
}

/* .hero-title removed — unused */

/* Hero wordmark — League Spartan, big, cream gradient, drop shadow */
.hero-wordmark {
  font-family: 'League Spartan', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 72px;
  line-height: 0.95;
  letter-spacing: 0.005em;
  background: linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 45%, var(--cream-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* filter is applied as a wrapper drop-shadow because text-shadow doesn't work with background-clip:text */
  filter:
    drop-shadow(0 2px 0 rgba(0, 0, 0, 0.4))
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 36px rgba(245, 232, 192, 0.20));
  margin: 6px 0 2px;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

@media (max-width: 540px) {
  .hero-wordmark {
    font-size: 58px;
  }
}

.hero-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  max-width: 320px;
  line-height: 1.4;
}

.social-proof {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin: 14px 0 0;
  text-align: center;
}

/* Orbit decoration — just the glowing orb, no rotating ring */
.orbit {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.astrae-star {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 8px rgba(245, 232, 192, 0.6));
  animation: starTwinkle 3s ease-in-out infinite;
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0.5; transform: scale(1) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(20deg); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* ============================================
   REVEAL MARK
   ============================================ */
.reveal-mark {
  font-size: 28px;
  color: var(--cream);
  text-shadow: 0 0 20px rgba(245, 232, 192, 0.5);
  animation: revealPulse 2s ease-in-out infinite;
}

@keyframes revealPulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ============================================
   FORM FIELDS
   ============================================ */
.text-input {
  width: 100%;
  max-width: 340px;
  padding: 18px 24px;
  background: rgba(245, 232, 192, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 16px;
  color: var(--text-primary);
  text-align: center;
  transition: all 0.3s var(--ease);
  font-family: var(--font-display);
}

.text-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.text-input:focus {
  border-color: var(--cream);
  background: rgba(245, 232, 192, 0.06);
  box-shadow: 0 0 0 3px rgba(245, 232, 192, 0.1);
}

.date-fields {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  align-items: center;
  justify-content: center;
}

/* Native date input — épuré, cohérent avec le branding */
.native-date-input {
  width: 100%;
  max-width: 280px;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--cream);
  background: rgba(245, 232, 192, 0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
}
.native-date-input:focus {
  outline: none;
  border-color: var(--cream);
  box-shadow: 0 0 0 3px rgba(245, 232, 192, 0.1);
}

/* ============================================
   WHEEL PICKER (custom date/time roll selector)
   ============================================ */
/* ── Apple-style barrel wheel picker ── */
.wheel {
  position: relative;
  flex: 1;
  height: 160px;
  background: rgba(245, 232, 192, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  perspective: 300px;
  -webkit-perspective: 300px;
}

/* Selection band — centered highlight row */
.wheel::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 6px;
  right: 6px;
  height: 36px;
  margin-top: -18px;
  background: rgba(245, 232, 192, 0.08);
  border-top: 1px solid rgba(245, 232, 192, 0.2);
  border-bottom: 1px solid rgba(245, 232, 192, 0.2);
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
}

/* Fade edges — subtle top/bottom vignette only */
.wheel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(180deg,
    rgba(20, 23, 58, 0.7) 0%,
    transparent 25%,
    transparent 75%,
    rgba(20, 23, 58, 0.7) 100%);
}

.wheel-list {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 62px 0;          /* (160 - 36) / 2 = 62 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-y: contain;
}

.wheel-list::-webkit-scrollbar {
  display: none;
}

.wheel-item {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--text-secondary);
  opacity: 0.35;
  transition: opacity 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  user-select: none;
  will-change: transform, opacity;
  white-space: nowrap;
}

/* Proximity states — set by JS on scroll */
.wheel-item[data-dist="0"] {
  color: var(--cream-soft);
  font-weight: 600;
  font-size: 20px;
  opacity: 1;
}
.wheel-item[data-dist="1"] {
  opacity: 0.5;
  transform: scale(0.88);
}
.wheel-item[data-dist="2"] {
  opacity: 0.3;
  transform: scale(0.82);
}
.wheel-item[data-dist="3"] {
  opacity: 0.15;
  transform: scale(0.78);
}

/* Hide native number input arrows globally */
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* .time-fields, .time-sep removed — replaced by native time input */

/* ============================================
   OPTIONS
   ============================================ */
.options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 380px;
}

.option {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px;
  background: rgba(245, 232, 192, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 13px;
  color: var(--text-primary);
  transition: all 0.3s var(--ease);
  position: relative;
  line-height: 1.3;
}

.option:hover {
  background: rgba(245, 232, 192, 0.08);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.option:active {
  transform: translateY(0);
}

.option.selected {
  background: rgba(245, 232, 192, 0.14);
  border-color: var(--cream);
  border-width: 1.5px;
  box-shadow: 0 0 0 2px rgba(245, 232, 192, 0.25), 0 0 12px rgba(245, 232, 192, 0.15);
}

.option-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.option.recommended {
  border-color: rgba(245, 232, 192, 0.4);
  background: rgba(245, 232, 192, 0.06);
}

.option.recommended.selected {
  background: rgba(245, 232, 192, 0.18);
  border-color: var(--cream);
  border-width: 1.5px;
  box-shadow: 0 0 0 2px rgba(245, 232, 192, 0.3), 0 0 16px rgba(245, 232, 192, 0.2);
}

.badge {
  margin-left: auto;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cream);
  background: rgba(245, 232, 192, 0.15);
  padding: 4px 8px;
  border-radius: 6px;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  font-family: var(--font-body);
}

.btn-primary {
  background: linear-gradient(135deg, var(--cream-deep) 0%, var(--cream) 50%, var(--cream-soft) 100%);
  color: var(--bg-deep);
  /* Halo doré contenu : pas de débordement vers le bas (sinon il leak sur la barre de progression) */
  box-shadow: 0 2px 10px rgba(245, 232, 192, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font-weight: 600;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(245, 232, 192, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
}

.btn-ghost:hover {
  border-color: var(--cream);
  color: var(--text-primary);
}

.dual-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}

.btn:hover .arrow {
  transform: translateX(4px);
}

.error-msg {
  font-size: 13px;
  color: #ff8a7d;
  min-height: 18px;
}

.micro-note {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.email-confirm {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(120, 200, 140, 0.1);
  border: 1px solid rgba(120, 200, 140, 0.32);
  border-radius: 12px;
  font-size: 13px;
  color: #d8f0d4;
  max-width: 360px;
  animation: emailConfirmFadeIn 0.5s var(--ease-out);
}

.email-confirm.visible {
  display: inline-flex;
}

.email-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6fc88a, #82d99c);
  color: #0e2a16;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(120, 200, 140, 0.4);
}

.email-confirm-text strong {
  color: #f0f8ec;
  font-weight: 500;
}

@keyframes emailConfirmFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   ZODIAC LOADER
   ============================================ */
.loader-inner {
  gap: 12px;
  padding-top: 32px !important;
}

.zodiac-loader {
  position: relative;
  width: 140px;
  height: 140px;
  padding: 16px;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 auto;
}

@media (max-width: 540px) {
  .zodiac-loader {
    width: 110px;
    height: 110px;
    padding: 16px;
  }
  .zodiac-ring span {
    font-size: 14px;
    width: 20px;
    height: 20px;
  }
  .zodiac-center {
    font-size: 26px;
  }
}

.zodiac-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(245, 232, 192, 0.3);
  border-radius: 50%;
  animation: spin 30s linear infinite;
}

.zodiac-ring span {
  position: absolute;
  font-size: 18px;
  color: var(--cream);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 10px rgba(245, 232, 192, 0.4);
}

.zodiac-ring span:nth-child(1)  { top: 0;           left: 50%;        transform: translateX(-50%); }
.zodiac-ring span:nth-child(2)  { top: 12%;         right: 8%; }
.zodiac-ring span:nth-child(3)  { top: 38%;         right: 0; }
.zodiac-ring span:nth-child(4)  { bottom: 38%;      right: 0; }
.zodiac-ring span:nth-child(5)  { bottom: 12%;      right: 8%; }
.zodiac-ring span:nth-child(6)  { bottom: 0;        right: 38%; }
.zodiac-ring span:nth-child(7)  { bottom: 0;        left: 38%; }
.zodiac-ring span:nth-child(8)  { bottom: 12%;      left: 8%; }
.zodiac-ring span:nth-child(9)  { bottom: 38%;      left: 0; }
.zodiac-ring span:nth-child(10) { top: 38%;         left: 0; }
.zodiac-ring span:nth-child(11) { top: 12%;         left: 8%; }
.zodiac-ring span:nth-child(12) { top: 0;           left: 38%; }

.zodiac-center {
  font-size: 36px;
  color: var(--cream);
  text-shadow: 0 0 30px rgba(245, 232, 192, 0.7);
  animation: revealPulse 2s ease-in-out infinite;
}

.loader-title {
  font-size: 20px;
  font-style: italic;
}

.loader-steps {
  list-style: none;
  text-align: left;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-style: italic;
}

.loader-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.5;
  transition: all 0.4s var(--ease);
}

.loader-steps li::before {
  content: '○';
  color: var(--cream);
  font-size: 12px;
}

.loader-steps li[data-state="active"]::before {
  content: '⟳';
  display: inline-block;
  animation: spin 1.5s linear infinite;
}

.loader-steps li[data-state="active"] {
  opacity: 1;
  color: var(--text-primary);
}

.loader-steps li[data-state="done"]::before {
  content: '✓';
}

.loader-steps li[data-state="done"] {
  opacity: 0.85;
}

.loader-percent {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--cream);
  font-style: italic;
}

/* ============================================
   FINAL REVEAL : slideshow narratif + paywall overlay
   ============================================ */
.reveal-final-inner {
  padding: 50px 28px 0;     /* footer takes care of bottom */
  position: relative;
}

/* Footer of step 14 (final reveal) — no progress bar to clear */
.reveal-final-inner .step-footer {
  padding-bottom: 28px;
  background: none;
}

.reveal-final-inner .eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--cream);
  font-weight: 500;
  opacity: 0.85;
}

/* Reveal chunks (narrative slides inside the same step) */
.reveal-chunks {
  position: relative;
  width: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reveal-chunk {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  pointer-events: none;
}

.reveal-chunk.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
  inset: auto;
}

.chunk-h {
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--cream-soft);
  font-weight: 500;
  font-style: italic;
}

.chunk-title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.3;
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.chunk-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-primary);
  font-weight: 300;
  max-width: 340px;
}

.chunk-body p {
  margin-bottom: 10px;
}

.chunk-body strong {
  color: var(--cream-soft);
  font-weight: 500;
}

/* Chunk progress dots */
.chunk-dots {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.chunk-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(245, 232, 192, 0.18);
  transition: all 0.4s var(--ease);
}

.chunk-dots .dot.active {
  background: var(--cream);
  box-shadow: 0 0 8px rgba(245, 232, 192, 0.5);
  transform: scale(1.2);
}

.chunk-dots .dot.done {
  background: rgba(245, 232, 192, 0.55);
}

/* The 6th dot (locked) looks identical to the others until the paywall step.
   It only changes appearance once it becomes active (after the user clicks
   "Voir la suite" on the 5th chunk). */
.chunk-dots .dot.locked {
  /* identical to a normal dot until activated */
}

.chunk-dots .dot.locked.active {
  background: var(--cream);
  box-shadow: 0 0 8px rgba(245, 232, 192, 0.5);
  transform: scale(1.2);
}

@keyframes lockedDotPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(232, 198, 90, 0.5); }
  50%      { box-shadow: 0 0 18px rgba(232, 198, 90, 0.9); }
}

/* PAYWALL OVERLAY — appears over the blurred final reveal */
.paywall-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;             /* aligne en haut → permet le scroll si débordement */
  justify-content: center;
  padding: 18px 22px 22px;
  background: linear-gradient(180deg,
    rgba(20, 23, 58, 0.97) 0%,
    rgba(20, 23, 58, 0.99) 100%);     /* opacité quasi totale → masque le chunk5 derrière */
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out);
  z-index: 10;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.paywall-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.paywall-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;                  /* compact pour rentrer dans la card */
}

.paywall-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--cream);
  opacity: 0.85;
}

.paywall-title {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  color: var(--text-primary);
  font-weight: 500;
  font-style: italic;
  margin: 0;
}

.paywall-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin: 0 0 2px;
}

.paywall-card .locked-list {
  list-style: none;
  padding: 0;
  margin: 4px 0;
  font-size: 11.5px;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
}

/* ============================================
   PLANS PAYWALL — 2 offres (Essentiel / Révélation)
   ============================================ */
.plan {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(245, 232, 192, 0.025);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-essential {
  border-color: rgba(245, 232, 192, 0.22);
}

.plan-revelation {
  border-color: rgba(245, 232, 192, 0.55);
  background: rgba(245, 232, 192, 0.055);
  box-shadow: 0 0 0 1px rgba(245, 232, 192, 0.25),
              0 10px 32px rgba(0, 0, 0, 0.35);
}

.plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--cream-deep), var(--cream));
  color: var(--bg-deep);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(245, 232, 192, 0.3);
}

.plan-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.plan-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  color: var(--cream-soft);
  font-weight: 500;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.plan-new {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--cream);
  font-weight: 500;
}

.plan-period {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-left: 2px;
}

.plan-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-primary);
}

.plan-list li {
  padding-left: 2px;
}

.plan-cta {
  width: 100%;
  margin-top: 4px;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 10px;
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--cream);
  transition: all 0.3s var(--ease);
}

.plan-cta:hover {
  background: rgba(245, 232, 192, 0.1);
  transform: translateY(-1px);
}

.plan-cta .cta-sub {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.12em;
  margin-top: 3px;
  text-transform: uppercase;
}

.plan-cta-featured {
  background: linear-gradient(135deg, var(--cream-deep) 0%, var(--cream) 50%, var(--cream-soft) 100%);
  color: var(--bg-deep);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(245, 232, 192, 0.25);
}

.plan-cta-featured:hover {
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-soft) 50%, var(--cream) 100%);
  box-shadow: 0 4px 16px rgba(245, 232, 192, 0.35);
}

.plan-cta-featured .cta-sub {
  color: rgba(10, 6, 18, 0.55);
}

/* ============================================
   REVIEWS — section avis qui résonne avec la cible
   ============================================ */
.paywall-reviews {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.paywall-reviews .stars {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--cream);
}

.reviews-title {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

.review {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(245, 232, 192, 0.025);
  border: 1px solid var(--border);
}

.review-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.review-author {
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin: 0;
}

.paywall-card .price-block {
  margin-top: 2px;
}

.paywall-card .testimonial {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  width: 100%;
}

.report-section {
  position: relative;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.report-section.visible {
  animation: fadeInUp 0.8s var(--ease-out) both;
}

.locked-list {
  list-style: none;
  padding: 24px;
  font-size: 13px;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.locked-list li {
  opacity: 0.92;
}

/* PAYWALL */
.paywall {
  margin-top: 18px;
  padding: 24px 20px;
  background: linear-gradient(180deg, rgba(245, 232, 192, 0.06) 0%, rgba(107, 79, 186, 0.06) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.price-block {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
}

.price-new {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 600;
  color: var(--cream-soft);
  text-shadow: 0 0 24px rgba(245, 232, 192, 0.4);
}

.btn-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 32px;
  background: linear-gradient(135deg, var(--cream-deep) 0%, var(--cream) 50%, var(--cream-soft) 100%);
  color: var(--bg-deep);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 12px 32px rgba(245, 232, 192, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s var(--ease);
  cursor: pointer;
  width: 100%;
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(245, 232, 192, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.cta-sub {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.15em;
  margin-top: 4px;
  opacity: 0.7;
}

.paywall-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.btn-cta:disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.btn-cta .spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(10, 6, 18, 0.3);
  border-top-color: var(--bg-deep);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.countdown {
  color: var(--cream);
  font-weight: 500;
}

.payment-methods {
  letter-spacing: 0.03em;
}

.testimonial {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.stars {
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.testimonial-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.45;
  margin-bottom: 3px;
}

.testimonial-author {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

/* Success — step 15 post-payment */
[data-step="15"] .step-content {
  justify-content: flex-start;
  align-items: center;
  flex: 1;
  gap: 0;
  overflow-y: auto;
}
[data-step="15"] .step-inner {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
}
[data-step="15"] .email-confirm {
  margin: 16px 0;
}
[data-step="15"] .step-footer {
  display: none;
}
.spam-notice {
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.6;
  margin: 4px 0 12px;
  font-style: italic;
}
[data-step="15"] .subtitle strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

.full-report {
  text-align: left;
  padding: 16px 0 32px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
  width: 100%;
}

.report-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 0;
  text-align: center;
}

.report-loader-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--text-secondary);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.zodiac-loader.small {
  width: 48px;
  height: 48px;
}

.zodiac-loader.small .zodiac-center {
  font-size: 18px;
}

.mini-zodiac-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 0;
}

.report-section {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.report-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.report-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  font-style: italic;
  color: var(--cream-soft);
  margin: 0 0 10px;
}

.report-body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-primary);
}

.report-body p {
  margin: 0 0 10px;
}

.report-body p:last-child {
  margin-bottom: 0;
}

.report-fallback {
  text-align: center;
  padding: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 540px) {
  .stage {
    padding: 70px 12px 20px;
  }

  .card {
    min-height: 0;                     /* La card s'adapte au contenu — JS gère la hauteur */
    max-height: calc(100vh - 90px);
    border-radius: 18px;
  }

  .step-inner {
    padding: 44px 24px 0;
  }
  .step-footer {
    padding-bottom: 28px;
  }
  .card.has-progress .step-footer {
    padding-bottom: 88px;     /* VALEUR DOCUMENTÉE mobile — ne jamais réduire */
  }

  .title {
    font-size: 22px;
  }


  .hero-inner {
    padding: 24px 24px 24px !important;
    gap: 16px;
  }

  .hero-mid {
    gap: 16px;
  }

  .hero-tag {
    font-size: 15px;
    max-width: 280px;
  }

  .reveal-text {
    font-size: 14px;
  }

  .price-new {
    font-size: 38px;
  }

  .btn {
    padding: 15px 26px;
    font-size: 13px;
    width: 100%;
  }

  .dual-actions .btn {
    width: auto;
  }

  .reveal-final-inner {
    padding: 36px 22px 32px;
    gap: 24px;
  }

  .brand {
    padding: 18px 24px;
  }

  .brand-mark {
    font-size: 14px;
  }

  /* Smaller wheels on mobile */
  .wheel {
    height: 130px;
  }
  .wheel-list {
    padding: 47px 0;    /* (130 - 36) / 2 = 47 */
  }
}

@media (max-height: 700px) {
  .step-inner {
    padding-top: 28px;
  }
  .step-content {
    gap: 14px;
  }

  /* Step 14 (final reveal) has no progress bar, so footer needs less bottom padding */
  .reveal-final-inner .step-footer {
    padding-bottom: 24px;
  }


  .orbit {
    width: 60px;
    height: 60px;
  }
}

/* Scroll only when needed */
.step::-webkit-scrollbar {
  width: 4px;
}

.step::-webkit-scrollbar-track {
  background: transparent;
}

.step::-webkit-scrollbar-thumb {
  background: rgba(245, 232, 192, 0.2);
  border-radius: 2px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.2s !important;
  }
}

/* ============================================
   PAGE SECTIONS (bas de page, scrollables sous la card)
   ============================================ */

.page-section {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 90px 20px;
  background: linear-gradient(180deg,
    rgba(10, 6, 18, 0) 0%,
    rgba(10, 6, 18, 0.4) 50%,
    rgba(10, 6, 18, 0.7) 100%);
}

.section-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.section-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--cream);
  opacity: 0.85;
  margin: 0 0 8px;
}

.section-title {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.15;
  font-weight: 500;
  font-style: italic;
  color: var(--text-primary);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.section-sub {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.6;
}

.section-sub strong {
  color: var(--cream);
  font-weight: 500;
}

/* ============================================
   PLANS SECTION (2 offres récurrentes)
   ============================================ */
/* Cacher les sections sous le funnel tant que le funnel est actif.
   Elles réapparaissent quand on scroll manuellement en bas de page (hero) */
.plans-section,
.reviews-section,
.faq-section {
  display: none;
}
/* Visible seulement quand le hero est actif (scroll naturel de la landing) */
body.on-hero .plans-section,
body.on-hero .reviews-section,
body.on-hero .faq-section {
  display: block;
}
.plans-section {
  padding-top: 110px;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 720px) {
  .plans-grid {
    grid-template-columns: 1fr;
    gap: 44px;
    max-width: 380px;
  }
}

.plan {
  position: relative;
  padding: 28px 26px 26px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(245, 232, 192, 0.025);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.plan:hover {
  transform: translateY(-3px);
}

.plan-essential {
  border-color: rgba(245, 232, 192, 0.18);
}

.plan-revelation {
  border-color: rgba(245, 232, 192, 0.5);
  background: rgba(245, 232, 192, 0.06);
  box-shadow: 0 0 0 1px rgba(245, 232, 192, 0.22),
              0 20px 50px rgba(0, 0, 0, 0.4);
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--cream-deep), var(--cream));
  color: var(--bg-deep);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(245, 232, 192, 0.35);
}

.plan-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.plan-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  color: var(--cream-soft);
  font-weight: 500;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.plan-old {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: line-through;
}

.plan-new {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--cream);
  font-weight: 500;
}

.plan-period {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-left: 3px;
}

.plan-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-primary);
}

.plan-cta {
  width: 100%;
  margin-top: 8px;
  padding: 16px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 12px;
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--cream);
  transition: all 0.3s var(--ease);
  cursor: pointer;
}

.plan-cta:hover {
  background: rgba(245, 232, 192, 0.1);
  transform: translateY(-2px);
}

.plan-cta .cta-sub {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.15em;
  margin-top: 5px;
  text-transform: uppercase;
}

.plan-cta-featured {
  background: linear-gradient(135deg, var(--cream-deep) 0%, var(--cream) 50%, var(--cream-soft) 100%);
  color: var(--bg-deep);
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(245, 232, 192, 0.3);
}

.plan-cta-featured:hover {
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-soft) 50%, var(--cream) 100%);
  box-shadow: 0 8px 28px rgba(245, 232, 192, 0.4);
}

.plan-cta-featured .cta-sub {
  color: rgba(10, 6, 18, 0.55);
}

/* ============================================
   REVIEWS SECTION
   ============================================ */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .reviews-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

.review-card {
  padding: 22px 22px 20px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(245, 232, 192, 0.03);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.review-card:hover {
  border-color: rgba(245, 232, 192, 0.25);
  transform: translateY(-2px);
}

.review-card .stars {
  font-size: 12px;
  letter-spacing: 0.12em;
  margin: 0;
}

.review-card .review-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0;
}

.review-card .review-author {
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: 4px 0 0;
}

/* ============================================
   FAQ SECTION
   ============================================ */
.faq-section {
  padding-bottom: 120px;
}

.faq-list {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(245, 232, 192, 0.025);
  padding: 18px 22px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.faq-item[open] {
  border-color: rgba(245, 232, 192, 0.28);
  background: rgba(245, 232, 192, 0.05);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

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

.faq-item summary::after {
  content: '+';
  font-size: 22px;
  color: var(--cream);
  font-weight: 300;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}

.faq-item[open] summary::after {
  content: '−';
}

.faq-item p {
  margin: 14px 0 2px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ============================================
   FOOTER
   ============================================ */
.page-footer {
  position: relative;
  z-index: 1;
  padding: 60px 20px 40px;
  background: rgba(6, 4, 14, 0.85);
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.footer-brand {
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--cream);
  letter-spacing: 0.02em;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.footer-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.03em;
  transition: color 0.3s var(--ease);
}

.footer-nav a:hover {
  color: var(--cream);
}

.footer-copy {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: 0;
  max-width: 560px;
  line-height: 1.6;
}

@media (max-width: 620px) {
  .page-section { padding: 70px 18px; }
  .section-title { font-size: 28px; }
  .section-sub { font-size: 14px; margin-bottom: 36px; }
  .plan { padding: 24px 20px; }
  .plan-name { font-size: 19px; }
  .plan-new { font-size: 24px; }
}

/* ============================================
   SOUND TOGGLE (ambient audio)
   ============================================ */
.sound-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20, 23, 58, 0.55);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(245, 232, 192, 0.25);
  color: var(--cream);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease);
  opacity: 0.75;
}

.sound-toggle:hover {
  opacity: 1;
  border-color: rgba(245, 232, 192, 0.55);
  transform: scale(1.05);
}

.sound-toggle .sound-icon-off { display: none; }
.sound-toggle.muted .sound-icon-on { display: none; }
.sound-toggle.muted .sound-icon-off { display: block; font-size: 12px; opacity: 0.6; }

/* ============================================
   TYPING EFFECT
   ============================================ */
.word-typed {
  opacity: 0;
  animation: wordFadeIn 0.2s ease forwards;
}
@keyframes wordFadeIn {
  to { opacity: 1; }
}

/* ============================================
   SILENCE MOMENT
   ============================================ */
.silence-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #0A0612;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  opacity: 1;
  transition: opacity 0.8s ease;
}
.silence-message {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: rgba(245, 232, 192, 0.7);
  letter-spacing: 0.03em;
  transition: opacity 0.4s ease;
  animation: silenceFadeIn 0.8s ease both;
}
@keyframes silenceFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.silence-overlay.fade-out { opacity: 0; }
.silence-zodiac-wrap {
  position: relative;
  width: 100px;
  height: 100px;
}
.silence-zodiac {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  inset: 0;
  animation: silenceRotate 8s linear infinite;
}
.silence-zodiac span {
  position: absolute;
  font-size: 12px;
  color: rgba(245, 232, 192, 0.4);
  left: 50%;
  top: 50%;
}
.silence-zodiac span:nth-child(1)  { transform: translate(-50%,-50%) rotate(0deg)   translateY(-46px); }
.silence-zodiac span:nth-child(2)  { transform: translate(-50%,-50%) rotate(30deg)  translateY(-46px); }
.silence-zodiac span:nth-child(3)  { transform: translate(-50%,-50%) rotate(60deg)  translateY(-46px); }
.silence-zodiac span:nth-child(4)  { transform: translate(-50%,-50%) rotate(90deg)  translateY(-46px); }
.silence-zodiac span:nth-child(5)  { transform: translate(-50%,-50%) rotate(120deg) translateY(-46px); }
.silence-zodiac span:nth-child(6)  { transform: translate(-50%,-50%) rotate(150deg) translateY(-46px); }
.silence-zodiac span:nth-child(7)  { transform: translate(-50%,-50%) rotate(180deg) translateY(-46px); }
.silence-zodiac span:nth-child(8)  { transform: translate(-50%,-50%) rotate(210deg) translateY(-46px); }
.silence-zodiac span:nth-child(9)  { transform: translate(-50%,-50%) rotate(240deg) translateY(-46px); }
.silence-zodiac span:nth-child(10) { transform: translate(-50%,-50%) rotate(270deg) translateY(-46px); }
.silence-zodiac span:nth-child(11) { transform: translate(-50%,-50%) rotate(300deg) translateY(-46px); }
.silence-zodiac span:nth-child(12) { transform: translate(-50%,-50%) rotate(330deg) translateY(-46px); }
.silence-zodiac-center {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  color: var(--cream);
  animation: silencePulse 2s ease-in-out infinite;
}
@keyframes silenceRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes silencePulse {
  0%, 100% { opacity: 0.3; transform: translate(-50%,-50%) scale(0.8); }
  50% { opacity: 1; transform: translate(-50%,-50%) scale(1.2); }
}

/* ============================================
   MICRO-REACTIONS
   ============================================ */
.micro-reactions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 14px 0 4px;
}
.reaction-pill {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(245,232,192,0.15);
  background: transparent;
  color: #8a85a0;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.reaction-pill:hover, .reaction-pill:active {
  border-color: rgba(245,232,192,0.4);
  color: #F5E8C0;
  background: rgba(245,232,192,0.05);
}

/* ============================================
   RARITY COUNTER
   ============================================ */
.rarity-counter {
  text-align: center;
  margin: 16px 0 8px;
}
.rarity-text {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #7a749a;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.rarity-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  max-width: 260px;
  margin: 0 auto;
}
.rd {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(245,232,192,0.08);
  transition: background 0.3s ease;
}
.rd.lit {
  background: #F5E8C0;
  box-shadow: 0 0 4px rgba(245,232,192,0.3);
}

/* ============================================
   BLURRED PAYWALL PREVIEW
   ============================================ */
.paywall-preview-blur {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(20,23,58,0.25);
  border: 1px solid rgba(245,232,192,0.06);
}
.paywall-preview-blur p {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #d4d0e0;
  line-height: 1.65;
  margin: 0 0 6px;
}

/* ============================================
   UNIVERSAL MOBILE — s'adapte à toutes les tailles d'écran
   ============================================ */
@media (max-width: 540px) {
  /* Tout en relatif — zéro débordement quel que soit l'écran */
  .card { max-width: calc(100vw - 24px); }
  .subtitle { max-width: 100%; }
  .reveal-text { max-width: 100%; }
  .text-input { max-width: 100%; }
  .native-date-input { max-width: 100%; }
  .options { max-width: 100%; }
  .paywall-card { max-width: 100%; }
  .chunk-body { max-width: 100%; }
  .date-fields { max-width: 100%; }
}

/* Très petits écrans (iPhone SE / 320-375px) — réduction typo */
@media (max-width: 375px) {
  .hero-wordmark { font-size: 46px; }
  .hero-tag { font-size: 14px; }
  .title { font-size: 19px; }
  .loader-steps { font-size: 12px; }
}