/* ============================================================
   Katakana Rocks! — Page de vente (PDV2)
   Charte : rouge brand #b82c2c, navy #0e1424, néon pink #ff2d75,
   néon blue #4cc9f0, gold #ffcb47.
   Typographies :
     - Zen Kaku Gothic Antique : typo de l'app, tout le reste (UI/JP/body).
   (Pixelify et Jersey ne sont utilisées que dans les mini-jeux du jeu,
    elles ne doivent pas apparaître ici.)
   ============================================================ */

/* ---------- Accessibility helpers ---------- */
.skip-link {
  position: absolute; top: -100px; left: 12px;
  padding: 10px 16px;
  background: #ffcb47; color: #0e1424;
  font-weight: 700; text-decoration: none;
  border-radius: 8px;
  z-index: 9999;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; outline: 3px solid #fff; outline-offset: 2px; }

:focus-visible {
  outline: 3px solid #4cc9f0;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- About section ---------- */
.about__inner { max-width: 820px; margin: 0 auto; }
.about__lead { font-size: 1.1rem; }
.about p { line-height: 1.7; margin: 0 0 1em; }
.about a { color: #4cc9f0; text-decoration: underline; }
.about strong { color: #ffcb47; font-weight: 700; }

/* ---------- Pricing emphasis ---------- */
[data-price] { font-weight: 800; color: #ffcb47; white-space: nowrap;}
.cta-final__price {
  margin-top: 1.2rem;
  display: inline-block;
  padding: .55rem 1rem;
  border: 1px solid rgba(255, 203, 71, .55);
  border-radius: 999px;
  background: rgba(255, 203, 71, .08);
  font-weight: 600;
  letter-spacing: .01em;
}
.cta-final__price [data-price] { font-size: 1.05em; }

:root {
  --brand: #b82c2c;
  --brand-deep: #7a1818;
  --navy: #0e1424;
  --navy-2: #161e36;
  --navy-3: #1f2a48;
  --ink: #f5f1e8;
  --ink-soft: #c9c2b6;
  --pink: #ff2d75;
  --blue: #4cc9f0;
  --gold: #ffcb47;
  --green: #53c278;
  --tier-common: #c9c2b6;
  --tier-rare: #4cc9f0;
  --tier-epic: #ffcb47;
  --radius: 18px;
  --maxw: 1180px;
  --shadow-lg: 0 30px 80px -20px rgba(0,0,0,0.7);
  --grad-pink: linear-gradient(135deg, #ff2d75 0%, #b82c2c 100%);
  --font-display: 'Zen Kaku Gothic Antique', sans-serif;
  --font-body: 'Zen Kaku Gothic Antique', system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--navy);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.6;
  position: relative;
  min-height: 100vh;
}

/* Confinement : chaque section coupe ses décoratifs absolus (polaroïds,
   glows, kana rain, marquee) sans créer de scroll horizontal global.
   `overflow: clip` (au lieu de `hidden`) évite de générer un contexte de
   défilement parasite tout en bloquant les débordements. */
.section, .hero, .footer { overflow: clip; }

/* Sécurité contre les longs mots et titres géants en étroit. */
h1, h2, h3, .hero__title, .section__title { overflow-wrap: anywhere; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Background ---------- */
.bg-pattern {
  position: fixed; inset: 0; z-index: -3;
  background-color: var(--navy);
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='25' height='13' patternTransform='scale(3) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M25.044 22.25c0 6.904-5.596 12.5-12.5 12.5s-12.5-5.596-12.5-12.5 5.596-12.5 12.5-12.5c5.786 0 10.655 3.932 12.079 9.27.274 1.03.421 2.113.421 3.23m0-9a2.5 2.5 0 00-2.363 1.688 12.5 12.5 0 011.672 3.212v.002a2.5 2.5 0 10.69-4.902zm-.037-5a7.5 7.5 0 00-6.125 3.227 12.5 12.5 0 016.121 11.773h.04a7.5 7.5 0 10-.036-15zm.023-5a12.5 12.5 0 00-10.998 6.588c.097.012.193.025.29.039h.005c.097.014.194.029.29.045h.003c.194.033.388.07.58.113h.004a12.5 12.5 0 011.123.3l.02.007.006.002a12.496 12.496 0 011.077.403l.032.01.033.016c.166.07.33.145.492.223l.016.008.004.002c.176.086.35.177.523.271l.006.002c.085.047.17.094.254.143l.004.002c.085.049.169.099.252.15l.004.002c.083.051.166.103.248.156l.004.002c.082.052.163.106.244.16l.004.002.24.168.004.002c.899.618 1.672 1.418 2.385 2.219l.004.004c.125.151.246.306.363.463l.004.004c.058.078.116.157.172.236l.004.004c.056.08.112.16.166.24l.002.004c.577.817.987 1.72 1.359 2.633l.002.004c.034.091.066.183.098.275l.002.004c.032.092.062.185.092.278l.002.003c.03.094.058.188.086.282l.002.004c.027.093.053.186.078.28l.002.005c.025.095.05.19.072.285l.002.004c.023.095.046.19.067.285.136.57.19 1.141.25 1.713l.003.05.002.04c.013.178.022.356.028.535v.023c.003.098.004.195.004.293v.014a12.5 12.5 0 01-.127 1.777c-.184 1.281-.582 2.34-1.002 3.412a12.505 12.505 0 01-.36.723c.494.059.99.088 1.488.088 6.904 0 12.5-5.596 12.5-12.5s-5.596-12.5-12.5-12.5zm-24.986 10a2.5 2.5 0 10.691 4.902 12.5 12.5 0 011.672-3.214A2.5 2.5 0 00.044 13.25zm-.037-5a7.5 7.5 0 10.078 15 12.5 12.5 0 016.121-11.773A7.5 7.5 0 00.007 8.25zm-.065-5c-6.898.008-12.486 5.602-12.486 12.5 0 6.904 5.596 12.5 12.5 12.5.525 0 1.05-.034 1.57-.1a12.5 12.5 0 019.448-18.3A12.5 12.5 0 00-.044 3.25zm12.602 3.5a2.5 2.5 0 00-2.39 1.773c.3.425.575.868.82 1.327a12.5 12.5 0 013.058-.012 12.5 12.5 0 01.875-1.399 2.5 2.5 0 00-2.363-1.689zm-1.57 3.1a12.5 12.5 0 013.058-.012M12.507 1.75a7.5 7.5 0 00-6.15 3.266 12.5 12.5 0 014.617 4.834 12.5 12.5 0 013.058-.012 12.5 12.5 0 014.676-4.861 7.5 7.5 0 00-6.201-3.227zm5.226 9.129a12.47 12.47 0 010 0zM10.974 9.85a12.5 12.5 0 013.058-.012m3.702 1.041a12.493 12.493 0 01-.001 0zM12.53-3.25a12.5 12.5 0 00-11.004 6.6 12.5 12.5 0 019.448 6.5 12.5 12.5 0 013.058-.012 12.5 12.5 0 019.526-6.498 12.5 12.5 0 00-11.014-6.59zm5.203 14.129a12.47 12.47 0 010 0zM25.043.25a2.5 2.5 0 00-2.362 1.688c.323.447.616.915.877 1.4a12.5 12.5 0 011.472-.088h.014a12.5 12.5 0 012.389.23 2.5 2.5 0 00-2.39-3.23zm-.036-5a7.5 7.5 0 00-6.125 3.227 12.5 12.5 0 014.676 4.86 12.5 12.5 0 011.472-.087h.014c2.5 0 4.944.75 7.014 2.152A7.5 7.5 0 0025.007-4.75zm-1.449 8.088a12.5 12.5 0 011.472-.088h.014m-.014-13a12.5 12.5 0 00-10.998 6.59 12.5 12.5 0 019.526 6.498 12.5 12.5 0 011.472-.088h.014a12.5 12.5 0 0110.678 6 12.5 12.5 0 001.822-6.5c0-6.904-5.596-12.5-12.5-12.5zM14.69 8.75a12.529 12.529 0 000 0zm3.043 2.129a12.47 12.47 0 010 0zM.043.25a2.5 2.5 0 00-2.394 3.217A12.5 12.5 0 01-.058 3.25h.014c.525 0 1.05.034 1.57.1a12.5 12.5 0 01.881-1.41A2.5 2.5 0 00.044.25zm-.036-5A7.5 7.5 0 00-6.987 5.355 12.5 12.5 0 01-.057 3.25h.013c.525 0 1.05.034 1.57.1a12.5 12.5 0 014.682-4.873A7.5 7.5 0 00.007-4.75zm.023-5c-6.898.008-12.486 5.602-12.486 12.5a12.5 12.5 0 001.78 6.428A12.5 12.5 0 01-.059 3.25h.014c.525 0 1.05.034 1.57.1a12.5 12.5 0 019.532-6.51A12.5 12.5 0 00.044-9.75zM9.722 7.951a12.497 12.497 0 010 0z'  stroke-width='0.5' stroke='rgba(255,255,255,0.02)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}
.bg-glow {
  position: fixed; z-index: -2; pointer-events: none;
  width: 60vw; height: 60vw;
  border-radius: 50%; filter: blur(120px); opacity: 0.45;
}
.bg-glow--pink { background: var(--pink); top: -15vw; right: -15vw; }
.bg-glow--blue { background: var(--blue); top: 50vh; left: -20vw; opacity: 0.25; }

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: rgba(14, 20, 36, 0.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav__brand img { height: 44px; }
.nav__links { display: flex; gap: 28px; }
.nav__links a {
  font-family: var(--font-body);
  font-weight: 700; letter-spacing: 0.02em; font-size: 0.95rem;
  opacity: 0.85; transition: opacity 0.2s, color 0.2s;
}
.nav__links a:hover { opacity: 1; color: var(--gold); }
.nav__actions { display: flex; align-items: center; gap: 14px; }

.lang-switch {
  background: transparent; border: 1px solid rgba(255,255,255,0.2);
  color: var(--ink); padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
  cursor: pointer; display: flex; gap: 6px; align-items: center;
}
.lang-switch a, .lang-switch span { opacity: 0.45; transition: opacity 0.2s, color 0.2s; text-decoration: none; color: inherit; }
.lang-switch a:hover { opacity: 0.85; }
.lang-switch a.active, .lang-switch span.active { opacity: 1; color: var(--gold); }
.lang-switch .lang-sep { opacity: 0.3; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem; letter-spacing: 0.02em;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;
}
.btn--ghost {
  border: 2px solid var(--brand);
  background: var(--brand);
  color: white;
  box-shadow: 0 6px 24px -8px var(--brand);
}
.btn--ghost:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px var(--brand); }

.btn--demo {
  border: 2px solid var(--gold);
  background: var(--gold);
  color: #1a1024;
  text-decoration: none;
  box-shadow: 0 6px 24px -8px var(--gold);
  animation: demo-pulse 2.4s ease-in-out infinite;
}
.btn--demo:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px var(--gold); animation: none; }
@keyframes demo-pulse {
  0%, 100% { box-shadow: 0 6px 24px -8px var(--gold); }
  50% { box-shadow: 0 6px 32px -4px var(--gold); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--demo { animation: none; }
}
.hero__demo { margin: -14px 0 28px; }
.cta-final__demo { margin-top: 18px; font-size: 0.95rem; }
.cta-final__demo a { color: var(--gold); text-decoration: underline; }

/* ---------- DEMO SECTION ---------- */
.demo__inner { text-align: center; max-width: 720px; }
.demo__inner .section__title { justify-content: center; align-items: center; }
.demo__p { margin: 18px auto 0; max-width: 560px; color: var(--ink-soft, rgba(255,255,255,0.75)); }
.demo__cta { margin: 28px 0 0; }
.btn--demo-big { font-size: 1.05rem; padding: 14px 32px; }
.demo__note { margin: 16px auto 0; font-size: 0.85rem; opacity: 0.65; max-width: 480px; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - 72px);
  padding: 60px 28px 80px;
  overflow: hidden;
}

/* Decorative kana drifting upward in the hero background.
   Subtle, low opacity, never crosses the copy column thanks to z-index.
   No auto-animation : la position est pilotée par le scroll (parallax,
   voir script.js). Les spans les plus flous (donc lointains) montent
   moins vite que les plus nets, ce qui crée une profondeur. */
.hero__kana-rain {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 78%, transparent 100%);
}
.hero__kana-rain span {
  position: absolute;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink);
  opacity: var(--maxop, 0.18);
  user-select: none;
  text-shadow: 0 0 12px currentColor;
  filter: blur(var(--blur, 0px));
  /* `--ty` est mis à jour par le JS sur scroll. */
  transform: translate3d(0, var(--ty, 0px), 0) rotate(var(--rot, 0deg));
  will-change: transform;
}
.hero__kana-rain span.is-pink { color: var(--pink); }
.hero__kana-rain span.is-blue { color: var(--blue); }
.hero__kana-rain span.is-gold { color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .hero__kana-rain span { transform: none; }
}
.hero__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero__copy { position: relative; z-index: 2; }

.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,45,117,0.12);
  border: 1px solid rgba(255,45,117,0.4);
  color: #ffd6e4;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.kicker__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--pink);
  box-shadow: 0 0 12px var(--pink);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.4); opacity: 0.7; } }

