/* dc26-eclepens — entry point PostCSS Ajouter les overrides et styles spécifiques au site ici */ /* WooCommerce overrides — dc26-kaws */ /* Header au scroll — composition UNIQUE (un bloc dc26/header-logo, un seul wp:navigation), restylée instantanément via les classes is-top/is-scrolled posées par dc26-base/scripts/header-sticky.js. Pas de deuxième arbre de blocs, pas de crossfade display:none sur le header entier : juste .dc26-header-row qui passe de "colonne centrée, grand logo" (accueil, en haut de page) à "ligne compacte logo+nav" (partout ailleurs, et sur l'accueil dès le scroll). Pourquoi pas de deuxième composition : une v1 dupliquait tout le header en deux compositions superposées (grid-area + display:none). Un ancêtre avec transform ou backdrop-filter devient le containing block de tout position:fixed imbriqué dedans — le panier/burger se repositionnaient donc relativement à cette boîte plutôt qu'au viewport. Panier/burger restent ici en siblings du

(cf. commentaire dans header.html), mais le vrai problème (deux arbres de blocs à maintenir en synchro, guerre de spécificité avec dc26-base sur .wp-block-site-logo) est réglé à la racine en n'ayant plus qu'une seule composition. Deux logos restent nécessaires (visuel différent selon fond transparent sur hero vs fond clair/flouté ailleurs) : le bloc dc26/header-logo (blocks/header-logo/render.php) rend les DEUX depuis Réglages du thème (option "site-settings"), et c'est ce fichier qui bascule lequel est visible via .dc26-header-logo__top / .dc26-header-logo__scrolled — classes propres au bloc, jamais .wp-block-site-logo (que dc26-base stylise déjà), donc aucune collision de spécificité, aucun !important. header.html ne fixe plus de padding/margin en style inline sur le

ou .dc26-header-row (contrairement à avant) : un style inline a une spécificité imbattable par une classe sans !important, ce qui rendait certains overrides ci-dessous silencieusement inopérants sur desktop. Le padding/margin de l'état "compact" et de l'état "accueil en haut" sont donc entièrement pilotés depuis ce fichier. */ /* ========================================================================== Composition compacte — état par défaut : accueil scrollée, ET toutes les autres pages (panier, checkout, produit, etc.) dès le chargement. ========================================================================== */ .is-style-sticky-header > header.wp-block-group { padding-top: var(--wp--preset--spacing--20); padding-bottom: var(--wp--preset--spacing--20); padding-left: var(--wp--preset--spacing--30); padding-right: var(--wp--preset--spacing--30); } .dc26-header-row { width: 100%; } .dc26-header-logo img { height: 100px; width: auto; } .dc26-header-row .wp-block-navigation { line-height: 1; } /* ========================================================================== Composition "accueil, en haut de page" — grand logo centré, nav dessous, variante "top" du logo (pensée pour un fond transparent sur le hero). Ces règles s'appuient sur .home/.front-page comme état PAR DÉFAUT (pas sur .is-top) et ne basculent qu'au scroll réel (.is-scrolled, posé par dc26-base/scripts/header-sticky.js). header-sticky.js est chargé en fin de sans defer/async : entre le premier rendu et son exécution, ni .is-top ni .is-scrolled n'existent encore sur le header. Comme la position de scroll réelle au chargement est presque toujours 0, caler le défaut sur .is-top (qui n'existe pas encore à ce moment) provoquait un flash visible de la mauvaise variante (logo compact, mise en page compacte) à chaque chargement de l'accueil, le temps que le script s'exécute. Ici le bon rendu est déjà là au premier paint, sans JS. ========================================================================== */ body.home .dc26-header-logo__top, body.front-page .dc26-header-logo__top { display: block; } body.home .dc26-header-logo__scrolled, body.front-page .dc26-header-logo__scrolled { display: none; } body.home .is-style-sticky-header > header.wp-block-group, body.front-page .is-style-sticky-header > header.wp-block-group { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); } body.home .dc26-header-row, body.front-page .dc26-header-row { flex-direction: column; justify-content: center; gap: var(--wp--preset--spacing--40); } body.home .dc26-header-logo img, body.front-page .dc26-header-logo img { height: 160px; } /* Scroll réel : bascule vers la composition compacte. */ body.home .is-style-sticky-header.is-scrolled .dc26-header-logo__top, body.front-page .is-style-sticky-header.is-scrolled .dc26-header-logo__top { display: none; } body.home .is-style-sticky-header.is-scrolled .dc26-header-logo__scrolled, body.front-page .is-style-sticky-header.is-scrolled .dc26-header-logo__scrolled { display: block; } body.home .is-style-sticky-header.is-scrolled > header.wp-block-group, body.front-page .is-style-sticky-header.is-scrolled > header.wp-block-group { padding-top: var(--wp--preset--spacing--20); padding-bottom: var(--wp--preset--spacing--20); } body.home .is-style-sticky-header.is-scrolled .dc26-header-row, body.front-page .is-style-sticky-header.is-scrolled .dc26-header-row { flex-direction: row; justify-content: space-between; } body.home .is-style-sticky-header.is-scrolled .dc26-header-logo img, body.front-page .is-style-sticky-header.is-scrolled .dc26-header-logo img { height: 100px; } /* Panier + burger custom — fixés en haut à droite, même hauteur de boîte (32px, contenu centré) pour un alignement garanti quelle que soit la taille interne native de chaque bloc. Le burger n'est visible que <1024px (.dc26-mobile-only, cf. dc26-base/css/_header.css) : on ne pose donc "display:flex" que dans le media query mobile plus bas — un "display:flex" ici, sans condition, chargerait après (et écraserait) le "display:none" desktop de dc26-base, vu que même spécificité + ordre de chargement (eclepens après base) donnent la priorité à la règle la plus récente. */ .header-scroll-cart, .header-scroll-burger { position: fixed; top: var(--wp--preset--spacing--30); height: 32px; align-items: center; z-index: 100; } .header-scroll-cart { display: flex; right: calc(var(--wp--preset--spacing--30) + 56px); color: var(--wp--preset--color--primary); } .header-scroll-burger { right: var(--wp--preset--spacing--30); } /* Même bascule blanc (hero transparent) / primary (scrollé, ou toute page sans hero) que la nav et le burger — cf. css/style.css. L'icône du mini-cart WooCommerce utilise fill="currentColor", donc color suffit. */ body.home .header-scroll-cart, body.front-page .header-scroll-cart { color: var(--wp--preset--color--white); } body.home .is-style-sticky-header.is-scrolled .header-scroll-cart, body.front-page .is-style-sticky-header.is-scrolled .header-scroll-cart { color: var(--wp--preset--color--primary); } /* Puce quantité WooCommerce — son positionnement par défaut (left:100%, margin-left négatif, transform translateY(-50%), sans "top") suppose un panier en flux normal dans une barre de nav classique. Casé dans notre boîte fixe de 32px, elle héritait une position "collée" au bord haut de cette boîte (donc du header). Ancrée ici explicitement en haut à droite de l'icône, en plus petit. */ .header-scroll-cart .wc-block-mini-cart__badge { top: -4px; right: -4px; left: auto; margin-left: 0; transform: none; height: 16px; min-width: 16px; font-size: 10px; /* WooCommerce pose background-color/color:transparent par défaut (:where(), spécificité nulle) — sans un fond propre, le chiffre hérite la couleur du panier (blanc sur le hero) et devient illisible. Fond blanc fixe + chiffre toujours en primary, quel que soit l'état du panier autour. */ background-color: var(--wp--preset--color--white); color: var(--wp--preset--color--primary); } /* Desktop (burger caché, cf. .dc26-mobile-only dans dc26-base) : position fixe simple, à ajuster à l'œil si besoin — pas de calcul lié à la largeur "wide" de la nav (essayé, trop de cas de bord sur grand écran). C'est .dc26-header-row qui se pousse pour laisser la place au panier (padding-right ci-dessous), pas l'inverse. Même position qu'on soit en haut de page ou scrollé : pas de logique liée à is-top/is-scrolled ici. */ @media (min-width: 1024px) { .header-scroll-cart { right: 32px; top: 37px; } /* Ligne compacte (post-scroll partout, et par défaut sur les pages sans hero) : espace réservé à droite pour que la nav ne passe pas sous le panier fixe. Pas nécessaire pour la composition "accueil en haut de page" (nav centrée sous le logo, pas collée au bord). */ body:not(.home):not(.front-page) .dc26-header-row, body.home .is-style-sticky-header.is-scrolled .dc26-header-row, body.front-page .is-style-sticky-header.is-scrolled .dc26-header-row { padding-right: 100px; } } /* La barre d'admin WP (#wpadminbar) est elle-même position:fixed en haut du viewport — sans compensation, elle recouvre entièrement panier/burger (vérifié : invisibles derrière la barre en mobile connecté). */ body.admin-bar .header-scroll-cart, body.admin-bar .header-scroll-burger { top: calc(var(--wp--preset--spacing--30) + 32px); } /* ========================================================================== Mobile (<1024px, même seuil que .dc26-mobile-only / .dc26-nav-desktop) ========================================================================== */ @media (max-width: 1023px) { .header-scroll-burger { display: flex; } /* Un peu plus d'air en haut qu'en desktop (logo/panier/burger trop collés au bord du viewport sinon) — le +14px ci-dessous s'ajoute à la valeur de base (spacing-30) partout où elle apparaît, y compris dans les variantes barre d'admin plus bas, pour rester cohérent. */ .header-scroll-cart, .header-scroll-burger { top: calc(var(--wp--preset--spacing--30) + 14px); } body.admin-bar .header-scroll-cart, body.admin-bar .header-scroll-burger { top: calc(var(--wp--preset--spacing--30) + 14px + 32px); } .is-style-sticky-header > header.wp-block-group { padding-top: var(--wp--preset--spacing--20); padding-bottom: var(--wp--preset--spacing--20); } body.home .is-style-sticky-header > header.wp-block-group, body.front-page .is-style-sticky-header > header.wp-block-group { padding-top: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--40); } body.home .dc26-header-logo img, body.front-page .dc26-header-logo img { height: 120px; } body.home .is-style-sticky-header.is-scrolled > header.wp-block-group, body.front-page .is-style-sticky-header.is-scrolled > header.wp-block-group { padding-top: var(--wp--preset--spacing--20); padding-bottom: var(--wp--preset--spacing--20); } /* Compact/scrollé, mobile : le logo sort du flux et reprend exactement la boîte (position, top, hauteur) de panier/burger, plutôt que d'être centré dans la ligne flex — en mobile cette ligne n'a plus que le logo en flux (nav masquée), donc rien d'autre pour dicter un centrage cohérent avec les icônes fixes. align-items:center laisse l'image dépasser de cette boîte de 32px sans être réduite : c'est son CENTRE qui doit coïncider avec celui de panier/burger, pas sa hauteur. Le header reçoit un min-height pour ne pas s'effondrer maintenant qu'il n'y a plus rien en flux dedans. */ body:not(.home):not(.front-page) .is-style-sticky-header > header.wp-block-group, body.home .is-style-sticky-header.is-scrolled > header.wp-block-group, body.front-page .is-style-sticky-header.is-scrolled > header.wp-block-group { min-height: 80px; } body:not(.home):not(.front-page) .dc26-header-logo, body.home .is-style-sticky-header.is-scrolled .dc26-header-logo, body.front-page .is-style-sticky-header.is-scrolled .dc26-header-logo { position: fixed; left: var(--wp--preset--spacing--30); top: calc(var(--wp--preset--spacing--30) + 14px); height: 32px; align-items: center; z-index: 100; } body:not(.home):not(.front-page) .dc26-header-logo img, body.home .is-style-sticky-header.is-scrolled .dc26-header-logo img, body.front-page .is-style-sticky-header.is-scrolled .dc26-header-logo img { height: 80px; } body.admin-bar .dc26-header-logo { top: calc(var(--wp--preset--spacing--30) + 14px + 32px); } /* Panier + logo forcés en blanc en mobile, sur toutes les pages (même logique que le burger dans css/style.css) : sur les pages hors accueil, la variante __top du logo (pensée pour fond transparent) n'existe même pas dans le DOM (cf. header-logo/render.php, $show_top_variant limité à is_front_page()/is_home()) — seule la variante __scrolled est rendue, et elle n'a pas de version blanche. Plutôt qu'ajouter un second asset/logique PHP, on force la couleur via filtre : brightness(0) invert(1) rend n'importe quel logo (photo exceptée) en blanc pur, quel que soit l'asset chargé, transparence préservée. Sélecteurs répétés à l'identique (même spécificité que les règles home/scrolled ci-dessus, tranchée par l'ordre de chargement — ce bloc vient après) : un simple ".header-scroll-cart" ici perdrait contre "body.home .is-style-sticky-header.is-scrolled .header-scroll-cart" (plus spécifique), laissant le panier repasser en primary une fois scrollé sur l'accueil, même en mobile. */ .header-scroll-cart, body.home .header-scroll-cart, body.front-page .header-scroll-cart, body.home .is-style-sticky-header.is-scrolled .header-scroll-cart, body.front-page .is-style-sticky-header.is-scrolled .header-scroll-cart { color: var(--wp--preset--color--white); } .dc26-header-logo img { filter: brightness(0) invert(1); } } /* Placé APRÈS le bloc <1024px ci-dessus : même spécificité que les règles qui y posent top pour panier/burger/logo, seul l'ordre de chargement décide — ce bloc doit donc venir après pour l'emporter sous 782px. */ @media (max-width: 782px) { body.admin-bar .header-scroll-cart, body.admin-bar .header-scroll-burger { top: calc(var(--wp--preset--spacing--30) + 14px + 46px); } body.admin-bar .dc26-header-logo { top: calc(var(--wp--preset--spacing--30) + 14px + 46px); } } /* Fond animé parallaxe — activé/configuré via Réglages > Site settings. --bg-opacity / --tile-bg / --tile-w / --tile-h sont injectées en inline par PHP (dc26-eclepens-bg.php) : le JS (GSAP) ne pilote que la translation Y, jamais l'opacité ni l'image. Mode pattern : répétition CSS native (background-repeat) plutôt que des dizaines de

clonés en JS — un seul calque à compositer au scroll, pas de recalcul de grille, pas de désync visuelle possible entre le DOM et ce que le navigateur affiche. */ #dc26-eclepens-bg-layer { position: fixed; top: 0; left: 0; width: 100vw; min-height: 100vh; z-index: -1; pointer-events: none; will-change: transform; opacity: var(--bg-opacity, 0.1); } #dc26-eclepens-bg-layer[data-mode="pattern"] { background-image: var(--tile-bg); background-repeat: repeat; background-size: var(--tile-w, 400px) var(--tile-h, 400px); } .bg-full-svg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } /* Drawer mobile — plus d'espace entre les items du menu (dc26/nav en mode vertical) */ .dc26-nav-drawer .dc26-nav--vertical .dc26-nav__list { gap: var(--wp--preset--spacing--40); } /* Drawer mobile — idem pour les sous-menus (accordéon) :not([hidden]) est nécessaire : même spécificité que .dc26-nav__submenu[hidden] (base), chargée avant — sans ça ce display:flex gagne au cascade et le sous-menu reste toujours ouvert. */ .dc26-nav-drawer .dc26-nav__submenu:not([hidden]) { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); margin-top: var(--wp--preset--spacing--30); } /* Navigation header — primary par défaut (lisible sur fond clair/transparent des pages sans hero : panier, checkout, produit...). Blanc sur l'accueil tant que le header chevauche le hero (transparent, cf. dc26-base/_header-sticky.css), primary une fois réellement scrollé. Callé sur .is-scrolled plutôt que .is-top : header-sticky.js (dc26-base) est chargé en fin de sans defer/async, donc ni is-top ni is-scrolled n'existent encore au premier rendu. La position de scroll réelle au chargement étant presque toujours 0, .home/.front-page SANS condition de classe est déjà le bon état par défaut — pas besoin d'attendre le JS pour l'obtenir, seul le passage à is-scrolled doit attendre un vrai scroll. */ /* Scopé à .dc26-nav-desktop (pas .is-style-sticky-header) : ce dernier est la classe du

