/* ==========================================================================
   PLAYLISTS DE BANDES-SON
   Chargée partout (le bouton « + » d'ajout vit aussi sur l'onglet Bande-son de
   chaque jeu, et la fenêtre de choix peut s'ouvrir n'importe où). Tout est
   accroché à un préfixe `pl-` pour ne rien pouvoir déteindre sur le reste.
   Les couleurs viennent des variables du site : sur une page de jeu, --gold
   est déjà la teinte de CE jeu (cf. includes/theme-jeux.php), donc le module
   prend automatiquement la couleur de la page où il s'affiche.
   ========================================================================== */

/* ⚑ L'attribut `hidden` doit gagner. La règle navigateur `[hidden] { display: none }`
   a une specificite de 0-1-0 : n'importe laquelle de nos classes qui pose un `display`
   (.pl-btn est en inline-flex) la bat, et l'element reste visible alors qu'il est
   marque cache. Constate au test du 21/09/2026 : le bouton « Partager », reserve aux
   membres, s'affichait pour un visiteur anonyme. */
.pl-app [hidden], .pl-cat [hidden], .pl-partage [hidden], .pl-pop [hidden] { display: none !important; }

/* ── Disposition générale : la barre latérale et le détail ───────────────── */
.pl-app {
    display: grid;
    grid-template-columns: 19rem minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
    margin-bottom: 1.4rem;
}

.pl-side {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-soft);
    padding: 1rem .9rem;
    position: sticky;
    top: 5.2rem;
}
.pl-side-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.pl-side-head h2 { margin: 0; font-size: 1.02rem; }

.pl-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.pl-liste-item {
    display: flex; align-items: center; gap: .55rem;
    width: 100%; padding: .42rem .5rem; border: 1px solid transparent;
    border-radius: var(--radius-m); background: none; text-align: left;
    color: var(--text); font: inherit; font-size: .88rem; cursor: pointer;
    transition: background .12s, border-color .12s;
}
.pl-liste-item:hover { background: var(--bg-panel-lo); border-color: var(--border); }
.pl-liste-item.is-active { background: var(--bg-panel-lo); border-color: var(--gold); font-weight: 600; }
.pl-liste-cover { flex: none; width: 34px; height: 34px; object-fit: cover; border-radius: var(--radius-s); background: var(--bg-deep); }
.pl-liste-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pl-liste-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-liste-nb { font-size: .75rem; color: var(--text-mute); font-weight: 400; }
.pl-liste-partage { flex: none; font-size: .72rem; color: var(--gold); }

.pl-note { margin: .9rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--text-soft); border-top: 1px solid var(--border); padding-top: .7rem; }
.pl-note--ok { color: var(--success); }
.pl-vide { margin: .8rem 0 0; font-size: .82rem; color: var(--text-soft); line-height: 1.5; }

.pl-main {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-soft);
    padding: 1.1rem 1.15rem 1.25rem;
    min-width: 0;
}
.pl-accueil h2 { margin-top: 0; }
.pl-aide { margin: .9rem 0 0; padding-left: 1.2rem; font-size: .9rem; color: var(--text-soft); line-height: 1.7; }

/* ── L'en-tête d'une playlist ────────────────────────────────────────────── */
.pl-head { display: flex; align-items: flex-start; gap: .95rem; flex-wrap: wrap; margin-bottom: .9rem; }
.pl-cover { flex: none; width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-m); background: var(--bg-deep); box-shadow: var(--shadow-soft); }
.pl-head-txt { flex: 1; min-width: 12rem; }
.pl-head-txt h2 { margin: 0 0 .2rem; font-size: 1.28rem; overflow-wrap: anywhere; }
.pl-desc { margin: .1rem 0 .3rem; font-size: .88rem; color: var(--text-soft); }
.pl-meta { margin: 0; font-size: .8rem; color: var(--text-mute); }
.pl-head-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.pl-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .4rem .72rem; border: 1px solid var(--border-strong);
    border-radius: var(--radius-m); background: var(--bg-panel);
    color: var(--text); font: inherit; font-size: .82rem; cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.pl-btn:hover { background: var(--bg-panel-lo); border-color: var(--gold); color: var(--gold-soft); }
.pl-btn[disabled] { opacity: .5; cursor: not-allowed; }
.pl-btn--play, .pl-btn--neuf { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 600; }
.pl-btn--play:hover, .pl-btn--neuf:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: #fff; }
.pl-btn--danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.pl-btn--plus { margin: .7rem auto 0; display: block; }

.pl-lien-partage { margin: 0 0 .8rem; font-size: .82rem; background: var(--bg-panel-lo); border: 1px solid var(--border); border-radius: var(--radius-m); padding: .5rem .6rem; }
.pl-lien-partage input { width: 100%; font-family: var(--font-mono); font-size: .76rem; border: 1px solid var(--border); border-radius: var(--radius-s); padding: .3rem .4rem; background: var(--bg-panel); color: var(--text); }

