/* =========================================================
   MENU OVERLAY — Agence ho5 (FINAL CLEAN VERSION)
========================================================= */

/* === BLOQUE LE SCROLL PAGE === */
body.menu-open {
  overflow: hidden;
  height: 100vh;
}

/* =========================================================
   OVERLAY
========================================================= */

.menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--wp--preset--color--primary, #f74e7b);
  color: #fff;
  z-index: 900;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateY(-100%);
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.menu-overlay.open {
  transform: translateY(0);
}

/* =========================================================
   CONTENEUR INTERNE
========================================================= */

.menu-overlay-inner {
  width: 100%;
  max-width: 1400px;

  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

.menu-overlay.open .menu-overlay-inner {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   MENU — STRUCTURE
========================================================= */
/* =========================================================
   MENU HO5 — VERSION FINALE STABLE
   Compatible avec la structure :
   <li>
     <a>titre</a>
     <button>flèche</button>
     <ul>sous-menu</ul>
   </li>
========================================================= */

/* ======================
   STRUCTURE GLOBALE
====================== */

.ho5-menu {
  width: 100%;
  max-width: 420px;
}

.ho5-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* ======================
   ITEM MENU
====================== */

.ho5-item {
  position: relative;
}

.ho5-item.has-submenu {
  display: flex;
  flex-wrap: wrap; /* a + button sur la ligne, ul en dessous */
  align-items: center;
}

/* ======================
   LIEN NIVEAU 1
====================== */

.ho5-item > a {
  flex: 1;

  display: inline-flex;
  align-items: center;

  font-family: var(--wp--preset--font-family--biorhyme, serif);
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 300;
  line-height: 1.2;

  color: #fff;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.ho5-item > a:hover {
  opacity: 0.7;
}

/* ======================
   BOUTON FLÈCHE
====================== */

.ho5-toggle {
  background: none;
  border: none;
  padding: 0;
  margin-left: 1rem;

  width: 24px;
  height: 24px;

  cursor: pointer;
  position: relative;
}

/* flèche desktop */

.ho5-toggle::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: auto;

  background-color: #fff;

  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26.664 26.664'><path d='M1549.211,72.292h16.4l-7.879-7.879.907-.906,9.426,9.427-9.427,9.427-.906-.906,7.879-7.881h-16.4Z' transform='translate(-1140.363 1063.883) rotate(-45)'/></svg>");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  transition: transform 0.25s ease;
}

.ho5-item.has-submenu:hover .ho5-toggle::before {
  transform: translateX(4px);
}

/* ======================
   SOUS-MENU — BASE
====================== */

.ho5-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ======================
   DESKTOP — SOUS-MENU LATÉRAL (HOVER CSS)
====================== */

@media (min-width: 1025px) {
  .ho5-item.has-submenu::after {
    content: "";
    position: absolute;
    top: -1rem;
    right: -3rem;
    width: 3rem;
    height: calc(100% + 2rem);
  }

  .ho5-submenu {
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 3rem;

    transform: translate(-12px, -50%);
    opacity: 0;
    pointer-events: none;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    transition: opacity 0.25s ease, transform 0.3s ease;
    width: max-content;
  }

  .ho5-item.has-submenu:hover > .ho5-submenu {
    opacity: 1;
    transform: translate(0, -50%);
    pointer-events: auto;
  }
}

/* ======================
   LIENS SOUS-MENU
====================== */

.ho5-submenu a {
  font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
  font-size: 1rem;
  font-weight: 500;

  color: #c3d5fb;
  text-decoration: none;
  transition: color 0.25s ease;
}

.ho5-submenu a:hover {
  color: #fff;
}

/* ======================
   MOBILE — SOUS-MENU DÉROULANT (JS)
====================== */

@media (max-width: 1024px) {
  .ho5-menu {
    margin-top: 100px;
  }
  .menu-overlay-inner {
    display: flex;
    align-items: center;
    overflow-y: auto;
    height: 100%;
  }

  /* item : a + button sur la même ligne */
  .ho5-item.has-submenu {
    display: flex;
    flex-wrap: wrap; /* clé : permet au ul de passer à la ligne */
    align-items: center;
  }

  /* lien : prend toute la largeur dispo */
  .ho5-item.has-submenu > a {
    flex: 1;
  }

  /* flèche : collée à droite */
  .ho5-toggle {
    margin-left: auto;
    flex-shrink: 0;
  }

  /* sous-menu : en dessous */
  .ho5-submenu {
    width: 100%;
    display: none;
    margin: 0.75rem 0 0 1.5rem;
  }

  .ho5-item.is-open > .ho5-submenu {
    display: block;
  }

  /* animation douce */
  .ho5-submenu > li {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.3s ease;
    margin-bottom: 8px;
  }

  .ho5-submenu a {
    font-size: 0.875rem;
  }

  .ho5-item.is-open .ho5-submenu > li {
    opacity: 1;
    transform: translateY(0);
  }
}

.wp-block-search__button.has-icon.wp-element-button {
  padding: 8px;
}

/* =========================================================
   MOBILE PANEL — DÉSACTIVÉ PAR DÉFAUT (DESKTOP)
========================================================= */

.ho5-mobile-panel {
  display: none;
}

/* =========================================================
   MOBILE PANEL — SOUS-MENU EN VOLET
========================================================= */

@media (max-width: 1024px) {
  .menu-overlay.open .menu-overlay-inner {
    overflow-x: hidden;
  }

  .ho5-mobile-panel {
    position: fixed;
    inset: 0;
    background: var(--wp--preset--color--primary, #f74e7b);
    z-index: 950;

    display: flex;
    flex-direction: column;

    padding-top: 100px;

    transform: translateX(100vw);
    transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
    overflow: hidden;
  }

  .ho5-mobile-panel.is-open {
    transform: translateX(0);
  }

  .ho5-mobile-panel {
    display: flex; /* ⬅️ réactivation mobile */
  }

  /* bouton retour */
  .ho5-panel-back {
    background: none;
    border: none;
    color: #fff;
    font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
    font-size: 0.95rem;
    font-weight: 500;

    align-self: flex-start;
    margin-bottom: 2rem;

    cursor: pointer;
  }

  /* titre du volet */
  .ho5-panel-title {
    font-family: var(--wp--preset--font-family--biorhyme, serif);
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    color: white;
    font-weight: 300;
    line-height: 1.2;

    margin: 0 0 1.5rem;
  }

  /* liste des sous-items */
  .ho5-panel-content {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ho5-panel-content a {
    font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
    font-size: 1rem;
    font-weight: 500;

    color: #c3d5fb;
    text-decoration: none;
  }
}