/* Formulaires - Connexion / Messages */ 
input, select{
	border: 1px solid rgba(121,121,121,1);
	font-size: 0.9rem;
	padding:0.6rem;
	margin:0;
}

textarea{
	border:1px solid rgba(121,121,121,1);
	width:94%;
	float:left;
	height:10rem;
	font-size:0.9rem;
	margin:2rem 0 1rem 1%;
	padding:2%;
}

.submit{
	padding:0.5rem 1rem 0.8rem 1rem;
	font-size: 1rem;
	cursor: pointer;
	color: #000;
	background-color: #fff;
}
.submit:hover{
	color:#fff;
	background-color: #000;
}

.checkbox{
	height:1.5rem;
	width:1.5rem;
}
.radio{
	height:1.2rem;
	width:1.2rem;
}

.compte{
	padding: 0;
	float:left;
}


#indicatif{
	display: inline;
}

#indicatifautomatique{
	display: none;
}

.errors{
	font-size: 0.9rem;
}


@media all and (max-width:367px) {

	select{
		width:100%; /* Pour éviter le débordement */
	}

	.formtexte{
		width: 90%;
		margin: 0 0 0 5%;
		float: left;
	}
	.formtexte h4, .formtexte h3{
		text-align: left;
		font-size: 0.9rem;
		margin: 0 0 0.2rem 1rem;
		padding: 0;
	}
	.forminput{
		width: 90%;
		margin: 0 0 0 5%; 
		float: left;
	}
	.forminput h4, .forminput h3{
		text-align:left;
		margin:0;
		padding:0;
	}
	
	.large{
		width:94%;
		margin:0;	
	}
	.standard{
		width:94%;
		margin:0;	
	}
	.etroit{
		width:65%;
		margin:0;
	}
	#indicatif{
		width:19%;
		margin:0 1% 0 0;
	}
	#indicatifautomatique{
		width:19%;
		margin:0 1% 0 0;
	}

	.errors{
		text-align: left;
		margin:0 5% 0 5%;
	}	

}

@media all and (min-width:368px) and (max-width:467px){

	select{
		width:100%;
	}

	.formtexte{
		width: 90%;
		margin: 0 0 0 5%;
		float: left;
	}
	.formtexte h4, .formtexte h3{
		text-align: left;
		font-size: 0.9rem;
		margin: 0 0 0.2rem 1rem;
		padding: 0;
	}
	.forminput{
		width: 90%;
		margin: 0 0 0 5%; 
		float: left;
	}
	.forminput h4, .forminput h3{
		text-align:left;
		margin:0;
		padding:0;
	}

	.large{
		width:94%;
		margin:0;	
	}
	.standard{
		width:94%;
		margin:0;	
	}
	.etroit{
		width:66%;
		margin:0;
	}
	#indicatif{
		width:19%;
		margin:0 1% 0 0;
	}
	#indicatifautomatique{
		width:19%;
		margin:0 1% 0 0;
	}

	.errors{
		text-align: left;
		margin:0 5% 0 5%;
	}
		
}

@media all and (min-width:468px) and (max-width:567px){

	select{
		width:100%;
	}

	.formtexte{
		width: 90%;
		margin: 0 0 0 5%;
		float: left;
	}
	.formtexte h4, .formtexte h3{
		text-align: left;
		font-size: 0.9rem;
		margin: 0 0 0.2rem 1rem;
		padding: 0;
	}
	.forminput{
		width: 90%;
		margin: 0 0 0 5%; 
		float: left;
	}
	.forminput h4, .forminput h3{
		text-align:left;
		margin:0;
		padding:0;
	}

	.large{
		width:94%;
		margin:0;	
	}
	.standard{
		width:94%;
		margin:0;	
	}
	.etroit{
		width:60%;
		margin:0;
	}
	#indicatif{
		width:17%;
		margin:0 1% 0 0;
	}
	#indicatifautomatique{
		width:17%;
		margin:0 1% 0 0;
	}

	.errors{
		text-align: left;
		margin:0 5% 0 5%;
	}

}

