/* ==========================================================================
   NGOMA STREAM - MOBILE-FIRST RESPONSIVE ARCHITECTURE
   Qualité Streaming Premium (Inspiré des standards mondiaux Netflix)
   Compatible 320px -> 480px+ (Portrait & Paysage), Notches, Safe Areas, PWA
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES RESPONSIVES & RACINE DYNAMIQUE
   -------------------------------------------------------------------------- */
:root {
    /* Safe Areas - Fallbacks stricts pour Safari iOS & Android Gesture Bar */
    --ns-safe-top: env(safe-area-inset-top, 0px);
    --ns-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ns-safe-left: env(safe-area-inset-left, 0px);
    --ns-safe-right: env(safe-area-inset-right, 0px);

    /* Hauteurs Viewport Dynamiques */
    --ns-vh: 100vh;
    --ns-dvh: 100dvh;
    --ns-svh: 100svh;

    /* Tailles Tactiles Minimales Recommandées (Standards W3C & Apple HIG) */
    --ns-min-touch-target: 44px;
    --ns-btn-radius-mobile: 8px;

    /* Couleurs Thème & SynthWave '84 */
    --ns-bg-dark: #0e0b16;
    --ns-bg-surface: #161224;
    --ns-bg-sheet: #141120;
    --ns-primary: #fe4450;
    --ns-secondary: #36f9f6;
    --ns-accent: #ff7edb;
}

/* --------------------------------------------------------------------------
   2. FONDATIONS & PROTECTION ABSOLUE DU SCROLL HORIZONTAL
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background-color: var(--ns-bg-dark);
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 320px;
    overflow-x: hidden;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

/* Images & Médias strictement responsives */
img, video, iframe, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   3. NAVIGATION PRINCIPALE & HEADER (SAFE AREA NOTCH & DYNAMIC ISLAND)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ngoma-navbar,
    .netflix-navbar {
        height: auto !important;
        min-height: calc(52px + var(--ns-safe-top)) !important;
        max-height: none !important;
        padding-top: calc(6px + var(--ns-safe-top)) !important;
        padding-bottom: 6px !important;
        padding-left: max(12px, var(--ns-safe-left)) !important;
        padding-right: max(12px, var(--ns-safe-right)) !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }

    /* Décalage automatique du corps de page pour compenser le header fixe */
    body:not(.watch-netflix-body) {
        padding-top: calc(54px + var(--ns-safe-top)) !important;
    }

    /* Logo NG-STREAM : Redimensionnement fluide, JAMAIS coupé sur 320px */
    .ngoma-logo {
        height: clamp(28px, 7vw, 34px) !important;
        gap: clamp(4px, 1.4vw, 7px) !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    .logo-ns-badge {
        width: clamp(22px, 5.8vw, 28px) !important;
        height: clamp(22px, 5.8vw, 28px) !important;
        min-width: clamp(22px, 5.8vw, 28px) !important;
        min-height: clamp(22px, 5.8vw, 28px) !important;
        border-radius: 6px !important;
    }

    .logo-text-wrap {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }

    .logo-ngoma, .logo-stream {
        font-size: clamp(14px, 4.2vw, 18px) !important;
        letter-spacing: clamp(0.2px, 0.1vw, 0.5px) !important;
    }

    /* Conteneur droit du navbar mobile */
    .ngoma-nav-right {
        gap: clamp(6px, 1.8vw, 12px) !important;
    }

    .ngoma-icon-btn {
        width: clamp(34px, 9vw, 38px) !important;
        height: clamp(34px, 9vw, 38px) !important;
        min-width: clamp(34px, 9vw, 38px) !important;
        font-size: clamp(13px, 3.8vw, 15px) !important;
    }

    .navbar-login-btn {
        padding: 5px 12px !important;
        font-size: clamp(11.5px, 3.2vw, 13px) !important;
        min-height: 32px !important;
    }
}

