/* ============================================================
   ADNPROG – HEADER COMPLET (Top / Main / Transparent / Offcanvas)
   (Version sans "header bottom")
   ============================================================ */

/* RESET & STRUCTURE */
.adn-header {
  position: relative;
  width: 100%;
  z-index: 1000;
  font-family: var(--bs-body-font-family, system-ui);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.adn-header .container,
.adn-header .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* ================================
   🔁 TICKER (plein écran + rapide + centré)
=================================== */
.header-top {
  position: relative;
  overflow: hidden;
}

.header-top .ticker {
  display: flex;
  flex-wrap: nowrap;
  animation: ticker-scroll 5s linear infinite; /* ⚡️ 5x plus rapide qu'avant */
  width: max-content;
  will-change: transform;
}

.ticker-item {
  display: flex;
  justify-content: center;       /* centre horizontalement */
  align-items: center;           /* centre verticalement */
  flex: 0 0 100vw;               /* chaque item prend toute la largeur de la fenêtre */
  height: 2.5rem;                /* ajuste selon ton design */
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  padding: 0;
}

/* Animation : translation de la largeur complète */
@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100vw);
  }
}

/* Optionnel : effet fluide sans saccade */
.header-top .ticker {
  animation-timing-function: linear;
}
/* ============================================================
   HEADER TOP
   ============================================================ */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem 1rem;
  font-size: .9rem;
}

.header-top .socials {
  display: flex;
  gap: 8px;
}

.header-top .socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--top-social-bg, var(--adn-p1));
  color: var(--top-social-fg, #fff);
  transition: all .25s ease;
  text-decoration: none;
}
.header-top .socials a:hover {
  background: var(--top-social-bg-hover, var(--adn-p3));
  color: var(--top-social-fg-hover, #fff);
  transform: scale(1.05);
}

/* ============================================================
   HEADER MAIN (wrapper commun à TOUTES les variantes)
   ============================================================ */
.header-main {
  position: relative;
  width: 100%;
  z-index: 1020;
  /* Le fond/couleurs du "milieu" sont injectés via inline CSS (Customizer)
     sur .header-main. Ce wrapper est OBLIGATOIRE dans chaque variante. */
}

/* Nav éventuelle à l’intérieur */
.header-main nav.navbar {
  width: 100%;
  padding: 0.6rem 1rem;
  transition: background .3s ease, box-shadow .3s ease;
}

.navbar-brand img { height: auto; transition: all .3s ease; }

/* MENU (niveau 1) */
.header-main .navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--menu-gap, 14px);
}
.header-main .navbar-nav > li.menu-item {
  position: relative;
  list-style: none;
  padding: 0 var(--menu-item-space, 0);
}
.header-main .navbar-nav > li.menu-item > a {
  font-weight: 500;
  padding: .6rem 1rem;
  border-radius: var(--menu-pill-radius, 6px);
  text-decoration: none;
  color: inherit;
  transition: all .25s ease;
}
.header-main .navbar-nav > li.menu-item > a:hover,
.header-main .navbar-nav > li.current-menu-item > a {
  color: var(--menu-hover-color, var(--adn-p1));
  background: var(--menu-hover-bg, transparent);
  text-decoration: var(--menu-underline, none);
}

/* Soulignement animé (option visuelle sympa) */
@media (min-width: 992px){
  .header-main .navbar-nav > li.menu-item > a { position: relative; }
  .header-main .navbar-nav > li.menu-item > a::after {
    content:"";
    position:absolute; left:0; right:0; bottom:-.45rem; height:2px;
    background: transparent;
    transform: scaleX(0);
    transition: transform .2s ease, background .2s ease;
  }
  .header-main .navbar-nav > li.menu-item:hover > a::after,
  .header-main .navbar-nav > li.current-menu-item > a::after {
    background: var(--menu-hover-color, var(--adn-p1));
    transform: scaleX(1);
  }
}

/* ============================================================
   SOUS-MENUS CLASSIQUES
   ============================================================ */
.header-main .navbar-nav li.menu-item-has-children { position: relative; }
.header-main .navbar-nav li.menu-item-has-children > a {
  padding-right: 1rem !important;
}
.header-main .navbar-nav li.menu-item-has-children > a::after {
  content: "▾";
  font-size: .7rem;
  margin-left: .35rem;
}