.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: 1;
  letter-spacing: 0.005em;
  margin-bottom: 28px;
  position: relative;
}
.hero__title .ja {
  display: block;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(0.9rem, 1.2vw, 1.2rem);
  letter-spacing: 0.4em;
  color: var(--brand);
  text-shadow: 0 0 20px rgba(184,44,44,0.6);
  margin-bottom: 18px;
}
.hero__title .line { display: block; }
.hero__title .line--1,
.hero__title .line--2 { color: var(--ink); }
.hero__title .line--2 em {
  font-style: normal;
  background: var(--grad-pink);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero__title .line--3 {
  color: var(--gold);
  font-size: 0.7em;
}

.hero__sub {
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  color: var(--ink-soft);
  max-width: 560px;
  margin-bottom: 36px;
}

.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.store-btn { display: inline-block; transition: transform 0.2s; }
.store-btn img { height: 56px; width: auto; }
.store-btn:hover { transform: translateY(-3px) scale(1.03); }

.hero__bullets {
  list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 0.95rem; color: var(--ink-soft);
}
.hero__bullets .check { color: var(--gold); margin-right: 6px; font-weight: 700; }

/* Phone mockup */
.hero__phone {
  position: relative;
  display: flex; justify-content: center; align-items: center;
}
.phone {
  position: relative;
  width: min(320px, 80%);
  aspect-ratio: 9 / 19.5;
  border-radius: 44px;
  background: #0a0e1a;
  border: 4px solid #1a1f2e;
  box-shadow:
    var(--shadow-lg),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 0 80px rgba(255,45,117,0.4),
    0 0 120px rgba(76,201,240,0.2);
  overflow: hidden;
  z-index: 2;
  animation: phoneFloat 6s ease-in-out infinite;
}
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}
.phone__notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 28px; background: #000; border-radius: 999px;
  z-index: 3;
}
.phone__screen { position: absolute; inset: 0; border-radius: 40px; overflow: hidden; }
.phone__shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity 0.6s ease;
}
.phone__shot.is-active { opacity: 1; }
.phone__glow {
  position: absolute; inset: -20px; z-index: -1;
  background: radial-gradient(circle, rgba(255,45,117,0.5), transparent 60%);
  filter: blur(40px);
}

