/************************************************************************************************************/
/************************************************* HEADER  **************************************************/
/************************************************************************************************************/

/**********************/
/* En-tête Général   */
/**********************/

/* Définit la hauteur initiale de l'en-tête sur 144px */
body.et-db #et-boc .et-l--header {
  height: 144px;
}

/* Container du header : fixe en haut, en mode flex,
   avec margin et padding annulés, héritage du background, et hauteur de 144px */
body.et-db #et-boc .et-l #sy_header {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  margin: 0 !important;
  padding: 0;
  background: inherit !important;
  height: 144px;
  flex-wrap: wrap;
}

/* Lorsque l'en-tête devient sticky (après scroll),
   sa hauteur se réduit à 92px */
body.et-db #et-boc .et-l #sy_header.sticky {
  height: 92px;
}

/* Alignement du menu à droite dans le header */
body.et-db #et-boc .et-l #sy_header .et_pb_menu__wrap {
  justify-content: flex-end !important;
}

/* En mode sticky, le menu s'étend sur toute la largeur */
body.et-db #et-boc .et-l #sy_header.sticky .et_pb_menu__wrap {
  width: 100%;
}

/* Ajustement des espacements pour les éléments du menu dans le menu fullwidth */
body.et-db #et-boc .et-l #sy_header .et_pb_fullwidth_menu .et-menu>li {
  padding-left: 14px;
  padding-right: 14px;
}
body.et-db #et-boc .et-l #sy_header.sticky .et_pb_fullwidth_menu .et-menu>li.application {
  padding-right: 33px;
}

/* Style des liens et éléments span dans le menu : espacement des lettres, couleur et suppression du padding */
body.et-db #et-boc .et-l #sy_header .et_pb_fullwidth_menu .et-menu>li a,
body.et-db #et-boc .et-l #sy_header .et_pb_fullwidth_menu .et-menu>li span.spanNoLink {
  letter-spacing: 0.02em;
  color: #161616;
  padding: 0;
}

/* Hover : maintien de l'opacité et du background lors du survol */
body.et-db #et-boc .et-l #sy_header a:hover {
  opacity: 1;
  background-color: inherit;
}

/** Problèmes liés à Divi **/
body.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_pb_menu__menu>nav>ul>li {
  position: inherit;
}

body.et-db #et-boc .et-l .et_pb_fullwidth_menu--without-logo .et_pb_menu__menu>nav>ul {
  padding: 0 !important;
}

body.et-db #et-boc .et-menu .menu-item-has-children>a:first-child {
  padding-right: 0;
}

/* Adaptations pour les écrans de moins de 980px */
@media(max-width: 980px) {
  body.et-db #et-boc .et-l--header,
  body.et-db #et-boc .et-l #sy_header {
    height: 80px;
  }

  body.et-db #et-boc .et-l #sy_header .et_pb_menu__wrap {
    width: inherit !important;
  }
}

/**********************/
/* Logo               */
/**********************/

/* --- Logo Noir --- */

/* Conteneur du logo dans la partie inférieure de l'en-tête */
body.et-db #et-boc .et-l #sy_head-container-bottom .et_pb_menu__logo-wrap {
  display: flex;
  width: 100%;
  max-width: 230px;
}

/* Alignement vertical du logo */
body.et-db #et-boc .et-l #sy_head-container-bottom .et_pb_menu__logo {
  display: flex;
  align-items: center;
  width: 100%;
}

body.et-db #et-boc .et-l #sy_head-container-bottom .et_pb_menu__logo a {
  width: 100%;
}

/* Supprime l'effet hover (underline) sur le logo */
body.et-db #et-boc .et-l #sy_header #sy_head-container-bottom .et_pb_menu__logo-wrap a:hover::after {
  display: none;
}

@media(min-width: 981px) {
  body.et-db #et-boc .et-l #sy_head-container-bottom .et_pb_menu__logo-wrap {
    flex: 0 1 auto;
  }
}

/* --- Logo Blanc (utilisé pour le header sticky) --- */

