body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #000;
			color:white;
        }

        #data-display {
            width: 80%;
            background: #fff;
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
            overflow-y: auto;
            max-height: 20%;
            font-size: 0.9em;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

		#app-container {
			display: grid;
			grid-template-columns: 2fr 1fr; /* La colonne player-container occupe 2 parts, questions-container 1 part */
			width: 80%; /* Limite la largeur totale à 80% de l'écran */
			max-width: 80%; /* Assure qu'il ne dépasse jamais 80% de l'écran */
			margin: 0 auto; /* Centre le conteneur horizontalement */
			height: 60%;
			background-color: rgba(33, 36, 40, 1);
			border-radius: 8px;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
			overflow: hidden;
			margin-top:-10em;
		}


				/* Styles pour le div opaque */
		#overlay {
			position: absolute;
			top: 0; /* Réinitialisé */
			left: 0; /* Réinitialisé */
			width: 100%; /* Par défaut à 100% */
			height: 100%; /* Par défaut à 100% */
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(33, 36, 40, 1); /* Fond totalement opaque */
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.5s ease-in-out;
			z-index: 20; /* Met l'overlay au-dessus des autres éléments */
		}

		#player-container {
			position: relative; /* Définit un contexte pour positionner l'overlay */
		}

		#overlay img {
			max-width: 60%;
			height: auto;
		}


        #overlay img {
            max-width: 50%;
            height: auto;
        }

        #overlay.visible {
            opacity: 1;
            pointer-events: auto;
        }

		#player-container {
			background-color: rgba(33, 36, 40, 1);
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%; /* Conserve la largeur de la colonne */
			height: 100%; /* Conserve la hauteur de la colonne */
			pointer-events: none; /* Désactiver les interactions sur le lecteur vidéo */
		}

		#questions-container {
			padding: 20px;
			overflow-y: auto;
			width: 100%; /* Ajustement automatique selon le nouveau ratio */
			background-color: rgba(40, 40, 40, 1);
			border-left: 1px solid #ccc;
		}

        /* Style pour le welcome-screen */
		#welcome-screen {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh; /* Prend toute la hauteur de la fenêtre */
			background-color: rgba(33, 36, 40, 1); /* Fond totalement opaque */
			display: flex;
			flex-direction: column;
			justify-content: center; /* Centrer verticalement le contenu */
			align-items: center;
			padding: 20px; /* Ajouter un padding pour éviter que le contenu touche les bords */
			font-size: 1.2em;
			z-index: 10;
			box-sizing: border-box; /* Inclure le padding dans les calculs de dimensions */
		}

        #welcome-screen h1, #welcome-screen p {
            color: white;
        }
		#presentation{
			background-color:black;
			color:white;
			margin-left:auto;
			margin-right:auto;
			margin-top:2em;
			font-size:1em;
			padding:1em;
			border-radius:10px;
			border: 1px solid orange;
		}
		#questions-container {
			position: relative; /* Assure que les enfants peuvent être positionnés relatifs à ce conteneur */
		}

		#timer-display {
			position: absolute;
			top: 0em; /* Ajustez cette valeur pour l'espacement vertical */
			right: 2em; /* Ajustez cette valeur pour l'espacement horizontal */
			width: 3em;
			height: 3em;
			background-color: #4479d9;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			font-size: 2em;
			font-weight: bold;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
			z-index: 5; /* Assure que le timer reste visible */
		}

		#timer-display::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: rgba(255, 255, 255, 0.2); /* Légère opacité pour effet visuel */
		}
        #start-button {
            padding: 10px 20px;
            font-size: 1.2em;
            color: white;
            background: #007BFF;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 20px;
        }

        #start-button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
		#niveau{
			color:#6592e6
		}
		#score-display{
			color:#fb980a;
		}
        #next-button {
            display: none;
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 1.2em;
            color: white;
            background: #4479d9;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
		#answers-container{
			font-size:1.2em;
			margin-top:2em;
		}
		label {
			padding-left:.5em;
			cursor: pointer; /* Ajoute un curseur cliquable pour le texte */
		}
        .answer {
            margin-bottom: 2em;
            display: flex;
            align-items: center;
        }

		.answer input[type="radio"] {
			margin-right: 10px;
			transform: scale(2); /* Agrandir les boutons radio */
			cursor: pointer; /* Indique que l'élément est cliquable */
		}

        .correct {
            color: green;
            font-weight: bold;
        }

        .incorrect {
            color: red;
            font-weight: bold;
        }
		/* Styles pour le popup */
		.hidden {
			display: none !important; /* Forcer l'application de la règle */
		}


		#popup-container {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.8); /* Fond semi-transparent */
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 1000;
		}

		#popup {
			background-color: #fff;
			width: 56em;
			height: 85vh;
			border-radius: 8px;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
			display: flex;
			flex-direction: column;
			overflow: hidden;
			position: absolute;
			max-height: 85vh;
			top: 0;
		}

		#popup-header {
			background-color: #4479d9;
			color: white;
			padding: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 1.2em;
		}

		#popup-title {
			font-weight: bold;
		}

		#popup-close-button {
			background: none;
			border: none;
			color: white;
			font-size: 1.2em;
			cursor: pointer;
		}

		#popup-close-button:hover {
			color: #f00;
		}

		#popup-content {
			display: flex;
			flex: 1;
			overflow: hidden;
		}

		/* Colonne gauche : Miniatures */
		#popup-left {
			max-width: 200px; /* Largeur maximale de la colonne */
			padding: 10px;
			overflow-y: auto;
			border-right: 1px solid #ccc;
			box-sizing: border-box; /* Assure que padding est inclus dans la largeur */
			flex-shrink: 0; /* Empêche la colonne de gauche de se réduire au redimensionnement */
		}

		#popup-left img {
			max-width: 100%; /* Ajuste à la largeur de la colonne */
			max-height: 150px; /* Hauteur maximale pour les miniatures */
			margin-bottom: 10px;
			border-radius: 8px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
			cursor: pointer;
			transition: transform 0.3s;
		}

		#popup-left img:hover {
			transform: scale(1.05);
		}

		/* Colonne droite : Contenu */
		#popup-content .popup-column:nth-child(2) {
			flex: 1;
			padding: 10px;
			overflow-y: auto; /* Ascenseur vertical */
		}

		/* Ascenseurs personnalisés pour les colonnes */
		#popup-left::-webkit-scrollbar,
		#popup-content .popup-column:nth-child(2)::-webkit-scrollbar {
			width: 8px;
		}

		#popup-left::-webkit-scrollbar-thumb,
		#popup-content .popup-column:nth-child(2)::-webkit-scrollbar-thumb {
			background-color: #888;
			border-radius: 4px;
		}

		#popup-left::-webkit-scrollbar-thumb:hover,
		#popup-content .popup-column:nth-child(2)::-webkit-scrollbar-thumb:hover {
			background-color: #555;
		}

		#popup-left::-webkit-scrollbar-track,
		#popup-content .popup-column:nth-child(2)::-webkit-scrollbar-track {
			background-color: #f1f1f1;
		}

