/**
 * Navbar AB - Divi 5 custom module.
 * Structure : nav = 2 pills séparés par un gap
 *   .ab-navbar__inner  → pill blanc (logo + menu)
 *   .ab-navbar__button → pill orange (CTA)
 */

.ab-navbar {
  --ab-nav-bar-bg:            #FCFBF7;
  --ab-nav-bar-padding-y:     0px;
  --ab-nav-bar-padding-x:     24px;
  --ab-nav-bar-radius:        0;
  --ab-nav-bar-gap:           16px;
  --ab-nav-menu-color:        #222222;
  --ab-nav-menu-hover:        #F62E02;
  --ab-nav-menu-gap:          32px;
  --ab-nav-btn-bg:            #F62E02;
  --ab-nav-btn-color:         #FCFBF7;
  --ab-nav-btn-padding:       18px 32px;
  --ab-nav-btn-radius:        0;
  --ab-nav-logo-max-height:   60px;

  width: 100%;
  box-sizing: border-box;
}

.ab-navbar__nav {
  display: flex;
  align-items: stretch;
  gap: var(--ab-nav-bar-gap);
  width: 100%;
  box-sizing: border-box;
}

/* ---- Pill principal (logo + menu) ----
   space-between : logo à gauche, menu poussé à droite. */
.ab-navbar__inner {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background-color: var(--ab-nav-bar-bg);
  border-radius: var(--ab-nav-bar-radius);
  padding: var(--ab-nav-bar-padding-y) var(--ab-nav-bar-padding-x);
  box-sizing: border-box;
  min-width: 0;
}

/* Logo */
.ab-navbar__logo-link {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  line-height: 0;
}
.ab-navbar__logo {
  max-height: var(--ab-nav-logo-max-height);
  width: auto;
  height: auto;
  display: block;
}
.ab-navbar__logo-placeholder {
  display: inline-block;
  padding: 8px 16px;
  border: 1px dashed #ccc;
  color: #999;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
}

/* Menu : ul horizontal aligné à droite, padding/margin/list-style zéro forcés
   pour battre les règles du thème (Divi ou custom) qui rajoutent des puces. */
.ab-navbar__menu {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--ab-nav-menu-gap);
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}
.ab-navbar__menu li,
.ab-navbar__menu .menu-item,
.ab-navbar__menu-item {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
}
/* Retire les pseudo puces "•" que certains thèmes ajoutent sur les items nav. */
.ab-navbar__menu li::before,
.ab-navbar__menu li::marker {
  content: none !important;
  display: none !important;
}
.ab-navbar__menu a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--ab-nav-menu-color);
  white-space: nowrap;
  transition: color 200ms ease;
  cursor: pointer;
}
.ab-navbar__menu a:hover,
.ab-navbar__menu a:focus-visible,
.ab-navbar__menu > li.current-menu-item > a,
.ab-navbar__menu > li.current-menu-ancestor > a {
  color: var(--ab-nav-menu-hover);
  outline: none;
}

/* Chevron pour items avec sous-menu (classes WP natives).
   SVG via mask + background currentColor : hérite de la couleur du texte.
   `top: -0.15em` compense le fait que le centre visuel du texte majuscules
   (pas de descendeurs) est plus haut que le centre géométrique de la line-height. */
.ab-navbar__menu > li.menu-item-has-children > a::after,
.ab-navbar__menu > li.has-children > a::after {
  content: '';
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='black' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='black' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  display: inline-block;
  margin-left: 4px;
  flex-shrink: 0;
  position: relative;
  top: -0.15em;
  transition: transform 240ms ease;
}
.ab-navbar__menu > li.menu-item-has-children:hover > a::after,
.ab-navbar__menu > li.has-children:hover > a::after,
.ab-navbar__menu > li.is-open > a::after {
  transform: rotate(180deg);
}

/* Sous-menu (dropdown) : positionné absolute sous le pill entier, révélé au hover.
   Offset vertical = padding-y du pill (pour sortir de la zone du pill) + 10px de
   respiration. Un pseudo ::before invisible remplit la zone entre le parent li et
   le dropdown pour que le hover ne se coupe pas quand on descend vers le menu. */
.ab-navbar__menu .sub-menu {
  position: absolute;
  top: calc(100% + var(--ab-nav-bar-padding-y) + 30px);
  left: 0;
  background-color: var(--ab-nav-bar-bg);
  border-radius: var(--ab-nav-bar-radius);
  padding: 8px 0 !important;
  min-width: 200px;
  list-style: none !important;
  margin: 0 !important;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  flex-direction: column;
  display: flex;
  align-items: stretch;
}
/* Bridge invisible qui comble la zone entre le bas du parent li et le haut du
   dropdown. Sans ça, le curseur "sort" du li en descendant et le hover se coupe. */