.header-main .navbar-nav li.menu-item-has-children > ul.sub-menu {
  list-style: none;
  margin: 0; padding: .5rem 0;
  position: absolute; top: 100%; left: 0;
  min-width: 220px;
  background: var(--submenu-bg, #fff);
  border: 1px solid var(--submenu-border, rgba(0,0,0,.08));
  border-radius: .5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  display: none;
  z-index: 1050;
}
@media (min-width: 992px){
  .header-main .navbar-nav li.menu-item-has-children:hover > ul.sub-menu { display: block; }
}

.header-main .navbar-nav li.menu-item-has-children > ul.sub-menu > li > a {
  display: block;
  padding: var(--submenu-item-py, .5rem) var(--submenu-item-px, .9rem);
  color: var(--submenu-text, #333);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.header-main .navbar-nav li.menu-item-has-children > ul.sub-menu > li > a:hover {
  background: var(--submenu-hover-bg, color-mix(in oklab, var(--adn-p1), white 85%));
  color: var(--submenu-hover-color, #111);
}

/* Niveau 2 (flyout) */
@media (min-width: 992px){
  .header-main .navbar-nav li.menu-item-has-children > ul.sub-menu li.menu-item-has-children { position:relative; }
  .header-main .navbar-nav li.menu-item-has-children > ul.sub-menu li.menu-item-has-children > ul.sub-menu {
    top:0; left:100%; margin-left:.25rem;
  }
}

/* ============================================================
   MEGA MENU (ajouter .menu-item-has-megamenu sur l’item parent)
   ============================================================ */
.header-main .navbar-nav > li.menu-item-has-megamenu { position: static; }
.header-main .navbar-nav > li.menu-item-has-megamenu > .mega-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  padding: 2rem 1rem;
  display: none;
  background: var(--submenu-bg, #fff);
  border-top: 2px solid var(--adn-p1);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  z-index: 1050;
  /* grid responsive */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
@media (min-width: 992px){
  .header-main .navbar-nav > li.menu-item-has-megamenu:hover > .mega-menu { display: grid; }
}
.header-main .mega-menu h5 {
  font-size: 1.05rem; font-weight: 600; margin-bottom: .7rem; color: var(--submenu-text, #222);
}
.header-main .mega-menu a {
  display: block; color: var(--submenu-text, #333); text-decoration: none; padding: .35rem 0;
}
.header-main .mega-menu a:hover {
  color: var(--submenu-hover-color, var(--adn-p1));
}

/* ============================================================
   CTA (boutons du header)
   ============================================================ */
.adn-cta-primary, .adn-cta-secondary {
  border: none; font-weight: 600;
  padding: .6rem 1.2rem; border-radius: var(--cta-radius, 8px);
  text-decoration: none; white-space: nowrap; transition: all .25s ease;
}
.adn-cta-primary {
  background: var(--cta-primary-bg, var(--adn-p1)); color: var(--cta-primary-tx, #fff);
}
.adn-cta-primary:hover {
  background: var(--cta-primary-hover-bg, var(--adn-p3)); color: var(--cta-primary-hover-tx, #fff);
}
.adn-cta-secondary {
  background: var(--cta-secondary-bg, var(--adn-p2)); color: var(--cta-secondary-tx, #fff);
}
.adn-cta-secondary:hover {
  background: var(--cta-secondary-hover-bg, var(--adn-p3)); color: var(--cta-secondary-hover-tx, #fff);
}

/* ============================================================
   RAIL D’OUTILS (search/tel/panier)
   ============================================================ */
.adn-tools { display: flex; align-items: center; gap: 14px; }
.adn-tools a {
  display:flex; align-items:center; justify-content:center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--adn-tools-bg, #f1f1f1);
  color: var(--adn-tools-fg, var(--adn-p1));
  transition: all .25s ease; text-decoration: none;
}
.adn-tools a:hover {
  background: var(--adn-tools-bg-hover, var(--adn-p1)); color: var(--adn-tools-fg-hover, #fff);
  transform: scale(1.07);
}

/* ============================================================
   OFFCANVAS (menu mobile)
   ============================================================ */
.adn-header .offcanvas {
  background: var(--offcanvas-bg, #fff);
  color: var(--offcanvas-text, #333);
}
.adn-header .offcanvas-header {
  background: var(--offcanvas-header-bg, var(--adn-p1)); color:#fff;
}
.adn-header .offcanvas .nav-link {
  color: var(--offcanvas-link, #333);
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--offcanvas-border, #eee);
  text-decoration: none;
}
.adn-header .offcanvas .nav-link:hover {
  color: var(--offcanvas-link-hover, var(--adn-p1));
  background: rgba(0,0,0,.03);
}

/* Hamburger – si Bootstrap utilise .navbar-toggler-icon */
.adn-header .navbar-toggler { border: 1px solid transparent; }
.adn-header .navbar-toggler .navbar-toggler-icon {
  background-size: 1.25rem 1.25rem;
}

/* ============================================================
   HEADER TRANSPARENT + STICKY
   ============================================================ */
/* .is-transparent doit être posé sur .adn-header
   et la barre "main" reçoit .header-main (obligatoire) */
.adn-header.is-transparent .header-main {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent !important;
}
.adn-header.is-sticky { position: sticky; top:0; }

/* Etat sticky actif (ajouter .is-stuck en JS si besoin) */
.adn-header.is-transparent.is-sticky.is-stuck .header-main {
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
  transition: background .3s ease, box-shadow .3s ease;
}

/* ============================================================
   TYPO HEADER
   ============================================================ */
.header-top,
.header-main {
  font-family: var(--bs-body-font-family, system-ui);
}
.header-main a.nav-link {
  font-size: var(--menu-font-size, 1rem);
  font-family: var(--menu-font-family, var(--bs-body-font-family));
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px){
  .header-main .navbar-nav { display: none; }
  /* Afficher le menu quand il a la classe show */
  .header-main .navbar-collapse.show,
  .header-main .collapse.show {
    height: auto !important;
    max-height: none !important;
  }
  .header-main .navbar-collapse.show .navbar-nav,
  .header-main .collapse.show .navbar-nav {
    display: block !important;
  }
  .header-main .navbar-toggler { display: inline-flex; }
}
@media (min-width: 992px){
  .header-main .navbar-toggler { display: none; }
}