/* ============================================================
   MUSICOMÈTRE — feuille de style partagée
   ============================================================ */
:root{
  --bg:#F5F3EE; --surface:#FFFFFF; --surface-2:#EFEBE3;
  --ink:#1A1B1D; --ink-dim:#6E6C66;
  --amber:#D98A1F; --amber-soft:#F3E4CB; --ember:#C4562A;
  --line:#E2DDD3; --line-strong:#D0CABD;
  --ok:#3E8E5A; --err:#C4562A;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; padding-bottom:92px; min-height:100vh;}
h1,h2,h3,.display{font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.02em; font-weight:700; line-height:0.95;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
::selection{background:var(--amber); color:#fff;}
.mono{font-family:'IBM Plex Mono',monospace;}
.hidden{display:none !important;}

/* NAV */
header{position:sticky; top:0; z-index:50; background:rgba(245,243,238,0.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:72px;}
.logo{display:flex; align-items:center; gap:12px;}
.logo-mark{width:32px; height:32px;}
.logo-text{font-size:21px; letter-spacing:0.08em; font-family:'Barlow Condensed'; font-weight:700; text-transform:uppercase;}
.logo-text sup{font-size:10px; color:var(--amber); font-family:'Inter'; text-transform:none;}
.nav-links{display:flex; gap:28px; font-family:'Barlow Condensed'; font-size:15px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600;}
.nav-links a{color:var(--ink-dim); transition:color .2s;}
.nav-links a:hover, .nav-links a.active{color:var(--amber);}
.nav-right{display:flex; align-items:center; gap:14px;}
.btn{font-family:'Barlow Condensed'; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; padding:9px 20px; border-radius:3px; font-size:14px; border:1px solid var(--line-strong); cursor:pointer; transition:all .2s; background:var(--surface); color:var(--ink); display:inline-flex; align-items:center; gap:8px;}
.btn:hover{border-color:var(--amber); color:var(--amber);}
.btn-solid{background:var(--amber); color:#fff; border-color:var(--amber);}
.btn-solid:hover{background:#e89a3a; color:#fff;}
@media(max-width:760px){.nav-links{display:none;}}

/* ============================================================
   SÉLECTEUR DE LANGUE — bande dédiée en haut du header
   ------------------------------------------------------------
   Monté par renderLangBar() (app.js) comme premier enfant de
   <header>, donc AU-DESSUS de nav.wrap : en haut à gauche.

   Pourquoi une bande à part plutôt qu'un coin de la rangée du logo :
   nav.wrap est plafonné à 1180 px, dont 176 pour le logo, ~600 pour
   les six liens et 243 pour les boutons de compte. Les six drapeaux
   AVEC leurs codes pèsent 358 px et n'y entraient pas ; même réduits
   à 173 px, codes masqués, « Supervision musicale » se repliait
   encore sur deux lignes. La bande leur donne toute la largeur, et
   la rangée du logo retrouve exactement son allure d'origine.
   ============================================================ */
.lang-strip{ border-bottom:1px solid var(--line); background:var(--surface-2); }
.lang-strip-inner{ display:flex; align-items:center; min-height:32px; }
.lang-liste{ display:flex; align-items:center; gap:4px; }
.lang-opt{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border:1px solid transparent; border-radius:5px;
  background:none; cursor:pointer; transition:all .16s;
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500;
  line-height:1; letter-spacing:.02em; color:var(--ink-dim);
}
.lang-opt:hover{ color:var(--amber); border-color:var(--line-strong); }
.lang-opt.actif{ color:var(--amber); border-color:var(--amber); background:var(--amber-soft); font-weight:600; }
/* Les drapeaux inactifs sont estompés : l'actif se repère d'un coup
   d'œil, sans dépendre de la seule couleur de la bordure. */
.lang-opt .lang-flag{ opacity:.6; transition:opacity .16s; }
.lang-opt:hover .lang-flag, .lang-opt.actif .lang-flag{ opacity:1; }
/* Le liseré interne détache les drapeaux très clairs (Japon) du fond. */
.lang-flag{
  display:block; width:20px; height:14px; border-radius:2px; flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.16) inset;
}
/* Sous 560 px, six codes ne tiennent pas : les drapeaux suffisent.
   Les noms complets restent en infobulle et en aria-label. */
@media(max-width:560px){
  .lang-opt{ padding:4px 5px; }
  .lang-opt .lang-code{ display:none; }
}
html[data-theme="sombre"] .lang-strip{ background:rgba(255,255,255,.05); }
html[data-theme="sombre"] .lang-opt.actif{ background:rgba(255,255,255,.10); }

/* HEADER — menus discrets (compte, thème, langue) */
.hd-menu{ position:relative; display:inline-flex; }
.hd-btn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-dim);
  border-radius:4px; cursor:pointer; transition:all .18s; padding:0; }
.hd-btn:hover, .hd-menu.ouvert .hd-btn{ border-color:var(--amber); color:var(--amber); }
.hd-drop{ position:absolute; top:calc(100% + 8px); right:0; min-width:244px; z-index:70;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:7px; padding:6px;
  box-shadow:0 16px 42px rgba(0,0,0,.16); display:none; flex-direction:column; gap:1px; }
.hd-menu.ouvert .hd-drop{ display:flex; }
.hd-item{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:'Inter',sans-serif; font-size:14px; text-transform:none; letter-spacing:0; font-weight:500;
  color:var(--ink); background:none; border:none; text-align:left; width:100%;
  padding:9px 12px; border-radius:4px; cursor:pointer; }
.hd-item:hover{ background:var(--surface-2); color:var(--amber); }
.hd-item.actif::after{ content:'✓'; color:var(--amber); font-size:12px; }
.hd-item .hd-nom{ font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:17px; text-transform:none; }
.hd-badge{ color:var(--amber); font-family:'IBM Plex Mono',monospace; font-size:11px; }
.hd-sep{ height:1px; background:var(--line); margin:5px 4px; }
.btn.btn-compact{ padding:7px 13px; font-size:13px; }
/* Rangée « intitulé + pastilles » : thème et langue tiennent chacun sur une
   ligne du menu, au lieu d'une entrée par valeur (3 + 5 = 8 lignes). */
/* Intitulé AU-DESSUS des pastilles : côte à côte, « Sombre » et « IT »
   passaient à la ligne dès que l'intitulé mangeait la largeur. */
.hd-choix{ display:flex; flex-direction:column; align-items:stretch; gap:5px; padding:7px 12px 8px; }
.hd-choix-lab{ font-family:'Inter',sans-serif; font-size:10px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-dim); white-space:nowrap; }
.hd-puces{ display:flex; gap:3px; flex-wrap:wrap; justify-content:flex-start; }
.hd-puce{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; line-height:1;
  color:var(--ink-dim); background:none; border:1px solid transparent; border-radius:4px;
  padding:5px 7px; cursor:pointer; transition:all .15s; text-transform:none; letter-spacing:0; }
.hd-puce:hover{ color:var(--amber); border-color:var(--line-strong); }
.hd-puce.actif{ color:var(--amber); border-color:var(--amber); background:var(--amber-soft); font-weight:600; }
/* Les menus déroulants doivent rester opaques sur le thème photo. */
html[data-theme="sombre"] .hd-drop{ background:#15171B; }
html[data-theme="sombre"] .hd-btn{ background:rgba(255,255,255,.07); }
html[data-theme="sombre"] .hd-puce.actif{ background:rgba(255,255,255,.10); }
@media(max-width:420px){ .hd-drop{ min-width:190px; } }

/* GENERIC */
.eyebrow{font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.14em; color:var(--amber); text-transform:uppercase; margin-bottom:16px;}
.block{padding:44px 0;}
.block-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:26px; flex-wrap:wrap; gap:16px;}
.block-head h2{font-size:32px;}
.block-head a{font-family:'IBM Plex Mono'; font-size:12px; color:var(--amber); letter-spacing:0.05em; text-transform:uppercase;}

/* COMMENT ÇA MARCHE — trois étapes, pour le visiteur qui découvre le site */
.how-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.how-step{position:relative; padding:26px 24px; border:1px solid var(--line); border-radius:10px; background:var(--surface); transition:border-color .2s, transform .2s;}
.how-step:hover{border-color:var(--amber); transform:translateY(-3px);}
.how-ico{display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:var(--amber-soft); color:var(--amber); margin-bottom:16px;}
.how-num{position:absolute; top:22px; right:24px; font-family:'Barlow Condensed'; font-weight:700; font-size:34px; line-height:1; color:var(--line-strong);}
.how-step h3{font-size:20px; margin-bottom:8px;}
.how-step p{font-size:14px; color:var(--ink-dim); line-height:1.5;}
.how-note{margin-top:22px; font-size:13px; color:var(--ink-dim);}
.how-note a{color:var(--amber); font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.03em; margin-left:6px; white-space:nowrap;}
.how-note a:hover{text-decoration:underline;}
@media(max-width:760px){.how-steps{grid-template-columns:1fr;}}

/* SEARCH + FACETS */
/* z-index:40 (sous l'en-tête à 50) : sans lui, le backdrop-filter du thème
   sombre enferme les menus de facette dans le contexte d'empilement de la
   zone de recherche, et la liste des résultats — postérieure dans le DOM —
   se peint par-dessus. Les menus déroulants passeraient alors SOUS les titres. */
.search-zone{position:relative; z-index:40; border-bottom:1px solid var(--line); padding:36px 0 26px; background:var(--surface);}
.search-main{display:flex; gap:12px; margin-bottom:18px;}
.search-input-wrap{flex:1; position:relative;}
.search-input-wrap input{width:100%; background:var(--bg); border:1px solid var(--line-strong); color:var(--ink); padding:16px 16px 16px 48px; font-size:16px; border-radius:4px; font-family:'Inter';}
.search-input-wrap input:focus{outline:none; border-color:var(--amber); background:var(--surface);}
.search-input-wrap input::placeholder{color:var(--ink-dim);}
.search-input-wrap svg{position:absolute; left:16px; top:50%; transform:translateY(-50%);}
.ai-btn{background:linear-gradient(135deg,var(--amber),var(--ember)); border:none; color:#fff; padding:0 24px; font-family:'Barlow Condensed'; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; border-radius:4px; cursor:pointer; font-size:15px; display:flex; align-items:center; gap:8px; white-space:nowrap;}
.ai-btn small{font-size:9px; opacity:0.8; vertical-align:super;}
.facets{display:flex; flex-wrap:wrap; gap:10px;}
.facet{position:relative;}
.facet-btn{font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.04em; background:var(--surface); border:1px solid var(--line-strong); color:var(--ink-dim); padding:9px 14px; border-radius:3px; cursor:pointer; display:flex; align-items:center; gap:8px; transition:all .2s; text-transform:uppercase;}
.facet-btn:hover{border-color:var(--amber); color:var(--ink);}
.facet-btn.active{border-color:var(--amber); color:var(--amber); background:var(--amber-soft);}
.facet .chev{transition:transform .2s; font-size:10px;}
.facet.open .chev{transform:rotate(180deg);}
.facet-menu{position:absolute; top:calc(100% + 6px); left:0; background:var(--surface); border:1px solid var(--line-strong); border-radius:4px; padding:8px; min-width:200px; z-index:20; display:none; flex-direction:column; gap:2px; box-shadow:0 12px 30px rgba(0,0,0,0.10);
  /* Sans plafond, une liste de 20+ tags dépasse sous l'écran et ses derniers
     items deviennent inatteignables : on borne la hauteur et on fait défiler. */
  max-height:min(58vh, 420px); overflow-y:auto; overscroll-behavior:contain;
  /* Dernier rempart : un menu ne peut jamais être plus large que l'écran,
     quelle que soit la longueur des tags. Sans cela, un tag à rallonge
     (white-space:nowrap sur les entrées) provoquait un défilement
     horizontal de toute la page. */
  max-width:calc(100vw - 24px); box-sizing:border-box;}
/* Posée par recadrerFacette() quand le menu sortirait par la droite. */
.facet-menu.vers-gauche{ left:auto; right:0; }

/* Recherche sans résultat : de quoi rebondir plutôt qu'un cul-de-sac. */
.vide-note{ color:var(--ink-dim); font-size:14px; margin:14px 0 8px; }
.vide-note b{ color:var(--ink); }
.vide-puces{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.vide-puce{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.04em;
  background:var(--surface); border:1px solid var(--line-strong); color:var(--ink-dim);
  padding:7px 12px; border-radius:3px; cursor:pointer; transition:all .18s;
}
.vide-puce:hover{ border-color:var(--amber); color:var(--amber); }
.facet.open .facet-menu{display:flex;}
.facet-menu a{display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-size:13px; color:var(--ink); padding:8px 12px; border-radius:3px; transition:all .15s; cursor:pointer; white-space:nowrap;}
.facet-menu a:hover{background:var(--amber-soft); color:var(--amber);}
.facet-menu .facet-n{color:var(--ink-dim); font-family:'IBM Plex Mono',monospace; font-size:11px;}
.facet-menu a:hover .facet-n{color:var(--amber);}

/* TRACK ROWS */
.results-head{display:flex; justify-content:space-between; align-items:center; padding:0 0 12px; border-bottom:1px solid var(--line); flex-wrap:wrap; gap:12px;}
.results-head .count{font-family:'IBM Plex Mono'; font-size:13px; color:var(--ink-dim);}
.results-head .count b{color:var(--amber);}
.sort{display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-dim); text-transform:uppercase;}
.sort select{background:var(--surface); border:1px solid var(--line-strong); color:var(--ink); padding:7px 10px; border-radius:3px; font-family:'IBM Plex Mono'; font-size:12px;}
.track{display:grid; grid-template-columns:44px 200px 1fr 130px 74px 108px; align-items:center; gap:16px; padding:14px 12px; border-bottom:1px solid var(--line); transition:background .2s; cursor:pointer; border-radius:4px;}
.track:hover{background:var(--surface);}
.track.playing{background:var(--amber-soft);}
.track .play-btn{width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s;}
.track:hover .play-btn, .track.playing .play-btn{border-color:var(--amber); color:var(--amber);}
.track-meta .title{font-family:'Barlow Condensed'; font-weight:600; font-size:19px; text-transform:none; letter-spacing:0;}
.track-meta .artist{font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-dim);}
.waveform{display:flex; align-items:center; gap:1.5px; height:34px; cursor:pointer;}
.waveform .wv{flex:1; background:var(--line-strong); border-radius:1px;}
.track:hover .waveform .wv{background:#E0C089;}
.track.playing .waveform .wv{background:#E9CF9C;}
.track.playing .waveform .wv.on{background:var(--amber);}
.track-tags{display:flex; flex-wrap:wrap; gap:5px;}
.track-tags span{font-family:'IBM Plex Mono'; font-size:10px; color:var(--ink-dim); border:1px solid var(--line-strong); padding:3px 7px; border-radius:10px;}
.track-dur{font-family:'IBM Plex Mono'; font-size:13px; color:var(--ink-dim); text-align:right;}
.track-actions{display:flex; gap:8px; justify-content:flex-end;}
.icon-btn{width:34px; height:34px; border-radius:3px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s;}
.icon-btn:hover{border-color:var(--amber); color:var(--amber);}
.icon-btn.on{border-color:var(--amber); color:var(--amber); background:var(--amber-soft);}
@media(max-width:1000px){.track{grid-template-columns:40px 1fr 74px;} .track .waveform,.track .track-tags,.track .track-actions{display:none;}}

/* PLAYLIST CARDS */
.playlists{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.pl-card{background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; cursor:pointer; transition:transform .25s, box-shadow .25s;}
.pl-card:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,0.10);}
.pl-cover{height:150px; position:relative; display:flex; align-items:flex-end; padding:16px;}
.pl-cover .pl-wave{position:absolute; inset:0; display:flex; align-items:center; gap:2px; padding:0 14px; opacity:0.5;}
.pl-cover .pl-wave .wv{flex:1; border-radius:1px;}
.pl-cover .pl-play{position:relative; z-index:2; width:40px; height:40px; border-radius:50%; background:#fff; color:var(--amber); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.2); opacity:0; transform:translateY(6px); transition:all .25s;}
.pl-card:hover .pl-play{opacity:1; transform:translateY(0);}
.pl-body{padding:16px;}
.pl-body h3{font-family:'Barlow Condensed'; font-weight:600; font-size:19px; text-transform:none; letter-spacing:0; margin-bottom:4px;}
.pl-body p{font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-dim);}
@media(max-width:900px){.playlists{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.playlists{grid-template-columns:1fr;}}

/* PLAYER */
.player{position:fixed; bottom:0; left:0; right:0; z-index:60; background:var(--surface); border-top:1px solid var(--line-strong); height:80px; display:flex; align-items:center; gap:22px; padding:0 28px; box-shadow:0 -4px 20px rgba(0,0,0,0.06);}
.player-track{display:flex; align-items:center; gap:14px; width:220px; flex-shrink:0;}
.player-thumb{width:48px; height:48px; border-radius:4px; background:linear-gradient(135deg,var(--amber),var(--ember)); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.player-track .title{font-family:'Barlow Condensed'; font-weight:600; font-size:17px; text-transform:none;}
.player-track .artist{font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-dim);}
.player-controls{display:flex; align-items:center; gap:16px;}
.pc-btn{background:transparent; border:none; color:var(--ink-dim); cursor:pointer; display:flex;}
.pc-btn:hover{color:var(--ink);}
.pc-play{width:42px; height:42px; border-radius:50%; background:var(--amber); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; flex-shrink:0;}
.player-wave{flex:1; display:flex; align-items:center; gap:14px;}
.player-wave .time{font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-dim); flex-shrink:0;}
.player-wave-bars{flex:1; display:flex; align-items:center; gap:1.5px; height:36px; cursor:pointer;}
.player-wave-bars .wv{flex:1; border-radius:1px; background:var(--line-strong);}
.player-wave-bars .wv.on{background:var(--amber);}
.player-right{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.player-vol{display:flex; align-items:center; gap:8px;}
.vol-range{width:78px; height:4px; -webkit-appearance:none; appearance:none; background:var(--line-strong); border-radius:2px; cursor:pointer;}
.vol-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:12px; height:12px; border-radius:50%; background:var(--amber); border:none; cursor:pointer;}
.vol-range::-moz-range-thumb{width:12px; height:12px; border-radius:50%; background:var(--amber); border:none; cursor:pointer;}
.vol-range:focus{outline:none;}
@media(max-width:980px){.vol-range{display:none;}}
@media(max-width:820px){.player-wave,.player-right{display:none;} .player{justify-content:space-between;}}

/* HERO (home) */
.hero{position:relative; padding:90px 0 60px; border-bottom:1px solid var(--line); overflow:hidden; background:var(--surface);}
.hero-meter-bg{position:absolute; inset:0; bottom:auto; height:300px; display:flex; align-items:flex-end; gap:3px; padding:0 32px; opacity:0.10; pointer-events:none;}
.hero-meter-bg .wv{flex:1; background:var(--amber); border-radius:1px 1px 0 0;}
.hero-inner{position:relative; z-index:2;}
.hero h1{font-size:clamp(40px,6vw,78px); max-width:900px; margin-bottom:24px;}
.hero h1 em{font-style:normal; color:var(--amber);}
.hero p.lead{font-size:18px; color:var(--ink-dim); max-width:560px; margin-bottom:22px; line-height:1.6;}
.hero-free{display:inline-flex; align-items:center; gap:8px; margin-bottom:26px; padding:8px 16px; border-radius:100px; background:var(--amber-soft); color:var(--amber); border:1px solid var(--amber); font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; font-weight:500;}

/* MODAL (auth) */
.modal-backdrop{position:fixed; inset:0; background:rgba(26,27,29,0.55); z-index:100; display:none; align-items:center; justify-content:center; padding:24px;}
.modal-backdrop.open{display:flex;}
.modal{background:var(--surface); border-radius:10px; width:100%; max-width:420px; padding:36px; box-shadow:0 30px 80px rgba(0,0,0,0.3);}
.modal h2{font-size:28px; margin-bottom:6px;}
.modal .sub{font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-dim); margin-bottom:24px;}
.field{margin-bottom:16px;}
.field label{display:block; font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-dim); margin-bottom:6px;}
.field input, .field select, .field textarea{width:100%; background:var(--bg); border:1px solid var(--line-strong); border-radius:4px; padding:12px 14px; font-family:'Inter'; font-size:15px; color:var(--ink);}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--amber);}
.pass-wrap{position:relative;}
.pass-wrap input{padding-right:44px;}
.pass-eye{position:absolute; top:50%; right:6px; transform:translateY(-50%); width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:none; background:none; color:var(--ink-dim); cursor:pointer; border-radius:4px;}
.pass-eye:hover{color:var(--amber);}
.modal .full{width:100%; justify-content:center; margin-top:8px;}
.modal .switch{text-align:center; font-size:13px; color:var(--ink-dim); margin-top:18px;}
.modal .switch a{color:var(--amber); cursor:pointer;}
.modal-close{float:right; cursor:pointer; color:var(--ink-dim); font-size:22px; line-height:1; border:none; background:none;}
.demo-note{background:var(--amber-soft); border:1px solid #E6CFA0; border-radius:5px; padding:10px 12px; font-size:12px; color:#8a6423; margin-bottom:20px; line-height:1.5;}

/* FOOTER */
footer{padding:56px 0 40px; border-top:1px solid var(--line); margin-top:20px;}
.footer-top{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px;}
.footer-brand p{color:var(--ink-dim); font-size:14px; line-height:1.6; margin-top:14px; max-width:280px;}
.footer-col h4{font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.08em; color:var(--ink-dim); text-transform:uppercase; margin-bottom:16px;}
.footer-col a, .footer-col .lien-pied{display:block; font-size:14px; margin-bottom:11px; color:var(--ink); opacity:0.85; transition:all .2s;}
.footer-col a:hover, .footer-col .lien-pied:hover{opacity:1; color:var(--amber);}
/* Connexion/Inscription sont des <button> (ils ouvrent un modal, ils ne mènent
   nulle part) : on leur retire l'apparence de bouton, pas leur accessibilité. */
.footer-col .lien-pied{background:none; border:0; padding:0; font-family:inherit; text-align:left; cursor:pointer;}
.footer-bottom{border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-dim);}
@media(max-width:760px){.footer-top{grid-template-columns:1fr 1fr;}}

