:root{
  --bg:#080a12; --bg2:#0c1020; --panel:rgba(20,26,44,.6); --panel-solid:#121728;
  --line:rgba(255,255,255,.08); --txt:#e9edf6; --muted:#8b93ab;
  --cyan:#25e6d3; --mag:#ff4fd8; --violet:#8b5cff; --accent:var(--cyan);
  --glass:blur(14px) saturate(140%);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif; color:var(--txt);
  background:radial-gradient(1200px 800px at 80% -10%,#161a34 0,transparent 60%),
             radial-gradient(1000px 700px at 0% 100%,#1a1030 0,transparent 55%),var(--bg);
  overflow:hidden;
}
.hidden{display:none !important}
.muted{color:var(--muted)}

/* ---- aurore animée en fond ---- */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;filter:blur(70px);opacity:.5;pointer-events:none}
.aurora span{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:float 18s ease-in-out infinite}
.aurora span:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-10vw;background:var(--violet);animation-delay:0s}
.aurora span:nth-child(2){width:40vw;height:40vw;right:-6vw;top:10vh;background:var(--mag);animation-delay:-6s}
.aurora span:nth-child(3){width:38vw;height:38vw;left:30vw;bottom:-16vw;background:var(--cyan);animation-delay:-12s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6vw,4vh) scale(1.15)}66%{transform:translate(-5vw,-3vh) scale(.9)}}

/* ---- topbar ---- */
.topbar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;
  padding:14px 24px;background:rgba(10,13,24,.55);backdrop-filter:var(--glass);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;font-size:24px;color:#04121a;
  background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 26px rgba(37,230,211,.55);animation:pulse 4s ease-in-out infinite}
