/* Style global pour masquer tout bouton fullscreen supplémentaire - Optimisé */
#fullscreen-button, button#fullscreen-button, div#fullscreen-button,
button[id="fullscreen-button"], div[id="fullscreen-button"],
*[id^="fullscreen-button"], [aria-label="Plein écran"]:not(#custom-fullscreen-btn) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Désactiver le comportement de SwipeRefresh et de pull-to-refresh */
html, body {
    overscroll-behavior: none !important;
    touch-action: pan-y pinch-zoom !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    height: 100%;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: #000;
    /* Éliminer toute marge/padding potentiel sur mobile */
    -webkit-margin-before: 0 !important;
    -webkit-margin-after: 0 !important;
    -webkit-padding-start: 0 !important;
    -webkit-padding-end: 0 !important;
}

.video-container,
.video-js,
video,
#my-video {
    touch-action: pan-y pinch-zoom !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
}

/* Désactiver les scrollbars et barres de contrôle par défaut - Consolidé */
*::-webkit-scrollbar, video::-webkit-media-controls-panel {
    display: none !important;
}

/* Style principal du conteneur - Plein écran optimisé */
.video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    z-index: 1;
    /* Forcer l'affichage tout en haut sur mobile */
    inset: 0;
    -webkit-margin-collapse: discard !important;
}

/* Styles spécifiques pour Android */
.android-device .video-container {
    padding-bottom: 56.25% !important; /* Maintien du ratio 16:9 */
    max-height: none !important;
    height: 0 !important;
}

.android-device video,
.android-device #my-video {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    object-fit: contain !important;
    z-index: 1 !important;
    background: #000 !important;
}

/* Amélioration des contrôles natifs pour Android */
.android-device video::-webkit-media-controls {
    display: none !important;
}

/* Assurez-vous que le fond reste noir sur Android */
.android-device body, 
.android-device html,
.android-device .video-container {
    background-color: #000 !important;
}

/* Style pour l'iframe et le lecteur vidéo - Plein écran */
#my-video, 
.video-js,
.vjs-tech,
iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important; /* Couvre tout l'écran en gardant les proportions */
    background-color: #000 !important;
    transform: none !important;
    transition: none !important;
    border: none !important;
    outline: none !important;
    overflow: hidden !important;
    z-index: 1 !important; /* En arrière-plan, sous le wrapper d'overlays */
}

/* Correction pour les miniatures sur mobile */
.vjs-poster {
    display: none !important;
    z-index: -1 !important; 
    opacity: 0 !important;
}

/* Cacher les miniatures pendant la lecture vidéo */
.vjs-has-started .vjs-poster,
.vjs-playing .vjs-poster,
.video-js.vjs-playing .vjs-poster,
.video-js.vjs-has-started .vjs-poster {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -999 !important;
}

/* Masquer correctement le bouton de lecture pendant la lecture - Consolidé */
.video-js.vjs-playing .vjs-big-play-button, .video-js.vjs-has-started .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -999 !important;
    pointer-events: none !important;
}

/* Assurer que le côté gauche est plus large */
@media (min-width: 768px) {
    .video-js,
    .vjs-tech,
    video,
    iframe {
        aspect-ratio: 16/9 !important;
        transform: none !important;
        transition: none !important;
        outline: none !important;
        min-width: 70% !important; /* Assurer que le côté gauche est plus large */
    }
    
    /* Faire en sorte que le lecteur soit plus grand que la boîte de boutons */
    .vjs-control-bar {
        max-height: 40px !important;
    }
    
    .video-js .vjs-big-play-button {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 3em !important;
    }
    
    /* Empêcher les transformations au survol */
    .video-js:hover,
    .vjs-tech:hover,
    video:hover,
    iframe:hover {
        transform: none !important;
        transition: none !important;
        outline: none !important;
    }
}

/* Style amélioré pour les contrôles vidéo */
video::-webkit-media-controls-panel {
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}

video::-webkit-media-controls-play-button {
    background-color: rgba(255, 220, 0, 0.7);
    border-radius: 50%;
    transform: scale(1.2);
}

