/* Inclure la police Roboto dans votre feuille de style */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');


/*--------------------
Body
--------------------*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	min-height: 450px;
	margin: 0;
	background: #00204e;
	color: #fff;
	font-family: 'Roboto Condensed', sans-serif;

}

/* Quand le quiz est fini, le logo ne peut plus réapparaître */
body.quiz-ended #logo {
  display: none !important;
  opacity: 0 !important;
}

h1{
	font-size: 2em;
    font-weight: bold;
}

h2{
	font-size: 1.5em;
    font-weight: bold;
}

@font-face {
    font-family: "Convection EXB";
    font-display: swap;
    src: url("fonts/Convexb.ttf") format("truetype")
}

/* L'image seule en fond */
#background-image{
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("img/background.jpg") center/cover no-repeat;
}

/* L’overlay gradient qui fade */
#background-image::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(34 43 88 / 80%) 0%, rgb(34 43 88) 80%);
  opacity: 0.4;                       /* invisible au départ */
  transition: opacity 2s ease;      /* ← transition 3 secondes */
}

/* État activé : overlay visible */
#background-image.fadeBG::after{
  opacity: 1;                     /* ajuste l’intensité si besoin */
}


.answers li a img {
	max-height: 20vh;
}

.answers {
	font-size: 1.5em;
}

.imageInQuiz {
    display: flex !important;
    justify-content: center !important;
}




/* Classe pour rendre l'overlay plus opaque */
.overlay-more-opaque {
    background: #00204ed6;
}


100px;
}

#titre{
	position: absolute;
    top: 2rem;
    width: 50%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.et_pb_text_0 {
    line-height: 3.7rem;
    font-family: 'Convection', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 700;
    font-size: 2.78rem;
    line-height: 3.7rem;
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
	    text-align: center;
		position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
}

.et_pb_section_1_tb_header.et_pb_section {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    background-color: RGBA(255,255,255,0)!important;
}

.text-number {
    font-size: 2.77778rem;
    vertical-align: top;
}

.text-sup {
    font-size: 2rem;
    vertical-align: top;
    line-height: 1;
}

.text-congres {
    text-transform: uppercase;
    font-size: 4.33333rem;
}

.text-national {
    font-size: 6rem;
    text-transform: uppercase;
}

.text-sp {
    font-size: 1.94444rem;
    line-height: 4rem;
    vertical-align: super;
}
.text-des {
  vertical-align: top;
  line-height: 4rem;


}

@media (min-width: 981px) {
    .text-sp {
        font-size: 2.78rem;
    }
}

.text-sp {
    font-size: 2.78rem;
    line-height: 4rem;
    vertical-align: super;
}

@font-face {
    font-family: "Convection";
    font-display: swap;
    src: url("fonts/Conv.ttf") format("truetype")
}

@font-face {
    font-family: "Conv bold";
    font-display: swap;
    src: url("fonts/Convb.ttf") format("truetype")
}

@font-face {
    font-family: "Convection EXB";
    font-display: swap;
    src: url("fonts/Convexb.ttf") format("truetype")
}
.text-sp img {
    max-width: 20.5rem;
}

img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 981px) {
    .text-sp img {
        max-width: 14.5rem;
    }
}


