@charset "utf-8";
/* 

CSS Document 

FONT : 
- lato 
- latoblck
- latobold
- caviardreams
- muli

COULEURS PRINCIPALES
- Rouge	rgba(227,24,24)
- Verte	rgba(0,124,45)
- Gris		rgba(66,73,79)

*/

form { width:75%; display:flex; flex-wrap:wrap; margin:0 auto; }
input, select { width:100%; font-family:'lato', Arial, Helvetica, sans-serif; font-size:1.2em; border:rgba(66,73,79) 1px solid; border-radius:0.5em; padding:0.5em; text-align:center; }
input[type="radio"] { width:20px; height:20px; cursor:pointer; padding:0.5em; font-size:1.2em; margin:0.6em 0; }
input[type="submit"] { cursor:pointer; }
	.okay { background-color:rgba(0,124,45); border-color:rgba(0,124,45); color:#FFFFFF; }
	.okay:hover { background-color:rgba(66,73,79); color:#FFFFFF; }
	.cancel { background-color:rgba(227,0,27); border-color:rgba(227,0,27); color:#FFFFFF; }
	.cancel:hover { background-color:rgba(66,73,79); color:#FFFFFF; }


.orderBox_title { width:100%; display:flex; flex-wrap:wrap; padding:0.5em 1em; background-color:rgba(66,73,79); color:#FFFFFF; font-size:1.813em; font-family:'latobold', Arial, Helvetica, sans-serif; justify-content:space-between; align-items:center; }
.orderBox_recap { width:100%; display:flex; flex-wrap:wrap; padding:1em; justify-content:space-around; font-size:2.188em; border-bottom:rgba(0,124,45) 1px solid; }
	.noborder { border:none; }
	.orderBox_recap_qty { width:10%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; }
	.orderBox_recap_pdj { width:70%; display:flex; flex-wrap:wrap; justify-content:left; align-items:center; }
	.orderBox_recap_prix { width:20%; display:flex; flex-wrap:wrap; justify-content:right; align-items:center; }
	.orderBox_recap_total { width:80%; display:flex; flex-wrap:wrap; justify-content:right; align-items:flex-end; }
	.orderBox_recap_warning { width:40%; display:flex; flex-wrap:wrap; padding:1em; background-color:rgba(66,73,79); color:#FFFFFF; justify-content:center; align-items:center; text-align:justify; font-size:0.5em; }
	.orderBox_recap_contact { width:40%; display:flex; flex-wrap:wrap; padding:1em; border:rgba(66,73,79) 1px solid; justify-content:center; align-items:center; text-align:justify; font-size:1em; }
		.orderBox_recap_contact div { width:100%; text-align:center; }
			.orderBox_recap_contact div a { background-color:rgba(227,24,24); color:#FFFFFF; padding:0.2em 1em; }

.orderBox_form { width:100%; text-align:center; padding:0 1em; }
	.orderBox_form p { width:100%; text-align:center; font-size:1.813em; }
	label { width:100%; border-bottom:rgba(66,73,79) 1px solid; padding-bottom:0.25em; margin-bottom:0.25em; font-size:1.2em; }
		.formLine { width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; padding-bottom:1em; }
		.formLine_col { width:48%; display:flex; flex-wrap:wrap; align-items:center; }
			.formLine_col_trois { width:31%; display:flex; flex-wrap:wrap; align-items:center; }
			.formLine_col_radio { width:100%; display:flex; flex-wrap:wrap; justify-content:space-around; align-items:center; }
				.formLine_col_radio div { display:flex; flex-wrap:wrap; align-items:center; }
		.formLine_error { width:100%; }
			.formLine_error div { font-size:1em; font-style:italic; color:#FF0000; padding-left:1em; }

.errorBox { width:80%; margin:0 auto 1em auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; border:#FF0000 1px solid; font-size:1.813em; }
	.errorBox_pict { width:100%; font-size:0; display:flex; flex-wrap:wrap; justify-content:center; }
		.errorBox_pict img { max-width:40%; margin:0 auto; }
	.errorBox_text { width:100%; padding:1em; text-align:center; }
		.errorBox_text p { padding-bottom:0; margin-bottom:0; }
		.errorBox_text ul { margin-top:0; padding-top:0; list-style-type:square; }
			.errorBox_text ul li span { color:rgba(227,0,27); font-weight:bold; }
			.errorBox_text ul li font { font-style:italic; color:rgba(227,0,27); }
		.errorBox_text a:link, .errorBox_text a:visited { color:rgba(227,0,27); }
		.errorBox_text a:hover, .errorBox_text a:active { color:rgba(66,73,79); }
	.errorBox_tel { width:100%; margin:2em 0; text-align:center; }
		.errorBox_tel a:link, .errorBox_tel a:visited { background-color:rgba(0,124,45); color:#FFFFFF; border:rgba(0,124,45) 1px solid; border-radius:0.25em; padding:0.5em 1em; }
		.errorBox_tel a:hover, .errorBox_tel a:active { color:rgba(66,73,79); }


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

}

@media screen and (max-width:1380px) {
	/* 17-19 pouces */
	form { width:100%; padding-bottom:1em; font-size:0.85em; }
		.errorBox { font-size:1.413em; }
		.formLine_btn { margin-top:1em; }
}

@media screen and (max-width:1080px) {
	/* 15 pouces */
	.orderBox_title { font-size:1.413em; }
	.orderBox_form p { font-size:1.413em; }
	
}

@media screen and (max-height:880px) {

}

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

}

@media only screen and (-webkit-min-device-pixel-ratio:2) {
	@media screen and (max-width:1480px) {
		form { width:100%; padding-bottom:1em; }
			.formLine_btn { margin-top:1em; }
	}

	@media screen and (max-width:1080px) {
			.errorBox { font-size:1.213em; }
			label { font-size:0.9em; }
			.formLine_error { font-size:0.9em; }
	}

	/*  iphone SE --> 11 + XR | MacBook | iMac | iPad */
	@media screen and (max-width:880px) {
		form { width:96%; }
	}
	
	@media screen and (max-width:480px) {
		form { width:94%; }
			.formLine_col, .formLine_col_trois { width:100%; }
		
		.orderBox_title { font-size:1.2em; }
		.orderBox_form p { font-size:1.2em; }
		
		.errorBox { width:100%; }
			.errorBox_pict { width:55%; margin:0 auto; }
				.errorBox_pict img { max-width:100%; margin:0 auto; }
			.errorBox_text { width:100%; padding:0.5em; font-size:0.85em; }
				.errorBox_text ul li span { width:100%; display:block; }
	}
}

@media only screen and (-webkit-min-device-pixel-ratio:3) {
	/*  iphone12 --> 16  */
	@media screen and (max-width:450px) {
	
	}
	
	@media screen and (max-width:880px) {
	
	}
}

@media only screen and (-webkit-min-device-pixel-ratio:4) {
	/*  Google Pixel 6 Pro | OPPO Find X3 Pro | Samsung Galaxy + S21-22 Ultra */
	@media screen and (max-width:450px) {
	
	}
	
	@media screen and (max-width:880px) {
		
	}
}