/*
Theme Name: Divi Enfant par Incomm
Description: Theme enfant du theme Divi
Author: Incomm
Author URI: https://www.incomm.fr
Template: Divi
Version: 2.00
*/

/* WAFKEY_Hd6dBtQ6DUQWhXi56VTEu7Y8esR4kRXxEWI */

.quicklinks a {
	height: auto !important;
}

#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div, #cmplz-document .cmplz-dropdown .cookies-per-purpose div,   #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .name-header, #cmplz-document .cmplz-dropdown .cookies-per-purpose .name-header{background-color: #131313!important;}



a{
	text-decoration:none!important;
}

.pa-header {
    background: transparent;
    -webkit-transition: background-color 1s ease-out;
    -moz-transition: background-color 1s ease-out;
    -o-transition: background-color 1s ease-out;
    transition: background-color 1s ease-out;
}

.pa-fixed-header {
    background: #000 !important;
    -webkit-transition: background-color 1s ease-out;
    -moz-transition: background-color 1s ease-out;
    -o-transition: background-color 1s ease-out;
    transition: background-color 1s ease-out;
    padding: 0 !important;
}


/* Header */
.et-menu .menu-item-has-children>a:first-child:after {
	right: auto !important;
	margin-right: 5px !important;
}

#menu-menu-principal li{
	padding: 0 1vw;
	text-decoration:none;
}

#menu-menu-principal li a{
	text-align:center!important;
}

.et_pb_column_1_3 .et_pb_promo, .et_pb_column_1_4 .et_pb_promo{
	padding:40px 20px!important;
}

/* menu burger - 1024 tablette et mobile*/
@media (max-width: 1300px) {
	

/* 	.et_pb_column_0_tb_header{
		width:100%!important;
	} */
    .pa-hamburger-menu .et_pb_menu__menu {
        display: none !important;
    }
    .pa-hamburger-menu .et_mobile_nav_menu {
        display: flex !important;
        float: none;
        margin: 0 6px;
		width:100vw!important;
        align-items: center;
		justify-content: center;
    }	
	.et_pb_sticky .col-1-head{
		display:none;
	}
		.et_pb_sticky .et_pb_menu_0_tb_header{
		margin-top:0!important;
	}
	.et_pb_sticky .row-head-resp{
		padding-top:0px!important;
		padding-bottom:5px!important;
	}
	#mobile_menu1 li{
		text-align:center!important;
	}
	#mobile_menu1{
		padding:0px!important;
	}
	.et_mobile_menu {
    left: 20%!important;
    width: 60%!important;
	}
}



#cmplz-document {max-width: 100% !important;}



@media (min-width: 981px) {

header{
	position: absolute;
	width: 100%;
}
	
#menu-menu-principal li {
  margin-top: 0 !important;
  padding: 0 1.5vw!important;
}

#menu-menu-principal li a{
	display: flex;
	align-items: center;
}
	
.rs-header img{
	width: 1.302vw!important;
	height: 1.302vw!important;
}	
	
.rs-footer .wp-image-938{
	width: 1.094vw!important;
	height: 1.094vw!important;
}
	
.rs-footer .wp-image-940{
	width: 1.302vw!important;
	height: 1.302vw!important;
}
	
	
.rs-footer .wp-image-939{
	width: 1.198vw!important;
	height: 1.146vw!important;
}
	

	
	
	
	
	
	
}




@media (min-width: 981px) and (max-width: 1700px){
	
	
.cloture{min-height: 25.67vw!important;}	
	
	
}

@media (max-width:767px) {
	#mobile_menu1{
		padding-bottom:20px !important;
	}
}