@media (max-width: 768px) {

	
}
	/* Style pour les boutons carrés */
        .square-button2 {
            width: 50px;
            height: 50px;
            background-color: #e31f26;
            color: white;
            border: none;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            cursor: pointer;
			right: 20px;
			position: fixed;
        }
		
		
		
		 /* Bouton "Actualisation" à l'extrême droite */
        #btn-fullscreen {
            right: 20px;
        }

        /* Bouton "Retour" à droite */
        #btn-retour {
            right: 160px; /* Espacement entre les deux boutons */
        }
		
		#btn-back {
            bottom: 20px; /* Espacement entre les deux boutons */
        }
		
		#btn-logout {
            bottom: 90px; /* Espacement entre les deux boutons */
        }

        /* Bouton "Actualisation" à l'extrême droite */
        #btn-actualisation {
            right: 90px;
        }
		
		#btn-scroll {
			bottom: 160px; /* Espacement entre les deux boutons */
		}
		
		

        /* Optionnel : Effet hover pour changer de couleur */
        .square-button2:hover {
            background-color: #b51117;
        }
		
		.section {
            display: flex;
            align-items: center;
            background-color: #f8f9fa;
        }

        /* Style pour l'image, elle sera à gauche */
        .section img {
            height: auto;
            margin-right: 20px; /* Espace entre l'image et le texte */
        }

        /* Conteneur pour le texte à droite de l'image */
        .text-container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 100%;
			align-items: flex-end;
			position: absolute;
			right: 0.9rem;
        }

        .text-top, .text-bottom {
			font-size: 20px;
			width: 80px;
			background-color: #ffffff52;
			margin: 0.5rem;
			border-radius: 10px;
			text-align: center;
			cursor: pointer;
			height: 80px;
        }
		
		.text-top i {
			font-size : xx-large;
		}
		
		.Bt_jsp1, .Bt_jsp2, .Bt_jsp3, .Bt_jsp4{
			display: flex;
			align-content: center;
			justify-content: space-evenly;
			align-items: center;
		}
		
		.Bt_jsp1:hover, .Bt_jsp2:hover, .Bt_jsp3:hover, .Bt_jsp4:hover{
			background : #fff;
		}
		
		
		.container-fluid{
			position: absolute;
			bottom: 0;
		}
		
		.cell1 {
			background-color: #d5d4d3;
		}
		
		.cell2 {
			background-color: #f3c01a;
		}
		
		.cell3 {
			background-color: #f27331;
		}
		
		.cell4 {
			background-color: #42b549;
		}
	

	
	

	
	
	.Logo_congres {
        height: 7rem;
		position: absolute;
		padding: 1rem;
		right:0;
    }
	
	.Logo_congres_petit {
        height: 6rem;
		position: absolute;
		padding: 1rem;
		left:0;
    }
	
	.Logo_congres2 {
        max-width: 300px;
		position: absolute;
		top: -9rem;
		width: 50%;
		left: 50%;
		transform: translateX(-50%);
    }
	
	.Logo_rallye {
        height: 7rem;
		position: absolute;
		padding: 0rem;
		left:0;
    }
	
	.bandeau{
		background: #212d587d !important;
	}

@media (max-width: 480px) {

	
}

.answers a {
	display: block;
	padding: 1em 1em;
	margin-bottom: 1em;
	background: #fff;
	border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.answers a.correct {
    background: #42b549 !important;
}

.answers a.incorrect {
    background: #e31f26 !important;
	
}

.question {
	text-align: center;
	font-size: 2em;
}

.quiz-start-screen {
	top: 4rem;
	position: fixed;
}

.questions {
	margin-top: 12rem;
}

.questions p {
	padding: 2rem;
	color: #fff;
	    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.quiz-controls {

	border-radius: 0;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	margin-bottom: 0;
}


.quiz-counter {
	top: 8rem;
	position: fixed;
	width:50%;
	left: 0;
	transform: translateX(50%);
}

.quiz-container {
	padding: 0;
	max-width: 90vw;
	margin: 1em auto;
}

.participant-container {
	background: #fff;
	color: #fff;
	height: 7rem;
	position: fixed;
	top: 0;
	width: 100vw;
}

#infos {
	line-height: 3rem;
}

#participant {
	padding-left: 1rem;
	float: left;
	color: #ef4036;
    font-weight: bold;
	display: none;
}

#quiznum {
	top: 2rem;
    position: fixed;
    width: 50%;
    left: 0;
    transform: translateX(50%);
    text-align: left;
}