/* Marquee */
.marquee {
  margin-top: 60px;
  padding: 14px 0;
  background: linear-gradient(90deg, transparent, rgba(184,44,44,0.5), transparent);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.marquee__track {
  display: flex; gap: 48px;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: 0.18em;
}
.marquee__track span { opacity: 0.85; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Sections ---------- */
.section { padding: 100px 28px; position: relative; }
.container { max-width: var(--maxw); margin: 0 auto; }
.section__head { max-width: 820px; margin: 0 auto 56px; text-align: center; }
.section__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  line-height: 1.15; letter-spacing: 0.005em;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.section__lead {
  margin-top: 18px; color: var(--ink-soft);
  font-size: 1.08rem; max-width: 660px; margin-left: auto; margin-right: auto;
}

.badge {
  display: inline-block;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.badge--pink { background: rgba(255,45,117,0.16); color: #ff7da5; }
.badge--gold { background: rgba(255,203,71,0.16); color: var(--gold); }

/* ---------- Method ---------- */
.proof {
  max-width: 540px; margin: 0 auto 60px;
  background: linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 28px 36px;
  backdrop-filter: blur(8px);
}
.proof__row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 18px; align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.proof__row:last-of-type { border-bottom: none; }
.proof__ja {
  font-family: var(--font-body);
  font-size: 1.6rem; font-weight: 700; text-align: right;
  color: var(--ink);
}
.proof__ja rt { color: var(--ink-soft); font-weight: 500; font-size: 0.5em; }
.proof__arrow { color: var(--brand); font-weight: 700; }
.proof__en {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.proof__note {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center; font-style: italic; color: var(--ink-soft);
}

.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 960px; margin: 0 auto;
}
.step {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 32px 24px;
  position: relative;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.step:hover {
  transform: translateY(-6px);
  border-color: rgba(255,45,117,0.4);
  background: rgba(255,45,117,0.06);
}
.step__num {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1.3rem; color: var(--brand);
  display: inline-block; margin-bottom: 14px;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border: 1px solid rgba(184,44,44,0.5);
  border-radius: 8px;
}
.step h3 {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1.3rem; margin-bottom: 8px;
  letter-spacing: 0.005em;
}
.step p { color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- Features grid ---------- */
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.card {
  position: relative;
  border-radius: var(--radius);
  padding: 32px 26px;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: transform 0.25s, border-color 0.25s;
}
.card::before {
  content: ''; position: absolute; inset: 0; opacity: 0.08;
  background: radial-gradient(circle at 30% 0%, var(--accent, var(--pink)), transparent 60%);
  pointer-events: none;
}
.card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.18); }
.card--quiz { --accent: var(--pink); }
.card--battle { --accent: var(--brand); }
.card--rhythm { --accent: var(--blue); }
.card--gacha { --accent: var(--gold); }
.card--story { --accent: #c084fc; }
.card--offline { --accent: var(--green); }

.card__icon {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--accent, var(--pink));
  margin-bottom: 14px;
  letter-spacing: 0.1em;
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent, var(--pink)) 60%, transparent);
}
.card h3 {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1.25rem; margin-bottom: 8px;
  letter-spacing: 0.005em;
}
.card p { color: var(--ink-soft); font-size: 0.96rem; }

/* ---------- Sticker grid (curated) ---------- */
.sticker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}
.sticker-card {
  --tier-color: var(--tier-common);
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid color-mix(in srgb, var(--tier-color) 35%, transparent);
  border-radius: 14px;
  padding: 14px 10px 12px;
  text-align: center;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.sticker-card:hover {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--tier-color) 60%, transparent);
  border-color: color-mix(in srgb, var(--tier-color) 70%, transparent);
}
.sticker-card--common { --tier-color: var(--tier-common); }
.sticker-card--rare {
  --tier-color: var(--tier-rare);
  background: linear-gradient(180deg, rgba(76,201,240,0.10), rgba(255,255,255,0.01));
}
.sticker-card--epic {
  --tier-color: var(--tier-epic);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,203,71,0.25), transparent 60%),
    linear-gradient(180deg, rgba(255,203,71,0.10), rgba(255,255,255,0.01));
  box-shadow: 0 0 28px -10px rgba(255,203,71,0.6);
}
.sticker-card__art {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.sticker-card__art img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.45));
}
.sticker-card--epic .sticker-card__art img {
  filter:
    drop-shadow(0 8px 16px rgba(0,0,0,0.5))
    drop-shadow(0 0 14px rgba(255,203,71,0.5));
}
.sticker-card figcaption {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.sticker-card__name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.sticker-card__tier {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--tier-color);
  text-shadow: 0 0 8px color-mix(in srgb, var(--tier-color) 60%, transparent);
}

