/**
 * ATJ Music — base responsive (mobile, tablette, grands écrans)
 * Chargé après Bootstrap / thème existant.
 */

/* ——— Base ——— */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: #1c1b22;
    overflow-x: clip;
    max-width: 100%;
}

body.site-body-atj {
    overflow-x: clip;
    overflow-y: visible;
    max-width: 100%;
    width: 100%;
    min-height: 100%;
    background-color: #1c1b22;
    overscroll-behavior-x: none;
}

body.site-body-atj #main-content,
body.site-body-atj .site-preheader,
body.site-body-atj .site-header,
body.site-body-atj footer,
body.site-body-atj .music-browse {
    max-width: 100%;
}

body.site-body-atj .site-preheader {
    margin-top: 0;
    padding-top: 0;
}

body.site-body-atj #main-content {
    padding-top: 0;
    margin-top: 0;
}

/* iOS / mobile : scroll document natif + fond uni (évite pages noires au scroll rapide) */
@media (max-width: 991.98px) {
    html {
        background: #1c1b22;
        height: auto;
        overflow-x: clip;
        overflow-y: auto;
    }
    body.site-body-atj {
        overflow-x: clip;
        overflow-y: auto;
        height: auto;
        min-height: 100%;
        touch-action: pan-y pinch-zoom;
        background: #1c1b22 !important;
        background-image: none !important;
        background-attachment: scroll !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto;
    }
    /* Pas de couche GPU forcée sur le header : ça décale le paint du contenu au fling */
    body.site-body-atj .site-header.site-header--sticky {
        transform: none;
        -webkit-backface-visibility: visible;
        backface-visibility: visible;
        will-change: auto;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    }
    /* FABs : pas de recalcul de shadow pendant le fling */
    body.site-body-atj .atj-site-ai__launcher,
    body.site-body-atj .atj-radio-logo--fab,
    body.site-body-atj .back-to-top {
        transition: none !important;
        box-shadow: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        pointer-events: auto;
    }

    /*
     * Chrome Android : au fling rapide (surtout 1er passage), ombres / contain / gradients
     * → trou noir (header + FABs restent, le contenu disparaît).
     * Ne pas cibler tous les <section> (trop large).
     */
    body.site-body-atj #main-content,
    body.site-body-atj .music-browse,
    body.site-body-atj .music-browse.discovery-page,
    body.site-body-atj .atj-home-page,
    body.site-body-atj .artist-profile {
        content-visibility: visible !important;
        contain: none !important;
        background-image: none !important;
        overflow: visible !important;
        touch-action: pan-y pinch-zoom;
    }
    body.site-body-atj .music-browse,
    body.site-body-atj .music-browse.discovery-page,
    body.site-body-atj .atj-home-page {
        background-color: #16141a !important;
    }
    body.site-body-atj .discovery-card,
    body.site-body-atj .mb-card,
    body.site-body-atj .atj-hover-lift,
    body.site-body-atj .dp-card,
    body.site-body-atj .preorder-rail-card,
    body.site-body-atj .home-song-rail-card,
    body.site-body-atj .home-album-rail-card,
    body.site-body-atj .home-artist-link,
    body.site-body-atj .cat-artist-card,
    body.site-body-atj .shadow-sm,
    body.site-body-atj .shadow,
    body.site-body-atj .card {
        transition: none !important;
        transform: none !important;
        filter: none !important;
        contain: none !important;
        content-visibility: visible !important;
        will-change: auto !important;
        box-shadow: none !important;
    }
    body.site-body-atj .dp-section-bar,
    body.site-body-atj .site-section-bar,
    body.site-body-atj .music-browse-category-nav-sticky,
    body.site-body-atj .music-browse .music-browse-category-nav-sticky,
    body.site-body-atj .music-browse-category-nav-sticky.is-pinned {
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        transform: none !important;
    }
    body.site-body-atj .dp-card__body,
    body.site-body-atj .mb-card__body {
        background-image: none !important;
    }
}

