@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,600&display=swap');

/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}

textarea { resize:none;}
a img{ border:none;}


html {
background-color:#FFF;
color:#111;
text-align:left;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 62.5%;
}

body {
background-color:#fff;
color:#111;
text-align:left;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.7rem;
overflow-wrap: break-word;
}


/* Box Model */
*, *:before, *:after {
		box-sizing: border-box;
	}


a:link {color:#c8c8c8;text-decoration:none;}
a:visited {color:#c8c8c8;}
a:hover {color: #dcdcdc;}
a:active {color:#c8c8c8;}


/* masque la valeur du placeholder au clic*/
::-webkit-input-placeholder { opacity: 1;}  /* Chrome 56, Safari 9 */
:-moz-placeholder { opacity: 1;} /* FF 4-18 */
::-moz-placeholder { opacity: 1;} /* FF 19-51 */
:-ms-input-placeholder { opacity: 1;} /* IE 10+ */
::placeholder { opacity: 1;} /* Modern Browsers */

*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome 56, Safari 9 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

input::placeholder{
color:#1f1f1f;
}

textarea::placeholder{
color:#1f1f1f;
}


h2{
font-size:2rem; font-weight:600;font-style:italic;margin:2rem 0rem 5rem 0rem;
}


.bouton{
background-color:#8aba42;
min-width:100px;
padding:0.6rem 3.0rem 0.7rem 3.0rem;
border: 1px solid #8aba42;
color:#FFF;
text-align:center;
border-radius: 2px;
font-size:1.6rem;
cursor: pointer;
font-weight:600;
font-family: inherit;
}

.bouton:hover{
background-color:#86cc40;
}

input:required {
border:1px solid #dcdcdc;
outline: 0;
box-shadow: none;
}

input:invalid {
outline: 0;
box-shadow: none;
border:1px solid #dcdcdc;
}

input:focus:invalid {
outline: 0;
box-shadow: none;
border:1px solid #fa781e;
}

select:required {
border:1px solid #dcdcdc;
outline: 0;
box-shadow: none;
}

select:invalid {
outline: 0;
box-shadow: none;
border:1px solid #dcdcdc;
}

select:focus:invalid {
outline: 0;
box-shadow: none;
border:1px solid #fa781e;
}


textarea:required {
border:1px solid #dcdcdc;
outline: 0;
box-shadow: none;
}

textarea:invalid {
outline: 0;
box-shadow: none;
border:1px solid #dcdcdc;
}

textarea:focus:invalid {
outline: 0;
box-shadow: none;
border:1px solid #fa781e;
}


#cookies{
Position:fixed;
bottom:10px;
right:10px;
width:25rem;
background-color: rgba(51, 51, 51, 1);
border-radius:10px;
text-align:center;
padding:1.5rem;
}

#cookies_txt{
font-size:1.3rem;
margin:0;
color:#fff;
line-height: 1.6rem;
}

#cookies_btn{
display:inline-block;
background-color:#466e00;
padding:0.2rem 2rem 0.2rem 2rem;
font-size:1.2rem;
font-weight:600;
margin:1rem 0rem 0rem 0rem;
border-radius:0.5rem;
color:#fff;
cursor:pointer;
}



#menu_gauche{
position:fixed;
top:0px;
left:0px;
width:30%;
height:100vh;
z-index:99;
text-align:center;
overflow:hidden;
color:#4d4d4d;
padding-top:4rem;
display:flex;
flex-direction: column;
justify-content:space-between;
font-size:0;
background-color:#f0f0f0;
}

#page{
position:relative;
min-height: 100vh; /* valeur pour les navigateurs ne supportant pas calc();*/
min-height: calc(100vh - 3.5rem);
text-align:center;
margin-left:30%;
padding:4.0rem 5.0rem 4.0rem 5.0rem;
}

#logo{
width:80%;
height:auto;
}

#logo_voiture{
width:100%;
height:auto;
}

#titre_form{
color:#8aba42;
font-size:3.0rem;
font-weight:600;
margin-bottom:3.0rem;
}



#bloc_form_contact {
width:70%;
max-width:1800px;
font-weight:600;
margin:0 auto;
}

#FORM_contact {
position:relative;
display:flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom:5rem;
}


.input_form_contact{
background-color:#fff;
border:1px solid #dcdcdc;
font-family: inherit;
font-size:1.7rem;
font-weight:400;
color:#1f1f1f;
padding:1.5rem;
border-radius: 2px;
width:calc(50% - 2.0rem);
text-align:left;
margin:1.0rem;
}

.input_form_contact_large{
background-color:#fff;
border:1px solid #dcdcdc;
font-family: inherit;
font-size:1.7rem;
font-weight:400;
color:#1f1f1f;
padding:1.5rem;
border-radius: 2px;
width:100%;
text-align:left;
margin:1.0rem;
}


.select_form_contact{
border:1px solid #dcdcdc;
font-family: inherit;
font-size:1.7rem;
font-weight:400;
color:#1f1f1f;
padding:1.5rem;
width:500px;
border-radius: 2px;
max-width:100%;
text-align:left;
margin:10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
  /* SVG background image */
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23999999'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
background-size: 15px;
background-position: calc(100% - 10px) center;
background-repeat: no-repeat;
background-color:#f0f0f0;
}