/* YOUTUBE / VIDEO GRID */
.video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.video-card{background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; transition:transform .25s, box-shadow .25s;}
.video-card:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,0.10);}
.video-embed{position:relative; padding-bottom:56.25%; height:0; background:#000;}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-body{padding:16px;}
.video-body h3{font-family:'Barlow Condensed'; font-weight:600; font-size:18px; text-transform:none; letter-spacing:0; margin-bottom:6px;}
.video-body p{font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-dim);}
@media(max-width:860px){.video-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.video-grid{grid-template-columns:1fr;}}

/* TOAST */
.toast{position:fixed; bottom:100px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--surface); padding:12px 22px; border-radius:6px; font-size:14px; z-index:200; opacity:0; transition:all .3s; pointer-events:none;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* PROJECT / CUE SHEET */
.two-col{display:grid; grid-template-columns:1fr 340px; gap:32px; align-items:start;}
@media(max-width:900px){.two-col{grid-template-columns:1fr;}}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:24px;}
.panel h3{font-size:22px; margin-bottom:16px;}
.cue-table{width:100%; border-collapse:collapse; font-size:13px;}
.cue-table th{text-align:left; font-family:'IBM Plex Mono'; font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-dim); padding:8px; border-bottom:1px solid var(--line-strong);}
.cue-table td{padding:10px 8px; border-bottom:1px solid var(--line); font-size:13px;}
.cue-empty{color:var(--ink-dim); font-size:13px; padding:20px 0; text-align:center; font-family:'IBM Plex Mono';}

