.channel_title{
	font-family: 'Protest Strike', sans-serif;
	padding: 10px;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	background: #1E1E28;
	border-radius: 4px;
	margin-top: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
	 		 /* CSS to make the iframe fill its container */
		    .iframe-container {
		      position: relative;
		      overflow: hidden;
		      width: 100%;
		      height: 0;
		      padding-bottom: 56.25%; /* 16:9 Aspect Ratio (9 / 16 = 0.5625 or 56.25%) */
		      background: #000;
		      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
		      z-index: 100;
		    }
		    .iframe-container iframe {
		      position: absolute;
		      top: 0;
		      left: 0;
		      width: 100%;
		      height: 100%;
		      border: 1px solid rgba(255, 255, 255, 0.1);
		    }
		    
		    /* Force responsive iframe ratio on all devices */
		    @media (max-width: 768px) {
		        .iframe-container {
		            width: 100% !important;
		            height: 0 !important;
		            padding-bottom: 56.25% !important; /* Maintenir le ratio 16:9 sur mobile */
		            position: relative !important;
		            overflow: hidden !important;
		        }
		        
		        .iframe-container iframe {
		            position: absolute !important;
		            top: 0 !important;
		            left: 0 !important;
		            width: 100% !important;
		            height: 100% !important;
		            border: none !important;
		        }
		    }

		    
		body, html{
			margin: 0 !important;
			padding: 0 !important;
			background-color: #0F0F17;
		}
		body{
			margin-bottom: 100px;
			color: #f0f0f0;
		}
		iframe{
			width: 100 !important;
			border: none !important;
			outline: none !important;
			overflow: hidden;
		}

		/* CSS */


		#button_box{
			padding: 20px;
			text-align: center;
			max-width: 100%;
			width: 100%;
			box-sizing: border-box; /* Ajout pour s'assurer que le padding est inclus dans la largeur */
			background-color: #171722;
			border-radius: 0 0 8px 8px;
			overflow: hidden; /* Évite tout débordement */
		}
/* Style de base des boutons */
	.btn:hover {
	    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3);
	    transform: translateY(-2px);
	    background-color: #4169E1;
	}

	/* Effet au clic */
	.btn:active{
	    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
	    transform: translateY(0px);
	    /* Assombrir le bouton au clic */
	    background-color: #3151AD;
	}


	.btn{
		cursor: pointer !important;
		width: 300px;
		max-width: 100%;
		margin: 20px 40px;
		background: #2D4CC0;
		color: #fff !important;
		font-family: 'Hind', sans-serif;
		font-size: 16px;
		vertical-align: center;
		text-decoration: none !important;
		display: flex;
		align-items: center;
		border-radius: 5px !important;
		overflow: hidden;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
		transition: all 0.2s ease;
	}
	.channel_name {
	  margin-left: 10px;
	  font-weight: bold;
	}
	@media screen and (max-width: 750px){
		.btn{
			width: 95%;
			margin: 2.5%;
		}
		.btn > *{
			vertical-align: center !important;
		}
		.btn_wrapper{
			display: block !important;
		}
	}
/* Add this media query to adjust button box positioning in portrait mode */
@media screen and (orientation: portrait) {
  #button_box {
    position: relative;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: scroll !important;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0px;
    text-align: center;
    margin-top: 30px;
    background-color: #171722;
    z-index: 1010; /* S'assurer qu'il est au-dessus d'autres éléments */
    pointer-events: auto; /* Permettre les interactions */
    touch-action: auto; /* Permettre toutes les actions tactiles */
  }
  .iframe-container iframe{
  	 position: fixed;

		      background: #000; width: 100%; height: calc(100vw * 9 / 16); z-index: 100;
  }
}

