/* ELOWEYTE — thème sombre graphite (mode clair plus bas), un accent système
   (cobalt) + un accent secondaire dérivé du morceau en cours (--track). */
:root{
  --ink:#0B0D10; --panel:#101318; --card:#151920; --card-hi:#1C2129;
  --line:#232936; --line-soft:#191E26;
  --bone:#ECEFF3; --muted:#8A929E; --dim:#5A626D;
  --cobalt:#3B6DFF; --cobalt-hi:#5480FF; --cobalt-wash:rgba(59,109,255,.12);
  --track:#3B6DFF; --track-wash:rgba(59,109,255,.14);
  --live:#3ECF8E; --wait:#E5A83B; --sold:#E5484D;
  --danger:#E5484D; --danger-wash:rgba(229,72,77,.12);
  --sidebar:248px; --player-h:88px; --r:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--ink);color:var(--bone);font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:14px;-webkit-font-smoothing:antialiased;overflow:hidden}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.025em;font-weight:600}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-thumb{background:#222833;border-radius:9px}
::-webkit-scrollbar-track{background:transparent}
img,svg{max-width:100%}
[hidden]{display:none!important}

.app{height:100dvh;display:grid;grid-template-columns:var(--sidebar) 1fr;
  grid-template-rows:1fr auto;grid-template-areas:"side main" "player player"}

/* ── Sidebar ── */
.sidebar{grid-area:side;background:var(--panel);border-right:1px solid var(--line-soft);
  padding:24px 14px 18px;display:flex;flex-direction:column;overflow-y:auto}
.logo{display:flex;align-items:center;gap:11px;padding:0 8px 24px}
.logo .mark{display:flex;align-items:flex-end;gap:2px;height:20px}
.logo .mark i{width:3px;border-radius:2px;background:var(--cobalt)}
.logo .mark i:nth-child(1){height:8px}.logo .mark i:nth-child(2){height:18px}
.logo .mark i:nth-child(3){height:12px}.logo .mark i:nth-child(4){height:20px}.logo .mark i:nth-child(5){height:7px}
.logo .word{font-family:'Bricolage Grotesque';font-weight:700;font-size:21px;letter-spacing:-.03em}
.logo-mobile{display:none;padding:0}
.group{font-size:10px;font-weight:600;letter-spacing:.15em;color:var(--dim);padding:16px 12px 8px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:8px;
  color:var(--muted);font-weight:500;transition:.15s}
.nav-item:hover{color:var(--bone);background:rgba(255,255,255,.035)}
.nav-item.active{color:var(--bone);background:var(--cobalt-wash);box-shadow:inset 2px 0 0 var(--cobalt)}
.side-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft)}
.me{display:flex;align-items:center;gap:11px;width:100%;padding:10px;border-radius:8px;text-align:left}
.me:hover{background:rgba(255,255,255,.035)}
.me .n{font-weight:600;font-size:13px}
.me .r{font-size:11px;color:var(--cobalt);letter-spacing:.06em;margin-top:2px}
.side-login{display:flex;flex-direction:column;gap:8px;padding:6px}

/* ── Topbar / main ── */
.main{grid-area:main;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:8;min-height:68px;display:flex;align-items:center;gap:12px;
  padding:0 28px;background:rgba(11,13,16,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line-soft)}
