body {
        padding-bottom: 0px!important;
  }	  
	  .ui-dialog-multijoueur { background-color:#483cb7!important; border:1px solid #5f4eff!important;  }
	  .ui-dialog-multijoueur .ui-dialog-titlebar .ui-dialog-title { color:white!important; }
	  .ui-dialog-multijoueur .ui-dialog-content { color:white!important; }
	  .ui-dialog-multijoueur .ui-widget-content { color:white!important; }
	  
	  .cal-sans-regular {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#entete_v5, #nbconn {
    background-color: #483cb7!important;
    border:0;   
}

#ligne2, #entete_v5 #ligne2 A {
    color:#c1baff!important;
}

#login A {
    color:white!important;
}

A.menu_1_droite {
    color:#1a1356;
}

#menu_2 {
    background-color: #5d51c7!important;
    border-bottom:1px solid #483cb7!important;
}

#menu_1 {
    background:linear-gradient(90deg, #5d51c7 0%, #b7afff 100%)!important;
    border-bottom:1px solid #5d51c7!important;
}

#pied {
    background-color: #5d51c7!important;
}

#pied #contpied, #pied #contpied H2, #pied #contpied a, #generated {
    color: white!important;
}

.profil_btn {
    background-color: #9990ed!important;
}

.profil_btn:hover {
    background-color: #aba3f1!important;
}

a.menu_1_selected, A.menu_1_droite:hover {
    color: white!important;
}

#login A {
    color:#303030!important;
}

#entete_v5 {

}
.montserrat {
  font-family: "Montserrat", sans-serif;
}

.petitRondRouge {
	border: 2px solid #483cb7;
}

.feedback-overlay {  border:0!important; }

/* Le conteneur du salon doit être relatif pour positionner les boutons */
.salon-container {
    position: relative;
}

.elo {
	color:#f1b734!important;
	font-weight:bold;
}

.points_red {
	color:#ff4444;
}
.elo_red {
	color:#ff4444!important;
	font-weight:bold;
}

.elo_gray {
	color:gray!important;
	font-weight:bold;
}

.feedback-elo {
	font-size:50pt!important;
	animation: feedbackAnimation 3s ease-in-out forwards!important;
}
    		
/* Conteneur pour les boutons d'instance */
.instance-buttons-overlay {
    position: absolute;
    bottom: 3px; /* Ajustez pour être juste au-dessus du bandeau du bas */
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 4;
   
}

.instance-btn-junior {
	background-color:#008628;
	border-bottom:3px solid #003510;
}

.instance-btn-avance {
	background-color:#C37F00;
	border-bottom:3px solid #563800;
}

.instance-btn-expert {
	background-color:#AC0000;
	border-bottom:3px solid #660000;
}

.instance-line-junior {
	background-color:#003510; /* #383838; */
	
}

.instance-line-avance {
	background-color:#563800; /* #383838; */
	
}

.instance-line-expert {
	background-color:#660000; /* #383838; */
	
}

.instance-btn {
    display: inline-block;
    padding: 6px 0px 7px 0px;
    margin: 0 1px;
    color: white;
    border-radius: 10px;
    cursor: pointer;
    font-weight: normal;
    transition: all 0.2s;
    text-transform:uppercase;
    font-size:14px;
    width:31%;
}

.instance-btn .number {
	font-weight: bold;
	font-size:16px;
	padding-left:2px;
	
}

.instance-btn:hover {
    background-color: #fff;
    color: #5B4FCB;
}

.instance-btn.full {
    background-color: #7f8c8d; /* Couleur grise pour un salon complet */
    cursor: not-allowed;
    border-color: #95a5a6;
}

.instance-progress {
    font-size: 10px;
    color: #f1c40f; /* Jaune */
    margin-left: 5px;
}

.salon-nom {
	position: absolute; top: 43%; left: 50%; transform: translate(-50%, -50%);
	color:white;
	text-transform: uppercase;
	font-size:26pt;
	width:95%;
	text-shadow: 2px 2px black;
}

.salon-bandeau {
	position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	background: rgba(0,0,0,0.4); 
	padding: 4px 11px; 
	font-size: 13px;
	border-top-right-radius:10px;
	border-top-left-radius:10px;
}

.salon-nb-questions {
	float:right;
	margin-left:4px;
	background: #004d9f; 
	color: white; 
	border-radius: 50%; 
	height:20px;
	width:20px;
	padding-top:2px;
	text-align:center; 
	font-size: 14px;
}

.current-question {
	margin-left:7px;
	float:right;
	color: white;
	padding-top:2px;
	font-size: 14px;
}

