/* ══ RESET & BASE ══════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
#gapitLayout{overflow-y:auto;}
body{font-family:'Segoe UI',system-ui,Arial,sans-serif;
  background:#0d0d0f;color:#e8e0cc;}

/* ══ CSS VARIABLES ══════════════════════════════════════════════════════════ */
:root{
  --gold:#c8a84b;--gold-light:#e8cc80;--gold-dim:#8a6e28;
  --bg-deep:#0d0d0f;--bg-panel:#141418;--bg-card:#1a1a20;--bg-hover:#222230;
  --border:#2a2a38;--border-gold:rgba(200,168,75,.35);
  --text:#e8e0cc;--text-dim:#888098;--text-muted:#50485a;
  --toolbar-h:44px;--subbar-h:38px;--kb-h:158px;--side-w:224px;
  --radius:10px;--radius-sm:6px;
}

/* ══ TOOLBAR PRINCIPALE (haut gauche : toggles) ════════════════════════════ */
#gapitToolbar{
  position:fixed;top:0;left:0;right:0;height:var(--toolbar-h);
  background:linear-gradient(180deg,#18181e,#111116);
  border-bottom:1px solid var(--border-gold);
  display:flex;align-items:center;padding:0 10px;gap:5px;
  z-index:1000;
}
/* Boutons toggle panneau */
.tb-btn{
  display:flex;align-items:center;gap:5px;
  padding:0 13px;height:30px;border-radius:var(--radius-sm);
  background:#1c1c26;border:1px solid var(--border);
  color:var(--text-dim);font-size:12px;font-weight:600;
  cursor:pointer;transition:all .15s;white-space:nowrap;
  font-family:'Segoe UI',sans-serif;letter-spacing:.3px;
  user-select:none;
}
.tb-btn:hover{
  background:var(--bg-hover);
  border-color:var(--border-gold);
  color:var(--gold-light);
}
.tb-btn.active{
  background:linear-gradient(135deg,#2c2518,#1e1a10);
  border-color:var(--gold);
  color:var(--gold-light);
  box-shadow:0 0 10px rgba(200,168,75,.2);
}
.tb-btn-icon{font-size:13px;line-height:1;}

/* ══ SUBBAR (Volume + Stop, au-dessus de l'instrument) ═════════════════════ */
#gapitSubbar{
  position:fixed;
  top:var(--toolbar-h);
  left:0;
  right:var(--side-w);  /* s'arrête avant la colonne droite */
  height:var(--subbar-h);
  background:#0f0f14;
  border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);
  display:flex;align-items:center;padding:0 14px;
  gap:10px;              /* volume + stop collés ensemble à gauche */
  z-index:900;
}
.sb-vol{display:flex;align-items:center;gap:8px;}
.sb-vol-icon{font-size:13px;color:var(--gold-dim);}
.sb-vol-slider{
  width:100px;height:4px;
  -webkit-appearance:none;appearance:none;
  background:linear-gradient(90deg,var(--gold) var(--pct,75%),#252535 var(--pct,75%));
  border-radius:2px;cursor:pointer;outline:none;
}
.sb-vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,var(--gold-light),var(--gold));
  border:1px solid var(--gold-dim);box-shadow:0 2px 6px rgba(0,0,0,.6);cursor:pointer;
}
.sb-vol-slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;border:1px solid var(--gold-dim);
  background:radial-gradient(circle at 38% 35%,var(--gold-light),var(--gold));cursor:pointer;
}
.sb-vol-val{font-size:11px;color:var(--text-muted);font-family:monospace;min-width:24px;}
.sb-stop{
  /* Juste à côté du volume — pas de margin-left:auto */
  padding:0 14px;height:26px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,#280e0e,#180808);
  border:1px solid #3a1818;color:#d05050;
  font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.5px;
  transition:all .15s;font-family:'Segoe UI',sans-serif;
}
.sb-stop:hover{background:linear-gradient(135deg,#3c1414,#280a0a);border-color:#7a2828;color:#f07070;}

/* ══ LAYOUT PRINCIPAL ══════════════════════════════════════════════════════ */
#gapitLayout{
  position:fixed;
  top:calc(var(--toolbar-h) + var(--subbar-h));
  left:0;right:0;
  bottom:0;
  display:grid;
  grid-template-columns:1fr var(--side-w);
  grid-template-rows:auto auto;
}
/* Instrument : aligné haut-gauche, padding pour respirer sans être coupé */
#gapitMain{
  display:flex;align-items:flex-start;justify-content:flex-start;
  padding:14px 12px;overflow:visible;
  background:var(--bg-deep);
  border-right:1px solid var(--border);
  position:relative;
}

