/* ==========================================================
   FICHE DVD & FILMS - STYLE IMMERSIF (Moon Music 2024 Dark)
   Fichier : templates/Moon_Music_2024_Dark/css/dvd-fiche.css
   ========================================================== */

.alb.dvd {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 24px !important;
    color: #fff !important;
    box-sizing: border-box !important;
    display: block !important;
}

.alb.dvd .dvd-hero,
.dvd-hero {
    position: relative !important;
    overflow: hidden !important;
    padding: 28px 24px 36px !important;
    background: radial-gradient(circle at 40% 20%, color-mix(in srgb, var(--c) 14%, #12131b), #0b0c12 92%) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
}

.dvd-hero__bg {
    position: absolute !important;
    inset: -30px !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(50px) brightness(0.22) saturate(1.4) !important;
    opacity: 0.8 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.dvd-stage-wrap {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* En-tête titre */
.dvd-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}

.dvd-kicker {
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--c) !important;
    text-shadow: 0 0 14px color-mix(in srgb, var(--c) 45%, transparent) !important;
}

.dvd-title-box {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 14px !important;
}

.dvd-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    letter-spacing: 0.02em !important;
    color: #fff !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

.dvd-type-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 5px 13px !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #0e0f16 !important;
    background: var(--c) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 35%, transparent) !important;
}

.dvd-type-badge svg {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
}

/* Scène 2 colonnes : gauche affiche (330px), droite tracklist (flexible) */
.dvd-stage {
    display: grid !important;
    grid-template-columns: 330px minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.dvd-hero__left {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 330px !important;
    max-width: 330px !important;
    min-width: 0 !important;
}

.dvd-poster-wrap {
    width: 100% !important;
}

.dvd-poster {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 2 / 2.75 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #14151f !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent) !important;
}

.dvd-poster img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s cubic-bezier(.2, .8, .2, 1), filter 0.3s ease !important;
}

.dvd-poster:hover img {
    transform: scale(1.04) !important;
}

.dvd-poster__glow {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%, rgba(0, 0, 0, 0.72) 100%) !important;
}

.dvd-poster__badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #0e0f16 !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.dvd-poster__badge svg {
    width: 14px !important;
    height: 14px !important;
}

.dvd-poster__year {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 2 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    color: #fff !important;
    background: rgba(14, 15, 22, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.dvd-poster__play {
    position: absolute !important;
    bottom: 14px !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    color: #0e0f16 !important;
    background: var(--c) !important;
    text-decoration: none !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
}

.dvd-poster__play:hover {
    background: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65) !important;
}

.dvd-play-circle svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
}

/* Fiche technique / Métadonnées */
.dvd-meta-sheet {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
}

.dvd-m {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-sizing: border-box !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
}

.dvd-m:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.dvd-m--dir {
    width: 100% !important;
}

.dvd-m-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
}

.dvd-m--wide {
    grid-column: 1 / -1 !important;
}

.dvd-m__lbl {
    display: block !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.55) !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
}

.dvd-m__val {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.dvd-m__val strong {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: #fff !important;
}

.dvd-m__ico {
    flex: 0 0 auto !important;
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    color: var(--c) !important;
    background: color-mix(in srgb, var(--c) 16%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--c) 45%, transparent) !important;
}

.dvd-m__ico svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
}

/* Logos des labels officiels (via fiche-labels.php) */
.dvd-labels-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 38px !important;
}

.dvd-labels-wrap .alb-label {
    display: inline-flex !important;
    align-items: center !important;
}

.dvd-labels-wrap .alb-label__logo {
    display: block !important;
    width: 84px !important;
    height: 38px !important;
    --lc-d: var(--c, #fff) !important;
    background-color: var(--lc, var(--lc-d)) !important;
    -webkit-mask-image: var(--logo) !important;
    mask-image: var(--logo) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    transition: background-color .25s ease !important;
}

.dvd-labels-wrap .alb-label__txt {
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    white-space: nowrap !important;
    color: #fff !important;
}

/* COLONNE DROITE : TRACKLIST SANS SCROLL */
.dvd-hero__right {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.dvd-tracklist-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    border-radius: 18px !important;
    background: rgba(18, 19, 27, 0.85) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.dvd-tracklist__head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.dvd-tracklist__ico {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    color: var(--c) !important;
    background: color-mix(in srgb, var(--c) 16%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--c) 35%, transparent) !important;
}

.dvd-tracklist__ico svg {
    width: 18px !important;
    height: 18px !important;
}

.dvd-tracklist__title-box {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
}

.dvd-tracklist__t {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #fff !important;
}

.dvd-tracklist__count {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

.dvd-tracklist__body {
    padding: 12px 14px 16px !important;
}

/* 2 SECTIONS DISTINCTES (Ex: Everyday Life Live in Jordan : Sunrise & Sunset) */
.dvd-track-sec-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

.dvd-track-sec-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 12px !important;
    padding: 8px 10px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.dvd-track-sec-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 8px 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 4px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--c) !important;
}

/* MULTI-COLONNE FLUIDE (Ex: Live 2003, Live 2012, Live in São Paulo) */
.dvd-tracklist__flow {
    display: block !important;
}

.dvd-tracklist__flow--2col {
    column-count: 2 !important;
    column-gap: 20px !important;
}