/* Positionne et masque le logo blanc par défaut */
.et-db #page-container #et-boc .et-l #sy_header .logo-blanc {
  position: absolute;
  bottom: 0;
  display: none;
  max-width: 230px;
  align-items: center;
  height: 92px;
  width: 100%;
  min-width: 50px;
  flex: 1 1 auto;
  margin-left: 10vw;
  margin-right: auto;
}

@media (min-width: 1708px) {
  .et-db #page-container #et-boc .et-l #sy_header .logo-blanc {
    margin-left: calc((100vw - 1366px) / 2);
  }
}

.et-db #page-container #et-boc .et-l #sy_header .logo-blanc a {
  width: 100%;
  margin-right: 30px;
}

.et-db #page-container #et-boc .et-l #sy_header .logo-blanc img {
  width: auto;
  min-width: 50px;
}

/* Gestion du logo sticky et de l'élément .fav (possiblement une icône ou mini-logo) */

/* Supprime le pseudo-élément avant la .et_pb_row pour éviter un effet indésirable */
.et-db #page-container #et-boc .et-l #sy_header #sy_head-container-bottom .et_pb_row::before {
  display: none !important;
}

/* Masque l'élément .fav par défaut */
.et-db #page-container #et-boc .et-l #sy_header .fav {
  display: none;
}

@media(min-width: 981px) {

  /* En mode sticky, cache le logo noir et affiche l'élément .fav */
  .et-db #page-container #et-boc .et-l #sy_header.sticky #sy_head-container-bottom .et_pb_menu__logo-wrap {
    display: none !important;
  }

  .et-db #page-container #et-boc .et-l #sy_header.sticky .fav {
    position: absolute;
    width: 50px;
    display: block !important;
    margin-left: 10vw;
    top: 0;
    height: 92px;
  }

  .et-db #page-container #et-boc .et-l #sy_header.sticky .fav img {
    position: absolute;
    /***** Décalage du logo - Anceinnnement left: 0 - Mikael Le Rest 10 avril 2025 *****/
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
  }
}

@media (min-width: 1708px) {
  .et-db #page-container #et-boc .et-l #sy_header.sticky .fav {
    margin-left: calc((100vw - 1366px) / 2);
  }
}

@media(max-width: 1320px) {
  .et-db #page-container #et-boc .et-l #sy_header .logo-blanc {
    margin-left: 5%;
    /***** Décalage du logo pour alignemeent avec les éléments du menu - Mikael Le Rest 10 avril 2025 *****/
    bottom: 13px;
  }
}

/**********************/
/* Boutons Contact    */
/**********************/

/***** Bouton Contact Mail *****/
.et-db #page-container #et-boc .et-l #sy_header #sy_head-container-top li.head-mail a::before,
.et-db #page-container #et-boc .et-l #sy_head-container-bottom .sticky-mail a::before {
  content: '\e076';
  margin-right: 8px;
  font-family: 'ETMODULES';
}

/***** Bouton Téléphone *****/
@media(min-width: 981px) {

  /* Affiche le bouton téléphone en flex pour centrer le contenu */
  .et-db #page-container #et-boc .et-l #sy_header li.head-tel,
  .et-db #page-container #et-boc .et-l #sy_head-container-bottom .sticky-tel {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.et-db #page-container #et-boc .et-l #sy_header li.head-tel a,
.et-db #page-container #et-boc .et-l #sy_head-container-bottom .sticky-tel a {
  font-weight: 600;
}

.et-db #page-container #et-boc .et-l #sy_header li.head-tel a::before,
.et-db #page-container #et-boc .et-l #sy_head-container-bottom .sticky-tel a::before {
  content: '\e090';
  margin-right: 8px;
  font-family: 'ETMODULES';
  color: #161616;
  background-color: #FCC400;
  border-radius: 50%;
  padding: 9px;
}