.quiz-results {
    color: #fff;
    margin-top: 0;
    font-size: 2em;
	font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
	background: #e31f26;
    padding: 2rem;
    border-radius: 1rem;
}

#bt_start {
	display: none;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}


#timer {
	text-align: center;
	font-size: xxx-large;
	margin-top: 5rem;
	position: fixed;
	left: 50%;
	top: 7rem;
	transform: translate(-50%, -50%);
	color: #ffffff;
	font-weight: bold;
}

#mix_jsp1,#mix_jsp2,#mix_jsp3,#mix_jsp4 {
	font-size: 2rem;
}

#mix_jsp1 {
	background: #d5d4d3;
}

#mix_jsp2 {
	background: #f3c01a;
}

#mix_jsp3 {
	background: #f27331;
	color: #fff;
}

#mix_jsp4 {
	background: #42b549;
	color: #fff;
}

.quiz-buttons a{
	background : #fff;
}

.quiz-container .quiz-button, .btn-dark {
	display: inline-block;
	padding: 0.5em 3em;
	border-radius: 0.4rem;
	border-color: #ef4036;
	background : #ef4036;
}

.quiz-button:hover, .btn-dark:hover {
	background : #00204e;
	border-color: #00204e;
}

.quiz-response {
	margin-top: 1rem;
    margin-bottom: 0rem;
}

.quiz-buttons{
	padding: 1rem;
}

.quiz-next-btn{
	padding: 1rem;
}

quiz-response {
    margin-top: 1rem;
    margin-bottom: 0rem;
}

a,
a:hover {
	text-decoration: none;
	/* color: #000; */
}


.btn-num {
	padding: 20px 40px;
	font-size: 20px;
	width: 33.33%;
}

.input-num {
	
	height: 50px;
	width: 100%;
	/* L'input occupe toute la largeur */
	box-sizing: border-box;
}

.keyboard-container {
	padding: 0;
	/* Enlève le padding par défaut pour aligner l'input et les boutons */
}

.formulaire {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
	width: 75%;
	padding: 2rem;
    border-radius: 1rem;
	border: 2px solid #fff;
}

#monFormulaire {
	margin-top: 1rem;
}

.espace{
margin-top:1rem;
}

#submit{	
	width: 50%;
    transform: translateX(50%);
	margin-top: 2rem;
}

.quiz-controls {
	background: #00204e8a;
	z-index: -1;
}

.self {
background:#e31f26 !important;
}

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #ef4036;
}

@media (max-width: 600px) {
	.formulaire {
	  
		width: 80vw;
	}
	
	#participant, #quiznum {  
		color: #ffffff;
		margin-top: 3rem;
	}
	
	.quiz-counter {
		top: 7rem;
	}
	#timer {   
		top: 7rem;
	}
	
	.questions {
		margin-top: 13rem;
	}
	
	
	
	.quiz-results {
		font-size: 1em;
		margin-top: 7rem;
	}

}

/* Mise en page des leaderboards en 4 colonnes */
.leaderboard-section {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 20px;
	display: flex;
    justify-content: center;
    align-content: space-around;
}

#quizz_jsp1 i {
	color: #8e8c8b;
}

#quizz_jsp2 i {
	color: #b48f1c;
}

#quizz_jsp3 i {
	color: #b35a2c;
}

#quizz_jsp4 i {
	color: #39883d;
}

#leaderboard1,#leaderboard1 .rank-circle{
	background-color: #fff;
	color: #000000;
}

#leaderboard2,#leaderboard2 .rank-circle{
	background-color: #f3c01a;
	color: #000000;
}

#leaderboard3,#leaderboard3 .rank-circle{
	background-color: #f27331;
	color: #fff;
}

#leaderboard4,#leaderboard4 .rank-circle{
	background-color: #42b549;
	color: #fff;
}

