/* =====================================================
   Crème — Fidélité (public)
   Duolingo-like cartoon gamified UI — mobile first
   4 themes : playful | minimal | pastel | sunset
   ===================================================== */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
button { cursor: pointer; font: inherit; color: inherit; border: 0; background: transparent; padding: 0; }
input, button, textarea { font: inherit; }
input { color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

/* ── Tokens ── */
:root {
  --font-sans: Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: Fraunces, ui-serif, serif;

  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);

  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-xxl: 36px;
  --r-pill: 999px;

  /* ── Playful (default) ── */
  --primary: #3905c8;
  --primary-ink: #ffffff;
  --accent: #ffea29;
  --accent-ink: #171412;
  --ink: #171412;
  --muted: #6f6963;
  --surface: #ffffff;
  --surface-soft: #fffaf0;
  --border: #171412;
  --danger: #d9371d;
  --success: #13a05b;
  --focus-ring: rgba(57, 5, 200, 0.22);

  --bg-top: #fbf9ef;
  --bg-bottom: #f5f2ea;
  --bg-page: #f5f2ea;
  --halo-tl: rgba(57, 5, 200, 0.30);
  --halo-tr: rgba(255, 234, 41, 0.40);

  --shadow: var(--border);

  /* Wheel rim — gold (default playful theme) */
  --rim-c1: #b3690d;
  --rim-c2: #ffd166;
  --rim-c3: #fff7c2;
  --rim-c4: #ffea29;
  --rim-c5: #ffb347;
  --rim-inner-glow: rgba(255, 222, 140, 0.4);
}

/* ── Minimal — cool mono editorial ── */
body[data-theme="minimal"] {
  --primary: #0a0a0a;
  --primary-ink: #ffffff;
  --accent: #ededf0;
  --accent-ink: #0a0a0a;
  --ink: #0a0a0a;
  --muted: #767a85;
  --surface: #ffffff;
  --surface-soft: #fafafb;
  --border: #0a0a0a;
  --danger: #c4271a;
  --success: #1a8a4a;
  --focus-ring: rgba(10, 10, 10, 0.22);

  --bg-top: #ffffff;
  --bg-bottom: #eef0f4;
  --bg-page: #f5f6f8;
  --halo-tl: rgba(180, 190, 210, 0.30);
  --halo-tr: rgba(210, 213, 220, 0.40);

  --shadow: #c8ccd5;

  /* Wheel rim — chrome / silver */
  --rim-c1: #3a3d44;
  --rim-c2: #c8ccd5;
  --rim-c3: #f5f6f8;
  --rim-c4: #ededf0;
  --rim-c5: #9aa0a8;
  --rim-inner-glow: rgba(220, 225, 235, 0.5);
}

/* ── Pastel — rosé + bleu layette ── */
body[data-theme="pastel"] {
  --primary: #e86ca0;
  --primary-ink: #ffffff;
  --accent: #c1e3ff;
  --accent-ink: #2a3a55;
  --ink: #5a4070;
  --muted: #8a6f7c;
  --surface: #ffffff;
  --surface-soft: #fff8fb;
  --border: #2a1a24;
  --danger: #d9371d;
  --success: #0f9a56;
  --focus-ring: rgba(232, 108, 160, 0.28);

  --bg-top: #fff5f7;
  --bg-bottom: #f0f6ff;
  --bg-page: #f6f3f8;
  --halo-tl: #ffd6e0;
  --halo-tr: #c1e3ff;

  --shadow: var(--border);

  /* Wheel rim — rose gold + pastel pearl */
  --rim-c1: #b8788e;
  --rim-c2: #f5b8c8;
  --rim-c3: #ffe7ef;
  --rim-c4: #e86ca0;
  --rim-c5: #c1e3ff;
  --rim-inner-glow: rgba(255, 210, 225, 0.5);
}

/* ── Sunset — corail + doré ── */
body[data-theme="sunset"] {
  --primary: #ff6b6b;
  --primary-ink: #ffffff;
  --accent: #ffc93c;
  --accent-ink: #4a1a00;
  --ink: #4a1a00;
  --muted: #8a5636;
  --surface: #ffffff;
  --surface-soft: #fff5e6;
  --border: #4a1a00;
  --danger: #b3221a;
  --success: #128450;
  --focus-ring: rgba(255, 107, 107, 0.28);

  --bg-top: #fff5f0;
  --bg-bottom: #fffbe8;
  --bg-page: #fff5e6;
  --halo-tl: rgba(255, 107, 107, 0.30);
  --halo-tr: rgba(255, 201, 60, 1);

  --shadow: var(--border);

  /* Wheel rim — warm copper + sunset glow */
  --rim-c1: #a04030;
  --rim-c2: #ffc93c;
  --rim-c3: #fff0c2;
  --rim-c4: #ff6b6b;
  --rim-c5: #ff9468;
  --rim-inner-glow: rgba(255, 210, 140, 0.5);
}

/* ── Body ── */
body {
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 700;
  background-color: var(--bg-bottom);
  background:
    radial-gradient(circle at 20% -10%, var(--halo-tl) 0%, transparent 55%),
    radial-gradient(circle at 100% 20%, var(--halo-tr) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100dvh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
html { background: var(--bg-bottom); }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.55) 0, transparent 38%),
    radial-gradient(circle at 80% 90%, rgba(255,255,255,0.35) 0, transparent 42%);
  z-index: 0;
}

/* ── Boot loader ── */
.boot-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: calc(var(--safe-top) + 88px) 18px calc(var(--safe-bottom) + 10px);
  background:
    radial-gradient(circle at 20% -10%, var(--halo-tl) 0%, transparent 55%),
    radial-gradient(circle at 100% 20%, var(--halo-tr) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  background-color: var(--bg-bottom);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100dvh;
  z-index: 100;
  overflow-y: auto;
}
.boot-loader-inner {
  width: 100%;
  max-width: 440px;
  margin: 0 0 22px;
  text-align: center;
  animation: screenIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.boot-loader .dots-loader { margin-top: 20px; }

/* ── Error state ── */
.screen-error {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: calc(var(--safe-top) + 88px) 18px calc(var(--safe-bottom) + 10px);
  background:
    radial-gradient(circle at 20% -10%, var(--halo-tl) 0%, transparent 55%),
    radial-gradient(circle at 100% 20%, var(--halo-tr) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  background-color: var(--bg-bottom);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% 100dvh;
  z-index: 50;
  overflow-y: auto;
  animation: fadeIn 0.4s ease both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.screen-error-inner {
  width: 100%;
  max-width: 440px;
  margin: 0 0 22px;
  text-align: center;
  animation: screenIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.error-title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 900;
  font-size: 2.1rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.error-sub {
  margin: 0 auto 22px;
  max-width: 320px;
  font-weight: 800;
  color: var(--muted);
  padding: 0 10px;
}
.error-hint {
  margin: 18px auto 0;
  max-width: 320px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.4;
}

/* ── App layout ── */
.app {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 6px 18px calc(var(--safe-bottom) + 10px);
  min-height: 100dvh;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  animation: fadeDown 0.4s ease both;
  flex-shrink: 0;
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ── Brand chip : premium card ── */
.brand-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 42px 7px 7px;
  border: 2.5px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(120% 140% at 10% 50%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 45%),
    linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 100%);
  box-shadow:
    0 5px 0 var(--shadow),
    0 10px 24px -10px rgba(0,0,0,0.18);
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
}
/* Shine sweep */
.brand-chip::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 55%;
  height: 100%;
  background: linear-gradient(115deg,
    transparent 20%,
    color-mix(in srgb, var(--accent) 55%, transparent) 50%,
    transparent 80%);
  pointer-events: none;
  animation: chipShine 6s ease-in-out infinite;
  z-index: 0;
  transform: skewX(-20deg);
}
@keyframes chipShine {
  0%, 85%, 100% { transform: translateX(0) skewX(-20deg); opacity: 0; }
  12% { opacity: 0; }
  28% { opacity: 1; }
  62% { transform: translateX(340%) skewX(-20deg); opacity: 0; }
}
/* Right-corner sparkle */
.brand-chip::after {
  content: "✦";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%) rotate(0);
  font-size: 0.95rem;
  color: var(--primary);
  opacity: 0.35;
  pointer-events: none;
  animation: chipStarTwinkle 3.4s ease-in-out infinite;
  z-index: 0;
}
@keyframes chipStarTwinkle {
  0%, 100% { opacity: 0.25; transform: translateY(-50%) rotate(0) scale(1); }
  50%      { opacity: 0.75; transform: translateY(-50%) rotate(180deg) scale(1.25); }
}

.brand-chip-logo,
.brand-chip-txt { position: relative; z-index: 1; }

/* Logo with orbital sparkle */
.brand-chip-logo {
  position: relative;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.85) 0%, transparent 45%),
    radial-gradient(circle at 70% 70%, var(--accent) 0%, color-mix(in srgb, var(--accent) 80%, var(--ink)) 100%);
  flex-shrink: 0;
  overflow: hidden;
  font-size: 1.3rem;
  border: 2.5px solid var(--border);
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,0.1),
    0 2px 0 var(--shadow);
}
.brand-chip-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.brand-chip-logo::after {
  content: "✦";
  position: absolute;
  top: -4px; right: -4px;
  font-size: 0.72rem;
  color: var(--primary);
  text-shadow: 0 0 0 2px var(--surface), 0 1px 0 #fff;
  z-index: 2;
  animation: logoSparkle 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.9));
}
@keyframes logoSparkle {
  0%, 100% { transform: rotate(0) scale(0.9); opacity: 0.85; }
  50%      { transform: rotate(180deg) scale(1.35); opacity: 1; }
}