#maintenance-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #34495e;
    color: white;
    display: none; /* Caché par défaut */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    text-align: center;
}

		#players_jeu { font-family: "Roboto", sans-serif; }
   	.salon-nom {   
   		font-family: "Cal Sans", sans-serif;
  		font-weight: 300;
  		font-style: normal; 
  	}

.maintenance-message {
    background-color: #c0392b;
    color: white;
    padding: 20px;
    margin: 20px auto;
    border-radius: 10px;
    text-align: center;
    max-width: 600px;
}
.maintenance-message h3 {
    margin-top: 0;
}

.visu_niveau {
	padding:2px 4px;
	border-radius: 4px;
}

/* On applique l'opacité et le curseur d'interdiction au conteneur principal */
#invite_joueur.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* TRÈS IMPORTANT : On désactive les clics UNIQUEMENT sur l'élément cliquable à l'intérieur */
#invite_joueur.disabled img.pointer {
    pointer-events: none;
}
    
.sticky_jour {
	background-image:url("/images/icons/sticky5.png");
	top: 3px; 
	right: 3px; 
	background-size:40px 40px;
	width:40px;
	height:40px;
	position:absolute; 
	padding: 0px; 
}

.salon-nb-connected {
	position: absolute; 
	top: 0px; 
	left: 50%; 
	transform: translateX(-50%); 
	background: rgba(0,0,0,0.8);
	padding: 4px 12px; 
	border-radius: 0px 0px 10px 10px; 
	font-size: 14px;
	color: #34f15f;
}

.salon-nb-connected2 {
	position: absolute; 
	top: 0px; 
	left: 50%; 
	transform: translateX(-50%); 
	background: rgba(0,0,0,0.8);
	padding: 4px 12px; 
	border-radius:  10px 10px 0px 0px; 
	font-size: 14px;
	color: #34f15f;
}