@media all and (min-width:568px) and (max-width:667px) {

	select{
		width:100%;
	}

	.formtexte{
		width: 90%;
		margin: 0 0 0 5%;
		float: left;
	}
	.formtexte h4, .formtexte h3{
		text-align: left;
		font-size: 0.9rem;
		margin: 0 0 0.2rem 1rem;
		padding: 0;
	}
	.forminput{
		width: 90%;
		margin: 0 0 0 5%; 
		float: left;
	}
	.forminput h4, .forminput h3{
		text-align:left;
		margin:0;
		padding:0;
	}

	.large{
		width:96%;
		margin:0;	
	}
	.standard{
		width:96%;
		margin:0;	
	}
	.etroit{
		width:60%;
		margin:0;
	}
	#indicatif{
		width:14%;
		margin:0 1% 0 0;
	}
	#indicatifautomatique{
		width:14%;
		margin:0 1% 0 0;
	}

	.errors{
		text-align: left;
		margin:0 5% 0 5%;
	}

}

@media all and (min-width:668px) and (max-width:767px) {

	select{
		width:100%;
	}

	.formtexte{
		width: 90%;
		margin: 0 0 0 5%;
		float: left;
	}
	.formtexte h4, .formtexte h3{
		text-align: left;
		font-size: 0.9rem;
		margin: 0 0 0.2rem 1rem;
		padding: 0;
	}
	.forminput{
		width: 90%;
		margin: 0 0 0 5%; 
		float: left;
	}
	.forminput h4, .forminput h3{
		text-align:left;
		margin:0;
		padding:0;
	}

	.large{
		width:96%;
		margin:0;	
	}
	.standard{
		width:96%;
		margin:0;	
	}
	.etroit{
		width:60%;
		margin:0;
	}
	#indicatif{
		width:14%;
		margin:0 1% 0 0;
	}
	#indicatifautomatique{
		width:14%;
		margin:0 1% 0 0;
	}

	.errors{
		text-align: left;
		margin:0 5% 0 5%;
	}	

}

/* tablettes */		

@media all and (min-width:768px) and (max-width:899px) {

	input, select{
		font-size: 1rem;
	}

	textarea{
		width:86%;
		height:8rem;
		font-size:1rem;
		margin:3rem 0 1rem 5%;
		padding:2%;
	}

	.formtexte{
		width: 80%;
		margin: 0 0 0 10%;
		float: left;
	}
	.formtexte h4, .formtexte h3{
		text-align: left;
		font-size: 1rem;
		margin: 0 0 0.2rem 1rem;
		padding: 0;
	}
	.forminput{
		width: 80%;
		margin: 0 0 0 10%; 
		float: left;
	}
	.forminput h4, .forminput h3{
		text-align: left;
		margin: 0;
		padding: 0;
	}

	.large{
		width:70%;
		margin:0;		
	}
	.standard{
		width:50%;
		margin:0;		
	}
	.etroit{
		width:30%;
		margin:0;
	}
	#indicatif{
		width:10%;
		margin:0 1% 0 0;
	}
	#indicatifautomatique{
		width:10%;
		margin:0 1% 0 0;
	}
	.submit{
		font-size: 1.1rem;

	}

	.errors{
		text-align: left;
		font-size: 1rem;
		margin:0 5% 0 10%;
	}	
		
}