.brand-chip-txt { display: flex; flex-direction: column; min-width: 0; gap: 4px; }

/* Kicker = mini live badge */
.brand-chip-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 3px 9px 3px 7px;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: var(--primary-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 80%, #fff) 0%, var(--primary) 100%);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 2px 0 var(--shadow);
}
.brand-chip-kicker::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent);
  animation: kickerLivePulse 1.4s ease-in-out infinite;
}
@keyframes kickerLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); transform: scale(1); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); transform: scale(1.25); }
}

.brand-chip-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.progress {
  flex-shrink: 0;
  min-width: 92px;
  text-align: right;
}
.progress-label {
  font-size: 0.65rem; font-weight: 900;
  letter-spacing: 0.08em; color: var(--muted);
  margin-bottom: 4px; text-transform: uppercase;
}
.progress-track {
  position: relative;
  height: 10px;
  border: 2.5px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 2px 0 var(--shadow);
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--primary);
  border-radius: var(--r-pill);
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: shimmer 1.8s linear infinite;
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Stage + Screens */
.stage {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.screen { display: none; }
.screen.is-active {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
  animation: screenIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.screen.is-leaving {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
  animation: screenOut 0.22s ease-in both;
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes screenOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-18px) scale(0.97); }
}

/* Mascot */
.mascot {
  width: 112px;
  height: 112px;
  margin: 4px auto 22px;
  position: relative;
  display: grid;
  place-items: center;
  border: 3px solid var(--border);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent) 0 42%, var(--surface) 86%);
  box-shadow: 0 6px 0 var(--shadow);
  animation:
    mascotPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    mascotFloat 3.2s ease-in-out infinite 0.6s;
}
.mascot-xl { width: 140px; height: 140px; }
.mascot-emoji {
  font-size: 3.2rem;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.06));
}
.mascot-xl .mascot-emoji { font-size: 4rem; }
.mascot::after {
  content: "";
  position: absolute;
  right: -6px; bottom: -4px;
  width: 18px; height: 18px;
  border: 2.5px solid var(--border);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 2px 0 var(--shadow);
  animation: mascotDot 2s ease-in-out infinite;
}
.mascot.swap .mascot-emoji { animation: mascotSwap 0.45s ease both; }
@keyframes mascotPop {
  0%   { opacity: 0; transform: scale(0) rotate(-12deg); }
  70%  { opacity: 1; transform: scale(1.14) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes mascotFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-2deg); }
}
@keyframes mascotDot {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}
@keyframes mascotSwap {
  0%   { opacity: 1; transform: scale(1) rotate(0); }
  40%  { opacity: 0; transform: scale(0) rotate(-30deg); }
  55%  { opacity: 0; transform: scale(0) rotate(15deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
/* Hero (intro) */
.hero { text-align: center; margin-bottom: 24px; }

/* Universal italic highlight (used in step-title, hero-title, success-title) */
em.hl {
  color: var(--primary);
  font-style: italic;
  font-weight: 900;
}

/* ── Kicker pill (intro + every step screen) — premium animated ── */
.kicker {
  position: relative;
  display: inline-flex;
  width: fit-content;
  align-self: center;
  margin: 0 auto 16px;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  border: 2.5px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--accent);
  background-image:
    radial-gradient(140% 220% at 0% 0%, rgba(255,255,255,0.7) 0%, transparent 45%),
    radial-gradient(140% 220% at 100% 100%, color-mix(in srgb, var(--accent) 60%, #fff) 0%, transparent 55%);
  color: var(--accent-ink);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  box-shadow:
    0 5px 0 var(--shadow),
    0 10px 22px -8px rgba(0,0,0,0.22),
    inset 0 -3px 0 rgba(0,0,0,0.08),
    inset 0 2px 0 rgba(255,255,255,0.5);
  transform: rotate(-2deg);
  animation: kickerFloat 3.6s ease-in-out infinite;
  overflow: hidden;
  isolation: isolate;
}
/* Animated diagonal shine that sweeps across the pill */
.kicker::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.65) 50%, transparent 70%);
  transform: translateX(-100%) skewX(-18deg);
  animation: kickerShine 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes kickerShine {
  0%, 65%, 100% { transform: translateX(-100%) skewX(-18deg); opacity: 0; }
  18%           { opacity: 0; }
  35%           { opacity: 1; }
  55%           { transform: translateX(160%) skewX(-18deg); opacity: 0; }
}

/* Inner stars — separate spans, animated independently */
.kicker-star {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  color: var(--primary);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 0 6px color-mix(in srgb, var(--primary) 40%, transparent);
  animation: kickerStarSpin 2.4s ease-in-out infinite;
  transform-origin: center;
}
.kicker-star:last-child { animation-delay: 1.2s; }
@keyframes kickerStarSpin {
  0%, 100% { transform: rotate(0) scale(0.85); opacity: 0.85; }
  50%      { transform: rotate(180deg) scale(1.35); opacity: 1; }
}

.kicker-text {
  position: relative;
  z-index: 2;
}

@keyframes kickerFloat {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(-1deg) translateY(-3px); }
}

/* Celebratory variant — primary background + gold sparkles, dramatic entrance */
.kicker--celebrate {
  background: var(--primary);
  background-image:
    radial-gradient(140% 200% at 0% 0%, rgba(255,255,255,0.4) 0%, transparent 50%),
    radial-gradient(140% 200% at 100% 100%, color-mix(in srgb, var(--primary) 60%, #fff) 0%, transparent 55%);
  color: var(--primary-ink);
  font-size: 0.8rem;
  padding: 12px 28px;
  letter-spacing: 0.22em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
  box-shadow:
    0 6px 0 var(--shadow),
    0 12px 28px -8px color-mix(in srgb, var(--primary) 50%, transparent),
    inset 0 -3px 0 rgba(0,0,0,0.18),
    inset 0 2px 0 rgba(255,255,255,0.25);
  animation:
    kickerCelebrateIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    kickerFloat 3.6s ease-in-out infinite 0.7s;
}
.kicker--celebrate::before {
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
}
.kicker--celebrate .kicker-star {
  color: var(--accent);
  font-size: 1.1rem;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3), 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
}
@keyframes kickerCelebrateIn {
  0%   { opacity: 0; transform: rotate(-10deg) scale(0); }
  55%  { opacity: 1; transform: rotate(3deg) scale(1.22); }
  100% { opacity: 1; transform: rotate(-2deg) scale(1); }
}

/* Mascot sparkles (around the emoji circle) */
.mascot-spark {
  position: absolute;
  pointer-events: none;
  font-size: 0.95rem;
  color: var(--primary);
  text-shadow: 0 1px 0 rgba(255,255,255,0.85);
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.7));
  animation: mascotSpark 2.6s ease-in-out infinite;
  z-index: 2;
}
.mascot-spark-1 { top: -8px; left: -10px; font-size: 1.05rem; }
.mascot-spark-2 { bottom: 6px; right: -16px; color: var(--accent); animation-delay: 1.3s; }
@keyframes mascotSpark {
  0%, 100% { transform: scale(0.6) rotate(0); opacity: 0.25; }
  50%      { transform: scale(1.45) rotate(180deg); opacity: 1; }
}

.hero-title {
  margin: 16px 0 8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.8rem, 7vw, 2.5rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-align: center;
}
.hero-sub { margin: 0; color: var(--muted); font-weight: 800; line-height: 1.4; font-size: 1rem; padding: 0 8px; white-space: normal; word-break: break-word; overflow-wrap: break-word; }

/* Step titles */
.step-title {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 900;
  font-size: 1.9rem;
  line-height: 1.05;
  text-align: center;
  letter-spacing: -0.02em;
}
.step-sub {
  margin: 0 0 26px;
  text-align: center;
  color: var(--muted);
  font-weight: 800;
  padding: 0 8px;
}

/* Fields */
.fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.field { position: relative; display: block; }
.field[hidden] { display: none; }