/* ============================================================
   PHOTOGRAPHIE
   ------------------------------------------------------------
   Images Unsplash, appelées depuis leur CDN (licence Unsplash :
   usage commercial libre, sans attribution obligatoire ; le
   hotlinking est la méthode qu'ils recommandent).

   Règle de composition : la photo passe TOUJOURS sous un voile
   clair. Le fond reste #F5F3EE, le texte reste #1A1B1D, l'accent
   reste ambre. La photo donne de la profondeur, jamais le ton.
   Les variables --photo-* sont posées en HTML pour qu'une page
   puisse changer d'image sans toucher à cette feuille.
   ============================================================ */

/* ---------- Hero ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; }
.hero::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background-image:var(--photo-hero); background-size:cover; background-position:center 40%;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,
    rgba(245,243,238,.96) 0%, rgba(245,243,238,.86) 34%,
    rgba(245,243,238,.42) 60%, rgba(245,243,238,.06) 100%);
}
@media(max-width:900px){
  /* Sur mobile le texte occupe toute la largeur : le voile doit être opaque partout. */
  .hero::after{ background:rgba(245,243,238,.94); }
}
.hero-inner{ position:relative; }

/* Carrousel d'ambiance du hero (accueil uniquement).
   Le conteneur occupe le même plan que .hero::before, qui porte la photo :
   le pseudo-élément est généré AVANT dans l'arbre, donc à z-index égal les
   vidéos se peignent par-dessus. La photo reste ainsi le repli naturel tant
   qu'aucune vidéo n'est chargée, ou si le navigateur refuse de les lire.
   Le voile assombrissant est déjà .hero::after (z-index -1), au-dessus. */
