@charset "utf-8";

 /* Style du formulaire*/
form {
  	/* Uniquement centrer le formulaire sur la page */
  	margin: 1% auto;
  	width:100%;
	padding:0;
}

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

label {
  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
  	display: inline-block;
  	width: 40%;
  	text-align: right;
	/*margin-left:1%;
	padding:5px 0;*/
	font-size:90%;
	vertical-align: middle;
}

resultat {
  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
  	display: inline-block;
  	width: 40%;
  	text-align: right;
	font-size:70%;
	vertical-align: middle;
	margin-right:0.2em;
}
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, .select {
  /* Pour placer le bouton à la même position que les champs texte */
  /*padding-left: 9em; /* même taille que les étiquettes */
}

input, select, textarea {
  /* 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=text], input[type=password]{
    padding:6px 6px;
	border-radius:0.3em;
	border: 1px solid #00004d;
	font-size:90%;
	background-color:#FFF;
	color:#006aff;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin:1em auto 1em auto;
	vertical-align: middle;
	outline: none; /*supprime la bordure extèrieure lorsque le champ a le focus, à utiliser avec  input[type=text]:focus ci-dessous*/
}

/* Quand le champ est autorempli par le navigateur (Chrome/Edge/Safari) */
input[type=text]:-webkit-autofill, input[type=password]:-webkit-autofill
{
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important; /* force le fond */
  -webkit-text-fill-color: #006aff !important; /* couleur du texte */
}
/* Firefox : enlever le jaune d'autofill */
#input[type=text]:-moz-autofill, input[type=password]:-webkit-autofill
{
 	box-shadow: 0 0 0 1000px #fff inset !important;
 	-moz-text-size-adjust: 100%;
	-webkit-text-fill-color: #006aff !important; /* couleur du texte */
}

/* Si le champ est vide (placeholder visible), forcer blanc */
#finput[type=text]:placeholder-shown
{
  background-color: #fff;
}

input[type=text]:focus, input[type=password]:focus {
	/*change la couleur de la bordure lorsque l'on clique dans le champ de saisie*/
	border: 2px solid #F370A0/*#006aff*/;
}

.liste-enregistrer{
	margin:0.8em auto 1em auto;
}
select{
    padding:6px 6px;
	border-radius:0.3em;
	font-size:90%;
	color:#006aff;
	margin-left: 0.5em;
	width: 25%;
}
input[type=number]{
	font-size:120%;
	width:45%;
	font-weight: bold;
    padding: 2px 2px;
	border: 1px solid #006aff;
	border-radius:0.3em;
	color:#AB0B80;
	margin: 0.2em auto;
	vertical-align:middle;
	display: inline-block;
	text-align: center;
}
/*POUR MASQUER LES PETITS SPINS BOUTONS 
/* Chrome, Edge, Safari */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
/*FIN MASQUAGE*/

#Btn-Dep{ /*choix des départements*/
	display: flex;
	margin:0.5em auto 0.5em;
	width:100%;
	/*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;*/
}

.Btn-radio{
	flex-direction: row;
   	justify-content: center;
	margin:1em auto;
	width:100%;
	/*ajout pour centrer le conteneur avec l'image en fond*/
	display:block;
	
}
.SelectionClasse{
	margin-top:1em;	
}

input[type=radio]{
	width: 20px;
	height:20px;
	accent-color:#B13F9A;
	margin-left: 30%;
}
choix {
  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
  	display: inline-block;
  	width: 50%;
  	text-align: left;
	margin-left:1%;
	/*padding:5px 0;*/
	font-size:110%;
	vertical-align: middle;
	margin-top:-0.5em;
}

/* style des boutons */
input[type=submit] {
	display:block;
    background-color:#006aff;
    color:#fff;
	/*font-style:oblique;*/
	font-size:90%;
	margin:1em auto 1em auto;
	padding: 4px 10px;
    border: 2px solid #006aff;
	border-radius:0.5em;
    cursor: pointer;
	width: 30%;
}
input[type=submit]:hover {
    background-color:#fff;
    color: #006aff;
    border: 2px solid #006aff;
}

input[type=button] {
	display:block;
    background-color:#006aff;
    color:#fff;
	/*font-style:oblique;*/
	font-size:100%;
	margin:0 auto;
	padding: 4px 10px;
    border: 2px solid #006aff;
	border-radius:0.5em;
    cursor: pointer;
	width: 25%;
}
input[type=button]:hover {
    background-color:#fff;
    color: #006aff;
    border: 2px solid #006aff;
}

button {
	display:block;
    background-color:#006aff;
    color:#fff;
	/*font-style:oblique;*/
	font-size:100%;
	margin:1em auto 2em auto;
	padding: 4px 10px;
    border: 2px solid #006aff;
	border-radius:0.5em;
    cursor: pointer;
	width: 50%;
}
button:hover {
    background-color:#fff;
    color: #006aff;
    border: 2px solid #006aff;
}
@media screen and (min-width: 1025px) and (max-width: 1280px){
	form {width:95%;}
	label {width:35%;}
	
	input[type=text], input[type=password]  {
		font-size:85%;
	}
	input[type=number]{
		font-size:120%;
	}
	select{
		font-size:85%;
		width: 35%;
	}
	input[type=submit] {
		width: 30%;
		padding:6px 15px;
	}
	
}

@media screen and (min-width: 780px) and (max-width: 1024px){
	body {}
	form {width:95%;}
	
	label {
  		width:85%;
		text-align:left;
		margin-left:8%;
	}
	
	/*input, textarea {width: 85%;}*/
	
	input[type=text], input[type=password]  {
		display:block;
		font-size:110%;
		width: 65%;
	}
	textarea{
		display:block;
		margin:0 auto;
		font-size:90%;
	}
	
	input[type=number]{
		font-size:120%;
	}
	select{
		display:block;
		margin:0.5em auto 1em auto;
		font-size:90%;
		width: 45%;
	}
	input[type=submit] {
		width: 30%;
		padding:6px 10px;
	}
}

@media screen and (min-width: 600px) and (max-width: 779px){
	/*Format écran tablette en mode portrait*/
	body {}
	form {width:95%;}
	
	label {
  		width:85%;
		text-align:left;
		margin-left:8%;
	}
	
	/*input, textarea {width: 85%;}*/
	
	input[type=text], input[type=password]  {
		display:block;
		font-size:110%;
		width: 65%;
	}
	textarea{
		display:block;
		margin:0 auto;
		font-size:90%;
	}
	input[type=number]{
		font-size:120%;
		width:30%;
	}
	select{
		display:block;
		margin:0.5em auto 1em auto;
		font-size:90%;
		width: 45%;
	}
	input[type=submit] {
		width: 30%;
		padding:6px 10px;
	}
	
}
@media screen and (max-width: 599px){
	form {width:98%;}
	
	label {
  		width:85%;
		text-align:left;
		margin-left:5%;
	}
	
	input[type=radio]{
		margin-left: 15%;
	}
	choix {
	  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
		width: 60%;
		margin-left:5px;
		font-size:90%;
	}
	/*input, select {width: 90%;}*/

	input[type=text], input[type=password] {
		display:block;
		margin:1em auto 0 auto;
		font-size:80%;
		width:90%;
	}
	input[type=number]{
		font-size:140%;
		width:35%;
	}
	textarea{
		display:block;
		margin:0 auto;
		font-size:80%;
		width:90%;
	}

	select{
		display:block;
		margin:0.5em auto 1em auto;
		font-size:90%;
		width: 60%;
	}
	input[type=submit] {
		width: 40%;
		padding:6px 10px;
	}
}