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

/* DEV */
/* header */

@media (min-width: 980px) {
	.section-menu{
	position:absolute !important;
	width:100% !important;
}
}
a:hover{
	text-decoration:none !important
}
#menu-menu-principal {
	align-items: center;
}

#menu-menu-principal li {
	padding-left: .8vw;
	padding-right: .8vw;	
}

div.mobile_nav.opened .mobile_menu_bar:before {
    font-family: "ETmodules";
    content: "\4d"; 
}

/* metaslider - diapo */
.metaslider .flexslider .flex-direction-nav li a.flex-prev {
  background-image: url('/wp-content/uploads/2025/01/fleche-d.svg') !important;
  width: 2.5vw !important;
  height: 2.5vw!important;
  background-size:contain!important;
background-repeat: no-repeat !important;
  left: 3%;
}

.metaslider .flexslider .flex-direction-nav li a.flex-next {
  background-image: url('/wp-content/uploads/2025/01/fleche-g.svg') !important;
  width: 2.5vw !important;
  height: 2.5vw!important;
  background-size:contain!important;
background-repeat: no-repeat !important;
  right: 3%;
}

.metaslider .flex-control-nav {
    position: absolute;
    bottom: 2.6vw!important;
}

.metaslider .flexslider {
	margin: 0 0 0!important;
}

.flex-control-paging li a.flex-active, .flex-control-paging li a:hover {
	background: #153450 !important;
}

.flex-control-paging li a {
	background: #fff !important;
}

/* FOOTER *
.et_pb_scroll_top.et-pb-icon {
    background: url('http://lucienne.incomm.fr/wp-content/uploads/2021/07/backtoptop.png') no-repeat !important;
    padding: 38px !important;
    color: transparent;
    right: 5%;
    bottom: 25%;
}
*/


.cmplz-dropdown div{
	color:#000 !important;
}
#cmplz-document {
  max-width: 100% !important;
}

/**** Formulaire de contact****/
.gfield_consent_label a{ /*couleur Hover lien RGPD*/
	color: #000 !important;
}
.gfield_consent_label a:hover{ /*couleur Hover lien RGPD*/
	color: #153450 !important;
}

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

#gform_fields_1 div, .gform_footer, #field_1_13{
	margin-top:0px !important;
}

.et_pb_wpt_gravityform_0 .et_pb_button{
	width:100% !important
}
.FormAcc textarea.large{
	height:2vw !important;
	min-block-size: 8rem !important;
}



#gform_fields_3 div, .gform_footer, #field_2_13{
	margin-top:0px !important;
}

.et_pb_wpt_gravityform_0 .et_pb_button{
	width:100% !important
}

#gform_3 div{
	margin-top:0px !important;
}

#gform_3 div input{
	padding-top: 7px !important;
	padding-bottom: 7px !important;
}

/*> Consent */
 
.et_pb_wpt_gravityform.et_pb_wpt_gravityform_0 .gfield_consent_label {
padding-left :0.5em;
display: inline;
}




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

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

:root {
  --couleur1: #000;
  --couleur2: #153450;
  --couleur3: #000;
  --couleur4: #000;
  --couleur5: #fff;

  /**** Couleur des liens ****/

  --lien-couleur: var(--couleur2);
  --lien-hover-couleur: black;

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

  --lien-text-bl-couleur: var(--couleur5);
  --lien-text-bl-couleur-hover: white;

  /**** Titres et paragraphes ****/

  --font-family-h1: 'League Spartan', Helvetica, Arial, Lucida, sans-serif;
  --font-size-h1: 45px;
  --font-weight-h1: normal;
  --couleur-h1: var(--couleur1);

  --font-family-h2: 'League Spartan', Helvetica, Arial, Lucida, sans-serif;
  --font-size-h2: 28px;
  --font-weight-h2: 900;
  --couleur-h2: var(--couleur2);

  --font-family-h3: 'League Spartan', Helvetica, Arial, Lucida, sans-serif;
  --font-size-h3: 20px;
  --font-weight-h3: 900;
  --couleur-h3: var(--couleur3);

  --font-family-p: 'League Spartan', Helvetica, Arial, Lucida, sans-serif;
  --font-size-p: 16px;
  --font-weight-p: 300;
  --couleur-p: black;
  line-height: 1.6em;
}

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