@media(min-width: 981px) {

  .et-db #page-container #et-boc .et-l #sy_header li.head-tel:hover a::before,
  .et-db #page-container #et-boc .et-l #sy_head-container-bottom .sticky-tel:hover a::before {
    color: #FCC400;
    background-color: #161616;
  }

  /* Ajoute une séparation (pipe) entre les boutons mail et téléphone */
  .et-db #page-container #et-boc .et-l #sy_header #sy_head-container-top li.head-mail,
  .et-db #page-container #et-boc .et-l #sy_head-container-bottom .sticky-mail {
    padding-left: 30px;
    border-left: 1px solid #DAD9D2;
  }

  .et-db #page-container #et-boc .et-l #sy_header #sy_head-container-top li:has(+ li.head-mail),
  .et-db #page-container #et-boc .et-l #sy_header.sticky #sy_head-container-bottom li:has(+ li.sticky-mail) {
    padding-right: 30px;
  }
}

/**************************/
/* Barre Supérieure     */
/**************************/

/* Conteneur supérieur du header avec fond gris clair et bordure inférieure */
#sy_head-container-top {
  display: flex;
  background-color: #EFEEEB;
  width: 100%;
  flex: 0 0 auto;
  align-items: center;
  border-bottom: solid 1px #DAD9D2;
}

/* Masque la barre supérieure en mode sticky et sur mobile */
.et-db #page-container #et-boc .et-l #sy_header.sticky #sy_head-container-top {
  display: none;
}

#sy_head-container-top .et_pb_row {
  margin-right: 2rem;
  height: 100%;
}

@media(max-width: 980px) {
  #sy_head-container-top {
    display: none;
  }
}

/** Menu secondaire dans la barre supérieure **/
#sy_head-container-top .et_pb_menu__menu>nav>ul {
  padding: 0px 0 0 !important;
}

#sy_head-container-top #menu-menu-secondaire li {
  margin-top: 0;
}

#sy_head-container-top #menu-menu-secondaire li a {
  font-size: 14px;
  padding: 0;
}

/**************************/
/* Barre Inférieure     */
/**************************/

/* Conteneur inférieur du header : en flex, aligné et avec hauteur fixe de 92px */
.et-db #et-boc .et-l #sy_head-container-bottom {
  display: flex;
  align-items: center !important;
  background-color: #EFEEEB !important;
  width: 100%;
  flex: 1;
  margin-top: 0px !important;
  padding: 0;
  height: 92px;
  position: initial;
}

/* En mode sticky, le container inférieur passe au fond blanc avec transition et bordure inférieure */
.et-db #page-container #et-boc .et-l #sy_header.sticky:not(.no-sticky) #sy_head-container-bottom {
  padding: 0;
  background-color: #fff;
  transition: background-color 0.3s ease-out;
  border-bottom: 1px solid #DAD9D2;
}

#page-container #sy_head-container-bottom .et_pb_row {
  position: initial;
  height: 100%;
  flex-direction: row;
}

/** Adaptations avec bannière hero **/
@media(min-width: 981px) {
  body.et-db:has(.banner-hero) #et-boc .et-l #sy_header:not(.sticky) #sy_head-container-bottom {
    width: 100%;
    margin: auto;
    flex: 0 1 auto;
    justify-content: flex-end;
  }
}

/* Adaptations pour écrans en dessous de 980px */
@media(max-width: 980px) {
  .et-db #et-boc .et-l #sy_head-container-bottom {
    height: 80px;
    border-bottom: 1px solid #DAD9D2;
  }

  .et-db #page-container #et-boc .et-l #sy_header.sticky:not(.no-sticky) #sy_head-container-bottom {
    padding: 8px 0px;
  }
}

.et-db #page-container #et-boc .et-l #sy_header.sticky #sy_head-container-bottom .et_pb_row {
  align-items: center;
}

@media(max-width: 1200px) {
  #sy_header.sticky:not(.no-sticky) #sy_head-container-bottom .et_pb_row.clearfix {
    width: 85%;
  }
}

@media(max-width: 1070px) {
  #sy_header.sticky:not(.no-sticky) #sy_head-container-bottom .et_pb_row.clearfix {
    width: 90%;
  }
}

/* Menu principal : les items restent sur une ligne et bénéficient d'un padding vertical */
body.et-db #et-boc .et-l #sy_header #sy_head-container-bottom .et_pb_menu__menu>nav>ul {
  flex-wrap: nowrap;
}