.field-input {
  width: 100%;
  min-height: 62px;
  padding: 22px 46px 10px 16px;
  border: 2.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-weight: 900;
  font-size: 1rem;
  outline: none;
  transition: box-shadow 0.2s, border-color 0.2s;
  box-shadow: 0 3px 0 var(--shadow);
  -webkit-appearance: none;
  appearance: none;
}
.field-input::placeholder { color: transparent; }

.field-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1rem;
  font-weight: 800;
  pointer-events: none;
  transition: top 0.2s, font-size 0.2s, color 0.2s;
  background: transparent;
}
.field-input[type="date"] {
  color: transparent;
  caret-color: transparent;
  color-scheme: light;
  -webkit-appearance: none;
  appearance: none;
}
.field-input[type="date"]::-webkit-datetime-edit { color: transparent; }
.field-input[type="date"]::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}
.field-input[type="date"]::-webkit-inner-spin-button,
.field-input[type="date"]::-webkit-clear-button { display: none; }
.field.is-valid .field-input[type="date"],
.field.is-touched .field-input[type="date"],
.field-input[type="date"]:focus { color: var(--ink); caret-color: var(--ink); }
.field.is-valid .field-input[type="date"]::-webkit-datetime-edit,
.field.is-touched .field-input[type="date"]::-webkit-datetime-edit,
.field-input[type="date"]:focus::-webkit-datetime-edit { color: var(--ink); }

.field-input:focus + .field-label,
.field-input:not(:placeholder-shown):not([type="date"]) + .field-label,
.field.has-value .field-label,
.field.is-touched .field-label {
  top: 12px;
  transform: translateY(0);
  font-size: 0.66rem;
  color: var(--primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 900;
}

.field-check {
  position: absolute;
  right: 12px;
  top: 50%;
  z-index: 3;
  transform: translate(6px, -50%) scale(0);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--border);
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-weight: 900;
  font-size: 0.9rem;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  box-shadow: 0 2px 0 var(--shadow);
}
.field.is-valid .field-check { transform: translate(0, -50%) scale(1); }
.field.is-valid .field-input { border-color: var(--success); }
.field.is-invalid { animation: shake 0.4s ease; }
.field.is-invalid .field-input { border-color: var(--danger); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-8px); }
  75%      { transform: translateX(8px); }
}

.field-error {
  margin: 0 0 16px;
  min-height: 22px;
  text-align: center;
  color: var(--danger);
  font-weight: 900;
  font-size: 0.88rem;
}
.field-error:empty { display: none; }

/* Step quete : on réserve l'espace de l'erreur en permanence pour ne pas
   pousser les canaux quand le message apparaît */
#quete-error,
#quete-error:empty {
  display: block;
  margin: 0 0 12px;
  min-height: 22px;
}

/* ── Date de naissance (3 champs JJ / MM / AAAA) ── */
.dob-row { display: flex; align-items: center; gap: 8px; }
.dob-row .field { flex: 1; min-width: 0; }
.dob-row .dob-year { flex: 1.8; }
.dob-sep { font-weight: 900; font-size: 1.1rem; color: var(--muted); flex-shrink: 0; }
.dob-row .field-input { padding: 22px 4px 10px 4px; text-align: center; }
.dob-row .field-label { left: 0; right: 0; text-align: center; }
.dob-row .field-check { display: none; }
.dob-row .dob-year .field-input { padding: 22px 46px 10px 16px; text-align: left; }
.dob-row .dob-year .field-label { left: 16px; right: auto; text-align: left; }
.dob-row .dob-year .field-check { display: grid; right: 12px; }

/* Buttons */
.btn {
  min-height: 58px;
  padding: 0 22px;
  border: 2.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 5px 0 var(--shadow);
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.2s, filter 0.2s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--shadow); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; filter: saturate(0.45); }
.btn-primary {
  background:
    radial-gradient(120% 130% at 30% 20%,
      color-mix(in srgb, white 30%, var(--primary)) 0%,
      var(--primary) 50%,
      color-mix(in srgb, var(--primary) 65%, var(--accent)) 100%);
  color: var(--primary-ink);
  border-width: 3px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
  box-shadow:
    0 5px 0 var(--shadow),
    inset 0 -4px 0 rgba(0,0,0,0.18),
    inset 0 3px 0 rgba(255,255,255,0.35);
}
.btn-primary:hover:not(:disabled) {
  box-shadow:
    0 6px 0 var(--shadow),
    inset 0 -4px 0 rgba(0,0,0,0.18),
    inset 0 4px 0 rgba(255,255,255,0.45);
}
.btn-primary:active:not(:disabled) {
  box-shadow:
    0 1px 0 var(--shadow),
    inset 0 -2px 0 rgba(0,0,0,0.18),
    inset 0 2px 0 rgba(255,255,255,0.4);
}
.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  min-width: 58px;
  padding: 0;
  width: 58px;
  border-width: 3px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  box-shadow:
    0 5px 0 var(--shadow),
    inset 0 -4px 0 rgba(0,0,0,0.10),
    inset 0 3px 0 rgba(255,255,255,0.55);
  font-size: 1.25rem;
}
.btn-ghost:hover:not(:disabled) {
  box-shadow:
    0 6px 0 var(--shadow),
    inset 0 -4px 0 rgba(0,0,0,0.10),
    inset 0 4px 0 rgba(255,255,255,0.65);
}
.btn-ghost:active:not(:disabled) {
  box-shadow:
    0 1px 0 var(--shadow),
    inset 0 -2px 0 rgba(0,0,0,0.10),
    inset 0 2px 0 rgba(255,255,255,0.5);
}
.btn-block { width: 100%; }
.btn-glow { position: relative; overflow: hidden; }
.btn-glow::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: btnGlow 2.8s ease-in-out infinite;
}
@keyframes btnGlow {
  0%   { transform: translateX(0); }
  60%  { transform: translateX(400%); }
  100% { transform: translateX(400%); }
}
.btn-arrow { display: inline-block; transition: transform 0.25s; }

/* Actions row */
.actions {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
}
.actions--single {
  display: block;
  margin-top: 6px;
}
.actions--single .btn {
  width: 100%;
}

/* Dots loader */
.dots-loader {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.dots-loader span {
  width: 16px; height: 16px;
  border: 2.5px solid var(--border);
  border-radius: 50%;
  background: var(--primary);
  animation: dotJump 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.dots-loader span:nth-child(2) { background: var(--accent); animation-delay: 0.15s; }
.dots-loader span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotJump {
  0%, 80%, 100% { transform: translateY(0) scale(0.75); opacity: 0.5; }
  40%           { transform: translateY(-14px) scale(1.1); opacity: 1; }
}

/* Success */
.success-title {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 900;
  font-size: 2rem;
  text-align: center;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.success-sub {
  margin: 0 0 6px;
  text-align: center;
  color: var(--muted);
  font-weight: 800;
  padding: 0 10px;
}

/* ── Final card — themed gradient ticket ── */
.qr-card {
  position: relative;
  margin: 8px 0 18px;
  padding: 22px 20px 20px;
  border: 2.5px solid var(--border);
  border-radius: 28px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 35%, white) 0%,
    color-mix(in srgb, var(--primary) 18%, white) 100%);
  box-shadow: 0 8px 0 var(--shadow);
  text-align: center;
  overflow: visible;
  isolation: isolate;
}
/* QR area — plain white tile so the QR stays scannable */
.qr-wrap {
  position: relative;
  z-index: 1;
  width: min(100%, 230px);
  margin: 0 auto 14px;
  aspect-ratio: 1;
  padding: 16px;
  border-radius: 22px;
  background: #fff;
  display: grid; place-items: center;
}
.qr-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.qr-skeleton {
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.4; } }

/* Inline phrase "Pas de scan ? Donne le code XXX-XXX-XXX" */
.qr-line {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.4;
}
.qr-line-code {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--accent);
  font-family: ui-monospace, 'SF Mono', 'SFMono-Regular', 'Roboto Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-rendering: geometricPrecision;
  vertical-align: middle;
}

/* Wallet buttons — side by side inside the card */
.wallet-buttons {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.wallet-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  padding: 6px 8px;
  border: 2.5px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: 0 4px 0 var(--shadow);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.wallet-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow); }
.wallet-btn-icon { width: 22px; height: 22px; flex-shrink: 0; }
.wallet-btn-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  min-width: 0;
}
.wallet-btn-txt small {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin-bottom: 1px;
}
.wallet-btn-txt strong {
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.wallet-btn--apple {
  background: #000;
  color: #fff;
  box-shadow: 0 4px 0 var(--accent);
}
.wallet-btn--apple:active {
  box-shadow: 0 1px 0 var(--accent);
}
.wallet-btn--google {
  background: #fff;
  color: #1a1a1a;
}

/* Wrapper so badge and card sit together */
.qr-ticket-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 8px 0 18px;
}
.qr-ticket-wrap .qr-card {
  margin: 0;
  width: 100%;
  padding-top: 30px;
}

