/* ==========================================================
   FICHE PAROLES & TRADUCTION : complète album-fiche.css et single-fiche.css (à charger APRÈS eux)
   Emplacement : /templates/Moon_Music_2024_Dark/css/lyrics-fiche.css
   Contenu : barre d'outils (vue Bilingue / Français / English, taille du texte),
   strophes alignées EN ↔ FR sur une ligne du temps, refrains, notes, titres du même album.
   Couleur de la chanson : variable --c posée par le bloc (comme les autres fiches).
   ========================================================== */

/* ---------------- BARRE D'OUTILS ---------------- */
.alb .lyr-tools {
    position: sticky;
    top: var(--lyr-sticky, 10px);
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    margin: 0 0 22px;
    padding: 9px 12px;
    border-radius: 18px;
    background: rgba(14, 15, 22, 0.84);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid var(--alb-line);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.alb .lyr-tools .alb-switch { margin: 0; }
.alb .lyr-flag { display: inline-block; flex: 0 0 auto; width: 20px !important; height: 20px !important; object-fit: contain; vertical-align: -5px; margin: 0 7px 0 0 !important; }
.alb .lyr-flag + .lyr-flag { margin-left: -2px !important; }
.alb .lyr-seg__btn { display: inline-flex; align-items: center; }

.lyr-size { display: inline-flex; align-items: center; gap: 8px; }
.lyr-size__k { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--alb-muted); }
.alb .lyr-ico,
.alb .lyr-ico:hover,
.alb .lyr-ico:focus {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 36px;
    margin: 0;
    padding: 0 10px !important;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    line-height: 1 !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
    outline: 0;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.alb .lyr-ico small { font-size: 0.72em; font-weight: 800; }
.alb .lyr-ico:hover, .alb .lyr-ico:focus-visible { color: #0e0f16 !important; background: var(--c) !important; border-color: var(--c) !important; }
.alb .lyr-ico:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.alb .lyr-ico[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }

/* ---------------- TAILLE DU TEXTE ---------------- */
.lyr { --lyr-fs: 1.06rem; --lyr-num: 54px; }
.lyr[data-size="0"] { --lyr-fs: 0.94rem; }
.lyr[data-size="1"] { --lyr-fs: 1.06rem; }
.lyr[data-size="2"] { --lyr-fs: 1.22rem; }
.lyr[data-size="3"] { --lyr-fs: 1.4rem; }
.lyr[data-size="4"] { --lyr-fs: 1.62rem; }

/* ---------------- EN-TÊTE DES COLONNES ---------------- */
.lyr-head { display: grid; grid-template-columns: minmax(0, 1fr) var(--lyr-num) minmax(0, 1fr); margin: 0 0 14px; }
.lyr-head__c { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 4px; }
.lyr-head__c--en { grid-column: 1; }
.lyr-head__c--fr { grid-column: 3; }
.alb .lyr-head__c img { width: 36px !important; height: 36px !important; object-fit: contain; }
.lyr-head__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lyr-head__t strong { font-size: 1.02rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.lyr-head__t small { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--alb-muted); }
.lyr-head--cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 22px; }
.lyr-head--cols .lyr-head__c--fr { grid-column: 2; }

/* ---------------- STROPHES : une ligne du temps, EN à gauche, FR à droite ---------------- */
.lyr-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lyr-num) minmax(0, 1fr);
    align-items: stretch;
}
.lyr-row::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-1px);
    background: linear-gradient(180deg, transparent, var(--alb-line) 22px, var(--alb-line) calc(100% - 22px), transparent);
}
.lyr-n {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: center;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-top: 14px;
    border-radius: 50%;
    font-size: 0.74rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--c);
    background: #0e0f16;
    border: 2px solid color-mix(in srgb, var(--c) 55%, transparent);
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.lyr-row.is-chorus .lyr-n { color: #0e0f16; background: var(--c); border-color: var(--c); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 55%, transparent); }

.lyr-st {
    position: relative;
    min-width: 0;
    margin: 0 0 14px;
    padding: 16px 22px 17px;
    border-radius: 16px;
    font-size: var(--lyr-fs);
    line-height: 1.7;
    text-align: left;
    color: #f1f2f8;
    background: var(--alb-card);
    border: 1px solid var(--alb-line);
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.lyr-en { grid-column: 1; grid-row: 1; }
.lyr-fr { grid-column: 3; grid-row: 1; }
.lyr-fr { background: color-mix(in srgb, var(--c) 5%, var(--alb-card)); }
.lyr-l { display: block; overflow-wrap: anywhere; }
.lyr-l strong { color: #fff; }
.lyr-l em { color: #fff; }
.lyr-l a { color: var(--c) !important; border-bottom: 1px dotted color-mix(in srgb, var(--c) 60%, transparent) !important; }
/* choeurs / voix secondaires entre parenthèses : plus discrets */
.lyr-bk { font-style: italic; color: var(--alb-muted); }
.lyr-lab { display: block; margin: 0 0 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); }

/* Refrain : repéré automatiquement (strophe répétée) */
.lyr-row.is-chorus .lyr-st { background: color-mix(in srgb, var(--c) 9%, var(--alb-card)); border-color: color-mix(in srgb, var(--c) 42%, transparent); }
.lyr-tag {
    display: inline-block;
    margin: 0 0 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0e0f16;
    background: var(--c);
}
.lyr-st::before { display: none; }
.lyr-row:hover .lyr-st { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: rgba(255, 255, 255, 0.075); }
.lyr-row.is-chorus:hover .lyr-st { background: color-mix(in srgb, var(--c) 14%, var(--alb-card)); }
.lyr-row:hover .lyr-n { background: var(--c); color: #0e0f16; }

/* ---------------- MODE « COLONNES » (nombre de strophes différent entre EN et FR) ---------------- */
.lyr-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 22px; align-items: start; }
.lyr-stack { min-width: 0; }
.lyr-stack .lyr-st:last-child { margin-bottom: 14px; }

/* ---------------- NOTES ---------------- */
.lyr-notes { display: grid; grid-template-columns: minmax(0, 1fr) var(--lyr-num) minmax(0, 1fr); margin: 6px 0 0; }
.lyr-note { grid-row: 1; min-width: 0; margin: 0 0 14px; padding: 14px 18px; border-radius: 14px; font-size: 0.9rem; line-height: 1.6; color: #dfe2ec; background: rgba(255, 255, 255, 0.03); border: 1px dashed color-mix(in srgb, var(--c) 45%, transparent); }
.lyr-note--en { grid-column: 1; }
.lyr-note--fr { grid-column: 3; }
.lyr-note .lyr-l { font-style: italic; }
.lyr-notes--cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 22px; }
.lyr-notes--cols .lyr-note--fr { grid-column: 2; }
.lyr-nb { margin: 14px 0 0; padding: 18px 22px; border-radius: 16px; line-height: 1.75; color: #dfe2ec; background: var(--alb-card); border: 1px solid var(--alb-line); border-left: 4px solid var(--c); }
.lyr-nb b { display: block; margin: 0 0 4px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c); }
.alb .lyr-nb a { color: #75a4fd !important; }
.alb .lyr-nb a:hover { color: var(--c) !important; }

/* ---------------- VUES : Français seul / English seul ---------------- */
.lyr[data-view="fr"] .lyr-en,
.lyr[data-view="fr"] .lyr-head__c--en,
.lyr[data-view="fr"] .lyr-note--en,
.lyr[data-view="fr"] .lyr-stack--en,
.lyr[data-view="en"] .lyr-fr,
.lyr[data-view="en"] .lyr-head__c--fr,
.lyr[data-view="en"] .lyr-note--fr,
.lyr[data-view="en"] .lyr-stack--fr { display: none; }

.lyr[data-view="fr"] .lyr-head,
.lyr[data-view="en"] .lyr-head { display: none; }
.lyr[data-view="fr"] .lyr-row,
.lyr[data-view="en"] .lyr-row,
.lyr[data-view="fr"] .lyr-notes,
.lyr[data-view="en"] .lyr-notes { grid-template-columns: var(--lyr-num) minmax(0, 780px); justify-content: center; }
.lyr[data-view="fr"] .lyr-row::before,
.lyr[data-view="en"] .lyr-row::before { left: calc(var(--lyr-num) / 2); }
.lyr[data-view="fr"] .lyr-n,
.lyr[data-view="en"] .lyr-n { grid-column: 1; }
.lyr[data-view="fr"] .lyr-fr,
.lyr[data-view="en"] .lyr-en { grid-column: 2; }
.lyr[data-view="fr"] .lyr-note--fr,
.lyr[data-view="en"] .lyr-note--en { grid-column: 2; }
.lyr[data-view="fr"] .lyr-cols,
.lyr[data-view="en"] .lyr-cols { grid-template-columns: minmax(0, 780px); justify-content: center; }
.lyr[data-view="fr"] .lyr-stack--fr,
.lyr[data-view="en"] .lyr-stack--en { grid-column: 1; }
.lyr[data-view="fr"] .lyr-st,
.lyr[data-view="en"] .lyr-st { font-size: calc(var(--lyr-fs) * 1.06); }
.lyr[data-view="fr"] .lyr-nb,
.lyr[data-view="en"] .lyr-nb { max-width: calc(780px + var(--lyr-num)); margin-left: auto; margin-right: auto; }

/* ---------------- AUTRES TITRES DU MÊME ALBUM ---------------- */
.lyr-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.alb .lyr-chip,
.alb .lyr-chip:hover,
.alb .lyr-chip:focus {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-width: 100%;
    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;
}
.lyr-chip b { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; color: var(--c); }
.lyr-chip span { font-size: 0.92rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.alb a.lyr-chip:hover, .alb a.lyr-chip:focus-visible { border-color: var(--c) !important; background: rgba(255, 255, 255, 0.09); transform: translateY(-2px); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 860px) {
    .lyr { --lyr-num: 38px; }
    .lyr-head { display: none; }

    /* Bilingue : chaque strophe EN puis sa traduction FR juste dessous */
    .lyr-row, .lyr-notes { grid-template-columns: var(--lyr-num) minmax(0, 1fr); column-gap: 10px; }
    .lyr-row::before { left: calc(var(--lyr-num) / 2); }
    .lyr-n { grid-column: 1; grid-row: 1 / span 2; width: 30px; height: 30px; margin-top: 12px; font-size: 0.68rem; }
    .lyr-en { grid-column: 2; grid-row: 1; margin-bottom: 6px; }
    .lyr-fr { grid-column: 2; grid-row: 2; }
    .lyr-st { padding: 14px 16px 15px; }
    .lyr[data-view="bi"] .lyr-en { font-size: calc(var(--lyr-fs) * 0.92); color: #cfd3e0; }
    .lyr[data-view="bi"] .lyr-fr { border-left: 3px solid var(--c); }
    .lyr[data-view="bi"] .lyr-st::before { display: block; content: attr(data-l); margin: 0 0 4px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.16em; color: var(--alb-muted); }
    .lyr[data-view="bi"] .lyr-fr::before { color: var(--c); }
    .lyr-note--en, .lyr-note--fr { grid-column: 2; grid-row: auto; }

    .lyr-cols, .lyr-notes--cols { grid-template-columns: minmax(0, 1fr); }
    .lyr-notes--cols .lyr-note--fr { grid-column: 1; }

    /* Vue FR seul / EN seul : même grille, une seule strophe par ligne */
    .lyr[data-view="fr"] .lyr-row, .lyr[data-view="en"] .lyr-row,
    .lyr[data-view="fr"] .lyr-notes, .lyr[data-view="en"] .lyr-notes { grid-template-columns: var(--lyr-num) minmax(0, 1fr); }
    .lyr[data-view="fr"] .lyr-n, .lyr[data-view="en"] .lyr-n { grid-row: 1; }
    .lyr[data-view="fr"] .lyr-fr, .lyr[data-view="en"] .lyr-en { grid-row: 1; }
    .lyr[data-view="fr"] .lyr-note--fr, .lyr[data-view="en"] .lyr-note--en { grid-column: 2; }
    .lyr[data-view="fr"] .lyr-cols, .lyr[data-view="en"] .lyr-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .alb .lyr-tools { padding: 8px; gap: 8px 10px; }
    .alb .lyr-seg__btn { padding: 7px 11px !important; font-size: 0.8rem; }
    .lyr-size__k { display: none; }
    .lyr-st { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .lyr-st, .lyr-n, .alb .lyr-ico, .alb .lyr-chip { transition: none !important; }
}
@media print {
    .alb .lyr-tools, .lyr-head { display: none !important; }
    .lyr-st { color: #000 !important; background: none !important; border-color: #999 !important; break-inside: avoid; }
}

/* ==========================================================
   CORRECTIFS MOBILE (v3)
   - plus de débordement horizontal (barre d'outils, titres, lecteur audio)
   - sélecteur de langue : 3 boutons égaux sur une seule rangée
   - titre, infos et labels plus compacts sur mobile
   - pastille « Extrait de l'album » avec la pochette
   ========================================================== */
.alb .alb-hero,
.alb .sgl-cover,
.alb .alb-info,
.alb .alb-sec,
.lyr { min-width: 0; max-width: 100%; }

/* Barre d'outils */
.alb .lyr-tools,
.alb .lyr-tools .alb-switch { max-width: 100%; min-width: 0; box-sizing: border-box; }
.alb .lyr-seg__btn { white-space: nowrap; }
.alb .lyr-fl { display: inline-flex; align-items: center; }
.alb .lyr-lb { display: inline-block; }

/* Titres de section : retour à la ligne autorisé */
.alb .alb-sec__title,
.alb .alb-sec__title span { white-space: normal !important; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }

/* Lecteur audio : ne dépasse jamais de sa carte */
.alb .alb-player { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }
.alb .alb-player audio { display: block; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
.alb .alb-player__k { min-width: 0; }
.alb .alb-player__k > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* Pastille « Extrait de l'album » : pochette | titre | flèche */
.alb .sgl-albums .sgl-album {
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    max-width: 100%;
    padding: 9px 14px 9px 9px;
}
.alb .sgl-albums .sgl-album img {
    order: -1;
    position: static !important;
    display: block !important;
    flex: 0 0 auto;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    object-fit: cover;
    border-radius: 10px;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
.alb .sgl-albums .sgl-album .sgl-album__t { flex: 1 1 auto; min-width: 0; }
.alb .sgl-albums .sgl-album svg { flex: 0 0 auto; }

@media (max-width: 560px) {
    /* ----- Sélecteur de langue : 3 boutons égaux, drapeau au-dessus du texte ----- */
    .alb .lyr-tools { justify-content: center; padding: 8px; gap: 8px; }
    .alb .lyr-tools .alb-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; margin: 0; }
    .alb .lyr-seg__btn {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        padding: 8px 4px !important;
        border-radius: 14px !important;
        font-size: 0.74rem !important;
        line-height: 1.1;
        text-align: center;
    }
    .alb .lyr-flag { width: 18px !important; height: 18px !important; margin: 0 1px !important; vertical-align: 0; }
    .alb .lyr-flag + .lyr-flag { margin-left: 1px !important; }

    /* ----- Titre, étiquette et infos plus compacts ----- */
    .alb .alb-kicker { padding: 6px 13px !important; font-size: 0.66rem !important; letter-spacing: 0.1em !important; line-height: 1.35 !important; }
    .alb .alb-title { font-size: clamp(1.25rem, 6vw, 1.6rem) !important; line-height: 1.16 !important; letter-spacing: 0 !important; overflow-wrap: anywhere; }
    .alb .alb-date strong { font-size: 1.2rem !important; }
    .alb .alb-date span { font-size: 0.72rem !important; }
    .alb .alb-fact__k { font-size: 0.64rem !important; }
    .alb .alb-fact__v { font-size: 0.9rem !important; line-height: 1.45 !important; }
    .alb .alb-fact { padding-top: 2px; padding-bottom: 2px; }

    /* ----- Labels : logos réduits, en rangée ----- */
    .alb .alb-labels { display: flex !important; flex-wrap: wrap; gap: 8px; zoom: 0.6; }
    .alb .alb-labels > * { min-width: 0; }

    /* ----- Pastille album ----- */
    .alb .sgl-albums .sgl-album { gap: 11px; padding: 8px 12px 8px 8px; }
    .alb .sgl-albums .sgl-album img { width: 52px !important; height: 52px !important; border-radius: 9px; }

    /* ----- Strophes : un peu plus de place ----- */
    .lyr { --lyr-num: 30px; }
    .lyr-st { padding: 12px 13px 13px; }
    .lyr-row, .lyr-notes { column-gap: 8px; }
    .lyr-n { width: 26px; height: 26px; font-size: 0.62rem; }
}

/* ==========================================================
   BLOC « Apparaît aussi dans » (v4)
   (déjà intégré à ce fichier)
   Sans ces règles, les liens s'affichent en ligne, avec les pochettes à leur taille d'origine.
   ========================================================== */
.alb .sgl-also { margin: 18px 0 4px; min-width: 0; max-width: 100%; }
.alb .sgl-also__k {
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--alb-muted);
}
.alb .sgl-also__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    min-width: 0;
}

/* Une pastille = pochette | titre + type · année */
.alb .sgl-also__i,
.alb .sgl-also__i:hover,
.alb .sgl-also__i:focus {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    padding: 8px 12px 8px 8px;
    border-radius: 14px;
    text-decoration: none !important;
    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;
}
.alb a.sgl-also__i:hover,
.alb a.sgl-also__i:focus-visible {
    border-color: var(--c) !important;
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-2px);
}
.alb .sgl-also__i img {
    position: static !important;
    display: block !important;
    flex: 0 0 auto;
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    object-fit: cover;
    border-radius: 9px;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
/* Pas encore de pochette : pastille ♪ */
.alb .sgl-also__ph {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 9px;
    font-size: 1.4rem;
    color: var(--c);
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed color-mix(in srgb, var(--c) 45%, transparent);
}
.alb .sgl-also__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.alb .sgl-also__t strong {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    overflow-wrap: anywhere;
}
.alb .sgl-also__t small {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--alb-muted) !important;
}

/* « Voir les N autres » */
.alb .sgl-also__more { margin: 10px 0 0; }
.alb .sgl-also__more > summary {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.alb .sgl-also__more > summary::-webkit-details-marker { display: none; }
.alb .sgl-also__more > summary:hover,
.alb .sgl-also__more > summary:focus-visible { color: #0e0f16; background: var(--c); border-color: var(--c); outline: 0; }
.alb .sgl-also__more .sgl-also__list { margin-top: 10px; }
.alb .sgl-also__s-o { display: none; }
.alb .sgl-also__more[open] .sgl-also__s-o { display: inline; }
.alb .sgl-also__more[open] .sgl-also__s-c { display: none; }

@media (max-width: 560px) {
    .alb .sgl-also__list { grid-template-columns: minmax(0, 1fr); }
    .alb .sgl-also__i img,
    .alb .sgl-also__ph { width: 48px !important; height: 48px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .alb .sgl-also__i, .alb .sgl-also__more > summary { transition: none !important; }
}


/* Sélecteur de pochette Album / Single */
.alb .sgl-cover-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px;
    margin: 12px auto 0;
    background: rgba(18, 19, 27, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.alb .sgl-cover-btn {
    appearance: none;
    border: 0;
    outline: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px 4px 6px;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.alb .sgl-cover-btn img {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}
.alb .sgl-cover-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.alb .sgl-cover-btn.is-active {
    color: #0e0f16 !important;
    background: var(--c, #55FFD1) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--c, #55FFD1) 40%, transparent);
}