body.et-db #et-boc .et-l #sy_header #sy_head-container-bottom.et_pb_fullwidth_menu .et-menu>li>a {
  padding: 30px 0;
}

/* Effet hover : une ligne jaune apparaît en bas des liens */
#sy_header #sy_head-container-bottom a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  margin-top: 25px;
  width: 40px;
  height: 4px;
  background-color: #FCC400;
}

#sy_header.sticky #sy_head-container-bottom a:hover::after {
  margin-top: 30px;
}

/* Neutralise les éventuels contenus ::after par défaut */
#sy_head-container-bottom a::after {
  color: transparent;
}

/* Affichage conditionnel des onglets du menu dans le header sticky */

/* Masque par défaut certains éléments du menu */
.et-db #page-container #et-boc .et-l #sy_head-container-bottom .et_pb_menu__menu .societe,
.et-db #page-container #et-boc .et-l #sy_head-container-bottom .et_pb_menu__menu .recrutement,
.et-db #page-container #et-boc .et-l #sy_head-container-bottom .et_pb_menu__menu .realisation,
.et-db #page-container #et-boc .et-l #sy_head-container-bottom .et_pb_menu__menu .sticky-mail,
.et-db #page-container #et-boc .et-l #sy_head-container-bottom .et_pb_menu__menu .sticky-tel {
  display: none !important;
}

/* En mode sticky, certains onglets spécifiques sont affichés */
.et-db #page-container #et-boc .et-l #sy_header.sticky #sy_head-container-bottom .et_pb_menu__menu .realisation {
  display: flex !important;
}

@media(min-width: 981px) {

  .et-db #page-container #et-boc .et-l #sy_header.sticky #sy_head-container-bottom .et_pb_menu__menu .sticky-tel,
  .et-db #page-container #et-boc .et-l #sy_header.sticky #sy_head-container-bottom .et_pb_menu__menu .sticky-mail {
    display: flex !important;
  }
}

/* Style pour les spans non cliquables dans le menu */
#sy_head-container-bottom span.spanNoLink {
  color: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 31px 13px 31px 0;
  white-space: nowrap;
}

#sy_head-container-bottom span.spanNoLink:hover {
  position: relative;
  opacity: 1;
  color: #FCC400;
  transition: 0.3s;
  cursor: pointer;
}

@media(min-width: 981px) {
  #sy_header #sy_head-container-bottom span.spanNoLink:hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 11px;
    margin-top: 30px;
    width: 40px;
    height: 4px;
    background-color: #FCC400;
  }

  #sy_header.sticky #sy_head-container-bottom span.spanNoLink:hover::after {
    bottom: 6px;
  }
}

@media(max-width: 980px) {
  #sy_head-container-bottom span.spanNoLink {
    display: block;
  }
}

/**************************/
/* Sous-menu            */
/**************************/

/* Le sous-menu occupe toute la largeur (100vw) et est divisé en 3 colonnes */
.et-db #et-boc .et-l #sy_head-container-bottom .et-menu .sub-menu {
  column-count: 3;
  column-gap: 6rem;
  width: 100vw !important;
  padding: 50px 83px !important;
  top: 134px;
  border-top: solid 1px #EFEEEB;
  left: 0;
}

/* En mode sticky, ajuste la position verticale du sous-menu */
.et-db #et-boc .et-l #sy_header.sticky #sy_head-container-bottom .et-menu .sub-menu {
  top: 92px;
}

/* Chaque élément du sous-menu occupe toute la largeur et évite de se briser en milieu de colonne */
.et-db #et-boc .et-l #sy_head-container-bottom .et-menu .sub-menu li {
  width: 100%;
  max-width: 437px;
  display: block;
  break-inside: avoid-column;
}

@media(min-width: 981px) {

  /* Pour les éléments sans description, ajoute une ligne de séparation */
  .et-db #et-boc .et-l #sy_head-container-bottom .et-menu .sub-menu li:not(:has(.menu-item-description))::after {
    content: "";
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #6D7680;
    margin-bottom: 25px;
  }

  .et-db #et-boc .et-l #sy_head-container-bottom .et-menu .sub-menu li:hover::after {
    border-bottom-color: #FCC400;
    transition: 0.3s;
  }
}

