/* ==========================================================
   FICHE SINGLE : s'appuie sur album-fiche.css (chargé avant) pour tout
   ce qui est commun (infos, tracklist, pop-up de la pochette, texte de
   l'article). Ici : la pochette et la pastille de l'album.
   ========================================================== */

/* ---------------- HERO ---------------- */
.alb-hero.sgl-hero { grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); gap: 44px; }

/* ---------------- POCHETTE ---------------- */
.sgl-cover { min-width: 0; }
.sgl-stage { position: relative; width: 100%; }

.sgl-sleeve {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    cursor: zoom-in;
    background: #000;
    box-shadow: 0 26px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.alb .sgl-sleeve img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; }
/* reflet sur la pochette */
.sgl-sleeve::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 38%); }

/* Pastille façon autocollant */
.sgl-badge {
    position: absolute;
    z-index: 3;
    top: -10px;
    left: -10px;
    padding: 7px 13px;
    transform: rotate(-7deg);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #0e0f16;
    background: var(--c);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(14, 15, 22, 0.85);
}

/* ---------------- PASTILLE « EXTRAIT DE L'ALBUM » : titre, puis pochette en dessous ---------------- */
.alb .sgl-album,
.alb .sgl-album:hover,
.alb .sgl-album:focus {
    align-self: flex-start;
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 14px;
    max-width: min(100%, 340px);
    margin: -2px 0 0;
    padding: 12px 14px 14px;
    border-radius: 14px;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--alb-line) !important;
    transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}
.alb a.sgl-album:hover, .alb a.sgl-album:focus-visible { border-color: var(--c) !important; background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
.sgl-album__t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sgl-album small { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--alb-muted); }
.sgl-album strong { font-size: 1rem; line-height: 1.2; font-weight: 800; color: #fff; }
.sgl-album > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--c); transition: transform 0.25s ease; }
.alb a.sgl-album:hover > svg { transform: translateX(3px); }
/* plusieurs pastilles (album + EP) : côte à côte, à la ligne si l'écran est étroit */
.sgl-albums { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 12px; max-width: 100%; margin: -2px 0 0; }
.alb .sgl-albums .sgl-album { margin: 0; max-width: 100%; }
/* pochette de l'album sous le titre */
.alb .sgl-album img {
    grid-column: 1 / -1;
    display: block;
    width: 96px !important;
    height: 96px !important;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* Petit disque devant le nom d'une face / d'un disque */
.sgl-mini {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--c) 0 22%, #0a0a0f 24% 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.alb .alb-btn svg { flex: 0 0 auto; }

/* Peu de pistes : la liste ne s'étire pas sur toute la largeur */
.sgl-compact { max-width: 560px; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 900px) {
        .alb-hero.sgl-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .sgl-cover { width: min(100%, 440px); margin: 0 auto; }
}
@media (max-width: 640px) {
    .sgl-badge { top: -8px; left: -4px; font-size: 0.68rem; }
}