/* Ékole Music Studio — cabine DJ (signalement w0h6u7 du 06/10 : « ressemble à une vraie cabine »), filtre audible (e16oqy),
   clavier intelligent (91k08g). La cabine est un objet : une console sombre dans les deux thèmes, couleurs Ékole en accent
   (platine A bleue, platine B rouge, pads aux cinq couleurs). Le balisage des platines est rendu par dj.js. */
.booth{--hw:#161C29;--hw-2:#1E2636;--hw-line:rgba(255,255,255,.08);--hw-ink:#EEF1F7;--hw-mute:#9AA3B6;
  display:grid;grid-template-columns:minmax(0,1fr) 210px minmax(0,1fr);gap:14px;padding:16px;border-radius:24px;
  background:linear-gradient(180deg,var(--hw-2),var(--hw));border:1px solid var(--hw-line);color:var(--hw-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(7,9,14,.28)}
:root[data-theme="dark"] .booth{--hw:#0B0F18;--hw-2:#121826}
.booth .pill{background:rgba(255,255,255,.08);color:var(--hw-mute);border-color:var(--hw-line)}
.booth select{background-color:rgba(255,255,255,.06);border-color:var(--hw-line);color:var(--hw-ink);padding:8px 34px 8px 10px;font-size:13px;
  background-image:linear-gradient(45deg,transparent 50%,var(--hw-mute) 50%),linear-gradient(135deg,var(--hw-mute) 50%,transparent 50%)}
.booth select option{background:#161C29;color:#EEF1F7}
.booth .btn.ghost,.booth .ibtn{color:var(--hw-ink);border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.booth .btn.ghost:hover,.booth .ibtn:hover{border-color:var(--c-sky);color:#fff}
.booth .btn.ghost.on{background:rgba(77,181,227,.18);border-color:var(--c-sky);color:#fff}
.booth output{color:var(--hw-mute)}
.booth .lab{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--hw-mute)}
.booth .lab.center{text-align:center}

/* ---------- platine ---------- */
.deck{display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--hw-line)}
#deckA{--deck:var(--c-blue);--deck-2:var(--c-sky)}
#deckB{--deck:var(--c-red);--deck-2:var(--c-yellow)}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dname{font-family:var(--f-display);font-weight:800;font-size:16px;color:var(--deck-2)}
.dhead .pill{max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dload{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center}
.dload .filebtn{border-style:solid;border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:var(--hw-ink);padding:7px 10px}
.dload .fname{display:none}
.dmain{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:16px;align-items:center}
.platter{--pl:clamp(124px,12vw,170px);width:var(--pl);height:var(--pl);border-radius:50%;padding:7px;
  background:conic-gradient(from 210deg,var(--deck),var(--deck-2),var(--deck));box-shadow:0 0 0 3px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.45)}
.disc{position:relative;width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  background:repeating-radial-gradient(circle at 50% 50%,#0b0b0d 0 2px,#19191d 2px 4px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.05)}
.disc::before{content:"";position:absolute;inset:33%;border-radius:50%;background:radial-gradient(circle,#fff 0 7%,var(--deck) 8% 100%);box-shadow:0 0 0 3px rgba(0,0,0,.35)}
.disc::after{content:"";position:absolute;top:7%;left:50%;width:5px;height:16%;margin-left:-2.5px;border-radius:3px;background:rgba(255,255,255,.9)}
.disc span{position:relative;z-index:1;font-family:var(--f-display);font-weight:800;font-size:20px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);transform:translateY(-1px)}
.disc.playing{animation:spin 1.8s linear infinite}
.eq{display:flex;justify-content:space-around;gap:8px;min-width:0}
.eq label,.fader{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--hw-mute)}
.fader{min-width:34px}
.vslider{writing-mode:vertical-lr;direction:rtl;width:24px;height:104px;margin:0;cursor:pointer;accent-color:var(--deck-2,var(--c-sky))}
.vslider.tall{height:132px;accent-color:var(--deck,var(--c-blue))}
.fader output{display:none}
.vu{height:8px;border-radius:4px;background:rgba(127,127,127,.18);overflow:hidden;min-width:90px}
.vu i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c-green),var(--c-yellow) 70%,var(--c-red));transition:width .08s linear}
.vu.vert{width:12px;min-width:12px;height:132px;display:flex;align-items:flex-end;background:rgba(0,0,0,.45);border:1px solid var(--hw-line);border-radius:6px}
.vu.vert i{width:100%;height:0;background:linear-gradient(0deg,var(--c-green),var(--c-yellow) 70%,var(--c-red));transition:height .08s linear}
.ctl{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px}
.ctl b{width:84px;font-size:11.5px;font-weight:800;color:var(--hw-ink)}
.ctl input{flex:1;min-width:110px}
.ctl output{width:76px;text-align:right}
.ctl .lr{order:5;flex-basis:100%;padding-left:94px;font-size:10.5px;color:var(--hw-mute);letter-spacing:.03em}
.ctl span:empty{display:none}
.booth input[type=range]:not(.vslider)::-webkit-slider-runnable-track{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14)}
.booth input[type=range]:not(.vslider)::-webkit-slider-thumb{background:var(--deck-2,var(--c-sky));border-color:var(--hw);box-shadow:0 0 0 1.5px var(--deck-2,var(--c-sky)),0 2px 6px rgba(0,0,0,.5)}
.booth input[type=range]:not(.vslider)::-moz-range-thumb{background:var(--deck-2,var(--c-sky));border-color:var(--hw)}
.booth input[type=range]:not(.vslider)::-moz-range-progress{background:var(--deck-2,var(--c-sky))}
.tbtns{display:grid;grid-template-columns:auto minmax(0,1.4fr) auto minmax(0,1fr) minmax(0,1fr);gap:6px}
.tbtns .btn{padding-left:8px;padding-right:8px}
.tbtns .btn:not(.ghost){background:var(--deck);box-shadow:0 2px 12px rgba(0,0,0,.35)}

/* ---------- mixeur central ---------- */
.mixer{display:flex;flex-direction:column;gap:12px;align-items:stretch;padding:14px 12px;border-radius:18px;background:rgba(0,0,0,.25);border:1px solid var(--hw-line)}
.mxhead{display:flex;align-items:center;justify-content:space-between;font-family:var(--f-display);font-size:15px}
.help{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:var(--hw-mute);font-weight:800;cursor:pointer;line-height:1}
.help:hover{color:#fff;border-color:var(--c-sky)}
.mvu{display:flex;flex-direction:column;gap:6px}
.vu.big{height:14px;border-radius:7px;background:rgba(0,0,0,.45);border:1px solid var(--hw-line)}
.mfader{display:flex;flex-direction:column;gap:6px}
.xfwrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--hw-line)}
.xfwrap .lab{font-size:13px;color:var(--hw-ink)}
#djXf::-webkit-slider-runnable-track{height:10px;background:linear-gradient(90deg,var(--c-blue),rgba(255,255,255,.12) 50%,var(--c-red))}
#djXf::-webkit-slider-thumb{width:16px;height:30px;margin-top:-11px;border-radius:5px;background:#E9EDF5;border:2px solid #0B0F18;box-shadow:0 2px 8px rgba(0,0,0,.6)}
#djXf::-moz-range-track{height:10px;background:linear-gradient(90deg,var(--c-blue),rgba(255,255,255,.12) 50%,var(--c-red))}
#djXf::-moz-range-thumb{width:14px;height:28px;border-radius:5px;background:#E9EDF5;border:2px solid #0B0F18}
.btn.rec{background:var(--c-red);box-shadow:0 2px 12px rgba(230,57,70,.35)}
.btn.rec.danger{animation:recpulse 1.2s ease-in-out infinite;color:#fff}
@keyframes recpulse{50%{box-shadow:0 0 0 6px rgba(230,57,70,.25)}}

/* ---------- pads ---------- */
.pads{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;align-items:start}
.pad{display:flex;flex-direction:column;gap:6px;min-width:0}
.padbtn{aspect-ratio:1;width:100%;border:0;border-radius:16px;color:#fff;font-weight:800;font-size:12.5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.25),0 6px 16px rgba(7,9,14,.22);transition:transform .08s var(--ease),filter .08s var(--ease);text-shadow:0 1px 2px rgba(0,0,0,.35);overflow:hidden;padding:6px}
.padbtn .e{font-size:24px}
.pad:nth-child(1) .padbtn{background:var(--c-blue)} .pad:nth-child(2) .padbtn{background:#7B5BD6}
.pad:nth-child(3) .padbtn{background:var(--c-red)} .pad:nth-child(4) .padbtn{background:#E8762B}
.pad:nth-child(5) .padbtn{background:#C79A00} .pad:nth-child(6) .padbtn{background:#3E9A24}
.pad:nth-child(7) .padbtn{background:#1F93BF} .pad:nth-child(8) .padbtn{background:#C2367F}
.padbtn:hover{filter:brightness(1.1)}
.padbtn.hit{transform:scale(.93);filter:brightness(1.3)}
.padbtn:disabled{opacity:.45;cursor:default;filter:saturate(.5)}
.pad select{font-size:11.5px;padding:6px 26px 6px 8px;background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%}
.djfoot{display:flex;flex-direction:column;gap:10px}

/* ---------- clavier intelligent ---------- */
.kopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kbd{position:relative;height:160px;display:flex;user-select:none;touch-action:none;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);background:var(--bg-2);box-shadow:var(--shadow)}
.kbd .wk{flex:1;position:relative;background:linear-gradient(180deg,#FFFFFF,#F1F0EA);border-right:1px solid #CFCFC8;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-size:11px;color:#6A6F7C;font-weight:800;cursor:pointer}
.kbd .wk.on{background:linear-gradient(180deg,#BFE6F6,var(--c-sky));color:#0B2A3A}
.kbd .wk.out{background:#E4E3DC;color:#A7A9B0}
.kbd .bk{position:absolute;top:0;width:7%;height:60%;background:linear-gradient(180deg,#2A3142,#151A26);border-radius:0 0 7px 7px;z-index:2;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,.35)}
.kbd .bk.on{background:linear-gradient(180deg,var(--c-sky),#1F7FA8)}
.kbd .bk.out{background:#4A5163}
#kbLevel{width:0}
.chead .vu{width:110px}

/* ---------- aide ---------- */
.help-dlg{max-width:560px}
.helplist{margin:0 0 14px;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.45}
.helplist b{color:var(--accent-ink)}

@media (max-width:1240px){ .booth{grid-template-columns:repeat(2,minmax(0,1fr))} .mixer{grid-column:1/-1;order:3;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-items:center} .mixer .mxhead{grid-column:1/-1} .pads{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:760px){ .booth{grid-template-columns:minmax(0,1fr);padding:12px} .dmain{grid-template-columns:auto minmax(0,1fr)} .dmain .fader,.dmain .vu.vert{display:none} .ctl .lr{padding-left:0} }