.dvd-track-row {
    break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    transition: background-color 0.2s ease !important;
}

.dvd-track-row:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.dvd-track-n {
    flex: 0 0 24px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--c) !important;
}

.dvd-track-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.dvd-track-link {
    display: inline-block !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    transition: color 0.2s ease !important;
}

.dvd-track-link:hover {
    color: var(--c) !important;
    text-decoration: underline !important;
}

.dvd-track-txt {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.dvd-track-sec-divider {
    break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
    padding: 8px 10px 4px !important;
    margin-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dvd-track-sec-divider:first-child {
    border-top: 0 !important;
    margin-top: 0 !important;
}

.dvd-track-sec-divider span {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--c) !important;
}

.dvd-track-empty {
    padding: 24px 18px !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

/* BOUTONS PRÉCÉDENT / SUIVANT */
.dvd-pns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin-top: 10px !important;
    box-sizing: border-box !important;
}

.dvd-pns--single {
    grid-template-columns: minmax(0, 520px) !important;
}

.dvd-pn {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    text-decoration: none !important;
    color: #fff !important;
    box-sizing: border-box !important;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

.dvd-pn:hover,
.dvd-pn:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--c) !important;
    transform: translateY(-2px) !important;
}

.dvd-pn--prev {
    flex-direction: row !important;
}

.dvd-pn--next {
    flex-direction: row-reverse !important;
    text-align: right !important;
}

.dvd-pn svg {
    flex: 0 0 auto !important;
    width: 20px !important;
    height: 20px !important;
    color: var(--c) !important;
    transition: transform 0.25s ease !important;
}

.dvd-pn--prev:hover svg {
    transform: translateX(-3px) !important;
}

.dvd-pn--next:hover svg {
    transform: translateX(3px) !important;
}

.dvd-pn__thumb {
    flex: 0 0 auto !important;
    width: 50px !important;
    height: 66px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #14151e !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

.dvd-pn__thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.dvd-pn__t {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.dvd-pn__t small {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

.dvd-pn__t strong {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.dvd-pn__t em {
    font-style: normal !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    color: var(--c) !important;
}

/* Texte de présentation en bas */
.dvd-article-wrap {
    max-width: 1120px !important;
    margin: 28px auto 0 !important;
    padding: 0 10px !important;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    color: #e2e4ec !important;
}

/* RESPONSIVE SMARTPHONES & TABLETTES */
@media (max-width: 768px) {
    .dvd-stage {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }
    .dvd-hero__left {
        width: 100% !important;
        max-width: 440px !important;
        margin: 0 auto !important;
    }
    .dvd-hero__right {
        width: 100% !important;
    }
    .dvd-track-sec-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .dvd-tracklist__flow--2col {
        column-count: 1 !important;
    }
    .dvd-pns {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .dvd-pn--next {
        flex-direction: row !important;
        text-align: left !important;
    }
    .dvd-pn--next svg {
        order: 2 !important;
        margin-left: auto !important;
    }
}

@media (max-width: 520px) {
    .alb.dvd .dvd-hero,
    .dvd-hero {
        padding: 16px 12px 24px !important;
        border-radius: 18px !important;
    }
    .dvd-title {
        font-size: 1.55rem !important;
    }
    .dvd-m-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    .dvd-m {
        padding: 7px 10px !important;
    }
    .dvd-m__lbl {
        font-size: 0.6rem !important;
    }
    .dvd-m__val strong {
        font-size: 0.82rem !important;
    }
}


.dvd-poster__badge { max-width: calc(100% - 76px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.dvd-formats-wrap { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; width: 100% !important; padding: 2px 0 !important; }
.dvd-fmt-badge { display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 6px 12px !important; border-radius: 10px !important; font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.02em !important; color: #ffffff !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; box-sizing: border-box !important; transition: all 0.2s ease !important; }
.dvd-fmt-badge:hover { background: rgba(255,255,255,0.12) !important; border-color: var(--c) !important; color: var(--c) !important; transform: translateY(-1px) !important; }
.dvd-fmt-badge__ico { flex: 0 0 auto !important; display: grid !important; place-items: center !important; color: var(--c) !important; }
.dvd-fmt-badge__ico svg { display: block !important; width: 16px !important; height: 16px !important; }
.dvd-fmt-badge__txt { white-space: nowrap !important; }

@media (max-width: 520px) {
    .alb.dvd .dvd-hero, .dvd-hero { padding: 16px 12px 24px !important; border-radius: 18px !important; }
    .dvd-title { font-size: 1.55rem !important; }
    .dvd-poster__badge { max-width: calc(100% - 72px) !important; }
    .dvd-poster__badge span { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .dvd-poster__play { padding: 9px 12px !important; font-size: 0.82rem !important; white-space: nowrap !important; }
    .dvd-m-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
    .dvd-m { padding: 8px 12px !important; }
    .dvd-m__lbl { font-size: 0.65rem !important; }
    .dvd-m__val strong { font-size: 0.88rem !important; white-space: normal !important; word-break: break-word !important; }
    .dvd-tracklist__head { padding: 12px 14px !important; flex-wrap: wrap !important; gap: 8px !important; }
    .dvd-tracklist__title-box { flex-wrap: wrap !important; }
    .dvd-fmt-badge { padding: 5px 10px !important; font-size: 0.74rem !important; }
}