/* Styles pour la version desktop */
@media screen and (min-width: 768px) {
	body {
		display: block;
		margin-bottom: 0;
		overflow-x: hidden;
	}
	
	.content-wrapper {
		display: flex;
		width: 100%;
		max-width: 1400px;
		margin: 0 auto;
		position: relative;
	}
	
	.player-container {
		position: sticky;
		top: 20px;
		width: 65%;
		padding-right: 20px;
		height: calc(100vh - 40px);
		display: flex;
		flex-direction: column;
	}
	
	.iframe-container {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 56.25%; /* Ratio 16:9 */
		margin-bottom: 10px;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
	}
	
	#channel_title {
		width: 100%;
		margin-top: 10px;
		margin-bottom: 20px;
	}
	
	.buttons-container {
		width: 35%;
		max-height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
		padding-bottom: 50px;
		box-sizing: border-box;
	}
	
	#button_box {
		width: 100%;
		box-sizing: border-box;
		padding: 20px;
		background-color: #171722;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
		overflow: hidden;
	}
	
	.btn {
		width: 90%;
		margin: 10px auto;
		text-align: left;
	}
	
	#download-section {
		margin-top: 20px !important;
		margin-bottom: 20px !important;
		border-radius: 8px !important;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
	}
	
}

/* Pour les écrans très larges, augmenter encore plus la taille du lecteur */
@media screen and (min-width: 1200px) {
    .player-container {
        width: 70%; /* Encore plus large sur les grands écrans */
    }
    
    .buttons-container {
        width: 30%; /* Plus petit sur les grands écrans */
    }
}

/* Pour les écrans ultra-larges */
@media screen and (min-width: 1600px) {
    .content-wrapper {
        max-width: 1600px;
    }
    
    .player-container {
        width: 75%; /* Maximum de largeur pour le lecteur */
    }
    
    .buttons-container {
        width: 25%; /* Minimum pour la boîte de boutons */
    }
}

/* Styles pour le mode plein écran */
.iframe-container iframe:fullscreen, #tv_player:fullscreen, iframe:fullscreen,
.iframe-container iframe:-webkit-full-screen, #tv_player:-webkit-full-screen, iframe:-webkit-full-screen,
.iframe-container iframe:-moz-full-screen, #tv_player:-moz-full-screen, iframe:-moz-full-screen,
.iframe-container iframe:-ms-fullscreen, #tv_player:-ms-fullscreen, iframe:-ms-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 9999 !important;
}

/* Conserver le ratio 16:9 */
.iframe-container {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 56.25% !important; /* Ratio 16:9 */
    height: 0 !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    background-color: #000 !important;
}

.iframe-container iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border: none !important;
}

/* Assurer que le CSS existant ne surcharge pas nos règles fixes */
#tv_player {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16/9 !important;
    transform: none !important;
}

/* Règles strictes pour le div video-container */
.video-container {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* Ratio 16:9 strict */
    overflow: hidden !important;
    background-color: #000 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.video-container * {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border: none !important;
    object-fit: contain !important;
}

.video-container:hover,
.video-container:focus,
.video-container:active {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
    outline: none !important;
}

/* S'assurer que les animations sont désactivées pour tous les enfants */
.video-container *,
.video-container *:hover,
.video-container *:focus,
.video-container *:active {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    outline: none !important;
}

/* Animation pour le focus sur la vidéo - COMPLÈTEMENT DÉSACTIVÉE */
.iframe-container:hover,
.iframecontainerplayer:hover,
.iframe-container:focus,
.iframecontainerplayer:focus {
	transform: none !important;
	transition: none !important;
	box-shadow: none !important;
}

/* Styles additionnels pour désactiver toutes les animations sur les conteneurs iframe */
.iframecontainerplayer,
.iframecontainerplayer *,
.iframecontainerplayer:hover,
.iframecontainerplayer:focus,
.iframecontainerplayer *:hover,
.iframecontainerplayer *:focus {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7) !important;
    border: none !important;
    outline: none !important;
}

/* S'assurer que le ratio 16:9 est maintenu pour .iframecontainerplayer */
.iframecontainerplayer {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* Ratio 16:9 strict */
    overflow: hidden !important;
    background-color: #000 !important;
    margin: 0 !important;
}

/* Personnalisation de la barre de défilement pour la boîte de boutons */
.buttons-container::-webkit-scrollbar {
    width: 8px;
}

.buttons-container::-webkit-scrollbar-track {
    background: #151520;
    border-radius: 5px;
}

.buttons-container::-webkit-scrollbar-thumb {
    background: #2D4CC0;
    border-radius: 5px;
    border: 2px solid #151520;
}

.buttons-container::-webkit-scrollbar-thumb:hover {
    background: #4169E1;
}