/* === Styles pour les tablettes === */
@media only screen and (min-device-width: 834px) and (max-device-width: 1194px) {
    /* Styles pour iPad Pro 11" en portrait et paysage */
	    #app-container {
        width: 90%;
        /*grid-template-columns: 1fr; /* Passe à une seule colonne */
        height: auto; /* Ajuste automatiquement la hauteur */
		display: flex;
		max-width: 100%;
		width: 100%;
    }
}
/* iPads modernes en portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: portrait) {
    /* Styles spécifiques pour iPads en portrait */
	#app-container {
        width: 90%;
        /*grid-template-columns: 1fr; /* Passe à une seule colonne */
        height: auto; /* Ajuste automatiquement la hauteur */
		display: flex;
		max-width: 100%;
		width: 100%;
    }
}

/* iPads modernes en paysage */
@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: landscape) {
    /* Styles spécifiques pour iPads en paysage */
	#app-container {
        width: 90%;
        /*grid-template-columns: 1fr; /* Passe à une seule colonne */
        height: auto; /* Ajuste automatiquement la hauteur */
		display: flex;
		max-width: 100%;
		width: 100%;
    }
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) {
    /* Styles pour iPad Pro 12.9" en portrait et paysage */
	    #app-container {
        width: 90%;
        /*grid-template-columns: 1fr; /* Passe à une seule colonne */
        height: auto; /* Ajuste automatiquement la hauteur */
		display: flex;
		max-width: 100%;
		width: 100%;
    }
}

@media screen and (max-width: 1024px) {
    #app-container {
        width: 90%;
        /*grid-template-columns: 1fr; /* Passe à une seule colonne */
        height: auto; /* Ajuste automatiquement la hauteur */
		display: flex;
		max-width: 100%;
		width: 100%;
    }

    #player-container {
        height: 60vh; /* Réduit la hauteur du player */
    }

    #questions-container {
        height: auto;
        padding: 15px; /* Réduction légère du padding */
    }

    #questions-container .answer {
        margin-bottom: 1.5em; /* Réduit l'écartement vertical */
    }

    #overlay img {
        max-width: 70%;
    }
}

