@charset "utf-8";
/*
CSS Document
VERT : rgba(131,182,24) ou #83B618
ROUGE : rgba(193,2,44) ou #C1022C
JAUNE : rgba(244,175,47) ou # F4AF2F
FAMILY FONT : 'lato';
*/

.contact { width:100%; display:flex; flex-wrap:wrap; padding:1em; justify-content:space-around; font-size:1.5rem; }
	.contactTitle { width:100%; padding:1em 15%; text-align:center; }
	
	form { width:95%; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-around; font-size:1.5rem; }
		.formBox, .formBoxTextarea { display:flex; flex-wrap:wrap; border:#000000 1px solid; margin:0.5rem 0; padding:0.5rem; align-items:center; justify-content:space-between; }
			.formBox { width:45%; }
			.formBoxTextarea { width:95%; }
				input[type=text] { width:80%; border:none; font-size:1.5rem; padding:0.5em; background-color:#F6F6F6; font-family:'lato', Verdana, Geneva, sans-serif; }
				/* input[type=text]:hover { background-color:#FFFFFF; } */
				input[type=text]:focus { outline:none; }
				textarea { width:100%; margin:0.5em 0; border:none; font-size:1.5rem; font-family:'lato', Verdana, Geneva, sans-serif; resize:none; padding:0.5em; background-color:#F6F6F6; }
				textarea:focus { outline:none; }
				label.textarea {  }
				input[type=submit] { width:45%; margin:0.5em 0; border:none; text-align:center; font-family:'lato'; Verdana, Geneva, sans-serif; font-size:1.5rem; padding:0.5em; color:#FFFFFF; cursor:pointer; }
				input.envoyer { background-color:rgba(131,182,24); }
				input.annuler { background-color:rgba(193,2,44); }
				input.errorInput, textarea.errorInput { background-color:rgba(193,2,44,0.1); }


	.contactCartouches { width:90%; margin:1em auto; display:flex; flex-wrap:wrap; padding:1em; justify-content:space-between; font-size:1.5rem; }
		.contactCartouches_details { width:35%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border:rgba(193,2,44) 1em solid; padding:1em; }
			.contactCartouches_details h2, .contactCartouches_details h3, .contactCartouches_details p { width:100%; text-align:center; margin:0; padding:0; }
				.contactCartouches_details h2 { font-family:'dopest', Verdana, Geneva, sans-serif; font-weight:normal; font-size:3rem; color:rgba(244,175,47); }
			.contactCartouches_details span { color:rgba(193,2,44); font-weight:bold; }
		.contactCartouches_map { width:60%; }
			.contactCartouches_map iframe { width:100%; min-height:95%; border:rgba(131,182,24) 0.25rem solid; }

	.errormessageBox { width:95%; margin:1rem auto; display:flex; flex-wrap:wrap; padding:2rem; border:rgba(193,2,44) 0.5rem solid; align-items:center; justify-content:space-between; }
		.errormessageBox_pict { width:20%; display:flex; flex-wrap:wrap; align-items:center; }
		.errormessageBox_text { width:75%; }

	.contactTitle_resa { width:100%; display:flex; flex-wrap:wrap; align-items:center; }
		.contactTitle_resa_pict { width:35%; font-size:0; }
		.contactTitle_resa_text { width:65%; padding:2em; }
			.contactTitle_resa_text_content { width:100%; display:flex; flex-wrap:wrap; background-color:#F6F6F6; padding:1em; }
				.contactTitle_resa_text_content h2, .contactTitle_resa_text_content div p	{ width:100%; margin:0; padding:0; }
				.contactTitle_resa_text_content div { width:50%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; padding:1em; }

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

}

@media screen and (max-width:1280px) {
	/* 17-19 pouces */
}

@media screen and (max-width:1020px) {
	/* 15 pouces */

}

@media screen and (max-width:600px) {
	.contact { padding:0.5rem; }
		.formBox, .formBoxTextarea { width:100%; }
		input[type=text] { width:100%; }
	.contactCartouches { width:95%; padding:0.5rem; }
		.contactCartouches_details, .contactCartouches_map { width:100%; margin:1rem 0; }
			.contactCartouches_details { padding:1em 0.25em; }
			.spacer { display:none; }
			.contactCartouches_details_ouverture { margin:1rem 0; }
			.contactCartouches_map iframe { width:100%; height:500px; }
	.errormessageBox { width:100%; }
		.errormessageBox_pict { width:55%; margin:0 auto; }
		.errormessageBox_text { width:100%; }
	.contactTitle { padding:1em 0; }
		.contactTitle_resa_pict, .contactTitle_resa_text { width:100%; padding:0; }
			.contactTitle_resa_text_content { padding:0; }
				.contactTitle_resa_text_content div { width:100%; }
}