/* ==========================================================
   FICHES EP / ALBUMS LIVE : complète album-fiche.css et single-fiche.css (à charger APRÈS eux)
   Emplacement : /templates/Moon_Music_2024_Dark/css/release-fiche.css
   Contenu : lecteur aléatoire, bouton lecture des pistes, piste en cours, navigation EP / lives.
   ========================================================== */

/* ---------------- LECTEUR ALÉATOIRE ---------------- */
.alb .rnd-now { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin: 0 2px 10px; }
.alb .rnd-now small { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--alb-muted); }
.alb .rnd-now strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02rem; line-height: 1.3; color: #fff; }
.alb .rnd-ctl { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }

.alb .rnd-btn,
.alb .rnd-btn:hover,
.alb .rnd-btn:focus,
.alb .rnd-btn:active {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 14px !important;
    border: 1px solid color-mix(in srgb, var(--c) 60%, transparent) !important;
    border-radius: 999px;
    outline: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.1 !important;
    text-transform: none;
    color: var(--c) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.alb .rnd-btn svg { display: block; flex: 0 0 auto; width: 18px; height: 18px; }
.alb .rnd-btn:hover, .alb .rnd-btn:focus-visible { color: #0e0f16 !important; background: var(--c) !important; transform: translateY(-2px); }
.alb .rnd-btn:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }

/* Interrupteur « Enchaîner » (désactivé par défaut) */
.alb .rnd-chain__dot { position: relative; display: inline-block; flex: 0 0 auto; width: 26px; height: 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.22); transition: background-color 0.2s ease; }
.alb .rnd-chain__dot::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform 0.2s ease, background-color 0.2s ease; }
.alb .rnd-chain[aria-checked="true"] .rnd-chain__dot { background: var(--c); }
.alb .rnd-chain[aria-checked="true"] .rnd-chain__dot::after { transform: translateX(12px); background: #0e0f16; }
.alb .rnd-chain:hover .rnd-chain__dot { background: rgba(14, 15, 22, 0.35); }
.alb .rnd-chain[aria-checked="true"]:hover .rnd-chain__dot { background: #0e0f16; }
.alb .rnd-chain[aria-checked="true"]:hover .rnd-chain__dot::after { background: var(--c); }

/* ---------------- BOUTON LECTURE D'UNE PISTE ---------------- */
.alb .rnd-go,
.alb .rnd-go:hover,
.alb .rnd-go:focus,
.alb .rnd-go:active {
    appearance: none;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0 !important;
    border-radius: 50%;
    outline: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    color: var(--c) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent) !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.alb .rnd-go svg { display: block; width: 18px; height: 18px; }
.alb .rnd-go .i-pause { display: none; }
.alb .rnd-go.is-play .i-play { display: none; }
.alb .rnd-go.is-play .i-pause { display: block; }
.alb .rnd-go:hover, .alb .rnd-go:focus-visible, .alb .rnd-go.is-play { color: #0e0f16 !important; background: var(--c) !important; }
.alb .rnd-go:hover, .alb .rnd-go:focus-visible { transform: scale(1.08); }
.alb .rnd-go:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; }

/* Piste en cours */
.alb-track.is-now { background: rgba(255, 255, 255, 0.07); }
.alb-track.is-now .alb-n { text-shadow: 0 0 10px var(--c); }
.alb .alb-track.is-now .alb-t, .alb .alb-track.is-now .alb-t a { color: var(--c) !important; }

/* Peu de pistes : une seule colonne (surcharge le 2 colonnes des albums) */
.alb .rel-compact .alb-tracks { column-count: 1 !important; }

/* ---------------- NAVIGATION « TOUS LES EP / ALBUMS LIVE » ---------------- */
.rel-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.alb .rel-chip,
.alb .rel-chip:hover,
.alb .rel-chip:focus {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 14px;
    border-radius: 12px;
    color: #f1f2f8 !important;
    background: var(--alb-card);
    border: 1px solid var(--alb-line) !important;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.rel-chip b { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; color: var(--c); }
.rel-chip span { font-size: 0.92rem; font-weight: 700; line-height: 1.25; }
.alb a.rel-chip:hover, .alb a.rel-chip:focus-visible { border-color: var(--c) !important; background: rgba(255, 255, 255, 0.09); transform: translateY(-2px); }
.alb a.rel-chip.is-current { border-color: var(--c) !important; background: color-mix(in srgb, var(--c) 18%, transparent); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 640px) {
    .alb .rnd-ctl { gap: 6px; }
    .alb .rnd-btn { padding: 8px 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .alb .rnd-chain__dot, .alb .rnd-chain__dot::after { transition: none !important; }
}