/* ===========================================================
   Custom Sticky Header (Elementor-friendly) — v3.2.0
   Cible: .ekit-template-content-header (wrapper Elementor Kits Header)
   Effet: transparent au départ → blanc au scroll, texte & liens noirs
   =========================================================== */

:root {
  --csh-bg-transparent: transparent;
  --csh-bg-scrolled: #ffffff;
  --csh-text-scrolled: #111827;
  --csh-shadow-scrolled: 0 6px 24px rgba(17, 24, 39, 0.06);
  --csh-border-scrolled: 1px solid rgba(17, 24, 39, 0.06);
  --csh-sticky-top: 0px;
  --csh-threshold: 10px;
}

/* ====== Header de base (transparent) ====== */
.ekit-template-content-header {
  position: sticky;
  top: var(--csh-sticky-top);
  z-index: 9999;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: inherit;
  border-bottom: none !important;
  box-shadow: none !important;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  will-change: background-color, color, box-shadow;
}

/* ====== Header quand on scrolle ====== */
.ekit-template-content-header.is-scrolled {
  background-color: var(--csh-bg-scrolled) !important;
  color: var(--csh-text-scrolled) !important;
  box-shadow: var(--csh-shadow-scrolled) !important;
  border-bottom: var(--csh-border-scrolled) !important;
}

/* Liens & textes héritent de la couleur du header */
.ekit-template-content-header a,
.ekit-template-content-header .elementor a {
  color: inherit !important;
  transition: color 0.3s ease;
}

.ekit-template-content-header.is-scrolled a,
.ekit-template-content-header.is-scrolled .elementor a {
  color: var(--csh-text-scrolled) !important;
}

/* Évite les backgrounds Elementor imposés (important pour la transparence) */
.ekit-template-content-header > .elementor,
.ekit-template-content-header > .elementor-section-wrap > .elementor-section,
.ekit-template-content-header .elementor-section,
.ekit-template-content-header .elementor-container,
.ekit-template-content-header .elementor-column-wrap,
.ekit-template-content-header .elementor-widget-wrap {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Force la transparence sur tous les enfants avant le scroll */
.ekit-template-content-header:not(.is-scrolled) * {
  background-color: transparent !important;
}

/* Préfère-réduire les animations */
@media (prefers-reduced-motion: reduce) {
  .ekit-template-content-header {
    transition: none;
  }
}

/* Mobile fallback: supprime le flou s'il y en a */
@media (max-width: 767.98px) {
  .ekit-template-content-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}