@charset "ISO-8859-1";


/*PARAMETRE INIT CSS COMPORTEMENT GENERAL*/
/*INIT VARIABLE*/
:root {
    --colorRose: #E40BC2;
}

/*INIT FONT FAMILY D IMPORT*/
@font-face {
    font-family: "Abeezee";
    src: url("../assets/fonts/ABeeZee-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "AbeezeeItalic" ;
    src: url("../assets/fonts/ABeeZee-Italic.ttf") format("truetype");
}

@font-face {
    font-family: "Allison";
    src: url("../assets/fonts/Allison-Regular.ttf") format("truetype");
}

/*CLASS GENERIQUE*/
.invisible {
	display: none;
}
/*FIN DE PARAMETRE CSS GENERAL*/


/*DEBUT MODAL AVERTISSEMENT*/
.modal {
	position: absolute;
	position: fixed;
	min-height: 150%;
	width: 100%;
	background-color: rgba(0,0,0,0.8);
	z-index: 80;
	display: none;
	justify-content: center;
}

#conteneur-accueil {
	width: 60%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 10%;
}

#box-accueil {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 50px;
}

#box-accueil > h2 {
	font-size: 5em;
	margin-bottom: 50px;
}

#box-accueil > p {
	font-size: 1.5em;
}

#box-btn {
	display: flex;
	justify-content: space-around;
	width: 80%;
}

#box-btn > button {
	border: solid 2px white;
	cursor: pointer;
	color: white;
	font-size: 1.2em;
	width: 35%;
	height: 60px;
	transition: 0.4s;
}

#btn-yes {
	background-color: rgba(0, 0, 0, 0.9);
}

#btn-no {
	background-color: rgba(0, 0, 0, 0.9);
}

#box-btn > button:hover {
	border:solid 2px var(--colorRose);
	font-size: 1.3em;
}

#box-about {
	display: flex;
	justify-content: end;
	width: 80%;
}

#box-about > a {
	margin-top: 50px;
	cursor: pointer;
	font-family: "AbeezeeItalic";
	font-size: 1.1em;
	color: var(--colorRose);
}

#box-about > a:hover {
	text-decoration: underline;
}
/* FIN MODAL AVERTISSEMENT */


/* DEBUT MODAL ABOUT */
.modal-about {
	position: absolute;
	display: none;
	height: auto;
	width: 100%;
	background-color: rgba(0,0,0);
	z-index: 100;
	display: none;
	justify-content: center;
	align-items: center;
}

#conteneur-about {
	width: 60%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#boxAbout {
	margin-top: 50px;
	margin-bottom: 50px;
	
}

#boxRetour {
	display: flex;
	align-items: center;
	margin-bottom: 50px;
}

#boxRetour2 {
	display: flex;
	align-items: center;
	justify-content: end;
}

#boxRetour > div > h2 {
	font-size: 1.4em;
	color: var(--colorRose);
}

#boxAbout > h3 {
	font-size: 1.3em;
	margin-bottom: 20px;
	margin-left: 20px;
}

#boxAbout > p {
	font-size: 1em;
	margin-left: 20px;
	margin-bottom: 30px;
	text-align: justify;
}

.btnRetour {
	font-size: 2.5em;
	color: var(--colorRose);
	margin: 0 20px 0 0;
	padding: 0;
	cursor: pointer;
	transition: 0.8s;
	padding: 0 5px 0 5px;
	background-color: white;
	border-radius: 25px;
}

.btnRetour:hover {
	color: white;
	background-color: var(--colorRose);
}
/* FIN MODAL ABOUT */


/* DEBUT MODAL CONNEXION */
.modalConnexion {
	position: absolute;
	position: fixed;
	display: none;
	width: 100%;
	margin-top: 15%;
	display: none;
	justify-content: center;
	z-index: 40;
}

#box-connecte {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 60%;
	background-color: rgba(0,0,0,0.85);
}

#box-connecte > form {
	width: 100%;
	display:flex;
	justify-content: center;
}

#close {
	position: absolute;
	cursor: pointer;
	font-family: "Abeezee";
	top: 15px;
	left: 25%;
}

#conteneur-connecte {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 50px;
	margin-bottom: 50px;
	width: 80%;
}

#choix-connexion {
	display: flex;
	justify-content: space-around;
	width: 100%;
	border-bottom: solid 1px white;
	padding-bottom: 20px;
	margin-bottom: 50px;
}

#choix-connexion > h3 {
	font-size: 2em;
	cursor: pointer;
}

.div-connecte {
	margin-bottom: 30px;
	justify-content: center;
	display: flex;
	width: 100%;
}

.div-connecte > input {
	width: 60%;
	height: 40px;
	text-align: center;
	font-size: 1.2em;
}

#bouton-valider {
	background-color: rgba(0, 0, 0, 0.9);
	cursor: pointer;
	border: solid 2px white;
	width: 30%;
	color: white;
	font-size: 2em;
	height: 60px;
	transition: 0.8s;
}

#bouton-valider:hover {
	border: solid 2px var(--colorRose);
}

#conteneur-connecte > div > a {
	cursor: pointer;
	color: white;
}
/* FIN DE MODAL CONNEXION */

/* DEBUT MODALE FICHE D INSCRIPTION  */
#modal-fiche {
	position: absolute;
	width: 100%;
	margin-top: 15%;
	display: none;
	justify-content: center;
	z-index: 40;
}

#box-fiche {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 60%;
	background-color: rgba(0,0,0,0.85);
}

#box-fiche > form {
	width: 100%;
	display:flex;
	justify-content: center;
}

#close-fiche {
	position: absolute;
	cursor: pointer;
	font-family: "Abeezee";
	top: 15px;
	left: 25%;
}

#conteneur-fiche {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 50px;
	margin-bottom: 50px;
	width: 80%;
}

.birthday-label {
	width: 50%;
	text-align: center;
}

#birthday-input {
	color: gray;
}

#choix-fiche {
	display: flex;
	justify-content: space-around;
	width: 100%;
	border-bottom: solid 1px white;
	padding-bottom: 20px;
	margin-bottom: 50px;
}

#choix-fiche > h3 {
	font-size: 2em;
	cursor: pointer;
}

.div-connectes {
	margin-bottom: 30px;
	justify-content: center;
	display: flex;
	width: 100%;
}

.div-connectes > input {
	width: 50%;
	height: 40px;
	text-align: center;
	font-size: 1.2em;
}

#bouton-valid {
	cursor: pointer;
	border: solid 2px white;
	border-radius: 0px;
	background-color: black;
	width: 30%;
	color: white;
	font-size: 2em;
	height: 60px;
	transition: 0.8s;
}

#bouton-valid:hover {
	border: solid 2px var(--colorRose);
	background-color: black;
}

#check {
	width: 20px;
}

.center-box {
	align-items: center;
	justify-content: center;
}