/* --------------------------------------------------------------------------
   4. BARRE DE NAVIGATION INFÉRIEURE (MOBILE BOTTOM NAV - 7 ONGLETS)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        padding-top: 5px !important;
        padding-bottom: calc(5px + var(--ns-safe-bottom)) !important;
        padding-left: max(2px, var(--ns-safe-left)) !important;
        padding-right: max(2px, var(--ns-safe-right)) !important;
        background: rgba(18, 14, 28, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(255, 126, 219, 0.2) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.8) !important;
    }

    .mobile-bottom-nav-items {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-nav-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 3px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-nav-item i.mobile-nav-icon {
        font-size: clamp(14px, 4vw, 17px) !important;
        margin-bottom: 2px !important;
        line-height: 1 !important;
    }

    .mobile-nav-label {
        font-size: clamp(8px, 2.3vw, 10px) !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        line-height: 1.1 !important;
        letter-spacing: -0.2px !important;
        text-align: center !important;
    }

    .mobile-bottom-avatar {
        width: clamp(16px, 4.4vw, 19px) !important;
        height: clamp(16px, 4.4vw, 19px) !important;
        border-radius: 50% !important;
        margin-bottom: 2px !important;
        object-fit: cover !important;
    }

    body.has-bottom-nav {
        padding-bottom: calc(64px + var(--ns-safe-bottom)) !important;
    }
}

/* Écrans extrêmement petits (<= 340px, ex: 320px iPhone SE) */
@media (max-width: 340px) {
    .mobile-nav-label {
        font-size: 7.5px !important;
        letter-spacing: -0.3px !important;
    }
    .mobile-nav-item i.mobile-nav-icon {
        font-size: 13px !important;
    }
}

/* --------------------------------------------------------------------------
   5. MENU LATÉRAL TIROIR (MOBILE DRAWER)
   -------------------------------------------------------------------------- */
.ngoma-mobile-menu {
    max-height: 100dvh !important;
    height: 100dvh !important;
    padding-top: calc(16px + var(--ns-safe-top)) !important;
    padding-bottom: calc(24px + var(--ns-safe-bottom)) !important;
    padding-left: max(18px, var(--ns-safe-left)) !important;
    padding-right: max(18px, var(--ns-safe-right)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   6. LECTEUR VIDÉO CINÉMA — ARCHITECTURE MOBILE-FIRST (PRIORITÉ ABSOLUE)
   -------------------------------------------------------------------------- */

/* Safe Areas en mode paysage (Landscape) et portrait */
.watch-cinema-container {
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
}

/* Top bar du lecteur */
.netflix-top-bar {
    padding-top: calc(8px + var(--ns-safe-top)) !important;
    padding-bottom: 8px !important;
    padding-left: max(14px, var(--ns-safe-left)) !important;
    padding-right: max(14px, var(--ns-safe-right)) !important;
    height: auto !important;
    min-height: calc(52px + var(--ns-safe-top)) !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 70%, transparent 100%) !important;
}

/* Bottom controls du lecteur */
.netflix-bottom-controls {
    padding-top: 0 !important;
    padding-bottom: calc(10px + var(--ns-safe-bottom)) !important;
    padding-left: max(12px, var(--ns-safe-left)) !important;
    padding-right: max(12px, var(--ns-safe-right)) !important;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.6) 70%, transparent 100%) !important;
}

/* Scrubber / Barre de progression tactile haute précision */
.netflix-scrubber-container {
    height: 38px !important;
    padding: 12px 0 !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    touch-action: none !important; /* Empêche tout scroll pendant le drag */
}

.netflix-scrubber-track {
    height: 5px !important;
    border-radius: 3px !important;
}

.netflix-scrubber-thumb {
    width: 16px !important;
    height: 16px !important;
    right: -8px !important;
    transform: translateY(-50%) scale(1) !important; /* Toujours visible sur mobile */
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.9), 0 0 0 2px #ffffff !important;
}

/* Organisation Mobile des Contrôles (< 600px) */
@media (max-width: 599.98px) {
    .netflix-controls-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }

    .netflix-controls-left {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
    }

    .netflix-controls-right {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    /* Boutons secondaires masqués de la barre principale sur petit mobile */
    .netflix-controls-right #qualityBtn,
    .netflix-controls-right #tracksBtn,
    .netflix-controls-right #speedBtn,
    .netflix-controls-right #aspectRatioBtn,
    .netflix-controls-right #pipBtn,
    .netflix-controls-right #screenLockToggleBtn,
    .netflix-controls-right #watchPartyBtn {
        display: none !important;
    }

    /* Affichage du déclencheur Bottom Sheet 'Plus d'options' */
    #moreOptionsBtn {
        display: inline-flex !important;
    }

    /* Dimension tactile optimale et compacte des boutons du lecteur */
    .netflix-ctrl-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        font-size: 0.95rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }

    .netflix-ctrl-btn:active {
        background: rgba(254, 68, 80, 0.25) !important;
        transform: scale(0.92) !important;
    }

    /* Affichage du temps compact */
    .netflix-time-display {
        font-size: clamp(10px, 2.8vw, 12.5px) !important;
        letter-spacing: -0.2px !important;
        margin-left: 2px !important;
        white-space: nowrap !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-variant-numeric: tabular-nums !important;
    }

    /* Titre dans la barre supérieure du lecteur */
    .netflix-meta-title {
        font-size: clamp(12.5px, 3.6vw, 15px) !important;
        max-width: clamp(140px, 45vw, 240px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .netflix-meta-subtitle {
        display: none !important;
    }
}

/* Sur écrans >= 600px (Desktop, tablettes, paysage étendu) */
@media (min-width: 600px) {
    #moreOptionsBtn {
        display: none !important;
    }
    .netflix-controls-right #qualityBtn,
    .netflix-controls-right #tracksBtn,
    .netflix-controls-right #speedBtn,
    .netflix-controls-right #aspectRatioBtn,
    .netflix-controls-right #pipBtn,
    .netflix-controls-right #screenLockToggleBtn,
    .netflix-controls-right #watchPartyBtn {
        display: inline-flex !important;
    }
}