.sticker-legend {
  margin-top: 36px;
  display: flex; justify-content: center; gap: 28px;
  font-size: 0.85rem; color: var(--ink-soft);
  flex-wrap: wrap;
}
.sticker-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sticker-legend .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c, var(--tier-common));
  box-shadow: 0 0 10px var(--c, var(--tier-common));
}
.sticker-legend .dot--common { --c: var(--tier-common); }
.sticker-legend .dot--rare { --c: var(--tier-rare); }
.sticker-legend .dot--epic { --c: var(--tier-epic); }

/* ---------- Story ---------- */
.story {
  background: linear-gradient(180deg, transparent 0%, rgba(184,44,44,0.08) 50%, transparent 100%);
}
.story__grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px;
  align-items: center;
}
.story__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.2; margin: 18px 0 22px;
  letter-spacing: 0.005em;
}
.story__copy p { color: var(--ink-soft); margin-bottom: 14px; font-size: 1.05rem; }

.story__visual { position: relative; height: 480px; }
.polaroid {
  position: absolute;
  background: white; padding: 12px 12px 40px;
  border-radius: 4px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  width: 220px;
}
.polaroid img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  background: linear-gradient(135deg, #ffe4e8, #ffd6e4);
  border-radius: 2px;
}
.polaroid span {
  position: absolute; bottom: 12px; left: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  color: #333; font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.polaroid--1 { top: 0; left: 10%; transform: rotate(-7deg); }
.polaroid--2 { top: 80px; right: 0; transform: rotate(6deg); z-index: 2; }
.polaroid--3 { bottom: 0; left: 25%; transform: rotate(-3deg); }

/* ---------- VS table ---------- */
.table-wrap { max-width: 760px; margin: 0 auto; overflow-x: auto; }
.vs-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  overflow: hidden;
}
.vs-table th, .vs-table td {
  padding: 16px 20px; text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.vs-table th {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 0.92rem; letter-spacing: 0.04em;
  background: rgba(0,0,0,0.2);
  text-transform: uppercase;
}
.vs-table th:nth-child(2) { color: var(--gold); }
.vs-table td:first-child { text-align: left; color: var(--ink-soft); }
.vs-table tbody tr:last-child td { border-bottom: none; }
.vs-table .yes { color: var(--green); font-size: 1.4rem; font-weight: 900; }
.vs-table .no { color: rgba(255,255,255,0.3); font-size: 1.4rem; }

/* ---------- Offline banner ---------- */
.offline { padding: 60px 28px; }
.offline__inner {
  max-width: 920px; margin: 0 auto;
  background: var(--grad-pink);
  border-radius: 28px;
  padding: 40px 50px;
  display: flex; align-items: center; gap: 36px;
  box-shadow: 0 30px 80px -20px rgba(255,45,117,0.5);
  position: relative; overflow: hidden;
}
.offline__inner::after {
  content: '飛行機';
  position: absolute; right: -20px; bottom: -40px;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 7rem; opacity: 0.10; color: white;
  pointer-events: none;
}
.offline__icon {
  font-size: 4rem; line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
.offline h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: 6px;
  letter-spacing: 0.005em;
}
.offline p { color: rgba(255,255,255,0.95); }

/* ---------- Showcase (Swiper) ---------- */
.showcase-swiper {
  padding: 30px 10px 60px;
  overflow: visible;
}
.showcase-swiper .swiper-slide {
  width: 240px;
  display: flex; justify-content: center;
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0.55;
  transform: scale(0.92);
}
.showcase-swiper .swiper-slide-active,
.showcase-swiper .swiper-slide-next,
.showcase-swiper .swiper-slide-prev {
  opacity: 1;
}
.showcase-swiper .swiper-slide-active { transform: scale(1.02); }
.showcase-swiper .swiper-slide img {
  width: 100%;
  border-radius: 24px;
  border: 4px solid #1a1f2e;
  box-shadow: var(--shadow-lg);
}

/* ---------- Final CTA ---------- */
.cta-final {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,45,117,0.25), transparent 70%),
    radial-gradient(ellipse at 50% 100%, rgba(184,44,44,0.3), transparent 70%);
}
.cta-final__inner { text-align: center; max-width: 720px; margin: 0 auto; }
.cta-final h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.1;
  margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 10px;
  letter-spacing: 0.005em;
}
.cta-final .ja-big {
  font-family: var(--font-body);
  font-weight: 900;
  background: var(--grad-pink);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-size: 0.6em;
}
.cta-final p { color: var(--ink-soft); margin-bottom: 32px; font-size: 1.1rem; }
.cta-final .hero__cta { justify-content: center; }

