/* ── Header : burger menu mobile ──
   Le header est un template Elementor v4 (boutons atomiques, pas de nav-menu).
   Le burger + le repli mobile sont ajoutés ici (CSS) + vp-header.js (toggle).
   Sélecteurs basés sur les classes stables du template : .e-hdr0001-out (barre),
   .e-hdr0002-wrp (logo+nav), .e-hdr0004-nav (liens + CTA).
   !important nécessaire pour neutraliser le reset.css de hello-elementor
   (styles agressifs sur les <button>). */

/* ── Header sticky ──
   .elementor-location-header est enfant direct de <body> (donc parent = toute
   la hauteur du scroll) → position:sticky y fonctionne. Le .e-con interne
   (.e-hdr0001-out) avait déjà position:sticky mais son wrapper ne lui laissait
   aucune course (hauteur = celle du header), donc il défilait avec la page.
   z-index élevé pour passer au-dessus du contenu et des widgets sticky de page. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Bouton burger : masqué en desktop, injecté par JS dans .e-hdr0002-wrp.
   !important pour battre reset.css (button { display:inline-block }). */
.vp-burger { display: none !important; }
.vp-nav-logo { display: none; }

/* Verrou du scroll page quand le menu plein écran est ouvert (classe posée par vp-header.js sur <html> et <body>).
   Pas de touch-action:none → sinon le scroll tactile DANS l'overlay est bloqué aussi. */
.vp-nav-locked { overflow: hidden !important; height: 100% !important; }

/* Burger jusqu'en tablette incluse (le menu horizontal ne tient pas < 1025px) */
@media (max-width: 1024px) {
  .e-hdr0001-out { position: relative; }
  .e-hdr0002-wrp { align-items: center; }

  /* Nav = overlay plein écran, masqué + animé (état fermé).
     !important sur les props structurelles : la classe seule (0,1,0) perd sinon
     contre le CSS atomique du widget (0,2,0) qui impose flex-direction:row + position. */
  .e-hdr0004-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    position: fixed !important; inset: 0 !important; height: 100dvh !important; z-index: 90;
    background: var(--background, #fff);
    padding: 96px 28px 40px !important;
    overflow-y: auto !important; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1), visibility 0s linear .35s;
  }

  /* Burger visible */
  .vp-burger {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 52px !important; height: 52px; margin-left: auto; padding: 8px;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    cursor: pointer; color: #000 !important;
  }
  .vp-burger:hover { color: #000 !important; }
  .vp-burger svg { width: 34px; height: 34px; }
  .vp-burger__menu  { display: block; }
  .vp-burger__close { display: none; }

  /* État ouvert : overlay visible (animation d'entrée) */
  .e-hdr0001-out.vp-nav-open .e-hdr0004-nav {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
    transition: opacity .3s ease, transform .4s cubic-bezier(.22,.61,.36,1);
  }
  /* La croix reste au-dessus de l'overlay et cliquable */
  .e-hdr0001-out.vp-nav-open .vp-burger { position: relative; z-index: 100; }

  /* Liens : grands, espacés, séparateur subtil, micro-shift au survol */
  .e-hdr0001-out .e-hdr0004-nav > a:not(.vp-nav-logo) {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    font-size: 17px !important;
    letter-spacing: 2.5px;
    padding: 20px 4px !important;
    border-bottom: 1px solid rgba(0,0,0,.07);
    transition: color .2s ease, padding-left .2s ease;
  }
  .e-hdr0001-out .e-hdr0004-nav > a:not(.vp-nav-logo):hover {
    color: var(--primary, #f1b8a0) !important;
    padding-left: 12px !important;
  }

  /* Centrage vertical via marges auto : centré quand ça tient, top-aligné +
     entièrement scrollable quand l'écran est trop court (évite le clip de justify-content:center). */
  .e-hdr0001-out .e-hdr0004-nav > *:first-child { margin-top: auto; }
  .e-hdr0001-out .e-hdr0004-nav > *:last-child  { margin-bottom: auto; }

  /* Bouton « Accès client » : détaché du reste, centré, pleine largeur */
  .e-hdr0001-out .e-hdr0004-nav > *:last-child {
    margin-top: 28px;
    justify-content: center;
  }

  /* Entrée échelonnée des items (stagger) */
  .e-hdr0004-nav > * {
    opacity: 0; transform: translateY(16px);
    transition: opacity .4s ease, transform .45s cubic-bezier(.22,.61,.36,1);
  }
  .e-hdr0001-out.vp-nav-open .e-hdr0004-nav > * { opacity: 1; transform: none; }
  .e-hdr0001-out.vp-nav-open .e-hdr0004-nav > *:nth-child(1) { transition-delay: .10s; }
  .e-hdr0001-out.vp-nav-open .e-hdr0004-nav > *:nth-child(2) { transition-delay: .15s; }
  .e-hdr0001-out.vp-nav-open .e-hdr0004-nav > *:nth-child(3) { transition-delay: .20s; }
  .e-hdr0001-out.vp-nav-open .e-hdr0004-nav > *:nth-child(4) { transition-delay: .25s; }
  .e-hdr0001-out.vp-nav-open .e-hdr0004-nav > *:nth-child(5) { transition-delay: .30s; }
  .e-hdr0001-out.vp-nav-open .e-hdr0004-nav > *:nth-child(6) { transition-delay: .35s; }

  /* Icône burger ↔ croix selon l'état */
  .e-hdr0001-out.vp-nav-open .vp-burger__menu  { display: none; }
  .e-hdr0001-out.vp-nav-open .vp-burger__close { display: block; }
}

/* Accessibilité : pas d'animation si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .e-hdr0004-nav, .e-hdr0004-nav > * { transition: none !important; transform: none !important; }
}

/* Logo dans le menu mobile (overlay) - injecte par vp-header.js */
@media (max-width: 1024px) {
  .e-hdr0004-nav > .vp-nav-logo { display: block; align-self: center; width: auto; margin-bottom: 64px; }
  .e-hdr0004-nav > .vp-nav-logo img { display: block; width: 220px; height: auto; margin: 0 auto; }
}

/* Acces client : affiche comme un item de menu normal (mobile) */
@media (max-width: 1024px) {
  .e-hdr0001-out .e-hdr0004-nav > .e-hdr0005-cta {
    background: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    color: #000 !important;
  }
  .e-hdr0001-out .e-hdr0004-nav > .e-hdr0005-cta .e-hdr0006-ico { display: none !important; }
  .e-hdr0001-out .e-hdr0004-nav > .e-hdr0005-cta .e-hdr0007-txt {
    color: inherit !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px !important;
    margin: 0 !important;
  }
}
