/* ====================================================================
* Sifas — Header : transition couleur texte au scroll
* --------------------------------------------------------------------
* Synchronisé avec le Motion Effect "Background Opacity 0→3 %" du
* container header Elementor.
*
* - Top de la page : pas de classe spéciale → texte blanc
* - Scroll > 1 % : JS `assets/js/header-scroll.js` ajoute `is-scrolled`
* au → le texte bascule en noir.
*
* Pourquoi 1 % et pas 3 % ?
* Voir commentaire détaillé dans assets/js/header-scroll.js. Résumé : on
* déclenche la bascule avant que le fond ne soit complètement opaque
* pour éviter le creux de lisibilité (texte blanc + fond blanc pendant
* la durée de la transition CSS).
*
* Portée par cible :
* - Titres du menu Nested (.e-n-menu-title-container) + flèche dropdown
* (.e-n-menu-dropdown-icon) : desktop only (> 1024 px). Sur mobile
* le drawer/overlay a son propre fond, on n'y touche pas.
* - Champ recherche (.e-search-input) — texte saisi uniquement
* (placeholder non touché : il utilise ::placeholder qui n'est pas
* affecté par `color` standard).
* - Hamburger mobile (.e-n-menu-toggle) : toutes résolutions.
* - Cart icon (.sifas-counter__icon + svg.e-eicon-cart-medium) :
* toutes résolutions.
* - Logo Sifas (img[src*="sifas-logo"]) — fichier SVG monochrome avec
* fill="currentColor". Comme c'est servi en ![]()
et pas en SVG inline,
* on ne peut pas changer son fill via CSS. On utilise donc un
* filter: brightness(0) invert(1) pour le rendre blanc au top, et
* filter: none au scroll pour revenir à sa couleur d'origine (noir).
*
* Choix techniques :
*
* 1) -webkit-text-fill-color en plus de color
* Elementor utilise -webkit-text-fill-color sur le widget Nested Menu.
* Pour gagner la cascade il faut surcharger les DEUX propriétés.
*
* 2) fill: currentColor pour les SVG
* Les SVG sans attribut `fill` ont un default "black" (spec SVG).
* CSS `fill` n'est pas hérité automatiquement par les descendants.
* `fill: currentColor` force le path à suivre la propriété `color` du
* parent.
*
* 3) !important partout
* Les widgets Elementor Pro ont des sélecteurs très spécifiques (7+).
*
* Exceptions — noir permanent, pas de transition :
* - Fiches produit WooCommerce → body.single-product (auto Woo)
* - Page "Trouver un distributeur" → body.is-page-static-header
* (ajoutée par Plugin::add_body_classes())
* ==================================================================== */
/* ====================================================================
* Desktop (> 1024 px) — titres du menu Nested + flèches dropdown
* + champ recherche
* ==================================================================== */
@media ( min-width: 1025px ) {
/* État par défaut : blanc */
.elementor-location-header .e-n-menu-title-container,
.elementor-location-header .e-n-menu-title-container *,
.elementor-location-header .e-n-menu-dropdown-icon,
.elementor-location-header .e-n-menu-dropdown-icon *,
.elementor-location-header input.e-search-input {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
fill: currentColor !important;
transition: color 0.3s ease,
-webkit-text-fill-color 0.3s ease,
fill 0.3s ease !important;
}
/* Path SVG dans la flèche dropdown : explicitement currentColor */
.elementor-location-header .e-n-menu-dropdown-icon svg,
.elementor-location-header .e-n-menu-dropdown-icon svg path {
fill: currentColor !important;
}
/* Scroll > 1 % : noir */
body.is-scrolled .elementor-location-header .e-n-menu-title-container,
body.is-scrolled .elementor-location-header .e-n-menu-title-container *,
body.is-scrolled .elementor-location-header .e-n-menu-dropdown-icon,
body.is-scrolled .elementor-location-header .e-n-menu-dropdown-icon *,
body.is-scrolled .elementor-location-header input.e-search-input {
color: #000000 !important;
-webkit-text-fill-color: #000000 !important;
fill: currentColor !important;
}
/* Exceptions : single-product + page distributeur — noir permanent */
body.single-product .elementor-location-header .e-n-menu-title-container,
body.single-product .elementor-location-header .e-n-menu-title-container *,
body.single-product .elementor-location-header .e-n-menu-dropdown-icon,
body.single-product .elementor-location-header .e-n-menu-dropdown-icon *,
body.single-product .elementor-location-header input.e-search-input,
body.is-page-static-header .elementor-location-header .e-n-menu-title-container,
body.is-page-static-header .elementor-location-header .e-n-menu-title-container *,
body.is-page-static-header .elementor-location-header .e-n-menu-dropdown-icon,
body.is-page-static-header .elementor-location-header .e-n-menu-dropdown-icon *,
body.is-page-static-header .elementor-location-header input.e-search-input {
color: #000000 !important;
-webkit-text-fill-color: #000000 !important;
fill: currentColor !important;
transition: none !important;
}
}
/* ====================================================================
* Toutes résolutions — hamburger mobile + cart icon (SVG custom)
* ==================================================================== */
/* État par défaut : blanc */
.elementor-location-header .e-n-menu-toggle,
.elementor-location-header .e-n-menu-toggle *,
.elementor-location-header .sifas-counter__icon,
.elementor-location-header svg.e-eicon-cart-medium {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
fill: currentColor !important;
transition: color 0.3s ease,
-webkit-text-fill-color 0.3s ease,
fill 0.3s ease !important;
}
/* Path SVG : explicitement currentColor */
.elementor-location-header .e-n-menu-toggle svg path,
.elementor-location-header svg.e-eicon-cart-medium path {
fill: currentColor !important;
}
/* Scroll > 1 % : noir */
body.is-scrolled .elementor-location-header .e-n-menu-toggle,
body.is-scrolled .elementor-location-header .e-n-menu-toggle *,
body.is-scrolled .elementor-location-header .sifas-counter__icon,
body.is-scrolled .elementor-location-header svg.e-eicon-cart-medium {
color: #000000 !important;
-webkit-text-fill-color: #000000 !important;
fill: currentColor !important;
}
/* Exceptions : single-product + page distributeur — noir permanent */
body.single-product .elementor-location-header .e-n-menu-toggle,
body.single-product .elementor-location-header .e-n-menu-toggle *,
body.single-product .elementor-location-header .sifas-counter__icon,
body.single-product .elementor-location-header svg.e-eicon-cart-medium,
body.is-page-static-header .elementor-location-header .e-n-menu-toggle,
body.is-page-static-header .elementor-location-header .e-n-menu-toggle *,
body.is-page-static-header .elementor-location-header .sifas-counter__icon,
body.is-page-static-header .elementor-location-header svg.e-eicon-cart-medium {
color: #000000 !important;
-webkit-text-fill-color: #000000 !important;
fill: currentColor !important;
transition: none !important;
}
/* ====================================================================
* Logo Sifas (SVG via ![]()
) — toutes résolutions
* ====================================================================
*
* Le logo est servi comme `
` (pas inline). Le
* SVG interne utilise `fill="currentColor"` mais comme il est rendu dans
* le sandbox `![]()
` du navigateur, on ne peut pas le piloter via CSS
* `color`. On utilise donc un `filter` qui modifie le rendu de l'image.
*
* Effet :
* - filter: brightness(0) invert(1)
* → brightness(0) écrase tout en noir, invert(1) inverse → tout devient
* BLANC. Parfait pour un SVG monochrome (notre cas).
* - filter: none → image rendue avec sa couleur native (noir).
*
* Sélecteur ultra-précis (img[src*="sifas-logo"]) pour ne PAS toucher
* d'autres images qu'on pourrait avoir dans le header — pas d'effet de
* bord sur la photo produit du moodboard ou autres img potentielles.
* ==================================================================== */
/* État par défaut : logo en blanc (au top, fond transparent) */
.elementor-location-header img[src*="sifas-logo"] {
filter: brightness(0) invert(1) !important;
transition: filter 0.3s ease !important;
}
/* Scroll > 1 % : logo en couleur native (noir, fond blanc) */
body.is-scrolled .elementor-location-header img[src*="sifas-logo"] {
filter: none !important;
}
/* Exceptions : fiche produit Woo + page distributeur — logo natif (noir)
* en permanence, pas de transition. */
body.single-product .elementor-location-header img[src*="sifas-logo"],
body.is-page-static-header .elementor-location-header img[src*="sifas-logo"] {
filter: none !important;
transition: none !important;
}