/************************** Lien dans les modules textes ******************************/
.contenu-edito .et_pb_text_inner a {
  color: var(--lien-couleur);
  font-weight: bold;
  text-decoration: underline !important;
  transition: all 0.3s ease-in-out;
}

.contenu-edito .et_pb_text_inner a:hover {
  color: var(--lien-hover-couleur);
  font-weight: bold;
  text-decoration: none !important;
  transition: all 0.3s ease-in-out;
}

/***************************************** Titres ***************************************/

.contenu-edito h1 {
  font-family: var(--font-family-h1);
  font-size: var(--font-size-h1) !important;
  font-weight: var(--font-weight-h1);
  color: var(--couleur-h1);
}

.contenu-edito h2 {
  font-family: var(--font-family-h2);
  font-size: var(--font-size-h2) !important;
  font-weight: var(--font-weight-h2);
  color: var(--couleur-h2) !important;
  text-transform: uppercase;
  text-align: left;
  line-height: 1.2em;
  
}


.contenu-edito h2::after {
    content: "";
    width: 80px;
    height: 4px;
    display: block;
    background: var(--couleur2);
    background: linear-gradient(90deg, var(--couleur2) 0%, var(--couleur3) 100%);
    background-repeat: no-repeat;
    margin: 5px 0px 15px;
    }

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

      
.contenu-edito h3 {
  font-family: var(--font-family-h3);
  font-size: var(--font-size-h3) !important;
  font-weight: var(--font-weight-h3);
  color: var(--couleur-h3) !important;
  line-height: 1.2em;
}



.contenu-edito .libres h3 {
  background-color: #000;
  padding: 0.2em 0.8em;
  border-radius: 50px;
  border-left: 10px solid #f80104;
  margin-bottom: 0.2em; 
  transition: 0.5s all linear;}

  .contenu-edito .libres h3:hover {
  border-left: 4px solid #222;
}


/******************************* Paragraphes *****************************/
.contenu-edito p,
.contenu-edito ul,
.contenu-edito ol,
.contenu-edito li,
.contenu-edito table {
  font-family: var(--font-family-p);
  font-size: var(--font-size-p) !important;
  font-weight: var(--font-weight-p);
  color: var(--couleur-p) !important;
  text-align: left;
  line-height: 1.6em;

}



.contenu-edito ul li {
    list-style-type:none;
  margin-bottom: 0.4em;
  }
    
  .contenu-edito ul li::before {
    display: inline-block;
    content: "";
    width: 0.6em;
    aspect-ratio: 1;
    background-color: var(--couleur2);
    margin-right: 1em;
    /*border-radius:100%*/
  }
  
  .contenu-edito .grostitre p
  {
    font-size: clamp(28px,2vw,32px);
    color: var(--couleur-h1);
    font-family: var(--font-family-titres);
    font-weight: var(--font-weight-liens);
    text-align: center;
    color: var(--couleur-h3);
  }
  
  .grostitre p em {
    display: block;
    font-style: normal;
    font-weight: 300;
    font-size: 60%;
    text-align: left;
    color: var(--couleur-h2);
    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: 600;
  }

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

.contenu-edito .texteblanc p,
.contenu-edito .texteblanc ul,
.contenu-edito .texteblanc ol,
.contenu-edito .texteblanc li,
.contenu-edito .texteblanc table,
.contenu-edito .texteblanc h1,
.contenu-edito .texteblanc h2,
.contenu-edito .texteblanc h3 {
  color: white !important;
}

.texteblanc a {
  color: var(--couleur3);
  font-weight: bold;
  text-decoration: underline !important;
  transition: all 0.3s ease-in-out;
}