.salon-cercle-connected {
	display:inline-block; 
	background-image:url("/images/icons/green_led.png");
	background-size:20px 20px;
	width:20px;
	height:20px;
	vertical-align: middle;
}
.salon-cercle-connected-full { background-image:url("/images/icons/red_led.png");  }
.salon-nb-connected-full { color: #e13333!important;  }

.jauge-conteneur {
width: 130px;  
height: 24px;  
background-color: #483cb7; 
border-radius: 10px; 
overflow: hidden; 
position: relative; 
}

.jauge-remplissage {
/*background-color: #b7afff; */
height: 100%;
border-radius: 10px 0px 0px 10px; 
transition: width 0.3s ease-in-out; 
}

	.bg_anim_bronze {
		animation: anim_bronze 1.5s ease-in-out forwards;
		
	}
	
		@keyframes anim_bronze {
    0% {
        background-color:#F1C793;
    }
    50% {
       background-color:#fff5c1;
    }
    100% {
        background-color:#F1C793;
    }
	}
	
	.bg_anim_argent {
		animation: anim_argent 1.5s ease-in-out forwards;
	
	}
	
		@keyframes anim_argent {
    0% {
        background-color:#D4D4D4;
    }
    50% {
       background-color:#fff5c1;
    }
    100% {
        background-color:#D4D4D4;
    }
	}
	
	.bg_anim_or {
		animation: anim_or 1.5s ease-in-out forwards;
	}

		@keyframes anim_or {
    0% {
        background-color:#FFD014;
    }
    50% {
       background-color:#fff5c1;
    }
    100% {
        background-color:#FFD014;
    }
	}
	
	
	.bg_anim_default {
		animation: anim_default 1.5s ease-in-out forwards;
	}
	
	@keyframes anim_default {
    0% {
        background-color:#b7afff;
    }
    50% {
       background-color:#fff5c1;
    }
    100% {
        background-color:#b7afff;
    }
	}
	
        #panneau_gauche.hidden, #link_admin {
            display:none;
        }
        
        .multi_main-content.full-width {
            width: 100%;
        }
        #entete {
            min-height:40px;
        }
        .color_entete {
            background-color: #483cb7;
        }
        .multi_header {
            /*background-color: #483cb7;*/
            color: white;
            padding: 10px 7px 10px 10px;
            align-items: center;
            z-index:5;
        }
        .game_bloc {
        		color: white;
        		background-color:#5d51c7;
            padding: 10px;
            align-items: center;
            box-shadow: 0 0 #0000,0 0 #0000,0 25px 50px -12px rgb(0 0 0 / .25);
            -webkit-border-radius: 10px;
						-moz-border-radius: 10px;
						border-radius: 10px;
        }
        .player {
            text-align: center;
            margin-bottom: 12px;
            position: relative; /* Très important pour que transform puisse repositionner l élément */
    				transition: top 0.5s ease-in-out, transform 0.5s ease-in-out; /* Ajouté pour l animation */
        }
        
				/* --- Styles pour les avatars en fonction de la position --- */
				.player img {
				    width: 40px; /* Taille par défaut pour les positions 4 et plus */
				    height: 40px;
				    border-radius: 50%;
				    /* Ajout d une transition pour une animation fluide lors du changement de taille */
				    transition: width 0.3s ease-out, height 0.3s ease-out;
				    object-fit: cover; /* Assure que l image couvre bien la zone sans être déformée */
				}

				/* Styles pour le 1er joueur */
				.player.rank-1 img {
				    width: 60px;
				    height: 60px;
				}

				/* Styles pour le 2ème joueur */
				.player.rank-2 img {
				    width: 50px;
				    height: 50px;
				}

				/* Styles pour le 3ème joueur */
				.player.rank-3 img {
				    width: 44px;
				    height: 44px;
				}

				/* --- Style pour la barre de séparation --- */
				.players-top3-separator {
				    height: 10px;
				    background-color: #5448C2;
				    margin: 9px 0; /* Espacement autour de la barre, similaire au margin-bottom des joueurs */
				    /* border-radius: 5px;  Optionnel: pour adoucir les coins */
				}
        
        
        /* Le conteneur de l'avatar doit être 'relative' pour positionner les badges */
				.player .relative {
				    position: relative;
				}

				/* Badge de niveau en bas à droite */
				.player-level-badge {
				    position: absolute;
				    bottom: -1px;
				    right: -1px;
				    z-index: 3;
				}
				.player-level-badge img {
				    width: 20px!important;
				    height: 20px!important;
				}

				/* Icône de feedback (joker ou flamme) en haut à gauche */
				.player-feedback-icon {
				    position: absolute;
				    top: -5px;
				    left: -5px;
				    width: 28px;
				    height: 28px;
				    z-index: 3;
				    transition: opacity 0.3s, transform 0.3s;
				    background-size: contain;
				    background-repeat: no-repeat;
				    background-position: center;
				}
				.player-feedback-icon.hidden {
				    opacity: 0;
				    transform: scale(0);
				}

				/* Animation pour les flammes */
				@keyframes flame-effect {
				    0% { opacity: 0; transform: scale(0.5) rotate(-30deg); }
				    20% { opacity: 1; transform: scale(1.2) rotate(10deg); }
				    80% { opacity: 1; transform: scale(1) rotate(0deg); }
				    100% { opacity: 0; transform: scale(1.5) rotate(30deg); }
				}
				.player-feedback-icon.flame-animation {
				    animation: flame-effect 4s ease-in-out forwards;
				}
        
        
        /* Emoticon sélectionnée par le joueur en bas à droite */
				.player-feedback-emote {
				    position: absolute;
				    bottom: -5px;
				    right: -5px;
				    width: 28px;
				    height: 28px;
				    z-index: 4;
				    transition: opacity 0.3s, transform 0.3s;
				    font-size:20px;
				}
				
				.player-feedback-emote.hidden {
				    opacity: 0;
				}

        .round30 {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
        
        .game_bg1 {
        	background-color:#5B4FCB;
        }
        
        .game_bg2 {
        	background-color:#483CB7;
        }
        
        .game_bg3 {
        	background-color:#605CEE;
        }
        
        .game_bg_selected, .classement_selected {
        	background-color:#008aa9!important;
        }
        
        
        .multi_main-content {
        		position: relative;
            padding: 0px 20px;
            background-color: #5B4FCB;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            min-height: 100vh;
            height:auto!important;
            /*overflow:auto;*/
            color: white;
            border-top-left-radius:10px;
            border-top-right-radius:10px;
        }
        .answer-btn {
            margin: 2px 0;
            color: white;
            display: block;
            width: 100%;
            font-size: 12pt;
            position: relative;
            z-index: 5; 
            opacity: 0;
            white-space: normal;
            overflow-wrap: break-word;
            word-wrap: break-word;
            padding: 10px;
            box-sizing: border-box;
            min-height: 45px;
            line-height: 1.4;
            border-bottom: 5px solid #D0D4DA!important;
        		border-left: 2px solid #FEFFFD!important;
        		border-right: 2px solid #FEFFFD!important;
        		border-top: 2px solid #FEFFFD!important;
        		margin-bottom:8px;
        		border-radius:10px;
        }
        .answer-btn.red { background-color: #fa9796; border-color: #fa9796; color:#7D1F20!important; }
        .answer-btn.blue { background-color: #71b5ff; border-color: #71b5ff; color:#1E3C88!important; }
        .answer-btn.yellow { background-color: #ffdb1d !important; border-color: #ffdb1d; color:#784A05!important; }
        .answer-btn.green { background-color: #60d78b; border-color: #60d78b; color:#13562B!important; }
        .answer-btn.disabled {
            pointer-events: none;
            opacity: 0.8;
        }
        .answer-btn.correct {
            opacity: 1 !important;
            background-color:#518e00!important;
            color:#e0ffad!important;
        }
        .answer-btn.incorrect {
            background-color: #727272!important;
            color:#d1d1d1!important;
        }
        @keyframes slideInFromRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        .answer-btn {
            animation: slideInFromRight 0.4s ease-out forwards;
        }
        .answer-btn:focus, .answer-btn:active {
            outline: none;
            border-color: inherit;
            box-shadow: none;
        }
        
        /* Style pour tous les boutons une fois qu'une réponse est donnée */
				.answer-btn.disabled {
				    cursor: not-allowed;
				    /* Empêche complètement les clics, même si l'événement JS est là */
				    pointer-events: none; 
				}

				/* Met en évidence le bouton sélectionné par le joueur */
				.answer-btn.answered {
				    transform: scale(1.05);
				    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
				    border: 2px solid #fff;
				    opacity: 1 !important; /* S'assure qu'il reste pleinement visible */
				}

				/* Grise les autres boutons pour montrer qu'ils ne sont plus sélectionnables */
				.answer-btn.disabled:not(.answered) {
				    opacity: 0.5!important;
				}

				/* Style pour la bonne réponse (fond vert) */
				.answer-btn.final-correct {
				    background-color: #2ecc71 !important; /* Vert franc */
				    color: white !important;
				    border-color: #27ae60 !important;
				    opacity: 1 !important;
				    transform: scale(1.05); /* On la fait ressortir un peu */
				}

				/* Style pour la mauvaise réponse CHOISIE par le joueur (fond rouge) */
				.answer-btn.final-incorrect-chosen {
				    background-color: #e74c3c !important; /* Rouge */
				    color: white !important;
				    border-color: #c0392b !important;
				    opacity: 0.9 !important; /* Légèrement moins visible que la bonne réponse */
				}

				/* Style pour les autres mauvaises réponses, non choisies (fond gris estompé) */
				.answer-btn.final-incorrect-not-chosen {
				    background-color: #7f8c8d !important; /* Gris */
				    color: white !important;
				    opacity: 0.7 !important;
				    border-color: #606869 !important;
				}

        .player-name {
            color: white;
        }
        .player-score {
            color: white;
        }
        .player-name.connect {
            color: #34f15f;
        }
        .player-name.highlight_red {
            color: red !important;
            transition: color 0.3s;
        }
        .player-name.highlight {
            color: #FFFF00!important;
            transition: color 0.3s;
        }
        .player-score.highlight {
            color: #FFFF00 !important;
            /*transition: color 2s;*/
        }
        
        /* Conteneur de l'avatar du joueur */
				.player .relative {
				    position: relative;
				}

				.player.player-answered {
    filter: grayscale(80%);
    opacity: 0.6;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

				/* Le rond indicateur de réponse */
				.answer-indicator {
				    position: absolute;
				    top: -1px;  /* Ajustez pour un positionnement parfait */
				    left: -9px; /* Ajustez pour un positionnement parfait */
				    width: 15px;
				    height: 15px;
				    background-image:url("/images/icons/sablier.png");
						background-size:15px 15px!important;
				    /*background-color: #c9c4ff;
				    border-radius: 50%;*/
				    z-index: 10;
				    
				    /* Transition pour une disparition douce */
				    transition: transform 0.3s, opacity 0.3s;
				}

				/* Classe pour cacher l'indicateur */
				.answer-indicator.hidden {
				    transform: scale(0);
				    opacity: 0;
				}

        /*
        .player-img {
        	border:1px solid #3F33AF;
        }
        .player-img.highlight_red {
        	border:1px solid red!important;
        }
        .player-img.highlight {
        	border:1px solid white !important;
        }
				*/ 
				
        .progress-circles {
            display: flex;
            justify-content: center;
            /*margin-top: 20px;*/
        }
        
        .circle {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin: 0 3px;
            border:0!important;
        }
        
        /*
        .circle.red { background-color: #c30000; }
        .circle.gold { background-color: gold; }
        .circle.silver { background-color: silver; }
        .circle.bronze { background-color: #cd7f32; }
        .circle.green { background-color: green; }
        .circle.blue { background-color: #332ea1!important; }
        */
        
        .circle.red { background-color: #ff4d4d; }
        .circle.gold, .circle.silver, .circle.bronze, .circle.green { background-color: #309d30; }
        .circle.blue { background-color: #332ea1!important; }
        
        .darker {
        	width: 100%; 
        	filter: brightness(75%);
        }
        
        #countdown {
            text-align: center;
            font-weight: bold;
            font-size: 30pt;        
        }
        #answers {
            height: 215px;
            max-width: 400px;
            margin: auto;
        }
        
        #game-content {
        	/*height:auto!important;*/
        	background-color: #5B4FCB;
        }
        #score, #points-gained, .points-gained {
            color: #F5E500;
        }
        #score {
        	width:100px;
        	padding-right:0px!important;
      	}
        #waiting-message {
            text-align: center;
            height: 10px;
            color: #F5E500;
        }
        #players-list {
            color: gray;
        }
        #points-gained {
            text-align: center;
            margin-top: 5px;
        }
        #points-gained.incorrect {
            color: red;
        }
        #game-over-countdown {
            text-align: center;
            font-weight: bold;
            font-size: 15pt;
            margin-top: 20px;
        }
        #question-number {
            text-transform: uppercase;
            font-size: 12pt;
            text-align: center;
            padding-left:20px;
            color: #F5E500;
        }
        #question-text {
            font-size: 20pt;
            text-align: center;
            padding-top: 10px;
            margin-top: 0px;
            margin-bottom: 0px;
        }
        #question-text-2 {
        	background-color:#6159dc;
        	padding: 0px 10px 0px 10px;
        }
        #quizz-nom {
        	font-size: 14pt;
        	text-align: center;
        	padding-top: 12px;
        	padding-bottom: 0px;
        	text-transform:uppercase;
        	color:white;
        	font-weight:bold;
        }
        #question-text-3 {
        		display: flex;
  					align-items: center;   /* Vertical */
  					justify-content: center; /* Horizontal */
  					min-height:90px;
                    margin-top:10px;
                    
        }

        #question-all {
            padding: 0px 0px 0px 0px;
        }
        #difficulty {
            float: right;
            font-size: 12pt;
        }    
        #theme {
            color: #7670f4;
            text-transform: uppercase;
            font-size: 12pt;
            font-family: "Roboto", sans-serif;
        }
        .multi_row {
            margin-left: -15px;
            margin-right: -15px;
        }
        
        #quit-game {
            display: none;
        }
        .room-btn {
            position: relative;
            margin: 5px;
        }
        .room-info {
            position: absolute;
            top: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 2px 5px;
            font-size: 10pt;
            border-radius: 3px;
        }
        .room-level {
            font-size: 10pt;
            color: #ccc;
        }
        
        #question-image img {
            max-height: 160px;
            width: auto;
            display: block;
            margin: 0 auto;
        }
        
        .connected {
					display:flex;align-items:center;gap:3px;
				}

				.connected_circle_old {
					width:10px;height:10px;background-color:#0cda3b;border-radius:50%;display:inline-block;
				}

				.img_xp {
					background-image:url("/images/icons/xp.png");
					background-size:20px 20px!important;
					width:20px!important;
					height:20px!important;
					vertical-align: middle;
				}

				.connected_circle {
					background-image:url("/images/icons/green_led.png");
					background-size:20px 20px!important;
					width:20px!important;
					height:20px!important;
					vertical-align: middle;
				}

        #timer-bar-container {
            margin-bottom:10px;
            height: 5px;
            background-color: #3232a4;
            overflow: hidden;
            position: relative;
        }
        #timer-bar {
            height: 100%;
            width: 100%;
            background-color: rgb(0, 255, 0);
            position: absolute;
            right: 0;
            transition: width 1s linear, background-color 1s linear;
        }
        #min-players-countdown {
    			margin-top: -95px;
    			font-size: 40pt;
				}