/* --------------------------------------------------------------------------
   7. BOTTOM SHEET 'PLUS D'OPTIONS' NETFLIX POUR LE LECTEUR MOBILE (ULTRA-COMPACT)
   -------------------------------------------------------------------------- */
.netflix-bottom-sheet {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 70dvh !important;
    background: rgba(18, 14, 28, 0.98) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 126, 219, 0.25) !important;
    border-bottom: none !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 8px 12px calc(14px + var(--ns-safe-bottom)) !important;
    z-index: 100060 !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.95) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    display: none;
    animation: nsSlideUpSheet 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.netflix-bottom-sheet.active {
    display: block !important;
}

@keyframes nsSlideUpSheet {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.bottom-sheet-drag-handle {
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    margin: 0 auto 8px;
}

.bottom-sheet-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bottom-sheet-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 7px;
}

.bottom-sheet-close-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bottom-sheet-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.bottom-sheet-action-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    padding: 7px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    min-height: 40px;
    cursor: pointer;
    transition: all 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}

.bottom-sheet-action-card:active {
    background: rgba(254, 68, 80, 0.2);
    border-color: #fe4450;
    transform: scale(0.98);
}

.bottom-sheet-action-card i {
    font-size: 14px;
    color: #fe4450;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.bottom-sheet-action-card > span:not(.card-meta-pill) {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
}

.bottom-sheet-action-card.active i {
    color: #36f9f6;
}

.bottom-sheet-action-card .card-meta-pill {
    font-size: 9.5px;
    background: rgba(255, 255, 255, 0.12);
    padding: 2px 6px;
    border-radius: 6px;
    color: #cbd5e1;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. PAGES DÉTAILS FILMS & SÉRIES (RESPONSIVE STRUCTURÉ)
   -------------------------------------------------------------------------- */
/* Bouton Retour Cinéma Ultra-Pro */
.details-back-floating-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(22, 17, 34, 0.78) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 126, 219, 0.28) !important;
    color: #FFFFFF !important;
    padding: 6px 18px 6px 8px !important;
    border-radius: 9999px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    margin-top: 2px !important;
    margin-bottom: 10px !important;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 14px rgba(254, 68, 80, 0.12) !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
}

.details-back-floating-btn .back-btn-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(254, 68, 80, 0.35) 0%, rgba(54, 249, 246, 0.2) 100%) !important;
    border: 1px solid rgba(255, 126, 219, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    color: #FFFFFF !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
}

.details-back-floating-btn .back-btn-text {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.3px !important;
    transition: color 0.2s ease !important;
}

.details-back-floating-btn:hover {
    background: rgba(32, 24, 50, 0.94) !important;
    border-color: #ff7edb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 0 22px rgba(255, 126, 219, 0.35) !important;
}

