/** * ============================================================================ * Beau Nuage Immersive Header — Front office styles * Module : beaunuage_immersiveheader * Version : 3.2.6 * ---------------------------------------------------------------------------- * Règles scopées par "html.bn-ih" (classe ajoutée en par displayHeader). * Modes : --light | --dark | --blend | --adaptive * États : --scrolled (header solide), --st-light / --st-dark (couleur scroll) * * NOTE TECHNIQUE (mix-blend-mode) : * le mode "blend" applique mix-blend-mode:difference sur HEADER.MAIN (fixe, * visible) : toute la barre (logo, liens, pictos) s'inverse contre le héros. * À l'ouverture d'un sous-menu, front.js pose bn-ih--menu-open qui coupe le * blend pour garder le déroulant sur fond blanc lisible. * ============================================================================ */ :root { --bn-ih-scroll-bg: #151d2e; --bn-ih-text-light: #ffffff; --bn-ih-text-dark: #10141d; } /* Évite la barre de scroll horizontale générée par le breakout 100vw du héros */ html.bn-ih { overflow-x: hidden; } /* =========================================================================== * 1. OVERLAY DE BASE — header transparent par-dessus le contenu * =========================================================================== */ html.bn-ih header.main { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 1030; background: transparent !important; transition: background .4s ease, box-shadow .4s ease; } html.bn-ih.bn-ih--sticky header.main { position: fixed; } html.bn-ih header.main .navbar { } /* Transitions douces */ html.bn-ih header.main #top-menu .nav-link, html.bn-ih header.main .navbar-brand img, html.bn-ih header.main .headerAction img:not([src*="/img/l/"]), html.bn-ih header.main .headerAction svg, html.bn-ih header.main .cart-products-count { transition: color .35s ease, filter .35s ease; } /* Masquage optionnel du bandeau promo */ html.bn-ih.bn-ih--hidepromo header.main > div:first-of-type { display: none !important; } /* Pages CMS immersives : le conteneur de contenu du thème (.page-content.page-cms) porte padding:1.25rem + background:#fff, ce qui décalait le héros sous le header transparent et créait un cadre blanc. On le neutralise (uniquement sur les pages CMS en mode immersif — ce sélecteur n'existe que sur les pages CMS). */ html.bn-ih .page-content.page-cms { padding: 0 !important; background: transparent !important; } /* Sous-menus déroulants : toujours opaques et lisibles par-dessus le héros, quel que soit le mode (jamais fusionnés/transparents). */ html.bn-ih header.main .sub-menu { background: #fff !important; mix-blend-mode: normal !important; } html.bn-ih header.main .sub-menu .dropdown-item { color: var(--bn-ih-text-dark) !important; mix-blend-mode: normal !important; filter: none !important; } /* =========================================================================== * 2. PLEIN HAUTEUR / FULL-BLEED * Les règles précises (sélecteur configurable) sont injectées dynamiquement * par le PHP (hookDisplayHeader). Fallback générique ci-dessous. * =========================================================================== */ html.bn-ih.bn-ih--full #content > section:first-of-type { min-height: 100vh; } /* =========================================================================== * 3. MODE CLAIR — texte & logo blancs * =========================================================================== */ html.bn-ih.bn-ih--light header.main #top-menu .nav-link, html.bn-ih.bn-ih--light header.main .cart-products-count { color: var(--bn-ih-text-light) !important; } html.bn-ih.bn-ih--light header.main .navbar-brand img, html.bn-ih.bn-ih--light header.main .headerAction img:not([src*="/img/l/"]), html.bn-ih.bn-ih--light header.main .headerAction svg { filter: brightness(0) invert(1); } /* =========================================================================== * 4. MODE FONCÉ — texte & logo sombres (visuels d'origine) * =========================================================================== */ html.bn-ih.bn-ih--dark header.main #top-menu .nav-link, html.bn-ih.bn-ih--dark header.main .cart-products-count { color: var(--bn-ih-text-dark) !important; } html.bn-ih.bn-ih--dark header.main .navbar-brand img, html.bn-ih.bn-ih--dark header.main .headerAction img:not([src*="/img/l/"]), html.bn-ih.bn-ih--dark header.main .headerAction svg { filter: none; } /* =========================================================================== * 5. MODE CONTRASTE DYNAMIQUE (blend) * mix-blend-mode:difference sur header.main (fixe, visible) : toute la barre — * logo, liens ET pictos de droite — s'inverse contre le héros (blanc sur les * zones sombres, foncé sur les zones claires), sans bande ni couture. * À l'ouverture d'un sous-menu, front.js pose la classe bn-ih--menu-open qui * coupe le blend, afin que le déroulant reste sur fond blanc lisible. * =========================================================================== */ html.bn-ih.bn-ih--blend header.main { position: fixed !important; z-index: 1030 !important; mix-blend-mode: difference; } html.bn-ih.bn-ih--blend header.main #top-menu .nav-link, html.bn-ih.bn-ih--blend header.main .cart-products-count { color: #fff !important; } html.bn-ih.bn-ih--blend header.main .navbar-brand img, html.bn-ih.bn-ih--blend header.main .headerAction img:not([src*="/img/l/"]), html.bn-ih.bn-ih--blend header.main .headerAction svg { filter: brightness(0) invert(1); } /* --------------------------------------------------------------------------- * Sous-menu déroulant ouvert (mode blend) : * on bascule le header dans le MÊME rendu qu'au scroll — fond solide (couleur de * scroll), ombre, blend coupé, texte/icônes selon la couleur de scroll choisie — * et le déroulant sur fond blanc. Déclencheurs : la classe bn-ih--menu-open * (front.js) ET le CSS :has() au survol (filet de sécurité fiable, suffit à lui * seul ; :has(li:hover .sub-menu) couvre aussi le survol du déroulant lui-même). * ------------------------------------------------------------------------------- */ html.bn-ih.bn-ih--blend.bn-ih--menu-open header.main, html.bn-ih.bn-ih--blend:has(#top-menu li:hover .sub-menu) header.main { mix-blend-mode: normal !important; background: var(--bn-ih-scroll-bg) !important; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); } /* Couleur de scroll claire */ html.bn-ih.bn-ih--blend.bn-ih--st-light.bn-ih--menu-open header.main #top-menu .nav-link, html.bn-ih.bn-ih--blend.bn-ih--st-light.bn-ih--menu-open header.main .cart-products-count, html.bn-ih.bn-ih--blend.bn-ih--st-light:has(#top-menu li:hover .sub-menu) header.main #top-menu .nav-link, html.bn-ih.bn-ih--blend.bn-ih--st-light:has(#top-menu li:hover .sub-menu) header.main .cart-products-count { color: var(--bn-ih-text-light) !important; } html.bn-ih.bn-ih--blend.bn-ih--st-light.bn-ih--menu-open header.main .navbar-brand img, html.bn-ih.bn-ih--blend.bn-ih--st-light.bn-ih--menu-open header.main .headerAction img:not([src*="/img/l/"]), html.bn-ih.bn-ih--blend.bn-ih--st-light.bn-ih--menu-open header.main .headerAction svg, html.bn-ih.bn-ih--blend.bn-ih--st-light:has(#top-menu li:hover .sub-menu) header.main .navbar-brand img, html.bn-ih.bn-ih--blend.bn-ih--st-light:has(#top-menu li:hover .sub-menu) header.main .headerAction img:not([src*="/img/l/"]), html.bn-ih.bn-ih--blend.bn-ih--st-light:has(#top-menu li:hover .sub-menu) header.main .headerAction svg { filter: brightness(0) invert(1) !important; } /* Couleur de scroll foncée */ html.bn-ih.bn-ih--blend.bn-ih--st-dark.bn-ih--menu-open header.main #top-menu .nav-link, html.bn-ih.bn-ih--blend.bn-ih--st-dark.bn-ih--menu-open header.main .cart-products-count, html.bn-ih.bn-ih--blend.bn-ih--st-dark:has(#top-menu li:hover .sub-menu) header.main #top-menu .nav-link, html.bn-ih.bn-ih--blend.bn-ih--st-dark:has(#top-menu li:hover .sub-menu) header.main .cart-products-count { color: var(--bn-ih-text-dark) !important; } html.bn-ih.bn-ih--blend.bn-ih--st-dark.bn-ih--menu-open header.main .navbar-brand img, html.bn-ih.bn-ih--blend.bn-ih--st-dark.bn-ih--menu-open header.main .headerAction img:not([src*="/img/l/"]), html.bn-ih.bn-ih--blend.bn-ih--st-dark.bn-ih--menu-open header.main .headerAction svg, html.bn-ih.bn-ih--blend.bn-ih--st-dark:has(#top-menu li:hover .sub-menu) header.main .navbar-brand img, html.bn-ih.bn-ih--blend.bn-ih--st-dark:has(#top-menu li:hover .sub-menu) header.main .headerAction img:not([src*="/img/l/"]), html.bn-ih.bn-ih--blend.bn-ih--st-dark:has(#top-menu li:hover .sub-menu) header.main .headerAction svg { filter: none !important; } /* Déroulant lui-même : fond blanc, texte foncé */ html.bn-ih.bn-ih--blend.bn-ih--menu-open header.main .sub-menu, html.bn-ih.bn-ih--blend:has(#top-menu li:hover .sub-menu) header.main .sub-menu { background: #fff !important; mix-blend-mode: normal !important; } html.bn-ih.bn-ih--blend.bn-ih--menu-open header.main .sub-menu .dropdown-item, html.bn-ih.bn-ih--blend:has(#top-menu li:hover .sub-menu) header.main .sub-menu .dropdown-item { color: var(--bn-ih-text-dark) !important; } /* Au scroll : header solide, blend coupé. */ html.bn-ih.bn-ih--blend.bn-ih--scrolled header.main { mix-blend-mode: normal !important; } /* =========================================================================== * 6. MODE ADAPTATIF — classes pilotées par front.js (--ad-light / --ad-dark) * =========================================================================== */ html.bn-ih--adaptive.bn-ih--ad-light header.main #top-menu .nav-link, html.bn-ih--adaptive.bn-ih--ad-light header.main .cart-products-count { color: var(--bn-ih-text-light) !important; } html.bn-ih--adaptive.bn-ih--ad-light header.main .navbar-brand img, html.bn-ih--adaptive.bn-ih--ad-light header.main .headerAction img:not([src*="/img/l/"]), html.bn-ih--adaptive.bn-ih--ad-light header.main .headerAction svg { filter: brightness(0) invert(1); } html.bn-ih--adaptive.bn-ih--ad-dark header.main #top-menu .nav-link, html.bn-ih--adaptive.bn-ih--ad-dark header.main .cart-products-count { color: var(--bn-ih-text-dark) !important; } html.bn-ih--adaptive.bn-ih--ad-dark header.main .navbar-brand img, html.bn-ih--adaptive.bn-ih--ad-dark header.main .headerAction img:not([src*="/img/l/"]), html.bn-ih--adaptive.bn-ih--ad-dark header.main .headerAction svg { filter: none; } /* =========================================================================== * 7. ÉTAT SOLIDE AU SCROLL — surclasse tous les modes ci-dessus * =========================================================================== */ html.bn-ih.bn-ih--scrolled header.main { background: var(--bn-ih-scroll-bg) !important; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); mix-blend-mode: normal !important; } html.bn-ih.bn-ih--scrolled.bn-ih--hidepromo header.main > div:first-of-type { display: none !important; } /* Couleur scroll : claire */ html.bn-ih.bn-ih--scrolled.bn-ih--st-light header.main #top-menu .nav-link, html.bn-ih.bn-ih--scrolled.bn-ih--st-light header.main .cart-products-count { color: var(--bn-ih-text-light) !important; } html.bn-ih.bn-ih--scrolled.bn-ih--st-light header.main .navbar-brand img, html.bn-ih.bn-ih--scrolled.bn-ih--st-light header.main .headerAction img:not([src*="/img/l/"]), html.bn-ih.bn-ih--scrolled.bn-ih--st-light header.main .headerAction svg { filter: brightness(0) invert(1) !important; } /* Couleur scroll : foncée */ html.bn-ih.bn-ih--scrolled.bn-ih--st-dark header.main #top-menu .nav-link, html.bn-ih.bn-ih--scrolled.bn-ih--st-dark header.main .cart-products-count { color: var(--bn-ih-text-dark) !important; } html.bn-ih.bn-ih--scrolled.bn-ih--st-dark header.main .navbar-brand img, html.bn-ih.bn-ih--scrolled.bn-ih--st-dark header.main .headerAction img:not([src*="/img/l/"]), html.bn-ih.bn-ih--scrolled.bn-ih--st-dark header.main .headerAction svg { filter: none !important; } /* --------------------------------------------------------------------------- * Surcharge du sticky header NATIF du thème (.sticky_header) * Le thème pose sa propre barre fixe au scroll (.sticky_header, gérée par * Elementor / le thème). On force uniquement sa couleur de fond sur la valeur * administrable du module (« Couleur de fond au scroll »), pour qu'elle ne * reste pas transparente — sans toucher à Elementor ni au reste du thème. * La valeur provient de la variable --bn-ih-scroll-bg injectée par le module * (repli sur #151d2e si absente). * ------------------------------------------------------------------------------- */ html.bn-ih .sticky_header { background-color: var(--bn-ih-scroll-bg, #151d2e) !important; } /* =========================================================================== * 7bis. GRAISSE DU MENU DE NIVEAU 1 (réglable par page) * Classe html.bn-ih--menu-bold / --menu-xbold posée selon la page courante. * Le -webkit-text-stroke épaissit le tracé même si la police du thème * (AG-xlt / alwynbold) ne dispose pas d'une vraie variante grasse chargée. * Cible uniquement les liens de 1er niveau (pas les sous-menus). * =========================================================================== */ html.bn-ih.bn-ih--menu-bold header.main #top-menu > li > .nav-link, html.bn-ih.bn-ih--menu-bold header.main nav.navbar .navbar-nav > li > .nav-link { font-weight: 700 !important; font-size: 15px !important; letter-spacing: 1.1px !important; -webkit-text-stroke: 0.4px currentColor; text-stroke: 0.4px currentColor; } html.bn-ih.bn-ih--menu-xbold header.main #top-menu > li > .nav-link, html.bn-ih.bn-ih--menu-xbold header.main nav.navbar .navbar-nav > li > .nav-link { font-weight: 800 !important; font-size: 16px !important; letter-spacing: 1.3px !important; -webkit-text-stroke: 0.8px currentColor; text-stroke: 0.8px currentColor; } /* =========================================================================== * 8. RESPONSIVE / MENU MOBILE * =========================================================================== */ @media (max-width: 991px) { html.bn-ih header.main { position: fixed; } /* En blend, header fixe et blend neutralisé (menu off-canvas lisible) */ html.bn-ih.bn-ih--blend header.main { position: fixed !important; z-index: 1030 !important; mix-blend-mode: normal !important; } html.bn-ih.bn-ih--blend header.main .navbar-brand img, html.bn-ih.bn-ih--blend header.main #top-menu > li > .nav-link, html.bn-ih.bn-ih--blend header.main .headerAction img:not([src*="/img/l/"]), html.bn-ih.bn-ih--blend header.main .headerAction svg { mix-blend-mode: normal !important; } html.bn-ih header.main .navbar-collapse.show, html.bn-ih header.main .navbar-collapse.collapsing { background: var(--bn-ih-scroll-bg); } html.bn-ih header.main .navbar-collapse.show #top-menu .nav-link { color: var(--bn-ih-text-light) !important; } } @media only screen and (max-width: 992px) { .navbar-collapse { position: fixed; top: 0px; left: 0; width: 100%; background: #fff!important; z-index: 100; padding: 40px; } } #navbarNav{ background: transparent !important; }