@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: .5em;
  	border: 1px solid #00004d;
  	/*border-radius: 1em;*/
	-moz-border-radius:1em;
	-webkit-border-radius:1em;
	-khtml-border-radius:1em;
	background-color:#fff;
}

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

#affich_circo {
	padding: 0 1em 1em 1em;
	border: 1px solid #00004d;
	-moz-border-radius:1em;
	-webkit-border-radius:1em;
	-khtml-border-radius:1em;
	background-color:#fff;
	/*width:80%;*/
	display:none;
	/*display:block;*/
}
#affich_mail {
	/*margin-left: 5em;*/
	padding: 0 1em 1em 1em;
	/*border: 1px solid #00004d;
	-moz-border-radius:1em;
	-webkit-border-radius:1em;
	-khtml-border-radius:1em;
	background-color:#E9E9E9;*/
	/*width:60%;*/
	display:none;
	/*display:block;*/
}

#affich_circo54 { margin-top: 0.5em;} /*nécessaire pour obtenir le même résultat à l'affichage qu'avec form div + div*/

label {
  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
  	display: inline-block;
  	width: 30%;
  	text-align: right;
	color:#00004d;
	/*margin-left:1%;
	padding:5px 0;*/
	font-size:90%;
}
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:#00004d;
}
label_result {
	display: inline-block;
	margin-bottom:1em;
	text-align: left;
	font-size:90%;
	color:#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: 25%;
  box-sizing: border-box;

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

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

.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;
}

input[type=radio], input[type=checkbox]{
	width: 20px;
	height:20px;
    padding: 6px 6px;
	margin-bottom:0.8em;
	/*margin-top:1em;*/
}
choix {
  /* Pour être sûrs que toutes les étiquettes soient correctement alignées */
  	display: inline-block;
  	text-align: center;
	color:#00004d;
	margin-left:0.5em;
	/*padding:5px 0;*/
	font-size:90%;
}

input[type=text], input[type=password], input[type=email]  {
	margin-left: .5em;
    padding:6px 6px;
	border: 1px solid #00004d;
	-moz-border-radius:0.3em;
	-webkit-border-radius:0.3em;
	-khtml-border-radius:0.3em;
	font-size:110%;
	color:#006aff;/*#00004d;*/
}
select{
	margin-left: .5em;
    padding:6px 6px;
	border: 1px solid #006aff;
	-moz-border-radius:0.3em;
	-webkit-border-radius:0.3em;
	-khtml-border-radius:0.3em;
	font-size:110%;
	color:#006aff;/*#00004d;*/
	background-color:#fff;
}
/* style des boutons */
input[type=submit], input[type=button] {
	display:block;
	margin:4% auto;
	background-color:#006aff;
	border:1px solid #006aff;
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	-khtml-border-radius:0.5em;
    cursor:pointer;
	padding:6px 35px;
	color:#fff;
	font-style:oblique;
	font-size:140%;
}
input[type=submit]:hover, input[type=button]:hover {
    background-color: white;
    color: #006aff;
    border: 1px solid #006aff;
}

/* Fin formulaire*/

@media screen and (min-width: 1025px) and (max-width: 1280px){
	
}

@media screen and (min-width: 600px) and (max-width: 1024px){		
	label {
  		width:85%;
		text-align:left;
		margin-left:10%;
	}
	labelfin {
  		width: 98%;
  		text-align: right;
	}
	label_result {
		margin-top:0.5em;
		margin-bottom:0;
		margin-left:10%;
		text-align: left;
		width:90%;
	}
	input, select {
		width: 70%;
		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:5em;
	}
	select{
		display:block;
		margin:0 auto;
		font-size:110%;
	}
	input[type=submit] {
		margin:6% auto;
		font-size:110%;
		width: 80%;
		padding:6px 10px;
	}
}

@media screen and (max-width: 599px){
	label {
  		width:98%;
		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:10%;
		text-align: left;
		width:90%;
	}
	input, select {
		width: 70%;
		font-size:80%;
	}
	input[type=text], input[type=password], input[type=email]  {
		display:block;
		margin:0 auto;
		/*font-size:80%;*/
	}
	select{
		display:block;
		margin:0 auto;
	}
	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:2em;
	}
	input[type=submit] {
		margin:6% auto;
		font-size:110%;
		width: 80%;
		padding:6px 10px;
	}
}