.details-back-floating-btn:hover .back-btn-icon {
    transform: translateX(-3px) scale(1.05) !important;
    background: linear-gradient(135deg, #fe4450 0%, #ff7edb 100%) !important;
    box-shadow: 0 0 12px rgba(254, 68, 80, 0.6) !important;
}

.details-back-floating-btn:hover .back-btn-text {
    color: #36f9f6 !important;
}

.details-back-floating-btn:active {
    transform: scale(0.96) !important;
}

@media (max-width: 768px) {
    .details-hero {
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding: 8px 4% 20px !important;
    }

    .details-hero-inner {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .details-back-floating-btn {
        padding: 5px 14px 5px 6px !important;
        margin-top: 2px !important;
        margin-bottom: 8px !important;
    }

    .details-back-floating-btn .back-btn-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }

    .details-back-floating-btn .back-btn-text {
        font-size: 12.5px !important;
    }

    .details-title {
        font-size: clamp(20px, 6vw, 30px) !important;
        margin-bottom: 8px !important;
        line-height: 1.15 !important;
    }

    .details-badges {
        gap: 6px !important;
        margin-bottom: 10px !important;
        flex-wrap: wrap !important;
    }

    .details-synopsis {
        font-size: clamp(13px, 3.4vw, 15px) !important;
        line-height: 1.5 !important;
        margin-bottom: 14px !important;
        -webkit-line-clamp: 4 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .details-body {
        padding: 24px 4% 60px !important;
    }

    .details-metadata-card {
        padding: 18px !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

@media (max-width: 480px) {
    .details-actions-bar {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .btn-play-cinema,
    .btn-list-cinema,
    .btn-whatsapp-share {
        width: 100% !important;
        min-height: 48px !important;
        justify-content: center !important;
        font-size: 15px !important;
        padding: 12px 20px !important;
        border-radius: 10px !important;
    }

    /* Grille du Casting : 3 colonnes adaptées */
    .cast-grid-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .cast-photo-frame, .cast-photo-circle {
        width: 100% !important;
        max-width: 90px !important;
        height: clamp(95px, 28vw, 125px) !important;
        border-radius: 8px !important;
    }

    .cast-actor-name {
        font-size: 11.5px !important;
    }

    .cast-actor-role {
        font-size: 10px !important;
    }

    /* Onglets de Saisons Séries */
    .season-tabs {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding-bottom: 10px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .season-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .season-tab-btn {
        flex-shrink: 0 !important;
        min-height: 38px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* Cartes d'épisodes */
    .episode-item-card {
        padding: 10px !important;
        border-radius: 10px !important;
        gap: 10px !important;
    }

    .episode-poster-box {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16/9 !important;
        height: auto !important;
        border-radius: 8px !important;
    }

    .episode-name-title {
        font-size: 14px !important;
        line-height: 1.25 !important;
    }

    .episode-desc-text {
        font-size: 11.5px !important;
        -webkit-line-clamp: 2 !important;
    }
}

/* --------------------------------------------------------------------------
   9. CARROUSELS & LIGNES DE CONTENUS (HOME, POPULAIRES, TOP 10)
   -------------------------------------------------------------------------- */
.media-carousel {
    display: flex !important;
    gap: clamp(10px, 2.8vw, 18px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 0 18px 0 !important;
    scrollbar-width: none !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
}

.media-carousel::-webkit-scrollbar {
    display: none !important;
}

/* Carte affiche de film/série en carrousel */
.media-card {
    flex: 0 0 clamp(118px, 32vw, 180px) !important;
    min-width: clamp(118px, 32vw, 180px) !important;
    max-width: 220px !important;
    scroll-snap-align: start !important;
    border-radius: 10px !important;
}

@media (max-width: 360px) {
    .media-card {
        flex: 0 0 110px !important;
        min-width: 110px !important;
    }
}

/* Section Top 10 */
.top10-wrapper {
    display: flex !important;
    gap: clamp(12px, 3.5vw, 24px) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
}

.top10-wrapper::-webkit-scrollbar {
    display: none !important;
}

.top10-big-rank {
    font-size: clamp(52px, 14vw, 100px) !important;
    line-height: 0.85 !important;
    margin-right: clamp(-8px, -2vw, -12px) !important;
    min-width: clamp(32px, 8vw, 55px) !important;
}

.top10-item .media-card {
    flex: 0 0 clamp(105px, 28vw, 160px) !important;
    min-width: clamp(105px, 28vw, 160px) !important;
}

/* Grilles de catalogue (Movies & Series) */
@media (max-width: 991.98px) {
    .catalog-page {
        padding: 8px 3% calc(25px + var(--ns-safe-bottom)) !important;
    }
    .favorites-page-header,
    .netflix-history-page,
    .search-hero-section,
    .netflix-notifications-page {
        padding-top: 10px !important;
    }
}

@media (max-width: 640px) {
    .media-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: clamp(8px, 2.5vw, 14px) !important;
        margin-bottom: 25px !important;
    }

    .catalog-page {
        padding: 8px 3% calc(25px + var(--ns-safe-bottom)) !important;
    }
}

/* --------------------------------------------------------------------------
   10. FOOTER RESPONSIVE ANTI-RECOUVREMENT & ESPACEMENTS SERRÉS
   -------------------------------------------------------------------------- */
.ngoma-footer {
    position: relative !important;
    z-index: 10 !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    padding-left: max(16px, var(--ns-safe-left)) !important;
    padding-right: max(16px, var(--ns-safe-right)) !important;
    padding-bottom: calc(40px + var(--ns-safe-bottom)) !important;
}

.footer-seo-genres-wrap {
    display: none !important;
}

@media (max-width: 991.98px) {
    .home-container {
        padding-bottom: 0px !important;
    }
    .home-container .media-section:last-of-type,
    .home-container .media-section:last-child {
        padding-bottom: 4px !important;
        margin-bottom: 0 !important;
    }
    .ngoma-footer {
        margin-top: 8px !important;
        padding-top: 14px !important;
        padding-bottom: calc(85px + var(--ns-safe-bottom)) !important;
    }
}

/* --------------------------------------------------------------------------
   11. MODE PAYSAGE SUR SMARTPHONE (LANDSCAPE AVEC FAIBLE HAUTEUR < 500PX)
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 520px) {
    .netflix-top-bar {
        padding-top: max(4px, var(--ns-safe-top)) !important;
        padding-bottom: 4px !important;
        min-height: 38px !important;
        height: 38px !important;
    }

    .netflix-bottom-controls {
        padding-bottom: max(4px, var(--ns-safe-bottom)) !important;
        gap: 2px !important;
    }

    .netflix-scrubber-container {
        height: 24px !important;
        padding: 6px 0 !important;
    }

    .netflix-ctrl-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 0.85rem !important;
    }

    .netflix-center-controls-overlay {
        gap: 20px !important;
    }

    .netflix-center-play-btn {
        width: 48px !important;
        height: 48px !important;
        font-size: 18px !important;
    }

    .netflix-center-seek-btn {
        width: 38px !important;
        height: 38px !important;
    }

    .netflix-center-seek-btn i {
        font-size: 14px !important;
    }

    /* En paysage, réactiver les boutons essentiels */
    .netflix-controls-right #qualityBtn,
    .netflix-controls-right #tracksBtn,
    .netflix-controls-right #speedBtn,
    .netflix-controls-right #aspectRatioBtn {
        display: inline-flex !important;
    }

    #moreOptionsBtn {
        display: inline-flex !important;
    }

    /* Bottom sheet 'Plus d'options' ultra-compacte en paysage */
    .netflix-bottom-sheet {
        max-height: 58dvh !important;
        padding: 5px 14px calc(6px + var(--ns-safe-bottom)) !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .bottom-sheet-drag-handle {
        width: 30px !important;
        height: 3px !important;
        margin: 0 auto 4px !important;
    }

    .bottom-sheet-header-row {
        padding-bottom: 3px !important;
        margin-bottom: 5px !important;
    }

    .bottom-sheet-title {
        font-size: 12px !important;
    }

    .bottom-sheet-close-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 13px !important;
    }

    .bottom-sheet-options-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 5px !important;
    }

    .bottom-sheet-action-card {
        min-height: 34px !important;
        padding: 4px 7px !important;
        gap: 5px !important;
        border-radius: 7px !important;
    }

    .bottom-sheet-action-card i {
        font-size: 13px !important;
        width: 15px !important;
    }

    .bottom-sheet-action-card > span:not(.card-meta-pill) {
        font-size: 11px !important;
    }

    .bottom-sheet-action-card .card-meta-pill {
        font-size: 8.5px !important;
        padding: 1px 4px !important;
    }

    /* Popovers / Bottom sheets de lecture en mode paysage */
    .netflix-popover {
        max-height: 60dvh !important;
        padding: 6px 14px calc(6px + var(--ns-safe-bottom)) !important;
        border-radius: 12px 12px 0 0 !important;
    }

    .netflix-popover-mobile-drag {
        padding-bottom: 3px !important;
    }

    .drag-pill {
        width: 30px !important;
        height: 3px !important;
    }

    .netflix-popover-title-row {
        padding-bottom: 3px !important;
        margin-bottom: 5px !important;
    }

    .netflix-popover-header {
        font-size: 12px !important;
    }

    .netflix-popover-close-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 13px !important;
    }

    .netflix-popover-item {
        min-height: 30px !important;
        padding: 4px 8px !important;
        font-size: 11.5px !important;
        border-radius: 6px !important;
        margin-bottom: 2px !important;
    }

    .netflix-popover-item i {
        font-size: 11px !important;
    }

    .netflix-popover-subhead {
        font-size: 10px !important;
        margin-top: 1px !important;
        margin-bottom: 3px !important;
    }

    /* Audio et Sous-titres côte à côte en deux colonnes en paysage */
    .netflix-tracks-cols {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        flex-direction: row !important;
    }

    /* Vitesse en grille 3 colonnes compacte */
    #speedDropdown .netflix-popover-list {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
    }

    /* Niveaux de qualité en 2 colonnes */
    #qualityLevelsList {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
    }
}