/* gp-header-compact v10 — logo calé à la marge d'origine (28 px du haut, comme la prod ; 16 en compact) au lieu d'être centré verticalement. v9 — le script sticky du thème est NEUTRALISÉ sur bureau (il déplaçait l'en-tête dans le DOM à chaque bascule, ce qui tue les transitions) ; transform du placeholder annulée (piégeait les éléments fixes) ; menus et filets remis comme à l'origine. v7 — v6 : réserve du placeholder en !important (le thème pose `min-height:1px` en ligne) ; v7 : barre d'outils du rayon épinglée sous le menu par NOTRE variable (le worker recalculait --gp-stick à chaque scroll, avec des 0 fugitifs) — 2026-09-05 — « fondu » à la Yoko London (v5 : espacements — texte du menu centré dans sa rangée, filets, .3s ease-in-out, seuil 0 comme Yoko) Bureau uniquement (>= 769 px), hors tunnel de commande. Mobile intact. Principe : en-tête + menu FIXES en permanence, réserve de hauteur constante (136 px), état compact posé par gp-header-compact.js sur dès 24 px de défilement (retiré sous 4 px). Toutes les valeurs passent par une transition : aucune bascule. Repos : bande 90 (rembourrage 28), logo 28 px (taille d'origine, jamais plus), menu 46. Compact : bande 56 (rembourrage 16), logo 24 px, menu 40. Total 136 -> 96 px. */ @media (min-width: 769px) { :root { --gp-hdr-pad: 28px; --gp-hdr-h: 90px; --gp-logo-h: 28px; --gp-nav-top: 90px; --gp-hdr-total: 136px; --gp-nav-pad-t: 0px; --gp-nav-pad-b: 23px; --gp-line: rgba(31, 44, 87, .10); --gp-ease: .3s ease-in-out; } html.gp-compact { --gp-hdr-pad: 16px; --gp-hdr-h: 56px; --gp-logo-h: 24px; --gp-nav-top: 56px; --gp-hdr-total: 96px; --gp-nav-pad-t: 0px; --gp-nav-pad-b: 17px; } /* 1. Réserve de hauteur constante (hors accueil, où le thème pose déjà l'en-tête sur le visuel) */ html body.theme-pearl:not(.checkout-index-index):not(.cms-index-index) .page-wrapper > .header-placeholder { position: relative; min-height: 136px !important; height: auto !important; } html body.theme-pearl:not(.checkout-index-index) .page-wrapper > .header-placeholder { transform: none !important; animation: none !important; will-change: auto !important; } /* 2. En-tête toujours fixe, hauteur pilotée par le rembourrage, jamais par le thème */ html body.theme-pearl:not(.checkout-index-index) .page-wrapper .page-header.page-header-v4 { position: fixed !important; top: 0 !important; left: 0; right: 0; width: 100%; height: auto !important; min-height: 0 !important; padding: 0 !important; z-index: 101 !important; animation: none !important; transform: none !important; box-shadow: none !important; transition: background-color var(--gp-ease); } html body.theme-pearl:not(.checkout-index-index) .page-wrapper .page-header.page-header-v4 header.page-header, html body.theme-pearl:not(.checkout-index-index) .page-wrapper .page-header.page-header-v4.sticky-header .page-header { height: auto !important; min-height: 0 !important; } /* Hors accueil : fond blanc permanent (l'en-tête est fixe, le contenu passe dessous) */ html body.theme-pearl:not(.checkout-index-index):not(.cms-index-index) .page-wrapper .page-header.page-header-v4 .header.content, html body.theme-pearl:not(.checkout-index-index):not(.cms-index-index) .page-wrapper .nav-sections.nav-sections-4 { background-color: #fff !important; } html body.theme-pearl:not(.checkout-index-index) .page-wrapper .page-header.page-header-v4 .header.content { position: relative; top: 0 !important; box-sizing: border-box; min-height: var(--gp-hdr-h) !important; padding-top: var(--gp-hdr-pad) !important; padding-bottom: var(--gp-hdr-pad) !important; transition: padding var(--gp-ease), min-height var(--gp-ease), background-color var(--gp-ease); } /* 3. Logo centré en absolu, taille pilotée, transition */ html body.theme-pearl .page-wrapper .page-header.page-header-v4 .header.content .desktop-logo { position: absolute; left: 50%; top: var(--gp-hdr-pad); transform: translateX(-50%); margin: 0; width: auto; line-height: 0; z-index: 10; transition: top var(--gp-ease); } html body.theme-pearl .page-wrapper .page-header.page-header-v4 .header.content .desktop-logo .logo { display: inline-flex; position: static; top: 0; margin: 0; float: none; line-height: 0; max-width: none; } html body.theme-pearl .page-wrapper .page-header.page-header-v4 .header.content .desktop-logo .logo img { width: auto; max-width: none; height: var(--gp-logo-h); margin: 0; display: block; transition: height var(--gp-ease), filter var(--gp-ease); } /* 4. Menu toujours fixe sous l'en-tête, hauteur pilotée */ html body.theme-pearl:not(.checkout-index-index) .page-wrapper .nav-sections.nav-sections-4 { position: fixed !important; top: var(--gp-nav-top) !important; left: 0; width: 100%; z-index: 100 !important; animation: none !important; transform: none !important; transition: top var(--gp-ease), background-color var(--gp-ease); } html body.theme-pearl:not(.checkout-index-index) .page-wrapper .nav-sections.nav-sections-4 .navigation { padding-bottom: 0 !important; } html body.theme-pearl:not(.checkout-index-index) .page-wrapper .nav-sections.nav-sections-4 .navigation .level0 > a, html body.theme-pearl:not(.checkout-index-index) .page-wrapper .nav-sections.nav-sections-4 .navigation .level0 > .nav-anchor { padding-top: var(--gp-nav-pad-t) !important; padding-bottom: var(--gp-nav-pad-b) !important; height: auto !important; transition: padding var(--gp-ease), color var(--gp-ease); } /* 5. Couleurs du thème en état compact (classes posées par notre JS, sans déplacement DOM) : en fondu */ html body.theme-pearl .page-wrapper .page-header.page-header-v4 .header.content, html body.theme-pearl .page-wrapper .page-header.page-header-v4 .header.content a, html body.theme-pearl .page-wrapper .page-header.page-header-v4 .header.content span, html body.theme-pearl .page-wrapper .page-header.page-header-v4 .header.content label, html body.theme-pearl .page-wrapper .nav-sections.nav-sections-4 .navigation .level0 > a, html body.theme-pearl .page-wrapper .nav-sections.nav-sections-4 .navigation .level0 > a span { transition-property: color, background-color, border-color, filter, padding, min-height, top; transition-duration: .3s; transition-timing-function: ease-in-out; } /* Le thème cache des éléments en sticky (liens du panneau, sélecteur de magasin) : on ne le laisse pas faire */ html body.theme-pearl .page-wrapper .page-header.page-header-v4.sticky-header .panel.header .switcher-language, html body.theme-pearl .page-wrapper .page-header.page-header-v4.sticky-header .panel.header .switcher-currency { display: inherit; } /* 6. Rayons (worker categorie-refonte) : la barre d'outils collante suit la base du menu, en transition */ html body.theme-pearl.gp-cat-on #gp-cat [data-gp-toolbar] { top: var(--gp-hdr-total) !important; transition: top var(--gp-ease); } @media (prefers-reduced-motion: reduce) { :root { --gp-ease: 0s; } } }