/* ═══════════════════════════════════════════════════════════
   BLINDTEST — Design System v5
   Responsive Mobile + Desktop · Body scroll natif · No CLS
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg:    #07001a;
  --glass:   rgba(255,255,255,.04);
  --glass-b: rgba(255,255,255,.09);
  --glass-h: rgba(255,255,255,.07);
  --glass-a: rgba(255,255,255,.12);
  --fg:   #eee8ff;
  --dim:  rgba(238,232,255,.5);
  --mute: rgba(238,232,255,.2);
  --c1: #00E5FF;  --c2: #FF00E5;  --c3: #FFD600;
  --c4: #76FF03;  --cv: #6B00FF;
  --grad: linear-gradient(135deg,#6B00FF 0%,#FF00E5 50%,#00E5FF 100%);
  --f:  'Outfit', sans-serif;
  --fm: 'JetBrains Mono', monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --nav-h: 60px;
  --topbar-h: 56px;
  --page-pad: 20px;
  /* Max-width des contenus — large sur desktop */
  --content-w: 1120px;
  --wide-w: 1680px;
}

.format-cta-bar button {
    font-size: 12px !important;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }
::selection { background: rgba(107,0,255,.5); }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Scroll natif du body — pas de overflow:hidden qui casse le scroll */
}

/* ── Inputs ─────────────────────────────────────────────── */
input {
  font-family: var(--f);
  background: var(--glass);
  border: 1px solid var(--glass-b);
  border-radius: 14px;
  color: var(--fg);
  padding: 14px 16px;
  font-size: 16px; /* évite le zoom iOS */
  outline: none;
  width: 100%;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border .2s;
}
input:focus { border-color: rgba(0,229,255,.45); }
input::placeholder { color: var(--mute); }

/* ── Orbs — fixed, z-index bas ──────────────────────────── */
.orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  opacity: .16;
  z-index: 0;
  animation: of 22s ease-in-out infinite;
}
.o1 { width:700px;height:700px;background:radial-gradient(circle,#6B00FF,transparent 70%);top:-20%;left:-15%; }
.o2 { width:550px;height:550px;background:radial-gradient(circle,#FF00E5,transparent 70%);top:20%;right:-10%;animation-delay:-8s; }
.o3 { width:450px;height:450px;background:radial-gradient(circle,#00E5FF,transparent 70%);bottom:-5%;left:5%;animation-delay:-15s; }

/* ── Glass ──────────────────────────────────────────────── */
.glass {
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-b);
  border-radius: 16px;
  transition: all .22s cubic-bezier(.22,1,.36,1);
}
.glass:hover { background: var(--glass-h); }
.glass:active { background: var(--glass-h); }
.glass.on { background: var(--glass-a); border-color: rgba(107,0,255,.4); box-shadow: 0 0 20px rgba(107,0,255,.1); }

/* ═══════════════════════════════════════════════════════════
   NAV BOTTOM — sticky, visible sur mobile ET desktop
   Sur desktop elle prend toute la largeur (c'est voulu)
   ═══════════════════════════════════════════════════════════ */
.bt-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 500;
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: flex;
  background: rgba(7,0,26,.97);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-top: 1px solid var(--glass-b);
}
/* Sur desktop : centrer les boutons nav et limiter leur largeur */
@media (min-width: 768px) {
  .bt-nav { justify-content: center; }
  .bt-nav-btn { max-width: 160px; }
}

.bt-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dim);
  font-family: var(--f);
  transition: color .18s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  padding: 8px 4px;
}
.bt-nav-btn.active { color: var(--c1); }
.bt-nav-btn.active::before {
  content: '';
  position: absolute;
  top: 0; left: 25%; right: 25%;
  height: 2px;
  background: var(--c1);
  border-radius: 1px;
  box-shadow: 0 0 8px var(--c1);
}

/* ── Padding body pour nav fixe ─────────────────────────── */
.bt-body-pad {
  padding-bottom: calc(var(--nav-h) + var(--safe-b) + 24px);
  position: relative;
  z-index: 1;
}

/* ── TopBar sticky ───────────────────────────────────────── */
.bt-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  width: 100%;
  background: rgba(7,0,26,.95);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid var(--glass-b);
  flex-shrink: 0;
}
.bt-topbar-inner {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── Centrage contenu, responsive ───────────────────────── */
.bt-page {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.bt-page-wide {
  width: 100%;
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

/* ── CTA sticky en bas du scroll ───────────────────────── */
/* Colle au bas DU VIEWPORT, visible même pendant le scroll */
.bt-sticky-cta {
  position: sticky;
  bottom: calc(var(--nav-h) + var(--safe-b));
  z-index: 300;
  padding: 12px 20px;
  background: linear-gradient(to top, var(--bg) 55%, rgba(7,0,26,0));
  pointer-events: none;
}
.bt-sticky-cta > * { pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════
   LANDING — centré mobile, 2 colonnes desktop
   ═══════════════════════════════════════════════════════════ */
.landing-wrap {
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 28px calc(var(--nav-h) + 32px);
  gap: 40px;
}
.landing-content {
  width: 100%;
  max-width: min(920px, 100%);
}
.landing-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.landing-btns { align-items: center !important; }
@media (min-width: 960px) {
  .landing-wrap {
    padding: 56px 40px calc(var(--nav-h) + 40px);
  }
}

/* ═══════════════════════════════════════════════════════════
   PLAYLIST GRID — scroll natif, responsive colonnes
   ═══════════════════════════════════════════════════════════ */
.pl-section {
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 0 20px;
}
.pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 14px 0;
}
.pl-grid > * {
  contain-intrinsic-size: 260px;
}
@media (min-width: 560px)  { .pl-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } }
@media (min-width: 960px)  { .pl-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } }
@media (min-width: 1320px) { .pl-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } }
@media (min-width: 1680px) { .pl-grid {grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));} }
.playlist-card {
  transition: transform .24s cubic-bezier(.22,1,.36,1), border-color .24s ease, box-shadow .24s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.playlist-card:not([disabled]):hover {
  transform: translateY(-4px);
  border-color: rgba(0,229,255,.24);
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
}
.playlist-card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--glass);
  contain: paint;
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.playlist-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.playlist-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(7,0,26,.22) 56%, rgba(7,0,26,.82) 100%);
  pointer-events: none;
}
.playlist-card__fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,45,85,.15), rgba(255,149,0,.1));
}
.playlist-card__body {
  padding: 14px 14px 16px;
}
.playlist-card__meta {
  margin-top: 6px;
  font-size: 10px;
  color: var(--dim);
  font-family: var(--fm);
  letter-spacing: .04em;
}

