/* Lecteur de musique en ligne : mêmes bases que le portail, aux couleurs du style du serveur (data-style sur <body>). */
body { --accent:#f2ac51; --accent-2:#e6932a; --halo:#f2ac5133; --encre:#1a1206; }
body[data-style=medieval] { --fond:#15110c; --surface:#1c1711; --carte:#211b14; --carte-2:#2a2219; --accent:#d9b273; --accent-2:#b8894a; --halo:#c7a46b33; --encre:#1d1408; }
body[data-style=futuriste] { --fond:#0a0f1a; --surface:#0f1624; --carte:#121b2c; --carte-2:#172238; --accent:#4fd1ff; --accent-2:#22a6d8; --halo:#4fd1ff33; --encre:#04121c; }
body[data-style=minimaliste] { --accent:#e9e9e4; --accent-2:#c9c9c2; --halo:#ffffff1f; --encre:#111214; }
body[data-style=nature] { --fond:#0e1510; --surface:#121b15; --carte:#16211a; --carte-2:#1c2a20; --accent:#86cf8a; --accent-2:#5aa95f; --halo:#7bc47f33; --encre:#08140a; }
body[data-style=neon] { --fond:#110a18; --surface:#170e20; --carte:#1c1127; --carte-2:#251632; --accent:#ff5ddc; --accent-2:#d93bb8; --halo:#ff4fd840; --encre:#1e0619; }
body[data-style=pixel] { --fond:#13111b; --surface:#191623; --carte:#1e1a2a; --carte-2:#262134; --accent:#ffcc4d; --accent-2:#e0a91f; --halo:#ffcc4d33; --encre:#1c1404; }

.lecteur { padding:36px 0 0; }
.lecteur .d-bouton { background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:var(--encre); box-shadow:0 10px 24px -14px var(--accent); }
.lecteur .onglet.actif { border-color:var(--accent); color:var(--texte); }
.lp-tete { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.lp-serveur { display:flex; align-items:center; gap:14px; } .lp-serveur h1 { margin:0; } .lp-serveur .surtitre { color:var(--accent); margin:0 0 4px; }
.lp-icone { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; overflow:hidden; background:var(--carte-2); font-weight:800; font-size:22px; flex:none; }
.lp-icone img { width:100%; height:100%; object-fit:cover; }
.lp-vocal { margin:4px 0 0; color:var(--texte-2); font-size:14px; }
.lp-annonce { margin:0; min-height:24px; padding:8px 14px; border-radius:12px; background:var(--carte); border:1px solid var(--trait); color:var(--texte-2); font-size:14px; max-width:520px; }
.lp-annonce:empty { visibility:hidden; } .lp-annonce.erreur { color:#ffb4b4; border-color:#ff6b6b55; background:#ff6b6b12; }

.lp-grille { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows:auto 1fr; grid-template-areas:'scene recherche' 'scene onglets'; gap:16px; align-items:start; }
.lp-scene { grid-area:scene; position:relative; overflow:hidden; display:grid; gap:20px; padding:26px;
  background:radial-gradient(120% 90% at 0% 0%, var(--halo), transparent 60%), var(--carte); }
.lp-scene::before { content:''; position:absolute; inset:-60px; z-index:0; background:var(--pochette, none) center / cover no-repeat; filter:blur(46px) saturate(1.25) brightness(.5); opacity:.95; pointer-events:none; }
.lp-scene > * { position:relative; z-index:1; }
.lp-recherche { grid-area:recherche; } .lp-onglets { grid-area:onglets; }
.lp-pochette { width:100%; max-width:360px; aspect-ratio:1; border-radius:22px; overflow:hidden; display:grid; place-items:center; justify-self:center;
  background:linear-gradient(135deg, var(--carte-2), var(--surface)); box-shadow:0 30px 60px -30px #000, 0 0 0 1px var(--trait); font-size:72px; color:var(--texte-3); }
.lp-pochette img { width:100%; height:100%; object-fit:cover; }
.lp-infos { display:grid; gap:10px; text-align:center; }
.lp-etat { margin:0; color:var(--accent); font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:12px; }
.lp-infos h2 { margin:0; font-size:clamp(22px, 2.6vw, 30px); overflow-wrap:anywhere; } .lp-artiste { margin:0; color:var(--texte-2); font-weight:600; min-height:1.4em; }
.lp-progression { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; font-size:13px; color:var(--texte-3); font-variant-numeric:tabular-nums; margin-top:6px; }
.lp-barre { height:6px; border-radius:99px; background:#ffffff14; overflow:hidden; } .lp-barre i { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--accent-2), var(--accent)); transition:width 1s linear; }
.lp-boutons { display:flex; justify-content:center; align-items:center; gap:14px; margin:6px 0 2px; }
.lp-rond { width:52px; height:52px; border-radius:50%; border:1px solid var(--trait-2); background:var(--carte-2); color:var(--texte); font-size:20px; cursor:pointer; display:grid; place-items:center; }
.lp-rond.grand { width:68px; height:68px; font-size:26px; border:0; background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:var(--encre); box-shadow:0 14px 30px -14px var(--accent); }
.lp-rond:hover:not(:disabled) { filter:brightness(1.12); } .lp-rond:disabled, .lp-puce:disabled, .lp-petit:disabled { opacity:.4; cursor:not-allowed; }
.lp-rond:focus-visible, .lp-puce:focus-visible, .lp-petit:focus-visible, .onglet:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.lp-reglages { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; }
.lp-puce { padding:7px 12px; border-radius:999px; border:1px solid var(--trait-2); background:transparent; color:var(--texte-2); font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.lp-puce.actif { color:var(--encre); background:var(--accent); border-color:var(--accent); }
.lp-volume { display:inline-flex; align-items:center; gap:8px; color:var(--texte-2); font-size:14px; } .lp-volume input { accent-color:var(--accent); width:120px; }
.lp-video { border-radius:16px; overflow:hidden; aspect-ratio:16 / 9; background:#000; } .lp-video iframe { width:100%; height:100%; border:0; display:block; }

.lp-recherche form { display:flex; gap:8px; } .lp-recherche .champ { flex:1; }
.lp-resultats { display:grid; gap:4px; margin-top:10px; max-height:420px; overflow:auto; } .lp-resultats:empty { display:none; }
.lp-liste { display:grid; gap:4px; margin-top:12px; max-height:560px; overflow:auto; }
.lp-ligne { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:12px; } .lp-ligne:hover { background:var(--carte-2); }
.lp-numero { width:22px; text-align:right; color:var(--texte-3); font-size:13px; font-variant-numeric:tabular-nums; flex:none; }
.lp-mini { width:42px; height:42px; border-radius:9px; overflow:hidden; flex:none; display:grid; place-items:center; background:var(--carte-2); color:var(--texte-3); }
.lp-mini img { width:100%; height:100%; object-fit:cover; }
.lp-texte { display:grid; flex:1; min-width:0; } .lp-texte strong, .lp-texte small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lp-texte strong { font-size:15px; } .lp-texte small { color:var(--texte-3); font-size:13px; }
.lp-temps { color:var(--texte-3); font-size:13px; font-variant-numeric:tabular-nums; flex:none; }
.lp-actions { display:flex; gap:4px; flex:none; }
.lp-petit { min-width:32px; height:32px; padding:0 8px; border-radius:9px; border:1px solid transparent; background:transparent; color:var(--texte-2); font:inherit; font-size:15px; cursor:pointer; }
.lp-petit:hover:not(:disabled) { background:var(--surface); border-color:var(--trait-2); color:var(--texte); }
.lp-petit.actif { color:var(--accent); } .lp-petit.large { font-size:13px; font-weight:800; border-color:var(--trait-2); } .lp-petit.danger { color:var(--rouge); font-size:13px; }
.lp-sous { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 4px; color:var(--texte-3); font-size:13px; font-weight:700; }
.lp-sous > span { display:flex; gap:4px; } .lp-vide { color:var(--texte-3); font-size:14px; margin:10px 4px; } .lp-note { color:var(--texte-3); font-size:12px; margin:8px 4px 0; }
.lp-nouvelle { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; } .lp-nouvelle .champ { flex:1; min-width:160px; padding:9px 12px; }
.lp-case { display:inline-flex; align-items:center; gap:6px; color:var(--texte-2); font-size:14px; } .lp-case input { accent-color:var(--accent); }
.lp-playlist { border:1px solid var(--trait); border-radius:14px; margin-bottom:8px; overflow:hidden; } .lp-playlist.ouverte { border-color:var(--trait-2); }
.lp-playlist-tete { width:100%; display:flex; align-items:center; gap:10px; padding:12px 14px; background:transparent; border:0; color:var(--texte); font:inherit; cursor:pointer; text-align:left; }
.lp-playlist-tete strong { flex:1; } .lp-playlist-tete small { color:var(--texte-3); } .lp-fleche { color:var(--texte-3); }
.lp-pastille { font-size:12px; font-weight:800; padding:3px 8px; border-radius:999px; background:var(--halo); color:var(--accent); }
.lp-playlist-corps { padding:4px 10px 12px; border-top:1px solid var(--trait); }
.lp-menu { position:absolute; z-index:20; width:min(300px, calc(100vw - 16px)); display:grid; gap:4px; padding:10px; border-radius:16px; background:var(--carte-2); border:1px solid var(--trait-2); box-shadow:0 24px 60px -20px #000; }
.lp-menu[hidden] { display:none; }
.lp-choix { text-align:left; padding:9px 10px; border-radius:10px; border:0; background:transparent; color:var(--texte); font:inherit; font-size:14px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp-choix:hover { background:var(--surface); } .lp-menu .lp-nouvelle { margin:6px 0 0; }

@media (max-width: 900px) {
  .lp-grille { grid-template-columns:1fr; grid-template-rows:none; grid-template-areas:'scene' 'recherche' 'onglets'; }
  .lp-pochette { max-width:260px; } .lp-scene { padding:20px; }
}
@media (max-width: 480px) {
  .lecteur { padding-top:20px; } .lp-boutons { gap:10px; } .lp-rond { width:46px; height:46px; } .lp-rond.grand { width:60px; height:60px; }
  .lp-ligne { gap:8px; padding:6px 4px; } .lp-mini { width:36px; height:36px; } .lp-temps { display:none; } .lp-volume input { width:96px; }
  .lp-recherche form { flex-wrap:wrap; } .lp-recherche .d-bouton { width:100%; }
}
@media (prefers-reduced-motion: reduce) { .lp-barre i { transition:none; } }