que WP génère pour englober TOUT le template part "header" — logo, nav desktop, mais aussi burger, panier et nav-drawer, qui sont pourtant écrits comme des siblings "hors du

" dans header.html (cf. commentaire à cet endroit). Un color: white ici se propageait donc par héritage jusque dans le drawer mobile (fond blanc par défaut => menu et bouton fermer invisibles, blanc sur blanc) alors que seule la nav desktop doit changer de couleur. */ .dc26-nav-desktop { color: var(--wp--preset--color--primary); transition: color 0.3s ease; } body.home .dc26-nav-desktop, body.front-page .dc26-nav-desktop { color: var(--wp--preset--color--white); } body.home .is-style-sticky-header.is-scrolled .dc26-nav-desktop, body.front-page .is-style-sticky-header.is-scrolled .dc26-nav-desktop { color: var(--wp--preset--color--primary); } /* Burger mobile (dc26/nav-trigger, className "dark" par défaut dans header.html — cf. dc26-base/blocks/nav-trigger/style.css, la couleur est posée directement sur .dc26-nav-trigger--dark, pas héritée de .is-style-sticky-header) : toujours blanc, quelle que soit la page ou l'état de scroll — .header-scroll-burger n'est de toute façon visible qu'en mobile (<1024px, display:flex posé uniquement dans le media query mobile de _header-scroll-state.css ; display:none desktop hérité de dc26-base), donc pas besoin de conditionner ici. Contrairement à la nav desktop ci-dessus (jamais blanche hors accueil), le burger doit rester lisible sur les nouveaux heroes sombres (Caveau, Jardin, Four à pain, Salon Louis XVI) qui n'ont pas de logique home/scrolled. */ .header-scroll-burger.dc26-nav-trigger--dark { color: var(--wp--preset--color--white); } /* Le logo du HEADER (bloc dc26/header-logo) est géré entièrement dans _header-scroll-state.css. .wp-block-site-logo ci-dessous vise le logo du FOOTER (dc26-base/parts/footer.html, non surchargé ici) — sans rapport avec le header. */ @media (max-width: 600px) { .wp-block-site-logo img { width: 90px; height: auto; } } /* Header transparent en haut de page sur tous les gabarits, pas seulement la home — plus de fond primary de secours sur les autres pages. */ /* Sur la home, header transparent mais léger dégradé noir → transparent (haut vers bas) pour garder le texte de nav (blanc) lisible quel que soit le contenu du hero derrière. Callé sur .home/.front-page par défaut (retiré au scroll réel), même raison que la couleur du texte ci-dessus. */ body.home .is-style-sticky-header > header.wp-block-group, body.home .is-style-sticky-header > .wp-block-group, body.front-page .is-style-sticky-header > header.wp-block-group, body.front-page .is-style-sticky-header > .wp-block-group { background-image: linear-gradient( to bottom, color-mix(in srgb, var(--wp--preset--color--gray-dark) 35%, transparent) 0%, transparent 100% ); } body.home .is-style-sticky-header.is-scrolled > header.wp-block-group, body.home .is-style-sticky-header.is-scrolled > .wp-block-group, body.front-page .is-style-sticky-header.is-scrolled > header.wp-block-group, body.front-page .is-style-sticky-header.is-scrolled > .wp-block-group { background-image: none; } /* Sélecteur de langue (bloc WPML "Language Switcher" imbriqué dans la Navigation) — plus compact dans le header. Le plugin fixe déjà gap:1.5em !important sur ce ul ; on doit égaler/dépasser sa spécificité pour l'emporter. */ header .wp-block-navigation .wpml-language-switcher-navigation-block ul.horizontal-list { gap: var(--wp--preset--spacing--20) !important; } /* .wp-block-navigation-item__label est présent aussi bien sur les liens (a) que sur l'item de langue courante (div[aria-current], sans lien) — cible les deux d'un coup. */ .wpml-language-switcher-navigation-block .wp-block-navigation-item__label { font-size: var(--wp--preset--font-size--small); text-transform: uppercase; } /* Retire le fond blanc que WPML applique par défaut sur les items du switcher (li/a) — on veut un switcher transparent, cohérent avec le reste de la nav. */ .wpml-language-switcher-navigation-block li, .wpml-language-switcher-navigation-block a, .wpml-language-switcher-navigation-block .wp-block-navigation-item__label { background: none !important; background-color: transparent !important; } /* WPML applique lui-même margin-top:5px !important au premier lien de langue (règle globale du plugin) — combiné à align-items:center sur le ul, ça décale visuellement le premier item (souvent "Fr" quand il n'est pas la langue courante) par rapport aux autres. On neutralise cette marge. */ .wpml-language-switcher-navigation-block li[data-wpml="language-item"]:first-of-type { margin-top: 0 !important; }