.area_form_contact{
background-color:#fff;
border:1px solid #dcdcdc;
font-family: inherit;
font-size:1.7rem;
font-weight:400;
color:#1f1f1f;
padding:1.5rem;
border-radius: 2px;
width:100%;
text-align:left;
vertical-align:top;
margin:1.0rem;
}


#message_form {
display:none;
width:100%;
margin:1rem;
color:#fff;
font-size:1.4rem;
font-weight:600;
padding:0.5rem;
}



#btn_contact {
margin-top:1.0rem;
}


#footer{
position:relative;
text-align:center;
height:3.5rem;
margin-left:30%;
background-color: #fff;
font-size:1.4rem;
font-weight:600;
color:#3d3d3d;
}

#footer_mob{
display:none;
position:relative;
text-align:center;
background-color:#4d4d4d;
font-size:1.4rem;
font-weight:600;
padding:1rem;
}




/*/////////////////////////PAGE MENTIONS /////////////////////////////////////////////////////////////*/

#blocmentions{
text-align:left;
padding:0rem 10.0rem 5.0rem 10.0rem;
}





/*/////////////////////////JALERT /////////////////////////////////////////////////////////////*/

#popup_container {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.5rem;
	min-width: 350px; /* Dialog will be no smaller than this */
	max-width: 500px; /* Dialog will wrap after this width */
	background: #fff;
	color:#0a0a0a;
}

#popup_title {
	font-size: 1.6rem;
	font-weight: 700;
	text-align: left;
	line-height: 1.5rem;
	color:#0a0a0a;
	background: #b4b4b4;
	border: solid 1px #b4b4b4;
	cursor: default;
	padding: 8px 20px 8px 20px;
}


#popup_message {
text-align: left;
padding: 0px 20px 20px 20px;
font-size: 0;
}

#popup_message li {
margin-left:15px;
}

#popup_message ul {
margin: 0px 0px;
}


#popup_prompt {
font-family: 'Open Sans', sans-serif;
font-size: 1.6rem;
font-weight: 400;
margin-top: 0px;
text-align: center;
background-color:#f0f0f0;
border:1px solid #b4b4b4;
color:#000;
padding:10px;
width: 100%;
}

#popup_select {
font-family: 'Open Sans', sans-serif;
font-size: 1.6rem;
font-weight: 400;
margin: 5px 0px 5px 0px;
text-align: left;
background-color:#474747;
border:1px solid #292929;
color:#c8c8c8;
padding:5px;
max-width:100%;
min-width:200px;
}

#popup_panel {
text-align: right;
padding: 10px 20px 10px 20px;
border-top: solid 1px #b4b4b4;
}

.popup_bouton{
position: relative;
display:inline-block;
background-color:#b4b4b4;
min-width:100px;
padding: 5px 20px 6px 20px;
border: 1px solid #b4b4b4;
color:#0a0a0a;
text-align:center;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-weight:700;
font-size: 1.5rem;
}

.popup_bouton:hover{
background-color:#c8c8c8;
}




/* ****************** ecran 4k 3840 ************************************* */

@media (min-width: 3000px) {
html{font-size: 125%;}
}



/* ****************** ecran 2560 ************************************* */
@media (min-width: 2200px) and (max-width: 3000px) {
html{font-size: 84%;}
}





/* ****************** ecran 1440 ************************************* */


@media (max-width: 1500px) {
html{font-size:47%;}
#bloc_form_contact {width:80%;}
}


@media (max-width: 1200px) {
html{font-size:62.5%;}
h2{font-size:1.7rem;}
.input_form_contact{width:100%;display:block;}
#titre_form{font-size:2.0rem;}
#blocmentions{padding:0rem 2.0rem 3.0rem 2.0rem;}
}

@media (max-width: 1000px) {
#bloc_form_contact {width:90%;}
}

	
/* ****************** Mobile ************************************* */
@media (max-width: 800px) {
h2{font-size:1.3rem;}
#bloc_form_contact {width:100%;margin:0,}
#footer{display:none;}
#footer_mob{display:block;margin-left:30%;background-color: #fff;padding:0;padding:1.5rem;color:#3d3d3d;}



}



@media (max-width: 620px) {
h2{font-size:1.7rem;}
#menu_gauche{position:relative;top:auto;left:auto;width:auto;height:100vh;padding-top:2rem;}
#page{position:relative;min-height: auto;margin-left:0;padding:4.0rem 1.0rem 4.0rem 1.0rem;}
#footer_mob{display:block;margin:0;background-color: #4d4d4d;padding:1rem;color:#fff;}
#cookies{Position:fixed;bottom:0px;right:auto;width:100%;left:0px;border-radius:0px;text-align:center;padding:1.5rem;}
}



@media (max-width: 500px) {
.bouton{width:100%;max-width:400px;}

}

@media (max-width: 430px) {

}

@media (orientation: portrait) {

}