/* ---------- Mystery cards (Swiper) ---------- */
.mystery-lead {
  margin: 56px auto 24px;
  max-width: 640px;
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
}
.mystery-swiper {
  padding: 20px 4px 50px;
  overflow: visible;
}
.mystery-swiper .swiper-slide {
  width: 180px;
  height: auto;
  display: flex; align-items: stretch; justify-content: center;
}
/* Real sticker cards reused inside the swiper get a matching footprint */
.mystery-swiper .sticker-card {
  width: 100%;
  display: flex; flex-direction: column;
  padding: 14px 12px 12px;
}
.mystery-swiper .sticker-card .sticker-card__art {
  flex: 1;
  margin-bottom: 10px;
}
.mystery-card {
  --tier-color: var(--tier-common);
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--tier-color) 50%, transparent);
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tier-color) 22%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, var(--navy-2), var(--navy));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  padding: 18px 12px;
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--tier-color) 50%, transparent);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  overflow: hidden;
}
.mystery-card::before {
  content: '';
  position: absolute; inset: 8px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--tier-color) 35%, transparent);
  pointer-events: none;
}
.mystery-card:hover {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 0 22px 50px -16px color-mix(in srgb, var(--tier-color) 70%, transparent);
  border-color: color-mix(in srgb, var(--tier-color) 90%, transparent);
}
.mystery-card--common { --tier-color: var(--tier-common); }
.mystery-card--rare   { --tier-color: var(--tier-rare); }
.mystery-card--epic {
  --tier-color: var(--tier-epic);
  animation: epicPulse 3.6s ease-in-out infinite;
}
@keyframes epicPulse {
  0%, 100% { box-shadow: 0 14px 30px -14px rgba(255,203,71,0.4); }
  50%      { box-shadow: 0 18px 50px -10px rgba(255,203,71,0.85); }
}
.mystery-card__back {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 4.4rem;
  line-height: 1;
  color: var(--tier-color);
  text-shadow: 0 0 18px color-mix(in srgb, var(--tier-color) 70%, transparent);
}
.mystery-card__tier {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: var(--tier-color);
}
.mystery-card__label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
}