.ab-navbar__menu .sub-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * (var(--ab-nav-bar-padding-y) + 30px));
  height: calc(var(--ab-nav-bar-padding-y) + 30px);
  background: transparent;
}
/* Reveal au hover ou focus-within (accessible clavier). */
.ab-navbar__menu > li:hover > .sub-menu,
.ab-navbar__menu > li:focus-within > .sub-menu,
.ab-navbar__menu > li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ab-navbar__menu .sub-menu li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ab-navbar__menu .sub-menu a {
  display: block;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
}
.ab-navbar__menu .sub-menu li:last-child a {
  border-bottom: none;
}

/* ---- Language switcher WPML ----
   Le switcher est un vrai <li menu-item-has-children> injecté dans le menu.
   Il hérite de tout le styling (font, chevron, hover, dropdown position,
   mobile toggle). Micro-overrides : width min réduite car les codes langue
   "EN"/"FR" font 2 caractères (le default 200px min-width serait trop). */
.ab-navbar__menu > li.ab-navbar__lang-switcher > .sub-menu {
  min-width: 80px;
}
.ab-navbar__menu > li.ab-navbar__lang-switcher > .sub-menu a {
  text-align: center;
}

/* ---- Bouton CTA ---- */
.ab-navbar__button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--ab-nav-btn-bg);
  color: var(--ab-nav-btn-color);
  padding: var(--ab-nav-btn-padding);
  border-radius: var(--ab-nav-btn-radius);
  text-decoration: none;
  line-height: 1;
  transition: opacity 200ms ease, transform 200ms ease;
  white-space: nowrap;
}
.ab-navbar__button:hover,
.ab-navbar__button:focus-visible {
  outline: none;
  opacity: 0.9;
}
.ab-navbar__button-arrow {
  display: inline-flex;
  align-items: center;
  font-size: 1em;
  line-height: 1;
  transition: transform 200ms ease;
}
.ab-navbar__button:hover .ab-navbar__button-arrow,
.ab-navbar__button:focus-visible .ab-navbar__button-arrow {
  transform: translateX(4px);
}

/* ---- Mobile toggle ---- */
.ab-navbar__toggle {
  display: none;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ab-nav-menu-color);
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  flex: 0 0 auto;
}
.ab-navbar__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  margin: 5px 0;
  transition: transform 240ms ease, opacity 240ms ease;
}
.ab-navbar__nav.is-open .ab-navbar__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.ab-navbar__nav.is-open .ab-navbar__toggle-bar:nth-child(2) {
  opacity: 0;
}
.ab-navbar__nav.is-open .ab-navbar__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Responsive : dessous du breakpoint, menu masqué par défaut, toggle visible */
@media (max-width: 980px) {
  .ab-navbar__nav {
    position: relative;
    flex-wrap: wrap;
  }
  .ab-navbar__logo {
    max-height: 40px;
  }
  /* Inner ne contient plus que logo + toggle en ligne. Le menu est sorti du
     flux (position absolute) pour que .ab-navbar__inner reste compact quand
     le menu est fermé. */
  .ab-navbar__inner {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 16px;
  }
  .ab-navbar__toggle {
    display: block;
    order: 2;
  }
  .ab-navbar__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex: 0 0 auto !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 !important;
    margin-top: 0;
    background-color: var(--ab-nav-bar-bg);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    z-index: 90;
    transition: max-height 300ms ease, opacity 200ms ease, padding 300ms ease;
    box-sizing: border-box;
  }
  .ab-navbar__nav.is-open .ab-navbar__menu {
    max-height: 600px;
    opacity: 1;
    padding: 16px var(--ab-nav-bar-padding-x) !important;
  }
  .ab-navbar__button {
    flex: 1 1 100%;
    justify-content: center;
  }
  /* En mobile : sous-menu en flow, plus en absolute */
  .ab-navbar__menu .sub-menu {
    position: static;
    box-shadow: none;
    padding: 8px 0 8px 16px;
    background-color: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .ab-navbar__menu > li.is-open > .sub-menu,
  .ab-navbar__menu-item.is-open > .sub-menu {
    display: block;
  }
  /* Sur mobile : dropdown du lang switcher aligné à gauche, texte à gauche. */
  .ab-navbar__menu > li.ab-navbar__lang-switcher > .sub-menu a {
    text-align: left;
  }
}