/** * LSN Immersive Header — Front * @author EVOL Digital - Jérôme Aldigier * @version 2.17.3 * * Surcouche home pilotée par les classes ajoutées sur par front.js : * .lsn-ih-active / .lsn-ih-header / .lsn-ih-logo / .lsn-ih-logo-filter * .lsn-ih-hero / .lsn-ih-topbar / .lsn-ih-megabg / .lsn-ih-solid * Couleurs fournies par variables CSS injectées en par le module. * ------------------------------------------------------------------------- */ /* ====================== HEADER IMMERSIF (overlay) ====================== */ html.lsn-ih-active.lsn-ih-header #header { position: fixed; top: 0; left: 0; right: 0; z-index: 99990; background: transparent !important; box-shadow: none !important; border: 0 !important; transition: background-color .35s ease, box-shadow .35s ease; } html.lsn-ih-active.lsn-ih-header #header .header-top, html.lsn-ih-active.lsn-ih-header #header .header-nav, html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu, html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu_content, html.lsn-ih-active.lsn-ih-header #header .blockcart { background: transparent !important; box-shadow: none !important; } /* Neutralise un éventuel "sticky" natif du méga-menu (évite le doublon). */ html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu, html.lsn-ih-active.lsn-ih-header .ets_mm_megamenu.menu-is-sticky, html.lsn-ih-active.lsn-ih-header .ets_mm_megamenu_sticky, html.lsn-ih-active.lsn-ih-header .ybc-menu-sticky { position: static !important; } /* Dégradé de lisibilité (haut du hero) — pseudo-élément. */ html.lsn-ih-active.lsn-ih-hero #header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--lsn-grad-h, 240px); background: var(--lsn-grad); pointer-events: none; z-index: -1; opacity: 1; transition: opacity .35s ease; } html.lsn-ih-active.lsn-ih-hero.lsn-ih-solid #header::before { opacity: 0; } /* ---- Texte / liens en blanc (état non scrollé) ---- */ html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .ets_mm_url, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .mm_menu_content_title, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .mm_menu_content_title a, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .close_menu { color: var(--lsn-text) !important; } html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .mm_arrow { border-color: var(--lsn-text) !important; } /* Icônes SVG (loupe / profil / panier) en blanc. */ html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .right-nav img, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .header-icons-wrapper img, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .search-toggle-btn img, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header #_mobile_loupe img, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header #_mobile_cart img, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header #_mobile_user_info img, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .material-icons { filter: brightness(0) invert(1) !important; } html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .cart-products-count, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .cart-products-count2 { color: var(--lsn-text) !important; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; } /* Soulignement animé des entrées de menu (rappel maquette). */ html.lsn-ih-active.lsn-ih-header #header .mm_menus_li > a.ets_mm_url .mm_menu_content_title { position: relative; padding-bottom: 8px; } html.lsn-ih-active.lsn-ih-header #header .mm_menus_li > a.ets_mm_url .mm_menu_content_title::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: currentColor; transition: right .28s ease; } html.lsn-ih-active.lsn-ih-header #header .mm_menus_li:hover > a.ets_mm_url .mm_menu_content_title::after { right: 0; } /* ---- Logo blanc ---- */ html.lsn-ih-active.lsn-ih-logo-filter:not(.lsn-ih-solid) #header #_desktop_logo img.logo, html.lsn-ih-active.lsn-ih-logo-filter:not(.lsn-ih-solid) #header #_mobile_logo img { filter: brightness(0) invert(1); transition: filter .35s ease; } /* ====================== ÉTAT SCROLLÉ (header solide) ====================== */ /* Un seul fond blanc, porté par #header. Tous les conteneurs internes restent transparents (pas de dégradé/teinte du thème) -> blanc parfaitement uniforme. */ html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header { background: var(--lsn-solid-bg) !important; background-image: none !important; box-shadow: 0 2px 18px rgba(0, 0, 0, .08) !important; } html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .header-top, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .header-banner, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .header-desktop-row, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .container, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .container-fluid, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .row, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .ets_mm_megamenu, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .ets_mm_megamenu_content, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .ets_mm_megamenu_content_content, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .mm_menus_ul, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .mm_menus_li, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .ybc-menu, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .ybc-menu-horizontal, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .ybc-mainmenu, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header nav, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .main-menu, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .menu { background: transparent !important; background-image: none !important; box-shadow: none !important; } html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .ets_mm_url, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .mm_menu_content_title, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .mm_menu_content_title a { color: var(--lsn-solid-text) !important; } html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .right-nav img, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .search-toggle-btn img, html.lsn-ih-active.lsn-ih-header.lsn-ih-solid #header .material-icons { filter: none !important; } /* ============ MÉGA-MENU : barre transparente + panneau flottant ============ */ /* Fix boîte blanche : neutralise le fond de l'entrée active/survolée (barre). */ html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_menus_ul, html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_menus_li, html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_menus_li:hover, html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_menus_li.hover, html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_menus_li > a.ets_mm_url, html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_menus_li:hover > a.ets_mm_url, html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_menus_li.hover > a.ets_mm_url { background: transparent !important; box-shadow: none !important; border-top: 0 !important; } /* Supprime le fin trait coloré qui apparaît au-dessus de l'entrée de menu en survol/actif (indicateur posé par le thème). Le pont de survol est sur .mm_columns_ul::before : non impacté. */ html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_menus_li, html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_menus_li:hover, html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_menus_li.hover, html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_menus_ul, html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu { border-top: 0 !important; } html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_menus_li:hover::before, html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_menus_li.hover::before, html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_menus_li:hover > a.ets_mm_url::before, html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_menus_li.hover > a.ets_mm_url::before { display: none !important; } /* Panneau déroulant = carte blanche flottante dans TOUS les états (haut, scrollé, sticky). NB : non scopé à #header pour couvrir un éventuel clone sticky déplacé hors du header. display:flow-root contient les colonnes flottantes -> le fond couvre toute la carte. */ html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul { background: var(--lsn-solid-bg) !important; border: 0 !important; border-radius: 18px !important; box-shadow: 0 26px 64px rgba(8, 40, 30, .22) !important; padding: 26px 30px !important; margin-top: 0 !important; display: flow-root !important; z-index: 999 !important; } html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul::after { content: ""; display: block; clear: both; } html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .mm_columns_li { background: transparent !important; padding: 0 12px; } html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .mm_blocks_ul, html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .mm_blocks_li { background: transparent !important; } /* Titres & liens du panneau. */ html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .h4, html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .h4 a { color: var(--lsn-accent) !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px !important; margin-bottom: 10px; } html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul ul li a { color: var(--lsn-solid-text) !important; line-height: 2.1; transition: color .18s ease, padding-left .18s ease; } html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul ul li a:hover { color: var(--lsn-accent) !important; padding-left: 4px; } /* Encarts image -> cartes premium compactes (images portrait recadrées). */ html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .mm_block_type_image { background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 14px; text-align: center; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .mm_block_type_image:hover { transform: translateY(-3px); border-color: var(--lsn-accent); box-shadow: 0 14px 30px rgba(8, 40, 30, .14); } html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .mm_block_type_image .h4 { margin: 0 0 10px; text-align: center; } html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .mm_block_type_image .mm_img_content { display: block; border-radius: 10px; overflow: hidden; } html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .mm_block_type_image img { width: 100% !important; height: auto !important; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 10px; transition: transform .4s ease; } html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .mm_block_type_image:hover img { transform: scale(1.05); } /* Réassurance reprise en bas du panneau (injectée par JS). */ html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .lsn-ih-mm-reass { list-style: none; clear: both; width: 100%; margin: 22px 0 0; padding: 18px 0 2px; border-top: 1px solid #ececec; } html.lsn-ih-active .lsn-ih-mm-reass .lsn-ih-reassurance__inner { max-width: 100%; } html.lsn-ih-active .lsn-ih-mm-reass .lsn-ih-reassurance__item { color: var(--lsn-solid-text); padding: 2px 18px; } html.lsn-ih-active .lsn-ih-mm-reass .lsn-ih-reassurance__item + .lsn-ih-reassurance__item { border-left-color: #e6e6e6; } html.lsn-ih-active .lsn-ih-mm-reass .lsn-ih-reassurance__icon { color: var(--lsn-accent); } html.lsn-ih-active .lsn-ih-mm-reass .lsn-ih-reassurance__icon svg { width: 30px; height: 30px; } html.lsn-ih-active .lsn-ih-mm-reass .lsn-ih-reassurance__title { font-size: 13px; } html.lsn-ih-active .lsn-ih-mm-reass .lsn-ih-reassurance__subtitle { font-size: 12px; opacity: 1; color: #6a7a72; } /* ====================== BLOC DE RÉASSURANCE (bas du hero) ====================== */ .lsn-ih-hero-host { position: relative; } .lsn-ih-reassurance { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 26px 4% 30px; background: var(--lsn-reass-grad); pointer-events: none; } .lsn-ih-reassurance__inner { display: flex; align-items: center; justify-content: center; max-width: 1320px; margin: 0 auto; } .lsn-ih-reassurance__item { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 4px 26px; color: var(--lsn-text); } .lsn-ih-reassurance__item + .lsn-ih-reassurance__item { border-left: 1px solid rgba(255, 255, 255, .28); } .lsn-ih-reassurance__icon { flex: 0 0 auto; display: inline-flex; color: var(--lsn-text); } .lsn-ih-reassurance__icon svg { width: 38px; height: 38px; display: block; stroke: currentColor; fill: none; } .lsn-ih-reassurance__text { display: flex; flex-direction: column; line-height: 1.28; } .lsn-ih-reassurance__title { font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .lsn-ih-reassurance__subtitle { font-size: 14px; font-weight: 400; opacity: .92; letter-spacing: .03em; } /* ====================== BARRE PROMO IMMERSIVE ====================== */ html.lsn-ih-active.lsn-ih-topbar .lsn-ih-topbar-el { background: transparent !important; color: var(--lsn-text) !important; } html.lsn-ih-active.lsn-ih-topbar .lsn-ih-topbar-el * { color: var(--lsn-text) !important; } html.lsn-ih-active.lsn-ih-topbar.lsn-ih-solid .lsn-ih-topbar-el, html.lsn-ih-active.lsn-ih-topbar.lsn-ih-solid .lsn-ih-topbar-el * { color: var(--lsn-solid-text) !important; } /* ====================== RESPONSIVE ====================== */ @media (max-width: 1199px) { .lsn-ih-reassurance__item { padding: 4px 14px; gap: 12px; } .lsn-ih-reassurance__title { font-size: 13px; } .lsn-ih-reassurance__subtitle { font-size: 12px; } .lsn-ih-reassurance__icon svg { width: 32px; height: 32px; } } @media (max-width: 991px) { .lsn-ih-reassurance { position: static; background: var(--lsn-reass-solid); padding: 18px 4%; } .lsn-ih-reassurance__inner { flex-wrap: wrap; } .lsn-ih-reassurance__item { flex: 1 1 45%; justify-content: flex-start; padding: 10px 12px; } .lsn-ih-reassurance__item + .lsn-ih-reassurance__item { border-left: 0; } html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_menus_ul { background: var(--lsn-solid-bg) !important; } html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .ets_mm_megamenu .mm_menus_ul .ets_mm_url, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .ets_mm_megamenu .mm_menus_ul .mm_menu_content_title { color: var(--lsn-solid-text) !important; } html.lsn-ih-active.lsn-ih-header #header .ets_mm_megamenu .mm_columns_ul { margin-top: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 12px !important; } } @media (max-width: 575px) { .lsn-ih-reassurance__item { flex: 1 1 100%; } } /* ====================== HERO PERSONNALISÉ (remplace le slider) ====================== */ html.lsn-ih-customhero .elementor-widget-ps-widget-LayerSlider, html.lsn-ih-customhero .lsn-ih-slider-hidden { display: none !important; } .lsn-ih-hero-custom { position: relative; width: 100%; min-height: var(--lsn-hero-h, 720px); max-height: 96vh; display: flex; align-items: center; overflow: hidden; background-image: var(--lsn-hero-img); background-size: cover; background-position: center; background-repeat: no-repeat; } .lsn-ih-hero-custom__overlay { position: absolute; inset: 0; background: var(--lsn-hero-overlay); pointer-events: none; z-index: 1; } .lsn-ih-hero-custom__content { position: relative; z-index: 2; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 4%; } .lsn-ih-hero-custom__inner { max-width: 560px; color: var(--lsn-text); } .lsn-ih-hero-custom__title { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size: clamp(40px, 4.4vw, 68px); line-height: 1.05; font-weight: 600; color: var(--lsn-text); margin: 0 0 18px; } .lsn-ih-hero-custom__rule { display: block; width: 210px; max-width: 60%; height: 3px; background: var(--lsn-accent); margin: 0 0 26px; border-radius: 3px; } .lsn-ih-hero-custom__subtitle { font-size: clamp(16px, 1.5vw, 22px); line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--lsn-text); margin: 0 0 32px; font-weight: 500; } .lsn-ih-hero-custom__btn { display: inline-flex; align-items: center; gap: 14px; background: var(--lsn-accent); color: #fff !important; text-decoration: none !important; font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 16px 30px; border-radius: 4px; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .lsn-ih-hero-custom__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(8, 40, 30, .3); color: #fff !important; } .lsn-ih-hero-custom__arrow { font-size: 18px; line-height: 1; transition: transform .2s ease; } .lsn-ih-hero-custom__btn:hover .lsn-ih-hero-custom__arrow { transform: translateX(4px); } /* Réassurance posée en bas du hero perso. */ .lsn-ih-hero-custom .lsn-ih-reassurance { z-index: 3; } @media (max-width: 991px) { .lsn-ih-hero-custom { min-height: 78vh; background-image: var(--lsn-hero-img-mobile, var(--lsn-hero-img)); } .lsn-ih-hero-custom__inner { max-width: 100%; } } @media (max-width: 575px) { .lsn-ih-hero-custom__subtitle { font-size: 15px; } } /* ====================== HERO PLEIN ÉCRAN + MASQUAGE BARRE PROMO ====================== */ html.lsn-ih-herofull .lsn-ih-hero-custom { min-height: 100vh; max-height: none; } /* Masquage de la barre promo (#promobar5 + élément détecté). */ html.lsn-ih-hidetopbar #promobar5, html.lsn-ih-hidetopbar .lsn-ih-topbar-el { display: none !important; } /* ====================== v1.7 — hover/scroll/pleine largeur/mobile ====================== */ /* Header toujours visible (empêche un masquage au scroll par transform du thème). */ html.lsn-ih-active.lsn-ih-header #header { transform: none !important; } /* Supprime le fond de survol natif du thème sur les entrées (fix texte blanc invisible). */ html.lsn-ih-active.lsn-ih-header #header .ets_mm_url:hover, html.lsn-ih-active.lsn-ih-header #header .mm_menus_li.hover, html.lsn-ih-active.lsn-ih-header #header .mm_menus_li.hover > a.ets_mm_url, html.lsn-ih-active.lsn-ih-header #header .mm_menu_content_title:hover { background: transparent !important; } /* Hero vraiment pleine largeur (déborde du conteneur Elementor). */ .lsn-ih-hero-custom { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Mobile : réassurance 2x2 transparente et immersive (comme desktop). */ @media (max-width: 991px) { html.lsn-ih-customhero .lsn-ih-hero-custom .lsn-ih-reassurance { position: absolute; background: var(--lsn-reass-grad); padding: 16px 5% 22px; } html.lsn-ih-customhero .lsn-ih-hero-custom .lsn-ih-reassurance__inner { flex-wrap: wrap; } html.lsn-ih-customhero .lsn-ih-hero-custom .lsn-ih-reassurance__item { flex: 0 0 50%; max-width: 50%; justify-content: flex-start; padding: 9px 14px; color: var(--lsn-text); } html.lsn-ih-customhero .lsn-ih-hero-custom .lsn-ih-reassurance__item + .lsn-ih-reassurance__item { border-left: 0; } html.lsn-ih-customhero .lsn-ih-hero-custom .lsn-ih-reassurance__item:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .22); } html.lsn-ih-customhero .lsn-ih-hero-custom .lsn-ih-reassurance__item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .18); } html.lsn-ih-customhero .lsn-ih-hero-custom__content { padding-bottom: 200px; } } /* ====================== v1.9 — burger mobile (barres blanches, conteneur sans fond) ====================== */ @media (max-width: 991px) { /* Conteneur du burger : jamais de fond blanc. */ html.lsn-ih-active .ybc-menu-toggle, html.lsn-ih-active .ybc-menu-btn, html.lsn-ih-active .ybc-menu-button-toggle_icon { background: transparent !important; box-shadow: none !important; } /* Header immersif (non-solide) : barres + libellé blancs. */ html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) .ybc-menu-button-toggle_icon .icon-bar { background-color: #ffffff !important; border-color: #ffffff !important; } html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) .ybc-menu-toggle .ybc-menu-button-title { color: #ffffff !important; } /* En scroll (barre blanche) : barres + libellé foncés pour rester lisibles. */ html.lsn-ih-active.lsn-ih-header.lsn-ih-solid .ybc-menu-button-toggle_icon .icon-bar { background-color: var(--lsn-solid-text) !important; border-color: var(--lsn-solid-text) !important; } html.lsn-ih-active.lsn-ih-header.lsn-ih-solid .ybc-menu-toggle .ybc-menu-button-title { color: var(--lsn-solid-text) !important; } } /* ====================== v2.0 — barre toujours transparente + pont de survol ====================== */ /* Pont invisible entre la barre et le panneau : comble le margin-top de la carte pour que le méga-menu ne se referme pas quand on descend la souris vers le panneau. */ html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; background: transparent; } /* ====================== v2.1 — barre 100% transparente au survol ====================== */ /* Un wrapper interne du header passait en blanc à l'ouverture d'un méga-menu. On force la transparence de toute la structure du header en état non-scrollé. IMPORTANT : le panneau .mm_columns_ul n'est PAS ciblé -> il reste blanc. */ html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .header-top, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .header-nav, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .header_desktop_row, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .row, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .container, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .ets_mm_megamenu, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .ets_mm_megamenu_content, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .ets_mm_megamenu_content_content, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header #_desktop_top_menu, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .menu, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .mm_menus_ul, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .mm_menus_li, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .mm_menus_li.hover { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* ====================== v2.2 — barre 100% transparente + zone haute supprimée ====================== */ /* Plus aucun voile : suppression du dégradé de lisibilité du header en mode non-fixé. */ html.lsn-ih-active.lsn-ih-hero:not(.lsn-ih-solid) #header::before { display: none !important; } /* Supprime la bande vide en haut du header (.header-banner vide). */ html.lsn-ih-active.lsn-ih-header #header .header-banner { display: none !important; } /* ====================== v2.5 — transparence barre : wrappers réels (header-desktop-row, container-fluid) ====================== */ html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .container-fluid, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .header-desktop-row, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .header-search-wrapper, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header #_desktop_logo, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header #_desktop_menu, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .right-nav, html.lsn-ih-active.lsn-ih-header:not(.lsn-ih-solid) #header .header-icons-wrapper { background: transparent !important; background-color: transparent !important; } /* ====================== v2.7 — bulle de recherche immersive ====================== */ html.lsn-ih-active #search_widget { top: calc(100% + 10px) !important; right: 0 !important; min-width: 420px !important; max-width: 92vw !important; padding: 16px !important; background: #ffffff !important; border: 1px solid rgba(8, 40, 30, .07) !important; border-radius: 16px !important; box-shadow: 0 26px 64px rgba(8, 40, 30, .22) !important; z-index: 100000 !important; } /* Petite pointe vers la loupe. */ html.lsn-ih-active #search_widget::before { content: ""; position: absolute; top: -7px; right: 78px; width: 14px; height: 14px; background: #ffffff; border-left: 1px solid rgba(8, 40, 30, .07); border-top: 1px solid rgba(8, 40, 30, .07); transform: rotate(45deg); } html.lsn-ih-active #search_widget form { position: relative; display: flex; align-items: center; margin: 0 !important; } html.lsn-ih-active #search_widget .material-icons.search { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); margin: 0 !important; color: var(--lsn-accent, #009877) !important; font-size: 22px !important; pointer-events: none; } html.lsn-ih-active #search_widget input[type="text"] { width: 100% !important; height: auto !important; border: 1px solid rgba(8, 40, 30, .12) !important; background: #f5f7f5 !important; border-radius: 12px !important; padding: 14px 44px 14px 46px !important; font-size: 15px !important; line-height: 1.2 !important; color: var(--lsn-solid-text, #0a3b2e) !important; box-shadow: none !important; outline: none !important; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } html.lsn-ih-active #search_widget input[type="text"]:focus { border-color: var(--lsn-accent, #009877) !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(0, 152, 119, .15) !important; } html.lsn-ih-active #search_widget input[type="text"]::placeholder { color: #9aa39d !important; opacity: 1; } html.lsn-ih-active #search_widget .material-icons.clear { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #9aa39d !important; font-size: 20px !important; cursor: pointer; } html.lsn-ih-active #search_widget .material-icons.clear:hover { color: var(--lsn-accent, #009877) !important; } /* Mobile : la bulle prend toute la largeur, ancrée sous la barre. */ @media (max-width: 767px) { html.lsn-ih-active #search_widget { left: 0 !important; right: 0 !important; min-width: 0 !important; max-width: 100% !important; border-radius: 0 0 16px 16px !important; } html.lsn-ih-active #search_widget::before { display: none !important; } } /* ====================== v2.8 — recherche : contraste + pointe dynamique ====================== */ /* Loupe et texte en foncé (plus de contraste), champ blanc net. */ html.lsn-ih-active #search_widget .material-icons.search { color: #111111 !important; } html.lsn-ih-active #search_widget input[type="text"] { background: #ffffff !important; border-color: rgba(8, 40, 30, .22) !important; color: #111111 !important; } html.lsn-ih-active #search_widget input[type="text"]::placeholder { color: #3f3f3f !important; opacity: 1; } /* Pointe alignée dynamiquement sous la loupe (position fournie par le JS). */ html.lsn-ih-active #search_widget::before { right: var(--lsn-arrow-right, 24px) !important; } /* ====================== v2.9 — méga-menu : coins carrés + alignement net ====================== */ /* Panneau : plus de coins arrondis. */ html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul { border-radius: 0 !important; } /* Cartes images : carrées, sans chrome, titres alignés à gauche (comme l'exemple). */ html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .mm_block_type_image { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; text-align: left !important; } html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .mm_block_type_image .h4 { text-align: left !important; } html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .mm_block_type_image .mm_img_content, html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .mm_block_type_image img { border-radius: 0 !important; } /* Survol des cartes : on retire le soulèvement/arrondi, on garde un léger zoom image. */ html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .mm_block_type_image:hover { transform: none !important; border-color: transparent !important; box-shadow: none !important; } /* ====================== v2.10 — barre promo : conditionnelle + immersive ====================== */ /* Masquée UNIQUEMENT si la case "Masquer la barre promo" est cochée dans le BO. */ html.lsn-ih-active.lsn-ih-hidetopbar #promobar5, html.lsn-ih-active.lsn-ih-hidetopbar .lsn-ih-topbar-el { display: none !important; } /* Le bandeau interne vide du thème reste masqué dans tous les cas. */ html.lsn-ih-active.lsn-ih-header #header .header-banner { display: none !important; } /* Barre promo visible : fixée tout en haut, au-dessus du header (lui-même décalé via JS). */ html.lsn-ih-active:not(.lsn-ih-hidetopbar) #promobar5 { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; margin: 0 !important; z-index: 100001 !important; } /* Texte blanc lisible. */ html.lsn-ih-active:not(.lsn-ih-hidetopbar) #promobar5 #text, html.lsn-ih-active:not(.lsn-ih-hidetopbar) #promobar5 font { color: #ffffff !important; } /* Composant "Barre promo" activé + haut de page : fond transparent (immersif). Au scroll, la barre reprend sa couleur d'origine pour rester lisible. */ html.lsn-ih-active.lsn-ih-topbar:not(.lsn-ih-hidetopbar):not(.lsn-ih-solid) #promobar5 { background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ====================== v2.11 — hero : slider de visuels, vidéo autoplay, parallax ====================== */ /* Calque de fond (sous l'overlay z-index:1 et le contenu z-index:2). */ .lsn-ih-hero-custom__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; will-change: transform; } /* Visuels du slider en fondu enchaîné. */ .lsn-ih-hero-custom__slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 1.1s ease; } .lsn-ih-hero-custom__slide.is-active { opacity: 1; } /* Vidéo de fond (autoplay/muted/loop). */ .lsn-ih-hero-custom__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* Quand un calque de fond est présent, on neutralise l'image CSS du conteneur (évite un double fond). */ .lsn-ih-hero-custom:has(.lsn-ih-hero-custom__bg) { background-image: none !important; } /* Parallax : fond légèrement agrandi pour éviter les bords lors de la translation. */ .lsn-ih-hero-custom--parallax .lsn-ih-hero-custom__slide, .lsn-ih-hero-custom--parallax .lsn-ih-hero-custom__video, .lsn-ih-hero-custom--parallax .lsn-ih-hero-custom__media { top: -8%; height: 116%; } /* Réassurance retirée du méga-menu (sécurité si du cache JS subsiste). */ html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul .lsn-ih-mm-reass { display: none !important; } /* ====================== v2.12 — topbar verte en sticky + portrait forcé méga-menu ====================== */ /* Header sticky (scrollé) : la barre promo prend un fond vert plein (texte blanc déjà appliqué). */ html.lsn-ih-active.lsn-ih-topbar:not(.lsn-ih-hidetopbar).lsn-ih-solid #promobar5 { background: #375746 !important; background-color: #375746 !important; background-image: none !important; } /* Méga-menu : tous les visuels du panneau sont forcés en portrait 3:4 (les visuels paysage sont recadrés, les visuels déjà en 3:4 restent intacts). */ html.lsn-ih-active .ets_mm_megamenu .mm_columns_ul img { width: 100% !important; height: auto !important; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 10px; } /* ====================== v2.13 — réassurance : icône personnalisée (image) ====================== */ .lsn-ih-reassurance__icon--img img { display: block; width: auto; height: 38px; max-width: 48px; object-fit: contain; } @media (max-width: 991px) { .lsn-ih-reassurance__icon--img img { height: 32px; } } html.lsn-ih-active .lsn-ih-mm-reass .lsn-ih-reassurance__icon--img img { height: 30px; } /* ====================== v2.14 — retrait latéral du header (optionnel, défaut 0) ====================== */ /* Piloté par le réglage BO "Retrait latéral du header (px)" via --lsn-header-pad-x (0 = collé au bord). */ html.lsn-ih-active.lsn-ih-header #header .header-top > .container-fluid, html.lsn-ih-active.lsn-ih-header #header .header-desktop-row { padding-left: var(--lsn-header-pad-x, 0px) !important; padding-right: var(--lsn-header-pad-x, 0px) !important; } @media (max-width: 767px) { html.lsn-ih-active.lsn-ih-header #header .header-top > .container-fluid, html.lsn-ih-active.lsn-ih-header #header .header-desktop-row { padding-left: min(var(--lsn-header-pad-x, 0px), 16px) !important; padding-right: min(var(--lsn-header-pad-x, 0px), 16px) !important; } } /* ====================== v2.16 — hero multi-slides administrables (média + texte + CTA par slide) ====================== */ .lsn-ih-hero-custom__slides { position: absolute; inset: 0; z-index: 0; } .lsn-ih-hero-custom__panel { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; transition: opacity 1.1s ease; } .lsn-ih-hero-custom__panel.is-active, .lsn-ih-hero-custom__panel:only-child { opacity: 1; } /* Média plein cadre (image desktop/mobile via ou vidéo). */ .lsn-ih-hero-custom__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; z-index: 0; } /* Le contenu (texte + CTA) passe toujours au-dessus du média, vidéo comprise. */ .lsn-ih-hero-custom__panel .lsn-ih-hero-custom__content { position: relative; z-index: 2; } .lsn-ih-hero-custom__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Parallax : média légèrement agrandi pour éviter les bords. */ .lsn-ih-hero-custom--parallax .lsn-ih-hero-custom__media img { height: 100%; }