/* Style pour le cercle du classement */
.rank-circle {
    width: 25px;
    height: 25px;
    background-color: #ef4036; /* Couleur du cercle */
    color: white; /* Couleur du texte à l'intérieur */
    border-radius: 50%; /* Pour rendre l'élément circulaire */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em; /* Taille du texte */
    font-weight: bold;
    margin-right: 10px; /* Espace entre le cercle et le texte */
}

.leaderboard {
    /*width: 80vw;  Largeur de chaque leaderboard pour tenir en 4 colonnes avec des espaces */
    
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 3rem;
	    max-height: 664px;
    overflow-y: auto;
	margin-top: 9rem;
	    width: 80vw;

}

.leaderboard h1 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    text-align: center;
	color: #212d58;

}

.leaderboard ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Style des items du leaderboard */
.leaderboard ol li {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Espace entre le contenu à gauche et les éléments à droite */
    margin: 5px 0;
    padding: 10px;
    background-color: #ccc;
    border-radius: 20px;
}

/* Limiter la taille du texte dans <mark> */
.leaderboard ol li mark {
    white-space: nowrap;         /* Empêche le retour à la ligne */
    overflow: hidden;            /* Cache le texte qui dépasse */
    text-overflow: ellipsis;     /* Ajoute trois petits points (...) */
    display: inline-block;       /* Nécessaire pour que l'overflow fonctionne */
    /*max-width: 130px;             Ajustez la largeur maximale selon vos besoins */
    vertical-align: middle;      /* Alignement vertical du texte */
}

/* Espace entre les éléments <small> et alignement à droite */
.leaderboard ol li .small-container {
    display: flex;
    align-items: center;
    margin-left: auto; /* Aligne les éléments à droite */
}

.leaderboard ol li small {
    margin-left: 3.5rem; /* Ajoute un espace entre les éléments small */
    display: inline-block;
}

.mark, mark {
    padding: .2em;
    background-color: inherit;
    color: white;
	
}

.small, small {
    font-size: 80%;
    font-weight: 400;
    line-height: 1.9rem;
	color: white;
}

/* Responsiveness pour les petits écrans */
@media (max-width: 768px) {
    .leaderboard {
        width: 45%; /* Réduire la largeur pour deux colonnes sur petits écrans */
    }
}

@media (max-width: 480px) {
    .leaderboard {
        width: 100%; /* Utiliser 100% de la largeur pour des leaderboards empilés sur très petits écrans */
    }
}

.text-center {
    text-align: center;
    margin-top: 20px;
}

.btn-primary {
    background-color: #e31f26;
    border-color: #e31f26;
    color: white;
    font-size: 1.2rem;
}

.btn-primary:hover {
    background-color: #b51117;
    border-color: #b51117;
}



/* Bouton pour afficher/masquer les classements */
.toggle-button-container {
	width: 100%;
    position: fixed;
    margin-top: 0;
    margin-bottom: 0;
    z-index: 50;
    height: 7rem;
    display: flex;
    align-content: stretch;
    justify-content: center;
    align-items: center;
	top: 0;
}

/* Centrer le bouton */
#toggle-rankings, #btn-fullscreen, #start, #btn-params, #btn-questions  {
font-size: 1.2rem;
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #00204e;
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    height: 3.4rem;
    margin: 5px;
}

#btn-params, #btn-questions{
	    opacity: 0.5;
}

label {
    font-size: xx-large;
	font-weight: bold;
}

#toggle-rankings i, #start i {
    margin-right: 10px; /* Espace entre l'icône et le texte */
}



/* Effet hover pour le bouton */
#toggle-rankings:hover, #btn-fullscreen:hover, #start:hover, #btn-params:hover, #btn-questions:hover {
    background-color: #e31f26; /* Couleur du bouton au survol */
	opacity: 1;
}


.leaderboard-section.hidden {
    visibility: hidden; /* Rend la section invisible sans retirer le layout */
    opacity: 0; /* Transition de l'opacité pour un effet de disparition */
}

.hidden { display: none !important; }