/* Personnalisation du bouton de plein écran */
video::-webkit-media-controls-fullscreen-button {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* Style pour le message d'erreur */
.vjs-no-js {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 20px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    border-radius: 8px;
}

.vjs-no-js a {
    color: #ffd700;
    text-decoration: none;
    font-weight: bold;
}

/* Wrapper pour les overlays vidéo - Par-dessus la vidéo */
.video-overlay-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none; /* Permettre aux clics de passer à travers */
    z-index: 1002 !important; /* Au-dessus de la vidéo et des autres éléments */
    display: block !important;
}

/* Les éléments enfants peuvent recevoir les clics et sont positionnés dans le wrapper */
.video-overlay-wrapper > * {
    pointer-events: auto;
    position: absolute !important;
}

/* S'assurer que le wrapper est visible en plein écran aussi */
:fullscreen .video-overlay-wrapper,
:-webkit-full-screen .video-overlay-wrapper,
:-moz-full-screen .video-overlay-wrapper,
:-ms-fullscreen .video-overlay-wrapper {
    z-index: 1002 !important;
    position: absolute !important;
}

/* Style pour overlay d'information pendant le chargement */
.video-info-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 1000; /* Assurer qu'il est au-dessus de la vidéo */
    opacity: 1;
    transition: opacity 0.5s;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pour les petits écrans, réduire la taille du texte */