.feedback-xp {
	font-size:60pt!important;
	color:#34f15f!important;
	animation: feedbackAnimation 3s ease-in-out forwards!important;
}


.feedback-overlay.incorrect, .red_important {
    color: #db0000; /* Rouge pour FAUX/TROP TARD */
}

.text_bonus {
	font-size:20px;text-align:center;margin-top:-15px;color:white;
	text-transform:uppercase;
}

#content_2 {
	background-color:#483cb7!important; /*3f33af*/
}

#class_menu_ {
	color:white;
	padding:34px 10px 10px 0px;
	margin-left:-5px;
}

#mobile_class_menu_ {
	color:white;
	background-color:#483CB7;
	padding:10px 10px 20px 10px;
	margin-top:20px;
	margin-bottom:20px;
	
}

.game_classement A { 
	text-transform:uppercase;
	text-decoration:none;
	color:white!important;
	padding:1px;5px;
}

.game_classement A.selected { 
	color:#483cb7!important;
	background-color:white;
	padding-left:4px;
	padding-right:4px;
}

.classement_menu {
	padding-top:0px;
	padding-bottom:10px;
	text-align:center;
}

#nbconn, .connectedUnderline {
	color:white!important;
}

#nbconn A {
	color:#c1baff!important;
}

.feedback-overlay.bonus-rapidite {
    /*color: #af33a0;*/
    font-size: 36px;
}
.feedback-overlay.bonus-alasuite {
    color: #af33a0;
    font-size: 36px;
}