/* ═══════════════════════════════════════════════════════════
   FORMAT STEP — 1 col mobile, 3 col desktop, sans emojis
   ═══════════════════════════════════════════════════════════ */
.format-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 20px;
}
.format-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .format-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

.format-card {
  padding: 24px 20px;
  border-radius: 20px;
  cursor: pointer;
  text-align: left;
  border: 2px solid var(--glass-b);
  background: var(--glass);
  transition: all .28s cubic-bezier(.22,1,.36,1);
  font-family: var(--f);
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.format-card:hover { background: var(--glass-h); transform: translateY(-2px); }
.format-card.selected { border-width: 2px; transform: translateY(-2px); }
.format-card.selected::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, currentColor, transparent);
  opacity: .05;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   SETUP / MODE GRID — 2 col mobile, 3-4 col desktop
   ═══════════════════════════════════════════════════════════ */
.setup-wrap {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 20px;
}
.mode-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 560px)  { .mode-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 980px)  { .mode-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1480px) { .mode-grid { grid-template-columns: repeat(5, 1fr); } }

.mode-card {
  padding: 16px 14px;
  border-radius: 20px;
  cursor: pointer;
  text-align: left;
  border: 1px solid var(--glass-b);
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all .22s cubic-bezier(.22,1,.36,1);
  font-family: var(--f);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  min-height: 210px;
}
.mode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 16% 14%, color-mix(in srgb, var(--mode-ac) 20%, transparent) 0%, transparent 48%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
.mode-card:not([disabled]):hover { background: var(--glass-h); transform: translateY(-3px); }
.mode-card.active { border-width: 2px; transform: translateY(-4px); }
.mode-card.active::before { opacity: .42; }
.mode-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.mode-card.active .mode-icon-wrap {
  transform: translateY(-1px) scale(1.02);
}

/* ═══════════════════════════════════════════════════════════
   DISPLAY MODE — full viewport, aucune restriction
   ═══════════════════════════════════════════════════════════ */
.display-full {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  position: relative;
}

/* ═══════════════════════════════════════════════════════════
   SHELL STATIQUE ANTI-FLASH
   CSS inline dans index.html — reproduit fidèlement la landing
   ═══════════════════════════════════════════════════════════ */