/* Désactiver SwipeRefresh lors du glissement arrière dans la TextView */
.iframe-container,
.video-container,
#tv_player,
.video-js,
iframe {
    touch-action: pan-y pinch-zoom !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
}

video::-webkit-media-controls,
.video-js *::-webkit-scrollbar,
iframe *::-webkit-scrollbar {
    display: none !important;
}

body {
    overscroll-behavior: none !important;
}

/* Prévenir le comportement de pull-to-refresh sur les conteneurs parents */
.player-container,
.content-wrapper,
.buttons-container {
    overscroll-behavior: none !important;
}

/* S'assurer que le swipe back n'interfère pas avec le SwipeRefresh */
@media screen and (orientation: portrait) {
    html, body {
        overscroll-behavior-y: none !important;
    }
}

/* Styles pour empêcher le comportement de overscroll et améliorer le défilement tactile */
#button_box, .buttons-container {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    scroll-behavior: smooth;
    touch-action: pan-y !important;
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 5px 5px -5px rgba(0,0,0,0.2), inset 0 -5px 5px -5px rgba(0,0,0,0.2);
    user-select: none;
    transform: translateZ(0);
    scrollbar-width: thin;
}

/* Styles pour le corps de la page */
body, html {
    overscroll-behavior-y: none; /* Empêche le comportement de overscroll */
    touch-action: manipulation; /* Optimisation pour le toucher */
}

@media screen and (orientation: portrait) {
  #button_box {
    position: relative;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: scroll !important;
    padding: 0;
    text-align: center;
    margin-top: 30px;
    background-color: #171722;
    z-index: 1010;
    pointer-events: auto;
    touch-action: auto;
  }
}

/* Amélioration des boutons pour une meilleure expérience tactile */
.btn {
    cursor: pointer !important;
    touch-action: manipulation; /* Optimisation pour le toucher */
    -webkit-tap-highlight-color: transparent; /* Supprime le flash lors du tap sur mobile */
    -webkit-touch-callout: none; /* Désactive le menu contextuel sur iOS */
    -webkit-user-select: none; /* Empêche la sélection de texte sur webkit */
    user-select: none; /* Empêche la sélection de texte */
    transition: transform 0.2s, background-color 0.2s !important; /* Transition légère */
}

/* Optimisations pour les performances de défilement */
.buttons-container {
    will-change: scroll-position; /* Indique au navigateur d'optimiser pour le défilement */
    perspective: 1000; /* Aide à la performance des transformations */
    backface-visibility: hidden; /* Optimisation pour les performances de rendu */
    -webkit-overflow-scrolling: touch !important; /* Renforcer le défilement fluide sur iOS */
    overflow-y: auto !important; /* Garantir que le défilement vertical est activé */
    overflow-x: hidden !important; /* Empêcher le défilement horizontal */
    pointer-events: auto !important; /* S'assurer que les événements sont capturés */
}

/* Ajout d'un style spécifique pour améliorer la visibilité lors du défilement */
.buttons-container:focus, 
.buttons-container:active,
#button_box:focus,
#button_box:active {
    outline: none !important;
    overflow-y: auto !important;
    touch-action: auto !important;
}

/* Style spécifique pour les appareils Android WebView */
.android-webview {
    -webkit-overflow-scrolling: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: none !important;
    touch-action: pan-y !important;
    -ms-touch-action: pan-y !important;
    -webkit-user-drag: none !important;
}

/* Classes spécifiques pour Android et iOS pour gérer des comportements différents */
.android-webview #button_box, .android-device #button_box {
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
}

.ios-device #button_box {
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
}

@media (max-width: 767px) and (orientation: portrait) {
    /* Correction spécifique pour le défilement vers le haut sur mobile */
    #button_box, .buttons-container {
        overscroll-behavior: contain !important; 
        touch-action: pan-y !important;
        max-height: calc(100vh - 56.25vw - 40px) !important; /* Limiter la hauteur pour éviter les problèmes de défilement */
        position: relative !important;
        min-height: 150px; /* Hauteur minimale pour assurer le défilement */
        /* Améliorer le comportement de défilement vers le haut */
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Animations subtiles pour indiquer la scrollabilité */
    #button_box::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 20px;
        background: linear-gradient(to top, rgba(26, 26, 26, 1), rgba(26, 26, 26, 0));
        pointer-events: none;
        z-index: 100;
    }
    
    /* Indicateur de défilement pour les utilisateurs */
    .buttons-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: #a50;
        opacity: 0.8;
        pointer-events: none;
        z-index: 100;
    }
}

