body{
	font-family: Arial, sans-serif;
	font-size: 1em;
	background-color: #F5E2DE;
}

#bravo, #reinitialiser{
	display: none;
	margin: auto;
	margin-bottom: 10%;
	text-align: center;
}

#bravo h2, #reinitialiser h2{
	color: white;
	background-color: #3C4157;
	padding: 1em 2em;
	display: inline-block;
}

#reinitialiser h2{
	background-color: #3C4157;
}



/* --- Affichage du menu --- */

#presentation{
	text-align: center;
}

#menu_niveaux{
	display: flex;
	align-items: flex-start; /* Aligne les enfants en haut */
	flex-wrap: wrap; /* Permet le retour à la ligne */
}

#menu_niveaux table{
	cursor: pointer;
	color: white;
	background-color: #3C4157;
	border-radius: 0.5em;
	box-shadow: 0 0.75vw 1.5vw rgba(0, 0, 0, 0.35);
	text-align: center;
	width: 30%;
	margin: 1.5%;
	
	tr td{
		padding: 5px;
	}
	
	tr:first-child td{
		font-size: 1.35em;
		padding-top: 10px;
		padding-bottom: 5px;
	}
	
	tr:last-child td{
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	tr.jouer td {
		padding-top: 10px;
	}
	
	tr td i{
		color: #BFDFDF;
	}
	
	tr.jouer td span{
		font-size: 1.35em;
		padding: 2px 10px;
		color: #BFDFDF;
		border: 1px solid #BFDFDF;
		border-radius: 50px;
	}
}

#menu_niveaux table:last-child{
	margin: 1.5% auto;
}

#menu_niveaux table:hover{
	background-color: rgb(73, 81, 101);
}


#menu_niveaux table:hover tr td span{
	color: white;
	background-color: rgb(96, 107, 125);
}



/* --- Afficher menu en JEU --- */

#menu_jeu{
	margin-top: 50px;
	position: sticky;
	top: 0;
	margin-left: -4%;
	width: 108%;
}

#menu_jeu table{
	width: 100%;
	
	color : white;
	background-color: #3C4157;
	
	text-align: center;
	font-size: 1.2em;
	box-shadow: 0 1.5vw 1vw -1vw rgba(0, 0, 0, 0.25);
	
	td{
		padding: 5px;
	}
	
	td:first-child:hover{
		cursor: pointer;
		background-color: rgb(96, 107, 125);
		border-radius: 5px;
	}
	
	span{
		font-weight: bold;
	}
}





/* --- Affichage des cartes retournées --- */


#titre_carte_ret{
	margin-top: 10vh;
}

#cartes_retournees{
	display: flex;
	align-items: flex-start; /* Aligne les enfants en haut */
	flex-wrap: wrap; /* Permet le retour à la ligne */

	td.texte_carte_ret {
		text-align: justify;
	}
}

.tab_carte_ret{
	border: 2px solid red; /* Rouge quand nouvelle carte, puis #3C4157*/
	border-radius: 1em;
	box-shadow: 0 0.75vw 1.5vw rgba(0, 0, 0, 0.35);
	width: 100%;
	margin-top: 2vw;
	background-color: white;
	border-spacing: 0;
	margin-bottom: 5vw;
}

.div_carte_retournee{
	width: 45%;
	margin-right: 5%;
	display: inline-block;
}

.numero_carte_ret{
	color: white;
	background-color: #3C4157;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
	font-size: 1.75em;
	padding: 2%;
}

.texte_carte_ret{
	padding: 2vw;
	padding-bottom: 0;
	line-height: 1.25em;
}

.liste_choix{
	padding: 0 2vw;
}

.liste_choix table.choix_choix{
	border-width: 0;
	margin-bottom: 1.5vw;
	border-spacing: 0 10px;
	width: 100%;
	
	th, td{
		padding: 5px;
		border: 1px solid #8D9397;
		border-radius: 5px;
	}
	
	tr{
		margin: 15px;
		cursor: pointer;
		background-color: #F2FCFC; 
	}
	
	tr.survole:hover{
		background-color: #BFDFDF; 
	}

	th{
		padding-right: 0;
		vertical-align: top;
		width: 20%;
		border-right-width: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	td{
		text-align: left;
		padding-left: 0;
		border-left-width: 0;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
}
.points_negatifs, .points_positifs{
	font-size: 1.25em;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}
.points_positifs{
	color: green;
}

.points_negatifs{
	color: red;
}



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

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

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

#a_propos{
	p.centrer{
		text-align: center;
	}
	
	div{
		background-color: rgba(255, 255, 255, 0.75);
		border-radius: 10px;
		padding: 5px 15px;
		margin-bottom: 50px;
	}
}



/* Style pour le mode portrait */
@media (max-aspect-ratio: 1/1) {
	body {
		margin: 5%;
	}

	.div_carte_retournee{
		width: 100%;
		margin-right: 2%;
	}
}


/* Style pour le mode paysage */
@media (min-aspect-ratio: 1/1) {
	body {
		margin: 5%;
	}
}

/* Style pour le mode paysage */
@media (min-aspect-ratio: 1.5/1) {
	.div_carte_retournee{
		width: 23%;
		margin-right: 2%;
	}
}