.texteblanc a:hover {
  color: var(--lien-text-bl-couleur-hover) !important;
  font-weight: bold;
  text-decoration: none !important;
  transition: all 0.3s ease-in-out;
}


.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-h2);
  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-h3);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-h3);
    color: var(--couleur3);
  text-align: left;
}

.texteblanc ul li {
  list-style-type:none;
margin-bottom: 0.4em;
}

.texteblanc ul li::before {
  display: inline-block;
  content: "";
  width: 0.5em;
  aspect-ratio: 1;
  background-color: var(--couleur5);
  margin-right: 1em;
  
}


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

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

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

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

@media (max-width: 1366px) {
  .contenu-edito h1 {
    font-size: calc(var(--font-size-h1) - 5px) !important;
  }

  .contenu-edito h2 {
    font-size: calc(var(--font-size-h2) - 5px) !important;
  }

  .contenu-edito h3 {
    font-size: calc(var(--font-size-h3) - 5px) !important;
  }
}

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

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

@media (max-width: 820px) {
  .contenu-edito h1 {
    font-size: calc(var(--font-size-h1) - 5px);
  }

  .contenu-edito h2 {
    font-size: calc(var(--font-size-h2) - 4px) !important;
  }

  .contenu-edito h3 {
    font-size: calc(var(--font-size-h3) - 6px) !important;
  }

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

@media (max-width: 420px) {
  .contenu-edito h1 {
    font-size: calc(var(--font-size-h1) - 10px) !important;
  }

  .contenu-edito h2 {
    font-size: calc(var(--font-size-h2) - 6px) !important;
  }

  .contenu-edito h3 {
    font-size: calc(var(--font-size-h3) - 4px) !important;
  }

  .contenu-edito p,
  .contenu-edito ul,
  .contenu-edito ol,
  .contenu-edito li,
  .contenu-edito table {
    font-size: calc(var(--font-size-p) - 2px) !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;
}




/* Tableaux */

table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}

th, td {
border: 1px solid #ddd;
text-align: left;
padding: 8px;
}

th {
background-color: #f4f4f4;
font-weight: bold;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}

/* Hover effect for rows */
tbody tr:hover {
background-color: #eaeaea;
cursor: pointer;
}

/* Responsive styles */
@media screen and (max-width: 768px) {
table {
    border: 0;
}

table thead {
    display: none;
}

table tr {
    display: block;
    margin-bottom: 10px;
    border-bottom: 2px solid #ddd;
}

table td {
    display: block;
    text-align: right;
    border: 0;
    padding: 10px;
    position: relative;
}

table td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: bold;
    text-align: left;
}

tbody tr:hover {
    background-color: #b9b7c9;
  
}
}



.cardes .et_pb_image_wrap::before {
  display: block;
  background-color: transparent;
  width: 80px;
  aspect-ratio: 1;
  content: "";
  margin-left: -20px;
  margin-bottom: -60px;
  border-left: 2px solid var(--couleur2);
  border-top: 2px solid var(--couleur2);
}

.cardes .et_pb_image_wrap::after {
  display: block;
  background-color: transparent;
  width: 80px;
  aspect-ratio: 1;
  content: "";
  margin-left: calc(100% - 60px);
  margin-top: -60px;
  border-right: 2px solid var(--couleur2);
  border-bottom: 2px solid var(--couleur2);
}



.cardes img 
{
  border:3px solid var(--couleur5);
  transition: 0.5s all linear;
}

.cardes img:hover
{
  transform: scale(1.02);

}

/******************************* Fin Edito *************************************/



#mobile_menu2 li.current-menu-item a, #mobile_menu2 li a:hover{
    color:#153450 !important;
    background-color:#fff !important;
}



@media(max-width:500px){
	.et_mobile_menu {
/*     left: -103px !important; */
    width: 150% !important;
}
}


@media(max-width:900px){
	.et_pb_menu--style-left_aligned .et_pb_menu__wrap{
    -webkit-box-pack: flex-start !important;
    -ms-flex-pack:  flex-start !important;
    justify-content: flex-start !important;
}
}