@media (max-width:600px) { 
    .titre_main                         { margin-bottom: 0;}
    .chapo                              { display: none;}
}



/***** champs formulaire *****/ 
label								{ font: 500 16px/30px "Montserrat"; display: block;}
label span							{ color: #d52121;}
select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
textarea 							{ width: 100%; height: 60px; font: 400 14px/24px "Montserrat"; letter-spacing: 0.4px; padding: 0 25px 2px 25px; background: #fff; border: 2px solid #e0fafb; color: #002c3e; border-radius: 5px;}
textarea							{ min-height: 160px; margin-top: 20px; padding: 20px 25px; display: block;}
select							    { -webkit-appearance: none; appearance: none; background: url("../images/chevron_down.svg") calc(100% - 25px) 50% no-repeat #fff; padding-bottom: 0;}
input[type=checkbox] 				{ -webkit-appearance: checkbox; -ms-appearance: checkbox; appearance: checkbox; -moz-appearance: checkbox; -o-appearance: checkbox; width: 20px; height: 20px; display: block; float: left; padding: 0; margin: 0;}
input[type=radio] 				    { -webkit-appearance: checkbox; -ms-appearance: checkbox; appearance: checkbox; -moz-appearance: checkbox; -o-appearance: checkbox; width: 20px; height: 20px; display: block; float: left; padding: 0; margin: 0;}
::placeholder 						{ color: #002c3e; opacity: 0.65;}

fieldset                            { border: none; padding: 0; margin: 0; }


@media (max-width:600px) { 
select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
textarea 							{ font-size: 12px; line-height: 22px; height: 50px; padding: 0 20px 2px 20px;}
}


/** formulaire **/
.formulaire 						{ position: relative;}
.formulaire form .grid 				{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px;}
.formulaire form .label				{ margin: 25px 0 10px 0;}
.formulaire form .btn_sub 			{ text-align: right; padding: 30px 0 0 0;}
.formulaire form .btn_sub .link		{ line-height: 55px; cursor: pointer; padding: 0 30px 2px 30px; border: none;}

@media (max-width:1000px) { 
.formulaire form .grid 				{ grid-template-columns: 1fr;}
}
@media (max-width:600px) { 
.formulaire form .grid 				{ grid-gap: 10px;}
.formulaire form .label				{ margin: 15px 0 10px 0;}
.formulaire form .btn_sub 			{ padding: 25px 0 0 0;}
.formulaire form .btn_sub .link		{ line-height: 50px; padding: 0; width: 100%; text-align: center;}
}


/***** confirmation formulaire *****/
.confirmation_form			 		{ text-align: center;}
.confirmation_form p			 	{ margin: 5px 0 15px 0;}

@media (max-width:600px) {
.confirmation_form p			 	{ margin: 0 0 10px 0;}
}


/***** RGPD *****/
#rgpdForm 							{ font: 400 12px/22px "Montserrat"; letter-spacing: 0.6px;}
#rgpdForm input[type=checkbox]		{ width: 20px; height: 20px; display: block; float: left; padding: 0; margin: 2px 0 0 0; -webkit-appearance: checkbox; -ms-appearance: checkbox; appearance: checkbox; -moz-appearance: checkbox; -o-appearance: checkbox;}
#rgpdForm label						{ display: block; margin: 0; padding-left: 40px; font: 400 12px/22px "Montserrat"; letter-spacing: 0.6px;}
#rgpdForm a							{ position: relative; color: #002c3e; padding-bottom: 2px; border-bottom: 1px solid #ccc;}
#rgpdFormAcceptError				{ padding: 10px 0 0 40px; color: #d52121;}

@media (min-width:1201px) {
#rgpdForm a:hover 					{ opacity: 0.5;}
}
@media (max-width:600px) { 
#rgpdForm 							{ font-size: 10px; line-height: 20px;}
#rgpdForm input[type=checkbox]		{ width: 16px; height: 16px; margin: 4px 0 0 0;}
#rgpdForm label						{ padding-left: 30px; font-size: 10px; line-height: 20px;}
#rgpdFormAcceptError				{ padding: 5px 0 0 30px;}
}


/* custom */
.rgpd 								{ margin-top: 40px;}

@media (max-width:600px) { 
.rgpd 								{ margin-top: 25px;}
}


/***** page contact *****/
.bloc_contact 				        { position: relative;}
#contact .bloc_contact 				{ display: grid; grid-template-columns: 380px 1fr; grid-gap: 60px; align-items: start;}
#contact .bloc_contact .link 		{ padding: 0 30px; cursor: pointer; padding-bottom: 2px; height: 60px; line-height: 58px; border: none;}
#contact .bloc_contact .link:before	{ display: none;}
#contact .left img                  { border-radius: 20px 20px 0 0 ;}
#contact .coordonnees               { background: var(--greydark); color: #fff; padding: 40px; border-radius: 20px;}
#contact .coordonnees .sous_titre   { color: var(--main-color);}
#contact .coordonnees p				{ margin-bottom: 10px;}
#contact .coordonnees p a			{ color: #fff; border: none; line-height: 40px; height: 40px; display: inline-block;}
#contact .coordonnees p a.no-class  { line-height: inherit; display: inline; height: inherit;} 
#contact .coordonnees .phone        { background: url(../images/tel_blue.svg) left center no-repeat; padding-left: 35px; margin-top: 0; margin-bottom: 15px;}
#contact .coordonnees .mail         { background: url(../images/mail.svg) left center no-repeat; line-height: 40px; padding-left: 35px;}
#contact .coordonnees .localisation { background: url(../images/marker.svg) left 4px no-repeat; line-height: 26px; padding-left: 35px; margin-bottom: 15px;}
#contact .coordonnees .localisation span { display: block;}
#contact .coordonnees .localisation span br { display: none;}

#contact form .sous_titre			{ margin-bottom: 30px;}
#contact form .btn_sub 				{ text-align: right;}



@media (min-width:1201px) { 
#contact .coordonnees p a:hover 	{ color: var(--main-color); }
#contact form .link:hover 			{ background: var(--greydark); color: #fff;}
}
@media (max-width:800px) { 
#contact .bloc_contact 				{  grid-template-columns: 1fr; grid-gap: 40px;}
}
@media (max-width:700px) { 
#contact .bloc_contact 				{ grid-gap: 50px;}
#contact .coordonnees 		 		{ padding: 20px 7.5vw 20px 7.5vw;}
#contact .coordonnees .content 		{ padding: 0; margin-top: 40px;}
#contact form .sous_titre			{ margin-bottom: 20px;}
#contact form label 				{ margin-bottom: 10px;}
#contact form .btn_sub 				{ text-align: center; padding: 0 ;}
}




#simulation .sous_titre                                 { font-size: 22px; line-height: 32px; }
#simulation .formulaire                                 { background-color: var(--main-color-light); padding: 50px 50px 10px 50px; border-radius: 20px; }
#simulation .section_q:first-of-type                    { margin: 0 auto 40px; }
#simulation .section_q                                  { margin: 40px auto; }


#simulation .choix_radio                               { margin: 10px 0; }
#simulation .choix_radio input                         { margin-top: 4px; }
#simulation .choix_radio label                         { margin-left: 35px; }



#simulation .produits									{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 50px; text-align: center;}
#simulation .produits input[type=radio] 				{ width: 0; height: 0; }
#simulation .produits label								{ margin: 0; line-height: 0; font-size: 0;}
#simulation .produits label input 						{ margin: 0;}
#simulation .produits div   							{ padding: 20px; border: 2px solid #fff; border-radius: 10px; background: #fff; box-shadow: 0 0 30px 0 rgba(25, 215, 227, 0.15); cursor: pointer;}
#simulation .produits div img 							{ width: 70px; height: auto; display: block; margin: 0 auto 20px auto;}
#simulation .produits div span							{ font-size: 14px; line-height: 20px; display: block; color: #242424;}

#simulation .produits .label > input:checked + div 		{ border-color: #fff; background: transparent; cursor: default;}


#simulation .chambre                                    { display: flex; gap: 70px; }

#simulation .step                     { display:none } 
#simulation .step h3.number           { display: flex; align-items: center; column-gap: 20px; margin-bottom: 20px;}                              
#simulation .step span.number         { display: block; min-width: 50px; height: 50px; text-align: center; background: #999; border-radius: 50%; color: #fff; font-size: 18px; line-height: 50px; font-weight: 500;}

#simulation .step.active              { display: block; margin-bottom: 60px; }
#simulation .step.active span.number  { background: var(--main-color); color: #ffffff; }

@media (max-width:1000px) { 
    #simulation .produits { grid-gap: 20px;}
    #simulation .chambre { gap: 30px; }
}

@media (max-width:800px) { 
    #simulation .formulaire { padding: 30px 30px 10px 30px;}
    #simulation .produits div { padding: 15px; }
}

@media (max-width:700px) {
    #simulation .sous_titre { font-size: 18px; line-height: 28px; }
    #simulation .produits { grid-template-columns: 1fr; }
    #simulation .chambre { flex-wrap: wrap; gap: 0 20px; }
 }

 @media (max-width:500px) {
    #simulation .formulaire         { padding: 20px 20px 10px 20px;}
    #simulation .step span.number   { min-width: 40px; height: 40px; line-height: 40px; font-size: 16px; }
    #simulation .sous_titre         { font-size: 16px; line-height: 24px; }
    #simulation label               { font-size: 14px; line-height: 22px; }
 }