@media all and (min-width:900px) and (max-width:999px) {

	input, select{
		font-size: 1rem;
	}

	textarea{
		width:86%;
		height:8rem;
		font-size:1rem;
		margin:3rem 0 1rem 5%;
		padding:2%;
	}

	.formtexte{
		width: 80%;
		margin: 0 0 0 10%;
		float: left;
	}
	.formtexte h4, .formtexte h3{
		text-align: left;
		font-size: 1rem;
		margin: 0 0 0.2rem 1rem;
		padding: 0;
	}
	.forminput{
		width: 80%;
		margin: 0 0 0 10%; 
		float: left;
	}
	.forminput h4, .forminput h3{
		text-align: left;
		margin: 0;
		padding: 0;
	}

	.large{
		width:65%;
		margin:0;		
	}
	.standard{
		width:45%;
		margin:0;		
	}
	.etroit{
		width:30%;
		margin:0;
	}
	#indicatif{
		width:10%;
		margin:0 1% 0 0;
	}
	#indicatifautomatique{
		width:10%;
		margin:0 1% 0 0;
	}
	.submit{
		font-size: 1.1rem;

	}

	.errors{
		text-align: left;
		font-size: 1rem;
		margin:0 5% 0 10%;
	}
	
}

@media all and (min-width:1000px) and (max-width:1099px) {

	input, select{
		font-size: 1rem;
	}

	textarea{
		width:86%;
		height:8rem;
		font-size:1rem;
		margin:3rem 0 1rem 5%;
		padding:2%;
	}

	.formtexte{
		width: 80%;
		margin: 0 0 0 10%;
		float: left;
	}
	.formtexte h4, .formtexte h3{
		text-align: left;
		font-size: 1rem;
		margin: 0 0 0.2rem 1rem;
		padding: 0;
	}
	.forminput{
		width: 80%;
		margin: 0 0 0 10%; 
		float: left;
	}
	.forminput h4, .forminput h3{
		text-align: left;
		margin: 0;
		padding: 0;
	}

	.large{
		width:60%;
		margin:0;		
	}
	.standard{
		width:40%;
		margin:0;		
	}
	.etroit{
		width:28%;
		margin:0;
	}
	#indicatif{
		width:10%;
		margin:0 1% 0 0;
	}
	#indicatifautomatique{
		width:10%;
		margin:0 1% 0 0;
	}
	.submit{
		font-size: 1.1rem;

	}

	.errors{
		text-align: left;
		font-size: 1rem;
		margin:0 5% 0 10%;
	}

}

/* Ordinateurs : Changement de disposition */

@media all and (min-width:1100px) and (max-width:1199px) {

	input, select{
		font-size: 1.1rem;
	}

	textarea{
		width:86%;
		height:8rem;
		font-size:1.1rem;
		margin:3rem 0 1rem 5%;
		padding:2%;
	}

	.formtexte{
		width: 39%;
		padding: 0 1% 0 0;
		float: left;
	}
	.formtexte h4, .formtexte h3{
		text-align: right;
		font-size: 1.1rem;
		padding: 0.4rem 0 0 0;
	}
	.forminput{
		width: 60%;
		margin: 0; 
		float: left;
	}
	.forminput h4, .forminput h3{
		text-align: left;
		margin: 0;
		padding: 0;
	}

	.large{
		width:65%;
		margin:0;		
	}
	.standard{
		width:45%;
		margin:0;		
	}
	.etroit{
		width:30%;
		margin:0;
	}
	#indicatif{
		width:10%;
		margin:0 1% 0 0;
	}
	#indicatifautomatique{
		width:10%;
		margin:0 1% 0 0;
	}
	.submit{
		font-size: 1.2rem;
	}

	.errors{
		text-align: left;
		font-size: 1.1rem;
		margin:0 2rem 0 40%;
	}

}

@media all and (min-width:1200px) and (max-width:1299px) {

	input, select{
		font-size: 1.1rem;
	}

	textarea{
		width:86%;
		height:8rem;
		font-size:1.1rem;
		margin:3rem 0 1rem 5%;
		padding:2%;
	}

	.formtexte{
		width: 39%;
		padding: 0 1% 0 0;
		float: left;
	}
	.formtexte h4, .formtexte h3{
		text-align: right;
		font-size: 1.1rem;
		padding: 0.4rem 0 0 0;
	}
	.forminput{
		width: 60%;
		margin: 0; 
		float: left;
	}
	.forminput h4, .forminput h3{
		text-align: left;
		margin: 0;
		padding: 0;
	}

	.large{
		width:65%;
		margin:0;		
	}
	.standard{
		width:45%;
		margin:0;		
	}
	.etroit{
		width:30%;
		margin:0;
	}
	#indicatif{
		width:10%;
		margin:0 1% 0 0;
	}
	#indicatifautomatique{
		width:10%;
		margin:0 1% 0 0;
	}
	.submit{
		font-size: 1.2rem;
	}

	.errors{
		text-align: left;
		font-size: 1.1rem;
		margin:0 2rem 0 40%;
	}
	
}