.Logo_congres2.hidden {
    visibility: hidden; /* Rend la section invisible sans retirer le layout */
    opacity: 0; /* Transition de l'opacité pour un effet de disparition */
}

/* Le parent de référence pour l'absolu */
#page-container { position: relative; }

/* === Bandeau === */
.ticker{
  /* Réglages */
  --px-per-sec: 120;  /* vitesse (pixels/seconde) → augmente pour aller plus vite */
  --gap: 3s;          /* pause entre 2 passages */

  position: fixed;             /* change en fixed si tu veux collé à l'écran */
  left: 0; right: 0; bottom: 0;
  width: 100%;
  background: #e53935;
  color: #fff;
  z-index: 9999;
  padding: .65rem .5rem;
  overflow: hidden;
}

.ticker__viewport{
  position: relative;
  width: 100%;
  overflow: hidden;               /* masque hors écran */
}

.ticker__track{
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  /* Style texte (ta font Convection) */
  font-family: "Convection EXB", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: clamp(14px, 2.1vw, 18px);
}

:root{
  --num-radius: 0.75rem;
  --num-pad: .6rem;
  --num-gap: .25rem;
  --num-font: 16px;
  --num-border: 1px solid hsl(0 0% 85%);
  --num-bg: #fff;
  --num-btn-bg: hsl(0 0% 98%);
  --num-btn-bg-hover: hsl(0 0% 94%);
  --num-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06);
  --num-width: 10rem;
}

.num-field{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.num-label{ font-weight: bold; }

.num-input{
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  border: var(--num-border);
  border-radius: var(--num-radius);
  background: var(--num-bg);
  box-shadow: var(--num-shadow);
  overflow: hidden;
  width: var(--num-width);
}

.num-btn{
  border: 0;
  background: var(--num-btn-bg);
  padding: 0 var(--num-pad);
  font-size: 1.2rem;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, transform .05s ease;
}
.num-btn:hover{ background: var(--num-btn-bg-hover); }
.num-btn:active{ transform: scale(.96); }
.num-decr{ border-right: 1px solid hsl(0 0% 88%); }
.num-incr{ border-left: 1px solid hsl(0 0% 88%); }

.num-value{
  width: 100%;
  border: 0;
  padding: .55rem .75rem;
  font-size: var(--num-font);
  text-align: center;
  outline: none;
  background: transparent;
}

@keyframes swingIn {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(6deg); }
  40%  { transform: rotate(-6deg); }
  60%  { transform: rotate(4deg); }
  80%  { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

.swing-in {
  animation: swingIn 1s ease-in-out;
}

/* =========================
   📱 MOBILE (max 768px)
========================= */
@media (max-width: 768px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }

  #timer {
    font-size: 2rem;
    top: 5rem;
  }

  .quiz-results {
    width: 90%;
    font-size: 1.3rem;
    padding: 1rem;
  }

  .questions {
    margin-top: 9rem;
  }

  .quiz-container {
    max-width: 95vw;
    padding: 0.5rem;
  }

  .formulaire {
    width: 90vw;
    padding: 1rem;
    font-size: 1rem;
  }

  .leaderboard {
    width: 90vw;
    margin-top: 5rem;
    font-size: 0.9rem;
  }

  .square-button2 {
    width: 45px;
    height: 45px;
    font-size: 1rem;
  }
}

/* =========================
   📱 PETITS TÉLÉPHONES (max 480px)
========================= */
@media (max-width: 480px) {
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.1rem; }

  #timer {
    font-size: 1.8rem;
    top: 4rem;
  }

  .quiz-results {
    font-size: 1.1rem;
    padding: 0.8rem;
  }

  .answers a {
    padding: 0.8em;
    font-size: 1rem;
  }

  label {
    font-size: 1.2rem;
  }

  .btn-num {
    padding: 10px;
    font-size: 1rem;
  }

  .ticker__track {
    font-size: clamp(12px, 4vw, 14px);
  }
}