/* ── La liste de pistes ──────────────────────────────────────────────────── */
.pl-tracks { list-style: none; margin: 0; padding: 0; }
.pl-track {
    display: flex; align-items: center; gap: .7rem;
    padding: .4rem .45rem; border-radius: var(--radius-s); font-size: .9rem;
}
.pl-track + .pl-track { border-top: 1px solid var(--border); }
.pl-track:hover { background: var(--bg-panel-lo); }
.pl-track.is-playing { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.pl-track.is-playing .pl-track-title { color: var(--gold-soft); font-weight: 700; }
.pl-track.is-orpheline { opacity: .55; }

.pl-track-i, .pl-track-num { flex: none; width: 2rem; text-align: right; font-family: var(--font-mono); font-size: .78rem; color: var(--text-mute); }
.pl-track-title { flex: 1; min-width: 0; color: var(--text); display: flex; flex-direction: column; line-height: 1.3; }
.pl-track-sub { color: var(--text-mute); font-size: .82em; }
.pl-track-game { flex: none; font-size: .74rem; color: var(--text-soft); white-space: nowrap; }
.pl-track-dur { flex: none; font-family: var(--font-mono); font-size: .78rem; color: var(--text-mute); width: 2.7rem; text-align: right; }

.pl-track-play, .pl-track-add, .pl-track-del, .pl-track-grip {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    border: 1px solid var(--border); background: var(--bg-panel);
    color: var(--text-soft); font-size: .72rem; line-height: 1; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s, transform .12s;
}
.pl-track-play { background: var(--gold); border-color: var(--gold); color: #fff; font-size: .62rem; }
.pl-track-play:hover { background: var(--gold-soft); transform: scale(1.12); }
.pl-track-add:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.pl-track-add.is-dedans { background: var(--success); border-color: var(--success); color: #fff; }
.pl-track-del:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.pl-track-grip { cursor: grab; border-color: transparent; background: none; font-size: .9rem; }
.pl-track-grip:active { cursor: grabbing; }
.pl-track.is-drag { opacity: .4; }
.pl-track.is-over { box-shadow: inset 0 2px 0 var(--gold); }

/* ── Le catalogue ────────────────────────────────────────────────────────── */
.pl-cat-intro { font-size: .88rem; color: var(--text-soft); margin-top: .2rem; }
.pl-cat-filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 .5rem; }
.pl-cat-q { flex: 1; min-width: 14rem; padding: .48rem .7rem; border: 1px solid var(--border-strong); border-radius: var(--radius-m); background: var(--bg-panel); color: var(--text); font: inherit; font-size: .88rem; }
.pl-cat-q:focus, .pl-cat-jeu:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.pl-cat-jeu { padding: .48rem .6rem; border: 1px solid var(--border-strong); border-radius: var(--radius-m); background: var(--bg-panel); color: var(--text); font: inherit; font-size: .85rem; max-width: 100%; }
.pl-cat-etat { margin: .2rem 0 .5rem; font-size: .8rem; color: var(--text-mute); }
.pl-tracks--cat { max-height: 34rem; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-m); padding: .2rem; }

/* ── La fenêtre « ajouter à une playlist » (aussi sur les pages de jeu) ──── */
.pl-pop {
    position: absolute; z-index: 60; min-width: 16rem; max-width: 20rem;
    background: var(--bg-panel); border: 1px solid var(--border-strong);
    border-radius: var(--radius-m); box-shadow: var(--shadow-deep); padding: .55rem;
}
.pl-pop-titre { margin: 0 0 .45rem; font-size: .78rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: .05em; }
.pl-pop-liste { list-style: none; margin: 0 0 .45rem; padding: 0; max-height: 14rem; overflow-y: auto; }
.pl-pop-item { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .38rem .45rem; border: 0; border-radius: var(--radius-s); background: none; color: var(--text); font: inherit; font-size: .86rem; text-align: left; cursor: pointer; }
.pl-pop-item:hover { background: var(--bg-panel-lo); }
.pl-pop-item-nb { margin-left: auto; font-size: .74rem; color: var(--text-mute); }
.pl-pop-item.is-dedans { color: var(--success); font-weight: 600; }
.pl-pop-neuf { display: flex; gap: .35rem; }
.pl-pop-neuf input { flex: 1; min-width: 0; padding: .35rem .45rem; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--bg-panel); color: var(--text); font: inherit; font-size: .84rem; }
.pl-pop-vide { margin: 0 0 .45rem; font-size: .8rem; color: var(--text-soft); }

/* Le « + » posé à côté de chaque piste sur l'onglet Bande-son d'un jeu :
   même gabarit que le pouce « j'aime » voisin, pour ne pas casser la ligne. */
.ost-track-pl {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 1.55rem; height: 1.55rem; border-radius: 50%;
    border: 1px solid var(--border); background: var(--bg-panel);
    color: var(--text-soft); font-size: .92rem; line-height: 1; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.ost-track-pl:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.ost-track-pl.is-dedans { background: var(--success); border-color: var(--success); color: #fff; }

/* ── Le message éphémère (confirmation d'ajout) ──────────────────────────── */
.pl-toast {
    position: fixed; left: 50%; bottom: 6.5rem; transform: translateX(-50%);
    z-index: 200; max-width: min(28rem, 92vw);
    background: var(--text); color: #fff; font-size: .85rem;
    padding: .55rem .9rem; border-radius: var(--radius-m); box-shadow: var(--shadow-deep);
    opacity: 0; transition: opacity .18s;
}
.pl-toast.is-on { opacity: .96; }
.pl-toast.is-err { background: var(--danger); }

/* ── Écrans étroits ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .pl-app { grid-template-columns: 1fr; }
    .pl-side { position: static; }
    .pl-liste { flex-direction: row; overflow-x: auto; padding-bottom: .3rem; }
    .pl-liste-item { flex: none; max-width: 13rem; }
}
@media (max-width: 620px) {
    .pl-track-game { display: none; }
    .pl-cover { width: 68px; height: 68px; }
    .pl-head-actions { width: 100%; }
    .pl-tracks--cat { max-height: 26rem; }
}