/* QUIZ'EM ALL v2.0.0 — DESIGN SYSTEM 5 : NEO-GLASSMORPHISM MAGMA / GOLD / STEEL
   Couche 100 % additive (chargée après styles.css) : aucun ID ni aucune classe supprimé ou renommé.
   Animations : transform / opacity uniquement. Respecte prefers-reduced-motion. */
:root{
  --v2-gold:#f4c95d; --v2-gold-hi:#ffe9a8; --v2-gold-lo:#b8862b;
  --v2-magma:#ff4d1a; --v2-magma-hi:#ff8a3d;
  --v2-steel:#8a929e; --v2-steel-d:#1b1e24;
  --v2-glass:rgba(20,21,26,.58);
  --v2-gold-grad:linear-gradient(135deg,#fff1bd 0%,#f4c95d 38%,#b8862b 70%,#f4c95d 100%);
  --v2-steel-grad:linear-gradient(160deg,#2a2e36 0%,#1b1e24 55%,#23272e 100%);
}

/* ---------- Calques Canvas (atmosphère + FX) ---------- */
#qeVfxBack,#qeVfxFront{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#qeVfxBack{z-index:0}
#qeVfxFront{z-index:9990}
/* PAS de z-index ici : un z-index créerait un contexte d'empilement qui enfermerait le tiroir (#mainNav) sous #mobileOverlay.
   Le canvas arrière est inséré en 1er enfant de <body> : à z-index égal, l'ordre du DOM le place sous le contenu. */
body>.container{position:relative}

/* ---------- Verre dépoli cryogénique + bordure dorée réactive ---------- */
.qe-hub-card,.mode-card,.stat-item,.history-item,.badge-item.unlocked,.anecdote-card,
[class*="profile-card"],[class*="collector"],.qe-radar-wrap{
  position:relative;
  background:var(--v2-glass) !important;
  -webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);
  border:1px solid rgba(244,201,93,.18) !important;
  box-shadow:0 8px 28px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,233,168,.12);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.qe-hub-card:hover,.mode-card:hover,.stat-item:hover,.history-item:hover,.anecdote-card:hover,
.qe-hub-card.is-tracking,.mode-card.is-tracking,.anecdote-card.is-tracking,
[class*="profile-card"].is-tracking,[class*="collector"].is-tracking{
  border-color:rgba(244,201,93,.65) !important;
  box-shadow:0 12px 36px rgba(0,0,0,.55),0 0 22px rgba(244,201,93,.22),inset 0 1px 0 rgba(255,233,168,.3);
}
/* Réfraction holographique spéculaire (suit --mx / --my posés par fx-glow.js) */
.qe-hub-card::after,.mode-card::after,.badge-item.unlocked::before,.anecdote-card::before,
[class*="profile-card"]::before,[class*="collector"]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:1;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,233,168,.34),rgba(255,120,40,.12) 32%,transparent 62%),
             linear-gradient(115deg,transparent 30%,rgba(255,255,255,.12) 46%,rgba(244,201,93,.16) 50%,transparent 66%);
  mix-blend-mode:screen;transition:opacity .25s ease;
}
.is-tracking::after,.is-tracking::before,.is-lit::after,.is-lit::before{opacity:1}
.qe-hub-card,.mode-card,.anecdote-card,[class*="profile-card"],[class*="collector"]{
  transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
/* Liseré néon volumétrique à pulsation lente (cartes actives) */
.qe-hub-card.is-active,.mode-card.active,.mode-card.selected,.qe-hub-card--premium{animation:v2Neon 3.6s ease-in-out infinite}
@keyframes v2Neon{0%,100%{box-shadow:0 8px 28px rgba(0,0,0,.45),0 0 10px rgba(244,201,93,.18)}
  50%{box-shadow:0 8px 28px rgba(0,0,0,.45),0 0 26px rgba(244,201,93,.5),0 0 44px rgba(255,77,26,.18)}}

/* ---------- Zéro latence : le Hub est visible dès la 1re frame ---------- */
.qe-hub-card{opacity:1 !important;animation:none}
.qe-hub-card--premium{animation:v2Neon 3.6s ease-in-out infinite}
.qe-hub-root[aria-busy="true"]{opacity:1 !important;visibility:visible !important}

/* ---------- Titres or métallisé / boutons ---------- */
.qe-hub-title,.main-header h1,.results-header h2,.content-panel>h3,.anecdote-card>div:first-child{
  background:var(--v2-gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.control-btn:not(.secondary):not(.danger):not(.home),.qe-hub-account-btn{
  background:var(--v2-gold-grad) !important;color:#1a1305 !important;border:1px solid rgba(255,233,168,.7) !important;
  box-shadow:0 6px 18px rgba(184,134,43,.35),inset 0 1px 0 rgba(255,255,255,.55);
}
.control-btn.secondary,.control-btn.home{background:var(--v2-steel-grad) !important;border:1px solid rgba(138,146,158,.35) !important}
.control-btn.danger{background:linear-gradient(135deg,#ff8a3d,#ff4d1a 60%,#a82a08) !important;color:#fff !important}

/* ---------- Barres en or liquide & jauges circulaires ---------- */
.progress-fill,.qdc-progress>i{background:linear-gradient(90deg,#b8862b,#f4c95d 55%,#fff1bd) !important;box-shadow:0 0 12px rgba(244,201,93,.55)}
.qe-gauges{display:flex;justify-content:space-around;gap:10px;margin-top:14px}
.qe-gauge{--p:0;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--v2-gold) calc(var(--p)*1%),rgba(138,146,158,.18) 0);
  box-shadow:0 0 16px rgba(244,201,93,.25),inset 0 0 0 1px rgba(255,233,168,.2)}
.qe-gauge::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#101115;box-shadow:inset 0 3px 8px rgba(0,0,0,.7)}
.qe-gauge b{position:relative;font:700 1.05rem 'Rajdhani',sans-serif;color:var(--v2-gold-hi)}
.qe-gauge small{display:block;text-align:center;margin-top:6px;font:600 .66rem 'Rajdhani',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--v2-steel)}

/* ---------- Radar Chart (Stats Pro) ---------- */
.qe-radar-wrap{margin:18px 0;padding:16px 10px 14px;border-radius:16px;text-align:center}
.qe-radar-wrap h4{margin:0 0 6px;font:700 .95rem 'Rajdhani',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-gold)}
#qeRadarCanvas{display:block;margin:0 auto;max-width:100%;height:auto}

/* ---------- Codex des anecdotes : « Cartes de Savoir Rares » ---------- */
.anecdote-card{overflow:hidden;border-left:3px solid var(--v2-gold) !important;border-radius:12px !important;
  background-image:repeating-linear-gradient(135deg,rgba(138,146,158,.05) 0 2px,transparent 2px 6px) !important}
.anecdote-card>div:first-child{font-family:'Rajdhani',sans-serif;letter-spacing:.14em;text-transform:uppercase;filter:drop-shadow(0 0 6px rgba(244,201,93,.3))}
.anecdote-card.qe-sweep::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent 35%,rgba(255,233,168,.28) 50%,transparent 65%);
  transform:translateX(-120%);animation:v2Sweep .9s ease-out 1 forwards}
@keyframes v2Sweep{to{transform:translateX(120%)}}

/* ---------- Feedback de jeu : secousse 3D + flash magma ---------- */
.qe-shake{animation:v2Shake .46s cubic-bezier(.36,.07,.19,.97) both}
@keyframes v2Shake{
  10%,90%{transform:translate3d(-2px,0,0) rotateY(-1.5deg)}20%,80%{transform:translate3d(4px,0,0) rotateY(2.5deg)}
  30%,50%,70%{transform:translate3d(-7px,0,0) rotateY(-3.5deg)}40%,60%{transform:translate3d(7px,0,0) rotateY(3.5deg)}}
.qe-flash{position:fixed;inset:0;z-index:9980;pointer-events:none;opacity:0;animation:v2Flash .5s ease-out 1 forwards}
.qe-flash.gold{background:radial-gradient(circle at 50% 50%,rgba(255,233,168,.38),transparent 65%)}
.qe-flash.magma{background:radial-gradient(circle at 50% 50%,rgba(255,77,26,.5),rgba(120,10,0,.25) 55%,transparent 80%)}
@keyframes v2Flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
#resultsPanel.qe-score-cine #finalScore{animation:v2ScoreIn .9s cubic-bezier(.2,1.4,.3,1) both;
  background:var(--v2-gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes v2ScoreIn{0%{opacity:0;transform:scale(.4) translateY(16px)}100%{opacity:1;transform:none}}

/* ---------- Mobile : safe-area gérée par le header seul (aucun double décalage) ---------- */
@media (max-width:768px){body{padding-top:0 !important}}
.main-header{padding-top:calc(6px + env(safe-area-inset-top,0px)) !important;padding-left:calc(12px + env(safe-area-inset-left,0px)) !important;padding-right:calc(12px + env(safe-area-inset-right,0px)) !important;min-height:calc(52px + env(safe-area-inset-top,0px));overflow:visible}
.main-header h1,.logo-container{min-width:0}
.main-header h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;padding-bottom:2px}

/* ---------- Interrupteurs : jamais ovales, zone tactile 48 px ---------- */
.qe-switch{box-sizing:border-box !important;width:56px !important;height:32px !important;min-width:56px !important;min-height:32px !important;
  max-width:56px;max-height:32px;aspect-ratio:auto !important;flex:0 0 56px !important;padding:0 !important;position:relative}
.qe-switch::before{content:"";position:absolute;inset:-8px -6px;min-width:48px;min-height:48px}
.qe-switch-knob{box-sizing:border-box;width:24px !important;height:24px !important;border-radius:50% !important;top:3px !important;left:3px !important}
.qe-switch[aria-checked="true"] .qe-switch-knob{transform:translateX(24px) !important}
.qe-switch.is-busy .qe-switch-knob{animation:none}

@media (prefers-reduced-motion:reduce){
  .qe-hub-card,.mode-card,.anecdote-card,[class*="profile-card"],[class*="collector"]{transform:none !important;animation:none !important}
  .qe-shake,.qe-flash,.anecdote-card.qe-sweep::after,#resultsPanel.qe-score-cine #finalScore{animation:none !important}
  #qeVfxBack,#qeVfxFront{display:none}
}

/* ---------- v2.0.1 — Menu mobile : tiroir net, au-dessus du fond flouté, fond sombre OPAQUE ---------- */
@media (max-width:768px){
  #mobileOverlay{z-index:1050 !important}
  #mainNav.nav-tabs{z-index:1100 !important;background:#0a0a0c !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    filter:none !important;opacity:1 !important}
  #mainNav .nav-tab{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;filter:none !important}
}
/* ---------- v2.0.1 — Interrupteurs : toujours affichés (même si un script pose display:none en ligne) ---------- */
.qe-switch{display:inline-block !important;visibility:visible !important;opacity:1}
.qe-switch:disabled{opacity:.45}
.qe-push-ctl{display:inline-flex !important}