/* Style des liens dans le sous-menu */
.et-db #et-boc .et-l #sy_head-container-bottom .et-menu .sub-menu li a {
  font-size: 20px !important;
  font-weight: 500;
  color: #161616 !important;
  display: block;
  padding: 10px 0;
  width: 100%;
  min-width: max-content;
}

.et-db #et-boc .et-l #sy_head-container-bottom .et-menu .sub-menu li a:hover {
  background: #FFFFFF !important;
}

.et-db #et-boc .et-l #sy_head-container-bottom .et-menu .sub-menu a::after {
  display: none;
}

/* Styles spécifiques pour les sous-menus comportant une description */
.et-db #et-boc .et-l #sy_head-container-bottom .sub-menu li:has(.menu-item-description) a {
  width: max-content !important;
}

.et-db #et-boc .et-l #sy_head-container-bottom .sub-menu li:has(.menu-item-description) span.menu-item-description::before {
  content: "";
  display: block;
  width: 85px;
  border-top: 5px solid #FCC400;
  margin-bottom: 33px;
}

@media(min-width: 981px) {
  .et-db #et-boc .et-l #sy_head-container-bottom .sub-menu li:has(.menu-item-description) a span.menu-item-description {
    margin-top: 30px;
    line-height: 1.75em;
    display: block;
    font-size: 16px !important;
    font-weight: 400;
    width: 22vw;
  }
}

@media(max-width: 980px) {
  .et-db #et-boc .et-l #sy_head-container-bottom .sub-menu li:has(.menu-item-description) a span.menu-item-description {
    font-size: 1rem;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

.et-db #et-boc .et-l #sy_head-container-bottom .sub-menu li:has(.menu-item-description) a span.silo-desktop {
  font-size: 1.9em !important;
  line-height: 1em;
  margin-top: -20px;
  max-width: 450px;
}

.et-db #et-boc .et-l #sy_head-container-bottom .sub-menu li:has(.menu-item-description) button.my-button-class {
  margin-top: 2rem;
  line-height: 0.34px;
  color: #161616;
  background-color: transparent;
  padding: 0.75em 2.4em 0.7em 1em;
  border: #161616 2px solid;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.0175em;
  width: fit-content;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.1s !important;
  height: 45px !important;
  position: relative;
}

.et-db #et-boc .et-l #sy_head-container-bottom .sub-menu li:has(.menu-item-description) a:hover button.my-button-class {
  background-color: #FCC400;
  color: #fff;
  border-color: transparent;
}

.et-db #et-boc .et-l #sy_head-container-bottom .sub-menu li:has(.menu-item-description) button.my-button-class::after {
  font-size: 22px;
  line-height: 1em;
  content: "\45";
  font-family: 'Poppins' !important;
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  margin-left: 0.3rem;
  transition: 0.01s !important;
}

@media(max-width: 1535px) {
  .et-db #et-boc .et-l #sy_head-container-bottom .sub-menu li:has(.menu-item-description) a span.silo-desktop {
    font-size: 1.5em !important;
  }
}

@media(max-width: 1263px) {
  .et-db #et-boc .et-l #sy_head-container-bottom .sub-menu li:has(.menu-item-description) a span.silo-desktop {
    font-size: 1.3em !important;
  }
}

@media(max-width: 1139px) {
  .et-db #et-boc .et-l #sy_head-container-bottom .et-menu .sub-menu {
    column-count: 2 !important;
  }

  .et-db #et-boc .et-l #sy_head-container-bottom .sub-menu li:has(.menu-item-description) {
    break-after: column;
  }
}

/*******************************************************************************************/
/********************************* SINGLES *************************************************/
/*******************************************************************************************/

/* Sur les pages single-post et single-blog, ajoute une bordure inférieure
   lorsque le header n'est pas en mode sticky */
body.single-post #et-boc .et-l #sy_header:not(.sticky),
body.single-blog #et-boc .et-l #sy_header:not(.sticky),
body.single-installations #et-boc .et-l #sy_header:not(.sticky) {
  border-bottom: 1px solid #DAD9D2;
}