/* Force le style même avec d'autres sélecteurs qui pourraient avoir priorité */
#button_box[id], .buttons-container {
    overflow-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
}

.android-device #button_box, .android-device .buttons-container {
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
    transform: translateZ(0); /* Activer l'accélération matérielle */
    backface-visibility: hidden; /* Optimiser le rendu */
    will-change: scroll-position; /* Optimiser pour le défilement */
}

/* Style pour forcer le comportement de défilement correct après le chargement de la vidéo */
.video-loaded #button_box,
.video-loaded .buttons-container,
.iframe-loaded #button_box,
.iframe-loaded .buttons-container {
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
}

/* Forcer le bon comportement de défilement pour les appareils Android */
@media (max-width: 767px) and (orientation: portrait) {
    .android-device.iframe-loaded #button_box,
    .android-device.video-loaded #button_box {
        position: relative !important;
        height: auto !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
        max-height: calc(100vh - 56.25vw - 50px) !important;
        z-index: 1010 !important;
    }
}

/* ==================================================
   CSS déplacé depuis index.php - Section 1
   ================================================== */

/* CSS for preloader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #121212;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 3px solid #a50;
    border-top-color: #fd0;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* CSS to hide preloader when content is loaded */
.content-loaded #preloader {
    opacity: 0;
    pointer-events: none;
}

/* Amélioration de la barre de navigation */
nav {
    background: #222;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
}
nav ul {
    display: flex;
    padding: 0;
    margin: 0;
}
nav li {
    list-style-type: none;
    display: inline-block;
}
nav a {
    text-decoration: none;
    padding: 15px;
    display: block;
    color: #fff;
    font-weight: bold;
    transition: background-color 0.3s;
}
nav a:hover {
    background-color: #333;
}

/* ==================================================
   CSS déplacé depuis index.php - Section 2
   ================================================== */

/* Désactivation des animations et transitions pour le lecteur vidéo - Consolidé */
#tv_player, .iframe-container, .iframe-container iframe, #tv_player iframe, 
.video-container, .video-js, iframe, .iframecontainerplayer, .iframecontainerplayer * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    aspect-ratio: 16/9 !important;
    border: none !important;
}

/* Empêcher les effets au survol - Consolidé */
#tv_player:hover, .iframe-container:hover, .iframe-container iframe:hover, 
#tv_player iframe:hover, .video-container:hover, .video-js:hover, iframe:hover,
.iframecontainerplayer:hover, .iframecontainerplayer *:hover {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
    outline: none !important;
}

