/* ============================================================
   OVERQUIZ — couche immersive
   Séquence d'éveil · salle en 3D · NEXA · démo jouable · ambiance
   Aucune image, aucune dépendance : tout est dessiné.
   ============================================================ */

/* ───────────── 1. SÉQUENCE D'ÉVEIL ───────────── */
#boot{
  position:fixed;inset:0;z-index:9000;background:#04040A;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:2rem;transition:opacity .9s ease, visibility .9s;
}
#boot.done{opacity:0;visibility:hidden;pointer-events:none;}
.boot-orb{
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #00E5FF, transparent 46%),
             radial-gradient(circle at 66% 68%, #FF2D9B, transparent 50%),
             radial-gradient(circle at 50% 50%, #8B5CF6, transparent 72%);
  filter:blur(2px);
  transform:scale(.1);opacity:0;
  animation:bootOrb 2.6s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes bootOrb{
  0%{transform:scale(.05);opacity:0;filter:blur(14px);}
  35%{transform:scale(1.18);opacity:1;filter:blur(1px);}
  55%{transform:scale(.94);}
  100%{transform:scale(1);opacity:1;filter:blur(2px);}
}
.boot-log{
  font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.2em;color:var(--txt-3);
  text-align:center;min-height:5.4em;line-height:1.8;
}
.boot-log b{color:var(--cyan);font-weight:400;}
.boot-skip{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  background:none;border:1px solid var(--line);color:var(--txt-3);
  font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.6rem 1.2rem;border-radius:999px;cursor:pointer;
}
.boot-skip:hover{color:var(--cyan);border-color:var(--cyan);}

/* ───────────── 2. AMBIANCE GLOBALE ───────────── */
.amb{position:fixed;inset:0;pointer-events:none;z-index:1;}
.amb-scan{
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  opacity:.6;
}
.amb-vig{box-shadow:inset 0 0 220px 60px rgba(0,0,0,.85);}
.amb-spot{
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,30%),
    rgba(0,229,255,.055), transparent 70%);
  transition:background .12s linear;
}
.amb-grain{
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────────── 3. LA SALLE EN 3D ───────────── */
.room-stage{
  position:absolute;inset:0;z-index:0;overflow:hidden;opacity:.85;
  perspective:1400px;perspective-origin:50% 46%;
  mask-image:linear-gradient(180deg,#000 68%,transparent 100%);
}
.room{
  position:absolute;left:79%;top:44%;width:1px;height:1px;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) scale(.82) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--rz,0px));
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
@media (min-width:1700px){ .room{left:76%;} }
.room *{transform-style:preserve-3d;}

/* écran principal */
.r-screen{
  position:absolute;width:560px;height:315px;left:-280px;top:-300px;
  transform:translateZ(-640px);
  background:linear-gradient(160deg,#122B4E,#2B1050);
  border:2px solid rgba(139,92,246,.95);
  box-shadow:0 0 160px 4px rgba(139,92,246,.55), inset 0 0 130px rgba(0,229,255,.24);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
}
.r-screen .rs-orb{
  width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%, rgba(0,229,255,.95), transparent 48%),
             radial-gradient(circle at 66% 66%, rgba(255,45,155,.9), transparent 52%),
             radial-gradient(circle at 50% 50%, rgba(139,92,246,.6), transparent 74%);
  box-shadow:0 0 70px -6px rgba(139,92,246,.8);
  animation:pulse 5s ease-in-out infinite;
}
.r-screen .rs-q{
  font-family:var(--ff-mono);font-size:.82rem;letter-spacing:.16em;color:#DDF4FB;
  text-align:center;max-width:80%;
}
.r-screen .rs-tag{
  font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.34em;color:#FF6FBE;
}

/* écrans de fond, sur les côtés */
.r-side{
  position:absolute;width:420px;height:250px;top:-250px;
  background:transparent;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 0 70px -18px rgba(0,229,255,.45);
  overflow:hidden;opacity:.55;
}
.r-side.l{left:-700px;transform:translateZ(-560px) rotateY(42deg);}
.r-side.r{left:280px;transform:translateZ(-560px) rotateY(-42deg);}
.r-side::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg, rgba(0,229,255,.16) 0 2px, transparent 2px 22px),
             repeating-linear-gradient(180deg, rgba(255,45,155,.10) 0 2px, transparent 2px 30px);
  animation:drift 9s linear infinite;
}
@keyframes drift{to{background-position:220px 0, 0 300px;}}

