/** * Maison Satab — header transparent qui devient blanc au scroll, * et logo centré sur la page. * * Le JS (assets/js/header-scroll.js) n'écrit qu'une seule chose : la variable * --mst-p, qui vaut 0 en haut de page et 1 une fois la distance parcourue. * Toutes les couleurs sont calculées ici. Aucune classe à ajouter dans * Elementor : on s'accroche aux sélecteurs déjà générés par le thème et UAE. * * Deux progressions, pas une seule : * - --mst-p pilote le FOND, et suit toujours le scroll ; * - --mst-pc pilote les COULEURS (liens, burger, logo). Elle vaut --mst-p sur * l'accueil, dont le hero est sombre, et 1 d'emblée partout ailleurs, où les * hero sont blancs : le menu y est donc noir dès le haut de page, pendant que * le fond continue d'apparaître au fur et à mesure. */ #HeaderSite { /* ---- Réglages : tout se change ici, nulle part ailleurs ---- */ --mst-p: 0; /* progression du fond, 0 → 1, pilotée par le JS */ --mst-pc: var( --mst-p ); /* progression des couleurs — forcée à 1 hors accueil */ --mst-fond: 255 255 255; /* fond du header une fois scrollé (RGB, espaces) */ --mst-texte-haut: #fff9f9; /* liens en haut de page */ --mst-texte-bas: #111111; /* liens une fois scrollé */ --mst-satab: #ae8957; /* lien MySatab, une fois le menu en encre */ --mst-logo-haut: #ffffff; /* logo en haut de page */ --mst-logo-bas: #111111; /* logo une fois scrollé */ /* ---- Fond ---- */ background-color: rgb( var( --mst-fond ) / var( --mst-p ) ); transition: background-color .18s linear, box-shadow .25s ease; } /* * Hors accueil, les hero sont blancs : le menu et le logo doivent être en * encre dès le chargement. Seules les couleurs basculent — le fond, lui, * continue d'apparaître au scroll comme sur l'accueil. * * Repère : la classe « home » que WordPress pose sur le body de la page * d'accueil. Si l'accueil change de page, il n'y a rien à toucher ici. */ body:not( .home ) #HeaderSite { --mst-pc: 1; } /* Filet discret une fois décollé du haut de page. Supprime ce bloc si la maquette ne prévoit aucune séparation. */ #HeaderSite.mst-scrolled { box-shadow: 0 1px 0 rgb( 0 0 0 / .07 ); } /* ------------------------------------------------------------------ */ /* Liens du menu */ /* ------------------------------------------------------------------ */ #HeaderSite .hfe-menu-item, #HeaderSite .hfe-menu-item:hover, #HeaderSite .hfe-menu-item:focus { color: color-mix( in srgb, var( --mst-texte-bas ) calc( var( --mst-pc ) * 100% ), var( --mst-texte-haut ) ); transition: color .18s linear; } /* MySatab garde sa couleur de marque partout où le menu est en encre : d'emblée hors accueil, après le scroll sur l'accueil. */ #HeaderSite .link-satab > .hfe-menu-item, #HeaderSite .link-satab > .hfe-menu-item:hover, #HeaderSite .link-satab > .hfe-menu-item:focus { color: color-mix( in srgb, var( --mst-satab ) calc( var( --mst-pc ) * 100% ), var( --mst-texte-haut ) ); } /* Icône du menu burger (mobile / tablette) */ #HeaderSite .hfe-nav-menu-icon svg { fill: color-mix( in srgb, var( --mst-texte-bas ) calc( var( --mst-pc ) * 100% ), var( --mst-texte-haut ) ); transition: fill .18s linear; } /* ------------------------------------------------------------------ */ /* Logo — recoloration */ /* ------------------------------------------------------------------ */ /* * Le logo du header est un aplat 100 % blanc sur fond transparent. Plutôt * que de superposer deux fichiers, on s'en sert comme masque et on peint * la couleur dessous : un seul fichier, une couleur calculée, et aucun * risque de décalage d'un pixel entre les deux états. * * Le ::before n'est activé que si le JS a bien trouvé le logo et rempli * --mst-logo (classe mst-logo-pret) — sinon on laisserait un rectangle * de couleur pleine à la place du logo. */ #HeaderSite .hfe-site-logo-container { position: relative; } #HeaderSite.mst-logo-pret .hfe-site-logo-img { opacity: 0; /* l'image reste dans le DOM : SEO, alt, et dimensions du bloc */ } #HeaderSite.mst-logo-pret .hfe-site-logo-container::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-color: color-mix( in srgb, var( --mst-logo-bas ) calc( var( --mst-pc ) * 100% ), var( --mst-logo-haut ) ); -webkit-mask: var( --mst-logo ) center / contain no-repeat; mask: var( --mst-logo ) center / contain no-repeat; transition: background-color .18s linear; } /* ------------------------------------------------------------------ */ /* Logo — centrage réel sur la page */ /* ------------------------------------------------------------------ */ /* * Le conteneur est en justify-content: space-between avec trois éléments * de largeurs inégales (menu gauche ~395 px, menu droite ~128 px). Le logo * se retrouve au milieu de l'espace restant, pas au milieu de la page — * décalé de +134 px vers la droite sur un écran de 1470 px. * * Correctif : on donne aux deux menus la même largeur calculée * (flex: 1 1 0), ce qui place mécaniquement le logo au centre exact. Les * menus sont ensuite plaqués vers l'extérieur de leur boîte. * * Pourquoi pas un position: absolute + translateX(-50%) : ça sortirait le * logo du flux et il chevaucherait les menus dès que la place manque. Ici * tout reste en flux, donc rien ne peut se superposer. * * Limité au desktop : en dessous de 1025 px (breakpoint tablette du site) * UAE bascule sur le burger et la disposition d'origine reprend la main. */ @media ( min-width: 1025px ) { #HeaderSite > .e-con-inner { flex-wrap: nowrap; } #HeaderSite > .e-con-inner > .elementor-widget-navigation-menu { flex: 1 1 0 !important; /* !important : Elementor pose une largeur inline */ width: auto !important; max-width: none !important; min-width: 0; /* autorise le menu à rétrécir plutôt qu'à déborder */ } #HeaderSite > .e-con-inner > .elementor-widget-site-logo { flex: 0 0 auto !important; /* le logo garde sa taille propre */ } /* UAE pose margin: 0 auto sur les