/* Médias et embeds */
body.site-body-atj img,
body.site-body-atj video,
body.site-body-atj canvas,
body.site-body-atj svg:not(.fa):not([class*="font"]) {
    max-width: 100%;
    height: auto;
}

/* Chat ATJ : vignettes et avatars à dimensions fixes (surcharge le bloc médias ci-dessus). */
.atj-site-ai .atj-site-ai__avatar-img,
.atj-site-ai img.atj-site-ai__head-logo,
.atj-site-ai .atj-site-ai__song-card img,
.atj-site-ai .atj-site-ai__event-top img {
    max-width: none;
}

body.site-body-atj iframe {
    max-width: 100%;
}

/* Legacy fixed-bottom slider (old player styles): disable to avoid ghost bar. */
body.site-body-atj .slider {
    display: none !important;
}

/* Blocs éditoriaux (Summernote / témoignages) */
body.site-body-atj .song-desc-prose img,
body.site-body-atj .song-desc-prose iframe,
body.site-body-atj .atj-testimony-content iframe,
body.site-body-atj .text-muted iframe {
    max-width: 100%;
}

/* Tableaux dans les contenus riches : défilement horizontal sans casser le layout ailleurs */
body.site-body-atj .song-desc-prose,
body.site-body-atj .atj-testimony-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
body.site-body-atj .song-desc-prose table,
body.site-body-atj .atj-testimony-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

/* Hero / blocs #rel (accueil) */
@media (max-width: 767.98px) {
    body.site-body-atj #rel1 {
        height: auto !important;
        min-height: 200px;
    }
    body.site-body-atj #rel2 {
        width: min(88vw, 300px) !important;
        height: min(88vw, 300px) !important;
        top: auto !important;
    }
    body.site-body-atj #rel2 img {
        width: 100% !important;
        height: auto !important;
        max-width: 300px;
    }
}