/* sol */
.r-floor{
  position:absolute;width:2400px;height:1600px;left:-1200px;top:186px;
  transform:rotateX(82deg) translateZ(-60px);
  background:
    repeating-linear-gradient(90deg, rgba(0,229,255,.16) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(139,92,246,.14) 0 1px, transparent 1px 84px);
  mask-image:radial-gradient(52% 48% at 50% 26%, #000 12%, transparent 78%);
}

/* pupitres en arc, au sol, devant l'écran */
.r-podium{
  position:absolute;width:88px;height:150px;left:-44px;top:40px;
  transform:rotateY(var(--a)) translateZ(calc(-1 * var(--d)));
}
.r-podium .pod{
  position:absolute;inset:0;
  background:linear-gradient(180deg,#1A1A28 0%,#08080F 100%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:5px 5px 2px 2px;
  box-shadow:0 30px 60px -24px #000;
}
.r-podium .glow{
  position:absolute;left:9px;right:9px;bottom:14px;height:74px;border-radius:3px;
  background:var(--c);opacity:.26;filter:blur(2px);
  box-shadow:0 0 20px 1px var(--c);
  animation:podPulse 4.5s ease-in-out infinite;animation-delay:var(--delay,0s);
}
@keyframes podPulse{0%,100%{opacity:.18;}50%{opacity:.4;}}
.r-podium .btns{
  position:absolute;top:9px;left:0;right:0;display:flex;gap:5px;justify-content:center;
}
.r-podium .btns i{
  width:10px;height:10px;border-radius:50%;display:block;opacity:.8;
  box-shadow:0 0 7px 1px currentColor;
}

/* néons muraux */
.r-neon{
  position:absolute;width:3px;height:520px;top:-330px;
  background:linear-gradient(180deg,transparent,var(--c),transparent);
  box-shadow:0 0 22px 2px var(--c);opacity:.65;
}
.r-neon.n1{left:-760px;transform:translateZ(-230px) rotateY(46deg);}
.r-neon.n2{left:-660px;transform:translateZ(-400px) rotateY(46deg);}
.r-neon.n3{left:560px;transform:translateZ(-230px) rotateY(-46deg);}
.r-neon.n4{left:470px;transform:translateZ(-400px) rotateY(-46deg);}

/* le hero devient plein écran, texte au-dessus de la salle */
.hero.immersive{min-height:100svh;display:flex;align-items:center;padding-block:8rem 6rem;}
.hero.immersive .wrap{position:relative;z-index:3;}
.hero.immersive h1{filter:drop-shadow(0 4px 26px rgba(7,7,14,.95));}
.hero.immersive .hero-sub{text-shadow:0 2px 22px rgba(7,7,14,.95);}
.hero.immersive::after{display:none;}
.hero-veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,7,14,.98) 0%, rgba(7,7,14,.95) 40%, rgba(7,7,14,.60) 55%, rgba(7,7,14,0) 72%),
    linear-gradient(180deg, rgba(7,7,14,.45) 0%, transparent 20%, transparent 76%, rgba(7,7,14,.65) 100%);
}
@media (max-width:900px){
  .hero-veil{background:linear-gradient(180deg, rgba(7,7,14,.72) 0%, rgba(7,7,14,.93) 55%);}
  .room{transform:translate(-50%,-50%) scale(.52);}
}

/* indicateur de défilement */
.scroll-hint{
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);z-index:4;
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.26em;color:var(--txt-3);
  text-align:center;
}
.scroll-hint::after{
  content:'';display:block;width:1px;height:34px;margin:.7rem auto 0;
  background:linear-gradient(180deg,var(--cyan),transparent);
  animation:hint 2.2s ease-in-out infinite;
}
@keyframes hint{0%,100%{opacity:.25;transform:scaleY(.6);}50%{opacity:1;transform:scaleY(1);}}