/* Conserver le ratio 16:9 */
.iframe-container, .iframecontainerplayer {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Adaptation pour mobiles en orientation portrait */
@media (max-width: 767px) and (orientation: portrait) {
    body, html {
        overflow: auto;
        height: 100%;
        position: relative;
        margin: 0;
        padding: 0;
    }
    
    /* Assurer que l'iframe maintient son ratio 16:9 en portrait sur mobile */
    .iframe-container {
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 56.25% !important; /* Ratio 16:9 strict pour mobile portrait */
        position: relative !important;
        overflow: hidden !important;
        background: #000 !important;
    }
    
    .iframe-container iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: none !important;
        object-fit: contain !important;
    }
    
    /* Layout pour mobile portrait */
    .content-wrapper {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    
    /* Lecteur fixe en haut */
    .player-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000; /* Garder au-dessus de la liste des chaînes */
        background-color: #000;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Ombre pour séparer visuellement */
    }
    
    /* Conteneur d'iframe fixe */
    .iframe-container {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100% !important;
        padding-bottom: 56.25% !important;
        height: 0 !important;
        max-height: 40vh;
        z-index: 1000; /* Même z-index que le player-container */
        background: #000;
    }
    
    /* Titre de chaîne sous le lecteur */
    #channel_title {
        position: fixed;
        top: calc(56.25vw); /* Juste après le lecteur vidéo */
        width: 100%;
        background-color: #111;
        margin: 0;
        padding: 10px;
        z-index: 999;
        font-size: 14px;
        text-align: center;
    }
    
    /* Conteneur des boutons décalé sous le lecteur fixe */
    .buttons-container {
        margin-top: calc(56.25vw + 40px); /* Hauteur du lecteur + titre */
        position: relative;
        z-index: 50; /* Z-index PLUS BAS que le lecteur pour être en dessous */
        height: auto;
        overflow-y: auto !important; /* Forcer le défilement */
        padding-bottom: 60px; /* Espace pour la navigation mobile */
        pointer-events: auto !important; /* S'assurer que les événements sont capturés */
        background-color: #0F0F17; /* Assurer un arrière-plan visible */
        width: 100%;
    }
    
    /* Style de la boîte des boutons */
    #button_box {
        background-color: #121212;
        padding: 10px;
        overflow-y: auto !important; /* Forcer le défilement */
        width: 100%;
        pointer-events: auto !important; /* S'assurer que les événements sont capturés */
        touch-action: auto !important; /* Permettre toutes les actions tactiles */
        min-height: calc(100vh - 56.25vw - 80px); /* Assurer une hauteur minimale pour le défilement */
        border-top: 2px solid #333; /* Ligne de séparation visuelle */
    }
    
    /* Assurer que la liste des chaînes ne passe pas au-dessus du lecteur */
    .buttons-container .btn {
        position: relative;
        z-index: 1; /* Z-index bas pour rester sous le lecteur */
    }
    
    /* Ajuster la hauteur de l'iframe pour qu'elle soit toujours visible */
    #tv_player {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 56.25vw !important; /* Hauteur basée sur le ratio 16:9 */
    }
    
    /* Flèches de navigation plus visible sur mobile */
    .scroll-arrows {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1001;
        display: flex;
        flex-direction: column;
    }
    
    .scroll-arrow {
        width: 40px;
        height: 40px;
        margin: 5px;
        background-color: rgba(170, 85, 0, 0.8);
        color: white;
        font-size: 18px;
        border: none;
        border-radius: 50%;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    }
    
    /* Bouton de retour en haut plus visible */
    .scroll-top {
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 40px;
        height: 40px;
        background-color: rgba(170, 85, 0, 0.8);
        color: white;
        font-size: 18px;
        border: none;
        border-radius: 50%;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        z-index: 1001;
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .scroll-top.visible {
        opacity: 1;
    }
    
    /* Navigation mobile en bas */
    .mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #111;
        z-index: 1001;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: space-between;
        padding: 5px;
    }
    
    /* Styles pour les conteneurs d'annonces en lazy-loading */
    .lazy-ad-container {
        min-height: 100px;
        background-color: rgba(0, 0, 0, 0.1);
        margin: 10px 0;
        border-radius: 4px;
        overflow: hidden;
        position: relative;
    }
    
    .lazy-ad-container[data-ad-loaded="false"]::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #666;
        font-size: 12px;
    }
    
    .lazy-ad-container[data-ad-loaded="true"] {
        background-color: transparent;
    }
    
    /* Style pour l'indicateur de statut des annonces */
    .ad-status-indicator {
        position: absolute;
        bottom: 5px;
        right: 5px;
        background-color: rgba(0, 0, 0, 0.6);
        color: #fff;
        font-size: 10px;
        padding: 2px 5px;
        border-radius: 3px;
        opacity: 0.8;
        transition: opacity 0.5s;
        z-index: 5;
    }
    
    /* Masquer la navigation desktop sur mobile */
    .desktop-nav {
        display: none;
    }
    
    .mobile-nav ul {
        display: flex;
        margin: 0;
        padding: 0;
        flex: 1;
    }
    
    .mobile-nav li {
        list-style: none;
        flex: 1;
    }
    
    .mobile-nav a {
        padding: 12px 8px;
        color: #fff;
        text-decoration: none;
        display: block;
        font-weight: bold;
        font-size: 14px;
        text-align: center;
        background-color: #333;
        margin: 2px;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .mobile-nav a:active {
        background-color: #a50;
    }
}