/* === Orientation paysage pour tablettes === */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    #player-container {
        height: 50vh;
    }

    #questions-container {
        height: 50vh;
    }
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
    #app-container {
        height: auto; /* Permet à la hauteur de s'ajuster dynamiquement */
    }

    #player-container {
        height: 55vh; /* Réduit la hauteur du lecteur vidéo pour rapprocher les questions */
    }

    #questions-container {
        height: auto; /* Ajuste automatiquement la hauteur */
        padding-top: 10px; /* Réduit l'espace entre le lecteur et les questions */
    }
}





/* === iPad en mode portrait (768px à 834px de largeur) === */
@media screen and (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
    #app-container {
        width: 90%;
        display: flex;
        flex-direction: column;
        height: auto; /* Ajuste automatiquement la hauteur */
        margin: 0 auto;
    }

    #player-container {
        height: 50vh;
    }

    #questions-container {
        height: auto;
        padding: 20px;
    }
}

/* === iPad en mode paysage (768px à 1194px de largeur) === */
@media screen and (min-width: 768px) and (max-width: 1194px) and (orientation: landscape) {
    #app-container {
        width: 90%;
        display: grid;
        grid-template-columns: 2fr 1fr; /* Deux colonnes : lecteur + questions */
        gap: 10px;
        height: 70vh; /* Hauteur réduite pour le paysage */
        margin: 0 auto;
    }

    #player-container {
        height: 100%; /* Remplit la colonne gauche */
    }

    #questions-container {
        height: 100%; /* Remplit la colonne droite */
        padding: 20px;
    }
}

/* === iPad Pro 11" et 12.9" en mode portrait === */
@media screen and (min-width: 834px) and (max-width: 1366px) and (orientation: portrait) {
    #app-container {
        width: 85%; /* Réduction pour un meilleur centrage */
        display: flex;
        flex-direction: column;
        height: auto;
        margin: 0 auto;
    }

    #player-container {
        height: 60vh;
    }

    #questions-container {
        height: auto;
        padding: 20px;
    }
}

/* === iPad Pro 11" et 12.9" en mode paysage === */
@media screen and (min-width: 834px) and (max-width: 1366px) and (orientation: landscape) {
    #app-container {
        width: 85%;
        display: grid;
        grid-template-columns: 3fr 2fr; /* Ratio adapté pour grand écran */
        gap: 20px;
        height: 70vh;
        margin: 0 auto;
    }

    #player-container {
        height: 100%;
    }

    #questions-container {
        height: 100%;
        padding: 30px;
    }
}

/* === iPads en mode portrait (toute la gamme) === */
@media screen and (min-width: 768px) and (orientation: portrait) {
    body {
        font-size: 1rem; /* Ajuste la taille du texte */
    }

    #app-container {
        max-width: 90%;
        padding: 10px;
    }
}

/* === iPads en mode paysage (toute la gamme) === */
@media screen and (min-width: 768px) and (orientation: landscape) {
    body {
        font-size: 1rem;
    }

    #app-container {
        max-width: 85%;
        padding: 20px;
    }
}

/* === Ajustement pour les iPads plus anciens en mode portrait === */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    #app-container {
        width: 95%;
        height: auto;
    }

    #player-container {
        height: 50vh;
    }

    #questions-container {
        height: auto;
        padding: 15px;
    }
}

/* === Ajustement pour les iPads plus anciens en mode paysage === */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    #app-container {
        width: 95%;
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 15px;
        height: 60vh;
    }

    #player-container {
        height: 100%;
    }

    #questions-container {
        height: 100%;
        padding: 15px;
    }
}


/* === Tablettes en mode portrait (minimum 600px de largeur) === */
@media screen and (min-width: 600px) and (max-width: 1199px) and (orientation: portrait) {
    #app-container {
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        height: auto;
		margin-top:-10em;
    }

    #player-container {
        height: 50vh;
    }

    #questions-container {
        height: auto;
        padding: 20px;
    }
}

/* === Tablettes en mode paysage (minimum 600px de largeur) === */
@media screen and (min-width: 600px) and (max-width: 1199px) and (orientation: landscape) {
    #app-container {
        width: 85%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 20px;
        height: 70vh;
		margin-top: -10em;
    }

    #player-container {
        height: 100%;
    }

    #questions-container {
        height: 100%;
        padding: 20px;
    }
}