/* Sticker badge — expiration date, overlaps the top edge of the QR card */
.qr-expire {
  position: relative;
  display: inline-block;
  margin-bottom: -18px;
  padding: 7px 18px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  border: 2.5px solid var(--border);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--border);
  transform: rotate(-2deg);
  z-index: 3;
}
.qr-expire::before,
.qr-expire::after {
  content: "✦";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.55rem;
  opacity: 0.6;
}
.qr-expire::before { left: 7px; }
.qr-expire::after  { right: 7px; }

.qr-conditions {
  position: relative;
  z-index: 1;
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 22%, transparent);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Powered footer — handwritten-style signature */
.powered {
  flex-shrink: 0;
  margin-top: 22px;
  padding-top: 2px;
  text-align: center;
}
.sig {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 2px;
  line-height: 1.2;
  color: var(--muted);
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* no hover effect on sig */
.sig-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.sig-brand {
  position: relative;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--primary);
  padding-bottom: 6px;
}
.sig-underline {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 8px;
  color: var(--primary);
  opacity: 0.85;
  pointer-events: none;
}
.sig-star,
.sig-dot {
  display: inline-block;
  font-size: 0.88rem;
  line-height: 1;
  color: var(--primary);
  animation: sigStarSpin 5s ease-in-out infinite;
  transform-origin: center;
  vertical-align: middle;
}
@keyframes sigStarSpin {
  0%, 100% { transform: rotate(0) scale(1); }
  50%      { transform: rotate(180deg) scale(1.18); }
}

/* ── Confetti : multi-shape, drift-friendly shower ── */
.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 200;
}
.confetti {
  --drift: 0px;
  --rot: 720deg;
  --dur: 2.8s;
  --delay: 0s;
  position: absolute;
  top: -24px;
  width: 10px;
  height: 16px;
  opacity: 0.96;
  border: 1.5px solid rgba(0,0,0,0.2);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
  animation: confettiFall var(--dur) cubic-bezier(0.18, 0.6, 0.4, 1) forwards;
  animation-delay: var(--delay);
  will-change: transform, opacity;
}
.confetti.round    { border-radius: 50%; width: 12px; height: 12px; }
.confetti.streamer { width: 5px; height: 22px; border-radius: 0; }
.confetti.star {
  width: 18px; height: 18px;
  border: none;
  box-shadow: none;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 4px currentColor);
}
@keyframes confettiFall {
  0%   { transform: translate(0, 0) rotate(0);                              opacity: 1; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--drift), 110vh) rotate(var(--rot));      opacity: 0; }
}

/* Small-width tweaks */
@media (max-width: 360px) {
  .mascot { width: 100px; height: 100px; margin-bottom: 16px; }
  .mascot-emoji { font-size: 2.8rem; }
  .hero-title { font-size: 2rem; }
  .step-title { font-size: 1.7rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* =====================================================
   ROUE — Components spécifiques (étape intro, contact, canal, wheel, résultat)
   ===================================================== */

/* ── How cards (intro : timeline 1 → 2 → 3 — playful & alive) ── */
.how-cards {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  margin: 0 0 22px;
  position: relative;
}

.how-card {
  --tilt: -1.2deg;
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px 13px 14px;
  border: 2.5px solid var(--border);
  border-radius: 20px;
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--accent) 38%, transparent) 0%, transparent 55%),
    radial-gradient(120% 160% at 100% 100%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 100%);
  box-shadow:
    0 6px 0 var(--shadow),
    0 14px 28px -14px color-mix(in srgb, var(--primary) 35%, transparent);
  text-align: left;
  isolation: isolate;
  overflow: visible;
  transform: rotate(var(--tilt));
  opacity: 0;
  animation: howCardIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(0.18s + var(--i) * 0.18s);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}
.how-card:nth-child(odd) { --tilt: -1.2deg; }
.how-card:nth-child(3n+2) { --tilt: 1.2deg; }

/* Diagonal animated shine */
.how-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  background-size: 220% 100%;
  background-position: 200% 0;
  animation: howCardShine 5.5s ease-in-out infinite;
  animation-delay: calc(1.2s + var(--i) * 0.4s);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* Numéro en pastille style badge */
.how-card-num {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  background: var(--primary);
  color: var(--primary-ink);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 900;
  font-size: 0.82rem;
  line-height: 1;
  box-shadow:
    0 2px 0 var(--shadow),
    0 0 0 3px color-mix(in srgb, var(--surface) 70%, transparent);
  z-index: 3;
  animation: howNumPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             howNumWobble 3.2s ease-in-out infinite;
  animation-delay:
    calc(0.45s + var(--i) * 0.18s),
    calc(1.2s + var(--i) * 0.18s);
  transform-origin: center;
}

/* Bloc emoji = halo + glyphe + sparks */
.how-card-emoji {
  position: relative;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  flex-shrink: 0;
  border: 2.5px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 80%, white) 0%, var(--accent) 65%);
  box-shadow:
    0 4px 0 var(--shadow),
    inset 0 -3px 0 rgba(0,0,0,0.08),
    inset 0 2px 0 rgba(255,255,255,0.55);
  z-index: 2;
  transform: rotate(calc(var(--tilt) * -1));
}
.how-card-emoji-glyph {
  position: relative;
  font-size: 1.55rem;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.1));
  z-index: 2;
}
.how-card-emoji-halo {
  position: absolute;
  inset: -8px;
  border-radius: 26px;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 35%, transparent) 0%, transparent 65%);
  filter: blur(8px);
  opacity: 0.55;
  z-index: 0;
  animation: howEmojiHalo 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.3s);
  pointer-events: none;
}
.how-card-emoji-spark {
  position: absolute;
  font-size: 0.78rem;
  color: var(--primary);
  text-shadow: 0 0 6px color-mix(in srgb, var(--primary) 50%, transparent);
  pointer-events: none;
  animation: howSparkPulse 2.4s ease-in-out infinite;
  z-index: 3;
}
.how-card-emoji-spark-1 { top: -6px; right: -6px; }
.how-card-emoji-spark-2 {
  bottom: -4px; left: -8px;
  color: var(--accent);
  font-size: 0.66rem;
  animation-delay: 1.1s;
}

.how-card-txt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 1;
}
.how-card-title {
  font-weight: 900;
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.how-card-sub {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.35;
}

/* ── Animations ── */
@keyframes howCardIn {
  0%   { opacity: 0; transform: rotate(0) translateY(28px) scale(0.92); }
  60%  { opacity: 1; transform: rotate(calc(var(--tilt) * 1.5)) translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: rotate(var(--tilt)) translateY(0) scale(1); }
}
@keyframes howCardShine {
  0%, 60%, 100% { background-position: 200% 0; }
  30%           { background-position: -120% 0; }
}
@keyframes howNumPop {
  0%   { opacity: 0; transform: scale(0) rotate(-30deg); }
  70%  { opacity: 1; transform: scale(1.2) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes howNumWobble {
  0%, 100% { transform: scale(1) rotate(0); }
  50%      { transform: scale(1.06) rotate(-6deg); }
}
@keyframes howEmojiFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(-3deg); }
}
@keyframes howEmojiHalo {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50%      { opacity: 0.75; transform: scale(1.15); }
}
@keyframes howSparkPulse {
  0%, 100% { opacity: 0.2; transform: scale(0.7) rotate(0); }
  50%      { opacity: 1;   transform: scale(1.3) rotate(180deg); }
}
/* ── Canal cards PREMIUM BANDS — logos brands + #N rank ── */
.canal-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 2px 0 16px;
}
.canal-card {
  --card-tilt: -0.6deg;
  --card-color: var(--primary);
  --card-color-2: var(--accent);
  --platform-color: var(--primary);
  --platform-color-2: var(--accent);
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 10px;
  border: 2.5px solid var(--border);
  border-radius: 22px;
  background:
    linear-gradient(95deg,
      color-mix(in srgb, var(--card-color) 12%, transparent) 0%,
      color-mix(in srgb, var(--card-color-2) 22%, transparent) 100%),
    linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 100%);
  box-shadow: none;
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
  transform: rotate(var(--card-tilt));
  opacity: 0;
  animation: canalCardIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  cursor: pointer;
  transition: transform 0.5s ease-out, box-shadow 0.4s ease, opacity 0.3s ease;
}
.canal-card:nth-child(1) { animation-delay: 0.08s; --card-tilt: -0.6deg; }
.canal-card:nth-child(2) { animation-delay: 0.2s;  --card-tilt: 0.6deg; }
.canal-card:nth-child(3) { animation-delay: 0.32s; --card-tilt: -0.4deg; }
.canal-card:nth-child(4) { animation-delay: 0.44s; --card-tilt: 0.4deg; }

.canal-card:hover {
  transform: rotate(calc(var(--card-tilt) * 0.3)) translateY(-1px);
}
.canal-card:active {
  transform: rotate(0deg) translateY(1px);
}