/* ══ COLONNE DROITE (Play + Réglages) ═════════════════════════════════════ */
/* Commence au même top que gapitLayout — subbar ne la couvre plus */
#gapitSide{
  background:var(--bg-panel);
  display:flex;flex-direction:column;
  overflow-y:auto;
}

/* Panneaux latéraux : toggle indépendant, s'empilent verticalement */
.side-panel{
  flex:0 0 auto;
  overflow:hidden;
  transition:max-height .28s cubic-bezier(.4,0,.2,1),
             opacity    .22s ease;
  max-height:0;
  opacity:0;
  border-bottom:1px solid var(--border);
}
.side-panel.open{
  max-height:800px;
  opacity:1;
}
.side-panel-inner{padding:10px 12px 12px;}
.side-panel-title{
  font-size:9px;font-weight:800;letter-spacing:2px;
  color:var(--gold-dim);text-transform:uppercase;
  margin-bottom:8px;
  display:flex;align-items:center;gap:6px;
}
.side-panel-title::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--border-gold),transparent);
}

/* ── Boutons Play ── */
.play-btn{
  display:block;width:100%;text-align:left;
  padding:6px 10px;margin-bottom:3px;border-radius:var(--radius-sm);
  background:#111a14;border:1px solid #1c2e20;
  color:#6ab882;font-size:11px;font-weight:600;
  cursor:pointer;transition:all .12s;
  font-family:'Segoe UI',sans-serif;
}
.play-btn:hover{background:#18251c;border-color:#2a4832;color:#8cd4a8;}
.play-btn:active{background:#0c1610;}
.play-section{margin-bottom:10px;}
.play-section-label{
  font-size:9px;color:var(--text-muted);letter-spacing:1px;
  text-transform:uppercase;margin-bottom:5px;padding-left:2px;
}

/* ── Boutons Réglages ── */
.param-btn{
  display:inline-block;
  padding:4px 9px;margin:2px;border-radius:var(--radius-sm);
  background:#141420;border:1px solid var(--border);
  color:var(--text-dim);font-size:11px;font-weight:500;
  cursor:pointer;transition:all .12s;
  font-family:'Segoe UI',sans-serif;
}
.param-btn:hover{background:var(--bg-hover);border-color:var(--border-gold);color:var(--gold-light);}
.param-btn.active{
  background:linear-gradient(135deg,#2c2518,#1e1a10);
  border-color:var(--gold);color:var(--gold-light);
}
.param-section{margin-bottom:10px;}
.param-section h4{
  font-size:9px;color:var(--text-muted);letter-spacing:1px;
  text-transform:uppercase;margin-bottom:5px;
}

/* ══ KEYBOARD PANEL (bas, pleine largeur) ══════════════════════════════════ */
#gapitKbPanel{
  display:none;position:relative;width:100%;height:var(--kb-h);grid-row:3;grid-column:1/-1;
  background:linear-gradient(180deg,#15151d 0%,#0f0f16 100%);
  border-top:1px solid var(--border-gold);
  padding:12px 18px 10px;
  overflow:hidden;           /* jamais de scroll */

  transition:transform .26s cubic-bezier(.4,0,.2,1);
  z-index:800;
}
#gapitKbPanel.open{display:block;}

/* Conteneur principal : empile les blocs verticalement */
.kb-inner{
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
  overflow:hidden;
}
/* Un bloc = une rangée de touches + sa description */
.kb-block{
  display:flex;
  flex-direction:row;
  gap:16px;
  align-items:flex-start;
  flex-shrink:0;
}
.kb-keys-wrap{flex:0 0 auto;}
.kb-title{
  font-size:9px;font-weight:800;letter-spacing:2px;
  color:var(--gold-dim);text-transform:uppercase;
  margin-bottom:7px;
}
.kb-keys{display:flex;flex-wrap:wrap;gap:5px;}
.kb-key{
  display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  padding:5px 8px;border-radius:6px;
  background:linear-gradient(180deg,#1e1c2e,#151320);
  border:1px solid #2c2840;
  box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);
  font-family:'Segoe UI',monospace;min-width:36px;
}
.kb-key-label{
  font-size:13px;font-weight:800;
  color:var(--gold-light);line-height:1;
  text-shadow:0 1px 4px rgba(200,168,75,.4);
}
.kb-key-note{font-size:9px;color:var(--text-muted);white-space:nowrap;margin-top:1px;}
.kb-desc{
  flex:1;
  font-size:11px;line-height:1.75;
  color:var(--text-dim);
  border-left:2px solid var(--border-gold);
  padding-left:13px;
}


.piano-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;}
.piano-kb{position:relative;display:flex;user-select:none;}
.pkey-w{
  width:36px;height:140px;border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,#f5f0e8 0%,#e8dcc8 100%);
  border:1px solid #b0a090;border-top:none;
  cursor:pointer;position:relative;z-index:1;margin-right:1px;
  box-shadow:0 4px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.8);
  transition:all .06s;
}
.pkey-w:hover{background:linear-gradient(180deg,#fffdf5,#f0e8d8);}
.pkey-w:active,.pkey-w.lit{background:linear-gradient(180deg,#e8d8a0,#c8b860);box-shadow:0 1px 4px rgba(0,0,0,.4);}
.pkey-b{
  width:22px;height:88px;border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,#1a1a1a,#3a3030);
  position:absolute;top:0;z-index:2;cursor:pointer;
  box-shadow:0 5px 10px rgba(0,0,0,.7),inset 0 1px 0 #555;
  transition:all .06s;
}
.pkey-b:hover{background:linear-gradient(180deg,#2a2a2a,#4a4040);}
.pkey-b:active,.pkey-b.lit{background:linear-gradient(180deg,#c8a820,#907010);}
.piano-label{display:flex;gap:4px;margin-top:2px;}
.piano-label span{font-size:9px;color:var(--text-muted);width:37px;text-align:center;}
.piano-lid{
  width:100%;height:14px;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#2a2020,#1a1010);
  border:1px solid #444;border-bottom:none;
  box-shadow:0 -2px 8px rgba(0,0,0,.5);
}
.octave-row{display:flex;gap:8px;align-items:center;}
.octave-btn{background:#1e1e28;border:1px solid var(--border);color:var(--text-dim);
  padding:4px 10px;border-radius:5px;cursor:pointer;font-size:11px;font-family:'Segoe UI',sans-serif;}
.octave-btn:hover{border-color:var(--border-gold);color:var(--gold-light);}
.octave-btn.active{border-color:var(--gold);color:var(--gold-light);background:#2a2418;}

/* ══ GAPIT SOUND PRO PATCH — toolbar titre + mobile + finition réaliste ══ */
.gapit-instrument-name{
  margin-left:6px;padding:0 12px;height:30px;display:flex;align-items:center;
  border-radius:var(--radius-sm);border:1px solid rgba(200,168,75,.42);
  background:linear-gradient(135deg,rgba(42,35,20,.92),rgba(18,16,12,.92));
  color:var(--gold-light);font-size:13px;font-weight:800;letter-spacing:.4px;
  text-shadow:0 1px 5px rgba(0,0,0,.85);white-space:nowrap;min-width:0;max-width:40vw;overflow:hidden;text-overflow:ellipsis;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 14px rgba(0,0,0,.25);
}
#gapitMain{
  background:
    radial-gradient(circle at 25% 20%,rgba(200,168,75,.075),transparent 32%),
    radial-gradient(circle at 75% 85%,rgba(90,120,180,.06),transparent 38%),
    linear-gradient(135deg,#08080a,#111117 45%,#09090c);
  touch-action:pan-y pan-x;
}
#gapitMain > *{
  filter:drop-shadow(0 28px 32px rgba(0,0,0,.55));
}
.side-panel-inner{
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.02));
}
.play-btn,.param-btn,.tb-btn,.sb-stop{ -webkit-tap-highlight-color:transparent; }
.play-btn:active,.param-btn:active,.tb-btn:active{ transform:translateY(1px) scale(.99); }

/* Finitions générales : bois verni, métal, touches et peaux plus authentiques */
[class*="body"],[class*="main"]{
  -webkit-font-smoothing:antialiased;
}
[class*="wood"],.harp-frame,.uke-body,.guitar-body,.barbat-body,.cithare-body,.violin-body,.cb-body{
  background-blend-mode:overlay,normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -18px 28px rgba(50,18,4,.22),0 18px 35px rgba(0,0,0,.45) !important;
}
[class*="key"],.piano-white,.org-key,.acc-white{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -8px 14px rgba(80,60,30,.18),0 3px 6px rgba(0,0,0,.35);
}
[class*="black"],.piano-black,.acc-black{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -7px 10px rgba(0,0,0,.85),0 4px 7px rgba(0,0,0,.58);
}
[class*="string"],.string{
  filter:drop-shadow(0 0 1px rgba(255,240,190,.75));
}
[class*="metal"],.sax-body,.trumpet-body,.tri-shape,.xylo-bar{
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.42)) saturate(1.08) contrast(1.04);
}
[class*="drum"],.tamb-skin,.drum-head{
  box-shadow:inset 0 0 22px rgba(255,245,210,.20),inset 0 -14px 24px rgba(80,40,20,.20),0 12px 28px rgba(0,0,0,.42);
}

@media (max-width:760px) and (orientation:portrait){
  :root{--toolbar-h:82px;--subbar-h:38px;--kb-h:138px;--side-w:0px;}
  #gapitToolbar{height:var(--toolbar-h);align-content:flex-start;align-items:flex-start;flex-wrap:wrap;padding:7px 8px;gap:5px;}
  .tb-btn{height:29px;padding:0 10px;font-size:11px;}
  .gapit-instrument-name{order:5;flex:1 1 100%;max-width:none;margin-left:0;height:32px;justify-content:center;font-size:14px;}
  #gapitSubbar{top:var(--toolbar-h);right:0;padding:0 10px;justify-content:center;border-right:0;}
  #gapitLayout{top:calc(var(--toolbar-h) + var(--subbar-h));bottom:0;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;}
  #gapitMain{justify-content:center;align-items:flex-start;padding:12px 8px 10px;border-right:0;overflow:visible;}
  #gapitSide{background:linear-gradient(180deg,rgba(22,16,10,.98),rgba(10,9,8,.98));border-bottom:1px solid rgba(255,211,109,.22);overflow:hidden;}
  .side-panel.open{max-height:34vh;}
  .side-panel-inner{padding:8px 10px 10px;}
  .play-btn{display:inline-block;width:auto;margin:3px;padding:7px 10px;}
  .param-btn{padding:7px 10px;}
  .kb-desc{display:none;}
  #gapitKbPanel{height:var(--kb-h);padding:10px;}
}

@media (max-width:760px) and (orientation:landscape){
  :root{--side-w:196px;--kb-h:118px;}
  .gapit-instrument-name{max-width:30vw;font-size:12px;padding:0 8px;}
}


/* ══ GAPIT SOUND V2 — panneaux au-dessus + lisibilité premium ══ */
:root{
  --text:#fff8e6;--text-dim:#e9dcbd;--text-muted:#c7b88e;--side-w:0px;
  --toolbar-h:48px;--subbar-h:40px;
}
body{color:var(--text);background:#07080c;text-shadow:0 1px 2px rgba(0,0,0,.75);}
#gapitToolbar{height:var(--toolbar-h);background:linear-gradient(180deg,#241a10,#100d0b);box-shadow:0 6px 22px rgba(0,0,0,.55);}
.tb-btn{color:#f5e8c7;background:linear-gradient(180deg,#33261a,#18130f);border-color:rgba(255,211,109,.38);font-size:13px;}
.tb-btn:hover,.tb-btn.active{color:#fff3bd;border-color:#ffd36d;background:linear-gradient(135deg,#4a351a,#20170d);}
.gapit-instrument-name{color:#fff3bd;background:linear-gradient(135deg,rgba(85,58,20,.96),rgba(18,13,7,.96));border-color:rgba(255,211,109,.7);font-size:14px;}
#gapitSubbar{right:0;background:linear-gradient(180deg,#15100b,#0b0a09);border-bottom:1px solid rgba(255,211,109,.28);}
.sb-vol-val,.sb-vol-icon{color:#ffe0a0}.sb-stop{color:#fff3bd;background:#2d1b10;border:1px solid rgba(255,211,109,.45);border-radius:8px;padding:6px 12px;cursor:pointer;}
#gapitLayout{top:calc(var(--toolbar-h) + var(--subbar-h));bottom:0;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;}
#gapitSide{background:linear-gradient(180deg,rgba(22,16,10,.98),rgba(10,9,8,.98));border-bottom:1px solid rgba(255,211,109,.22);overflow:hidden;}
#gapitPanelBar{grid-row:2;grid-column:1;}
#gapitMain{grid-row:1;grid-column:1;border-right:0;justify-content:center;align-items:flex-start;padding:18px 14px 22px;overflow:visible;background:radial-gradient(circle at 50% 6%,rgba(255,211,109,.11),transparent 34%),linear-gradient(135deg,#08090d,#121217 46%,#07080b);}
.side-panel{border-bottom:1px solid rgba(255,211,109,.18);}
.side-panel.open{max-height:38vh;opacity:1;}
.side-panel-inner{padding:12px 16px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.04));}
.side-panel-title{font-size:12px;color:#ffe0a0;text-shadow:0 2px 5px rgba(0,0,0,.8);letter-spacing:1.2px;}
.play-section-label,.param-section h4,.kb-title{color:#f1d99a;font-size:11px;}
.play-btn,.param-btn{color:#fff6dd;font-size:13px;border-color:rgba(255,211,109,.30);background:linear-gradient(180deg,#242019,#14120f);text-shadow:0 1px 2px #000;}
.play-btn:hover,.param-btn:hover,.param-btn.active{color:#fff3bd;border-color:#ffd36d;background:linear-gradient(135deg,#4a351a,#20170d);}
.kb-desc,.kb-key-note{color:#e8dcc2}.kb-key-label{color:#fff2b5}
button{font-family:'Segoe UI',system-ui,Arial,sans-serif;}
@media (min-width:761px){
  
  .side-panel{border-right:0;border-bottom:1px solid rgba(255,211,109,.16);}
  .play-btn{display:inline-block;width:auto;margin:3px 4px 3px 0;}
}
@media (max-width:760px) and (orientation:portrait){
  :root{--toolbar-h:84px;--subbar-h:40px;--kb-h:138px;}
  #gapitToolbar{height:var(--toolbar-h);align-content:flex-start;align-items:flex-start;flex-wrap:wrap;padding:7px 8px;gap:5px;}
  .tb-btn{height:31px;padding:0 10px;font-size:12px;}
  .gapit-instrument-name{order:5;flex:1 1 100%;max-width:none;margin-left:0;height:34px;justify-content:center;font-size:15px;}
  #gapitSubbar{top:var(--toolbar-h);justify-content:center;padding:0 10px;}
  #gapitLayout{top:calc(var(--toolbar-h) + var(--subbar-h));grid-template-rows:auto auto auto;}
  
  .side-panel.open{max-height:32vh;}
  #gapitMain{grid-row:1;padding:12px 8px 18px;}
}

/* ══ GAPIT SOUND V3 — corrections ergonomie 2026-05-23 ════════════════════ */
/* Stop collé au volume et aligné à gauche */
#gapitSubbar{
  justify-content:flex-start !important;
  align-items:center !important;
  gap:6px !important;
  padding-left:12px !important;
}
.sb-vol{margin:0 !important; flex:0 0 auto !important; gap:6px !important;}
.sb-stop{margin-left:0 !important; flex:0 0 auto !important; height:28px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;}
/* Le nom n'est plus affiché à côté de Réglages */
.gapit-instrument-name{display:none !important;}
/* Toolbar plus lisible sans le titre collé aux boutons */
#gapitToolbar{justify-content:flex-start !important;}

/* Clavier : présentation plus claire, moins texte brut */
#gapitKbPanel{
  background:linear-gradient(180deg,rgba(18,14,10,.98),rgba(8,8,12,.98)) !important;
  border-top:1px solid rgba(255,211,109,.35) !important;
  box-shadow:0 -14px 36px rgba(0,0,0,.48) !important;
}
.kb-inner{max-width:980px;margin:0 auto;width:100%;}
.kb-block{
  display:grid !important;
  grid-template-columns:minmax(260px,auto) 1fr !important;
  gap:14px !important;
  align-items:center !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,211,109,.18) !important;
  border-radius:16px !important;
  padding:12px 14px !important;
}
.kb-title{
  font-size:12px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:#ffe3a1 !important;
  margin-bottom:8px !important;
}
.kb-keys{display:flex !important;flex-wrap:wrap !important;gap:8px !important;}
.kb-key{
  min-width:54px !important;
  height:auto !important;
  min-height:44px !important;
  padding:7px 10px !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#fff7df,#d7c9a3) !important;
  border:1px solid rgba(255,211,109,.55) !important;
  color:#1d1307 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 5px 12px rgba(0,0,0,.36) !important;
}
.kb-key-label{color:#221303 !important;text-shadow:none !important;font-size:14px !important;font-weight:900 !important;}
.kb-key-note{color:#6c4a18 !important;font-size:10px !important;font-weight:750 !important;}
.kb-desc{
  color:#fff1cd !important;
  background:rgba(0,0,0,.18) !important;
  border-left:3px solid #ffd36d !important;
  border-radius:0 12px 12px 0 !important;
  padding:10px 12px !important;
  line-height:1.55 !important;
  font-size:12px !important;
  text-shadow:0 1px 2px #000 !important;
}
@media (max-width:760px){
  #gapitSubbar{justify-content:flex-start !important;overflow-x:auto !important;}
  .sb-vol-slider{width:92px !important;}
  .kb-block{grid-template-columns:1fr !important;gap:8px !important;padding:10px !important;}
  .kb-desc{display:block !important;font-size:11px !important;line-height:1.35 !important;}
  .kb-key{min-width:48px !important;min-height:38px !important;padding:6px 8px !important;}
}


/* ══ GAPIT SOUND V5 — option Partition séparée + auditorium clair ═══════════ */
#gapitMain{
  background-image:
    radial-gradient(circle at 50% 6%,rgba(255,231,156,.26),transparent 34%),
    linear-gradient(180deg,rgba(54,34,16,.20),rgba(16,10,8,.38)),
    url('auditorium_bg.svg') !important;
  background-size:cover !important;
  background-position:center !important;
}
#gapitLayout{background:#1a100b !important;}
.tb-btn[data-panel="score"]{border-color:rgba(255,211,109,.42);}
.tb-btn[data-panel="score"].active{background:linear-gradient(180deg,#5b3b12,#241606);color:#ffe7a9;}
.gapit-scoretools{
  margin:8px 0 12px;padding:10px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,246,216,.09),rgba(0,0,0,.14));
  border:1px solid rgba(255,211,109,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 20px rgba(0,0,0,.22);
}
.gapit-score-title{font-size:12px;font-weight:900;color:#ffe1a1;margin-bottom:8px;letter-spacing:.05em;text-transform:uppercase;}
.gapit-score-help{font-size:12px;line-height:1.45;color:#fff2cf;margin:0 0 8px;text-shadow:0 1px 2px #000;}
.gapit-score-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.gapit-score-actions button{
  border:1px solid rgba(255,211,109,.42);background:linear-gradient(180deg,#322417,#17110c);
  color:#fff1c9;border-radius:9px;padding:6px 9px;font-size:12px;font-weight:700;cursor:pointer;
}
.gapit-score-actions button.active{background:linear-gradient(180deg,#2a522b,#142516);border-color:#78d47d;color:#eaffdf;}
.gapit-score-actions button:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.5);}
.gapit-score-staff{background:#fff7df;color:#271503;border-radius:12px;border:1px solid rgba(255,211,109,.55);padding:8px;overflow-x:auto;box-shadow:0 8px 18px rgba(0,0,0,.34);}
.gapit-score-lines{position:relative;min-height:72px;min-width:280px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 11px,#8b7552 12px,transparent 13px);border-radius:8px;}
.gapit-note-dot{position:absolute;width:12px;height:9px;border-radius:50%;background:#1b1208;transform:rotate(-16deg);box-shadow:0 1px 0 rgba(255,255,255,.16);}
.gapit-note-dot::after{content:'';position:absolute;right:-3px;bottom:4px;width:2px;height:22px;background:#1b1208;border-radius:2px;transform:rotate(16deg);}
.gapit-score-notes{margin-top:8px;font-size:12px;line-height:1.45;color:#fff2cf;word-break:break-word;max-height:76px;overflow:auto;text-shadow:0 1px 2px #000;}
.gapit-score-status{font-size:11px;line-height:1.35;color:#ffe1a1;margin-top:7px;min-height:16px;}
.gapit-score-locked{padding:10px;border-radius:12px;border:1px dashed rgba(255,211,109,.38);color:#ffe1a1;background:rgba(0,0,0,.20);font-size:12px;line-height:1.45;}
@media(max-width:760px){.gapit-scoretools{padding:9px}.gapit-score-actions button{font-size:11px;padding:6px 8px}.gapit-score-staff{padding:6px}.gapit-score-lines{min-width:230px}}

/* ══ PANEL BAR (Play + Réglages, entre instrument et clavier) ══════════════ */
#gapitPanelBar{
  display:flex;flex-direction:row;flex-wrap:wrap;
  border-top:1px solid rgba(255,211,109,.28);
  background:linear-gradient(180deg,rgba(22,16,10,.98),rgba(10,9,8,.98));
}
#gapitPanelBar .side-panel{
  flex:1 1 240px;
  max-height:0;overflow:hidden;
  transition:max-height .28s cubic-bezier(.4,0,.2,1);
  border-bottom:0;
  border-right:1px solid rgba(255,211,109,.16);
}
#gapitPanelBar .side-panel:last-child{border-right:0;}
#gapitPanelBar .side-panel.open{max-height:320px;}
#gapitPanelBar .side-panel-inner{padding:10px 14px 12px;}

#gapitSide{display:none!important;}

/* ══ PANELS AS CORNER POPUPS ══════════════════════════════════════════════ */

/* Base: all panels are fixed corner popups, hidden by default */
#gapitPlayPanel,
#gapitParamPanel,
#gapitKbPanel,
#gapitScorePanel,
#gapitLessonPanel {
  position:fixed !important;
  z-index:9000 !important;
  display:none !important;
  width:min(340px,90vw) !important;
  max-height:calc(100dvh - var(--toolbar-h) - var(--subbar-h) - 24px) !important;
  overflow-y:auto !important;
  border-radius:16px !important;
  border:1px solid rgba(255,211,109,.38) !important;
  background:linear-gradient(180deg,rgba(28,20,12,.97),rgba(10,9,8,.98)) !important;
  box-shadow:0 16px 48px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.08) !important;
  padding:14px 16px !important;
}

/* Open state */
#gapitPlayPanel.open,
#gapitParamPanel.open,
#gapitKbPanel.open,
#gapitScorePanel.open,
#gapitLessonPanel.open { display:block !important; }

/* 📚 Apprendre — top-center under subbar */
#gapitLessonPanel {
  top:calc(var(--toolbar-h) + var(--subbar-h) + 8px) !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(480px,94vw) !important;
  max-height:calc(100dvh - var(--toolbar-h) - var(--subbar-h) - 24px) !important;
}

/* ▶ Play — top-left under subbar */
#gapitPlayPanel {
  top:calc(var(--toolbar-h) + var(--subbar-h) + 8px) !important;
  left:8px !important;
}

/* ⚙ Réglages — top-right under subbar */
#gapitParamPanel {
  top:calc(var(--toolbar-h) + var(--subbar-h) + 8px) !important;
  right:8px !important;
  left:auto !important;
}

/* ⌨ Clavier — bottom-left */
#gapitKbPanel {
  bottom:8px !important;
  left:8px !important;
  top:auto !important;
  width:min(680px,96vw) !important;
  height:auto !important;
  grid-row:unset !important;
  grid-column:unset !important;
  transform:none !important;
}

/* 🎼 Partition — bottom-right */
#gapitScorePanel {
  bottom:8px !important;
  right:8px !important;
  left:auto !important;
  top:auto !important;
}

/* Remove any old panel bar or side */
#gapitPanelBar { display:none !important; }
#gapitSide { display:none !important; }

/* Layout takes full space — no reserved rows for panels */
#gapitLayout {
  bottom:0 !important;
  grid-template-rows:1fr !important;
}
#gapitMain { grid-row:1 !important; overflow:auto !important; }


/* ── Toolbar & Subbar hidden (controlled by index.php) ── */
#gapitToolbar{display:none!important;}
#gapitSubbar{display:none!important;}
#gapitLayout{top:0!important;}


/* ══ PANELS FULLSCREEN FIXED + DRAGGABLE HANDLES ══════════════════════════ */

/* Positions initiales des panels (dans iframe plein écran = coords page) */
#gapitPlayPanel  { top:88px !important; left:12px !important; right:auto !important; }
#gapitParamPanel { top:88px !important; right:12px !important; left:auto !important; }
#gapitKbPanel    { bottom:12px !important; left:12px !important; top:auto !important; right:auto !important; }
#gapitScorePanel { bottom:12px !important; right:12px !important; top:auto !important; left:auto !important; }
#gapitLessonPanel{ top:88px !important; left:50% !important; transform:translateX(-50%) !important; }

/* Ajouter une poignée de drag via pseudo-element titre */
#gapitPlayPanel::before  { content:"▶ Play"; }
#gapitParamPanel::before { content:"⚙ Réglages"; }
#gapitKbPanel::before    { content:"⌨ Clavier"; }
#gapitScorePanel::before { content:"🎼 Partition"; }
#gapitLessonPanel::before{ content:"📚 Apprendre"; }

#gapitPlayPanel::before,
#gapitParamPanel::before,
#gapitKbPanel::before,
#gapitScorePanel::before,
#gapitLessonPanel::before {
  display:flex;align-items:center;
  padding:6px 12px 5px;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#ffd36d;border-bottom:1px solid rgba(255,211,109,.15);
  cursor:grab;user-select:none;
}


/* ── Fond transparent pour voir auditorium.png ── */
html, body { background:transparent !important; }
#gapitLayout { background:transparent !important; }
#gapitMain   { background:transparent !important; }


/* ══ PARTITION GRAPHIQUE ══════════════════════════════════════════════════ */
.gapit-score-staff-wrap{
  overflow-x:auto;overflow-y:hidden;
  border:1px solid rgba(255,211,109,.25);border-radius:8px;
  background:rgba(8,5,2,.6);
  margin:8px 0 4px;padding:4px 0;
}
.gapit-score-staff{display:inline-block;min-width:400px;}
.gapit-score-staff svg{display:block;}
.gapit-score-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
.gapit-score-actions button{
  font-size:11px;padding:4px 9px;border-radius:6px;cursor:pointer;
  border:1px solid rgba(255,211,109,.35);background:rgba(255,255,255,.07);
  color:#e8d8b0;font-family:"Segoe UI",sans-serif;font-weight:700;
}
.gapit-score-actions button:hover{background:rgba(255,211,109,.18);border-color:#ffd36d;color:#fff3bd;}
.gapit-score-actions button.is-on,
.gapit-score-actions button.active{background:rgba(42,120,54,.48);border-color:#78d47d;color:#eaffdf;box-shadow:0 0 0 1px rgba(120,212,125,.18) inset;}
.gapit-score-actions button.is-off{background:rgba(110,45,35,.32);border-color:#d98a72;color:#ffd2c5;}
.gapit-score-actions button:disabled{opacity:.4;cursor:not-allowed;}
.gapit-score-notes{font-size:10px;color:#8a7860;min-height:14px;margin-bottom:2px;word-break:break-all;}
.gapit-score-status{font-size:10px;color:#aaa;min-height:14px;margin-top:3px;font-style:italic;}
.gapit-score-locked{font-size:11px;color:#ff9966;padding:6px 0;display:none;}
.gapit-scoretools.locked .gapit-score-actions button{opacity:.3;pointer-events:none;}


/* ══ GAPIT CONTRÔLES SOUS INSTRUMENT ══════════════════════════════════════ */
.gapit-instr-params{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
  padding:8px 12px;
  background:rgba(10,8,4,.82);
  border-top:1px solid rgba(255,211,109,.18);
}
.gapit-ip-label{
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,211,109,.55);white-space:nowrap;margin-right:2px;
}
.gapit-ip-label:not(:first-child){
  margin-left:10px;
  padding-left:10px;
  border-left:1px solid rgba(255,211,109,.18);
}
button.gapit-ib{
  padding:4px 10px;border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,211,109,.28);
  color:#d4c49a;font-size:11px;font-weight:700;
  cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
  font-family:'Segoe UI',system-ui,sans-serif;
}
button.gapit-ib:hover{
  background:rgba(255,211,109,.14);
  border-color:rgba(255,211,109,.6);
  color:#fff3bd;
}
button.gapit-ib.active{
  background:linear-gradient(135deg,rgba(255,211,109,.22),rgba(255,180,60,.15));
  border-color:rgba(255,211,109,.72);
  color:#ffe8a0;
  box-shadow:0 0 8px rgba(255,211,109,.18);
}

/* ── Réglages sous instrument — 2 lignes ── */
.piano-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.piano-body .gapit-instr-params {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 520px;
}
.piano-body .gapit-ip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 6px;
}
/* ── Highlight touches ── */
.pkey-w.lit {
  background: linear-gradient(180deg, #ffe840, #c09000) !important;
  box-shadow: 0 0 10px rgba(255,210,0,.7) !important;
}
.pkey-b.lit {
  background: linear-gradient(180deg, #e0c000, #806000) !important;
  box-shadow: 0 0 8px rgba(255,210,0,.8) !important;
}