/* gp-header-compact v14 — 06/09 : l'espace SOUS les libellés du menu se réduit lui aussi au défilement, dans le même fondu (Arnaud : « il faut réduire l'espacement sous les menus principaux, en combiné et très naturellement, comme Yoko »). Rembourrage bas des entrées 23 px au repos -> 10 px en compact (au lieu de 17) : rangée du menu 46 -> 33, total 136 -> 89. Proportion mesurée chez Yoko London (rangée 55 -> 40, x0,73). Les libellés ne bougent pas (rembourrage haut 0 des deux côtés), seul le vide sous eux se referme ; le soulignement or (::after, bottom -4 px) et le panneau du méga-menu (top:100%) suivent. v13 — 06/09 : accueil .it, logo sans fondu de filtre (passait par le gris). v12 — 06/09 : accueil, retour en haut sans fondu des fonds (logo/icônes blancs ne disparaissent plus). v11 — 06/09 : accueil, bande blanche au survol de l'en-tête (le blanc du thème sur le placeholder vidé par l'en-tête fixe). 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 33 (vide sous les libellés 23 -> 10). Total 136 -> 89 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: 89px; --gp-nav-pad-t: 0px; --gp-nav-pad-b: 10px; } /* 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); } /* 7. Accueil, en-tête survolé (menu ouvert ou bande survolée) : le thème peint `.header-placeholder` en blanc au survol et bascule logo bleu + icônes sombres. Depuis que l'en-tête est fixe, le placeholder ne contient plus rien en flux (hauteur 0 au lieu de 135) : son blanc n'apparaissait plus et le logo bleu se retrouvait sur la photo (06/09). On peint le même blanc sur la bande, par `background-image` — hors de la liste des transitions — pour que ce soit instantané dans les deux sens, comme le logo qui change d'image sans fondu. Hors compact seulement (en compact la bande est déjà blanche). */ html:not(.gp-compact) body.theme-pearl.cms-index-index .page-wrapper .header-placeholder:hover .page-header.page-header-v4 .header.content { background-image: linear-gradient(#fff, #fff); } /* 8. Accueil, RETOUR EN HAUT (Arnaud 06/09 : « impression que ça se recharge ») : à la sortie du compact, le thème rebascule d'un coup le logo (`content: logo-white.svg`) et les icônes (`icon-*-white.svg`) en blanc — échanges d'image, non animables — pendant que la bande blanche s'effaçait en .3 s : blanc sur blanc, invisibles, puis réapparition. Mesuré au banc : logo/icône blancs dès la 1re image, fond alpha 1 → 0 sur 300 ms. Ici, à l'état repos de l'accueil, les FONDS (bande, menu) ne transitionnent plus : transparents d'un coup, comme les icônes ; les tailles gardent leur fondu (.3 s). La descente est inchangée. */ html:not(.gp-compact) body.theme-pearl.cms-index-index .page-wrapper .page-header.page-header-v4 { transition: none; } html:not(.gp-compact) body.theme-pearl.cms-index-index .page-wrapper .page-header.page-header-v4 header.page-header { transition: none; } html:not(.gp-compact) body.theme-pearl.cms-index-index .page-wrapper .page-header.page-header-v4 .header.content { transition: padding var(--gp-ease), min-height var(--gp-ease); } html:not(.gp-compact) body.theme-pearl.cms-index-index .page-wrapper .nav-sections.nav-sections-4 { transition: top var(--gp-ease); } /* 9. Accueil .it : son thème blanchit le logo par un FILTRE (`brightness(0) invert(1)`) et non par un échange d'image comme le .com ; avec `transition: filter .3s` le logo passait par le gris à chaque bascule (mesuré au banc : brightness(.5) invert(.5) à mi-course). Sur l'accueil, le logo ne transitionne que sa hauteur : bascule de couleur instantanée, comme les icônes et comme sur le .com. */ html body.theme-pearl.cms-index-index .page-wrapper .page-header.page-header-v4 .header.content .desktop-logo .logo img { transition: height var(--gp-ease); } @media (prefers-reduced-motion: reduce) { :root { --gp-ease: 0s; } } }