/* LES POLICES D'ÉCRITURE */

@font-face {
    font-family: 'Montserrat';
    src: url(../polices/Montserrat/Montserrat-SemiBold.otf);    
}

@font-face {
    font-family: 'Open sans';
    src: url(../polices/open\ sans/OpenSans-Regular-webfont.ttf);    
}




/* EN COMMUN DES DEUX PARTIES*/


/* Eviter le fait que la page au un scroll horizontale */
.row{
	--bs-gutter-x: 0;
}

/* Faire en sorte que la page prenne la hauteure complete */
@media screen and (min-width: 780px){
	#PartieGauche{
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	}
}


/* Met une police, la taille et un espacementent pour toutes les balises p */
p{
	font-size: 1.5em;
}

h2{
	padding-bottom: 1.5em;
	font-size: 2em;
	font-family: 'Montserrat';
	padding-top: 2em;
}

.side{
	font-size: 1.3em;
	font-family: 'Open sans';
}




/* PARTIE GAUCHE */


/* Images alizon en haut  */

	#logo{
	position: absolute;
	top : 4%;
	left: 4%;

}
@media screen and (min-width: 780px){
	#logo{
		width: 15%;
		height: 15%;
	}
}



/* Met l'écriture en blanc dans la partie gauche */
#PartieGauche p{
	color: white;
	margin: 2em;
}
/* Background de la partie gauche de la page */

#PartieGauche{
	background-color: #144FC1;
}






/* PARTIE DROITE */

/* Aligne tout les éléments de la partie droite du site */
#PartieDroite {
	margin-top: auto;
	margin-bottom: auto;
	align-items: center;
	justify-content: center;
}

/* Permet l'alignement du form */
.form-inline{
	margin: auto;
} 

/* Permet de définir une taille pour chaque champ du form a remplir */
.from-control{
	width: 2em;
}

/* Classe champ qui sera sur tout les champs de cette page */
.champ {
	background-color: #F7F1F1;
	background-position:left;
	background-repeat:no-repeat;
	width:100%;
	border-style: solid;
	border-color: black;
	border-width: 1px;
	border-radius: 7px;
	font-size: 1.3em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin: 5px;
}

/* Permet de mettre l'icon d'une personne dans le champ name à gauche sans ampiéter sur le texte */
.name{
	background-image:url(../images/icones/dark_personne.png);
	background-position-x: 5px;
	background-size: 25px 30px;
	padding-left: 13.2%;
	margin-top: 1em;
	margin-bottom: 1em;

}


.street{
	background-image:url(../images/icones/adresse-du-domicile.png);
	background-position-x: 5px;
	background-size: 30px 30px;
	padding-left: 13.2%;
	margin-top: 1em;
	margin-bottom: 1em;
}

.street{
	background-image:url(../images/icones/adresse-du-domicile.png);
	background-position-x: 5px;
	background-size: 30px 30px;
	padding-left: 13.2%;
	margin-top: 1em;
	margin-bottom: 1em;
}

.petit{
	width: 101%;
}

.num,.postal{
	background-color: #F7F1F1;
	background-position:left;
	background-repeat:no-repeat;
	border-style: solid;
	border-color: black;
	border-width: 1px;
	border-radius: 7px;
	font-size: 1.3em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin-left: 5px;
}


