/* ==========================================================================
   IMPORTATION DE LA POLICE PERSONNALISÉE
   ========================================================================== */
@font-face {
    font-family: 'MaPoliceStudio';       /* Le nom que vous donnez à votre police */
    src: url('../Assets/Bourton-Base1664.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}  
  
  
  /* Agencement structurel de l'écran global (100vh) */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: sans-serif;
            background-color: #111;
			background-image: url('../Assets/background.jpg');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
            color: #fff;
            height: 100vh;
            display: flex;
			
			/* ⚡Permet au titre de s'isoler sur sa propre ligne */
			flex-wrap: wrap; 
			
            overflow: hidden;
        }

		/* ==========================================================================
		   TITRE PRINCIPAL DE LA PAGE (CENTRÉ EN HAUT)
		   ========================================================================== */

		.main-broadcast-title {
			width: 100%;
			text-align: center;          /* Centre le texte horizontalement */
			font-family: 'MaPoliceStudio', sans-serif; 
			font-size: 5rem;             /* Augmente la taille du texte (gros) */
			font-weight: 800;            /* Donne un aspect très épais/gras moderne */
			text-transform: uppercase;   /* Force le titre en majuscules (optionnel) */
			letter-spacing: 2px;         /* Espacement élégant entre les lettres */
			
			/* Dégradé de couleur ou couleur unie selon votre charte (ici blanc et rose) */
			color: #fff;                 
			margin-top: 30px;            /* Espace au-dessus du titre */
			margin-bottom: 10px;         /* Espace en-dessous avant les 3 zones */
			
			/* Optionnel : Si vous voulez ajouter une touche de rose comme sur vos boutons */
			text-shadow: 0 0 20px rgba(0, 0, 0, 0.2); 
		}

		/* ==========================================================================
		   PAGE DE DIFFUSION - PLEINE LARGEUR ÉCRAN (0 MARGE)
		   ========================================================================== */

		/* Conteneur principal forcé à occuper 100% de la largeur de la fenêtre */
		.broadcast-layout {
			display: flex;
			justify-content: space-between;
			align-items: stretch; 
			gap: 20px; 
			
			/* MODIFIÉ : Occupe toute la largeur de l'écran sans aucune limite */
			width: 100vw;
			max-width: 100% !important; 
			margin: 40px 0; /* Plus de centrage auto sur les côtés */
			
			/* MODIFIÉ : Suppression totale des rembourrages latéraux */
			padding: 0 15px; 
			
			min-height: 70vh;    
			box-sizing: border-box;
		}

		/* Base commune aux trois zones pour le centrage vertical */
		.zone-left, .zone-center, .zone-right {
			display: flex;
			flex-direction: column;
			justify-content: center; 
			box-sizing: border-box;
			padding: 0; 
		}

		/* --- ZONE GAUCHE (Augmentée) --- */
		.zone-left {
			flex: 1.5;          /* Augmenté de 1 à 1.5 pour élargir la zone de texte */
			min-width: 400px;   /* Largeur minimale augmentée pour donner plus d'espace au texte */
		}
		.content-wrapper-left {
			text-align: left; 
			padding-left: 0; 
		}

		/* --- ZONE CENTRALE (Ajustée pour laisser de la place) --- */
		.zone-center {
			flex: 1.8;          /* Réduit de 2 à 1.8 pour redistribuer l'espace sur les côtés */
			min-width: 400px;   /* Ajusté pour une cohabitation harmonieuse */
			align-items: center; 
		}
		.player-wrapper {
			width: 100%;
			max-width: 850px;   /* Légèrement ajusté pour s'adapter au nouvel espace central */
		}

		/* --- ZONE DROITE (Mise à jour de l'alignement) --- */
		.zone-right {
			flex: 1.5;
			min-width: 400px;
			
			/* NOUVEAU : Pousse tous les blocs enfants (wrapper, div, images) vers la droite */
			align-items: flex-end; 
		}

		.content-wrapper-right {
			text-align: right; 
			width: 100%;
			display: flex;
			flex-direction: column;
			/* Force également l'alignement à droite à l'intérieur du wrapper */
			align-items: flex-end; 
		}
		.MaPolice {
			font-family: 'MaPoliceStudio', sans-serif; 
		}

		.scanText {
			font-size: 1.1rem;
		}

		/* ==========================================================================
		   STYLISATION DU QR CODE (ZONE GAUCHE)
		   ========================================================================== */

		.QRcode {
			width: 180px;                  /* Largeur du bloc QR code */
			height: 180px;                 /* Hauteur identique pour un carré parfait */
			margin-top: 20px;              /* Espacement avec le texte du dessus */
			
			margin-left: 40px; 
			
			/* Intégration de l'image de fond */
			background-image: url('../Assets/qrcode.png');
			background-size: cover;        /* L'image couvre tout le conteneur */
			background-position: center;   /* Centre l'image dans le bloc */
			background-repeat: no-repeat;  /* Évite la répétition de l'image */
			
			/* Bords arrondis */
			border-radius: 16px;           /* Ajustez l'arrondi selon vos préférences */
			
			/* Optionnel : Léger effet d'ombre pour le faire ressortir sur le fond */
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
			
			/* Si vous utilisez Flexbox dans la zone gauche et voulez l'aligner à gauche */
			align-self: flex-start;
		}
		/* ==========================================================================
		   STYLISATION DU QR CODE (ZONE DROITE)
		   ========================================================================= */

		.QRcode-right {
			width: 180px;                  /* Même taille que celui de gauche */
			height: 180px;
			margin-top: 20px;              /* Espacement avec le texte du dessus */
			
			/* MODIFIÉ : Calé à exactement 40px du bord de l'écran droit */
			margin-right: 40px;            
			
			/* Aimante le bloc QR code vers le bord droit en Flexbox */
			align-self: flex-end;          

			/* Intégration de l'image de fond (Modifiez le nom du fichier si nécessaire) */
			background-image: url('../Assets/qrcode.png'); 
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			
			border-radius: 16px;           /* Bords arrondis identiques */
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
		}
		/* Style de la phrase située sous le QR code gauche*/
		.qr-caption {
			/* Déplacement de 40px vers la droite */
			margin-left: 55px;
			
			/* Ajout de 20px d'espace au-dessus (remplace le padding par un margin pour éviter les conflits de blocs) */
			margin-top: 20px;
			margin-bottom: 20px;
			
			/* Optionnel : vous pouvez ajuster la taille ou la couleur pour parfaire le design */
			font-size: 1.2rem;
			color: #FFF; 
		}
		
		/* Style de la phrase située sous le QR code droite*/
		.qr-caption {
			/* Déplacement de 40px vers la droite */
			margin-right: 55px;
			
			/* Ajout de 20px d'espace au-dessus (remplace le padding par un margin pour éviter les conflits de blocs) */
			margin-top: 20px;
			margin-bottom: 20px;
			
			/* Optionnel : vous pouvez ajuster la taille ou la couleur pour parfaire le design */
			font-size: 1.2rem;
			color: #FFF; 
		}
		
		.meca {
			font-size: 1.5rem;
		}

        /* La boîte vidéo s'adapte à la hauteur (70% de l'écran) */
        .video-box {
            /* height: 70vh; */          
            width: 100%;
            position: relative;
            overflow: hidden;
            background: #000;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
			background: transparent;
            transition: max-width 0.4s ease-in-out; /* Redimensionnement fluide visuel */
        }
		
		/* Partie Chrono */ 
		.chrono {
			display: none; 
			flex-direction: column; 
			justify-content: center; 
			align-items: center; 
			min-height: 40vh; 
			background-color: transparent; 
			color: white; 
			font-family: sans-serif;
		}
		.timer {
			font-size: 7.5rem; 
			font-weight: bold; 
			font-variant-numeric: tabular-nums;
		}
		
		h2 {
			margin: 0 0 10px 0; 
			font-size: 2.2rem; 
			font-weight: 300;	
		}