/* Swiper buttons / pagination tuned to the brand */
.swiper-button-prev,
.swiper-button-next {
  color: var(--ink) !important;
  background: rgba(14,20,36,0.7);
  width: 40px !important; height: 40px !important;
  border-radius: 50%;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background 0.2s, transform 0.15s;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: var(--brand);
  transform: scale(1.06);
}
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 0.95rem !important;
  font-weight: 900;
}
.swiper-pagination-bullet {
  background: var(--ink) !important;
  opacity: 0.35;
}
.swiper-pagination-bullet-active {
  background: var(--gold) !important;
  opacity: 1;
  width: 22px;
  border-radius: 6px;
  transition: width 0.2s;
}

/* ---------- Footer ---------- */
.footer {
  padding: 40px 28px 60px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
}
.footer__logo { height: 40px; }
.footer__tag { color: var(--ink-soft); font-size: 0.9rem; flex: 1; text-align: center; min-width: min(240px, 100%); }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; font-size: 0.9rem; }
.footer__links a { color: var(--ink-soft); transition: color 0.2s; }
.footer__links a:hover { color: var(--gold); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .sticker-grid { grid-template-columns: repeat(4, 1fr); }
  .vs-table .yes { font-size: 1.4rem;}
  .vs-table .no { font-size: 0.75rem; }
  .vs-table .yes[data-i18n="vs.r3a"] { font-size: 1.2rem; }
}
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: 32px; }
  /* Le headline reste prioritaire : on retire `order: -1` pour que le
     phone glisse SOUS l'accroche au lieu de la pousser hors écran. */
  .hero__phone { order: 0; }
  /* Phone mobile : piloté par la hauteur (capée à ~45vh) plutôt que la
     largeur, l'`aspect-ratio` recalculant la largeur en conséquence. */
  .phone {
    width: auto;
    height: min(48vh, 420px);
    max-width: 70vw;
  }
  .nav__links { display: none; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .story__grid { grid-template-columns: 1fr; gap: 40px; }

  /* Polaroïds : on quitte le positionnement absolu pour un flex qui
     enveloppe naturellement et reste centré, sans débordement à droite. */
  .story__visual {
    position: static;
    height: auto;
    max-width: none;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }
  .polaroid {
    position: static;
    width: min(220px, 78%);
    top: auto; left: auto; right: auto; bottom: auto;
  }
  .polaroid--1 { transform: rotate(-3deg); }
  .polaroid--2 { transform: rotate(2deg); }
  .polaroid--3 { transform: rotate(-2deg); }

  .offline__inner { flex-direction: column; text-align: center; padding: 32px 24px; }
}
@media (max-width: 560px) {
  .section { padding: 64px 18px; }
  .hero { padding: 32px 18px 48px; min-height: auto; }
  .hero__title { font-size: clamp(2.1rem, 9vw, 3rem); margin-bottom: 20px; }
  .hero__sub { margin-bottom: 24px; }
  .hero__cta { margin-bottom: 20px; }
  .phone { height: min(42vh, 360px); max-width: 60vw; }
  .grid { grid-template-columns: 1fr; }
  .sticker-grid { grid-template-columns: repeat(3, 1fr); }
  .nav { padding: 12px 14px; }
  .nav__brand img { height: 36px; }
  .btn--ghost { padding: 8px 14px; font-size: 0.8rem; }
  .store-btn img { height: 48px; }
  .footer__inner { flex-direction: column; align-items: center; text-align: center; }
  /* Les polaroïds rapetissent encore un peu pour rester confortables. */
  .polaroid { width: min(220px, 86%); }
}

