/*le style du jeu !*/

html, body {
	/*font-size: 16px; /* valeur de base d'1 rem */
	font-size:1.333vw;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	/*font-family: 'Courier New',Courier,monospace;*/	
	/*background-color:#ab96fb;*/
	color:black;
	margin: 0; padding: 0;
    width:100%; height:100vh;
}

/* pour faciliter les paddings... */
*, *:before, *:after {/* * c'est TOUS les éléments de la page... */
    box-sizing: border-box; /* règle les ennuis de padding */
    outline:none; /* pas de cadre de sélection */
}

@font-face {
    font-family: 'Arvo';
    src: url('../fonts/Arvo.woff2') format('woff2'),
         url('../fonts/Arvo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arvo';
    src: url('../fonts/Arvo-Bold.woff2') format('woff2'),
         url('../fonts/Arvo-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/* css reset minimal */

a { color:red; text-decoration: none; } /* les liens */

ul { padding:0; } /* listes à puce */
li { padding:0; list-style: none; }






body { overflow:hidden; /* format fixe → pas de barres de scroll */ 
	/* centrer le jeu quand il est en plein écran par ex */
	display: flex; justify-content: center; align-items: center;}

main, aside.end-screen { 
	/*width:1200px; height:675px; */
	width:100vw;
	aspect-ratio: 16 / 9;

	overflow:hidden; /* coupe ce qui dépasserait */
	position:relative; /* pour "retenir" tout ce qu'on va mettre en absolute à l'intérieur de <main> */
	
	background:#AB96FB; 
	color:white;
}

/* en fait presque tout est en absolute */
.calque, .calque img, .calque div { position:absolute; left:0; top:0; width:100%; }

#background img { width:100%; }

/* les choix multiples */
/* ça peut être cool que les textes de choix se centrent et s'ajustent automatiquement */
#choix { top:auto; bottom:4.16vw; /* ça on le place par le bas*/ 
	width:100%;
	background:rgba(255,0,0,0); /* pour voir la zone pendant les tests */

	/*pour centrer la zone de choix (le ul) */
	display:flex; justify-content: center;
}
#choix ul { background:rgba(255,255,255,0.9); padding:2.08vw; opacity: 0.9;
	border-width:3px;
 	border-style:solid;
	border-radius:1.5vw; /* coins ronds  
	display:inline-block; /* pour que la largeur s'adapate aux textes */
	
	/*largeur max de la zone texte*/
	max-width:75vw;
	min-width: 70vw;
}
#choix li { color:#3d3d3d; font-size:1rem;
	font-family: Arvo;
	font-weight: normal;
    font-style: normal;
	padding:0.41vw; /* gonfler la ligne ça agrandit aussi la zone cliquable */
	cursor:pointer; /* signbaler que c'est cliquable */ 
	margin: 1px;
}

#choix li:hover { background: rgb(255, 105, 85); color: rgba(255,255,255,1);
}

#choix li:hover span { color: white;
}

#choix li span { color:#3e34a8; 
	font-family: Arvo;
	font-weight: bold;
    font-style: normal;

}


/* les bulles */
/* possibles d'en inventer de nouvelles */
#bulles .gauche { left: 6vw; top: 17vw; }
#bulles .droite { left: 70vw; top: 22.5vw; }
#bulles .haute { left:32vw; top:20vw; font-style: italic; width:35vw; text-align:center; }
#bulles .bas { left:35.8vw; top:26.6vw; }
#bulles .bas_gauche { left:28vw; top:20vw; }
#bulles .fin { left:35.8vw; top:13vw; }
#bulles .droite2 { left: 63vw; top: 22.5vw; }
#bulles .gauche_commerage { left: 13vw; top: 22vw; }
#bulles .droite_commerage { left: 65vw; top: 20vw; }
#bulles .haute_commerage { left:45vw; top:10vw; }
#bulles .sms { left:32vw; top:20vw;}

#bulles div { width:26vw; /* sinon ça écrase les textes... */ }
#bulles p { background:rgba(255,255,255,0.8); color:#3d3d3d;
	border-width:3px;
 	border-style:solid;
 	border-color:rgba(255,255,255,1);
	font-family: Arvo;
	font-weight: normal;

	display:inline-block; /* pour que la largeur de la bulles'adapte au texte
	sachant que ça n'ira pas au-delà de la largeur de la div, indiqué ci-dessus */
	padding:2vw;
	border-radius:1.25vw; }



/* l'écran de fin de chapitre est caché par défaut */
aside.end-screen { 
	display:none; /* pour la masquer au départ */
	position:absolute; /* pour passer par-dessus le reste */

	/*là je la place ni'mporte comment */

	width:100%; height:auto;
	padding:2vw;
}


/* la homepage */
/* est identifiée par la classe 'homepage' */

#disclaimer { background:rgba(255,255,255,0.8); color:#3d3d3d;
	border-width:0.5vw;
 	border-style:solid;
 	border-color:rgba(255,255,255,1);
	font-family: Arvo;
	font-weight: normal;
    font-style: normal;
    text-align: center;
	border-radius:3.33vw;
	padding: 1.49vw 8.66vw 1.49vw 8.66vw }

#disclaimer2 { background:rgba(255,255,255,0.8); color:#3d3d3d;
	border-width:0.5vw;
 	border-style:solid;
 	border-color:rgba(255,255,255,1);
	font-family: Arvo;
	font-weight: normal;
    font-style: normal;
    text-align: center;
	border-radius:3.33vw;
	padding: 1.49vw 8.66vw 1.49vw 8.66vw;
	width: 80%;
	position: absolute;
	top: 12%;
	right: 10%;
}

#disclaimer2 p {
	font-size: 12px;
	text-align: left;
}

#disclaimer2 h2 {
	margin: 0;
}

#disclaimer2 h3 {
	margin: 5px;
}

#recommencer {
	color: #b095ea;
	transition: all 0.2s ease-out;
}

#recommencer:hover {
	color: #6922E2;
}

#disclaimer2 a {
	color: #6922E2;
}

#suivant {
	transition: all 0.2s ease-out;
}

#suivant:hover {
	transform: scale(1.1);
}

@media screen and (max-width: 900px) {

#disclaimer2 p {
    font-size: 9px;
}

}

main.homepage {
	background-color: #372F6B;
	background-size: contain;
	background-repeat: no-repeat;
	display: flex; 
	/* je centre la div */
	justify-content: center; align-items: center;
}

main.homepage p { 
	width: 27.9vw;
	font-size: 1.449vw;
}

main.homepage h1{ 
	color: #251d5b;
}

main.homepage a{ 
	color: #8805ff;
}


/* media-queries : altérer le style sous certaines conditions seulement */
/*@media screen and (max-width:600px){}*/