.hero-videos{ position:absolute; inset:0; z-index:-2; pointer-events:none; }
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 45%;
  opacity:0; transition:opacity 1.4s ease;
}
/* Les deux plans se croisent en fondu : l'entrant monte pendant que le
   sortant descend, tous deux visibles le temps de la transition. */
.hero-video.actif{ opacity:1; }

/* Des plans qui s'enchaînent en fond sont exactement ce que ce réglage vise
   à supprimer. On masque tout : la photo d'attente de .hero::before reprend
   sa place, et initCarrouselHero() ne démarre pas. */
@media (prefers-reduced-motion: reduce){
  .hero-videos{ display:none; }
}

/* ---------- Bandeau de section ---------- */
.block-photo{ position:relative; isolation:isolate; overflow:hidden; }
.block-photo::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background-image:var(--photo-section); background-size:cover; background-position:center;
}
.block-photo::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(245,243,238,.90), rgba(245,243,238,.80));
}

/* ---------- Photo encadrée (sur-mesure, fiche morceau) ---------- */
.photo-cadre{
  position:relative; border-radius:4px; overflow:hidden;
  border:1px solid var(--line-strong); background:var(--surface-2);
}
.photo-cadre img{ display:block; width:100%; height:100%; object-fit:cover; }
.photo-cadre::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  /* Un filet ambré, pour rattacher la photo à la palette du site. */
  background:linear-gradient(160deg, transparent 55%, rgba(217,138,31,.18));
}

/* ---------- Pochette d'album sur la fiche morceau ---------- */
.cover{ aspect-ratio:1; max-width:300px; margin-bottom:26px; }

/* ---------- Cartes de playlist : photo sous le dégradé ----------
   .pl-wave est déjà `position:absolute; inset:0` plus haut : on ne redéfinit
   surtout pas sa position ici, on ne fait que l'empiler au-dessus de la photo. */
.pl-cover .pl-photo{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  /* Assez présente pour se voir, assez discrète pour laisser passer la waveform. */
  opacity:.42; mix-blend-mode:multiply;
}
.pl-cover .pl-wave{ z-index:1; }

/* ---------- Bandeau du modal de compte ----------
   Les marges négatives annulent le padding:36px de .modal, et le rayon
   reprend son border-radius:10px : la photo doit affleurer les bords. */
.modal-photo{
  height:130px; margin:-36px -36px 22px; position:relative; overflow:hidden;
  border-radius:10px 10px 0 0; background:var(--surface-2);
}
.modal-photo::before{
  content:''; position:absolute; inset:0;
  background-image:var(--photo-auth); background-size:cover; background-position:center 60%;
}
.modal-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,27,29,.10), rgba(255,255,255,.94));
}

/* ============================================================
   RECHERCHE INTELLIGENTE
   ============================================================ */
.search-input-wrap{ position:relative; }
.suggest{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:6px;
  box-shadow:0 20px 50px rgba(0,0,0,.14); overflow:hidden; display:none;
}
.suggest.open{ display:block; }
.suggest-item{
  display:flex; align-items:center; gap:12px; padding:11px 16px; cursor:pointer;
  border-bottom:1px solid var(--line);
}
.suggest-item:last-child{ border-bottom:none; }
.suggest-item:hover, .suggest-item.actif{ background:var(--amber-soft); }
.suggest-kind{
  font-family:'IBM Plex Mono'; font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--amber); border:1px solid var(--amber); border-radius:9px; padding:2px 7px;
  min-width:78px; text-align:center; flex:none;
}
.suggest-val{ flex:1; font-size:14px; }
.suggest-n{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-dim); }

/* ============================================================
   MISE EN SCÈNE
   ============================================================ */
.hero h1{ font-size:clamp(44px, 7.2vw, 104px); letter-spacing:-0.01em; }
.hero .lead{ font-size:clamp(16px, 1.35vw, 19px); max-width:560px; }
.hero{ padding:96px 0 88px; }
.block-head h2{ font-size:clamp(28px, 3vw, 42px); }

/* Apparition au défilement. Désactivée si l'utilisateur a demandé
   à réduire les animations : c'est une préférence d'accessibilité. */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.vu{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Aperçu au survol ----------
   Un liseré ambré signale la ligne dont l'extrait est en cours : sans lui,
   du son sort sans qu'on sache d'où. */
.track.apercu{ background:var(--surface); box-shadow:inset 3px 0 0 var(--amber); }
.track.apercu .waveform .wv{ background:#E0C089; }

/* ---------- Profil ---------- */
.profil-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:30px; }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:18px 20px; }
.stat b{ font-family:'Barlow Condensed'; font-size:34px; color:var(--amber); display:block; line-height:1; }
.stat span{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.08em; }
.histo{ width:100%; border-collapse:collapse; }
.histo td{ padding:11px 12px; border-bottom:1px solid var(--line); font-size:14px; }
.histo td:last-child{ text-align:right; font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-dim); white-space:nowrap; }
.histo tr:last-child td{ border-bottom:none; }

/* ============================================================
   FOND PHOTOGRAPHIQUE DE PAGE
   ------------------------------------------------------------
   Calque fixe, derrière tout le contenu. Deux voiles superposés :
   un lavis crème qui garantit le contraste du texte, et une trame
   ambrée très légère qui rattache la photo à la palette.

   Le voile est délibérément dense. Une photo trop visible sous un
   tableau de 24 lignes rend les titres illisibles — et ce site sert
   à lire des noms de morceaux, pas à admirer un studio.
   ============================================================ */
#fondPhoto{
  position:fixed; inset:0; z-index:-3;
  background-size:cover; background-position:center; background-attachment:scroll;
}
#fondPhoto::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(245,243,238,.945) 0%, rgba(245,243,238,.975) 60%),
    linear-gradient(0deg, rgba(217,138,31,.06), rgba(217,138,31,.06));
}
body{ background:var(--bg); }

/* Sur la fiche morceau et la page sur-mesure, le contenu est peu dense :
   on laisse respirer la photo. */
body.fond-libre #fondPhoto::after{
  background:
    linear-gradient(180deg, rgba(245,243,238,.90) 0%, rgba(245,243,238,.96) 70%),
    linear-gradient(0deg, rgba(217,138,31,.08), rgba(217,138,31,.08));
}

/* ---------- Parallax du hero ----------
   scale(1.14) : sans agrandissement, la translation découvrirait
   une bande vide sous la photo. */
.hero::before{
  transform:translate3d(0, var(--parallax, 0px), 0) scale(1.14);
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  .hero::before{ transform:none; }
}

/* ============================================================
   GRILLE DES AMBIANCES
   ------------------------------------------------------------
   Chaque tuile porte sa propre teinte via --mood-hue. La couleur
   reste désaturée au repos : douze tuiles pleinement colorées se
   disputeraient l'attention avec l'accent ambre de la marque.
   ============================================================ */
.mood-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:12px;
}
.mood{
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:20px 18px 16px; border-radius:8px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line);
  transition:transform .22s, box-shadow .22s, border-color .22s, background .22s;
}
.mood:hover{
  transform:translateY(-3px);
  border-color:hsl(var(--mood-hue) 55% 62%);
  background:hsl(var(--mood-hue) 62% 97%);
  box-shadow:0 12px 30px hsl(var(--mood-hue) 40% 40% / .16);
}
.mood-ico{ width:28px; height:28px; color:hsl(var(--mood-hue) 55% 46%); }
.mood-nom{
  font-family:'Barlow Condensed'; font-weight:700; font-size:19px;
  letter-spacing:.03em; text-transform:uppercase; line-height:1;
}
.mood-n{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-dim); }
.mood-de{
  position:absolute; top:12px; right:12px; width:32px; height:32px;
  border-radius:50%; border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink-dim); display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; transform:scale(.85); transition:all .2s;
}
.mood:hover .mood-de, .mood-de:focus-visible{ opacity:1; transform:scale(1); }
.mood-de:hover{ border-color:var(--amber); color:var(--amber); background:var(--amber-soft); }

/* Sans survol (tactile), le dé doit rester atteignable. */
@media (hover: none){ .mood-de{ opacity:1; transform:none; } }

.btn-surprise{ display:inline-flex; align-items:center; gap:9px; }