/* ---------- No-subscription strip ---------- */
.nostreak {
  padding: 34px 28px;
  background: linear-gradient(90deg, rgba(255,45,117,0.12), rgba(255,203,71,0.10));
  border-top: 1px solid rgba(255,45,117,0.25);
  border-bottom: 1px solid rgba(255,203,71,0.25);
}
.nostreak__inner { text-align: center; }
.nostreak__big {
  font-size: clamp(1.2rem, 3vw, 1.9rem);
  font-weight: 900; margin: 0 0 6px; color: var(--ink);
  letter-spacing: 0.01em;
}
.nostreak__sub { margin: 0; color: var(--ink-soft); }
.nostreak__sub strong { color: var(--gold); }

/* ---------- Trailer ---------- */
.trailer__inner { text-align: center; }
.trailer video {
  width: min(100%, 860px); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); border: 1px solid var(--navy-3);
  margin-top: 24px; background: #000;
}

/* ---------- Newsletter ---------- */
.newsletter__inner { text-align: center; max-width: 720px; }
.newsletter__p { color: var(--ink-soft); max-width: 540px; margin: 0 auto 24px; line-height: 1.6; }
.nl-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 560px; margin: 0 auto; }
.nl-form input[type=email] {
  flex: 1; min-width: 220px;
  background: var(--navy-2); color: var(--ink);
  border: 2px solid var(--navy-3); border-radius: 12px;
  padding: 13px 18px; font-size: 1rem; font-family: var(--font-body); outline: none;
  transition: border-color .2s;
}
.nl-form input[type=email]:focus { border-color: var(--gold); }
.nl-hp { position: absolute; left: -5000px; opacity: 0; pointer-events: none; }
.nl-status { display: block; width: 100%; margin-top: 12px; color: var(--gold); font-size: 0.95rem; min-height: 1.4em; }

/* ---------- Footer social ---------- */
.footer__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy-2); border: 1px solid var(--navy-3);
  color: var(--ink-soft); transition: color .2s, border-color .2s, transform .2s;
}
.footer__social a:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }
.footer__social a i { font-size: 18px; line-height: 1; }

/* Badge « sortie à venir » (app pas encore publiée) */
.release-badge {
  display: inline-block;
  padding: 12px 22px;
  border: 1px solid rgba(255, 203, 71, 0.55);
  border-radius: 999px;
  background: rgba(255, 203, 71, 0.08);
  color: var(--gold);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}