@charset "utf-8";
/* CSS Document */
/* Style du formulaire*/
form {
  	/* Uniquement centrer le formulaire sur la page */
  	margin: 2% auto;
  	width: 95%;
  	/* Encadré pour voir les limites du formulaire */
  	padding: .2em;
  	/*border: 1px solid #fff;*/
  	/*border-radius: 1em;*/
	/*-moz-border-radius:1em;
	-webkit-border-radius:1em;
	-khtml-border-radius:1em;*/
	/*background-color:rgba(255,255,255,0.70);*/
}

form div + div {
  /*margin-top: 0.5em;*/
}

/*Formulaire de pré-inscription d'un élèves*/
#niveau{ /*niveaux de classe*/
	margin:0.5em auto 0.5em;
	width:60%;
	background-color:rgba(255,255,255,0.70);
	/*border: 0.1em solid #120976;/*#00004d;*/
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	-khtml-border-radius:0.5em;
}
.niveau2 {
	display: flex;
   	justify-content: center;
   	/*align-items: center;*/
}

#affich_niveau { /*Div qui englobe les 4 div des classes dans le formulaire d'inscription d'un élève*/
	margin:0 auto;
	display:none;
}

#affich_niveau6, #affich_niveau5, #affich_niveau4, #affich_niveau3 {
	/*display:none;*/
	display:block;
} /*nécessaire pour obtenir le même résultat à l'affichage qu'avec form div + div*/

#affich_choix_1_personne, #affich_choix_2_personnes, #affich_choix_3_personnes, #affich_choix_4_personnes, #affich_choix_5_personnes, #affich_validation_formulaire {
	/*Masque les listes de choix pour composer les chambres*/
	display:none;
}

.regime {
	margin:0.5em auto 0.5em;
	width:60%;
  	background-color:rgba(255,255,255,0.70);
  	/*border: 0.1em solid #120976;/*#00004d;*/
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	-khtml-border-radius:0.5em;
}
.financement, .natation {
	margin:0.5em 0;
	padding-bottom: 0.5em;
	padding-left: 1em;
	padding-right: 1em;
  	background-color:rgba(255,255,255,0.70);
  	/*border: 0.1em solid #120976;/*#00004d;*/
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	-khtml-border-radius:0.5em;
}
/*Fin formulaire de pré-inscription d'un élève*/

label {
  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
  	display: inline-block;
  	width: 50%;
  	text-align: right;
	color:#120976/*#00004d*/;
	/*margin-left:1%;
	padding:5px 0;*/
	font-size:90%;
	vertical-align:middle;
}
labelfin {
  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
  	display: inline-block;
  	width: 40%;
  	text-align: left;
	margin-left:1%;
	padding:5px 0;
	font-size:90%;
	color:#120976/*#00004d*/;
}
label_result {
	display: inline-block;
	margin-bottom:1em;
	margin-left:0.5em;
	text-align: left;
	font-size:90%;
	color:#120976/*#00004d*/;
	font-style:oblique;
}
input, select {
  /* Pour s'assurer que tous les champs texte ont la même police.
     Par défaut, les textarea ont une police monospace */
  /*font: 1em sans-serif;*/

  /* Pour que tous les champs texte aient la même dimension */
  width: 35%;
  box-sizing: border-box;

  /* Pour harmoniser le look & feel des bordures des champs texte */
  border: 1px solid #120976;
}

input:focus {
  /* Pour souligner légèrement les éléments actifs */
  border-color: #0C8FEC;
}

input:invalid {
  border: 2px dashed red;
}
input:invalid:focus {
  background-image:linear-gradient(pink, pink);
}

.input, .select {
  /* Pour placer le bouton à la même position que les champs texte */
  /*padding-left: 9em; /* même taille que les étiquettes */
}

input, select {
  /* Cette marge supplémentaire représente grosso modo le même espace que celui
     entre les étiquettes et les champs texte */
  margin-left: .5em;
}

choix {
  	/*display: inline-block;*/
  	text-align: left;
	font-size:90%;
	color:#120976/*#00004d*/;
	margin:0 1.5em 1em 0.5em;
	/*vertical-align:middle; >>> NON*/
	padding: 0.8em 6px 0 6px;
}

input[type=radio]{
	width: 20px;
	height:20px;
	accent-color:#B13F9A;
	margin-left: 0.5em;
    margin:0.5em 0;
}