@media (max-width: 981px) {
    
    .pa-hamburger-menu .et_mobile_nav_menu {  
		width:100vw!important;
    }
	.et_pb_sticky .col-1-head{
		display:none;
	}
	.et_pb_sticky .et_pb_menu_0_tb_header{
		margin-top:0!important;
	}
	.et_pb_sticky .row-head-resp{
		padding-top:0px!important;
		padding-bottom:5px!important;
	}
	.et_mobile_menu {
    left: 25%!important;
    width: 50%!important;
	}
	
	/*** Column Order First sections***/
	.custom_row {
	  display: -webkit-box;
	  display: -moz-box;
	  display: -ms-flexbox;
	  display: -webkit-flex;
	  display: flex;
		-webkit-flex-wrap: wrap; /* Safari 6.1+ */
		flex-wrap: wrap;
	} 	
	.first-on-mobile {
		-webkit-order: 1!important;
		order: 1!important;
	}
	.second-on-mobile {
		-webkit-order: 2!important;
		order: 2!important;
	}
	.third-on-mobile {
		-webkit-order: 3!important;
		order: 3!important;
	}	
		
	.fourth-on-mobile {
		-webkit-order: 4!important;
		order: 4!important;
	}
	
}
@media (max-width: 767px) {
	.et_mobile_menu {
    left: 5%!important;
    width: 90%!important;
	}
	
}

.et_pb_menu .et_mobile_nav_menu li { 
    list-style-type: none; 
}


/* metaslider - diapo */
.metaslider .flexslider {
	margin: 0!important;
}
.metaslider .flex-control-nav {
	position: absolute;
	bottom: 12px!important;
}
.metaslider .flexslider .flex-direction-nav li a.flex-prev {
  background-image: url('/wp-content/uploads/2024/07/fleche-gauche.png') !important;
  width: 1.04vw !important;
  height: 1.927vw!important;
  background-size:contain !important;
}
.metaslider .flexslider .flex-direction-nav li a.flex-next {
  background-image: url('/wp-content/uploads/2024/07/fleche-droite.png') !important;
  width: 1.198vw!important;
  height: 2.135vw!important;
  background-size:contain !important;
}
.flex-control-paging li a.flex-active, .flex-control-paging li a:hover {
	background: #ccc !important;
}
.metaslider .flexslider .flex-direction-nav li a {
	margin: 0 3em !important;
}
.flex-control-paging li a {
	background: #fff !important;
}

.flex-direction-nav .flex-next {
	right: 0 !important;
}



/* FOOTER */
#menu-menu_footer {
	width: 100%;
	margin-bottom: 0 !important;
	display: flex;
	justify-content: space-around !important;
}

#menu-menu_footer li {
	margin-bottom: 0!important;
	padding-right: 1vw;
}

footer .et_pb_row {
	padding: 0 !important;
}

@media only screen and (max-width: 991px) {
	#menu-menu_footer {	
			-ms-flex-pack: center !important;
			justify-content: center !important;	
			display: flex;
			flex-direction: column;
		}
}

/* Back to top */
.et_pb_scroll_top.et-pb-icon {
  background: #fff !important;
  padding: 0px !important;
  color: #131313;
  width: 50px !important;
  height: 50px !important;
  bottom: 80px;
  right: 20px;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px !important;
  border: 2px solid #fff !important;
}

/* page contact */
/***formulaire DIVI***/

.et_pb_contact_form{
	margin-left:0%!important;
}

p.et_pb_contact_field{
	padding: 0px 0 0 0.5%!important;
    margin-bottom: 0.5%!important;
}

.et_contact_bottom_container{
	margin-top:1vw!important;
}

.et_pb_contact_form_0 .input[type="checkbox"]+label{ /*couleur texte RGPD*/
	color:#000!important;
}

.et_pb_contact p input[type=checkbox]:checked+label i:before, .et_pb_subscribe .et_pb_contact_field input[type=checkbox]:checked+label i:before { 
	color: #000;/*** couleur picto check RGPD***/
}
.et_pb_contact_field_checkbox a:hover { /*couleur Hover lien RGPD*/
	color: #7c7c7c !important;
}

#menu-menu-principal li {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
@media (max-width:981px){
  .et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
    background-attachment: initial !important;
  }
}







/* ************************************ Edito ******************************************* */

/******* Guide *******/

/* Chaque variable va être attribuée à un endroit dans le css plus bas
Par exemple la couleur que l'on mettra dans la variable : "--lien-couleur" va s'appliquer à la couleur des liens
Pas besoin de changer la taille des titres et paragraphes en responsive car ils se changeront tout seul en fonction de la version bureau pour que ce soit uniforme.

Le but est de pouvoir changer tout ce qui est nécessaire pour une MEP dans les variables afin de gagner du temps

Si vous avez des questions ou autre n'hésitez pas à me contacter sur Teams

Camille VACHER
*/


/* ************************************ Edito ******************************************* */

