/* wp-content/mu-plugins/eds-header/assets/eds-header.css */
/* =========================
   EDS Header (Divi 5)
   ========================= */

/* Le header wrapper (classe posée sur la Section Header globale Divi) */
.eds-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;

  background: transparent; /* IMPORTANT */
  box-shadow: none;

  transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;

  /* Variables d'échelle (ne changent rien par défaut) */
  --eds-logo-scale: 1;
  --eds-title-scale: 1;
  --eds-top-pad-y: 0px; /* padding vertical additionnel sur la top row */
}

/* Support admin bar WP */
body.admin-bar .eds-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .eds-header {
    top: 46px;
  }
}

/* Rangées (classes posées sur tes 3 "lignes") */
.eds-header__top {
  transition: transform .25s ease, padding .25s ease, background-color .25s ease;
  will-change: transform;

  /* Réduction de hauteur uniquement via padding vertical */
  padding-top: var(--eds-top-pad-y);
  padding-bottom: var(--eds-top-pad-y);
}

.eds-header__sep,
.eds-header__nav {
  transition: opacity .25s ease, transform .25s ease, max-height .25s ease, background-color .25s ease;
  will-change: opacity, transform, max-height;
  transform-origin: top;
}

/* -------------------------
   Etats "sur Hero" vs "après Hero"
   ------------------------- */

/* Sur Hero : transparent */
.eds-header.is-over-hero {
  background: transparent;
  box-shadow: none;
}

/* Après Hero : fond blanc (effet verre léger) */
.eds-header.is-after-hero {
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
  backdrop-filter: blur(6px);

  /* Demande: top row + petite au switch de couleur */
  --eds-logo-scale: .92;
  --eds-title-scale: .95;
  --eds-top-pad-y: 6px;
}

/* Sur Hero : les rangées restent transparentes */
.eds-header.is-over-hero .eds-header__top,
.eds-header.is-over-hero .eds-header__sep,
.eds-header.is-over-hero .eds-header__nav {
  background: transparent;
}

/* -------------------------
   Couleur des liens du menu selon l'état
   ------------------------- */

/* Sur Hero : liens clairs */
.eds-header.is-over-hero .eds-header__nav a,
.eds-header.is-over-hero .eds-header__nav a:visited {
  color: #f6f0d6;
}

/* Après Hero : liens foncés */
.eds-header.is-after-hero .eds-header__nav a,
.eds-header.is-after-hero .eds-header__nav a:visited {
  color: #111;
}

/* Hover/focus après Hero */
.eds-header.is-after-hero .eds-header__nav a:hover,
.eds-header.is-after-hero .eds-header__nav a:focus {
  color: #000;
}

/* -------------------------
   Compact (scroll)
   - la bande haute se réduit légèrement
   ------------------------- */

/* Empêche tout décalage global */
.eds-header__top {
  transform: none;
}

/* Logo + titre : état normal (via variables) */
.eds-header__logo {
  transform: scale(var(--eds-logo-scale));
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.eds-header__title {
  transform: scale(var(--eds-title-scale));
  transform-origin: center center;
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

/* Compact : réduction plus forte (conserve tes valeurs actuelles) */
.eds-header.is-compact {
  --eds-logo-scale: .82;
  --eds-title-scale: .88;
}

/* -------------------------
   Scroll direction
   - Scroll down: cache séparateur + menu
   - Scroll up  : affiche séparateur + menu
   ------------------------- */

/* DOWN = on cache sep + nav */
.eds-header.is-scrolling-down .eds-header__sep,
.eds-header.is-scrolling-down .eds-header__nav {
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  pointer-events: none;
}

/* UP = on montre sep + nav */
.eds-header.is-scrolling-up .eds-header__sep,
.eds-header.is-scrolling-up .eds-header__nav {
  opacity: 1;
  transform: translateY(0);
  max-height: 200px; /* assez grand pour contenir le menu */
  pointer-events: auto;
}

/* -------------------------
   Burger (dans header Divi)
   ------------------------- */
.eds-burger {
  border: 0;
  background: transparent;
  padding: 12px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.eds-burger__lines {
  position: relative;
  width: 22px;
  height: 2px;
  background: currentColor;
  display: block;
}

.eds-burger__lines::before,
.eds-burger__lines::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
}

.eds-burger__lines::before { top: -7px; }
.eds-burger__lines::after  { top:  7px; }

/* Couleur du burger selon fond */
.eds-header.is-over-hero .eds-burger { color: #f6f0d6; }
.eds-header.is-after-hero .eds-burger { color: #111; }

/* Desktop: on cache le burger */
@media (min-width: 981px) {
  .eds-burger { display: none !important; }
}

/* -------------------------
   MOBILE: top row layout (burger / wordmark / CTA)
   - remplace les 2 blocs mobiles conflictuels
   ------------------------- */
@media (max-width: 980px) {

  /* menu desktop (ligne 3) */
  .eds-header__nav { display: none !important; }

  /* badge logo (image desktop à gauche) */
  .eds-header__logo { display: none !important; }

  /* Row top : 1 seule ligne */
  .eds-header__top {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: visible !important;
  }

  /* IMPORTANT: Divi impose des widths type 8/24 sur les colonnes => on override */
  .eds-header__top .eds-header__col-left,
  .eds-header__top .eds-header__col-center,
  .eds-header__top .eds-header__col-right {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Gauche (burger) */
  .eds-header__top .eds-header__col-left {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Droite (CTA) */
  .eds-header__top .eds-header__col-right {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }

  /* Centre (wordmark) : prend l'espace restant, mais ne déborde pas */
  .eds-header__top .eds-header__col-center {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* rapproche vers le burger */
    text-align: left !important;
    overflow: hidden !important; /* empêche de recouvrir le CTA */
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Wordmark : taille max pour garder le CTA visible */
  .eds-header__top .eds-header__col-center img {
    max-width: 185px !important; /* 140–170 selon ton rendu */
    width: 100%;
    height: auto;
  }

  /* Bouton CTA : ne casse pas sur 2 lignes */
  .eds-header__top .eds-header__col-right .et_pb_button {
    white-space: nowrap;
  }
}

/* -------------------------
   Accessibilité : réduction des animations
   ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .eds-header,
  .eds-header__top,
  .eds-header__sep,
  .eds-header__nav,
  .eds-header__logo,
  .eds-header__title {
    transition: none !important;
  }
}

/* =========================================
   Indicateur item actif (menu principal)
   - Header-safe + largeur du texte
   ========================================= */

.eds-header__nav {
  position: relative;
  overflow: hidden; /* empêche tout débordement vertical */
}

/* Important: on garde le spacing Divi, on n'ajoute PAS de padding horizontal */
.eds-header__nav a {
  position: relative;
  text-decoration: none;
  display: inline-block; /* largeur = contenu (texte + padding Divi éventuel) */
  padding-bottom: 8px;   /* réserve la place de la barre, dans le header */
}

/* Barre active (bottom:0 => ne sort pas du header) */
.eds-header__nav .current-menu-item > a::after,
.eds-header__nav .current_page_item > a::after,
.eds-header__nav .current-menu-ancestor > a::after,
.eds-header__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform: translateX(-50%);
  background: currentColor;
}

/* Hover (léger) */
.eds-header__nav a:hover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform: translateX(-50%);
  background: currentColor;
  opacity: .4;
}