@media all and (min-width:1300px) and (max-width:1399px) {

	input, select{
		font-size: 1.1rem;
	}

	textarea{
		width:86%;
		height:8rem;
		font-size:1.1rem;
		margin:3rem 0 1rem 5%;
		padding:2%;
	}

	.formtexte{
		width: 39%;
		padding: 0 1% 0 0;
		float: left;
	}
	.formtexte h4, .formtexte h3{
		text-align: right;
		font-size: 1.1rem;
		padding: 0.4rem 0 0 0;
	}
	.forminput{
		width: 60%;
		margin: 0; 
		float: left;
	}
	.forminput h4, .forminput h3{
		text-align: left;
		margin: 0;
		padding: 0;
	}

	.large{
		width:60%;
		margin:0;		
	}
	.standard{
		width:40%;
		margin:0;		
	}
	.etroit{
		width:25%;
		margin:0;
	}
	#indicatif{
		width:8%;
		margin:0 1% 0 0;
	}
	#indicatifautomatique{
		width:8%;
		margin:0 1% 0 0;
	}
	.submit{
		font-size: 1.2rem;
	}

	.errors{
		text-align: left;
		margin:0 2rem 0 40%;
	}

}

@media all and (min-width:1400px) and (max-width:1499px) {

	input, select{
		font-size: 1.1rem;
	}

	textarea{
		width:86%;
		height:8rem;
		font-size:1.1rem;
		margin:3rem 0 1rem 5%;
		padding:2%;
	}

	.formtexte{
		width: 39%;
		padding: 0 1% 0 0;
		float: left;
	}
	.formtexte h4, .formtexte h3{
		text-align: right;
		font-size: 1.1rem;
		padding: 0.4rem 0 0 0;
	}
	.forminput{
		width: 60%;
		margin: 0; 
		float: left;
	}
	.forminput h4, .forminput h3{
		text-align: left;
		margin: 0;
		padding: 0;
	}

	.large{
		width:60%;
		margin:0;		
	}
	.standard{
		width:40%;
		margin:0;		
	}
	.etroit{
		width:25%;
		margin:0;
	}
	#indicatif{
		width:8%;
		margin:0 1% 0 0;
	}
	#indicatifautomatique{
		width:8%;
		margin:0 1% 0 0;
	}
	.submit{
		font-size: 1.2rem;
	}

	.errors{
		text-align: left;
		font-size: 1.1rem;
		margin:0 2rem 0 40%;
	}

}

@media all and (min-width:1500px) and (max-width:1599px) {

	input, select{
		font-size: 1.1rem;
	}

	textarea{
		width:86%;
		height:8rem;
		font-size:1.1rem;
		margin:3rem 0 1rem 5%;
		padding:2%;
	}

	.formtexte{
		width: 39%;
		padding: 0 1% 0 0;
		float: left;
	}
	.formtexte h4, .formtexte h3{
		text-align: right;
		font-size: 1.1rem;
		padding: 0.4rem 0 0 0;
	}
	.forminput{
		width: 60%;
		margin: 0; 
		float: left;
	}
	.forminput h4, .forminput h3{
		text-align: left;
		margin: 0;
		padding: 0;
	}

	.large{
		width:55%;
		margin:0;		
	}
	.standard{
		width:35%;
		margin:0;		
	}
	.etroit{
		width:25%;
		margin:0;
	}
	#indicatif{
		width:8%;
		margin:0 1% 0 0;
	}
	#indicatifautomatique{
		width:8%;
		margin:0 1% 0 0;
	}
	.submit{
		font-size: 1.2rem;
	}

	.errors{
		text-align: left;
		font-size: 1.1rem;
		margin:0 2rem 0 40%;
	}
	
}