/* === Grandes tablettes (minimum 1200px de largeur) en mode portrait === */
@media screen and (min-width: 1200px) and (orientation: portrait) {
    #app-container {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        height: auto;
		
    }

    #player-container {
        height: 60vh;
    }

    #questions-container {
        height: auto;
        padding: 25px;
    }
}

/* === Grandes tablettes (minimum 1200px de largeur) en mode paysage === */
@media screen and (min-width: 1200px) and (orientation: landscape) {
    #app-container {
        width: 80%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 30px;
        height: 75vh;
		margin-top:-10em;
    }

    #player-container {
        height: 100%;
    }

    #questions-container {
        height: 100%;
        padding: 30px;
    }
}

/* === Petites tablettes ou tablettes compactes (600px à 768px) en portrait === */
@media screen and (min-width: 600px) and (max-width: 768px) and (orientation: portrait) {
    #app-container {
        width: 95%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        height: auto;
    }

    #player-container {
        height: 45vh;
    }

    #questions-container {
        height: auto;
        padding: 15px;
    }
}

/* === Petites tablettes ou tablettes compactes (600px à 768px) en paysage === */
@media screen and (min-width: 600px) and (max-width: 768px) and (orientation: landscape) {
    #app-container {
        width: 95%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 10px;
        height: 60vh;
    }

    #player-container {
        height: 100%;
    }

    #questions-container {
        height: 100%;
        padding: 10px;
    }
}

/* === Très petites tablettes (moins de 600px de largeur) === */
@media screen and (max-width: 600px) {
    #app-container {
        width: 95%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        height: auto;
    }

    #player-container {
        height: 40vh;
    }

    #questions-container {
        height: auto;
        padding: 10px;
    }
}

/* === Tablettes haute densité (par exemple, Samsung Galaxy Tab) === */
@media screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    #app-container {
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        height: auto;
    }

    #player-container {
        height: 50vh;
    }

    #questions-container {
        height: auto;
        padding: 20px;
    }
}

/* === Tablettes Windows Surface ou similaires === */
@media screen and (min-width: 1280px) and (max-width: 1600px) {
    #app-container {
        width: 80%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 25px;
        height: 70vh;
		margin-top:-10em;
    }

    #player-container {
        height: 100%;
    }

    #questions-container {
        height: 100%;
        padding: 25px;
    }
}




/* === iPhones petits écrans (iPhone SE, 5, 5S, 5C - 320px) === */
@media screen and (max-width: 320px) and (orientation: portrait) {
    body {
        font-size: 0.9em;
    }
	#welcome-screen {
		position: absolute;
		top: -1em;
		left: 0;
		width: 100%;
		height: 83vh;
		background-color: rgba(33, 36, 40, 1);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20px;
		font-size: 1em;
		z-index: 10;
		box-sizing: border-box;
	}
    #app-container {
        width: 95%;
        grid-template-columns: 1fr;
        min-height: 86vh;
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0em;
    }

    #player-container {
        height: 25vh;
    }

    #questions-container {
		height: 20em;
        padding: 10px;
        font-size: 0.85em;
		line-height: 1em;
    }
	#questions-container .answer {
		margin-bottom: 0.6em;
	}
	.answer input[type="radio"] {
		margin-right: 10px;
		transform: scale(1.5);
		cursor: pointer;
	}
    #timer-display {
        width: 2.5em;
        height: 2.5em;
        font-size: 1.4em;
    }

    #start-button, #next-button {
        font-size: 1em;
        padding: 8px 12px;
    }

    #popup {
        width: 95%;
        height: 80vh;
    }
	/* Colonne gauche : Miniatures */
	#popup-left {
		max-width: 6em; /* Largeur maximale de la colonne */
	}
}

/* === iPhones standards (iPhone 6, 7, 8, SE 2e génération - 375px) === */
@media screen and (min-width: 321px) and (max-width: 375px) and (orientation: portrait) {
    body {
        font-size: 1em;
    }
	#welcome-screen {
		position: absolute;
		top: -1em;
		left: 0;
		width: 100%;
		height: 83vh;
		background-color: rgba(33, 36, 40, 1);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20px;
		font-size: 1em;
		z-index: 10;
		box-sizing: border-box;
	}
    #app-container {
        width: 90%;
        grid-template-columns: 1fr;
        min-height: 86vh;
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0em;
    }

    #player-container {
        height: 25vh;
    }

    #questions-container {
		height: 20em;
        padding: 10px;
        font-size: 0.9em;
		line-height: 1em;
    }
	#questions-container .answer {
		margin-bottom: 0.6em;
	}
	.answer input[type="radio"] {
		margin-right: 10px;
		transform: scale(1.5);
		cursor: pointer;
	}
    #timer-display {
        width: 3em;
        height: 3em;
        font-size: 1.5em;
    }

    #popup {
        width: 90%;
        height: 85vh;
    }
	/* Colonne gauche : Miniatures */
	#popup-left {
		max-width: 6em; /* Largeur maximale de la colonne */
		}
}