.logo svg{width:26px;height:26px}
.modal-logo svg{width:32px;height:32px}
@keyframes pulse{0%,100%{box-shadow:0 0 22px rgba(37,230,211,.45)}50%{box-shadow:0 0 40px rgba(139,79,255,.7)}}
.brand-txt h1{margin:0;font-size:20px;letter-spacing:3px;font-weight:800;
  background:linear-gradient(90deg,var(--cyan),#fff 60%,var(--mag));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-txt small{color:var(--muted);letter-spacing:1px;font-size:11px}
.topbar-right{display:flex;align-items:center;gap:10px}
.pill{font-size:12px;color:var(--cyan);border:1px solid rgba(37,230,211,.35);padding:4px 10px;border-radius:999px;background:rgba(37,230,211,.08)}

.btn{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--txt);padding:9px 15px;border-radius:11px;cursor:pointer;font-size:13px;transition:.18s}
.btn:hover{border-color:rgba(255,255,255,.25);transform:translateY(-1px)}
.btn.ghost{background:transparent}
.btn.accent{background:linear-gradient(135deg,var(--cyan),var(--violet));border:none;color:#06121a;font-weight:700;box-shadow:0 6px 20px rgba(37,230,211,.25)}
.btn.accent:hover{box-shadow:0 8px 28px rgba(139,79,255,.4)}
.btn.small{padding:6px 11px;font-size:12px}
.mini{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px}
.mini:hover{color:var(--mag)}

/* ---- layout ---- */
.layout{position:relative;z-index:1;display:grid;grid-template-columns:320px 1fr;gap:18px;padding:18px 24px;height:calc(100vh - 73px - 96px);overflow:hidden}
.sidebar{display:flex;flex-direction:column;gap:16px;overflow-y:auto;padding-right:4px}
.panel{background:var(--panel);backdrop-filter:var(--glass);border:1px solid var(--line);border-radius:18px;padding:16px}
.panel-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-bottom:12px}

/* ---- roue camelot ---- */
.wheel{width:100%;aspect-ratio:1;position:relative}
.wheel svg{width:100%;height:100%;overflow:visible}
.wheel .seg{cursor:pointer;transition:.15s;stroke:rgba(0,0,0,.35);stroke-width:.6}
.wheel .seg:hover{filter:brightness(1.25)}
.wheel .seg.dim{opacity:.16}
.wheel .seg.sel{stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 0 6px #fff)}
.wheel .seg.compat{stroke:rgba(255,255,255,.7);stroke-width:1.2}
.wheel .lab{font-size:8.5px;font-weight:700;fill:#06121a;pointer-events:none;text-anchor:middle;dominant-baseline:central}
.wheel .lab.a{fill:#fff}
.wheel-legend{display:flex;gap:10px;align-items:center;justify-content:center;font-size:11px;color:var(--muted);margin-top:10px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot.a{background:hsl(210 20% 45%)} .dot.b{background:var(--cyan)}
.chk{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-top:12px;cursor:pointer}

/* ---- genres ---- */
.genres{display:flex;flex-wrap:wrap;gap:7px;max-height:32vh;overflow-y:auto}
.chip{padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:12px;cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--cyan)}
.chip.on{background:linear-gradient(135deg,rgba(37,230,211,.25),rgba(139,79,255,.25));border-color:var(--cyan);color:#fff}

/* ---- main / toolbar ---- */
.main{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.search{flex:1}
.search input,.select{width:100%;background:var(--panel);backdrop-filter:var(--glass);border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:11px 14px;font-size:14px}
.select{width:auto}
input:focus,.search input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(37,230,211,.12)}

/* ---- table titres ---- */
.tracks-head,.track{display:grid;grid-template-columns:44px 58px 56px 1fr 150px 110px 44px;align-items:center;gap:10px;padding:0 14px}
.tracks-head{font-size:11px;letter-spacing:1px;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--line)}
.tracks{flex:1;overflow-y:auto;padding-top:6px}
.track{padding:9px 14px;border-radius:14px;margin-bottom:6px;background:rgba(255,255,255,.02);border:1px solid transparent;transition:.15s;animation:rise .35s ease both}
.track:hover{background:rgba(255,255,255,.06);border-color:var(--line);transform:translateX(2px)}
.track.playing{border-color:var(--cyan);background:linear-gradient(90deg,rgba(37,230,211,.1),rgba(139,79,255,.06))}
/* coche verte à droite des formats = déjà téléchargé */
.dl-check{display:inline-flex;align-items:center;color:#39d17a;margin-left:1px}
.dl-check svg{width:15px;height:15px}
/* bouton Top 100 (toggle) dans le menu de gauche (sidebar) */
.top100-side{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--txt);font-size:13px;font-weight:700;cursor:pointer;transition:.15s;letter-spacing:.3px;text-align:left}
.top100-side:hover{border-color:var(--mag);transform:translateY(-1px)}
.top100-side.on{background:linear-gradient(135deg,var(--mag),var(--violet));border:none;color:#fff;box-shadow:0 6px 22px rgba(255,79,216,.32)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.t-play{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--txt);cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center}
.t-play:hover{background:var(--cyan);color:#06121a;border-color:var(--cyan)}
.t-play .pic{width:14px;height:14px;display:block}
.t-play.replayed{color:var(--cyan);border-color:rgba(37,230,211,.4)} /* déjà écouté */
.keybadge{width:44px;text-align:center;font-weight:800;font-size:13px;padding:5px 0;border-radius:9px;color:#06121a}
.keybadge.na{background:rgba(255,255,255,.06);color:var(--muted);font-weight:500;font-size:11px}
.t-bpm{font-variant-numeric:tabular-nums;color:#cdd4e6}
.t-title{min-width:0}
.t-title .tt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.t-title .ta{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-genre{font-size:12px;color:#b9c2da;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta .mini{font-size:10px;padding:1px 6px;border-radius:6px;margin-left:5px;vertical-align:middle;white-space:nowrap}
.mini.vocal{background:rgba(255,79,216,.16);color:#ff9de8;border:1px solid rgba(255,79,216,.32)}
.mini.instrumental{background:rgba(37,230,211,.12);color:#8ff0e6;border:1px solid rgba(37,230,211,.28)}
.mini.nrj{background:rgba(255,193,7,.14);color:#ffd766;border:1px solid rgba(255,193,7,.3)}
.fmts{display:flex;gap:5px;flex-wrap:wrap}
.fmt{font-size:10px;letter-spacing:.5px;padding:3px 6px;border-radius:6px;background:rgba(139,79,255,.18);border:1px solid rgba(139,79,255,.35);color:#d9ccff;text-transform:uppercase}
.fmt.wav,.fmt.flac,.fmt.aif,.fmt.aiff{background:rgba(37,230,211,.15);border-color:rgba(37,230,211,.4);color:#b6fff6}
.t-dl{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;transition:.15s}
.t-dl:hover{color:var(--cyan);border-color:var(--cyan)}
.empty{padding:40px;text-align:center;color:var(--muted)}

/* ---- player ---- */
.player{position:fixed;bottom:0;left:0;right:0;z-index:5;height:96px;display:grid;
  grid-template-columns:52px 220px 52px 1fr 96px 130px;align-items:center;gap:16px;padding:0 24px;
  background:rgba(9,12,22,.82);backdrop-filter:var(--glass);border-top:1px solid var(--line)}
.p-play{width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;font-size:18px;color:#06121a;
  background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 22px rgba(37,230,211,.45)}
.p-meta{min-width:0}
.p-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-key{text-align:center;font-weight:800;border-radius:9px;padding:6px 0;color:#06121a;font-size:13px}
.p-wave{min-width:0}
#waveform{width:100%;cursor:pointer}
.p-time{font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted);text-align:center}
.p-vol{display:flex;align-items:center;gap:6px;font-size:13px}
.p-vol input{width:80px;accent-color:var(--cyan)}

/* ---- modal auth ---- */
.modal-bg{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(4,6,12,.7);backdrop-filter:blur(6px);animation:fade .25s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{width:360px;max-width:92vw;background:var(--panel-solid);border:1px solid var(--line);border-radius:22px;padding:28px;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.6);animation:rise .3s ease both}
.modal-x{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer}
.modal-logo{width:54px;height:54px;margin:0 auto 14px;display:grid;place-items:center;border-radius:16px;font-size:28px;color:#06121a;background:linear-gradient(135deg,var(--cyan),var(--violet))}
.modal .tabs{display:flex;gap:6px;background:rgba(255,255,255,.04);padding:5px;border-radius:12px;margin-bottom:18px}
.modal .tab{flex:1;background:none;border:none;color:var(--muted);padding:9px;border-radius:9px;cursor:pointer;font-size:13px}
.modal .tab.active{background:rgba(37,230,211,.15);color:#fff}
.fld{display:block;margin-bottom:13px}
.fld span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.fld input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--txt);border-radius:11px;padding:11px 13px}
.wide{width:100%;margin-top:4px}
.modal-note{text-align:center;font-size:11px;color:var(--muted);margin:14px 0 0}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:rgba(37,230,211,.3)}
/* responsive mobile : bloc complet en fin de fichier */

/* genre auto (IA MAEST 519) affiché sous le genre du dossier, discret */
.t-genre{display:flex;flex-direction:column;line-height:1.25}
.gauto{font-size:10px;color:#8b93ad;opacity:.85;font-style:italic}

/* Pilule "Analyse IA en cours" — visible + animée (montre que des agents analysent) */
.pill{display:inline-flex;align-items:center;gap:7px;max-width:46vw;white-space:nowrap;overflow:hidden}
.pill b{font-weight:700}
.pill .what{font-size:10px;opacity:.6;text-transform:uppercase;letter-spacing:.03em}
.pill .pc{font-variant-numeric:tabular-nums;font-weight:700}
.pill .cur{opacity:.6;max-width:20vw;overflow:hidden;text-overflow:ellipsis}
.pill.live{animation:pillpulse 1.8s ease-in-out infinite}
.pill .spin{display:inline-block;animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pillpulse{0%,100%{box-shadow:0 0 0 0 rgba(37,230,211,.35)}50%{box-shadow:0 0 14px 2px rgba(37,230,211,.45)}}
@media(max-width:900px){.pill .what,.pill .cur{display:none}}

/* Icône vocal/instru (SVG, pas emoji) sur la ligne du titre + barre d énergie sous l artiste */
.t-title .tt{display:flex;align-items:center;gap:6px;overflow:visible}
.t-title .tt-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.vic{flex-shrink:0;display:inline-flex;align-items:center}
.vic svg{width:14px;height:14px;display:block}
.vic.vocal{color:#ff9de8}
.vic.instrumental{color:#8ff0e6}
.vic.rev{opacity:.45}
.nrjbar{display:flex;gap:2px;margin-top:4px}
.nrjbar .pip{width:7px;height:9px;transform:skewX(-22deg);border-radius:1px;background:rgba(255,255,255,.09)}
.nrjbar .pip.on{background:hsl(calc(180 - (var(--i) - 1) * 20),85%,56%);box-shadow:0 0 5px -1px hsl(calc(180 - (var(--i) - 1) * 20),85%,56%)}
.nrjbar.manual::after{content:"\2714";font-size:9px;color:#8ff0e6;margin-left:5px;opacity:.75;align-self:center}

/* Rangée énergie : éclair (gauche) + barre + icône vocal/instru (droite) ; plus de ✔ */
.nrjbar.manual::after{content:none}
.nrj-row{display:flex;align-items:center;gap:7px;margin-top:4px}
.nrj-row .nrjbar{margin-top:0}
.nrj-ico{display:inline-flex;color:#ffcf5c;flex-shrink:0}
.nrj-ico svg{width:13px;height:13px;display:block}

/* Indicateur qualité/mastering (barres "signal") avant l icône vocal/instru */
.qual{display:inline-flex;align-items:flex-end;gap:1.5px;height:14px;flex-shrink:0}
.qual .qbar{width:3px;border-radius:1px;background:rgba(255,255,255,.14)}
.qual .qbar:nth-child(1){height:4px}
.qual .qbar:nth-child(2){height:6px}
.qual .qbar:nth-child(3){height:9px}
.qual .qbar:nth-child(4){height:11px}
.qual .qbar:nth-child(5){height:14px}
.qual .qbar.on{background:var(--c)}

/* pastille qualité : chiffre 1-5 dans un rond coloré (remplace les barres et l éclair) */
.qual{align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--c);color:#fff;font-size:10px;font-weight:700;line-height:1;flex-shrink:0}

/* énergie sur 5 : dégradé cyan→rouge sur 5 pips + pips un peu plus larges */
.nrjbar .pip{width:9px;height:11px}
.nrjbar .pip.on{background:hsl(calc(180 - (var(--i) - 1) * 45),85%,56%);box-shadow:0 0 5px -1px hsl(calc(180 - (var(--i) - 1) * 45),85%,56%)}

/* Panneaux repliables */
.panel-head{display:flex;align-items:center;gap:8px}
.panel-head.foldable{cursor:pointer;user-select:none}
.panel-head .chev{margin-left:auto;opacity:.55;font-size:11px;transition:transform .2s}
.panel.collapsed .panel-body{display:none}
.panel.collapsed .panel-head .chev{transform:rotate(-90deg)}
/* Filtres range (doubles curseurs) */
.frange{margin:12px 2px 2px}
.fr-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;margin-bottom:9px}
.fr-top label{color:#8b93ad}
.fr-val{color:var(--cyan);font-variant-numeric:tabular-nums;font-size:11px}
.dual{position:relative;height:22px}
.dual::before{content:"";position:absolute;left:0;right:0;top:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.14)}
.dual-fill{position:absolute;top:10px;height:3px;border-radius:2px;background:var(--cyan)}
.dual input[type=range]{position:absolute;top:0;left:0;width:100%;height:22px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.dual input[type=range]::-webkit-slider-runnable-track{background:none;border:none}
.dual input[type=range]::-moz-range-track{background:none;border:none}
.dual input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:#0f1320;border:2px solid var(--cyan);cursor:pointer;pointer-events:auto;box-shadow:0 0 6px -1px var(--cyan)}
.dual input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#0f1320;border:2px solid var(--cyan);cursor:pointer;pointer-events:auto}

/* ---- Curseurs de filtre : design amélioré (neon) ---- */
.frange{margin:16px 2px 8px}
.frange + .frange{margin-top:20px}
.fr-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.fr-top label{color:#cfd6e6;font-size:12px;font-weight:600;letter-spacing:.02em}
.fr-val{color:var(--cyan);background:rgba(37,230,211,.12);border:1px solid rgba(37,230,211,.25);padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.dual{position:relative;height:26px}
.dual::before{content:"";position:absolute;left:2px;right:2px;top:11px;height:5px;border-radius:99px;background:rgba(255,255,255,.10);box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
.dual-fill{position:absolute;top:11px;height:5px;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--mag));box-shadow:0 0 10px -1px var(--cyan)}
.dual input[type=range]{position:absolute;top:0;left:0;width:100%;height:26px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.dual input[type=range]::-webkit-slider-runnable-track{background:none;border:none}
.dual input[type=range]::-moz-range-track{background:none;border:none}
.dual input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#fff,#dbe4ff);border:2px solid var(--cyan);cursor:grab;pointer-events:auto;box-shadow:0 0 0 3px rgba(37,230,211,.14),0 2px 6px rgba(0,0,0,.5);transition:transform .12s,box-shadow .12s}
.dual input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--cyan);cursor:grab;pointer-events:auto;box-shadow:0 0 0 3px rgba(37,230,211,.14),0 2px 6px rgba(0,0,0,.5)}
.dual input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 0 0 4px rgba(37,230,211,.22),0 0 11px -1px var(--cyan)}
.dual input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15);cursor:grabbing;box-shadow:0 0 0 4px rgba(255,79,216,.25),0 0 12px -1px var(--mag)}

/* Colonnes : plus de bouton download → 6 colonnes, colonne format élargie et cliquable */
.tracks-head,.track{grid-template-columns:44px 58px 56px 1fr 150px 132px}
.fmt{cursor:pointer;transition:filter .12s,transform .12s}
.fmt:hover{filter:brightness(1.3);transform:translateY(-1px)}

/* Player : pas d espace réservé tant qu il n est pas affiché */
.layout{height:calc(100vh - 73px)}
body.player-open .layout{height:calc(100vh - 73px - 96px)}
/* Segment vocal / instru */
.fseg{margin:16px 2px 4px}
.seg{display:flex;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:9px;padding:2px}
.seg button{flex:1;background:none;border:none;color:var(--muted);font-size:12px;font-weight:600;padding:6px 4px;border-radius:7px;cursor:pointer;transition:.15s}
.seg button:hover{color:#e6e8ec}
.seg button.on{background:linear-gradient(90deg,var(--cyan),var(--mag));color:#0b0e17}

/* Player : contenu jusqu au player (qui flotte par-dessus) → plus de vide */
body.player-open .layout{height:calc(100vh - 73px)}
body.player-open .tracks{padding-bottom:104px}
body.player-open .sidebar{padding-bottom:104px}
/* Bouton muet (icône SVG au lieu de l emoji) */
.p-mute{background:none;border:none;color:var(--muted);cursor:pointer;padding:0;display:inline-flex;align-items:center}
.p-mute svg{width:18px;height:18px}
.p-mute:hover{color:var(--cyan)}
.p-mute.muted{color:var(--mag)}

/* ==================== RESPONSIVE / MOBILE ==================== */
.filt-toggle{display:none}          /* bouton "Filtres" visible seulement en mobile */
.drawer-close{display:none}
.drawer-bg{position:fixed;inset:0;z-index:28;background:rgba(4,6,12,.6);backdrop-filter:blur(3px);animation:fade .2s}

@media(max-width:900px){
  /* défilement naturel de la page (plus d'app-shell à hauteur fixe, robuste sur mobile) */
  html,body{height:auto;overflow-x:hidden;overflow-y:auto}
  .topbar{position:sticky;top:0;z-index:15;padding:11px 14px}
  /* position:static + z-index:auto → .layout ne crée plus de contexte d'empilement,
     sinon la sidebar (enfant) reste piégée SOUS le backdrop (body, z-index 28) qui
     l'assombrit et bloque les clics. Sans ce piège : sidebar(30) > backdrop(28) → tiroir cliquable. */
  .layout{display:block;height:auto;overflow:visible;padding:12px 12px 0;position:static;z-index:auto}
  body.player-open .layout{height:auto}
  .aurora{z-index:-1}   /* derrière le contenu (sinon elle remonte quand .layout n'a plus de z-index) */
  .main{overflow:visible;min-width:0}
  .tracks{overflow:visible;height:auto}
  body.player-open .tracks{padding-bottom:120px}   /* espace pour le player fixe */

  /* sidebar → tiroir coulissant depuis la gauche */
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:88vw;max-width:340px;z-index:30;display:flex;gap:14px;
    transform:translateX(-102%);transition:transform .26s ease;overflow-y:auto;padding:14px;
    background:var(--panel-solid);border-right:1px solid var(--line);box-shadow:0 0 60px rgba(0,0,0,.65)}
  .sidebar.open{transform:translateX(0)}
  body.player-open .sidebar{padding-bottom:14px}
  /* backdrop-filter (verre dépoli) = buggé/coûteux sur mobile, surtout iOS Safari dans un
     conteneur transformé (le tiroir) → on le retire PARTOUT en mobile, fonds solides à la place */
  .topbar,.panel,.sidebar,.sidebar .panel,.search input,.select,.player,.drawer-bg{
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  .sidebar .panel{background:rgba(255,255,255,.04)}
  .drawer-bg{background:rgba(4,6,12,.74)}
  .topbar{background:#0b0f1c}
  .player{background:#0a0e1a}
  .drawer-close{display:block;align-self:flex-end;background:none;border:1px solid var(--line);color:var(--muted);
    border-radius:9px;padding:6px 12px;font-size:13px;cursor:pointer}

  /* toolbar : bouton Filtres + tri, recherche pleine largeur en dessous */
  .toolbar{flex-wrap:wrap;gap:9px}
  .filt-toggle{display:inline-flex;align-items:center;gap:7px;flex-shrink:0}
  #sort{flex:1}
  .search{flex:1 1 100%;order:5}
  #count{order:6;flex-basis:100%}
}

@media(max-width:640px){
  /* topbar compacte */
  .brand-txt small{display:none}
  .brand-txt h1{font-size:16px;letter-spacing:2px}
  .logo{width:36px;height:36px;border-radius:11px}
  .logo svg{width:21px;height:21px}
  .topbar-right{gap:7px}
  .topbar-right .btn{padding:7px 10px;font-size:12px}

  /* tableau → lignes compactes : [play] [clé/bpm] [titre+infos] [formats] */
  .tracks-head{display:none}
  .track{grid-template-columns:36px 42px minmax(0,1fr) auto;column-gap:8px;padding:9px 10px;
    grid-template-areas:"play key title fmts" "play bpm title fmts"}
  .track>.t-play{grid-area:play;align-self:center}
  .track>.keybadge{grid-area:key;align-self:end;width:40px;font-size:12px;padding:4px 0}
  .track>.t-bpm{grid-area:bpm;align-self:start;font-size:11px;text-align:center;color:var(--muted)}
  .track>.t-title{grid-area:title}
  .track>.t-genre{display:none}
  .track>.fmts{grid-area:fmts;align-self:center;justify-content:flex-end;max-width:104px}
  .track:hover{transform:none}
}

/* player mobile : 2 lignes (play + titre + mute) puis waveform pleine largeur */
@media(max-width:900px){
  .player{height:auto;padding:8px 12px 10px;gap:6px 10px;
    grid-template-columns:44px minmax(0,1fr) 40px;grid-template-areas:"play meta mute" "wave wave wave"}
  .p-play{grid-area:play;width:42px;height:42px;font-size:16px}
  .p-meta{grid-area:meta}
  .p-vol{grid-area:mute;justify-content:flex-end}
  .p-vol input{display:none}          /* garde le bouton mute, cache le slider */
  .p-wave{grid-area:wave}
  .p-key,.p-time{display:none}
  #waveform{height:38px}
}