/* ───────────── 4. NEXA VIVANTE ───────────── */
.nexa-live{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
@media (max-width:820px){.nexa-live{grid-template-columns:1fr;}}
#nexa-canvas{width:100%;aspect-ratio:1;display:block;}
.nexa-say{
  min-height:5.6em;font-family:var(--ff-mono);font-size:.95rem;line-height:1.85;
  color:var(--txt);border-left:2px solid var(--magenta);padding-left:1.2rem;margin:1.4rem 0 1.6rem;
}
.nexa-say .caret{display:inline-block;width:9px;background:var(--cyan);animation:blink 1s steps(2) infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}
.nexa-tone{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem;}
.tone{
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--txt-2);cursor:pointer;transition:all .18s ease;
}
.tone:hover{border-color:var(--cyan);color:var(--cyan);}
.tone[aria-pressed="true"]{background:var(--magenta);border-color:var(--magenta);color:#0A0A12;font-weight:700;}

/* ───────────── 5. DÉMO JOUABLE ───────────── */
.demo{
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#0D0D19,#08080F);
  box-shadow:0 40px 90px -50px #000;
}
.demo-screen{
  position:relative;padding:clamp(1.8rem,4vw,3rem);min-height:330px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(70% 80% at 50% 0%, rgba(139,92,246,.14), transparent 70%);
  border-bottom:1px solid var(--line);
}
.demo-bar{
  position:absolute;top:0;left:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  transform-origin:left;transform:scaleX(0);
}
.demo-tag{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.3em;color:var(--magenta);margin-bottom:1.1rem;}
.demo-q{font-family:var(--ff-title);font-size:clamp(1.15rem,2.4vw,1.75rem);line-height:1.3;max-width:24ch;margin-bottom:.6rem;}
.demo-sub{font-size:.86rem;color:var(--txt-3);font-family:var(--ff-mono);letter-spacing:.1em;}
.demo-score{
  position:absolute;top:1.2rem;right:1.4rem;font-family:var(--ff-mono);font-size:.72rem;
  letter-spacing:.14em;color:var(--cyan);
}
.demo-timer{
  position:absolute;top:1.2rem;left:1.4rem;font-family:var(--ff-mono);font-size:.72rem;
  letter-spacing:.14em;color:var(--txt-3);
}
.demo-timer.hot{color:var(--magenta);}

.demo-pad{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);}
@media (max-width:640px){.demo-pad{grid-template-columns:1fr;}}
.buzz{
  position:relative;border:0;background:#0B0B14;color:var(--txt);
  padding:1.5rem 1.4rem 1.5rem 4.4rem;text-align:left;cursor:pointer;
  font-family:var(--ff-body);font-size:1rem;line-height:1.4;
  transition:background .15s ease, color .15s ease;min-height:78px;
}
.buzz::before{
  content:'';position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;background:var(--c);
  box-shadow:0 0 16px 2px var(--c);transition:transform .12s ease, box-shadow .12s ease;
}
.buzz .key{
  position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);
  font-family:var(--ff-mono);font-size:.62rem;color:var(--txt-3);
  border:1px solid var(--line);border-radius:5px;padding:.18rem .42rem;
}
.buzz:hover{background:#12121F;}
.buzz:hover::before{transform:translateY(-50%) scale(1.18);box-shadow:0 0 26px 5px var(--c);}
.buzz:active::before{transform:translateY(-50%) scale(.86);}
.buzz:disabled{cursor:default;}
.buzz.good{background:rgba(0,229,255,.14);}
.buzz.good::before{box-shadow:0 0 34px 8px var(--c);}
.buzz.bad{background:rgba(255,45,155,.10);opacity:.55;}
.buzz:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px;}

.demo-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.4rem;border-top:1px solid var(--line);
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.12em;color:var(--txt-3);
}
.demo-nexa{
  padding:1.1rem 1.4rem;border-top:1px solid var(--line);background:#0A0A14;
  font-family:var(--ff-mono);font-size:.84rem;color:var(--txt-2);min-height:3.4em;
  display:flex;align-items:center;gap:.9rem;
}
.demo-nexa .dot{
  width:10px;height:10px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 35%, var(--cyan), var(--magenta));
  box-shadow:0 0 12px var(--violet);
}

/* ───────────── 6. SON ───────────── */
.sound-toggle{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:60;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:rgba(12,12,24,.9);border:1px solid var(--line);color:var(--txt-2);
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  backdrop-filter:blur(8px);transition:all .2s ease;
}
.sound-toggle:hover{border-color:var(--cyan);color:var(--cyan);transform:scale(1.06);}
.sound-toggle[aria-pressed="true"]{
  border-color:var(--cyan);color:var(--cyan);
  box-shadow:0 0 24px -4px rgba(0,229,255,.7);
}

[hidden]{display:none !important;}

/* ───────────── 7. RÉVÉLATION AU DÉFILEMENT ───────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

/* ───────────── 8. ACCESSIBILITÉ ───────────── */
@media (prefers-reduced-motion:reduce){
  #boot{display:none;}
  .boot-orb,.r-screen .rs-orb,.r-podium .glow,.r-side::after,.scroll-hint::after{animation:none;}
  .room{transition:none;}
  .reveal{opacity:1;transform:none;transition:none;}
}


/* ───────────── 9. PHOTOS ───────────── */
.card-media{
  margin:-1.7rem -1.6rem 1.3rem;border-radius:13px 13px 0 0;overflow:hidden;
  aspect-ratio:4/3;background:#0B0B14;
}
.card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card-media img{transform:scale(1.05);}

/* la démonstration prend la texture des boutons en fond */
.demo-screen{
  background-image:
    linear-gradient(rgba(8,8,16,.90), rgba(8,8,16,.955)),
    radial-gradient(70% 80% at 50% 0%, rgba(139,92,246,.18), transparent 70%),
    url('/assets/img/boutons.webp');
  background-size:cover;background-position:center;
}

/* sur mobile, la photo remplace la salle en 3D, trop petite pour être lisible */
@media (max-width:900px){
  .hero.immersive{
    background-image:linear-gradient(rgba(7,7,14,.80), rgba(7,7,14,.96)), url('/assets/img/nexa-800.webp');
    background-size:cover;background-position:center;
  }
  .room-stage{opacity:.30;}
}