/* Collapsible menu */
/****** 
/******
*/

.et_mobile_menu .first-level > a {
	background-color: transparent;
	position: relative;
}

.et_mobile_menu .first-level .collapse-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.et_mobile_menu .first-level .collapse-wrapper > a {
	width: 90%;
	font-weight: 400;
}

.et_mobile_menu .first-level .collapse-wrapper > span {
	display: flex;
	align-items: center;
	width: 30px;
	height: 30px;
	color: #FFF;
	transition: color 0.1s ease;
}

.et_mobile_menu .first-level .collapse-wrapper > span.open {
	display: flex;
	align-items: center;
	width: 30px;
	height: 30px;
	color: #757474;
}

.et_mobile_menu .first-level .collapse-wrapper > span:before {
   content: '\4c';
   color: #4e5c77;
   font-family: 'ETModules'!important;
   font-size: 24px;
}

.et_mobile_menu .first-level .collapse-wrapper > span.open:before {
	animation: rotateAnimation 0.2s linear;
	animation-fill-mode: forwards;
	transform-origin: center center;
	color: #757474;
}

@keyframes rotateAnimation {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(45deg);
	}
  }


#menu-principal .et_mobile_menu li ul.sub-menu {
	background-color: #fff!important;
}

.et_mobile_menu .first-level > .icon-switch:after{
	content: '\4d';
}

.second-level {
	display: none;
}

.reveal-items {
	display: block;
}




/*****************************************************************/
/* Custom hook à retirer sur les autres sites issus d'un clonage */
/*****************************************************************/
.et_pb_menu__logo a::after {
    content: "HORUS SOLAR INGENIERIE";
    font-weight: 600;
    font-size: 15px !important;
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 12px;
    white-space: nowrap;
    font-size: 18px!important;
    color: #FFF;
}

@media screen and (max-width: 1427px) {
	.et_pb_menu__logo a::after {
		content:none;
	}
	.et_pb_menu_0_tb_header .et_pb_menu_inner_container {
    	--horizontal-gap:0px!important;
	}
}
@media screen and (max-width: 1100px) {
	.et_pb_menu_0_tb_header .et_pb_menu_inner_container {
    	--horizontal-gap:0px!important;
	}
}
@media screen and (max-width: 980px) {
	.et_pb_menu__logo a::after {
		content:"HORUS SOLAR INGENIERIE";
	}
}

ul#menu-navigation-principale {
	gap:10px;
	row-gap:0px;
}

ul#menu-navigation-principale li.current-menu-item::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -10px;
	transform: translateY(-50%);
	width: 20px;
	height: 26px;
	background: url(https://hsi.dev.oaka.fr/wp-content/uploads/2026/09/PITCO-ECLAIR.svg) center / contain no-repeat;
}





/* =========================================================
   HSI – Menu mobile plein écran (module Menu Divi)
   CSS only – le DOM / JS Divi (.mobile_nav.opened/.closed) est conservé

   Origine de l'animation = centre exact du burger, sans JS ni valeur en dur :
   le fond est un ::before de .mobile_nav (qui épouse le burger) en position: fixed
   SANS top/left → il se place à sa "position statique", centrée (flex) sur le burger.
   Le burger garde son propre z-index au-dessus des liens → la croix reste cliquable.
   Fixed = ne crée aucun débordement / scroll pendant l'animation.
   ========================================================= */