@media all and (min-width:1600px) and (max-width:1699px) {

	input, select{
		font-size: 1.1rem;
	}

	textarea{
		width:86%;
		height:8rem;
		font-size:1.1rem;
		margin:3rem 0 1rem 5%;
		padding:2%;
	}

	.formtexte{
		width: 39%;
		padding: 0 1% 0 0;
		float: left;
	}
	.formtexte h4, .formtexte h3{
		text-align: right;
		font-size: 1.1rem;
		padding: 0.4rem 0 0 0;
	}
	.forminput{
		width: 60%;
		margin: 0; 
		float: left;
	}
	.forminput h4, .forminput h3{
		text-align: left;
		margin: 0;
		padding: 0;
	}

	.large{
		width:55%;
		margin:0;		
	}
	.standard{
		width:35%;
		margin:0;		
	}
	.etroit{
		width:25%;
		margin:0;
	}
	#indicatif{
		width:8%;
		margin:0 1% 0 0;
	}
	#indicatifautomatique{
		width:8%;
		margin:0 1% 0 0;
	}
	.submit{
		font-size: 1.2rem;
	}

	.errors{
		text-align: left;
		font-size: 1.1rem;
		margin:0 2rem 0 40%;
	}
	
}

@media all and (min-width:1700px) and (max-width:1799px) {

	input, select{
		font-size: 1.1rem;
	}

	textarea{
		width:86%;
		height:8rem;
		font-size:1.1rem;
		margin:3rem 0 1rem 5%;
		padding:2%;
	}

	.formtexte{
		width: 39%;
		padding: 0 1% 0 0;
		float: left;
	}
	.formtexte h4, .formtexte h3{
		text-align: right;
		font-size: 1.1rem;
		padding: 0.4rem 0 0 0;
	}
	.forminput{
		width: 60%;
		margin: 0; 
		float: left;
	}
	.forminput h4, .forminput h3{
		text-align: left;
		margin: 0;
		padding: 0;
	}

	.large{
		width:55%;
		margin:0;		
	}
	.standard{
		width:35%;
		margin:0;		
	}
	.etroit{
		width:25%;
		margin:0;
	}
	#indicatif{
		width:8%;
		margin:0 1% 0 0;
	}
	#indicatifautomatique{
		width:8%;
		margin:0 1% 0 0;
	}
	.submit{
		font-size: 1.2rem;
	}

	.errors{
		text-align: left;
		font-size: 1.1rem;
		margin:0 2rem 0 40%;
	}
	
}

@media all and (min-width:1800px) {

	input, select{
		font-size: 1.1rem;
	}

	textarea{
		width:86%;
		height:8rem;
		font-size:1.1rem;
		margin:3rem 0 1rem 5%;
		padding:2%;
	}

	.formtexte{
		width: 39%;
		padding: 0 1% 0 0;
		float: left;
	}
	.formtexte h4, .formtexte h3{
		text-align: right;
		font-size: 1.1rem;
		padding: 0.4rem 0 0 0;
	}
	.forminput{
		width: 60%;
		margin: 0; 
		float: left;
	}
	.forminput h4, .forminput h3{
		text-align: left;
		margin: 0;
		padding: 0;
	}

	.large{
		width:55%;
		margin:0;		
	}
	.standard{
		width:35%;
		margin:0;		
	}
	.etroit{
		width:25%;
		margin:0;
	}
	#indicatif{
		width:8%;
		margin:0 1% 0 0;
	}
	#indicatifautomatique{
		width:8%;
		margin:0 1% 0 0;
	}
	.submit{
		font-size: 1.2rem;
	}

	.errors{
		text-align: left;
		font-size: 1.1rem;
		margin:0 2rem 0 40%;
	}
	
}