/* Reflet diagonal qui balaye */
.canal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  background-size: 220% 100%;
  background-position: 200% 0;
  animation: canalCardShine 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
  opacity: 0.55;
}

/* Bordure intérieure dashed (theme) */
.canal-card::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 18px;
  border: 1.5px dashed color-mix(in srgb, var(--card-color) 35%, transparent);
  pointer-events: none;
  z-index: 1;
  animation: canalDashSpin 14s ease-in-out infinite;
}
.canal-card:nth-child(2)::before { animation-delay: 1s; }
.canal-card:nth-child(3)::before { animation-delay: 2s; }
.canal-card:nth-child(4)::before { animation-delay: 3s; }
.canal-card:nth-child(2)::after  { animation-direction: reverse; }
.canal-card:nth-child(3)::after  { animation-duration: 18s; }

/* Stripes diagonales texture (theme) */
.canal-card-stripes {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 14px,
      color-mix(in srgb, var(--card-color) 7%, transparent) 14px,
      color-mix(in srgb, var(--card-color) 7%, transparent) 16px
    );
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
}

/* Halo glow flou derrière le logo (theme) */
.canal-card-halo {
  position: absolute;
  top: 50%;
  left: 28px;
  width: 80px;
  height: 80px;
  margin-top: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--card-color) 55%, transparent) 0%, transparent 65%);
  filter: blur(16px);
  opacity: 0.55;
  z-index: 0;
  animation: canalHalo 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* Themes par plateforme (couleurs accent, pas dominantes) */
