/***** champs formulaire *****/ 
label									{ font-size: clamp(15px, 1.3vw, 17px); line-height: 140%; display: block; margin: clamp(25px, 7vw, 40px) 0 clamp(8px, 1.2vw, 12px) 0;}
select,
input,
textarea 								{ width: 100%; height: 50px; font: 400 clamp(14px, 1.2vw, 16px)/170% "SuisseIntl-Regular"; letter-spacing: 0.2px; padding: 0 20px 2px 20px; border-radius: var(--radiusXS); border: 1px solid #fff; background: #fff; color: var(--softblack);}
select									{ -webkit-appearance: none; appearance: none; background: url("../images/arrow_dwn_b.svg") calc(100% - 20px) 52% no-repeat #fff; padding-bottom: 0;}
textarea								{ min-height: 160px; padding: 15px 20px; display: block;}
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;}
select:focus,
input:focus,
textarea:focus 							{ border-color: var(--teal); outline: 1px solid var(--teal);}
input[type=checkbox] 					{ -webkit-appearance: checkbox; -ms-appearance: checkbox; appearance: checkbox; -moz-appearance: checkbox; -o-appearance: checkbox; width: 22px; height: 22px; display: block; float: left; padding: 0; margin: 0;}
input[type=radio] 						{ -webkit-appearance: radio; -ms-appearance: radio; appearance: radio; -moz-appearance: radio; -o-appearance: radio; width: 22px; height: 22px; display: block; float: left; padding: 0; margin: 0;}

::placeholder 							{ color: var(--softblack); opacity: 0.5;}

.checkbox,
.radio									{ line-height: 20px; margin-block: clamp(4px, 1vw, 6px);}
.checkbox input,
.radio input							{ margin-right: 10px;}

.checkbox label,
.radio label							{ margin: 0; font-size: clamp(14px, 1.2vw, 16px); font-weight: 400; line-height: 22px;}

@media (max-width:1200px) { 
label									{ font-size: clamp(15px, 3vw, 18px);}
select,
input,
textarea 								{ font-size: clamp(13px, 2.8vw, 15px);}
}
@media (max-width:700px) { 
select,
input,
textarea 								{ height: 55px; padding: 0 18px;}
textarea								{ padding: 15px 18px;}
}


/** formulaire **/
.formulaire 							{ position: relative; display: grid; color: var(--softblack);}
.formulaire label:first-child 			{ margin-top: 10px;}
.formulaire .grid 						{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;}
.formulaire .grid * 					{ margin: 0;}
.formulaire .grid .fullw				{ grid-column: span 2;}
.formulaire .link 						{ width: auto; border: none; justify-self: end; cursor: pointer; padding-bottom: 2px;}

@media (max-width:2000px) { 
.formulaire 							{ padding: 0;}
}
@media (max-width:1400px) { 
.formulaire .grid 						{ grid-template-columns: 1fr;}
.formulaire .grid .fullw				{ grid-column: auto;}
}
@media (max-width:700px) { 
.formulaire .link 						{ width: 100%; padding-bottom: 12px;}
}


/***** confirmation formulaire *****/
.confirmation_form			 			{ text-align: center; color: var(--softblack); margin: 0;}
.confirmation_form p			 		{ margin: 10px 0 15px 0;}



/***** RGPD *****/
#rgpdForm 							 	{ font: 400 13px/170% "SuisseIntl-Regular"; letter-spacing: 0.4px; margin: clamp(20px, 7vw, 30px) 0; border-radius: var(--radiusXS); position: relative; max-width: 650px;}
#rgpdForm input[type=checkbox]		 	{ width: 22px; height: 22px; position: absolute; left: 15px; top: 50%; padding: 0; margin: -11px 0 0 0; appearance: checkbox; -webkit-appearance: checkbox; -ms-appearance: checkbox; -moz-appearance: checkbox; -o-appearance: checkbox;}
#rgpdForm input[type=checkbox]:focus 	{ outline: none;}

#rgpdForm label							{ display: block; margin: 0; font: 400 13px/170% "SuisseIntl-Regular"; letter-spacing: 0.4px; padding: 0 15px 0 55px;}
#rgpdForm a								{ position: relative; color: var(--softblack); border-bottom: 1px solid var(--softblack); padding-bottom: 1px;}
#rgpdFormAcceptError					{ padding: 10px 15px 0 55px; color: var(--orange); line-height: 170%;}

@media (max-width:1400px) { 
#rgpdForm input[type=checkbox]			{ left: 0; top: 5px; margin: 0;}
#rgpdForm label							{ padding: 5px 0 5px 40px;}
#rgpdFormAcceptError					{ padding: 10px 0 0 40px;}
}
@media (max-width:700px) { 
#rgpdForm 								{ padding: 0;}
#rgpdForm input[type=checkbox]			{ width: 18px; height: 18px; top: 2px; margin: 0;}
#rgpdForm label							{ padding: 0 0 0 30px; font-size: 11px; line-height: 20px;}
#rgpdFormAcceptError					{ padding: 10px 0 0 30px;}
}



/***** page contact *****/
#contact .top_page .grid_bloc .container 				{ grid-template-columns: 1fr 1.2fr; grid-gap: 5vw;}
#contact .bloc_form 									{ border-radius: var(--radiusL); overflow: hidden; position: relative; padding: clamp(20px, 3.5vw, 60px); background: var(--softblue); margin-top: clamp(-40px, -3vw, -20px);}

#contact .coordonnees  									{ position: relative; border-radius: var(--radiusM); overflow: hidden; padding: clamp(20px, 3vw, 40px); max-width: 540px;}
#contact .coordonnees:before 							{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--darkteal); opacity: 0.35; content: "";}
#contact .coordonnees>*									{ position: relative;}
#contact .coordonnees .sous_titre 						{ line-height: 110%; padding-bottom: 5px;}
#contact .coordonnees .chapo 							{ line-height: 110%; margin: 0;}
#contact .coordonnees .adresse 							{ padding: 0 0 12px 0;}
#contact .coordonnees .adresse a						{ font-size: 14px; font-family: "SuisseIntl-Regular"; display: inline-block; margin-top: 5px;}
#contact .coordonnees .adresse a:after					{ margin-bottom: -4px; margin-right: 2px;}
#contact .coordonnees .contact_infos a					{ color: var(--softblack); color: #fff; font-family: "SuisseIntl-Regular";}
#contact .coordonnees .contact_infos :last-child		{ margin-bottom: 0;}

#contact .offices .titre_main							{ margin-bottom: clamp(15px, 2.2vw, 25px);}
#contact .card_office .sous_titre						{ margin: clamp(15px, 2vw, 20px) 0 5px 0;}
#contact .card_office .adresse a						{ font-size: 14px; font-family: "SuisseIntl-Regular"; display: inline-block; margin-top: 5px;}
#contact .card_office .adresse a:after					{ margin-bottom: -4px; margin-right: 2px;}

@media (min-width:1201px) { 
#contact .coordonnees .adresse a:hover					{ color: #fff;}
#contact .coordonnees .adresse a:hover:after			{ filter: brightness(0) invert(1);}
#contact .coordonnees .contact_infos a:hover			{ color: var(--orange);}
#contact .coordonnees .contact_infos a:hover:after		{ filter: none;}
}
@media (max-width:2000px) { 
#contact .top_page .square.yellow  						{ left: 70%;}
#contact .grid_sticky .container 						{ padding-left: 5vw;}
}
@media (max-width:1800px) { 
#contact .top_page .square.yellow  						{ left: 75%;}
#contact .grid_sticky .container 						{ padding-left: 10vw;}
}
@media (max-width:1400px) { 
#contact .top_page .grid_bloc .container 				{ grid-template-columns: 1fr 1.6fr;}

#contact .coordonnees .sous_titre span					{ padding-top: 10px; display: block;}
}
@media (max-width:1000px) { 
#contact .top_page .grid_bloc .container 				{ grid-template-columns: 1fr; grid-gap: clamp(40px, 8vw, 60px); padding-bottom: 20px;}
#contact .bloc_form 									{ margin-top: 0;}
#contact .coordonnees 									{ max-width: none;}
#contact .coordonnees:before 							{ background: var(--teal);}
}
@media (max-width:700px) { 
#contact .coordonnees 									{ padding: 6.5vw;}
#contact .coordonnees .adresse 							{ padding-bottom: 8px;}
#contact .coordonnees .adresse a						{ font-size: 12px;}
#contact .coordonnees .adresse a:after					{ margin-bottom: -3px;}
#contact .card_office .adresse a						{ font-size: 12px;}
#contact .card_office .adresse a:after					{ margin-bottom: -3px;}
}