@font-face {
    font-family: "PatrickHand";
    font-style: normal;
    font-weight: 400;
    src: url(PatrickHand-Regular.ttf) format('truetype');
}


body{
	font-family: Arial;
	background-color: #F7F7F7;
}

h1, h2, h3{
    font-family: "PatrickHand";
}

span.police{
	font-size: 1.22em;
    font-family: "PatrickHand";
}

xmp{
	font-size: 1.25em;
	margin-left: 3%;
	padding: 5px;
	padding-left: 5%;
	border-left: 2px dotted grey;
	width: 100%;
	max-width: 100%;
}

	
h1{
	font-size: 4em;
	margin-bottom: 0;
	text-align: center;
}

.logo_titre{
	width: 50px;
}

h2{
	margin-left: 5%;
}

#liste_questions, #a_propos, #info_jeu{
	margin-left: 10%;
	margin-right: 10%;
}



#afficher_points{
	position: sticky;
	top: 0;

	background-color: #F7F7F7;
	box-shadow: 0 0.15vw 2vw rgba(0, 0, 0, 0.2);
	
	margin: 2em -1.5vw 40px -1.5vw;
	padding: 5px;
	
	width: 102%;
	text-align: center;
}

.logo_titre_points1{
	width: 30px;
	position: absolute;
	margin-left: -40px;
}

.logo_titre_points2{
	width: 30px;
	position: absolute;
	margin-left: 10px;
}




/* --- Questions --- */


#liste_questions{
	background-color: white;
	box-shadow: 0 0.75vw 1.5vw rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	
	padding: 5%;
	margin-bottom: 4em;
	
	.div_question:nth-child(6n-5){ /* Bleu */
		th{
			background-color: #B6F5F8;
			color: #2A696C;
		}
		th, td{
			border-color: #8ECDD0;
		}
	}
	
	.div_question:nth-child(6n-4){ /* Violet */
		th{
			background-color: #E8B5F8;
			color: #5C296C;
		}
		th, td{
			border-color: #C08DD0;
		}
	}
	
	.div_question:nth-child(6n-3){ /* Rouge */
		th{
			background-color: #FEBEBF;
			color: #723233;
		}
		th, td{
			border-color: #D69697;
		}
	}
	
	.div_question:nth-child(6n-2){ /* Orange */
		th{
			background-color: #FDE1C6;
			color: #71553A;
		}
		th, td{
			border-color: #D5B99E;
		}
	}
	
	.div_question:nth-child(6n-1){ /* Jaune */
		th{
			background-color: #FCFBB8;
			color: #706F2C;
		}
		th, td{
			border-color: #D4D390;
		}
	}
	
	.div_question:nth-child(6n){ /* Vert */
		th{
			background-color: #C5F7C2;
			color: #396B36;
		}
		th, td{
			border-color: #9DCF9A;
		}
	}
}

.div_question{
	width: 100%;
	max-width: 100%;
	margin-bottom: 2em;
	padding-top: 0.5em;
}


.table_questions{
	border-spacing: 0;
	width: 100%;
	
	span.code{
		font-family: monospace;
		font-size: 1.25em;
		padding: 0 5px;
	}
	
	th, td{
		padding: 5px 10px;
		border: 1px solid black;
	}
	
	th{
		background-color: black;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	
	td{
		border-top-width: 0;
		border-bottom-width: 0;
	}
	
	tr:last-child td{
		color: red;
		border-bottom-width: 1px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	
	tr:nth-child(2) td{
		padding-top: 10px;
		padding-bottom: 20px;
	}
	
	tr:nth-child(4) td{
		padding-left: 20%;
	}
}


.table_qcm{
	
	td, 
	tr:last-child td, 
	tr:nth-child(2) td, 
	tr:nth-child(4) td{
		color: black;
		background-color: white;
		border-width: 0;
		padding: 10px 40px 0 10px;
	}
	
}




/* --- Confetti --- */


/* Source : https://code-garage.com/blog/creer-une-explosion-de-confettis-en-js-en-quelques-secondes */
#confetti-canvas {
  position: fixed; 
  z-index: 99999; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  pointer-events: none;
}

#texte_confetti{
	font-size: 3em;
	position: fixed;
	top: 15%;
	left: 0;
	width: 100%;
	display: none;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 1s;
	transition-delay: 0s;
}

#texte_confetti.visible {
	display: inline;
	opacity: 1;
}



/* --- Affichage de A propos --- */

.mini_logo{
	height: 20px;
}
.petit_logo{
	height: 40px;
}

.lien_discret{
	color: black;
	font-weight: bold;
	text-decoration: none;
}

#a_propos, #info_jeu{
	
	p.centrer{
		text-align: center;
	}
	
	div{
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0 0.75vw 1.5vw rgba(0, 0, 0, 0.25);
		border-radius: 10px;
		padding: 5px 15px;
		margin-bottom: 30px;
	}
}







/* Style pour le mode paysage++ */
@media (min-aspect-ratio: 1.5/1) {
	
	#texte_confetti{
		top: 5%;
		left: 0;
		width: 40%;
		margin-left: 30%;
	}
}




/* Style pour le mode paysage */
@media (min-aspect-ratio: 1/1) {
	
	#texte_confetti{
		top: 5%;
		left: 0;
		width: 60%;
		margin-left: 20%;
	}
}




/* Style pour le mode portrait */
@media (max-aspect-ratio: 1/1) {
	
	xmp{
		display: block; /* Affiche comme un bloc */
		white-space: pre-wrap; /* Conserve les sauts de ligne et permet le retour à la ligne automatique */
		word-wrap: break-word; /* Force le retour à la ligne si nécessaire */
	}
	
	#liste_questions, #a_propos, #info_jeu{
		margin-left: 5%;
		margin-right: 5%;
	}
}




/* Style pour le mode portrait-- */
@media (max-aspect-ratio: 1/1.25) {
	
	.table_qcm{
		
		tr{
			display: block;
		}
		td{
			display: block;
		}	
		
		td, 
		tr:last-child td, 
		tr:nth-child(2) td, 
		tr:nth-child(4) td{
			padding-left: 15px;		
		}
	}
	
	
	#liste_questions, #a_propos, #info_jeu{
		margin-left: 1%;
		margin-right: 1%;
	}
	
}