/* ═══════════════════════════════════════════════════════════════
   NOTEQUEST v3.1 — Skin immersif « Scène musicale »
   ───────────────────────────────────────────────────────────────
   Charger ce fichier dans le <head> de jeudenotes.php /
   notesgame.php. Tous les sélecteurs utilisent la double ancre
   #jeudenotes #jeunote_app (spécificité 2-1-0) : ils gagnent
   TOUJOURS contre le bloc <style> interne de la page
   (#jeunote_app .classe = 1-1-0), quel que soit l'ordre de
   chargement. Aucune modification du HTML n'est nécessaire.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. SCÈNE AMBIANTE ────────────────────────────────────────
   Halo « aurore » indigo / rose / ambre derrière tout le jeu.   */
   #jeudenotes{
    position:relative; isolation:isolate;
    border-radius:26px; padding:10px 16px 26px;
  }
  #jeudenotes::before{
    content:''; position:absolute; inset:0; z-index:-1;
    border-radius:26px;
    background:
      radial-gradient(640px 340px at 12% -4%, rgba(99,102,241,.13), transparent 62%),
      radial-gradient(540px 320px at 90% 4%,  rgba(236,72,153,.09), transparent 62%),
      radial-gradient(760px 460px at 50% 112%, rgba(245,158,11,.10), transparent 62%),
      linear-gradient(180deg, #f7f8ff 0%, #ffffff 46%, #fffaf2 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  }
  
  /* ─── 2. EN-TÊTE & BADGES ───────────────────────────────────── */
  #jeudenotes #jeunote_app .jeunote_header{ border-bottom-color:rgba(99,102,241,.18); }
  #jeudenotes #jeunote_app .jeunote_logo_icon{
    box-shadow:0 6px 20px rgba(79,70,229,.35), 0 0 0 4px rgba(99,102,241,.12);
    animation:nq_float 4.5s ease-in-out infinite;
  }
  #jeudenotes #jeunote_app .jeunote_badge{
    background:rgba(255,255,255,.8); backdrop-filter:blur(6px);
    border-color:rgba(99,102,241,.18);
    box-shadow:0 2px 8px rgba(30,41,59,.05);
  }
  #jeudenotes #jeunote_app .jeunote_badge_streak{
    background:linear-gradient(135deg,#fff7ed,#ffedd5); border-color:#fdba74;
  }
  #jeudenotes #jeunote_app .jeunote_badge_ok{ background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
  #jeudenotes #jeunote_app .jeunote_badge_bad{ background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
  #jeudenotes #jeunote_app .jeunote_badge_acc{ background:#eef2ff; border-color:#c7d2fe; color:#4338ca; }
  
  /* ─── 3. NIVEAU & BARRE D'XP ───────────────────────────────── */
  #jeudenotes #jeunote_app .jeunote_level_badge{
    box-shadow:0 4px 14px rgba(79,70,229,.35), 0 0 0 3px rgba(99,102,241,.12);
  }
  #jeudenotes #jeunote_app .jeunote_level_badge::before{ content:'✦ '; }
  #jeudenotes #jeunote_app .jeunote_xp_track{
    height:10px; border-radius:5px;
    background:#e9edf5; box-shadow:inset 0 1px 3px rgba(30,41,59,.12);
  }
  #jeudenotes #jeunote_app .jeunote_xp_fill{
    border-radius:5px;
    background:linear-gradient(90deg,#4f46e5,#a78bfa,#f59e0b,#4f46e5);
    background-size:220% 100%;
    animation:nq_shimmer 3.2s linear infinite;
    box-shadow:0 0 10px rgba(124,58,237,.45);
  }
  
  /* ─── 4. DOCK D'ONGLETS ────────────────────────────────────── */
  #jeudenotes #jeunote_app .jeunote_modeTabs{
    background:rgba(255,255,255,.72); backdrop-filter:blur(10px);
    border:1px solid rgba(99,102,241,.16); border-radius:18px;
    padding:6px; gap:4px;
    box-shadow:0 10px 30px rgba(30,41,59,.08), inset 0 1px 0 rgba(255,255,255,.85);
  }
  #jeudenotes #jeunote_app .jeunote_modeTab{
    border-radius:13px; transition:all .2s cubic-bezier(.34,1.4,.64,1);
  }
  #jeudenotes #jeunote_app .jeunote_modeTab .jeunote_modeTabIcon{
    font-size:19px; transition:transform .2s;
  }
  #jeudenotes #jeunote_app .jeunote_modeTab.jeunote_modeTabActive{
    background:linear-gradient(135deg,#4f46e5,#7c3aed);
    box-shadow:0 6px 18px rgba(79,70,229,.4), 0 0 0 3px rgba(99,102,241,.15);
    transform:translateY(-1px);
  }
  #jeudenotes #jeunote_app .jeunote_modeTab.jeunote_modeTabActive .jeunote_modeTabIcon{
    transform:scale(1.15);
  }
  
  /* ─── 5. PANNEAUX « CARTE LUMINEUSE » ──────────────────────── */
  #jeudenotes #jeunote_app .jeunote_panel,
  #jeudenotes #jeunote_app .jeunote_settingsPanel{
    border:1px solid transparent; border-radius:20px;
    background:
      linear-gradient(#ffffff,#ffffff) padding-box,
      linear-gradient(150deg, rgba(99,102,241,.4), rgba(236,72,153,.22) 45%, rgba(245,158,11,.3)) border-box;
    box-shadow:0 14px 38px rgba(30,41,59,.09), 0 2px 6px rgba(30,41,59,.04);
  }
  
  /* ─── 6. BOUTON D'ÉCOUTE : HALO PULSANT ────────────────────── */
  #jeudenotes #jeunote_app .jeunote_bigPlay{ position:relative; }
  #jeudenotes #jeunote_app .jeunote_playBtn::before,
  #jeudenotes #jeunote_app .jeunote_playBtn::after{
    content:''; position:absolute; inset:-6px; border-radius:50%;
    border:2px solid rgba(124,58,237,.35); pointer-events:none;
    animation:nq_halo 2.6s ease-out infinite;
  }
  #jeudenotes #jeunote_app .jeunote_playBtn::after{ animation-delay:1.3s; }
  #jeudenotes #jeunote_app .jeunote_playBtn:disabled::before,
  #jeudenotes #jeunote_app .jeunote_playBtn:disabled::after{ animation:none; opacity:0; }
  #jeudenotes #jeunote_app .jeunote_playBtn{
    box-shadow:0 10px 32px rgba(79,70,229,.42), inset 0 1px 0 rgba(255,255,255,.25);
  }
  
  /* ─── 7. PIANO « IVOIRE » ──────────────────────────────────── */
  #jeudenotes #jeunote_app .jeunote_piano{
    padding:8px 6px 0; border-radius:14px;
    background:linear-gradient(180deg,#eef0f6,#e3e7f0);
    box-shadow:inset 0 2px 6px rgba(30,41,59,.12);
  }
  #jeudenotes #jeunote_app .jeunote_white{
    background:linear-gradient(180deg,#ffffff 0%,#fbfbfd 60%,#eef1f7 100%);
    border-color:#cbd5e1; border-bottom-color:#a5b4fc;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.95), 0 2px 3px rgba(30,41,59,.08);
  }
  #jeudenotes #jeunote_app .jeunote_white:active{
    background:linear-gradient(180deg,#eef2ff,#e0e7ff);
  }
  #jeudenotes #jeunote_app .jeunote_black{
    background:linear-gradient(180deg,#0f172a 0%,#293548 55%,#0f172a 100%);
    box-shadow:0 5px 12px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.12),
               inset 0 -6px 0 rgba(255,255,255,.05);
  }
  
  /* ─── 8. CARTE PARTITION (signature commune) ───────────────── */
  #jeudenotes #jeunote_app .jeunote_staffArea,
  #jeudenotes #jeunote_app .ji_staffWrap,
  #jeudenotes #jeunote_app .jc_staffWrap,
  #jeudenotes #jeunote_app #jd_seqStaff{
    background:
      radial-gradient(circle at 50% 0%, rgba(99,102,241,.05), transparent 70%),
      repeating-linear-gradient(180deg, transparent 0 26px, rgba(99,102,241,.05) 26px 27px),
      #ffffff;
    border:1px solid rgba(99,102,241,.2); border-radius:16px;
    padding:16px 14px;
    box-shadow:0 8px 24px rgba(79,70,229,.1), inset 0 1px 0 #fff;
    animation:nq_staffIn .4s cubic-bezier(.34,1.3,.64,1);
  }
  
  /* ─── 9. JEU RYTHME : portées vectorielles dans les choix ──── */
  #jeudenotes #jeunote_app .jr_choiceBtn{
    border-radius:16px;
    box-shadow:0 3px 10px rgba(30,41,59,.06);
    transition:transform .15s, box-shadow .15s, border-color .15s, background .15s;
  }
  #jeudenotes #jeunote_app .jr_choiceCanvas.nqstaff_host{
    max-width:none; margin:0; height:76px; flex:1; min-width:0;
  }
  #jeudenotes #jeunote_app .jr_choiceCanvas .nqstaff_svg{
    height:100%; width:100%; max-height:none;
  }
  #jeudenotes #jeunote_app .jr_choiceBtn.jr_ansOk{
    box-shadow:0 0 0 3px rgba(22,163,74,.18), 0 8px 22px rgba(22,163,74,.22);
  }
  #jeudenotes #jeunote_app .jr_choiceBtn.jr_ansBad{
    box-shadow:0 0 0 3px rgba(220,38,38,.15);
  }
  
  /* ─── 10. BOUTONS DE RÉPONSE (intervalles / accords) ───────── */
  #jeudenotes #jeunote_app .ji_answerBtn,
  #jeudenotes #jeunote_app .jc_answerBtn{
    border-radius:14px;
    transition:transform .15s, box-shadow .15s, border-color .15s, background .15s;
  }
  #jeudenotes #jeunote_app .ji_answerName{ display:block; font-weight:800; }
  #jeudenotes #jeunote_app .ji_answerHint{
    display:block; font-size:11px; font-weight:600; color:#8b5cf6; margin-top:2px;
  }
  
  /* Sélecteur de difficulté + astuces (injectés en v3) */
  #jeudenotes #jeunote_app .ji_diffRow{
    display:flex; align-items:center; justify-content:center; gap:14px;
    flex-wrap:wrap; margin:10px 0 4px;
  }
  #jeudenotes #jeunote_app .ji_diffSeg{
    display:inline-flex; background:rgba(255,255,255,.8); border:1px solid rgba(99,102,241,.2);
    border-radius:999px; padding:4px; gap:2px; box-shadow:0 2px 8px rgba(30,41,59,.05);
  }
  #jeudenotes #jeunote_app .ji_diffSeg button{
    padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:800;
    color:#64748b; transition:all .15s;
  }
  #jeudenotes #jeunote_app .ji_diffSeg button.ji_diffOn{
    background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff;
    box-shadow:0 3px 10px rgba(79,70,229,.35);
  }
  #jeudenotes #jeunote_app .ji_hintToggle{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12.5px; font-weight:700; color:#64748b; cursor:pointer;
  }
  #jeudenotes #jeunote_app .ji_hintToggle input{ accent-color:#7c3aed; }
  
  /* ─── 11. TÊTES DE SECTION ─────────────────────────────────── */
  #jeudenotes #jeunote_app .jn3_secNum{
    background:linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff;
    box-shadow:0 4px 12px rgba(79,70,229,.3);
  }
  
  /* ─── 12. NOTEBLITZ ────────────────────────────────────────── */
  #jeudenotes #jeunote_app .nb-note-area{
    position:relative; isolation:isolate;
  }
  #jeudenotes #jeunote_app .nb-note-area::before{
    content:''; position:absolute; inset:-8%; z-index:-1; border-radius:50%;
    background:radial-gradient(circle, rgba(99,102,241,.1), transparent 65%);
  }
  #jeudenotes #jeunote_app .nb-note-area .nqstaff_svg{ max-height:210px; }
  
  /* ─── INTERACTIONS (pointeurs fins uniquement) ─────────────── */
  @media (hover:hover){
    #jeudenotes #jeunote_app .jeunote_modeTab:hover:not(.jeunote_modeTabActive){
      background:rgba(238,242,255,.9); transform:translateY(-1px);
    }
    #jeudenotes #jeunote_app .ji_answerBtn:hover:not(:disabled),
    #jeudenotes #jeunote_app .jc_answerBtn:hover:not(:disabled),
    #jeudenotes #jeunote_app .jr_choiceBtn:hover:not(:disabled){
      transform:translateY(-2px);
      border-color:#a5b4fc;
      box-shadow:0 10px 24px rgba(79,70,229,.16);
    }
    #jeudenotes #jeunote_app .jeunote_badge:hover{ transform:translateY(-1px) scale(1.02); }
  }
  #jeudenotes #jeunote_app .ji_answerBtn:active:not(:disabled),
  #jeudenotes #jeunote_app .jc_answerBtn:active:not(:disabled),
  #jeudenotes #jeunote_app .jr_choiceBtn:active:not(:disabled){ transform:scale(.97); }
  
  #jeudenotes #jeunote_app button:focus-visible{
    outline:3px solid rgba(124,58,237,.5); outline-offset:2px;
  }
  
  /* ─── ANIMATIONS ───────────────────────────────────────────── */
  @keyframes nq_staffIn{
    from{ opacity:0; transform:translateY(8px) scale(.985); }
    to  { opacity:1; transform:none; }
  }
  @keyframes nq_shimmer{ to{ background-position:-220% 0; } }
  @keyframes nq_float{
    0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); }
  }
  @keyframes nq_halo{
    0%  { transform:scale(1);    opacity:.7; }
    100%{ transform:scale(1.45); opacity:0; }
  }
  
  /* ─── ACCESSIBILITÉ ────────────────────────────────────────── */
  @media (prefers-reduced-motion:reduce){
    #jeudenotes #jeunote_app *,
    #jeudenotes #jeunote_app *::before,
    #jeudenotes #jeunote_app *::after{
      animation:none !important; transition-duration:.01ms !important;
    }
  }
  
  /* ─── RESPONSIVE ───────────────────────────────────────────── */
  @media (max-width:700px){
    #jeudenotes{ padding:6px 8px 16px; border-radius:18px; }
    #jeudenotes::before{ border-radius:18px; }
    #jeudenotes #jeunote_app .jr_choiceCanvas.nqstaff_host{ height:62px; }
  }