/* ============================================================
   POCHETTES
   ------------------------------------------------------------
   .pochette-gen (SVG généré) est toujours présent au fond ;
   .pochette-img (vraie pochette) le recouvre quand elle charge.
   Si elle échoue, le script la retire et le SVG réapparaît.
   ============================================================ */
.pochette{
  position:relative; aspect-ratio:1; width:100%; overflow:hidden;
  border-radius:4px; background:var(--surface-2); flex:none;
}
.pochette-gen, .pochette-img{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.pochette-img{ object-fit:cover; }

/* Ligne de catalogue : vignette carrée à gauche */
.track-cover{ width:48px; }
.track{ grid-template-columns:48px 44px 190px 1fr 120px 66px 100px; }
.track:hover .pochette{ box-shadow:0 3px 10px rgba(0,0,0,.16); }
@media(max-width:1000px){
  .track{ grid-template-columns:44px 40px 1fr 66px; }
}

/* Fiche morceau : grande pochette */
.pochette-hero{ max-width:300px; margin-bottom:26px; border-radius:6px;
  box-shadow:0 18px 46px rgba(0,0,0,.20); }

/* Playlist : vue en grille */
.pl-tracks{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); gap:20px;
}
.pl-tuile{ background:var(--surface); border:1px solid var(--line); border-radius:8px;
  overflow:hidden; transition:transform .22s, box-shadow .22s; }
.pl-tuile:hover{ transform:translateY(-4px); box-shadow:0 16px 38px rgba(0,0,0,.12); }
.pl-tuile .pochette{ border-radius:0; }
.pl-tuile-cover{ position:relative; cursor:pointer; }
.pl-tuile-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(26,27,29,.28); opacity:0; transition:opacity .2s;
}
.pl-tuile-cover:hover .pl-tuile-play, .pl-tuile.playing .pl-tuile-play{ opacity:1; }
.pl-tuile-play span{
  width:52px; height:52px; border-radius:50%; background:#fff; color:var(--amber);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.pl-tuile-corps{ padding:13px 14px 14px; }
.pl-tuile-corps h3{ font-family:'Barlow Condensed'; font-weight:600; font-size:17px;
  text-transform:none; letter-spacing:0; margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-tuile-corps p{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-tuile-actions{ display:flex; gap:6px; margin-top:10px; }

/* Pochette de repli : photo thématique, dégradé sombre, initiales. */
.pochette-gen{
  position:absolute; inset:0; background-size:cover; background-position:center;
}
.pochette-gen::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(20,20,24,.30) 0%, rgba(20,20,24,.80) 100%);
}
.pochette-txt{
  position:absolute; inset:auto 0 0 0; padding:12px 13px; z-index:1; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.pochette-txt b{
  display:block; font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:30px; line-height:1; letter-spacing:.02em;
}
.pochette-txt span{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; opacity:.78;
  margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* À 48 px, le nom de l'album serait une bouillie de 3 pixels de haut. */
.pochette--mini .pochette-txt{ padding:0; inset:0; display:flex;
  align-items:center; justify-content:center; }
.pochette--mini .pochette-txt b{ font-size:17px; }
.pochette--mini .pochette-txt span{ display:none; }

/* Morceau connu d'iNumerica mais dont le MP3 est absent du serveur. */
.track.sans-audio{ opacity:.62; }
.track.sans-audio .play-btn,
.track.sans-audio .btn-dl{ cursor:not-allowed; opacity:.45; }
.track.sans-audio .waveform{ cursor:default; }

/* ============================================================
   THÈME SOMBRE, PHOTO PLEIN ÉCRAN
   ------------------------------------------------------------
   Les surfaces du site passaient toutes par --surface : il suffit
   de retourner les jetons. Elles deviennent des voiles translucides
   posés sur la photo, jamais des rectangles opaques.

   Une exception assumée : les listes de résultats gardent un voile
   à 6 % et un flou d'arrière-plan. 24 lignes de mono 11 px posées
   directement sur une photo sont illisibles, et ce site sert à lire
   des noms de morceaux.
   ============================================================ */
html[data-theme="sombre"]{
  --bg:#0C0D10;
  --surface:rgba(255,255,255,.055);
  --surface-2:rgba(255,255,255,.10);
  --ink:#F2EFE9;
  --ink-dim:rgba(242,239,233,.58);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);
  --amber-soft:rgba(217,138,31,.20);
}

html[data-theme="sombre"] body{ background:var(--bg); }

/* ---------- Fond photographique : plein écran, sans voile clair ---------- */
html[data-theme="sombre"] #fondPhoto{ background-attachment:fixed; }
html[data-theme="sombre"] #fondPhoto::after{
  background:linear-gradient(180deg, rgba(8,9,11,.28) 0%, rgba(8,9,11,.72) 55%, rgba(8,9,11,.92) 100%);
}
html[data-theme="sombre"] body.fond-libre #fondPhoto::after{
  background:linear-gradient(180deg, rgba(8,9,11,.20) 0%, rgba(8,9,11,.66) 55%, rgba(8,9,11,.90) 100%);
}

/* ---------- Hero : photo pleine, dégradé noir remontant ---------- */
html[data-theme="sombre"] .hero{ background:transparent; border-bottom:none; }
html[data-theme="sombre"] .hero::after{
  background:linear-gradient(0deg,
    rgba(8,9,11,.95) 0%, rgba(8,9,11,.62) 38%, rgba(8,9,11,.18) 72%, rgba(8,9,11,.05) 100%);
}
html[data-theme="sombre"] .hero-meter-bg{ opacity:.14; }

/* La section « playlists » n'a plus besoin de sa propre photo :
   le fond de page est déjà visible. */
html[data-theme="sombre"] .block-photo::before, html[data-theme="sombre"] .block-photo::after{ content:none; }