@media (max-width: 980px) {

  /* Variables */
  .et-l--header .et_pb_menu {
    --mm-bg: var(--gcid-primary-color, #538b71);
    --mm-dur: .6s;
    --mm-ease: cubic-bezier(.7, 0, .2, 1);
  }

  /* Menu ouvert : header au-dessus du contenu + fixé en haut, scroll bloqué
     (le z-index reste élevé jusqu'à la fin de l'animation de fermeture) */
  .et-l--header .et_builder_inner_content { transition: z-index 0s linear var(--mm-dur); }
  .et-l--header .et_builder_inner_content:has(.mobile_nav.opened) {
    z-index: 99999 !important;
    transition: none;
  }
  .et-l--header .et_pb_section:has(.mobile_nav.opened) {
    position: fixed !important;
    top: var(--wp-admin--admin-bar--height, 0px) !important;
    left: 0;
    right: 0;
  }
  html:has(.et-l--header .mobile_nav.opened) { overflow: hidden; }

  /* Ordre d'empilement (tout dans le même contexte) :
     fond (0) < liens (1) < logo (2) < burger/croix (3, cliquable) */
  .et-l--header .et_pb_menu__logo-wrap { position: relative; z-index: 2; align-items: center; }
  .et-l--header .mobile_menu_bar {
    position: relative;
    z-index: 3;
    transform: none !important; /* Divi le décale de ~1px : on le neutralise pour un centrage exact */
  }

  /* Le conteneur du burger épouse exactement le burger (32×32)
     et centre la position statique de son ::before */
  .et-l--header .mobile_nav {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin-left: auto;
    padding: 0 !important;
  }

  /* Le fond qui s'ouvre : cercle centré sur le burger */
  .et-l--header .mobile_nav::before {
    content: "";
    position: fixed;            /* pas de top/left : position statique = centre du burger */
    flex: none;
    width: 300vmax;             /* > 2 × diagonale de l'écran : couvre tout, d'où qu'il parte */
    height: 300vmax;
    border-radius: 50%;
    background: var(--mm-bg);
    transform: scale(0);
    z-index: 0;
    pointer-events: none;
    will-change: transform;
    transition: transform var(--mm-dur) var(--mm-ease);
  }
  .et-l--header .mobile_nav.opened::before { transform: scale(1); }

  /* Logo en blanc quand le menu est ouvert */
  .et-l--header .et_pb_menu__logo img { transition: filter .3s ease; }
  .et-l--header .et_pb_menu:has(.mobile_nav.opened) .et_pb_menu__logo {
    flex: 0 0 auto;
    width: 60px;
  }
  .et-l--header .et_pb_menu:has(.mobile_nav.opened) .et_pb_menu__logo img {
    filter: brightness(0) invert(1);
  }

  /* Burger -> croix (icône ETmodules) */
  .et-l--header .mobile_nav.opened .mobile_menu_bar::before { content: "\4d" !important; }

  /* Calque des liens (transparent, le fond vient du cercle) – neutralise le slideToggle Divi */
  .et-l--header .et_mobile_nav_menu .et_mobile_menu {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: calc(var(--wp-admin--admin-bar--height, 0px) + 140px) 30px 40px !important;
    overflow-y: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 1;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear var(--mm-dur);
  }
  .et-l--header .mobile_nav.opened .et_mobile_menu {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
  }

  /* Liens */
  .et-l--header .et_mobile_menu li { border: 0 !important; }
  .et-l--header .et_mobile_menu li a {
    display: block;
    padding: 12px 0 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.25;
    color: #fff !important;
    background: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .18) !important;
  }
  .et-l--header .et_mobile_menu li a:hover { opacity: .75; }
  .et-l--header .et_mobile_menu li.current-menu-item > a { color: var(--gcid-body-color, #d9ebd9) !important; }
  .et-l--header .et_mobile_menu .sub-menu { padding-left: 16px !important; }
  .et-l--header .et_mobile_menu .sub-menu a { font-size: 17px !important; font-weight: 500 !important; }

  /* Apparition en cascade des items */
  .et-l--header .et_mobile_menu > li {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .et-l--header .mobile_nav.opened .et_mobile_menu > li {
    opacity: 1;
    transform: none;
    transition: opacity .45s ease, transform .45s ease;
  }
  .et-l--header .mobile_nav.opened .et_mobile_menu > li:nth-child(1)   { transition-delay: .25s; }
  .et-l--header .mobile_nav.opened .et_mobile_menu > li:nth-child(2)   { transition-delay: .30s; }
  .et-l--header .mobile_nav.opened .et_mobile_menu > li:nth-child(3)   { transition-delay: .35s; }
  .et-l--header .mobile_nav.opened .et_mobile_menu > li:nth-child(4)   { transition-delay: .40s; }
  .et-l--header .mobile_nav.opened .et_mobile_menu > li:nth-child(5)   { transition-delay: .45s; }
  .et-l--header .mobile_nav.opened .et_mobile_menu > li:nth-child(6)   { transition-delay: .50s; }
  .et-l--header .mobile_nav.opened .et_mobile_menu > li:nth-child(7)   { transition-delay: .55s; }
  .et-l--header .mobile_nav.opened .et_mobile_menu > li:nth-child(8)   { transition-delay: .60s; }
  .et-l--header .mobile_nav.opened .et_mobile_menu > li:nth-child(n+9) { transition-delay: .65s; }
}

/* Accessibilité : pas d'animation si l'utilisateur le demande */
@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .et-l--header .mobile_nav::before,
  .et-l--header .et_mobile_menu,
  .et-l--header .et_mobile_menu > li { transition: none !important; }
}