/* Nettoyer l'animation existante */
@media screen and (min-width: 768px) {
    .iframe-container:hover,
    .iframecontainerplayer:hover {
        transform: none !important;
        transition: none !important;
        animation: none !important;
        box-shadow: none !important;
    }
    
    /* Style pour la navigation dans la partie droite */
    .desktop-nav {
        width: 100%;
        margin-bottom: 10px;
        background: #222;
        border-radius: 6px;
        display: block;
        padding: 5px;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    }
    
    .desktop-nav ul {
        display: flex;
        padding: 0;
        margin: 0;
    }
    
    .desktop-nav li {
        list-style-type: none;
        flex: 1;
    }
    
    .desktop-nav a {
        display: block;
        padding: 12px 10px;
        color: #fff;
        text-decoration: none;
        text-align: center;
        font-weight: bold;
        border-radius: 4px;
        transition: all 0.2s ease;
        background-color: #333;
        margin: 3px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .desktop-nav a:hover {
        background-color: #a50;
        transform: translateY(-2px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
    }
    
    .desktop-nav a:active {
        background-color: #950;
        transform: translateY(0);
    }
    
    /* Masquer la navigation mobile */
    nav:not(.desktop-nav) {
        display: none;
    }
    
    /* Style pour l'annonce dans le player-container */
    #bottom-ad-container {
        position: relative;
        width: 100%;
        margin: 10px 0 0 0;  /* Réduire la marge supérieure */
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 5;
        min-height: 180px;  /* Réduire la hauteur minimale */
    }
    
    /* Assurez-vous que le player-container puisse contenir ses enfants sans déborder */
    .player-container {
        display: flex;
        flex-direction: column;
        overflow: visible;
        margin-bottom: 20px;  /* Ajouter une marge en bas */
        max-height: calc(100vh - 40px);  /* S'assurer qu'il ne dépasse pas */
        width: 63% !important;  /* Réduire légèrement la largeur */
    }
    
    /* Augmenter la largeur de la partie droite */
    .buttons-container {
        width: 37% !important;  /* Augmenter légèrement la largeur */
    }
    
    /* Réduire le padding de channel_title */
    #channel_title {
        padding: 10px;  /* Réduire de 15px à 10px */
        margin-bottom: 0;  /* Supprimer la marge en bas */
    }
}

/* ==================================================
   CSS pour les styles inline HTML - Classes utilitaires
   ================================================== */

/* Pour remplacer les styles inline des éléments HTML */
.hidden-white-text {
    color: #fff;
}

.main-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: auto;
    position: relative;
}

.download-section {
    display: none;
    background-color: #222;
    padding: 15px;
    margin: 10px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.download-section h3 {
    padding: 10px;
    margin: -10px -10px 10px -10px;
    background: #fd0;
    color: #222;
    border-radius: 8px 8px 0 0;
}

.download-container {
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.app-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

.app-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.download-button-container {
    flex-grow: 1;
    display: inline-block;
}

.download-button {
    background-color: #a50;
    color: #fff;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.support-project-title {
    color: #fd0;
}

.ad-container-desktop {
    min-width: 300px;
}

.btn-channel-img {
    display: inline-block;
    width: 90px;
    vertical-align: center;
}

.btn-channel-img img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.btn-channel-name {
    display: inline-block;
    vertical-align: center;
}

.btn-channel-indicator {
    display: inline-block;
    padding: 5px;
    border-radius: 50%;
    vertical-align: center;
}

.btn-channel-text {
    display: inline-block;
    vertical-align: center;
}

/* Orientation paysage sur mobile - Maintenir le ratio iframe */
@media (max-width: 896px) and (orientation: landscape) {
    .iframe-container {
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 56.25% !important; /* Ratio 16:9 pour paysage mobile */
        position: relative !important;
        overflow: hidden !important;
        max-height: 70vh !important; /* Limiter la hauteur en paysage */
    }
    
    .iframe-container iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: none !important;
    }
}

/* Corrections supplémentaires pour très petits écrans */
@media (max-width: 480px) {
    .iframe-container {
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 56.25% !important; /* Maintenir ratio même sur très petits écrans */
        position: relative !important;
        overflow: hidden !important;
    }
    
    .iframe-container iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: none !important;
    }
}

.debug-container {
    background: #333;
    color: #fff;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}

.debug-error {
    color: red;
}

.debug-success {
    color: green;
}

.debug-stream-status {
    color: inherit; /* Color will be set dynamically via PHP */
}

.hidden-comment {
    padding: 10px;
    text-align: center;
    color: #fff;
}