.waiting-center, .loading-dots {
	font-size:16pt;
	font-family: "Montserrat", sans-serif;
	font-weight:bold;
	color: white;
}

.loading-dots {
    display: inline-block;
    width: 24px; /* Réserve l espace pour 3 points */
    overflow: hidden; /* Masque les points hors animation */
        vertical-align: middle; /* Aligne verticalement avec le texte */
    margin: 0; /* Supprime les marges */
    padding: 0; /* Supprime les paddings */
    font-size:14pt!important;
}

.loading-dots span {
    display: inline-block;
    opacity: 0;
    animation: dotAnimation 2s infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }


    .podium_container {
      width: 233px;
      height: 258px;
      position: relative;
      margin: 0 auto; /* Centrage horizontal */
      background-image: url("/images/icons/game_podium3.png"); /* Remplace par le chemin de ton image de fond */
      background-size: cover;
      background-position: center;
    }

         
                    
		.podium_image-block {
      position: absolute;
      transform: translate(-50%, -50%);
      text-align: center;
    }

    .podium_image-block img {
      display: block;
      margin: 0 auto;
    }

    .podium_image1 {
      left: 114px;
      top: 56px;
      
    }

    .podium_image2 {
      left: 35px;
      top: 150px;
      
    }

    .podium_image3 {
      left: 191px;
      top: 179px;
      
    }

    .podium_label {
      font-size: 12px;
      color: white;
      margin-top: 2px;
      text-shadow: 0 0 2px black;
      font-weight:bold;
    }

