/* ───────────────────────────────────────────────────────────────── LLA Header — sans Elementor Pro - Ligne principale (logo + search + actions) : sticky en haut - Ligne menu : SCROLL away (n'est pas sticky) - Couleurs : #30251D base / #D79942 hover sur icones et menu - Full-width forcé (override de toute contrainte parent) - Variable --lla-header-row-main-height partagée avec lla-shop.css ───────────────────────────────────────────────────────────────── */ :root { /* Synchronisé avec la hauteur de .lla-header__row--main (sticky) */ --lla-header-row-main-height: 80px; --lla-color-icon: #30251D; --lla-color-icon-hover: #D79942; --lla-color-badge: #D79942; --lla-color-bg-menu-row: #faf6f1; --lla-color-border-soft: #f4ede4; } .lla-skip-link { position: absolute; left: -9999px; } .lla-skip-link:focus { left: 1rem; top: 1rem; z-index: 9999; background: #fff; padding: .75rem 1rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); } /* ─── Wrapper transparent en layout ─── */ /* Why : `display: contents` retire la box de .lla-header du flux layout tout en gardant le tag

pour la sémantique/SEO. Conséquence : .lla-header__row--main devient un enfant direct de du point de vue layout → son `position: sticky; top:0` tient sur TOUTE la hauteur de la page, et plus juste sur la hauteur du wrapper (~130px). */ .lla-header { display: contents; } /* Ligne principale STICKY */ .lla-header__row--main { background: #fff; border-bottom: 1px solid var(--lla-color-border-soft); position: sticky; top: 0; z-index: 100; width: 100%; max-width: none !important; } /* Ligne menu : NON sticky (scroll avec la page) */ .lla-header__row--menu { background: var(--lla-color-bg-menu-row); border-top: 1px solid var(--lla-color-border-soft); width: 100%; max-width: none !important; } .lla-header__inner { width: 100%; max-width: none !important; box-sizing: border-box; padding: .75rem 2rem; display: grid; grid-template-columns: minmax(160px, 220px) 1fr auto; align-items: center; gap: 2.5rem; min-height: var(--lla-header-row-main-height); } /* ─── Logo ─── */ .lla-header__logo .custom-logo-link, .lla-header__logo .custom-logo { display: block; max-width: 100%; } .lla-header__logo .custom-logo { height: auto; width: auto; max-height: 64px; } .lla-header__logo-fallback { font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--lla-color-icon); } /* ─── Search bar (laissée libre dans la colonne 1fr) ─── */ .lla-header__search { width: 100%; min-width: 0; /* permet au grid item de rétrécir */ } /* Note : on laisse le shortcode lla-search-bar gérer son propre max-width (720px par défaut, centré dans la colonne 1fr du header). */ /* ─── Actions : wishlist / cart / account ─── */ .lla-header__actions { display: flex; align-items: center; gap: 1rem; } .lla-header__action { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; /* Why !important : Elementor's "Kit 18" global stylesheet a un `.elementor-kit-18 a { color: #D79942; }` (specificity 0,0,1,1) qui bat notre `.lla-header__action` (0,0,1,0). On force pour récupérer le marron en base, l'orange en hover. */ color: var(--lla-color-icon) !important; text-decoration: none; transition: color .15s ease; border-radius: 4px; } .lla-header__action:hover, .lla-header__action:focus-visible { color: var(--lla-color-icon-hover) !important; } /* Badge unifié — wishlist + cart partagent le même style visuel. Why !important : un autre plugin (lla-wishlist-vinted.css ou autre) peut définir un background concurrent. On force pour avoir un look cohérent et on retire le !important une fois la cause identifiée. */ .lla-header__badge, .lla-header__action .lla-cart__count, .lla-header__action .lla-wishlist-count-badge { position: absolute !important; top: 2px !important; right: 2px !important; min-width: 18px !important; height: 18px !important; padding: 0 5px !important; border-radius: 9px !important; background: var(--lla-color-badge) !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; box-sizing: border-box !important; } /* PAS de hide-when-0. Why : le JS lla-wishlist-supabase.js update uniquement textContent, pas data-count → si on cachait via [data-count="0"] le badge resterait invisible même avec un compteur >0. On garde le badge toujours visible pour cohérence avec le compteur cart. */ /* ─── Menu row ─── */ .lla-header__menu { width: 100%; max-width: none !important; box-sizing: border-box; padding: .75rem 2rem; } .lla-header__menu-list { display: flex; justify-content: center; gap: 2.5rem; margin: 0; padding: 0; list-style: none; } .lla-header__menu-list li a { /* !important pour les memes raisons que .lla-header__action */ color: var(--lla-color-icon) !important; text-decoration: none; font-weight: 500; font-size: .95rem; padding: .25rem 0; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .lla-header__menu-list li a:hover, .lla-header__menu-list li a:focus-visible, .lla-header__menu-list li.current-menu-item > a, .lla-header__menu-list li.current-menu-parent > a { color: var(--lla-color-icon-hover) !important; border-color: var(--lla-color-icon-hover); } /* ─── Burger menu mobile ─── */ .lla-header__menu-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--lla-color-icon); } .lla-header__menu-toggle-bar { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; transition: transform .2s ease, opacity .2s ease; } /* ─── Tablette ─── */ @media (max-width: 1024px) { .lla-header__inner { grid-template-columns: auto 1fr auto; gap: 1rem; padding: .5rem 1rem; } .lla-header__menu-list { gap: 1.25rem; } .lla-header__menu { padding: .5rem 1rem; } } /* ─── Mobile ─── */ @media (max-width: 768px) { :root { --lla-header-row-main-height: 110px; } .lla-header__inner { grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: .5rem .75rem; padding: .5rem .75rem; } .lla-header__logo { grid-column: 1; grid-row: 1; } .lla-header__actions { grid-column: 2; grid-row: 1; justify-content: flex-end; gap: .15rem; } .lla-header__action { width: 40px; height: 40px; } .lla-header__search { grid-column: 1 / -1; grid-row: 2; } .lla-header__menu-toggle { display: inline-flex; flex-direction: column; } .lla-header__menu-list { display: none; flex-direction: column; gap: 0; padding: .5rem 0; } .lla-header__menu-list.is-open { display: flex; } .lla-header__menu-list li { border-bottom: 1px solid var(--lla-color-border-soft); } .lla-header__menu-list li a { display: block; padding: .75rem 1rem; border-bottom: none; } }