.search-wrap{position:relative;width:400px;max-width:100%}
.search-wrap .mag{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--dim)}
.search{width:100%;height:42px;background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:0 14px 0 42px;transition:.15s}
.search::placeholder{color:var(--dim)}
.search:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-wash)}
.spacer{flex:1}
.cart-btn{position:relative;width:42px;height:42px;border-radius:9px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);transition:.15s;flex:none}
.cart-btn:hover{color:var(--bone);border-color:#333A45}
.cart-btn svg{width:19px;height:19px}
.cart-btn .bg{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:100px;
  background:var(--cobalt);color:#fff;font-size:10px;font-weight:700;display:none;place-items:center;
  font-family:'IBM Plex Mono'}
.cart-btn.has .bg{display:grid}

.view{padding:28px 28px 56px;max-width:1280px;width:100%;flex:1;animation:in .25s ease;outline:none}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sec{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:36px 0 16px;flex-wrap:wrap}
.sec:first-child{margin-top:0}
.sec h1{font-size:26px}
.sec h2{font-size:19px}
.sec .hint{font-size:12px;color:var(--dim)}
.link{color:var(--muted);font-size:12px;font-weight:500}
.link:hover{color:var(--cobalt-hi)}
.note{font-size:12px;color:var(--muted);line-height:1.55}
.note b{color:var(--bone)}

/* ── Boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;
  border-radius:9px;font-weight:600;font-size:13px;transition:.15s;white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--cobalt);color:#fff}
.btn-primary:hover{background:var(--cobalt-hi)}
.btn-ghost{border:1px solid var(--line);color:var(--muted)}
.btn-ghost:hover{color:var(--bone);border-color:#333A45}
.btn-danger{border:1px solid transparent;background:var(--danger-wash);color:var(--danger)}
.btn-sm{height:32px;padding:0 12px;font-size:12px;border-radius:7px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-block{width:100%}

/* ── Pochettes ── */
.art{position:relative;overflow:hidden;background:#12151A;border-radius:8px;flex:none}
.art svg{width:100%;height:100%;display:block}

/* ── Feature (accueil) ── */
.feature{display:grid;grid-template-columns:220px 1fr;gap:30px;border-radius:18px;padding:26px;
  border:1px solid var(--line);background:var(--card)}
.feature .art{width:220px;height:220px;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.feature .body{display:flex;flex-direction:column;justify-content:center;min-width:0}
.eyebrow{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.14em;color:var(--cobalt);margin-bottom:10px}
.feature h1{font-size:clamp(26px,4vw,42px);line-height:1.05;margin-bottom:6px;overflow-wrap:anywhere}
.feature .by{color:var(--muted);margin-bottom:18px}
.feature .foot{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.play-lg{width:52px;height:52px;border-radius:50%;background:var(--cobalt);color:#fff;flex:none;
  display:grid;place-items:center;transition:.16s}
.play-lg:hover{transform:scale(1.06);box-shadow:0 0 0 7px var(--cobalt-wash)}
.play-lg svg{width:19px;height:19px;fill:currentColor}
.stat-inline{font-family:'IBM Plex Mono';font-size:12px;color:var(--muted)}
.stat-inline b{color:var(--bone);font-weight:500}

/* ── Grilles de cartes ── */
.gridc{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;
  text-align:left;transition:.18s;position:relative;min-width:0}
.card:hover{background:var(--card-hi);border-color:#2E3543;transform:translateY(-3px)}
.card .art{aspect-ratio:1;border-radius:8px;margin-bottom:12px;cursor:pointer;width:100%}
.card .name{font-family:'Bricolage Grotesque';font-weight:600;font-size:14px;margin-bottom:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.card .sub{font-size:12px;color:var(--muted);margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card .price{font-family:'IBM Plex Mono';font-size:11px;color:var(--dim)}
.card .price b{color:var(--bone);font-weight:500}
.card-play{position:absolute;right:20px;top:20px;width:38px;height:38px;border-radius:50%;
  background:var(--cobalt);color:#fff;display:grid;place-items:center;opacity:0;transition:.16s;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.card-play svg{width:15px;height:15px;fill:currentColor}
.card:hover .card-play,.card-play:focus-visible{opacity:1}

/* ── Genres ── */
.genres{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.genre{border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:1/.8;transition:.18s;display:block}
.genre .art{position:absolute;inset:0;border-radius:0}
.genre .lay{position:absolute;inset:0;padding:14px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.5))}
.genre .g{font-family:'Bricolage Grotesque';font-weight:600;font-size:16px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.genre .n{font-family:'IBM Plex Mono';font-size:10px;color:rgba(255,255,255,.8)}
.genre:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.45)}

/* ── Listes de morceaux ── */
.tlist{display:flex;flex-direction:column}
.thead{display:grid;align-items:center;gap:12px;padding:0 12px 10px;border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.11em;color:var(--dim)}
.trow{display:grid;align-items:center;gap:12px;padding:9px 12px;border-radius:8px;color:var(--muted);transition:.13s;min-width:0}
.trow:hover{background:rgba(255,255,255,.035)}
.trow.playing{background:var(--track-wash)}
.trow.playing .t-title{color:var(--track)}
.trow .art{width:42px;height:42px;border-radius:6px;cursor:pointer}
.t-main{min-width:0;text-align:left}
.t-title{color:var(--bone);font-weight:500;font-size:13px;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-sub{font-size:11px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.t-r{justify-self:end}
.t-num{color:var(--dim);font-size:12px}
.t-cell{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cols-track{grid-template-columns:42px minmax(0,1fr) 120px 70px 40px}
.empty{padding:52px 12px;color:var(--muted);text-align:center}
.empty b{display:block;color:var(--bone);font-family:'Bricolage Grotesque';font-size:17px;margin-bottom:6px}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;padding:4px 9px;
  border-radius:100px;border:1px solid var(--line);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.live{color:var(--live)}.pill.wait{color:var(--wait)}.pill.sold{color:var(--sold)}

/* ── Forme d'onde ── */
.wave{display:flex;align-items:center;gap:2px;height:36px;cursor:pointer;width:100%;min-width:0;overflow:hidden}
.wave i{flex:1;min-width:1px;border-radius:1px;background:#333A46;transition:background .1s linear;pointer-events:none}
.wave i.on{background:var(--track)}
.wave.tall{height:72px;gap:3px}

/* ── Page morceau ── */
.track-hero{display:flex;gap:26px;align-items:flex-end;margin-bottom:26px;flex-wrap:wrap}
.track-hero .art{width:180px;height:180px;border-radius:12px;box-shadow:0 22px 54px rgba(0,0,0,.55)}
.track-hero .kind{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.14em;color:var(--dim)}
.track-hero h1{font-size:clamp(28px,5vw,46px);line-height:1.02;margin:8px 0 10px;overflow-wrap:anywhere}
.track-hero .meta{color:var(--muted);font-size:13px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.track-actions{display:flex;align-items:center;gap:14px;margin:18px 0 26px;flex-wrap:wrap}
.licenses{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.lic{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;
  display:flex;flex-direction:column;gap:8px;transition:.15s}
.lic:hover{border-color:#2E3543}
.lic .k{font-family:'IBM Plex Mono';font-size:9px;letter-spacing:.13em;color:var(--dim)}
.lic .n{font-family:'Bricolage Grotesque';font-weight:600;font-size:15px}
.lic .d{font-size:12px;color:var(--muted);line-height:1.5;flex:1}
.lic .p{font-family:'IBM Plex Mono';font-size:16px}
.lic.disabled{opacity:.5}
.banner{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;font-size:13px;
  color:var(--muted);display:flex;gap:10px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.banner.sold{border-color:rgba(229,72,77,.4);color:var(--sold);background:var(--danger-wash)}
.banner.info{border-color:rgba(59,109,255,.35);background:var(--cobalt-wash);color:var(--bone)}

/* ── Formulaires ── */
.form{max-width:560px;display:flex;flex-direction:column;gap:16px}
.form-wide{max-width:760px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:7px}
.field .req{color:var(--cobalt)}
.input,select.input,textarea.input{width:100%;height:42px;background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:0 14px;transition:.15s}
textarea.input{height:auto;min-height:88px;padding:11px 14px;resize:vertical}
.input:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-wash)}
.input::placeholder{color:var(--dim)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.frow4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ferr{color:var(--danger);font-size:12px;min-height:16px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);cursor:pointer;line-height:1.5}
.check input{width:16px;height:16px;margin-top:2px;accent-color:var(--cobalt);flex:none}
.radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.radio-card{border:1px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;transition:.15s;display:block;position:relative}
.radio-card:has(input:checked){border-color:var(--cobalt);background:var(--cobalt-wash)}
.radio-card input{position:absolute;opacity:0}
.radio-card .t{font-weight:600;font-size:13px;margin-bottom:4px;display:flex;gap:8px;align-items:center}
.radio-card .d{font-size:12px;color:var(--muted);line-height:1.5;display:block}
.drop{border:1.5px dashed var(--line);border-radius:var(--r);padding:34px 20px;text-align:center;
  color:var(--muted);cursor:pointer;transition:.15s;font-size:13px;line-height:1.6}
.drop:hover,.drop.over{border-color:var(--cobalt);background:var(--cobalt-wash);color:var(--bone)}
.drop b{color:var(--bone)}
.drop .mono{font-size:11px;color:var(--dim)}
.upload-preview{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;
  display:flex;flex-direction:column;gap:10px}
.upload-preview .fname{font-weight:600;font-size:13px;overflow-wrap:anywhere}

/* ── Stat cards / studio ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.stat .l{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.12em;color:var(--dim);margin-bottom:10px}
.stat .v{font-family:'IBM Plex Mono';font-size:22px}
.stat .s{font-size:11px;color:var(--muted);margin-top:6px}
.pro-box{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;flex-wrap:wrap}
.pro-box .t{font-weight:600;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pro-badge{font-family:'IBM Plex Mono';font-size:9px;letter-spacing:.12em;padding:3px 7px;border-radius:5px;
  background:var(--cobalt);color:#fff}
.cols-dash{grid-template-columns:42px minmax(0,1fr) 96px 70px 90px 90px minmax(120px,auto)}
.cols-sales{grid-template-columns:minmax(0,1fr) 90px 80px 80px 80px}
.rowact{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.iconbtn{width:30px;height:30px;border-radius:7px;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--muted);transition:.15s}
.iconbtn:hover{color:var(--bone);border-color:#333A45}
.iconbtn svg{width:14px;height:14px}
.iconbtn.danger:hover{color:var(--danger);border-color:var(--danger)}

/* ── Panier / checkout ── */
.cart-list{display:flex;flex-direction:column;gap:10px;max-width:720px}
.cart-item{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:12px;min-width:0}
.cart-item .art{width:48px;height:48px;border-radius:7px}
.cart-item .m{flex:1;min-width:0}
.cart-item .t{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item .s{font-size:11px;color:var(--muted);margin-top:3px}
.cart-item .p{font-family:'IBM Plex Mono';font-size:14px}
.totals{max-width:720px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;margin-top:16px}
.totals .line{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding:5px 0}
.totals .line.big{color:var(--bone);font-weight:600;font-size:15px;border-top:1px solid var(--line);
  margin-top:8px;padding-top:12px}
.totals .line .mono{font-size:inherit}
.pay-sim{border:1px solid var(--wait);background:rgba(229,168,59,.08);color:var(--wait);
  border-radius:10px;padding:12px 14px;font-size:12px;line-height:1.55;margin:16px 0}
.fake-stripe{max-width:560px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.fake-stripe .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.fake-stripe .brand{font-weight:700;font-size:16px;letter-spacing:-.02em}
.confirm-box{max-width:640px}
.ok-ico{width:56px;height:56px;border-radius:50%;background:rgba(62,207,142,.14);color:var(--live);
  display:grid;place-items:center;margin-bottom:18px}
.ok-ico svg{width:26px;height:26px}

/* ── Lecteur ── */
.player{grid-area:player;height:var(--player-h);background:var(--panel);border-top:1px solid var(--line-soft);
  display:grid;grid-template-columns:minmax(180px,320px) minmax(0,1fr) minmax(120px,180px);
  align-items:center;gap:18px;padding:0 18px;z-index:20}
.player[hidden]{display:none}
.p-track{display:flex;align-items:center;gap:12px;min-width:0}
.p-art{width:50px;height:50px;border-radius:7px;overflow:hidden;flex:none;background:#12151A}
.p-art svg,.p-art img{width:100%;height:100%;display:block;object-fit:cover}
.p-meta{min-width:0}
.p-title{font-weight:600;font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-title:hover{color:var(--track)}
.p-artist{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin-top:2px}
.p-artist:hover{color:var(--bone)}
.p-fav{width:32px;height:32px;display:grid;place-items:center;color:var(--dim);flex:none;border-radius:7px}
.p-fav svg{width:17px;height:17px}
.p-fav:hover{color:var(--bone)}
.p-fav[aria-pressed="true"]{color:var(--track)}
.p-fav[aria-pressed="true"] svg{fill:currentColor}
.p-center{display:flex;flex-direction:column;gap:6px;min-width:0}
.p-controls{display:flex;align-items:center;justify-content:center;gap:6px}
.p-btn{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--muted);transition:.14s}
.p-btn svg{width:16px;height:16px}
.p-btn:hover{color:var(--bone)}
.p-btn[aria-pressed="true"]{color:var(--track)}
.p-play{width:40px;height:40px;border-radius:50%;background:var(--bone);color:var(--ink);
  display:grid;place-items:center;margin:0 6px;transition:.15s}
.p-play:hover{transform:scale(1.06)}
.p-play svg{width:17px;height:17px}
.p-progress{display:flex;align-items:center;gap:12px;min-width:0}
.p-time{font-size:11px;color:var(--dim);flex:none;width:38px}
.p-time:last-child{text-align:right}
.p-progress .wave{height:28px}
.p-right{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.vol-ico{width:17px;height:17px;color:var(--dim);flex:none}
.vol{-webkit-appearance:none;appearance:none;width:100%;max-width:110px;height:4px;border-radius:4px;
  background:var(--line);cursor:pointer}
.vol::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--bone)}
.vol::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--bone);border:none}

/* ── Tabbar mobile ── */
.tabbar{display:none}

/* ── Modales / toasts ── */
.modal-back{position:fixed;inset:0;background:rgba(5,6,8,.72);backdrop-filter:blur(4px);z-index:60;
  display:grid;place-items:center;padding:18px;animation:in .18s ease}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;
  width:100%;max-width:520px;max-height:86dvh;overflow-y:auto}
.modal h2{font-size:18px;margin-bottom:4px}
.modal .sub{font-size:12px;color:var(--muted);margin-bottom:16px}
.modal-close{float:right;width:30px;height:30px;border-radius:7px;color:var(--muted);display:grid;place-items:center}
.modal-close:hover{color:var(--bone);background:rgba(255,255,255,.05)}
.toasts{position:fixed;bottom:calc(var(--player-h) + 16px);right:16px;z-index:80;display:flex;
  flex-direction:column;gap:8px;max-width:min(340px,calc(100vw - 32px))}
.toast{background:var(--card-hi);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font-size:13px;box-shadow:0 12px 32px rgba(0,0,0,.5);animation:in .2s ease}
.toast.err{border-color:rgba(229,72,77,.5)}
.share-row{display:flex;gap:8px}
.share-row .input{flex:1;font-family:'IBM Plex Mono';font-size:11px}

.spin{width:22px;height:22px;border:2.5px solid var(--line);border-top-color:var(--cobalt);
  border-radius:50%;animation:sp .7s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.center-load{display:grid;place-items:center;padding:60px 0}

/* ═══════════ Covers, profils, plans ═══════════ */

.cover-img{width:100%;height:100%;object-fit:cover;display:block}
.t-artist:hover{color:var(--cobalt-hi)}
.feature .by a:hover,.track-hero .meta a:hover{color:var(--cobalt-hi)}

/* Avatars */
.ava,.ava-sm,.ava-lg,.pic,.ac-ava,.prof-ava{border-radius:50%;object-fit:cover;flex:none;
  display:grid;place-items:center;font-weight:600;overflow:hidden}
.ava-fallback{font-family:'Bricolage Grotesque'}
.pic{width:34px;height:34px;font-size:13px}
.ava-sm{width:38px;height:38px;font-size:14px;border:1px solid var(--line)}
.ava-lg{width:72px;height:72px;font-size:26px}
.topbar-ava{flex:none;border-radius:50%}
.me{text-decoration:none}

/* Cartes artistes (accueil) */
.artists-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.artist-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:.18s;display:block}
.artist-card:hover{background:var(--card-hi);border-color:#2E3543;transform:translateY(-3px)}
.ac-banner{height:74px;overflow:hidden;position:relative}
.ac-banner svg,.ac-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ac-body{display:flex;align-items:center;gap:11px;padding:12px 14px 14px;position:relative}
.ac-ava{width:46px;height:46px;font-size:17px;margin-top:-28px;border:3px solid var(--card);
  position:relative;z-index:1;background:var(--card)}
.ac-meta{min-width:0}
.ac-name{font-family:'Bricolage Grotesque';font-weight:600;font-size:14px;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-sub{font-size:11px;color:var(--muted);display:block;margin-top:2px;font-family:'IBM Plex Mono'}

/* Profil public */
.prof-banner{height:clamp(140px,24vw,220px);border-radius:var(--r);overflow:hidden;position:relative;
  border:1px solid var(--line)}
.prof-banner svg,.prof-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prof-head{display:flex;align-items:flex-end;gap:16px;margin:-38px 0 14px;padding:0 22px;
  position:relative;flex-wrap:wrap}
.prof-ava{width:96px;height:96px;font-size:34px;border:4px solid var(--ink);background:var(--card)}
.prof-id h1{font-size:clamp(22px,4vw,34px);line-height:1.05}
.prof-tags{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.prof-head .btn{margin-bottom:6px}
.prof-bio{color:var(--muted);max-width:640px;line-height:1.6;margin:4px 0 14px;font-size:13.5px}
.prof-stats{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--dim);margin-bottom:8px}
.prof-site{color:var(--cobalt-hi)}
.prof-site:hover{text-decoration:underline}

/* Sélecteurs d'images (upload cover, avatar, bannière) */
.img-pick{display:flex;align-items:center;gap:14px;border:1.5px dashed var(--line);border-radius:10px;
  padding:12px;cursor:pointer;transition:.15s}
.img-pick:hover{border-color:var(--cobalt);background:var(--cobalt-wash)}
.img-prev{width:84px;height:84px;border-radius:9px;overflow:hidden;background:var(--card);flex:none;
  display:grid;place-items:center;text-align:center;border:1px solid var(--line)}
.img-prev.round{border-radius:50%}
.img-prev.wide{width:150px;height:52px}
.img-prev svg{width:100%;height:100%}

/* Quota (plans) */
.quota-bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden;max-width:420px;margin-bottom:18px}
.quota-bar i{display:block;height:100%;border-radius:6px;background:var(--cobalt);min-width:3px}
.pro-box .quota-bar{margin-bottom:0}

/* Cartes de plans */
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:26px}
.plan-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;gap:10px;position:relative;transition:.15s}
.plan-card:hover{border-color:#2E3543}
.plan-card.current{border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-wash)}
.plan-now{position:absolute;top:-9px;left:16px;font-family:'IBM Plex Mono';font-size:9px;
  letter-spacing:.12em;background:var(--cobalt);color:#fff;padding:3px 8px;border-radius:5px}
.plan-name{font-family:'Bricolage Grotesque';font-weight:600;font-size:17px}
.plan-price{font-family:'IBM Plex Mono';font-size:24px}
.plan-price small{font-size:12px;color:var(--muted)}
.plan-feats{list-style:none;display:flex;flex-direction:column;gap:7px;font-size:12.5px;
  color:var(--muted);flex:1;padding:4px 0 8px}
.plan-feats li{padding-left:18px;position:relative;line-height:1.45}
.plan-feats li::before{content:"✓";position:absolute;left:0;color:var(--live)}
.plan-feats b{color:var(--bone)}

/* Inscription : 3 types de compte */
.radio-cards.three{grid-template-columns:repeat(3,1fr)}

/* ═══════════ Recherche de comptes, admin, certification, partage ═══════════ */

/* Cartes de comptes (résultats de recherche) */
.acc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.acc-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:12px;transition:.15s;min-width:0}
.acc-card:hover{background:var(--card-hi);border-color:#2E3543}
.acc-ava{width:44px;height:44px;font-size:16px;border-radius:50%;overflow:hidden;flex:none;
  display:grid;place-items:center;font-weight:600;object-fit:cover}
.acc-card .m{min-width:0}
.acc-card .n{font-weight:600;font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-card .s{font-size:11px;color:var(--muted);display:block;margin-top:3px;font-family:'IBM Plex Mono'}

/* Page administration */
.cols-admin-u{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 100px 70px 120px 60px}
.cols-admin-t{grid-template-columns:minmax(0,1fr) 110px 110px}
.pill[data-unban-genre]{cursor:pointer}
.pill[data-unban-genre]:hover{background:var(--danger-wash)}

/* Badge de certification */
.vbadge{width:15px;height:15px;color:var(--cobalt);vertical-align:-2px;margin-left:5px;flex:none}
.prof-id h1 .vbadge{width:22px;height:22px;vertical-align:-3px;margin-left:8px}
.ac-name,.acc-card .n,.me .n{display:inline-flex;align-items:center}
.verify-btn{font-weight:700;font-size:13px}
.verify-btn.on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.verify-btn:not(.on){color:var(--dim)}
.track-actions .btn svg{width:16px;height:16px}

/* ── Thème clair ── */
:root[data-theme="light"]{
  --ink:#F2F3F6; --panel:#FBFBFD; --card:#FFFFFF; --card-hi:#F1F3F7;
  --line:#DCE0E8; --line-soft:#E7EAF0;
  --bone:#171A20; --muted:#5B6472; --dim:#8B93A1;
  --cobalt:#2F5FE8; --cobalt-hi:#2450C8; --cobalt-wash:rgba(47,95,232,.10);
  --danger-wash:rgba(229,72,77,.08);
}
[data-theme="light"] body{background:var(--ink)}
[data-theme="light"] .topbar{background:rgba(242,243,246,.9)}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:#C6CCD6}
[data-theme="light"] .wave i{background:#C9CFDA}
[data-theme="light"] .nav-item:hover,
[data-theme="light"] .me:hover,
[data-theme="light"] .trow:hover,
[data-theme="light"] .modal-close:hover{background:rgba(15,25,45,.05)}
[data-theme="light"] .nav-item:hover{color:var(--bone)}
[data-theme="light"] .card:hover{border-color:#C9CFDA}
[data-theme="light"] .artist-card:hover,[data-theme="light"] .acc-card:hover{border-color:#C9CFDA}
[data-theme="light"] .p-play{background:var(--bone);color:var(--panel)}
[data-theme="light"] .feature .art,[data-theme="light"] .track-hero .art,
[data-theme="light"] .card .art{box-shadow:0 10px 28px rgba(20,30,50,.18)}
[data-theme="light"] .cart-btn .bg{color:#fff}
[data-theme="light"] .prof-ava{border-color:var(--ink)}
[data-theme="light"] .drop:hover,[data-theme="light"] .drop.over{color:var(--bone)}
[data-theme="light"] .toast{box-shadow:0 12px 32px rgba(20,30,50,.18)}
[data-theme="light"] .modal-back{background:rgba(30,36,50,.45)}

/* ═══════════ Responsive ═══════════ */
@media (max-width:900px){
  .cols-track{grid-template-columns:42px minmax(0,1fr) 70px 40px}
  .cols-track .hide-md{display:none}
  .cols-dash{grid-template-columns:42px minmax(0,1fr) 90px minmax(100px,auto)}
  .cols-dash .hide-md{display:none}
  .cols-sales{grid-template-columns:minmax(0,1fr) 80px 80px}
  .cols-sales .hide-md{display:none}
  .cols-admin-u{grid-template-columns:minmax(0,1fr) 90px 110px 50px}
  .cols-admin-u .hide-md{display:none}
  .cols-admin-t{grid-template-columns:minmax(0,1fr) 100px}
  .cols-admin-t .hide-md{display:none}
  .feature{grid-template-columns:1fr;gap:18px}
  .feature .art{width:140px;height:140px}
}
@media (max-width:760px){
  :root{--player-h:64px}
  .app{grid-template-columns:1fr;grid-template-rows:1fr auto auto;
    grid-template-areas:"main" "player" "tabs"}
  .sidebar{display:none}
  .logo-mobile{display:flex}
  .topbar{padding:0 14px;gap:10px;min-height:60px}
  .search-wrap{flex:1;width:auto}
  .view{padding:20px 14px 40px}
  .tabbar{display:grid;grid-area:tabs;grid-template-columns:repeat(5,1fr);background:var(--panel);
    border-top:1px solid var(--line-soft);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:21}
  .tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:8px;
    color:var(--dim);font-size:10px;font-weight:500}
  .tab svg{width:20px;height:20px}
  .tab.active{color:var(--cobalt)}
  .player{grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:10px;padding:0 12px}
  .p-track{gap:10px}
  .p-art{width:40px;height:40px}
  .p-fav,.p-right,.p-time,#p-shuffle,#p-repeat{display:none}
  .p-center{flex-direction:row;align-items:center;gap:10px}
  .p-controls{gap:2px}
  .p-btn{width:30px;height:30px}
  .p-play{width:36px;height:36px;margin:0 2px}
  .p-progress{flex:1}
  .p-progress .wave{height:22px}
  .frow,.frow4,.radio-cards{grid-template-columns:1fr 1fr}
  .frow{grid-template-columns:1fr}
  .radio-cards.three{grid-template-columns:1fr}
  .plans-link{display:none}
  .prof-head{padding:0 12px;gap:12px}
  .prof-ava{width:76px;height:76px;font-size:26px}
  .track-hero .art{width:120px;height:120px}
  .track-actions .stat-inline{width:100%}
  .toasts{bottom:calc(var(--player-h) + 78px)}
  .gridc{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
}
@media (max-width:420px){
  .frow4{grid-template-columns:1fr 1fr}
  .cols-track{grid-template-columns:42px minmax(0,1fr) 40px}
  .cols-track .hide-sm{display:none}
}