/* ==========================================================================
   ENHANCEMENTS DE LUXE POUR HEADER - ADDITIF ET SÛR
   ========================================================================== */

/* --- Anchor : pseudo-éléments positionnés par rapport au header -------------
   (Divi force position:fixed via .et_fixed_nav #main-header, qui sert alors
   de containing block aux descendants absolus → la ligne suit le header.) */
#main-header, .site-header { position: relative; }

/* 1. Ligne supérieure animée (effet premium) - EN CONTINU, BIEN VISIBLE */
#main-header::before, .site-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 9;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--tim-gold) 22%,
    var(--tim-gold-light) 50%,
    var(--tim-gold) 78%,
    transparent 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: timHeaderLuxShine 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes timHeaderLuxShine {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: -100% 0; }
}

/* 2. Ombre au scroll renforcée - BÂTIT SUR L'EFFET EXISTANT, NE LE REMPLACE PAS */
#main-header.tim-header-scrolled {
  box-shadow:
    0 0 30px -15px rgba(255,121,0,.35),
    0 20px 50px -25px rgba(4,6,12,.45) !important;
  /* Conserve la transition existante pour un effet fluide */
}

/* 3. Soulignée animée sous les éléments du menu - ADDITIVE, NE MODIFIE PAS LES STYLES DE BASE.
   Les méga-menus (items 149/150) ont déjà leur propre ::after (flèches) → exclus. */
#main-header #top-menu > li:not(#menu-item-149):not(#menu-item-150) > a,
.site-header .main-navigation .primary-menu-container > ul > li.menu-item > a {
  position: relative;
  overflow: hidden;
}
#main-header #top-menu > li:not(#menu-item-149):not(#menu-item-150) > a::after,
.site-header .main-navigation .primary-menu-container > ul > li.menu-item > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; width: 0; height: 3px;
  background: linear-gradient(90deg,
    transparent,
    #FFB454 35%,
    var(--tim-gold-light) 50%,
    #FFB454 65%,
    transparent);
  box-shadow: 0 0 8px rgba(255,160,60,.85);
  transition: width .45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity .3s ease;
  transform: translateX(-50%);
  opacity: 0;
}
#main-header #top-menu > li:not(#menu-item-149):not(#menu-item-150) > a:hover::after,
.site-header .main-navigation .primary-menu-container > ul > li.menu-item > a:hover::after,
#main-header #top-menu > li:not(#menu-item-149):not(#menu-item-150).current-menu-item > a::after,
#main-header #top-menu > li:not(#menu-item-149):not(#menu-item-150).current-menu-ancestor > a::after {
  width: 78%;
  opacity: 1;
}

/* 4. Icônes de recherche et panier améliorées - TOUCHE UNIQUEMENT CES ÉLÉMENTS SPÉCIFIQUES.
   NB : ces icônes sont masquées par le thème (display:none) — voir la fin du fichier
   pour une variante "affichée" si vous voulez les réactiver. */
#main-header #et_top_search #et_search_icon,
#main-header .et-cart-info {
  background: rgba(255,255,255,.08);
  background: color-mix(in srgb, var(--c-light) 8%, transparent);
  border-radius: 50%; padding: 4px; transition: all 0.3s ease;
}
#main-header #et_top_search:hover #et_search_icon,
#main-header .et-cart-info:hover {
  background: rgba(255,121,0,.12);
  background: color-mix(in srgb, var(--tim-gold) 12%, transparent);
  transform: scale(1.05);
}

/* 5. Refinement du conteneur du logo - TOUCHE UNIQUEMENT CE CONTENANT.
   Teinte or légère + bordure fine pour un vrai effet "verre" visible. */
#main-header .logo_container {
  background: rgba(255,255,255,.05);
  background: color-mix(in srgb, var(--c-light) 7%, transparent);
  border: 1px solid rgba(255,121,0,.14);
  border: 1px solid color-mix(in srgb, var(--tim-gold) 16%, transparent);
  border-radius: 16px;
  padding: 4px 16px;
}
/* En desktop le logo est poussé à zéro padding par les fixes du thème → on restaure l'effet */
@media (min-width: 981px) {
  #main-header .logo_container {
    padding: 4px 16px !important;
    border-radius: 16px !important;
  }
}

/* ---- Variante optionnelle : réafficher recherche + panier pour profiter de l'effet 4.
   Décommentez si vous voulez que ces icônes redeviennent visibles. */
/* #main-header .et-cart-info,
#main-header #et_top_search { display: inline-flex !important; } */