.canal-tiktok      { --platform-color: #fe2c55; --platform-color-2: #25f4ee; }
.canal-instagram   { --platform-color: #e1306c; --platform-color-2: #f77737; }
.canal-facebook    { --platform-color: #1877f2; --platform-color-2: #42b7ff; }
.canal-google      { --platform-color: #ea4335; --platform-color-2: #fbbc05; }
.canal-tripadvisor { --platform-color: #00a680; --platform-color-2: #f5b819; }

/* Overrides spécifiques pour respecter l'identité brand sur la pastille logo */
.canal-tiktok .canal-card-head {
  background: radial-gradient(circle at 30% 25%, #2a2a2a 0%, #000 70%);
  color: #fff;
  box-shadow:
    0 4px 0 var(--shadow),
    inset 0 -3px 0 rgba(0,0,0,0.4),
    inset 0 2px 0 rgba(255,255,255,0.18),
    0 0 22px rgba(0, 0, 0, 0.35);
}
.canal-instagram .canal-card-head {
  background: linear-gradient(135deg, #feda77 0%, #f58529 25%, #dd2a7b 55%, #8134af 80%, #515bd4 100%);
  color: #fff;
  box-shadow:
    0 4px 0 var(--shadow),
    inset 0 -3px 0 rgba(0,0,0,0.18),
    inset 0 2px 0 rgba(255,255,255,0.35),
    0 0 22px color-mix(in srgb, #dd2a7b 35%, transparent);
}
.canal-google .canal-card-head {
  background: radial-gradient(circle at 30% 25%, #ffffff 0%, #f4f6fa 70%);
  color: var(--ink);
  box-shadow:
    0 4px 0 var(--shadow),
    inset 0 -3px 0 rgba(0,0,0,0.08),
    inset 0 2px 0 rgba(255,255,255,1),
    0 0 22px color-mix(in srgb, #4285F4 35%, transparent);
}
.canal-google .canal-card-head svg { filter: drop-shadow(0 1px 0 rgba(0,0,0,0.06)); }
.canal-facebook .canal-card-head {
  background: radial-gradient(circle at 30% 25%, #4f8ff7 0%, #1877f2 70%);
  color: #fff;
}

/* Logo card — pastille avec SVG brand au centre */
.canal-card-head {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, white 30%, var(--platform-color)) 0%, var(--platform-color) 70%);
  color: white;
  box-shadow:
    0 4px 0 var(--shadow),
    inset 0 -3px 0 rgba(0,0,0,0.12),
    inset 0 2px 0 rgba(255,255,255,0.35),
    0 0 24px color-mix(in srgb, var(--platform-color) 35%, transparent);
  z-index: 2;
  animation: canalHeadFloat 3.4s ease-in-out infinite;
}
.canal-card:nth-child(2) .canal-card-head { animation-delay: 0.4s; }
.canal-card:nth-child(3) .canal-card-head { animation-delay: 0.8s; }
.canal-card:nth-child(4) .canal-card-head { animation-delay: 1.2s; }

.canal-card-head svg {
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.18));
}
.canal-card-head.stars {
  background: radial-gradient(circle at 30% 25%, #ffe082 0%, #f5a623 70%);
  color: #5a3300;
  font-size: 0.62rem;
  letter-spacing: 0.5px;
  font-family: var(--font-sans);
  font-weight: 900;
}
.canal-card-head.emoji-head { font-size: 1.5rem; color: #fff; }

/* Body (titre + sous-texte) */
.canal-card-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  z-index: 2;
}
.canal-card-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1.1;
  text-align: left;
  background: linear-gradient(95deg, var(--card-color) 0%, color-mix(in srgb, var(--card-color) 50%, var(--card-color-2)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.canal-card-text {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.25;
  text-align: left;
  margin-top: 2px;
}

/* CTA "GO" — bouton chunky 3D à droite (theme), no swoosh */
.canal-card-arrow {
  position: relative;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 3px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(120% 130% at 30% 20%,
      color-mix(in srgb, white 35%, var(--card-color)) 0%,
      var(--card-color) 45%,
      color-mix(in srgb, var(--card-color) 60%, var(--card-color-2)) 100%);
  color: white;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 5px 0 var(--shadow),
    inset 0 -4px 0 rgba(0,0,0,0.18),
    inset 0 3px 0 rgba(255,255,255,0.4),
    0 0 18px color-mix(in srgb, var(--card-color) 45%, transparent);
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  --arrow-tilt: -4deg;
  transform: rotate(var(--arrow-tilt));
  transition:
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease;
  text-decoration: none;
}
.canal-card:nth-child(1) .canal-card-arrow { --arrow-tilt: -4deg; }
.canal-card:nth-child(2) .canal-card-arrow { --arrow-tilt: 4deg; }
.canal-card:nth-child(3) .canal-card-arrow { --arrow-tilt: -2deg; }
.canal-card:nth-child(4) .canal-card-arrow { --arrow-tilt: 2deg; }

/* Glyphe flèche/check à l'intérieur du bouton */
.canal-card-arrow-glyph {
  display: inline-block;
}

/* Hover sur le bouton seul : zoom doux et lent */
.canal-card-arrow:hover {
  transform: rotate(var(--arrow-tilt)) scale(1.1);
}
/* Click : enfoncement comme les autres .btn de l'app */
.canal-card-arrow:active {
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  transform: rotate(var(--arrow-tilt)) translateY(4px);
  box-shadow:
    0 1px 0 var(--shadow),
    inset 0 -2px 0 rgba(0,0,0,0.18),
    inset 0 2px 0 rgba(255,255,255,0.4),
    0 0 10px color-mix(in srgb, var(--card-color) 40%, transparent);
}

/* ── État VALIDÉ — carte teintée verte ── */
.canal-card.is-pending .canal-card-arrow {
  pointer-events: none;
  cursor: default;
}

.canal-card.is-validated {
  --card-color: #16a34a;
  --card-color-2: #4ade80;
  border-color: color-mix(in srgb, #16a34a 55%, var(--border));
}
/* Bouton validé : vert, ✓, plus cliquable, plus de hover/active */
.canal-card.is-validated .canal-card-arrow {
  pointer-events: none;
  cursor: default;
  transform: rotate(var(--arrow-tilt));
  background:
    radial-gradient(120% 130% at 30% 20%,
      #6ee7a3 0%,
      #16a34a 45%,
      #15803d 100%);
  color: white;
  font-size: 1.5rem;
  animation: canalValidPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 5px 0 var(--shadow),
    inset 0 -4px 0 rgba(0,0,0,0.22),
    inset 0 3px 0 rgba(255,255,255,0.45),
    0 0 24px color-mix(in srgb, #16a34a 70%, transparent);
}
.canal-card.is-validated .canal-card-arrow::before { display: none; }

/* Halo + stripes + dashed → tonalité verte */
.canal-card.is-validated .canal-card-halo {
  background: radial-gradient(circle, color-mix(in srgb, #16a34a 60%, transparent) 0%, transparent 65%);
}
.canal-card.is-validated .canal-card-stripes {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 14px,
      color-mix(in srgb, #16a34a 12%, transparent) 14px,
      color-mix(in srgb, #16a34a 12%, transparent) 16px
    );
  opacity: 0.85;
}
.canal-card.is-validated::after {
  border-color: color-mix(in srgb, #16a34a 50%, transparent);
}

/* Sparkles teintés */
.canal-card.is-validated .canal-card-spark { color: #16a34a; }
.canal-card.is-validated .canal-card-spark-2 { color: #4ade80; }

/* Titre tinté en vert pâle (mais lisible) */
.canal-card.is-validated .canal-card-title {
  background: linear-gradient(95deg, #15803d 0%, #16a34a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Sparkles décoratifs (theme) */
.canal-card-spark {
  position: absolute;
  pointer-events: none;
  font-size: 0.85rem;
  color: var(--card-color);
  text-shadow: 0 0 8px color-mix(in srgb, var(--card-color) 60%, transparent);
  animation: canalSparkPulse 2.4s ease-in-out infinite;
  z-index: 3;
}
.canal-card-spark-1 { top: 8px; right: 60px; }
.canal-card-spark-2 {
  bottom: 6px;
  left: 90px;
  font-size: 0.66rem;
  color: var(--card-color-2);
  animation-delay: 1.2s;
}

.canaux-empty {
  text-align: center;
  font-weight: 800;
  color: var(--muted);
  padding: 14px;
  border: 2px dashed color-mix(in srgb, var(--border) 30%, transparent);
  border-radius: var(--r-md);
}

/* ── Animations canal ── */
@keyframes canalCardIn {
  0%   { opacity: 0; transform: rotate(0) translateY(28px) scale(0.92); }
  60%  { opacity: 1; transform: rotate(calc(var(--card-tilt) * 1.5)) translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: rotate(var(--card-tilt)) translateY(0) scale(1); }
}
@keyframes canalCardShine {
  0%, 60%, 100% { background-position: 200% 0; }
  30%           { background-position: -120% 0; }
}
@keyframes canalHalo {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 0.85; transform: scale(1.18); }
}
@keyframes canalHeadFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-2px) rotate(-3deg); }
}
@keyframes canalDashSpin {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.95; }
}
@keyframes canalSparkPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.7) rotate(0); }
  50%      { opacity: 1;   transform: scale(1.4) rotate(180deg); }
}
@keyframes canalValidPop {
  0%   { transform: rotate(0deg) scale(0.6); }
  60%  { transform: rotate(0deg) scale(1.18); }
  100% { transform: rotate(0deg) scale(1); }
}

/* ── Consent row PREMIUM — carte cliquable avec checkbox custom ── */
.consent-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  padding: 14px 18px 14px 16px;
  border: 2.5px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(140% 180% at 0% 0%, color-mix(in srgb, var(--accent) 40%, transparent) 0%, transparent 55%),
    radial-gradient(140% 180% at 100% 100%, color-mix(in srgb, var(--primary) 16%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 100%);
  box-shadow:
    0 6px 0 var(--shadow),
    0 16px 30px -16px color-mix(in srgb, var(--primary) 35%, transparent);
  cursor: pointer;
  isolation: isolate;
  overflow: visible;
  transform: rotate(-0.8deg);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s ease;
  user-select: none;
}
.consent-row::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  background-size: 220% 100%;
  background-position: 200% 0;
  animation: consentShine 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
  opacity: 0.55;
}
.consent-row:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow:
    0 8px 0 var(--shadow),
    0 22px 40px -16px color-mix(in srgb, var(--primary) 50%, transparent);
}
.consent-row:active { transform: rotate(0deg) translateY(2px); box-shadow: 0 3px 0 var(--shadow); }

/* Cacher la checkbox native */
.consent-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}

/* Checkbox custom : carré avec ✓ qui apparaît */
.consent-box {
  position: relative;
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  box-shadow:
    0 3px 0 var(--shadow),
    inset 0 -2px 0 rgba(0,0,0,0.05),
    inset 0 2px 0 rgba(255,255,255,0.7);
  transition: background 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  z-index: 2;
}
.consent-check {
  width: 22px; height: 22px;
  color: var(--primary-ink);
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
  transform: scale(0.6);
  transform-origin: center;
}

.consent-row .consent-text {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
}
.consent-text-line {
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
/* Sparkles décoratifs autour de la card */
.consent-spark {
  position: absolute;
  pointer-events: none;
  font-size: 0.78rem;
  color: var(--primary);
  text-shadow: 0 0 6px color-mix(in srgb, var(--primary) 50%, transparent);
  opacity: 0;
  z-index: 3;
  transition: opacity 0.35s ease;
}
.consent-spark-1 { top: -6px; right: 16px; }
.consent-spark-2 {
  bottom: -4px; left: 60px;
  color: var(--accent);
  font-size: 0.66rem;
}

/* ── État CHECKED — glow primaire + ✓ qui se dessine ── */
.consent-row:has(input:checked) {
  background:
    radial-gradient(140% 200% at 0% 0%, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 55%),
    radial-gradient(140% 200% at 100% 100%, color-mix(in srgb, var(--accent) 50%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 100%);
}
.consent-row:has(input:checked) .consent-box {
  background: var(--primary);
  transform: scale(1.06) rotate(-4deg);
  box-shadow:
    0 3px 0 var(--shadow),
    0 0 0 6px color-mix(in srgb, var(--primary) 22%, transparent);
  animation: consentBoxPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.consent-row:has(input:checked) .consent-check {
  stroke-dashoffset: 0;
  transform: scale(1);
}
.consent-row:has(input:checked) .consent-spark {
  opacity: 1;
  animation: consentSparkBurst 1.4s ease-in-out infinite;
}
.consent-row:has(input:checked) .consent-spark-2 { animation-delay: 0.5s; }

/* Focus visible accessibilité */
.consent-row input[type="checkbox"]:focus-visible + .consent-box {
  box-shadow:
    0 3px 0 var(--shadow),
    0 0 0 4px var(--focus-ring);
}

/* ── Animations consent ── */
@keyframes consentShine {
  0%, 60%, 100% { background-position: 200% 0; }
  30%           { background-position: -120% 0; }
}
@keyframes consentBoxPop {
  0%   { transform: scale(0.8) rotate(0); }
  60%  { transform: scale(1.18) rotate(-8deg); }
  100% { transform: scale(1.06) rotate(-4deg); }
}
@keyframes consentSparkBurst {
  0%, 100% { opacity: 0.4; transform: scale(0.7) rotate(0); }
  50%      { opacity: 1;   transform: scale(1.4) rotate(180deg); }
}

/* ══════════════════════════════════════════════════════════════════
   STEP 4 — THE WHEEL  ✦  half-wheel layout, flat design
   States  : idle → is-tense → is-spinning → has-stopped (→ win-pop)
   ══════════════════════════════════════════════════════════════════ */

.wheel canvas { display: block; width: 100% !important; height: 100% !important; }

#step-wheel.is-active,
#step-wheel.is-leaving {
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
}

.wheel-arena {
  --half-r: clamp(180px, 46vh, 340px);
  position: relative;
  width: var(--half-r);
  height: calc(var(--half-r) * 2);
  margin: 3vh 0 0 -18px;
  overflow: visible;
  flex-shrink: 0;
}

.wheel-arena .wheel-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0 999px 999px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%);
          mask-image: linear-gradient(to right, transparent 0%, black 22%);
  background: none;
  z-index: 1;
}

.wheel-arena .wheel {
  position: absolute;
  top: 0;
  left: calc(var(--half-r) * -1);
  width: calc(var(--half-r) * 2);
  height: calc(var(--half-r) * 2);
  margin: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border: none;
  background: transparent;
  z-index: 2;
}

/* Center logo — full circle at the wheel center (cut edge), rotates with the wheel */
.wheel-arena .wheel-center-logo {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(var(--half-r) * 0.4);
  height: calc(var(--half-r) * 0.4);
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  border-radius: 50%;
  background: #fff;
  border: clamp(3px, calc(var(--half-r) * 0.022), 7px) solid var(--primary);
  z-index: 10;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wheel-arena .wheel-center-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Outer primary ring — follows the curve, no border on cut edge */
.wheel-arena::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0 999px 999px 0;
  border: 20px solid var(--primary);
  border-left: 0;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 11;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%);
          mask-image: linear-gradient(to right, transparent 0%, black 22%);
}

/* Minimal theme : the soft fade at the cut edge looks ghostly with dark slices.
   Use a sharp cut instead. */
body[data-theme="minimal"] .wheel-arena .wheel-stage,
body[data-theme="minimal"] .wheel-arena::after {
  -webkit-mask-image: none;
          mask-image: none;
}

/* Pointer — 3 o'clock (right edge of half-wheel) */
.wheel-arena .wheel-pointer {
  position: absolute;
  top: 50%;
  right: 2px;
  width: 54px;
  height: 34px;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: right center;
  z-index: 12;
  pointer-events: none;
  animation: halfPointerIdle 2.4s ease-in-out infinite;
}

.wheel-arena .wheel-pointer-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wheel-arena .wheel-pointer-body {
  fill: url(#wheel-pointer-fill);
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.wheel-arena .wheel-pointer-stop-top { stop-color: color-mix(in srgb, var(--primary) 40%, white); }
.wheel-arena .wheel-pointer-stop-mid { stop-color: var(--primary); }
.wheel-arena .wheel-pointer-stop-bot { stop-color: color-mix(in srgb, var(--primary) 75%, var(--ink)); }

.wheel-arena .wheel-pointer-shine {
  fill: url(#wheel-pointer-shine);
  pointer-events: none;
}
.wheel-arena .wheel-pointer-jewel-shine {
  fill: rgba(255,255,255,0.55);
  pointer-events: none;
}
.wheel-arena .wheel-pointer-jewel {
  fill: var(--accent);
  stroke: var(--ink);
  stroke-width: 1.4;
}

@keyframes halfPointerIdle {
  0%, 100% { transform: translateY(-50%) rotate(0deg); }
  50%      { transform: translateY(-50%) rotate(-5deg); }
}

.wheel-arena.is-spinning .wheel-pointer {
  animation: none;
  transform: translateY(-50%) rotate(0deg);
}
.wheel-arena .wheel-pointer.kick {
  animation: halfPointerKick 0.13s cubic-bezier(0.4, 0, 0.7, 1) both;
}
@keyframes halfPointerKick {
  0%   { transform: translateY(-50%) rotate(0deg); }
  35%  { transform: translateY(-50%) rotate(-14deg); }
  100% { transform: translateY(-50%) rotate(0deg); }
}

.wheel-arena.has-stopped .wheel-pointer {
  animation: halfPointerWin 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes halfPointerWin {
  0%   { transform: translateY(-50%) rotate(0deg); }
  35%  { transform: translateY(-50%) rotate(-12deg); }
  60%  { transform: translateY(-50%) rotate(7deg); }
  100% { transform: translateY(-50%) rotate(0deg); }
}

/* Win pop — siblings of the canvas zoom, never the canvas itself */
.wheel-arena.win-pop::after {
  animation: wheelFrameZoom 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wheel-arena.win-pop .wheel-center-logo {
  animation: wheelLogoZoom 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wheelFrameZoom {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes wheelLogoZoom {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--logo-rot, 0deg)) scale(1); }
  50%      { transform: translate(-50%, -50%) rotate(var(--logo-rot, 0deg)) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .wheel-arena .wheel-pointer,
  .wheel-arena .wheel-pointer.kick,
  .wheel-arena.has-stopped .wheel-pointer,
  .wheel-arena.win-pop::after,
  .wheel-arena.win-pop .wheel-center-logo {
    animation: none !important;
  }
}

/* =====================================================================
   LAYOUT FIX  ✦  aligné sur l'app fidélité.
   ===================================================================== */

/* ── Cage principale : la page fait pile la hauteur visible ── */
html, body {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
body { min-height: 0; }

.app {
  height: 100dvh;
  min-height: 0;
}

/* ── Header + footer : ne bougent jamais ── */
.topbar  { flex: 0 0 auto; }
.powered {
  flex: 0 0 auto;
  margin-top: clamp(4px, 1.2vh, 14px);
}

/* ── Stage : prend tout l'espace restant entre topbar et powered.
       Étendue horizontalement jusqu'au border-box du .app (via margin
       négatif) pour que la half-wheel — qui sort du padding du screen
       via son propre margin-left: -18px — ne soit pas clippée. ── */
.stage {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  margin-left: -18px;
  margin-right: -18px;
}

/* ── Screens : empilés en absolute comme fidélité ── */
.screen { display: none; }
.screen.is-active,
.screen.is-leaving,
.step.is-active,
.step.is-leaving {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding-left: 18px;
  padding-right: 18px;
  /* Padding vertical = respiration pour que les hard-shadows
     (box-shadow: 0 6px 0 ...) ne soient pas coupées par overflow:hidden */
  padding-top: clamp(4px, 0.8vh, 10px);
  padding-bottom: clamp(10px, 1.6vh, 16px);
  overflow: hidden;
}

/* ── Step quete : layout fixé (titre haut / cards milieu scrollables / bouton bas) ── */
#step-quete.is-active,
#step-quete.is-leaving {
  justify-content: flex-start;
}
#step-quete #canaux-cards {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  align-content: flex-start;
  padding: 6px 2px 4px;
}
#step-quete .actions {
  margin-top: auto;
  flex-shrink: 0;
  padding-top: clamp(8px, 1.6vh, 16px);
}

/* ── Tailles fluides : calquées sur fidélité ── */
.mascot {
  width: clamp(56px, min(13vh, 28vw), 112px);
  height: clamp(56px, min(13vh, 28vw), 112px);
  margin: clamp(2px, 0.4vh, 4px) auto clamp(8px, 1.8vh, 22px);
}
.mascot-xl {
  width: clamp(68px, min(16vh, 34vw), 140px);
  height: clamp(68px, min(16vh, 34vw), 140px);
}
.mascot-emoji        { font-size: clamp(1.5rem, min(5.2vh, 11vw), 3.2rem); }
.mascot-xl .mascot-emoji { font-size: clamp(1.9rem, min(6.6vh, 14vw), 4rem); }

/* Bulles emoji secondaires : restent CIRCULAIRES / carrées (width = height) */
.brand-chip-logo {
  width: clamp(32px, min(5.6vh, 11vw), 46px);
  height: clamp(32px, min(5.6vh, 11vw), 46px);
  font-size: clamp(0.85rem, min(1.8vh, 3.6vw), 1.3rem);
}
.how-card-emoji {
  width: clamp(34px, min(6.5vh, 13vw), 50px);
  height: clamp(34px, min(6.5vh, 13vw), 50px);
}
.how-card-emoji-glyph {
  font-size: clamp(0.95rem, min(2.2vh, 4.4vw), 1.55rem);
}

.kicker {
  /* Multiplicateurs vh volontairement bas : le kicker garde sa taille
     jusqu'à ce que la hauteur soit vraiment contrainte. La mascotte
     (au-dessus) se rétrécit en premier, le kicker ne suit qu'à
     très basse hauteur. */
  margin: 0 auto clamp(6px, 0.6vh, 16px);
  padding: clamp(5px, 0.5vh, 10px) clamp(16px, 4vw, 24px);
  font-size: clamp(0.62rem, 3vh, 0.72rem);
}

.hero { margin-bottom: clamp(8px, 2.2vh, 24px); }
.hero-title {
  margin: clamp(6px, 1.2vh, 16px) 0 clamp(4px, 0.9vh, 8px);
  font-size: clamp(1.6rem, 5vh, 3rem);
}
.screen[data-screen="intro"] .hero-title {
  white-space: nowrap;
  font-size: clamp(2rem, 8vw, 2.75rem);
}
.hero-sub { font-size: clamp(0.85rem, 1.7vh, 1rem); }

.step-title {
  margin: clamp(4px, 1vh, 16px) 0 clamp(6px, 1.4vh, 16px);
  font-size: clamp(1.4rem, min(4.4vh, 8.5vw), 2.4rem);
}
.success-title { font-size: clamp(1.4rem, 4.4vh, 2.4rem); }

.fields {
  gap: clamp(8px, 1.4vh, 14px);
  margin-bottom: clamp(8px, 1.4vh, 14px);
}
.actions {
  margin-top: clamp(6px, 1.4vh, 18px);
  grid-template-columns: var(--ctrl-h) 1fr;
}

/* ── Contrôles fluides : compressent en HAUTEUR sur écran court ──
   Avant : .btn (58px), .btn-ghost (58px) et .field-input (62px) étaient
   figés en px → sur petit écran le bouton « Continuer » passait sous le
   pli et était coupé (overflow:hidden). Désormais ils rétrécissent avec
   la hauteur dispo. La police d'input reste ≥16px (anti zoom iOS). */
:root { --ctrl-h: clamp(46px, 7.4vh, 58px); }
.btn {
  min-height: var(--ctrl-h);
  font-size: clamp(0.92rem, 1.9vh, 1.02rem);
  padding: 0 clamp(14px, 4vw, 22px);
}
.btn-ghost {
  width: var(--ctrl-h);
  min-width: var(--ctrl-h);
  font-size: clamp(1.05rem, 2.6vh, 1.25rem);
}
.field-input {
  min-height: clamp(48px, 8vh, 62px);
  padding-top: clamp(15px, 2.4vh, 22px);
  padding-bottom: clamp(6px, 1.2vh, 10px);
}

.consent-row {
  margin: clamp(8px, 1.4vh, 18px) 0;
  padding: clamp(10px, 1.4vh, 14px) clamp(14px, 4vw, 18px);
}
.consent-text-line {
  font-size: clamp(0.95rem, min(2vh, 4vw), 1.1rem);
}

/* How-cards (intro) : mêmes proportions que fidélité, sans compression agressive */
.how-cards {
  gap: clamp(12px, 2vh, 18px);
  margin: 0 0 clamp(14px, 2.4vh, 22px);
}
.how-card {
  padding: clamp(11px, 1.8vh, 13px) clamp(14px, 3.6vw, 16px) clamp(11px, 1.8vh, 13px) clamp(12px, 3.4vw, 14px);
  gap: clamp(10px, 2.4vw, 13px);
}

/* Canal cards (variable count : 1 à 5) */
.canal-cards { gap: clamp(8px, 1.4vh, 14px); }

/* Roue : scale avec hauteur ET largeur.
   La demi-roue a une hauteur de 2×half-r ; il faut donc qu'elle tienne
   ENTRE la topbar et le footer (≈ stage = 100dvh - ~150px). On borne
   half-r par (50dvh - offset) pour la hauteur ET par 92vw pour la largeur,
   afin qu'elle ne soit JAMAIS coupée, quelle que soit la taille d'écran. */
.wheel-arena {
  --half-r: clamp(120px, min(calc(50dvh - 78px), 92vw), 340px);
}

/* Sous-titres sous step-title : fluides + muted */
.step-sub {
  font-size: clamp(0.78rem, min(1.6vh, 3.2vw), 0.94rem);
  margin: 0 auto clamp(8px, 1.4vh, 16px);
  padding: 0 4px;
  text-align: center;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.4;
  max-width: 360px;
}

/* QR du coupon final — tout le ticket rétrécit en hauteur sur écran court
   pour que le code + les conditions ne soient jamais coupés. */
.qr-ticket-wrap { margin: clamp(6px, 1.2vh, 18px) 0; }
.qr-card {
  margin-top: clamp(6px, 1.4vh, 14px);
  padding: clamp(14px, 2.2vh, 22px) clamp(14px, 4vw, 20px) clamp(12px, 1.8vh, 20px);
}
.qr-wrap {
  width: clamp(120px, 26vh, 240px);
  height: clamp(120px, 26vh, 240px);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(8px, 1.4vh, 14px);
}
.qr-line { margin-bottom: clamp(6px, 1.2vh, 14px); }
.qr-conditions { margin-top: clamp(8px, 1.4vh, 16px); padding-top: clamp(8px, 1.2vh, 12px); }
.qr-expire {
  font-size: clamp(0.6rem, 1.3vh, 0.7rem);
  padding: clamp(5px, 1vh, 7px) clamp(12px, 3vw, 18px);
}
.success-sub { margin-bottom: clamp(4px, 1vh, 6px); }

/* =====================================================================
   FLUIDITÉ — passe 2 (audit adversarial)
   Conversion des derniers px figés en clamp(). Chaque PLAFOND = la valeur
   px d'origine → ZÉRO changement à pleine hauteur (390×844). Cibles
   tactiles bornées à ≥44px. Police d'input jamais touchée (≥16px iOS).
   ===================================================================== */

/* Topbar : présente sur TOUS les écrans → la place gagnée profite partout. */
.topbar { padding-bottom: clamp(6px, 1.4vh, 12px); }
.progress { min-width: clamp(72px, 24vw, 92px); }
.progress-track { height: clamp(8px, 1.4vh, 10px); }
.brand-chip-name { font-size: clamp(0.95rem, 3.4vw, 1.1rem); }

/* Ticket QR du résultat : seul clip VÉRIFIÉ (conditions coupées à 360×520). */
.qr-ticket-wrap .qr-card { padding-top: clamp(20px, 4vh, 30px); }
.qr-wrap { padding: clamp(10px, 2vh, 16px); }
.qr-line { font-size: clamp(0.68rem, 1.5vh, 0.78rem); }
.qr-line-code { font-size: clamp(0.78rem, 1.6vh, 0.88rem); }
.qr-conditions { font-size: clamp(0.58rem, 1.4vh, 0.66rem); }

/* Cartes canal (quête) : sur 320px le logo 56px + le bouton GO 50px
   écrasent le titre. On garde les cibles tactiles ≥44px. */
.canal-card { grid-template-columns: clamp(44px, 14vw, 56px) 1fr auto; }
.canal-card-head { width: clamp(44px, 14vw, 56px); height: clamp(44px, 14vw, 56px); }
.canal-card-arrow {
  width: clamp(44px, 12vw, 50px);
  height: clamp(44px, 12vw, 50px);
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
}
.canal-card-title { font-size: clamp(0.95rem, 3.6vw, 1.15rem); }

/* Divers : checkbox consentement + slots d'erreur réservés (place gagnée court). */
.consent-box { width: clamp(26px, 6vw, 30px); height: clamp(26px, 6vw, 30px); }
.field-error { min-height: clamp(16px, 3vh, 22px); }
#quete-error,
#quete-error:empty { min-height: clamp(16px, 3vh, 22px); }

/* ── Boot loader + Error : même logique que .app ──
       • la page fait pile 100dvh, jamais de scroll
       • le contenu se centre verticalement dans la zone dispo
       • le footer Crème Studio est pinné en bas, ne bouge jamais
       • la mascotte / titre / sub se réduisent sur petit écran ── */
.boot-loader,
.screen-error {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  padding-top: clamp(16px, calc(var(--safe-top) + 4vh), calc(var(--safe-top) + 80px));
  padding-bottom: calc(var(--safe-bottom) + 10px);
  justify-content: stretch;
}

.boot-loader-inner,
.screen-error-inner {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  margin: 0;
  max-width: 440px;
  /* Padding vertical = respiration pour les hard-shadows
     (mascotte, kicker, bouton retry) — pareil que pour .screen */
  padding-top: clamp(4px, 0.8vh, 10px);
  padding-bottom: clamp(10px, 1.6vh, 16px);
}

/* Boot/error : tailles fluides sur le titre + sub (clamps déjà gérés pour la mascotte via .mascot-xl) */
.boot-loader .error-title,
.screen-error .error-title {
  font-size: clamp(1.4rem, 4.4vh, 2.1rem);
}
.boot-loader .error-sub,
.screen-error .error-sub {
  font-size: clamp(0.82rem, 1.7vh, 1rem);
  margin-bottom: clamp(10px, 1.8vh, 22px);
}
.boot-loader .kicker,
.screen-error .kicker {
  margin-bottom: clamp(8px, 1.6vh, 18px);
}
.boot-loader .dots-loader,
.screen-error .dots-loader {
  margin-top: clamp(8px, 1.6vh, 20px);
}

/* ── Écrans courts : on reste proche de fidélité, compression douce uniquement ── */
@media (max-height: 720px) {
  .how-card { transform: none; }
}

@media (max-height: 620px) {
  .how-card-sub { font-size: 0.72rem; }
}

@media (max-height: 540px) {
  .mascot { width: 56px; height: 56px; margin-bottom: 6px; }
  .mascot-xl { width: 68px; height: 68px; }
  .mascot-emoji { font-size: 1.6rem; }
  .mascot-xl .mascot-emoji { font-size: 2rem; }
  .kicker { padding: 4px 14px; font-size: 0.58rem; margin-bottom: 4px; }
  .hero-title, .step-title, .success-title { font-size: 1.3rem !important; margin: 4px 0; }
  .screen[data-screen="intro"] .hero-title { font-size: 1.3rem !important; }
  .hero { margin-bottom: 6px; }
  .hero-sub { font-size: 0.78rem; }
  .how-cards { gap: 6px; margin-bottom: 6px; }
  .how-card { padding: 6px 10px; }
  .how-card-emoji { width: 34px; height: 34px; }
  .how-card-emoji-glyph { font-size: 1.05rem; }
  .how-card-num { width: 22px; height: 22px; font-size: 0.76rem; }
  .fields { gap: 6px; margin-bottom: 6px; }
  /* roue + QR : gérés globalement par les clamps height-aware ci-dessus */
}

/* Mascottes : on les masque quand la hauteur manque, écran par écran, pour
   libérer la place des champs/boutons (sinon « Continuer » passe sous le pli). */
@media (max-height: 800px) {
  .screen[data-screen="intro"] .mascot { display: none; }
}
@media (max-height: 900px) {
  .screen[data-screen="result"] .mascot { display: none; }
}
@media (max-height: 560px) {
  .screen[data-screen="contact1"] .mascot,
  .screen[data-screen="contact2"] .mascot,
  .screen[data-screen="contact3"] .mascot { display: none; }
}

/* Filet de sécurité : sur écran extrêmement court, si un écran de formulaire
   dépasse malgré la compression fluide, on le rend défilable plutôt que de
   couper le bouton. Les écrans qui tiennent restent centrés (pas de scroll). */
.screen[data-screen="contact1"].is-active,
.screen[data-screen="contact2"].is-active,
.screen[data-screen="contact3"].is-active,
.screen[data-screen="result"].is-active {
  overflow-y: auto;
  overflow-x: hidden;
}