#ss { /* static shell — retiré par MutationObserver dès que React monte */
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
#ss.out { opacity: 0; transition: opacity .2s ease; }

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@keyframes of    { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(22px,-28px) scale(1.04); } 66% { transform:translate(-14px,20px) scale(.96); } }
@keyframes up    { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes fi    { from { opacity:0; } to { opacity:1; } }
@keyframes spin  { to { transform:rotate(360deg); } }
@keyframes tg    { 0%,100% { filter:drop-shadow(0 0 24px rgba(107,0,255,.4)); } 50% { filter:drop-shadow(0 0 50px rgba(255,0,229,.45)); } }
@keyframes eq    { 0%,100% { height:12%; } 50% { height:88%; } }
@keyframes rip   { 0% { transform:scale(.8); opacity:.5; } 100% { transform:scale(3.5); opacity:0; } }
@keyframes bz    { 0% { transform:scale(1); } 12% { transform:scale(.88); } 30% { transform:scale(1.1); } 50% { transform:scale(.96); } 100% { transform:scale(1); } }
@keyframes sp    { 0%,100% { transform:scale(1); } 50% { transform:scale(1.2); } }
@keyframes cf    { 0% { transform:translateY(-8vh) rotate(0); opacity:1; } 100% { transform:translateY(105vh) rotate(600deg); opacity:0; } }
@keyframes tb    { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } }
@keyframes sh    { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } }
@keyframes gp    { 0%,100% { box-shadow:0 0 16px var(--gc,rgba(107,0,255,.25)); } 50% { box-shadow:0 0 40px var(--gc,rgba(107,0,255,.4)); } }
@keyframes pIn   { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes pOut  { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(-20px); } }
@keyframes scoreUp  { 0% { transform:scale(1); } 30% { transform:scale(1.3); color:#76FF03; } 100% { transform:scale(1); } }
@keyframes scoreDn  { 0% { transform:scale(1); } 30% { transform:scale(.85); color:#FF3D3D; } 100% { transform:scale(1); } }
@keyframes correctFlash { 0% { box-shadow:0 0 0 rgba(118,255,3,0); } 50% { box-shadow:0 0 60px rgba(118,255,3,.4),inset 0 0 30px rgba(118,255,3,.08); } 100% { box-shadow:0 0 0 rgba(118,255,3,0); } }
@keyframes wrongFlash   { 0% { box-shadow:0 0 0 rgba(255,61,61,0); } 50% { box-shadow:0 0 60px rgba(255,61,61,.4),inset 0 0 30px rgba(255,61,61,.08); } 100% { box-shadow:0 0 0 rgba(255,61,61,0); } }
@keyframes wrongShake   { 0%,100% { transform:translateX(0); } 15%,45%,75% { transform:translateX(-6px); } 30%,60%,90% { transform:translateX(6px); } }
@keyframes pointPop     { 0% { opacity:1; transform:translateY(0) scale(1); } 100% { opacity:0; transform:translateY(-40px) scale(1.3); } }
@keyframes buzzPulse    { 0%,100% { transform:scale(1); box-shadow:0 0 20px var(--gc,rgba(107,0,255,.3)); } 50% { transform:scale(1.04); box-shadow:0 0 50px var(--gc,rgba(107,0,255,.5)); } }


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

/* ═══════════════════════════════════════════════════════════
   LANDING BACKGROUND — scroll infini sans saut
   Technique : 3x items, animation sur 1/3 de la largeur totale
   ═══════════════════════════════════════════════════════════ */

  to   { transform: translateX(-33.333%); }
}

  to   { transform: translateX(0); }
}

/* ── Mode card animations ─────────────────────────────────── */
@keyframes barPulse {
  from { opacity: .4; transform: scaleY(.85); transform-origin: bottom; }
  to   { opacity: 1;  transform: scaleY(1);   transform-origin: bottom; }
}

/* ═══ LANDING BG SCROLL — GPU accelerated, seamless loop ═══ */
@keyframes bg-ltr {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.333%, 0, 0); }
}
@keyframes bg-rtl {
  from { transform: translate3d(-33.333%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* ═══ ANIMATION HELPERS ════════════════════════════════════ */
@keyframes barPulse {
  from { opacity:.4; transform: scaleY(.85); transform-origin: bottom; }
  to   { opacity:1;  transform: scaleY(1);   transform-origin: bottom; }
}

/* ═══════════════════════════════════════════════════════════
   FORMAT STEP — layout flex column, CTA sticky visible
   ═══════════════════════════════════════════════════════════ */
.format-layout {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--topbar-h) - var(--nav-h) - var(--safe-b));
}
.format-cards-area {
  flex: 1;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 20px 8px;
}
.format-grid-v {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .format-grid-v {
    grid-template-columns: repeat(2, minmax(280px, 360px));
    gap: 18px;
    justify-content: center;
  }
}
.format-cta-bar {
  position: sticky;
  bottom: calc(var(--nav-h) + var(--safe-b));
  z-index: 300;
  padding: 12px 20px 16px;
  background: linear-gradient(to top, var(--bg) 55%, transparent);
  pointer-events: none;
}
.format-cta-bar > * { pointer-events: auto; }