/* ---------- Chrome : verre dépoli ---------- */
html[data-theme="sombre"] header{ background:rgba(12,13,16,.60); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
html[data-theme="sombre"] .player{ background:rgba(12,13,16,.86); backdrop-filter:blur(16px); box-shadow:0 -6px 30px rgba(0,0,0,.5); }
html[data-theme="sombre"] .search-zone{ background:rgba(12,13,16,.42); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }

html[data-theme="sombre"] .btn{ background:rgba(255,255,255,.07); color:var(--ink); }
html[data-theme="sombre"] .btn:hover{ background:rgba(217,138,31,.14); }
html[data-theme="sombre"] .btn-solid, html[data-theme="sombre"] .btn-solid:hover{ color:#fff; }
html[data-theme="sombre"] .icon-btn{ background:rgba(255,255,255,.07); color:var(--ink-dim); }
html[data-theme="sombre"] .facet-btn{ background:rgba(255,255,255,.07); color:var(--ink-dim); }
html[data-theme="sombre"] .sort select, html[data-theme="sombre"] .search-input-wrap input{ background:rgba(255,255,255,.07); color:var(--ink); }
html[data-theme="sombre"] .search-input-wrap input:focus{ background:rgba(255,255,255,.11); }

/* Les menus déroulants doivent rester opaques : du texte sur du texte
   à travers deux couches de photo ne se lit pas. */
html[data-theme="sombre"] .facet-menu, html[data-theme="sombre"] .suggest, html[data-theme="sombre"] .modal{ background:#15171B; }
html[data-theme="sombre"] .modal-backdrop{ background:rgba(0,0,0,.74); }

/* ---------- Listes ---------- */
html[data-theme="sombre"] #trackList, html[data-theme="sombre"] #latest, html[data-theme="sombre"] #projList{
  background:rgba(255,255,255,.06); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:8px; padding:6px 10px;
}
html[data-theme="sombre"] .track:hover{ background:rgba(255,255,255,.07); }
html[data-theme="sombre"] .track.playing{ background:rgba(217,138,31,.16); }
html[data-theme="sombre"] .track.apercu{ background:rgba(255,255,255,.09); }
html[data-theme="sombre"] .waveform .wv{ background:rgba(255,255,255,.24); }
html[data-theme="sombre"] .track:hover .waveform .wv{ background:rgba(217,138,31,.55); }
html[data-theme="sombre"] .track.playing .waveform .wv{ background:rgba(217,138,31,.40); }
html[data-theme="sombre"] .player-wave-bars .wv{ background:rgba(255,255,255,.26); }
html[data-theme="sombre"] .track-tags span{ border-color:var(--line-strong); }

/* ---------- Cartes transparentes ---------- */
html[data-theme="sombre"] .panel, html[data-theme="sombre"] .stat, html[data-theme="sombre"] .pl-tuile, html[data-theme="sombre"] .video-card, html[data-theme="sombre"] .mood{
  background:rgba(255,255,255,.055); backdrop-filter:blur(8px); border-color:var(--line);
}
html[data-theme="sombre"] .mood:hover{ background:hsl(var(--mood-hue) 55% 22% / .72); }
html[data-theme="sombre"] .mood-ico{ color:hsl(var(--mood-hue) 65% 66%); }
html[data-theme="sombre"] .mood-de{ background:rgba(255,255,255,.10); }

html[data-theme="sombre"] .cue-table td, html[data-theme="sombre"] .histo td{ border-color:var(--line); }
html[data-theme="sombre"] .cue-empty, html[data-theme="sombre"] .demo-note{ background:rgba(255,255,255,.05); border-color:var(--line); color:var(--ink-dim); }
html[data-theme="sombre"] footer{ background:rgba(8,9,11,.55); border-top:1px solid var(--line); }
html[data-theme="sombre"] .toast{ background:#15171B; color:var(--ink); border:1px solid var(--line-strong); }

/* ============================================================
   CARTES DE PLAYLIST : la photo REMPLIT la carte
   ============================================================ */
.pl-card{ position:relative; background:none; border:none; aspect-ratio:4/3; }
.pl-card .pl-cover{
  position:absolute; inset:0; height:auto; padding:0; border-radius:8px; overflow:hidden;
  background-size:cover !important; background-position:center;
}
.pl-card .pl-cover::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(6,7,9,.90) 0%, rgba(6,7,9,.34) 55%, rgba(6,7,9,.10) 100%);
}
.pl-card .pl-body{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:18px 18px 16px;
  color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.75);
}
.pl-card .pl-body h3{ font-size:21px; color:#fff; }
.pl-card .pl-body p{ color:rgba(255,255,255,.74); }
.pl-card .pl-desc{
  font-family:'Inter',sans-serif; font-size:12px; line-height:1.45;
  color:rgba(255,255,255,.80); margin-top:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pl-card .pl-play{ position:absolute; top:16px; right:16px; z-index:2; }
.pl-card:hover .pl-cover{ transform:scale(1.03); transition:transform .4s; }

/* La vignette doit être positionnée comme l'iframe : .video-embed a une
   hauteur nulle (ratio simulé par padding-bottom), donc un `height:100%`
   sur une image en flux vaut zéro pixel — c'est pourquoi les cartes
   n'affichaient qu'un rectangle noir. */
.video-embed img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ============================================================
   SUPERVISION
   ------------------------------------------------------------
   Un tableau dense : sept colonnes, jusqu'a 200 lignes. Il defile
   horizontalement dans son propre cadre plutot que d'elargir la page.
   ============================================================ */
.sup-select{
  font-family:'IBM Plex Mono'; font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  background:rgba(255,255,255,.07); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:3px; padding:9px 12px; cursor:pointer;
}
.sup-wrap{
  overflow-x:auto; border:1px solid var(--line); border-radius:8px;
  background:rgba(255,255,255,.06); backdrop-filter:blur(8px);
}
table.sup{ width:100%; border-collapse:collapse; min-width:960px; }
table.sup th{
  text-align:left; font-family:'IBM Plex Mono'; font-size:10px; letter-spacing:.10em;
  text-transform:uppercase; color:var(--ink-dim); font-weight:400;
  padding:14px 12px; border-bottom:1px solid var(--line-strong); white-space:nowrap;
}
table.sup td{ padding:11px 12px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
table.sup tr:last-child td{ border-bottom:none; }
table.sup tr:hover td{ background:rgba(255,255,255,.05); }
table.sup .c{ text-align:center; }
table.sup .fichier{ font-size:11px; color:var(--ink-dim); max-width:280px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table.sup tr.indispo td{ opacity:.72; }

.pastille{
  font-family:'IBM Plex Mono'; font-size:10px; letter-spacing:.08em; font-weight:500;
  padding:4px 10px; border-radius:11px; border:1px solid;
}
.pastille.oui{ color:#5FBE86; border-color:rgba(95,190,134,.45); background:rgba(95,190,134,.10); }
.pastille.non{ color:#E0755A; border-color:rgba(224,117,90,.45);  background:rgba(224,117,90,.10); }

.btn-mini{ padding:5px 12px; font-size:12px; }
.pris{ display:flex; flex-direction:column; gap:2px; align-items:flex-start; }
.pris b{ font-weight:600; font-size:13px; }
.pris span{ font-size:11px; color:var(--ink-dim); }
.pris .btn-mini{ margin-top:5px; }

/* ---------- Tableau de bord ---------- */
.admin-onglets{ display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap; }
.admin-onglets .btn.actif{ border-color:var(--amber); color:var(--amber); background:var(--amber-soft); }
.decl-statut{ font-family:'IBM Plex Mono'; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.decl-statut.a_declarer{ color:var(--amber); }
.decl-statut.declaree{ color:#5FBE86; }
.decl-statut.annulee{ color:var(--ink-dim); text-decoration:line-through; }

/* ============================================================
   MENU MOBILE
   ------------------------------------------------------------
   Le bouton n'apparaît qu'en dessous de 760px, là où la barre de
   navigation horizontale est masquée. Ouvert, il déplie les liens
   en panneau vertical sous l'en-tête.
   ============================================================ */
.burger{
  display:none; width:40px; height:40px; border:none; background:none; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; padding:0; margin-left:8px;
}
.burger span{
  display:block; height:2px; width:22px; background:var(--ink);
  border-radius:2px; transition:transform .25s, opacity .2s;
}
.burger.actif span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.actif span:nth-child(2){ opacity:0; }
.burger.actif span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media(max-width:760px){
  .burger{ display:flex; }
  /* La nav n'est plus jamais masquée en dur : c'est la classe .ouvert qui décide. */
  .nav-links{
    display:flex !important; position:absolute; top:72px; left:0; right:0;
    flex-direction:column; gap:0; padding:0;
    background:rgba(12,13,16,.97); backdrop-filter:blur(14px);
    max-height:0; overflow:hidden; transition:max-height .3s ease; z-index:49;
  }
  /* Padding et bordure seulement une fois déplié : sinon max-height:0 laisse
     dépasser une barre de 17px (padding + bordure non clippés en border-box). */
  .nav-links.ouvert{ max-height:70vh; padding:6px 0; border-bottom:1px solid var(--line); }
  .nav-links a{ padding:15px 32px; font-size:16px; border-bottom:1px solid var(--line); }
  /* Le logo garde sa place, le burger passe à droite avant les boutons compte. */
  header nav.wrap{ position:relative; flex-wrap:wrap; }
}

/* En très petite largeur, les libellés serrent : on masque le nom du membre,
   on garde les boutons. Le thème vit dans le menu unique du header ; la
   langue a sa propre bande au-dessus du header (voir .lang-strip). */
@media(max-width:440px){
  .auth-nom{ display:none; }
  .nav-right{ gap:8px; }
}

/* ============================================================
   THÈME CLAIR MODERNE — bleu nuit + or   (refonte 2026-07)
   ------------------------------------------------------------
   Remplace le thème sombre plein écran par un thème clair et
   professionnel : fond blanc cassé, cartes blanches ombrées,
   navigation blanche, accents bleu nuit (#1B2B4B) et or (#C9A84C).
   Le lecteur audio passe en bleu nuit à accents or.

   Bloc ADDITIF placé en fin de fichier : il gagne sur les
   déclarations sombres antérieures (même spécificité, plus loin
   dans la cascade) sans les supprimer — retour arrière trivial.
   Le remap --amber -> bleu nuit et --amber-soft -> bleu très clair
   recolore d'un coup tous les états interactifs hérités (liens,
   survols, facettes actives, etc.).

   Photos de fond : conservées. Le voile de #fondPhoto reste clair
   (le site respire en blanc) ; les photos des cartes de playlist et
   les pochettes de repli passent d'un voile NOIR à un voile BLEU NUIT.
   ============================================================ */
html[data-theme="clair"]{
  --bg:#FAFAFA; --surface:#FFFFFF; --surface-2:#EEF2FF;
  --ink:#0D0D0D; --ink-dim:#5B6472;
  --navy:#1B2B4B; --navy-2:#26385F; --gold:#C9A84C; --gold-2:#B8963D;
  --line:#E7E9EF; --line-strong:#D4D9E4;
  /* Remap de compatibilité : tout le legacy « amber » devient bleu nuit,
     l'« amber-soft » un bleu très clair, l'« ember » de l'or. */
  --amber:#1B2B4B; --amber-soft:#EEF2FF; --ember:#C9A84C;
  --ok:#2E9E5B; --err:#C4562A;
}
html[data-theme="clair"] body{ background:var(--bg); color:var(--ink); }

/* ---------- Fond photographique : voile blanc léger ---------- */
html[data-theme="clair"] #fondPhoto{ background-attachment:scroll; }
html[data-theme="clair"] #fondPhoto::after{
  background:
    linear-gradient(180deg, rgba(250,250,250,.93) 0%, rgba(250,250,250,.965) 60%),
    linear-gradient(0deg, rgba(27,43,75,.045), rgba(27,43,75,.045));
}
html[data-theme="clair"] body.fond-libre #fondPhoto::after{
  background:
    linear-gradient(180deg, rgba(250,250,250,.86) 0%, rgba(250,250,250,.95) 70%),
    linear-gradient(0deg, rgba(27,43,75,.06), rgba(27,43,75,.06));
}

/* ---------- Navigation : blanche, bordure légère ---------- */
html[data-theme="clair"] header{ background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
html[data-theme="clair"] .nav-links a{ color:var(--ink-dim); }
html[data-theme="clair"] .nav-links a:hover, html[data-theme="clair"] .nav-links a.active{ color:var(--navy); }
html[data-theme="clair"] .search-zone{ background:rgba(255,255,255,.80); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
@media(max-width:760px){
  html[data-theme="clair"] .nav-links{ background:rgba(255,255,255,.98); }
  html[data-theme="clair"] .nav-links a{ border-bottom:1px solid var(--line); }
}

/* ---------- Boutons : primaire bleu nuit plein, secondaire contour bleu ---------- */
html[data-theme="clair"] .btn{ background:var(--surface); color:var(--navy); border:1px solid var(--navy); }
html[data-theme="clair"] .btn:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
html[data-theme="clair"] .btn-solid{ background:var(--navy); color:#fff; border-color:var(--navy); }
html[data-theme="clair"] .btn-solid:hover{ background:var(--navy-2); color:#fff; border-color:var(--navy-2); }
html[data-theme="clair"] .icon-btn{ background:var(--surface); color:var(--ink-dim); border:1px solid var(--line-strong); }
html[data-theme="clair"] .icon-btn:hover{ border-color:var(--navy); color:var(--navy); }
html[data-theme="clair"] .icon-btn.on{ border-color:var(--navy); color:var(--navy); background:var(--surface-2); }
html[data-theme="clair"] .facet-btn{ background:var(--surface); color:var(--ink-dim); border:1px solid var(--line-strong); }
html[data-theme="clair"] .facet-btn:hover{ border-color:var(--navy); color:var(--navy); }
html[data-theme="clair"] .facet-btn.active{ border-color:var(--navy); color:var(--navy); background:var(--surface-2); }
html[data-theme="clair"] .sort select, html[data-theme="clair"] .search-input-wrap input{ background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); }
html[data-theme="clair"] .search-input-wrap input:focus{ background:var(--surface); border-color:var(--navy); }
html[data-theme="clair"] .ai-btn{ background:linear-gradient(135deg,var(--navy),var(--gold)); }

/* ---------- Menus, modales, toasts : blanc opaque, ombre bleutée ---------- */
html[data-theme="clair"] .facet-menu, html[data-theme="clair"] .suggest, html[data-theme="clair"] .modal{ background:var(--surface); border:1px solid var(--line-strong); box-shadow:0 16px 44px rgba(27,43,75,.16); }
html[data-theme="clair"] .facet-menu a:hover, html[data-theme="clair"] .suggest-item:hover, html[data-theme="clair"] .suggest-item.actif{ background:var(--surface-2); color:var(--navy); }
html[data-theme="clair"] .toast{ background:var(--navy); color:#fff; border:1px solid var(--navy-2); }
html[data-theme="clair"] .modal-backdrop{ background:rgba(13,17,28,.55); }

/* ---------- Listes de résultats : cartes blanches ombrées ---------- */
html[data-theme="clair"] #trackList, html[data-theme="clair"] #latest, html[data-theme="clair"] #projList{
  background:var(--surface); border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(27,43,75,.05); backdrop-filter:none;
}
html[data-theme="clair"] .track:hover{ background:#F5F7FB; }
html[data-theme="clair"] .track.playing{ background:var(--surface-2); }
html[data-theme="clair"] .track.apercu{ background:#F5F7FB; box-shadow:inset 3px 0 0 var(--gold); }
html[data-theme="clair"] .waveform .wv{ background:var(--line-strong); }
html[data-theme="clair"] .track:hover .waveform .wv{ background:#B9C2D6; }
html[data-theme="clair"] .track.playing .waveform .wv{ background:#C9D2E4; }
html[data-theme="clair"] .track.playing .waveform .wv.on{ background:var(--navy); }

/* ---------- Tags : fond bleu très clair, texte bleu ---------- */
html[data-theme="clair"] .track-tags span{ background:var(--surface-2); color:var(--navy); border:1px solid #DCE3F5; }

/* ---------- Cartes blanches ombrées ---------- */
html[data-theme="clair"] .panel, html[data-theme="clair"] .stat, html[data-theme="clair"] .pl-tuile, html[data-theme="clair"] .video-card, html[data-theme="clair"] .mood, html[data-theme="clair"] .how-step{
  background:var(--surface); border:1px solid var(--line);
  box-shadow:0 1px 3px rgba(27,43,75,.05); backdrop-filter:none;
}
html[data-theme="clair"] .stat b{ color:var(--navy); }
html[data-theme="clair"] .cue-empty, html[data-theme="clair"] .demo-note{ background:var(--surface-2); border-color:var(--line); color:var(--ink-dim); }
html[data-theme="clair"] footer{ background:var(--surface); border-top:1px solid var(--line); }
html[data-theme="clair"] .footer-col a:hover{ color:var(--navy); }

/* ---------- Hero : photo conservée sous un voile BLEU NUIT, texte blanc ----------
   .hero::before porte la photo (var(--photo-hero)) ; .hero::after est le voile.
   On garde donc la photo et on remplace le voile clair/noir par un dégradé
   bleu nuit — dense à gauche (là où se trouve le texte, pour la lisibilité),
   translucide à droite (la photo respire). Le fond navy de .hero sert de repli
   si la photo ne charge pas. */
html[data-theme="clair"] .hero{ background:linear-gradient(155deg,#1B2B4B 0%, #24365E 55%, #1B2B4B 100%); border-bottom:1px solid var(--line); }
html[data-theme="clair"] .hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,
    rgba(20,32,58,.92) 0%, rgba(20,32,58,.80) 34%,
    rgba(20,32,58,.56) 62%, rgba(20,32,58,.34) 100%);
}
@media(max-width:900px){ html[data-theme="clair"] .hero::after{ background:rgba(20,32,58,.84); } }
html[data-theme="clair"] .hero h1{ color:#fff; }
html[data-theme="clair"] .hero h1 em{ color:var(--gold); }
html[data-theme="clair"] .hero p.lead{ color:rgba(255,255,255,.82); }
html[data-theme="clair"] .hero .eyebrow{ color:var(--gold); }
html[data-theme="clair"] .hero-meter-bg{ opacity:.16; }
html[data-theme="clair"] .hero-meter-bg .wv{ background:var(--gold); }
html[data-theme="clair"] .hero-free{ background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(201,168,76,.55); }
html[data-theme="clair"] .hero .search-input-wrap input{ background:rgba(255,255,255,.96); color:var(--ink); border-color:transparent; }
html[data-theme="clair"] .hero .search-input-wrap input::placeholder{ color:var(--ink-dim); }
html[data-theme="clair"] .hero .search-input-wrap svg{ stroke:var(--ink-dim); }

/* ---------- Accent or ponctuel ---------- */
html[data-theme="clair"] .logo-text sup{ color:var(--gold); }

/* ---------- Lecteur audio : fond bleu nuit, accents or ---------- */
html[data-theme="clair"] .player{ background:var(--navy); border-top:1px solid var(--navy-2); box-shadow:0 -6px 30px rgba(27,43,75,.30); backdrop-filter:none; }
html[data-theme="clair"] .player-track .title{ color:#fff; }
html[data-theme="clair"] .player-track .artist, html[data-theme="clair"] .player-wave .time{ color:rgba(255,255,255,.6); }
html[data-theme="clair"] .pc-btn{ color:rgba(255,255,255,.72); }
html[data-theme="clair"] .pc-btn:hover{ color:#fff; }
html[data-theme="clair"] .pc-play{ background:var(--gold); color:var(--navy); }
html[data-theme="clair"] .player-thumb{ background:linear-gradient(135deg,var(--navy-2),var(--gold)); overflow:hidden; padding:0; }
/* Pochette du morceau en cours : remplit le carré 48px du lecteur.
   Chaque changement de titre recrée l'élément -> l'animation se rejoue. */
html[data-theme="clair"] .player-thumb .pochette{ width:100%; height:100%; border-radius:4px; }
html[data-theme="clair"] .player-thumb .pochette-txt b{ font-size:15px; }
html[data-theme="clair"] .player-thumb .pochette-txt span{ display:none; }
@keyframes pochLecteur{ from{ opacity:0; transform:scale(1.12); } to{ opacity:1; transform:scale(1); } }
html[data-theme="clair"] .player-thumb .pochette{ animation:pochLecteur .42s cubic-bezier(.22,.61,.36,1) both; }
@media(prefers-reduced-motion:reduce){ html[data-theme="clair"] .player-thumb .pochette{ animation:none; } }
html[data-theme="clair"] .player-wave-bars .wv{ background:rgba(255,255,255,.22); }
html[data-theme="clair"] .player-wave-bars .wv.on{ background:var(--gold); }
html[data-theme="clair"] .player .icon-btn{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.82); }
html[data-theme="clair"] .player .icon-btn:hover{ border-color:var(--gold); color:var(--gold); background:rgba(201,168,76,.14); }
html[data-theme="clair"] .player .icon-btn.on{ border-color:var(--gold); color:var(--gold); background:rgba(201,168,76,.16); }
html[data-theme="clair"] .vol-range{ background:rgba(255,255,255,.22); }
html[data-theme="clair"] .vol-range::-webkit-slider-thumb{ background:var(--gold); }
html[data-theme="clair"] .vol-range::-moz-range-thumb{ background:var(--gold); }

/* ---------- Supervision & tableaux : clair ---------- */
html[data-theme="clair"] .sup-select{ background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); }
html[data-theme="clair"] .sup-wrap{ background:var(--surface); border:1px solid var(--line); backdrop-filter:none; }
html[data-theme="clair"] table.sup tr:hover td{ background:#F5F7FB; }
html[data-theme="clair"] .mood-de{ background:var(--surface-2); }
html[data-theme="clair"] .mood-de:hover{ border-color:var(--navy); color:var(--navy); background:var(--surface-2); }
html[data-theme="clair"] .admin-onglets .btn.actif{ border-color:var(--navy); color:var(--navy); background:var(--surface-2); }
html[data-theme="clair"] .decl-statut.a_declarer{ color:var(--gold-2); }

/* ---------- Photos de fond des cartes : voile BLEU NUIT (au lieu de noir) ---------- */
html[data-theme="clair"] .pl-card .pl-cover::after{
  background:linear-gradient(0deg, rgba(20,32,58,.92) 0%, rgba(20,32,58,.40) 55%, rgba(20,32,58,.12) 100%);
}
html[data-theme="clair"] .pochette-gen::after{
  background:linear-gradient(160deg, rgba(20,32,58,.34) 0%, rgba(20,32,58,.82) 100%);
}
html[data-theme="clair"] .pl-tuile-play span, html[data-theme="clair"] .pl-cover .pl-play, html[data-theme="clair"] .pl-card .pl-play{ color:var(--navy); }

/* ---------- Champs de formulaire : focus bleu nuit ---------- */
html[data-theme="clair"] .field input:focus, html[data-theme="clair"] .field select:focus, html[data-theme="clair"] .field textarea:focus{ border-color:var(--navy); }
html[data-theme="clair"] .modal .switch a, html[data-theme="clair"] .pass-eye:hover{ color:var(--navy); }


/* ============================================================
   MENTIONS LEGALES / CGU (public/cgu.html)
   ------------------------------------------------------------
   Ces regles etaient dans un <style> en tete de cgu.html. Depuis
   que style-src a perdu 'unsafe-inline' (16/07), la CSP bloquait
   ce bloc : la page s'affichait SANS ses styles, sans que rien ne
   le signale a l'ecran. Ici, elles sont couvertes par 'self'.
   ============================================================ */
.legal{ max-width:820px; }
  .legal h2{ font-size:26px; margin:44px 0 14px; }
  .legal h3{ font-family:'Inter',sans-serif; text-transform:none; letter-spacing:0;
             font-size:16px; font-weight:600; margin:26px 0 8px; }
  .legal p, .legal li{ color:var(--ink-dim); line-height:1.75; font-size:15px; }
  .legal p{ margin-bottom:14px; }
  .legal ul{ margin:0 0 16px 22px; }
  .legal li{ margin-bottom:7px; }
  .legal strong{ color:var(--ink); font-weight:600; }
  .legal a{ color:var(--amber); }
  .legal .maj{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-dim); }
  .aremplir{ background:rgba(217,138,31,.16); border-bottom:1px dashed var(--amber);
             padding:1px 5px; border-radius:2px; color:var(--ink); }
  .sommaire{ display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 10px; }
  .sommaire a{ font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.06em;
    text-transform:uppercase; border:1px solid var(--line-strong); border-radius:3px;
    padding:7px 12px; color:var(--ink-dim); }
  .sommaire a:hover{ border-color:var(--amber); color:var(--amber); }

/* ============================================================
   GESTION DES PLAYLISTS (admin)
   Compatible clair / creme / sombre : uniquement des jetons.
   ============================================================ */
.pl-manager{ display:grid; grid-template-columns:260px 1fr; gap:20px; margin-top:18px; align-items:start; }
@media(max-width:820px){ .pl-manager{ grid-template-columns:1fr; } }

.pl-cote{ position:sticky; top:14px; }
.pl-cote-tt{ font-family:'Barlow Condensed'; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:15px; margin-bottom:4px; }
.pl-aide{ font-size:11px; color:var(--ink-dim); margin-bottom:12px; line-height:1.4; }
.pl-liste{ display:flex; flex-direction:column; gap:4px; max-height:70vh; overflow:auto; }
.pl-item{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; padding:9px 12px; border:1px solid var(--line);
  background:var(--surface); border-radius:6px; cursor:pointer; transition:all .15s;
  font-family:'Inter',sans-serif; color:var(--ink); }
.pl-item:hover{ border-color:var(--amber); }
.pl-item.actif{ border-color:var(--amber); background:var(--amber-soft); color:var(--amber); }
.pl-item .pl-nom{ font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-item .pl-n{ font-size:12px; color:var(--ink-dim); flex-shrink:0; }
.pl-item.actif .pl-n{ color:var(--amber); }
.pl-item.survol{ border-color:var(--amber); background:var(--amber-soft);
  outline:2px dashed var(--amber); outline-offset:2px; }

.pl-entete{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.pl-entete h3{ margin:0; }

.pl-ajout{ margin:6px 0 18px; }
.pl-resultats{ display:flex; flex-direction:column; gap:2px; margin-top:8px; }
.pl-res{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:6px 10px; border-radius:5px; }
.pl-res:hover{ background:var(--surface-2); }
.pl-res-t{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.pl-morceaux{ display:flex; flex-direction:column; gap:3px; }
.pl-track{ display:flex; align-items:center; gap:12px; padding:8px 12px;
  border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.pl-track:hover{ border-color:var(--line-strong); }
.pl-track.drag{ opacity:.4; }
.pl-drag{ cursor:grab; color:var(--ink-dim); font-size:16px; line-height:1; user-select:none; }
.pl-play, .pl-play-mini{ display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex-shrink:0; border:none; border-radius:50%;
  background:var(--amber); color:#fff; cursor:pointer; }
.pl-play[disabled]{ background:var(--line-strong); cursor:not-allowed; }
.pl-meta{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pl-meta .pl-t{ font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-meta .pl-a{ font-size:12px; color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-dur{ font-size:12px; color:var(--ink-dim); flex-shrink:0; }

.pl-sugg{ border:1px solid var(--amber); background:var(--amber-soft);
  border-radius:8px; padding:14px; margin-bottom:18px; }
.pl-sugg-tt{ font-family:'Barlow Condensed'; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:14px; margin-bottom:10px; color:var(--ink); }
.pl-sugg-item{ display:flex; align-items:center; gap:12px; padding:8px 0;
  border-top:1px solid var(--line); }
.pl-sugg-item .pl-play-mini{ width:28px; height:28px; }
.pl-sugg-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pl-sugg-txt b{ font-size:14px; }
.pl-sugg-txt span{ font-size:12px; color:var(--ink-dim); }
.pl-sugg-txt em{ font-style:normal; color:var(--amber); font-weight:600; }