/*
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;
}


 
a:hover{
	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;
	padding-bottom:1vw !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) {
	
	#mobile_menu1 li{
		background:#000!important;
		z-index:999999999!important;
	}
	#mobile_menu1 li a{
		background:#000!important;
	}
	.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;
	}
}*/
@media (max-width: 981px) {
    
    .pa-hamburger-menu .et_mobile_nav_menu {  
		width:100vw!important;
		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;
	}
	.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; 
}

/* sticky *
.et_pb_sticky .et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar:before {
    color: #000;
}
.et_pb_sticky .et-menu nav li .mobile_nav a,
.et_pb_sticky .et_pb_menu_0_tb_header.et_pb_menu .mobile_nav ul li a {
	color: #000 !important;
}
.et_pb_sticky .header-nav {
	top: 0 !important;
	width: 100% !important;
	padding: 0 7.5% !important;
	background: #fff !important;
}
.header-logo-sticky {
	display: none;
}
.et_pb_sticky .header-logo-sticky {
	display: block;
	width: 70%;
	padding: 1em;
}
.et_pb_sticky .header-logo {
	display: none;
}
.et_pb_sticky .et-menu nav li a,
.et_pb_sticky .et_pb_menu_0_tb_header.et_pb_menu ul li a {
	color: #fff !important;
}
.et_pb_sticky .et_pb_menu_0_tb_header.et_pb_menu ul li a:hover, 
.et_pb_sticky .et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item a{
	color: #fff !important;
	border-bottom: 2px solid #fff !important;
} 

/* 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: 2.5vw !important;
  height: 2.5vw!important;
  background-size:contain!important;
background-repeat: no-repeat !important;
}
.metaslider .flexslider .flex-direction-nav li a.flex-next {
  background-image: url('/wp-content/uploads/2024/07/fleche-droite.png') !important;
  width: 2.5vw !important;
  height: 2.5vw!important;
  background-size:contain!important;
background-repeat: no-repeat !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;
}


/* Back to top */
.et_pb_scroll_top.et-pb-icon {
    background: #085284!important;
    padding: 3px !important;
    color: #fff;
	bottom: 100px;
    right: 15px;
	border-radius:40px;
	font-size:40px;
}

/* page contact */
/***formulaire DIVI***/
#cmplz-document {
  max-width: 100% !important;
}
.gfield_consent_label a{ /*couleur Hover lien RGPD*/
	color: #000 !important;
}
.gfield_consent_label a:hover{ /*couleur Hover lien RGPD*/
	color: #175165 !important;
}

.gform_wrapper .ginput_container_consent input[type="checkbox"] {
  accent-color: #000 !important;
}

.cmplz-dropdown div{
	color:#000 !important;
}
@media (min-width: 980px) {
	.section-menu{
	position:absolute !important;
	width:100% !important;
}
}

@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:#2890b5;
  --couleur3:#e78e5c;
  --couleur4:#4aa355;
  --couleur5:#FFFFFF;
  --couleur6:#000;
  --font-family-titres: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
  --font-family-p:'Ubuntu', 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,26px);
  --font-size-h2-responsive:24px;
  --font-weight-h2: 100;
 /********* h3 ************/
 --font-size-h3: clamp(22px,1.5vw,24px);
  --font-size-h3-responsive: 22px;
  --font-weight-h3: 900;
/********* p ul li ************/
  --font-size-p: clamp(18px,1vw,18px);
  --font-size-p-responsive: 18px;
  --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-align: left;
}

.contenu h2::after {
	
	    content: "";
    width: 80px;
    height: 4px;
    display: block;
    background:  #e78e5c;
    background: linear-gradient(90deg, #c45953 0%, #4aa355 100%);
    background-repeat: no-repeat;
    margin: 15px 0px 15px;
  }



    
.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(--couleur3);
  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(--couleur4);
  border-bottom: 1px solid var(--couleur4);
  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(--couleur1);
  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-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(--couleur5);
  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(--couleur6);
  text-decoration: none;
  border-bottom: 1px solid var(--couleur6);
}

/***********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;
}
/******************************** Fin Edito **************************************/