input[type=text], input[type=password], input[type=email]  {
	margin:0.5em auto;
    padding:6px 6px;
	border: 1px solid #120976/*#00004d*/;;
	-moz-border-radius:0.3em;
	-webkit-border-radius:0.3em;
	-khtml-border-radius:0.3em;
	font-size:110%;
	color:#0C8FEC;
	outline: none; /*supprime la bordure extèrieure lorsque le champ a le focus, à utiliser avec  input[type=text]:focus ci-dessous*/
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {
	/*change la couleur de la bordure lorsque l'on clique dans le champ de saisi*/
	border: 2px solid red;
}

select{
	padding:6px 6px;
	-moz-border-radius:0.3em;
	-webkit-border-radius:0.3em;
	-khtml-border-radius:0.3em;
	font-size:110%;
	color:#0C8FEC;
	background-color: #fff;
	margin:0.5em auto;
}

/* style des boutons */
input[type=submit] {
	display:block;
	margin:4% auto;
	width: 60%;
	background-color:#120976/*#00004d*/;
    color:#FFF;
	border: 2px solid #120976/*#00004d*/;
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	-khtml-border-radius:0.5em;
    cursor:pointer;
	padding:6px 35px;
	font-style:oblique;
	font-size:140%;
}
input[type=submit]:hover{
    background-color:#0C8FEC;
    color: #120976/*#00004d*/;
    border: 2px solid #120976/*#00004d*/;
}

/* Fin formulaire*/

@media screen and (min-width: 1025px) and (max-width: 1280px){
	
	label {
  		width:50%;
		/*text-align:left;*/
		margin-left:1%;
		/*margin-bottom:1%;*/
	}
	labelfin {
  		width: 98%;
  		text-align: right;
	}
	label_result {
		margin-top:0.5em;
		margin-bottom:0em;
		margin-left:0.5em;
		text-align: left;
		width:90%;
	}
	input, select {
		width: 45%;
		/*font-size:90%;*/
	}
	input[type=submit]{
		width: 65%;
		font-size:135%;
	}
}

@media screen and (min-width: 600px) and (max-width: 1024px){		
	form {
  		margin: 1em auto;
  		width: 95%;
	}
	label {
  		width:85%;
		text-align:left;
		margin-left:1%;
		margin-bottom:1%;
	}
	labelfin {
  		width: 98%;
  		text-align: right;
	}
	label_result {
		margin-top:0.5em;
		margin-bottom:0;
		margin-left:0.5em;
		text-align: left;
		width:90%;
	}
	#niveau{ /*niveaux de classe*/
		width:100%;
	}

	.regime {
		width:100%;
	}
	input, select {
		width: 65%;
		/*font-size:90%;*/
	}
	input[type=text], input[type=password], input[type=email]  {
		display:block;
		margin:0 auto;
		font-size:110%;
	}
	
	input[type=radio], input[type=checkbox]{
		display:inline;
		width: 20px;
		height:20px;
		padding: 0 6px;
		margin-top:0.5em;
		margin-bottom:0.5em;
		margin-left:0.5em;
		font-size:80%;
	}
	select{
		display:block;
		margin:0 auto;
		font-size:110%;
	}
	input[type=submit] {
		margin:6% auto;
		font-size:130%;
		width: 70%;
		padding:6px 10px;
	}
}

@media screen and (max-width: 599px){
	form {
  		margin: 1em auto;
  		width: 95%;
	}
	
	label {
  		width:98%;
		text-align:left;
		margin-left:1%;
		margin-bottom:1%;
		font-size:85%;
	}
	labelfin {
  		width: 98%;
  		text-align: right;
	}
	label_result {
		margin-top:0.5em;
		margin-bottom:0;
		margin-left:0.5em;
		text-align: left;
		width:90%;
	}
	input {
		width: 70%;
		/*font-size:70%;*/
	}
	input[type=text], input[type=password], input[type=email]  {
		display:block;
		margin:0 auto;
		font-size:80%; /*taille texte placeholder et texte saisi*/
	}
	#niveau{ /*niveaux de classe*/
		width:100%;
	}

	.regime {
		width:100%;
	}
	select{
		display:block;
		margin:0 auto;
		font-size:80%;
		width:70%
	}
	input[type=radio]{
		display:inline;
		padding: 0 6px;
		margin-top:0.5em;
		margin-bottom:0.5em;
		margin-left:0.5em;
		font-size:80%;
	}
	input[type=submit]{
		margin:2% auto;
		font-size:130%;
		width: 96%;
		padding:6px 4px;
	}
}