:root
{
/*****************************Liste des couleurs du site**********************************/
  --couleur1:#222222; 
  --couleur2:#50afcf;
  --couleur3:#4a4a4a;
  --couleur4:#000;
  --couleur5:#FFFFFF;
  --font-family-titres: 'Spinnaker', Helvetica, Arial, Lucida, sans-serif;
  --font-family-p:'Spinnaker', Helvetica, Arial, Lucida, sans-serif;

   /********* h1 mise en forme désactivée pour eviter conflits avec les Devs 
  --font-size-h1: 45px;
  --font-weight-h1: 700;************/
  /********* h2 ************/
  --font-size-h2: clamp(24px,1.75vw,24px);
  --font-size-h2-responsive:24px;
  --font-weight-h2: 300;
 /********* h3 ************/
 --font-size-h3: clamp(22px,1.5vw,22px);
  --font-size-h3-responsive: 22px;
  --font-weight-h3: 300;
/********* p ul li ************/
  --font-size-p: clamp(16px,1vw,16px);
  --font-size-p-responsive: 16px;
  --font-weight-p: 300;
  /*********liens ************/
  --font-weight-liens: 500;
}


/************************************* Variables à compléter ***************************/

/***** Couleur des liens 

.contenu .et_pb_text_inner a {
  color: var(--couleur3);
}

.contenu .et_pb_text_inner a:hover {
  color: var(--couleur2);
}*****/

/***** Couleurs des liens sur texte blanc 

.contenu .texteblanc a {
  color: var(--couleur3);
}

.contenu .texteblanc a:hover {
  color: var(--couleur2);
}*****/

/***** Titres et paragraphes 

.contenu h1 {
    font-family: var(--font-family-titres);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-h1);
    color: var(--couleur1);
}*****/

.contenu h2 {
  font-family: var(--font-family-titres);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  color: var(--couleur2);
  line-height: 1.5em;
  text-transform: uppercase;
  text-align: left;
}

.contenu h2::after {
  content: "";
  width: 60px;
  height: 2px;
  display: block;
  background:  var(--couleur5);
  margin: 5px 0px;
  }



    
.contenu .centrer h2::after {
    margin: 15px auto;
  }

.contenu h3 {
  font-family: var(--font-family-titres);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-h3);
    color: var(--couleur3);
  text-align: left;
    border-left: 2px solid var(--couleur2);
       padding: 5px;
}

/************************ Fin de la section des variables à compléter *********************/

/*************************** Lien dans les modules textes *******************************/
.contenu .et_pb_text_inner a {
  color: var(--couleur2);
  font-weight: var(--font-weight-liens);
  text-decoration: none ;
  border-bottom: 1px solid transparent;
  padding: 0px 2px;
  transition: all 0.3s ease-in-out;
}

.contenu .et_pb_text_inner a:hover {
  color: var(--couleur5);
  border-bottom: 1px solid var(--couleur5);
  text-decoration: none;
}



/******************************** Paragraphes ******************************/
.contenu p,
.contenu ul,
.contenu ol,
.contenu li,
.contenu table {
  font-family: var(--font-family-p);
  font-size: var(--font-size-p) ;
  font-weight: var(--font-weight-p);
  color: var(--couleur5);
  padding-bottom: 0;
  line-height: 1.6em;
  margin-bottom: 1em;
  text-align: left;
}


.contenu ul li {
  list-style-type:none;
margin-bottom: 0.4em;
}
  
.contenu ul li::before {
  display: inline-block;
  content: "";
  width: 0.5em;
  aspect-ratio: 1;
  background-color: var(--couleur2);
  margin-right: 1em;
  border-radius:100%
}

.contenu .grostitre p
{
  font-size: clamp(28px,2vw,32px);
  color: var(--couleur1);
  font-family: var(--font-family-titres);
  font-weight: var(--font-weight-liens);
  text-align: center;
  color: var(--couleur3);
}

.grostitre p em {
  display: block;
  font-style: normal;
  font-weight: 300;
  font-size: 60%;
  text-align: left;
  color: var(--couleur2);
  text-transform: none;
  font-family: var(--font-family-p);
  line-height: 1.5em;
}
.contenu h2 strong, .contenu h3 strong{
  font-weight: 500;
}