/* Conteneurs Bootstrap : un peu d’air sur très petits écrans */
@media (max-width: 575.98px) {
    body.site-body-atj .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    body.site-body-atj .container-fluid.px-lg-5 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Titres de page : éviter débordements */
body.site-body-atj .display-4,
body.site-body-atj .h2.font-weight-bold {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Grilles métadonnées fiche single */
@media (max-width: 575.98px) {
    body.site-body-atj .song-detail-page .song-meta-grid {
        grid-template-columns: 1fr;
    }
}

/* Music browse : texte d’intro aligné sur mobile */
@media (max-width: 767.98px) {
    body.site-body-atj .music-browse .mb-section-head .mb-muted {
        text-align: left !important;
        max-width: none !important;
    }
    body.site-body-atj .music-browse .mb-hero__inner {
        padding: 1.35rem 0 1.5rem;
    }
    body.site-body-atj .music-browse .mb-lead {
        font-size: 0.95rem;
    }
}

/* Cartes listes (titres, pistes) : texte contenu + boutons sous le texte sur mobile */
body.site-body-atj .site-list-row {
    overflow: hidden;
    max-width: 100%;
}

body.site-body-atj .site-list-row__layout {
    gap: 0.5rem;
    max-width: 100%;
}

body.site-body-atj .site-list-row__main,
body.site-body-atj .site-list-row__text {
    min-width: 0;
    max-width: 100%;
}

body.site-body-atj .site-list-row__title {
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.site-body-atj .site-list-row__artist {
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.site-body-atj .site-list-row__actions {
    max-width: 100%;
    gap: 0.35rem;
}

body.site-body-atj .site-list-row__actions > .d-inline-flex {
    flex-wrap: wrap;
    gap: 0.35rem;
}

body.site-body-atj .site-list-row__actions .btn {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    body.site-body-atj .site-list-row .site-list-row__layout {
        flex-direction: column;
        align-items: stretch !important;
    }

    body.site-body-atj .site-list-row__title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    body.site-body-atj .site-list-row__artist {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    body.site-body-atj .site-list-row__actions {
        width: 100%;
    }
}

/* Catégorie détail : éviter le débordement horizontal sur mobile */
@media (max-width: 767.98px) {
    body.site-body-atj .category-detail-page .row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Rails / onglets horizontaux : scroll interne sans faire bouger toute la page */
@media (max-width: 991.98px) {
    body.site-body-atj .preorder-rail,
    body.site-body-atj .single-category-nav,
    body.site-body-atj .music-browse .single-category-nav {
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    body.site-body-atj .owl-carousel {
        overflow: hidden;
        max-width: 100%;
    }

    body.site-body-atj .owl-carousel .owl-stage-outer {
        overflow: hidden !important;
    }
}

/* Lecteur global : deux lignes sur petit écran, barre de progression visible */
@media (max-width: 767.98px) {
    .atj-global-player__inner {
        flex-wrap: wrap;
        gap: 0.4rem 0.5rem;
    }
    .atj-global-player__meta {
        flex: 1 1 120px;
        min-width: 0;
    }
    .atj-global-player__progress.d-none {
        display: flex !important;
        flex: 1 1 100%;
        width: 100%;
        order: 5;
        margin-top: 0.15rem;
        padding-top: 0.35rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    body.atj-player-visible {
        padding-bottom: 118px;
    }
}

/* Zones tactiles confortables (approximation) */
@media (pointer: coarse) {
    body.site-body-atj .btn-sm {
        min-height: 40px;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }
    .atj-global-player__btn {
        min-width: 40px;
        min-height: 40px;
    }
}

/* Footer logo */
@media (max-width: 575.98px) {
    body.site-body-atj footer .navbar-brand img.logo,
    body.site-body-atj .container-fluid .logo {
        max-width: 140px;
        height: auto;
    }
}

/* Accueil mobile : 2 singles/albums par ligne (pas un seul pleine largeur) */
@media (max-width: 991.98px) {
    body.site-body-atj .atj-home-page .home-editorial-rails .atj-home-rail-grid,
    body.site-body-atj .atj-home-page .home-nouv-trend .atj-home-rail-grid,
    body.site-body-atj .atj-home-page .atj-home-rail-grid.atj-mobile-static-list,
    body.site-body-atj .atj-home-page .atj-home-rail-grid.home-rail-static,
    body.site-body-atj .atj-home-page .atj-home-rail-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.65rem !important;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        overflow: visible !important;
    }
    body.site-body-atj .atj-home-page .atj-home-rail-grid > .item,
    body.site-body-atj .atj-home-page .atj-home-rail-grid > .owl-item {
        width: auto !important;
        max-width: none !important;
        flex: unset !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        float: none !important;
    }
    body.site-body-atj .atj-home-page .atj-home-rail-grid .home-song-rail-card,
    body.site-body-atj .atj-home-page .atj-home-rail-grid .home-album-rail-card,
    body.site-body-atj .atj-home-page .atj-home-rail-grid .preorder-rail-card {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
    }
}

/*
 * Ne pas utiliser content-visibility:auto sur mobile :
 * au premier scroll, le navigateur peint toute la section d’un coup
 * → gel sur le fond puis apparition brutale des cartes.
 */
@media (max-width: 767.98px) {
    .home-editorial-rails,
    .home-nouv-trend,
    .home-trend-rail {
        content-visibility: visible;
    }
}

/* Accueil mobile : max 4 titres/albums par rail (playlists, nouveautés, tendances, recommandations) */
@media (max-width: 991.98px) {
    .home-editorial-rails .item:nth-child(n + 5),
    .home-nouv-trend .item:nth-child(n + 5),
    .atj-smart-recs .atj-home-rail-grid > .item:nth-child(n + 5),
    .atj-smart-recs .atj-home-rail-grid > .owl-item:nth-child(n + 5) {
        display: none !important;
    }
}

/* Accueil mobile : blocs pleine largeur */
@media (max-width: 991.98px) {
    .atj-home-page,
    .atj-home-page .music-browse {
        width: 100%;
        max-width: 100%;
    }

    .atj-home-page .music-browse .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .atj-home-page .atj-home-section-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .atj-home-page .music-browse .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Retour en haut + chat : positions via variables dans app.blade.php (--atj-chat-audio-lift) */