@keyframes dotAnimation {
    0% { opacity: 0; }
    10% { opacity: 1; }
    50% { opacity: 1; }
    60% { opacity: 0; }
    100% { opacity: 0; }
}

 #pseudo-form {
        max-width: 400px;
        margin: 20px auto;
        text-align: center;
    }
    #pseudo-input {
        width: 100%;
        padding: 10px;
        font-size: 14pt;
        font-family: "Montserrat", sans-serif;
        border: 2px solid #483cb7;
        border-radius: 5px;
        background-color: #F2F2F2;
        color: black;
        margin-bottom: 2px;
        box-sizing: border-box;
    }
    #pseudo-input:focus {
        outline: none;
        border-color: #F5E500;
    }
    #pseudo-submit {
    		width:100%;
        
        margin-bottom:20px;
    }
    #pseudo-submit:hover {
       
    }
    #pseudo-error {
        color: #ff7171;
        font-size: 12pt;
        font-family: "Montserrat", sans-serif;
        margin-top: 5px;
        display: none;
    }
    
    .game_categorie {
    	margin:10px 12px;
    	background-color:#776BE4;
    	width:90px;
    	height:120px;
    	position: relative;
    }
    
    .game_categorie:hover {
    	background-color:#dfa100;
    }
    
    .category-player-count {
	    position: absolute;
	    top: 0px;
	    right: 15px;
	    text-align:center!important;
	    font-size: 15px; /* Exemple pour ajuster la taille */
	    padding: 2px 5px; /* Exemple pour ajuster l'espacement */
			background: rgb(0 0 0 / 44%)!important;
			
			 display: flex;
    	justify-content: center; /* Centre horizontalement */
    	align-items: center;
		}

		.dialog-player-list {
		    list-style: none;
		    padding: 0;
		    margin: 0;
		}
		.dialog-player-list li {
		    display: flex;
		    align-items: center;
		    /*padding: 8px 5px;*/
		    /*border-bottom: 1px solid #eee;*/
		}
		.dialog-player-list li:last-child {
		    border-bottom: none;
		}
		.dialog-player-list li img {
		    margin-right: 10px;
		}

    #resume_membre, #mes_amis {
     margin-top:20px;margin-right:15px;
    }



.room-locked-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fond semi-transparent pour griser */
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    border-radius: 10px; /* Doit correspondre au border-radius de l'image */
    pointer-events: none; /* Permet au clic de passer à l'élément parent */
}

.room-locked-overlay img {
    width: 64px; /* Taille de votre image de cadenas */
    height: 64px;
    opacity: 0.9;
}

.podium_container_all {
	position: relative;
  background-size: cover;
  background-position: center;
  color: white;
  padding: 0px;
  z-index: 0;
  overflow: hidden; /*  très important pour bloquer le débordement */
 }
 
