/* * Header e-commerce — refonte inspirée de mi.com (top bar + navbar sticky * avec mega-menu, recherche, compte, panier). Composant autonome, préfixe * "pk-" pour ne jamais entrer en conflit avec le reste du thème existant. */ :root { --pk-dark: #24262b; --pk-dark-soft: #4a4d54; --pk-green: #8bc53f; --pk-green-dark: #6ea82c; --pk-border: #e7e8ea; --pk-bg-muted: #f6f7f8; --pk-text-muted: #767a82; --pk-radius: 10px; --pk-shadow: 0 8px 24px rgba(20, 20, 24, 0.08); --pk-nav-height: 72px; } .pk-header * { box-sizing: border-box; } .pk-header a { text-decoration: none; color: inherit; } .pk-header ul { list-style: none; margin: 0; padding: 0; } .pk-header button { font: inherit; cursor: pointer; } .pk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .pk-skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--pk-dark); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; } .pk-skip-link:focus { left: 0; } .pk-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .pk-header { font-family: 'Muli', system-ui, -apple-system, sans-serif; /* fixed plutôt que sticky : le thème existant met overflow-x:hidden sur , ce qui désactive position:sticky sur tous ses descendants. Le décalage de contenu correspondant est compensé par .pk-header-spacer. */ position: fixed; top: 0; left: 0; right: 0; z-index: 900; } .pk-header-spacer { height: var(--pk-nav-height); } /* ---------- Navbar principale ---------- */ .pk-nav { position: relative; background: #fff; border-bottom: 1px solid transparent; transition: box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; } .pk-nav.is-scrolled { background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); box-shadow: var(--pk-shadow); border-bottom-color: var(--pk-border); } .pk-nav__inner { height: var(--pk-nav-height); display: flex; align-items: center; gap: 28px; } .pk-logo { flex-shrink: 0; display: flex; align-items: center; } .pk-logo img { height: 42px; width: auto; object-fit: contain; } /* ---------- Menu principal + mega-menu ---------- */ .pk-menu { flex: 1; min-width: 0; } .pk-menu__list { display: flex; align-items: center; height: var(--pk-nav-height); } .pk-menu__item { position: static; height: 100%; } .pk-menu__link { display: flex; align-items: center; gap: 5px; height: 100%; padding: 0 16px; font-size: 14.5px; font-weight: 600; color: var(--pk-dark); white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .pk-menu__link:hover, .pk-menu__link:focus-visible { color: var(--pk-green-dark); } .pk-chevron { transition: transform 0.2s ease; } .pk-menu__item.has-mega:hover .pk-chevron, .pk-menu__item.has-mega:focus-within .pk-chevron { transform: rotate(180deg); } .pk-menu__item.has-mega:hover .pk-menu__link, .pk-menu__item.has-mega:focus-within .pk-menu__link { color: var(--pk-green-dark); border-bottom-color: var(--pk-green); } .pk-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--pk-border); box-shadow: var(--pk-shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .pk-menu__item.has-mega:hover .pk-mega, .pk-menu__item.has-mega:focus-within .pk-mega { opacity: 1; visibility: visible; transform: translateY(0); } .pk-mega__inner { max-width: 1280px; margin: 0 auto; padding: 32px 24px; display: flex; gap: 48px; } .pk-mega__links { min-width: 220px; } .pk-mega__all { display: inline-block; font-weight: 700; font-size: 13.5px; color: var(--pk-dark); margin-bottom: 14px; padding-bottom: 6px; border-bottom: 2px solid var(--pk-green); } .pk-mega__links ul { display: flex; flex-direction: column; gap: 10px; } .pk-mega__links a { font-size: 14px; color: var(--pk-dark-soft); transition: color 0.15s ease, padding-left 0.15s ease; } .pk-mega__links ul a:hover, .pk-mega__links ul a:focus-visible { color: var(--pk-green-dark); padding-left: 4px; } .pk-mega__products { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .pk-mega__product { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--pk-radius); transition: background-color 0.15s ease; } .pk-mega__product:hover, .pk-mega__product:focus-visible { background: var(--pk-bg-muted); } .pk-mega__thumb { display: block; aspect-ratio: 1 / 1; border-radius: 8px; background: var(--pk-bg-muted); overflow: hidden; } .pk-mega__thumb img { width: 100%; height: 100%; object-fit: cover; } .pk-mega__product-name { font-size: 13px; color: var(--pk-dark); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pk-mega__product-price { font-size: 13px; font-weight: 700; color: var(--pk-green-dark); } /* ---------- Zone d'action (recherche, compte, favoris, panier) ---------- */ .pk-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .pk-search__form { display: flex; align-items: center; gap: 8px; width: 240px; padding: 9px 16px; background: var(--pk-bg-muted); border: 1px solid transparent; border-radius: 999px; color: var(--pk-text-muted); transition: width 0.2s ease, border-color 0.15s ease, background-color 0.15s ease; } .pk-search__form:focus-within { width: 300px; background: #fff; border-color: var(--pk-green); color: var(--pk-dark); } .pk-search__form svg { flex-shrink: 0; } .pk-search__form input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 13.5px; color: inherit; } .pk-search-toggle { display: none; } .pk-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; border-radius: 999px; color: var(--pk-dark); transition: background-color 0.15s ease, color 0.15s ease; } .pk-icon-btn:hover, .pk-icon-btn:focus-visible { background: var(--pk-bg-muted); color: var(--pk-green-dark); } .pk-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--pk-green); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } /* ---------- Dropdown compte ---------- */ .pk-account { position: relative; } .pk-dropdown { position: absolute; right: 0; top: calc(100% + 10px); width: 220px; background: #fff; border-radius: var(--pk-radius); box-shadow: var(--pk-shadow); border: 1px solid var(--pk-border); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .pk-account:hover .pk-dropdown, .pk-account:focus-within .pk-dropdown, .pk-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .pk-dropdown__title { padding: 8px 10px; font-size: 12.5px; color: var(--pk-text-muted); border-bottom: 1px solid var(--pk-border); margin-bottom: 6px; } .pk-dropdown a, .pk-dropdown button { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; font-size: 14px; color: var(--pk-dark); background: transparent; border: 0; } .pk-dropdown a:hover, .pk-dropdown a:focus-visible, .pk-dropdown button:hover, .pk-dropdown button:focus-visible { background: var(--pk-bg-muted); color: var(--pk-green-dark); } /* ---------- Panier flyout ---------- */ .pk-cart { position: relative; } .pk-cart-drawer { position: absolute; right: 0; top: calc(100% + 10px); width: 340px; max-height: 70vh; overflow-y: auto; background: #fff; border-radius: var(--pk-radius); box-shadow: var(--pk-shadow); border: 1px solid var(--pk-border); padding: 16px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .pk-cart:hover .pk-cart-drawer, .pk-cart:focus-within .pk-cart-drawer, .pk-cart-drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .pk-cart-drawer__title { font-weight: 700; font-size: 15px; margin-bottom: 12px; } .pk-cart-drawer__items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; } .pk-cart-drawer__items li { display: flex; align-items: center; gap: 10px; } .pk-cart-drawer__thumb { flex-shrink: 0; width: 48px; height: 48px; border-radius: 8px; background: var(--pk-bg-muted); overflow: hidden; } .pk-cart-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; } .pk-cart-drawer__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pk-cart-drawer__name { font-size: 13.5px; color: var(--pk-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pk-cart-drawer__qty { font-size: 12.5px; color: var(--pk-text-muted); } .pk-cart-drawer__items button { flex-shrink: 0; width: 26px; height: 26px; border: 0; border-radius: 999px; background: var(--pk-bg-muted); color: var(--pk-text-muted); font-size: 16px; line-height: 1; } .pk-cart-drawer__items button:hover, .pk-cart-drawer__items button:focus-visible { background: #fdecec; color: #d33; } .pk-cart-drawer__empty { font-size: 13.5px; color: var(--pk-text-muted); text-align: center; padding: 20px 0; margin: 0; } .pk-cart-drawer__footer { border-top: 1px solid var(--pk-border); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; } .pk-cart-drawer__subtotal { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; } /* ---------- Boutons partagés ---------- */ .pk-btn { display: block; text-align: center; padding: 10px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; border: 1px solid transparent; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .pk-btn--primary { background: var(--pk-green); color: #fff; } .pk-btn--primary:hover, .pk-btn--primary:focus-visible { background: var(--pk-green-dark); color: #fff; } .pk-btn--outline { background: transparent; border-color: var(--pk-border); color: var(--pk-dark); } .pk-btn--outline:hover, .pk-btn--outline:focus-visible { border-color: var(--pk-green); color: var(--pk-green-dark); } /* ---------- Hamburger (mobile) ---------- */ .pk-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; border: 0; background: transparent; border-radius: 8px; flex-shrink: 0; } .pk-hamburger span { display: block; width: 20px; height: 2px; background: var(--pk-dark); margin: 0 auto; transition: transform 0.2s ease, opacity 0.2s ease; } .pk-hamburger:hover { background: var(--pk-bg-muted); } /* ---------- Drawer mobile ---------- */ .pk-drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 15, 18, 0.5); z-index: 1200; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; } .pk-drawer-backdrop.is-open { opacity: 1; visibility: visible; } .pk-drawer { position: fixed; top: 0; bottom: 0; left: 0; width: 86%; max-width: 360px; background: #fff; z-index: 1300; transform: translateX(-100%); transition: transform 0.28s ease; display: flex; flex-direction: column; overflow-y: auto; } .pk-drawer.is-open { transform: translateX(0); } .pk-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--pk-border); } .pk-drawer__head .pk-logo img { height: 34px; } .pk-drawer__close { width: 34px; height: 34px; border: 0; border-radius: 999px; background: var(--pk-bg-muted); font-size: 20px; line-height: 1; color: var(--pk-dark); } .pk-drawer__search { display: flex; align-items: center; gap: 8px; margin: 16px 20px; padding: 10px 14px; background: var(--pk-bg-muted); border-radius: 999px; } .pk-drawer__search input { flex: 1; border: 0; background: transparent; outline: 0; font-size: 14px; } .pk-drawer__search button { border: 0; background: transparent; color: var(--pk-dark); display: flex; } .pk-drawer__nav { padding: 0 20px; } .pk-drawer__nav > ul { display: flex; flex-direction: column; } .pk-drawer__nav > ul > li { border-bottom: 1px solid var(--pk-border); } .pk-drawer__nav > ul > li > a { display: block; padding: 14px 4px; font-weight: 600; font-size: 15px; color: var(--pk-dark); } .pk-drawer__nav summary { padding: 14px 4px; font-weight: 600; font-size: 15px; color: var(--pk-dark); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; } .pk-drawer__nav summary::-webkit-details-marker { display: none; } .pk-drawer__nav summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--pk-dark-soft); border-bottom: 2px solid var(--pk-dark-soft); transform: rotate(45deg); transition: transform 0.2s ease; } .pk-drawer__nav details[open] summary::after { transform: rotate(-135deg); } .pk-drawer__sublist { padding: 0 0 12px 12px; display: flex; flex-direction: column; gap: 10px; } .pk-drawer__sublist a { font-size: 14px; color: var(--pk-dark-soft); } .pk-drawer__account { margin-top: auto; padding: 20px; border-top: 1px solid var(--pk-border); display: flex; flex-direction: column; gap: 10px; } .pk-drawer__account p { margin: 0 0 4px; font-size: 14px; color: var(--pk-text-muted); } /* ---------- Responsive ---------- */ @media (max-width: 991px) { .pk-hamburger { display: flex; } .pk-menu { display: none; } .pk-search { display: none; } .pk-search-toggle { display: inline-flex; } .pk-nav__inner { gap: 12px; } .pk-nav__inner.search-open .pk-search { display: block; position: absolute; left: 0; right: 0; top: 100%; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--pk-border); box-shadow: var(--pk-shadow); } .pk-nav__inner.search-open .pk-search__form { width: 100%; } } @media (min-width: 992px) { .pk-drawer, .pk-drawer-backdrop { display: none; } } @media (max-width: 575px) { .pk-container { padding: 0 16px; } .pk-logo img { height: 34px; } :root { --pk-nav-height: 62px; } .pk-cart-drawer { width: calc(100vw - 32px); right: -8px; } }