/**
 * adaptive-nav — header adaptatif, bouton hamburger flottant, menu plein écran
 * façon OSMO (rideau qui descend + cascade des liens + morph hamburger/croix).
 * Tout se règle par variables CSS (surchargeables dans le CSS global du site).
 */

/* ----------------------------------------------------------------------------
   0. Header foncé (interrupteur « Header foncé » coché sur la page →
      body.bejoy-header-dark). Menu + logo + hamburger en noir, pour un fond clair.
---------------------------------------------------------------------------- */
body.bejoy-header-dark .bejoy-main-header .bejoy-text-button,
body.bejoy-header-dark .bejoy-main-header .bejoy-text-button:hover,
body.bejoy-header-dark .bejoy-main-header .elementor-nav-menu a,
body.bejoy-header-dark .bejoy-main-header .elementor-item {
  color: #000 !important;
}
body.bejoy-header-dark .bejoy-main-header svg,
body.bejoy-header-dark .bejoy-main-header i {
  color: #000 !important;
  fill: #000 !important;
}
body.bejoy-header-dark .bejoy-main-header .bejoy-logo img {
  filter: brightness(0);
}
body.bejoy-header-dark .bejoy-menu-button {
  --bjmb-color: #141414 !important;
}
/* Menu plein écran ouvert (fond sombre) : la croix repasse en blanc. */
body.bejoy-header-dark.bejoy-overlay-open .bejoy-menu-button {
  --bjmb-color: #ffffff !important;
}

/* ----------------------------------------------------------------------------
   1. Header : se retire vers le haut une fois le hero passé
---------------------------------------------------------------------------- */
.bejoy-mng-header {
  /* Plancher de superposition : au-dessus du contenu qui recouvre le hero,
     sous le menu plein écran (9000) et le bouton flottant (10000). Un z-index
     plus spécifique posé dans Elementor reste prioritaire. */
  z-index: 900;
  transition: transform var(--bj-t-base, 0.55s) var(--bj-ease, ease), opacity var(--bj-t-fast, 0.32s) var(--bj-ease, ease);
  will-change: transform;
}

body.bejoy-past .bejoy-mng-header {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   2. Bouton hamburger flottant
---------------------------------------------------------------------------- */
.bejoy-navfab {
  position: fixed;
  top: var(--bejoy-navfab-top, 22px);
  right: var(--bejoy-navfab-right, 22px);
  width: var(--bejoy-navfab-size, 50px);
  height: var(--bejoy-navfab-size, 50px);
  border: var(--bejoy-navfab-border, none);
  border-radius: var(--bejoy-navfab-radius, 4px); /* carré par défaut */
  background: var(--bejoy-navfab-bg, #ffffff);   /* fond blanc par défaut */
  color: var(--bejoy-navfab-color, #141414);      /* icône noire par défaut */
  cursor: pointer;
  z-index: 10000;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--bejoy-navfab-shadow, 0 6px 24px rgba(0, 0, 0, 0.2));
  transition: opacity var(--bj-t-fast, 0.32s) var(--bj-ease-out, ease), transform var(--bj-t-fast, 0.32s) var(--bj-ease-out, ease);
}

/* Couleurs verrouillées sur tous les états : neutralise le violet
   :focus/:active hérité des styles par défaut d'Elementor/du navigateur. */
.bejoy-navfab,
.bejoy-navfab:hover,
.bejoy-navfab:focus,
.bejoy-navfab:active {
  background: var(--bejoy-navfab-bg, #ffffff);
  color: var(--bejoy-navfab-color, #141414);
  outline: none;
}

.bejoy-navfab:focus-visible {
  outline: 2px solid var(--bejoy-navfab-color, #ffffff);
  outline-offset: 3px;
}

body.bejoy-past .bejoy-navfab,
body.bejoy-overlay-open .bejoy-navfab {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Barres du hamburger (span = barre du milieu, ::before/::after = haut/bas) */
.bejoy-navfab__bars,
.bejoy-navfab__bars::before,
.bejoy-navfab__bars::after {
  content: "";
  position: absolute;
  left: 50%;
  width: var(--bejoy-navfab-bar-width, 20px);
  height: var(--bejoy-navfab-bar-thickness, 1.5px); /* fin, look luxe */
  margin-left: calc(var(--bejoy-navfab-bar-width, 20px) / -2);
  border-radius: var(--bejoy-navfab-bar-radius, 0);
  background: currentColor;
  transition: transform var(--bj-t-base, 0.55s) var(--bj-ease, ease), opacity var(--bj-t-fast, 0.32s) var(--bj-ease, ease), top var(--bj-t-fast, 0.32s) var(--bj-ease, ease);
}

.bejoy-navfab__bars {
  top: 50%;
  margin-top: calc(var(--bejoy-navfab-bar-thickness, 1.5px) / -2);
}

.bejoy-navfab__bars::before {
  top: calc(var(--bejoy-navfab-bar-gap, 7px) * -1);
}

.bejoy-navfab__bars::after {
  top: var(--bejoy-navfab-bar-gap, 7px);
}

/* Morph hamburger -> croix quand le menu est ouvert */
body.bejoy-overlay-open .bejoy-navfab__bars {
  background: transparent;
}

body.bejoy-overlay-open .bejoy-navfab__bars::before {
  top: 0;
  transform: rotate(45deg);
}

body.bejoy-overlay-open .bejoy-navfab__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ----------------------------------------------------------------------------
   3. Menu plein écran (rideau)
---------------------------------------------------------------------------- */
.bejoy-menu-overlay {
  position: fixed !important;
  inset: 0;
  z-index: 9000;
  overflow-y: auto;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--bejoy-overlay-duration, 0.85s) var(--bj-ease, ease);
}

body.bejoy-overlay-open .bejoy-menu-overlay {
  pointer-events: auto;
  clip-path: inset(0 0 0 0);
}

body.bejoy-overlay-open {
  overflow: hidden;
}

/* Cascade des liens / éléments marqués */
.bejoy-menu-overlay .bejoy-menu a,
.bejoy-menu-overlay .bejoy-overlay-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--bj-t-base, 0.55s) var(--bj-ease-out, ease), transform var(--bj-t-base, 0.55s) var(--bj-ease-out, ease);
  transition-delay: 0s;
}

body.bejoy-overlay-open .bejoy-menu-overlay .bejoy-menu a,
body.bejoy-overlay-open .bejoy-menu-overlay .bejoy-overlay-item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--bejoy-stagger-base, 0.34s) + var(--bejoy-i, 0) * var(--bejoy-stagger-step, 0.06s));
}

/* Départ vers une autre page : AUCUN effet visuel ici — le menu part tel quel.
   Le menu est déjà plein écran et opaque : il masque le chargement, et la page
   suivante arrive avec un rideau de la même couleur qui se retire. C'est ce
   départ direct qui donne la continuité ; y ajouter un fondu ou un voile
   n'apportait qu'un temps mort. La classe `bejoy-overlay-leaving` reste posée
   comme simple MARQUEUR, lu au moment de la bascule pour couper la transition
   native du navigateur (cf. adaptive-nav.js). */

/* ----------------------------------------------------------------------------
   4. Accessibilité — mouvement réduit
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bejoy-mng-header,
  .bejoy-navfab,
  .bejoy-navfab__bars,
  .bejoy-navfab__bars::before,
  .bejoy-navfab__bars::after,
  .bejoy-menu-overlay,
  .bejoy-menu-overlay::after,
  .bejoy-menu-overlay .bejoy-menu a,
  .bejoy-menu-overlay .bejoy-overlay-item {
    transition-duration: 0.01ms !important;
  }
}