.podium_container_all::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* effet foncé */
  z-index: 1;
}

/* Le contenu passe au-dessus de l’effet */
.podium_container_all > * {
  position: relative;
  z-index: 2;
}

/* On s'assure que le contenu du salon reste derrière le cadenas */
.salon-nom, .salon-bandeau, .connected {
    z-index: 2;
}

/* On s'assure que le cadenas est au-dessus de tout */
.room-locked-overlay {
    z-index: 3;
}

/* JOKERS */
#joker-selection-container {
    padding-top: 20px;
    text-align: center;
}

.joker-choice {
    display: inline-block;
    margin: 0 15px 15px 15px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}

.joker-choice.selected {
    background-color: #5B4FCB; /* #776BE4; */
		opacity: 1;
    transform: scale(1.1);
}

.joker-choice:hover {
    opacity: 1;
    transform: scale(1.1);
}

.joker-choice img {
    width: 100px;
    height: 100px;
}

.joker-choice .joker-name {
    color: white;
    font-weight: bold;
    margin-top: 5px;
}

#joker-in-game-container {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
}

.active-joker {
    width: 32px; 
    height: 32px;
    margin-top: -5px;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.active-joker.used, .inactive-joker {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
}

/* L'overlay qui couvrira la zone de jeu */
.joker-animation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001; /* Doit être au-dessus de tout le reste */
    pointer-events: none; /* L'overlay ne doit pas bloquer les clics */
}

/* L'image du joker qui sera animée */
.joker-animation-img {
    width: 150px; /* Taille de l'image animée */
    height: 150px;
    /* On applique l'animation nommée 'joker-effect' */
    animation: joker-effect 1s ease-in-out forwards;
}

/* Définition de l'animation (les keyframes) */
@keyframes joker-effect {
    0% {
        opacity: 0;
        transform: scale(0.5); /* Commence petit et invisible */
    }
    50% {
        opacity: 1;
        transform: scale(1.2); /* S'agrandit au-delà de sa taille normale */
    }
    100% {
        opacity: 0;
        transform: scale(1.5); /* S'agrandit encore en disparaissant */
    }
}


/* --- 1. Conteneur Principal du Chat --- */
/* Style de base, utilisé dans le lobby */
#chat-container-1 {
	margin-right: 15px;
	display: flex !important;
}

#chat-container {
    width: 100%;
    margin-top: 20px;
    background-color: rgba(0, 0, 0, 0.2); /* Fond semi-transparent */
    border-radius: 5px;
    display: none; /* Caché par défaut, affiché par JavaScript */
    flex-direction: column; /* Organise les éléments (messages, input) verticalement */
    max-width: 800px; /* Limite la largeur dans le lobby sur grand écran */
    margin-left: auto;
    margin-right: auto;
    display: flex !important;
}

/* --- 2. Zone des Messages --- */
#chat-messages {
    height: 150px; /* Hauteur sur Desktop */
    padding: 10px 10px 0px 10px;
    overflow-y: auto; /* Ajoute une barre de défilement si le contenu dépasse */
    display: flex;
    flex-direction: column-reverse; /* Affiche les nouveaux messages en bas */
    /* Crée un effet de fondu transparent en haut de la zone de chat */
    mask-image: linear-gradient(to bottom, transparent 0%, black 30%); 
    text-align:left;
}

/* --- 3. Style d'un Message Individuel --- */
.chat-message {
    margin-bottom: 8px;
    word-wrap: break-word; /* Permet au texte long de passer à la ligne */
}
.chat-message .player-name {
    font-weight: bold;
    color: #f1c40f; /* Couleur jaune pour le pseudo */
}
.chat-message .message-text {
    color: white;
}

.chat-message .message-text-kiwiz {
    color: #c9c4ff;
}

/* --- 4. Zone de Saisie du Message --- */
#chat-input-area {
    padding: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align:left;
    position: relative; /* Indispensable pour positionner le sélecteur */
    display: flex;
    align-items: center;
}

#chat-input {
    width:calc(100% - 80px);
    margin-right:10px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px;
    border-radius: 5px;
}

.emote-trigger {
    cursor: pointer;
    font-size: 20px;
    padding: 0 8px 0 4px;
}

/* Le sélecteur d'emojis (fourni par la librairie) */
emoji-picker {
    position: absolute;
    bottom: 110%; /* Se positionne juste au-dessus de la barre de saisie */
    right: 0;
    z-index: 101;
}

#reconnect-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #e67e22; /* Orange */
    color: white;
    text-align: center;
    padding: 5px;
    z-index: 9999;
    display: none;
    font-size: 14px;
}