.contenu p strong, .contenu strong{
  font-weight: 900;
}

/********************* Changement de couleur si besoin***************************/
/****************** Pour mettre paragraphe et titre en blanc ********************/

.contenu .texteblanc p,
.contenu .texteblanc ul,
.contenu .texteblanc ol,
.contenu .texteblanc li,
.contenu .texteblanc table,
.contenu .texteblanc h1,
.contenu .texteblanc h2,
.contenu .texteblanc h3 {
  color: var(--couleur5);
}


.texteblanc p,
.texteblanc ul,
.texteblanc ol,
.texteblanc li,
.texteblanc table {
  font-family: var(--font-family-p);
  font-size: var(--font-size-p) ;
  font-weight: var(--font-weight-p);
  color: var(--couleur5);
  padding-bottom: 0;
  line-height: 1.6em;
  margin-bottom: 1em;
  text-align: left;
}

.texteblanc h2 {
  font-family: var(--font-family-titres);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  color: var(--couleur5);
  line-height: 1.5em;
  text-transform: uppercase;
  text-align: left;
}

.texteblanc h2::after {
  content: "";
  width: 60px;
  height: 4px;
  display: block;
  background:  var(--couleur5);
  margin: 5px 0px;
  }



    
.texteblanc .centrer h2::after {
    margin: 15px auto;
  }

.texteblanc h3 {
  font-family: var(--font-family-titres);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-h3);
    color: var(--couleur3);
  text-align: left;
}



.texteblanc a {
  color: var(--couleur5);
  font-weight: var(--font-weight-liens);
    text-decoration: none ;
  border-bottom: 1px solid transparent;
  padding: 0px 2px;
  transition: all 0.3s ease-in-out;
}

.texteblanc a:hover {
  color: var(--couleur4);
  text-decoration: none;
  border-bottom: 1px solid var(--couleur4);
}

/***********AUTRE*********/

/************************************** Format ***********************************/

.centrage {
  display: flex;
  align-items: center;
  justify-content: center;
}

/****************************** MediaQueries ***********************************/

@media (max-width: 1366px) {

 
}

@media (max-width: 980px) {
  .centrage {
    flex-direction: column;
  }

  .reverse {
    display: flex;
    flex-direction: column-reverse;
  }

  .contenu h2 {
    font-size: var(--font-size-h2-responsive);
  }

  .contenu h3 {
    font-size: var(--font-size-h3-responsive);
  }

  .contenu p,
  .contenu ul,
  .contenu ol,
  .contenu li,
  .contenu table {
    font-size: var(--font-size-p-responsive);
  }

  .contenu .grostitre p
{
  font-size: var(--font-size-h3-responsive);
}
}

@media (max-width: 820px) {

}

@media (max-width: 420px) {

  .contenu h2 {
    font-size: calc(var(--font-size-h2-responsive) - 2px);
  }

  .contenu h3 {
    font-size: calc(var(--font-size-h3-responsive) - 2px);
  }

  .contenu p,
  .contenu ul,
  .contenu ol,
  .contenu li,
  .contenu table {
    font-size: calc(var(--font-size-p-responsive) - 0px) !important;
  }
}




.cadress::before {
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: var(--couleur2);
    margin-bottom: -47px;
    margin-left: -7px;
}

.cadress::after {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    background-color: var(--couleur3);
    margin-left: calc(100% - 43px);
    margin-top: -43px;
}


.cadress2::before {
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: var(--couleur3);
    margin-bottom: -47px;
    margin-left: -7px;
}

.cadress2::after {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    background-color: var(--couleur2);
    margin-left: calc(100% - 43px);
    margin-top: -43px;
}




.tabss tr th + th {
  text-align: right;
  color: var(--couleur2);
}

.tabss tr > td {
  font-weight: 600;
}

.tabss tr td + td {
  color: var(--couleur2);
  text-align: right;
}

.tabss th {
    background-color: #f2f2f2;
}

.tabss tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.tabss tbody tr:hover
{
  background-color:var(--couleur2);
}

.tabss tbody tr:hover td
{
  color:#FFF;
}
/******************************** Fin Edito **************************************/

.gform_wrapper.gravity-theme .gform_validation_errors>h2.hide_summary {
    color: #e02b20 !important;
}

div.gfield_description.validation_message{
    color: red !important;
}