/** * MJ Header - styles de l'en-tete. * * Les variables --mj-header-* sont injectees par le module (hookDisplayHeader). * Les classes mj-header--* sont posees sur : par le module cote serveur * pour l'etat initial, par mjheader.js pour les etats lies au defilement. */ :root { /* Mesurees par mjheader.js, valeurs de repli avant le premier calcul. */ --mj-header-h: 52px; --mj-topbar-h: 42px; --mj-header-offset: 94px; --mj-header-z: 1000; --mj-header-bg: #ffffff; --mj-header-color: #000000; /* Surchargees par le module. */ --mj-header-stuck-bg: #ffffff; --mj-header-stuck-color: #000000; --mj-header-home-color: #ffffff; --mj-header-home-contrast: #000000; --mj-header-home-logo-filter: none; --mj-header-scrim: rgba(0, 0, 0, 0.3); /* Position du panneau megamenu : suit la hauteur reelle de l'en-tete. */ --mj-menu-top: var(--mj-header-offset); } .mj-header--scheme-dark { --mj-header-home-contrast: #ffffff; } .mj-header--stuck { --mj-menu-top: var(--mj-header-h); } /* --------------------------------------------------------------------------- * 1. Etat de base * ------------------------------------------------------------------------ */ .mj-header #header { position: relative; left: 0; right: 0; width: 100%; z-index: var(--mj-header-z, 1000); background-color: var(--mj-header-bg, #ffffff); transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.3s ease; } /* Reserve la hauteur laissee libre quand l'en-tete passe en position fixe : sans cela, la page remonte brutalement au premier pixel de defilement. La hauteur est posee en inline par mjheader.js. */ .mj-header-spacer { height: 0; flex: none; pointer-events: none; } /* --------------------------------------------------------------------------- * 2. En-tete collant * ------------------------------------------------------------------------ */ .mj-header--stuck #header { position: fixed; top: 0; background-color: var(--mj-header-stuck-bg, #ffffff); color: var(--mj-header-stuck-color, #000000); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 2px 12px rgba(0, 0, 0, 0.05); } .mj-header--autohide.mj-header--hidden #header { transform: translate3d(0, -100%, 0); } /* Aucune animation tant que la position n'a pas ete evaluee au chargement, et jamais d'animation pour qui a demande a en avoir moins. */ .mj-header--init #header, .mj-header--init .mj-header-spacer { transition: none !important; } @media (prefers-reduced-motion: reduce) { .mj-header #header { transition: none; } } /* --------------------------------------------------------------------------- * 3. En-tete transparent sur la page d'accueil * * Remplace l'ancien bricolage `filter: invert(1)` de custom.css : la couleur * du contenu est pilotee par une variable, pas par une inversion globale qui * retournait aussi les images et les drapeaux. * ------------------------------------------------------------------------ */ .mj-header--transparent:not(.mj-header--stuck) #header, .mj-header--transparent:not(.mj-header--stuck) #topbar-carousel { background-color: transparent; } /* La remontee de la banniere sous l'en-tete est emise par le module (hookDisplayHeader) a partir du selecteur configure en back-office : elle utilise la hauteur mesuree au lieu d'une marge negative codee en dur. */ /* Voile degrade : garde le texte lisible sur une banniere chargee. */ .mj-header--transparent:not(.mj-header--stuck) #header::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--mj-topbar-h, 42px) * -1); height: calc(var(--mj-header-offset) + 40px); background: linear-gradient(to bottom, var(--mj-header-scrim), transparent); pointer-events: none; z-index: -1; } .mj-header--transparent:not(.mj-header--stuck) #topbar-carousel { position: relative; z-index: 1; color: var(--mj-header-home-color, #ffffff); } /* Textes et icones de la barre. Le ciblage s'arrete au premier niveau du menu : `.ets_mm_url` designe aussi les liens de categorie a l'interieur du panneau deroulant, qui est blanc. Les colorer en blanc les rendait invisibles. */ .mj-header--transparent:not(.mj-header--stuck) #header, .mj-header--transparent:not(.mj-header--stuck) #header .mm_menus_ul > .mm_menus_li > a, .mj-header--transparent:not(.mj-header--stuck) #header .mm_menus_ul > .mm_menus_li > a .mm_menu_content_title, .mj-header--transparent:not(.mj-header--stuck) #header .ti-search.icons, .mj-header--transparent:not(.mj-header--stuck) #header .text_content, .mj-header--transparent:not(.mj-header--stuck) #header .popup-title, .mj-header--transparent:not(.mj-header--stuck) #header .popup-title .fa { color: var(--mj-header-home-color, #ffffff); } /* Le burger mobile est dessine avec trois barres en background-color. La fleche du megamenu, elle, est un triangle en bordure qui suit currentColor : lui poser un background-color peignait un petit rectangle blanc a la place du chevron. */ .mj-header--transparent:not(.mj-header--stuck) #header .ybc-menu-toggle .icon-bar { background-color: var(--mj-header-home-color, #ffffff); } /* Survol des entrees de menu. layout1.css passe le fond de l'entree survolee en blanc : au-dessus d'une banniere, le libelle blanc disparaissait dans un rectangle blanc. - entree sans sous-menu : fond transparent, le libelle reste lisible ; - entree avec sous-menu : on garde l'onglet blanc, qui prolonge le panneau du megamenu ouvert juste en dessous, et on repasse le texte en sombre. */ .mj-header--transparent:not(.mj-header--stuck) #header .mm_menus_li:not(.mm_has_sub):hover > a, .mj-header--transparent:not(.mj-header--stuck) #header .mm_menus_li:not(.mm_has_sub).menu_hover > a { background-color: transparent; color: var(--mj-header-home-color, #ffffff); } .mj-header--transparent:not(.mj-header--stuck) #header .mm_menus_li.mm_has_sub:hover > a, .mj-header--transparent:not(.mj-header--stuck) #header .mm_menus_li.mm_has_sub:hover > a .mm_menu_content_title, .mj-header--transparent:not(.mj-header--stuck) #header .mm_menus_li.mm_has_sub.menu_hover > a, .mj-header--transparent:not(.mj-header--stuck) #header .mm_menus_li.mm_has_sub.menu_hover > a .mm_menu_content_title { color: var(--mj-header-color, #000000); } /* Logo et icones bitmap/SVG : recolorises par filtre. */ .mj-header--transparent:not(.mj-header--stuck) #_desktop_logo img.logo, .mj-header--transparent:not(.mj-header--stuck) #header .logomenumob img.logo, .mj-header--transparent:not(.mj-header--stuck) #header .mm_custom_text img, .mj-header--transparent:not(.mj-header--stuck) #header img.ti-shopping-cart { filter: var(--mj-header-home-logo-filter, none); } /* Le compteur panier est pose sur l'icone : il doit rester lisible une fois celle-ci recoloree. */ .mj-header--transparent:not(.mj-header--stuck) #header .cart-products-count { color: var(--mj-header-home-contrast, #000000); } /* Les panneaux deroulants ont leur propre fond blanc : ils ne doivent rien heriter de la couleur claire de la barre. Seule la couleur du conteneur est reposee, les liens qu'ils contiennent ont deja la leur. */ .mj-header--transparent #header .popup-content, .mj-header--transparent #header .dropdown-menu, .mj-header--transparent #header .mm_columns_ul { color: var(--mj-header-color, #000000); } /* Meme raison pour le tiroir mobile : il se deplie sur son propre fond clair, alors que la couleur du contenu de l'en-tete est en blanc. Les libelles du menu (portes par .mm_menu_content_title), le selecteur de langue et le pied du tiroir devenaient blanc sur blanc, donc invisibles. Les deux requetes suivent le decoupage de megamenu.css : entre 768 et 1199px le tiroir n'existe que si le menu a bascule (.changestatus), en dessous il est systematique. */ @media (max-width: 1199px) { .mj-header--transparent #header .ets_mm_megamenu.changestatus .mm_menus_ul, .mj-header--transparent:not(.mj-header--stuck) #header .ets_mm_megamenu.changestatus .mm_menus_ul > .mm_menus_li > a, .mj-header--transparent:not(.mj-header--stuck) #header .ets_mm_megamenu.changestatus .mm_menus_ul > .mm_menus_li > a .mm_menu_content_title, .mj-header--transparent:not(.mj-header--stuck) #header .ets_mm_megamenu.changestatus .mm_menus_ul .popup-title, .mj-header--transparent:not(.mj-header--stuck) #header .ets_mm_megamenu.changestatus .mm_menus_ul .popup-title .fa, .mj-header--transparent:not(.mj-header--stuck) #header .ets_mm_megamenu.changestatus .mm_menus_ul .text_content { color: var(--mj-header-color, #000000); } } @media (max-width: 767px) { .mj-header--transparent #header .ets_mm_megamenu .mm_menus_ul, .mj-header--transparent:not(.mj-header--stuck) #header .ets_mm_megamenu .mm_menus_ul > .mm_menus_li > a, .mj-header--transparent:not(.mj-header--stuck) #header .ets_mm_megamenu .mm_menus_ul > .mm_menus_li > a .mm_menu_content_title, .mj-header--transparent:not(.mj-header--stuck) #header .ets_mm_megamenu .mm_menus_ul .popup-title, .mj-header--transparent:not(.mj-header--stuck) #header .ets_mm_megamenu .mm_menus_ul .popup-title .fa, .mj-header--transparent:not(.mj-header--stuck) #header .ets_mm_megamenu .mm_menus_ul .text_content { color: var(--mj-header-color, #000000); } } /* --------------------------------------------------------------------------- * 4. Megamenu ETS * ------------------------------------------------------------------------ */ /* Le panneau est en position fixe : il doit s'ouvrir pile sous l'en-tete, que celui-ci soit colle (barre superieure sortie) ou non. */ .mj-header .ets_mm_megamenu .mm_columns_ul { top: var(--mj-menu-top, 94px); } /* En tiroir (tablette et mobile) le sous-menu se deplie dans le flux : le calage vertical du panneau desktop n'a plus lieu d'etre. Sans cela le sous-menu ouvert descend de 94 px et recouvre les entrees suivantes. */ @media (max-width: 1199px) { .mj-header .ets_mm_megamenu.changestatus .mm_columns_ul { top: auto !important; } } @media (max-width: 767px) { .mj-header .ets_mm_megamenu .mm_columns_ul { top: auto !important; } }