.TVA{
	width: 17%;
	background-color: #F7F1F1;
	background-position:left;
	background-repeat:no-repeat;
	border-style: solid;
	border-color: black;
	border-width: 1px;
	border-radius: 7px;
	font-size: 1.3em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.NIC{
	width: 30%;
	background-color: #F7F1F1;
	background-position:left;
	background-repeat:no-repeat;
	border-style: solid;
	border-color: black;
	border-width: 1px;
	border-radius: 7px;
	font-size: 1.3em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}


.siret{
	width: 30%;
	background-color: #F7F1F1;
	background-position:left;
	background-repeat:no-repeat;
	border-style: solid;
	border-color: black;
	border-width: 1px;
	border-radius: 7px;
	font-size: 1.3em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.postal{
	margin-left: 10px;
}



/* Permet de mettre l'icon d'email dans le champ email à gauche sans ampiéter sur le texte */
.email{
	background-image:url(../images/icones/email.png);
	background-position-x: 5px;
	background-size: 30px 30px;
	padding-left: 12.2%;
	margin-top: 1em;
	margin-bottom: 1em;


}

/* Permet de mettre l'icon de cadenas dans le champ password à gauche sans ampiéter sur le texte */
.password{
	background-image:url(../images/icones/password.png);
	background-position-x: 2px;
	background-size: 30px 30px;
	padding-left: 12.5%;
	margin-top: 1em;
	margin-bottom: 1em;


}

/* Span vide mais qui est affiché lorsqu'il y a une erreur */
#error{
	display : none;
	text-align: left;
}

/* Classe rep qui est le champ de les reponses aux questions dans l'inscription */
.rep{
	background-image:url(../images/icones/question.png);
	background-position-x: 5px;
	background-size: 30px 30px;
	padding-left: 13.2%;
	margin-top: 1em;
	margin-bottom: 1em;
}

/* Classe qui homogénise les champs des questions */
.question{
	background-position-x: 2px;
	background-size: 30px 30px;
	padding-left: 40px;
}




/* met un espacement entre le champ du form et le bouton  */
.padding{
	padding-top: 2em;
	padding-bottom: 2em;
}

/* Fait un beau bouton */
.button{
	background-color: #FF8605;
	color: #000;
	
	border: none;
	border-radius: 6px;
	text-decoration:none;
	font-size: 1.3em ;
	padding-right: 2em;
	padding-left: 2em;
	font-family: 'open sans';  
}

/* Changement des boutons lors du survol car ce n'étais pas en accord avec les autres pages */
.button:hover{
	background-color: #FF8605;
	color: #000;
}
/* Changement des boutons lors du click car ce n'étais pas en accord avec les autres pages */
.button:active {
	background-color: #FF8605 !important; 
	color: #000 !important;
}


/* Aligne le bouton de création de compte */
#bouton_creer_compte{
	margin-left: auto;
	margin-right: auto;
}

/* Tout les boutons ont ce style */
.bouton {
    background-color: #FF8605;
    color: #000;
    padding: 0.5em 1em;
    text-decoration: none;
    border-style: none;
    border-radius: 10px;
}

/* Style de texte pour accepter les cgu */
#acceptCGU {
	font-family: 'Open sans';
	font-size: 1em;
	font-style: italic;
	padding-bottom: 0;
}

/*********************************/
/* MEDIA QUERY POUR FORMAT MOBILE*/
/*********************************/

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

	/* permet de mettre un espacement entre le bouton et la fin de la page */
	#bouton_creer_compte{
		margin-bottom: 5%;
	}


	/* Permet de bien positionner le logo lors du format mobile */
	#logo {
	
		margin: auto;

		padding-left: 12%;
		padding-right: 12%;
		width: 100%;
		
		height: auto;
		top: 0px;
		left: 0px;
		background-color: #144FC1;
		order: 1;
	}

	/* Met la partie de connexion en colonne et la met en dessous du logo */
	#PartieDroite{
		background-color: white;
		display: flex;
		flex-direction: row;
		margin : auto;
		order: 2;
		color: black;
		width: 20em;
		padding-top: 13em;
	}

	/* Met un espacement entre le form et le bouton */
	.pour_form{
		margin-bottom: 2em;
	}

    /* met les information de la parie gauche et droite en haut des blocks respectifs */
    #PartieGauche, #PartieDroite{
		background-color: white;
		justify-content: start;
	}

	/* Met le bouton de s'inscrire ou se connecter après le form */
	#PartieGauche{
		order: 3;
		margin: auto;
	}
	/* Les paragraphe de la partie gauche en noir */
	#PartieGauche p{
		color: black;
	}
}