/* === iPhones grands écrans (iPhone X, XR, 11, 12 Mini - 414px) === */
@media screen and (min-width: 376px) and (max-width: 414px) and (orientation: portrait) {
    body {
        font-size: 1.1em;
    }
	#welcome-screen {
		position: absolute;
		top: -1em;
		left: 0;
		width: 100%;
		height: 83vh;
		background-color: rgba(33, 36, 40, 1);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20px;
		font-size: 1em;
		z-index: 10;
		box-sizing: border-box;
	}
    #app-container {
        width: 90%;
        grid-template-columns: 1fr;
        min-height: 86vh;
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0em;
    }

    #player-container {
        height: 25vh;
    }

    #questions-container {
		height: 20em;
        padding: 15px;
		font-size: .8em;
		line-height: 1em;
    }
	#questions-container .answer {
		margin-bottom: 0.6em;
	}
	.answer input[type="radio"] {
		margin-right: 10px;
		transform: scale(1.5);
		cursor: pointer;
	}
    #timer-display {
        width: 3.2em;
        height: 3.2em;
        font-size: 1.6em;
    }

    #popup {
        width: 85%;
        height: 85vh;
    }
	/* Colonne gauche : Miniatures */
	#popup-left {
		max-width: 6em; /* Largeur maximale de la colonne */
		}
}

/* === iPhones Pro et Max (iPhone 12, 13, 14 Pro, Pro Max - 428px) === */
@media screen and (min-width: 415px) and (max-width: 428px) and (orientation: portrait) {
    body {
        font-size: 1.2em;
    }
	#welcome-screen {
		position: absolute;
		top: -1em;
		left: 0;
		width: 100%;
		height: 83vh;
		background-color: rgba(33, 36, 40, 1);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20px;
		font-size: 1em;
		z-index: 10;
		box-sizing: border-box;
	}
    #app-container {
        width: 85%;
        grid-template-columns: 1fr;
        min-height: 86vh;
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0em;
    }

    #player-container {
        height: 25vh;
    }

    #questions-container {
		height: 20em;
        padding: 20px;
		font-size: .8em;
		line-height: 1em;
    }
	#questions-container .answer {
		margin-bottom: 0.6em;
	}
	.answer input[type="radio"] {
		margin-right: 10px;
		transform: scale(1.5);
		cursor: pointer;
	}
    #timer-display {
        width: 3.5em;
        height: 3.5em;
        font-size: 1.8em;
    }

    #popup {
        width: 80%;
        height: 85vh;
    }
	/* Colonne gauche : Miniatures */
	#popup-left {
		max-width: 6em; /* Largeur maximale de la colonne */
		}
}

/* === iPhones pliables ou futurs grands écrans === */
@media screen and (min-width: 429px) and (max-width: 768px) and (orientation: portrait) {
    body {
        font-size: 1.3em;
    }
	#welcome-screen {
		position: absolute;
		top: -1em;
		left: 0;
		width: 100%;
		height: 83vh;
		background-color: rgba(33, 36, 40, 1);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20px;
		font-size: 1em;
		z-index: 10;
		box-sizing: border-box;
	}
    #app-container {
        width: 80%;
        grid-template-columns: 1fr;
        min-height: 86vh;
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0em;
    }

    #player-container {
        height: 25vh;
    }

    #questions-container {
		height: 20em;
        padding: 25px;
		font-size: .8em;
		line-height: 1em;
    }
	#questions-container .answer {
		margin-bottom: 0.6em;
	}
	.answer input[type="radio"] {
		margin-right: 10px;
		transform: scale(1.5);
		cursor: pointer;
	}
    #timer-display {
        width: 4em;
        height: 4em;
        font-size: 2em;
    }

    #popup {
        width: 75%;
        height: 85vh;
    }
	/* Colonne gauche : Miniatures */
	#popup-left {
		max-width: 6em; /* Largeur maximale de la colonne */
		}
}