@media (max-width: 480px) {
    .video-info-overlay {
        position: absolute !important;
        top: 5px !important;
        left: 5px !important;
        max-width: 90% !important;
        font-size: 12px !important;
        padding: 3px 8px !important;
        z-index: 1001 !important;
        background-color: rgba(0, 0, 0, 0.8) !important;
        color: white !important;
        border-radius: 6px !important;
        backdrop-filter: blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Ajuster le compteur de vues pour les très petits écrans */
    .viewer-count {
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        font-size: 12px !important;
        padding: 4px 8px !important;
        padding-top: 0 !important; /* Pas de padding-top */
        z-index: 1001 !important;
        background-color: rgba(0, 0, 0, 0.8) !important;
        color: white !important;
        border-radius: 6px !important;
        backdrop-filter: blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

/* Fonction de fondu pour l'overlay */
.fade-out {
    opacity: 0;
}

/* Style pour la boîte de boutons - plus petite que le lecteur */
.vjs-control-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    max-height: 40px !important;
}

/* S'assurer que l'iframe respecte le ratio 16:9 */
iframe[allowfullscreen],
iframe[src*="player"],
iframe.video-js {
    aspect-ratio: 16/9 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Classes spécifiques pour masquer miniatures et boutons - Consolidé */
.vjs-poster-hidden .vjs-poster, .video-js.vjs-poster-hidden .vjs-poster,
.vjs-button-hidden .vjs-big-play-button, .video-js.vjs-button-hidden .vjs-big-play-button {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -999 !important;
    pointer-events: none !important;
}

/* S'assurer que le bouton de lecture reste masqué sur mobile */
.video-js.vjs-mobile .vjs-big-play-button {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Règles spécifiques pour éliminer l'espace en haut sur mobile */
@media screen and (max-width: 896px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        -webkit-margin-before: 0 !important;
        -webkit-margin-after: 0 !important;
        -webkit-padding-start: 0 !important;
        -webkit-padding-end: 0 !important;
    }
    
    .video-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        /* Compenser le safe-area sur iOS */
        margin-top: calc(-1 * env(safe-area-inset-top, 0px)) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Vidéo centrée sur mobile */
    #my-video, 
    .video-js,
    .vjs-tech,
    video {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* S'assurer que le wrapper reste par-dessus sur mobile */
    .video-overlay-wrapper {
        z-index: 1002 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Style pour mobile en orientation portrait */
@media (max-width: 767px) and (orientation: portrait) {
    body, html {
        overflow: auto; /* Permettre le défilement sur mobile */
        height: auto;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Fixer le lecteur vidéo en haut - Centrage vertical correct */
    .video-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 40vh !important; /* Hauteur fixe au lieu de padding-bottom pour éviter les problèmes */
        z-index: 100 !important; /* S'assurer qu'il est au-dessus du contenu */
        margin: 0 !important;
        padding: 0 !important;
        /* Compenser le safe-area sur iOS pour que la vidéo soit vraiment tout en haut */
        margin-top: calc(-1 * env(safe-area-inset-top, 0px)) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Ajuster l'espace pour le contenu défilant sous le lecteur */
    #content-scrollable {
        margin-top: 40vh; /* Correspondre à la hauteur du lecteur */
        overflow-y: auto;
        height: 60vh;
        width: 100%;
        position: relative;
        z-index: 10;
        background-color: #121212;
        padding-top: 10px;
    }
    
    /* Assurer que le lecteur vidéo garde un bon ratio et une bonne taille - Centrage vertical */
    #my-video, 
    .video-js,
    .vjs-tech,
    video {
        position: relative !important; /* Relatif au conteneur flex */
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Ajuster le compteur de vues pour mobile en portrait - en superposition */
    .viewer-count {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        font-size: 14px !important;
        padding: 6px 10px !important;
        padding-top: 0 !important; /* Pas de padding-top */
        z-index: 1001 !important; /* S'assurer qu'il est au-dessus de tout */
        background-color: rgba(0, 0, 0, 0.8) !important;
        color: white !important;
        border-radius: 8px !important;
        backdrop-filter: blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Ajuster l'overlay d'information de chaîne pour mobile en portrait - en superposition */
    .video-info-overlay {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        background-color: rgba(0, 0, 0, 0.8) !important;
        color: white !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        z-index: 1001 !important; /* S'assurer qu'il est au-dessus de tout */
        max-width: 60% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        backdrop-filter: blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

/* Style pour l'affichage du nombre de viewers - Au-dessus de la vidéo */
.viewer-count {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    padding-top: 0 !important; /* Assurer qu'il n'y a pas de padding-top */
    border-radius: 8px;
    font-size: 16px;
    z-index: 1000; /* Par-dessus la vidéo */
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Styles pour le fullscreen */
:fullscreen .video-container,
:-webkit-full-screen .video-container,
:-moz-full-screen .video-container,
:-ms-fullscreen .video-container {
    width: 100vw !important;
    height: 100vh !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

:fullscreen #my-video,
:-webkit-full-screen #my-video,
:-moz-full-screen #my-video,
:-ms-fullscreen #my-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

:fullscreen .viewer-count,
:-webkit-full-screen .viewer-count,
:-moz-full-screen .viewer-count,
:-ms-fullscreen .viewer-count {
    font-size: 18px;
    padding: 8px 15px;
    padding-top: 0 !important; /* Pas de padding-top en plein écran */
    top: 20px;
    right: 20px;
}

/* Media queries spécifiques pour le compteur de vues mobile et éliminer l'espace en haut */
@media (max-width: 896px) and (orientation: landscape) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .video-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        /* Compenser le safe-area sur iOS en mode paysage */
        margin-top: calc(-1 * env(safe-area-inset-top, 0px)) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Vidéo en mode paysage mobile - centrage perfect */
    #my-video, 
    .video-js,
    .vjs-tech,
    video {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .viewer-count {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        font-size: 14px !important;
        padding: 6px 10px !important;
        padding-top: 0 !important; /* Pas de padding-top */
        z-index: 1001 !important;
        background-color: rgba(0, 0, 0, 0.8) !important;
        color: white !important;
        border-radius: 8px !important;
        backdrop-filter: blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Overlay d'information de chaîne pour mobile en paysage - en superposition */
    .video-info-overlay {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        background-color: rgba(0, 0, 0, 0.8) !important;
        color: white !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        z-index: 1001 !important;
        max-width: 60% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        backdrop-filter: blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

/* Style pour le bouton fullscreen personnalisé */
.custom-fullscreen-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px;
    cursor: pointer;
    z-index: 1001;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-fullscreen-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.custom-fullscreen-button svg {
    width: 20px;
    height: 20px;
    fill: white;
}

/* Désactiver le bouton fullscreen natif par défaut */
video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

/* Améliorations spécifiques pour Chrome et WebView Android */
.android-chrome video,
.android-webview video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #000 !important;
}

/* Corrections spéciales pour Android WebView - Résout les problèmes de lecture */
.android-webview .video-container {
    background-color: #000 !important;
    overflow: visible !important;
}

.android-webview video,
.android-webview #my-video {
    background-color: #000 !important;
    position: relative !important;
    z-index: 1 !important;
    /* Forcer l'affichage du poster pour éviter l'erreur Android WebView - géré via JavaScript */
}

/* Corrections pour les contrôles natifs Android */
.android-device video::-webkit-media-controls,
.android-chrome video::-webkit-media-controls,
.android-webview video::-webkit-media-controls {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Masquer les contrôles personnalisés sur Android quand on utilise les contrôles natifs */
.using-native-controls .custom-fullscreen-button {
    display: none !important;
}

/* Spécifique Android WebView - Améliorer la compatibilité */
.android-webview video[poster=""] {
    /* Poster géré via JavaScript pour éviter les erreurs CSS */
    background-color: #333 !important;
}

/* Correction pour le problème de ratio sur certaines versions d'Android */
@media screen and (max-width: 768px) {
    .android-device .video-container {
        height: auto !important;
        min-height: 50vh !important;
    }
    
    .android-chrome video,
    .android-webview video {
        min-height: 50vh !important;
    }
    
    /* Spécial WebView - Assurer que l'arrière-plan reste noir */
    .android-webview body,
    .android-webview html {
        background-color: #000 !important;
    }
}

/* Positions alternatives pour le bouton de fermeture sur différents appareils */
@media (max-width: 768px) {
    #ad-layer .close-button {
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}

/* Orientation paysage sur mobile */
@media (max-width: 896px) and (orientation: landscape) {
    #ad-layer .close-button {
        top: 15px;
        right: 15px;
        width: 36px;
        height: 36px;
    }
    
    :fullscreen #ad-layer .close-button,
    :-webkit-full-screen #ad-layer .close-button,
    :-moz-full-screen #ad-layer .close-button,
    :-ms-fullscreen #ad-layer .close-button {
        top: 20px !important;
        right: 20px !important;
        width: 46px !important;
        height: 46px !important;
    }
}

/* Pour les appareils plus larges */
@media (min-width: 1200px) {
    #ad-layer .close-button {
        top: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
    }
    
    :fullscreen #ad-layer .close-button,
    :-webkit-full-screen #ad-layer .close-button,
    :-moz-full-screen #ad-layer .close-button,
    :-ms-fullscreen #ad-layer .close-button {
        top: 40px !important;
        right: 40px !important;
        width: 60px !important;
        height: 60px !important;
    }
}

/* ================================================== */
/* Styles pour les annonces (ad-layer) */
/* ================================================== */

#ad-layer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    z-index: 99999999;
}

#ad-layer .close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    background-color: #e74c3c;
    cursor: pointer;
    border-radius: 50%;
    border: none;
    z-index: 99999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
}

#ad-layer .close-button:hover {
    background-color: #ff6600;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#ad-layer .close-button:active {
    transform: scale(0.95);
}

/* Styles pour le bouton de fermeture en plein écran */
:fullscreen #ad-layer .close-button,
:-webkit-full-screen #ad-layer .close-button,
:-moz-full-screen #ad-layer .close-button,
:-ms-fullscreen #ad-layer .close-button {
    top: 40px !important;
    right: 40px !important;
    width: 56px !important;
    height: 56px !important;
}

#ad-layer #ad-content {
    position: absolute;
    top: 0%;
    left: 0;
    width: 90%;
    height: 90%;
    margin: 5%;
    z-index: 9;
}

/* Styles pour le mode plein écran des annonces */
:fullscreen #ad-layer,
:-webkit-full-screen #ad-layer,
:-moz-full-screen #ad-layer,
:-ms-fullscreen #ad-layer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999999 !important;
}