/* Conteneur principal du bloc "Mes Amis" */
    #mes_amis {
        margin-top: 20px;
        padding: 10px;
        /*background-color: rgba(0, 0, 0, 0.1);*/
        background-color:#3a3092;
        border-radius: 5px;
    }

    #mes_amis h3 {
        text-align: center;
    }

    /* Conteneur pour les avatars */
    #friends-list-container {
        display: flex;
        flex-wrap: wrap;
        gap: 8px; /* Espace entre les avatars */
        justify-content: center; /* Centre les avatars */
        min-height: 40px; /* Garde une hauteur minimale même si vide */
    }

    .no-friends {
    		color:#c9c4ff;
    		line-height:40px;
    }

    /* Style de chaque avatar individuel */
    .friend-avatar {
        position: relative; /* Pour positionner l'infobulle */
        width: 40px;
        height: 40px;
        cursor: pointer;

        /* Animation d'apparition/disparition */
        opacity: 0;
        transform: scale(0.5);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .friend-avatar.visible {
        opacity: 1;
        transform: scale(1);
    }

    /* L'image de l'avatar */
    .friend-avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        cursor: not-allowed;        
    }

    /* Style spécifique quand l'ami est en jeu */
    .friend-avatar.in-game img {
        cursor: pointer;
    }

/* --- 5. Styles SPÉCIFIQUES au Mobile Responsive (quand on est en jeu) --- */
@media (max-width: 767px) {
    body.page_sommaire, body.page_sommaire_client {
        padding-top:0px;
    }

		#entete_multiplayer {
            background-color: #483cb7;
    }
        
    #nbconn {
    	border-radius:0;
    	background-color:#5b4fcb;
    	margin:0;
    }
    
    #fil_ariane {
    	display:none;
    }

      #question-text-3 {
    font-size: 18px;
    margin-top:0px;
    }   

}

@media (min-width: 768px) and (max-width: 991px) {

}

@media (max-width: 991px) {
  		
        		
    /* ...sauf le contene chat */
    #volet > #chat-container {
        display: flex !important;
    }
    
    /* La classe .chat-in-game est ajoutée par JavaScript */
    #chat-container {
        position: fixed; /* Le chat se colle au bas de l'écran */
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10000; /* S'assure qu'il est au-dessus des autres éléments */
        margin-top: 0;
        border-radius: 0; /* Pas de coins arrondis en plein écran */
        max-width: none; /* Prend toute la largeur */
    		pointer-events: none;
    }
    
    
		#chat-container {
			background-color: rgba(0, 0, 0, 0.4); /* Fond semi-transparent */
		}

    /* On ajuste la hauteur pour le mobile en jeu */
    #chat-container #chat-messages {
        height: 90px;
    }
    
    #chat-container #chat-input-area {
        pointer-events: auto;
    }
    
    #chat-input {background-color:#483CB7;}        		
        		
        		
        		.game_categorie {
    					margin:6px;
    				}
    				
        	  #pseudo-form {
            max-width: 100%;
            padding: 0 15px;
		        }
		        #pseudo-input {
		            font-size: 12pt;
		        }
		        #pseudo-submit {
		            
		        }
		        #pseudo-error {
		            font-size: 10pt;
		        }
        
        		.loading-dots {
			        font-size: 12px; /* Ajusté pour mobile, aligné avec s16pt réduit */
			        width: 18px;
    				}
    
        		.waiting-center {
							font-size:15pt;
						}
						
		        .multi_main-content {
			        position: relative; /* Référence pour mobile */
			        padding: 0px 15px 0px 10px;
			        /*min-height: 650px !important; */
		    		}
        
        		#quizz-nom {
        			font-size: 10pt;
        		}
        		.salon-nom {
        		font-size: 32pt;
        		}
            .answer-btn {
                font-size: 10pt;
                padding: 8px;
                min-height: 40px;
            }
            
            #question-text {
                font-size: 16pt;
            }
            #answers {
                max-width: 100%;
                background-color: #5B4FCB;
            }
            #conteneur #contenu #texte {
							padding-bottom:0px;
						}
            #timer-bar-container {
                max-width: 100%;
            }
            .multi_header {
	            padding: 10px 13px 10px 10px;
        		}
        		.answer-btn {
            padding: 8px 10px;
         		}
         		#resume_membre, #mes_amis {
         			display:none;
         		}
}

@media (min-width: 991px) {
	#contenu {
		margin-top:-20px!important;
	}
	
	#classement_mobile {
		display: none;
	}
	
	H1.white3 { margin-top:20px; }
	
	#texte {
	margin-top:-5px;
}
}
 {
	margin-top:-5px;
}
}