/* =====================================================================
 * Fichier : assets/css/components/navbar.css
 * Projet  : Brennholz Shop24
 * Thème   : « Fresh Green Store » — en-tête blanc épuré : bouton menu rond,
 *           recherche pilule centrée avec loupe verte, panier à droite
 *           (inspiré de la maquette), méga-menu clair, tiroirs arrondis.
 * Rôle    : Barre supérieure, en-tête collant, recherche + suggestions,
 *           méga-menu, tiroir panier, menu hamburger (panier en haut),
 *           recherche mobile plein écran, mini-panier.
 *           Composant : includes/navbar.php
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * BARRE SUPÉRIEURE (verte)
 * ------------------------------------------------------------------- */
.topbar {
    position: relative; z-index: 1030;
    background: var(--hfk-green); color: #fff; font-size: .82rem;
    transition: margin-top .35s var(--hfk-ease);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.topbar-message { display: flex; align-items: center; gap: .6rem; min-width: 0; font-weight: 500; }
.topbar-message span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-message .fa-truck-fast { color: var(--hfk-yellow); }
.topbar-pulse { position: relative; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--hfk-yellow); }
.topbar-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--hfk-yellow); animation: hfk-pulse-ring 1.8s ease-out infinite; }
.topbar-links { display: flex; align-items: center; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.topbar-links a { color: rgba(255, 255, 255, .92); display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.topbar-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.topbar-links i { color: rgba(255, 255, 255, .8); }
.topbar-phone { font-weight: 700; }

/* ---------------------------------------------------------------------
 * EN-TÊTE
 * ------------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 1020;
    background: rgba(255, 255, 255, .97); backdrop-filter: saturate(160%) blur(12px);
    transition: box-shadow .35s var(--hfk-ease), background .35s;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(20, 30, 40, .08); }
.header-main-inner { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem); min-height: var(--hfk-header-h); transition: min-height .35s var(--hfk-ease); }
.site-header.is-scrolled .header-main-inner { min-height: 64px; }

/* Logo */
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--hfk-charcoal); flex-shrink: 0; }
.brand:hover { color: var(--hfk-charcoal); }
.brand-logo { max-height: 46px; width: auto; }
.brand-mark {
    width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.2rem; color: #fff;
    background: var(--hfk-green); border-radius: 50%; box-shadow: 0 6px 16px rgba(34, 166, 75, .3); position: relative;
}
.brand-text { display: flex; flex-direction: column; line-height: 1; font-family: var(--hfk-font-head); }
.brand-text strong { font-size: 1.22rem; font-weight: 800; letter-spacing: -.01em; }
.brand-text em { font-style: normal; font-size: .74rem; font-weight: 700; letter-spacing: .12em; color: var(--hfk-green); margin-top: .22rem; }
.brand-light { color: #fff; }
.brand-light:hover { color: #fff; }
.brand-sm .brand-mark { width: 36px; height: 36px; font-size: 1rem; }
.brand-sm .brand-text strong { font-size: 1.05rem; }

/* Bouton menu rond (comme la maquette : cercle blanc + traits verts) */
.hamburger {
    display: inline-grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; padding: 0;
    border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(20, 30, 40, .12);
    transition: box-shadow .3s, transform .3s var(--hfk-ease);
}
.hamburger:hover { box-shadow: 0 6px 18px rgba(34, 166, 75, .28); transform: scale(1.04); }
.hamburger-box { position: relative; display: block; width: 20px; height: 14px; margin: 0 auto; }
.hamburger-box span { position: absolute; left: 0; height: 2.5px; border-radius: 2px; width: 100%; background: var(--hfk-green); transition: transform .4s var(--hfk-ease), opacity .3s, width .3s var(--hfk-ease); }
.hamburger-box span:nth-child(1) { top: 0; width: 70%; }
.hamburger-box span:nth-child(2) { top: 6px; }
.hamburger-box span:nth-child(3) { top: 12px; width: 55%; left: 45%; }
.hamburger:hover .hamburger-box span { width: 100%; left: 0; }
.hamburger.is-active .hamburger-box span:nth-child(1) { width: 100%; transform: translateY(6px) rotate(45deg); }
.hamburger.is-active .hamburger-box span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.hamburger.is-active .hamburger-box span:nth-child(3) { width: 100%; left: 0; transform: translateY(-6px) rotate(-45deg); }

/* Recherche : pilule centrée, ombre douce, loupe verte à droite */
.header-search {
    position: relative; flex: 1; max-width: 560px; margin: 0 auto; display: flex; align-items: center;
    background: #fff; border: 1px solid var(--hfk-border); border-radius: var(--hfk-radius-pill);
    box-shadow: 0 2px 12px rgba(20, 30, 40, .07); transition: border-color .3s, box-shadow .3s;
}
.header-search:focus-within { border-color: var(--hfk-green); box-shadow: 0 0 0 4px rgba(34, 166, 75, .12); }
.header-search-icon { display: none; }
.header-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .72rem 1.3rem; font-size: .94rem; color: var(--hfk-text); border-radius: var(--hfk-radius-pill); }
.header-search input::placeholder { color: #9AA1A8; }
.header-search input:focus { outline: none; }
.header-search input::-webkit-search-cancel-button { cursor: pointer; }
.header-search-btn {
    border: 0; width: 42px; height: 42px; margin-right: 3px; border-radius: 50%; color: var(--hfk-green); background: transparent;
    display: inline-grid; place-items: center; font-size: 1.05rem; transition: background .3s, color .3s;
}
.header-search-btn span { display: none; }
.header-search-btn .fa-arrow-right::before { content: '\f002'; } /* loupe */
.header-search-btn:hover { background: var(--hfk-green); color: #fff; }

/* Suggestions de recherche */
.search-suggest {
    position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 1100;
    background: #fff; box-shadow: var(--hfk-shadow-lg); border-radius: 16px; overflow: hidden;
    max-height: 70vh; overflow-y: auto; animation: hfk-fade-up .3s var(--hfk-ease);
}
.search-suggest-group { padding: .6rem 0; }
.search-suggest-group + .search-suggest-group { border-top: 1px solid var(--hfk-border); }
.search-suggest-title { padding: .2rem 1rem .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hfk-muted); }
.search-suggest-item { display: flex; align-items: center; gap: .8rem; padding: .55rem 1rem; color: var(--hfk-text); }
.search-suggest-item:hover, .search-suggest-item.is-active { background: var(--hfk-green-soft); color: var(--hfk-green-dark); }
.search-suggest-thumb { width: 44px; height: 44px; flex: 0 0 44px; overflow: hidden; background: var(--hfk-placeholder); display: grid; place-items: center; color: rgba(30, 33, 36, .3); border-radius: 10px; }
.search-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-suggest-name { flex: 1; font-size: .92rem; font-weight: 500; line-height: 1.3; }
.search-suggest-price { font-family: var(--hfk-font-head); font-weight: 700; color: var(--hfk-charcoal); white-space: nowrap; }
.search-suggest-all { display: block; padding: .8rem 1rem; text-align: center; font-weight: 600; background: var(--hfk-green-soft); }
.search-suggest-empty { padding: 1.2rem 1rem; color: var(--hfk-muted); text-align: center; font-size: .92rem; }
.search-suggest mark { background: var(--hfk-yellow-light); color: inherit; padding: 0; }

/* Actions */
.header-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.header-action {
    position: relative; display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .7rem;
    border: 0; border-radius: var(--hfk-radius-pill); background: transparent; color: var(--hfk-charcoal); font-size: 1.25rem;
    transition: color .3s, background .3s;
}
.header-action > i { color: #9AA1A8; transition: color .3s; }
.header-action:hover { color: var(--hfk-green-dark); background: var(--hfk-green-soft); }
.header-action:hover > i { color: var(--hfk-green); }
.header-action-label { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.header-action-label small { font-size: .7rem; color: var(--hfk-muted); }
.header-action-label strong { font-size: .86rem; font-weight: 600; font-family: var(--hfk-font-head); color: var(--hfk-charcoal); }
.header-badge {
    position: absolute; top: .05rem; left: 1.65rem; min-width: 19px; height: 19px; padding: 0 5px;
    display: grid; place-items: center; border-radius: 10px; font-size: .68rem; font-weight: 700; font-family: var(--hfk-font-head);
    color: #fff; background: var(--hfk-green); box-shadow: 0 0 0 2px #fff;
}
.header-badge.is-empty { display: none; }
.header-badge.is-bumped { animation: hfk-bounce-in .5s var(--hfk-ease-bounce); }
.header-cart > i { color: var(--hfk-charcoal); }

/* ---------------------------------------------------------------------
 * NAVIGATION + MÉGA-MENU
 * ------------------------------------------------------------------- */
.main-nav { background: #fff; border-top: 1px solid #F0F2F4; border-bottom: 1px solid #F0F2F4; }
.nav-list { display: flex; align-items: stretch; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
.nav-list::-webkit-scrollbar { display: none; }
.nav-list > .nav-item:first-child { margin-left: auto; }
.nav-list > .nav-item:last-child { margin-right: auto; }
.nav-item { position: static; }
.nav-link {
    position: relative; display: flex; align-items: center; gap: .45rem; padding: .85rem .9rem;
    font-family: var(--hfk-font-head); font-weight: 500; font-size: .93rem; color: var(--hfk-text); white-space: nowrap;
}
.nav-link > i:first-child { color: var(--hfk-green); font-size: .9rem; transition: transform .35s var(--hfk-ease-bounce); }
.nav-link::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 30px; height: 3px; margin-left: -15px; border-radius: 3px; background: var(--hfk-green); transform: scaleX(0); transition: transform .35s var(--hfk-ease); }
.nav-item:hover > .nav-link, .nav-item.is-open > .nav-link, .nav-link:focus-visible { color: var(--hfk-green-dark); }
.nav-item:hover > .nav-link::after, .nav-item.is-open > .nav-link::after { transform: scaleX(1); }
.nav-item:hover > .nav-link > i:first-child { transform: scale(1.15); }
.nav-caret { font-size: .6rem; opacity: .55; transition: transform .35s var(--hfk-ease); }
.nav-item:hover .nav-caret, .nav-item.is-open .nav-caret { transform: rotate(180deg); }
.nav-item-offers .nav-link { color: var(--hfk-charcoal); background: var(--hfk-yellow); margin: .4rem 0 .4rem .6rem; padding: .45rem 1.05rem; border-radius: var(--hfk-radius-pill); font-weight: 600; }
.nav-item-offers .nav-link i { color: var(--hfk-charcoal) !important; }
.nav-item-offers .nav-link::after { display: none; }
.nav-item-offers .nav-link:hover { color: var(--hfk-charcoal); background: var(--hfk-yellow-dark); }

.mega-panel {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 1010;
    background: #fff; box-shadow: 0 30px 60px rgba(20, 30, 40, .12); border-radius: 0 0 22px 22px;
    opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none;
    transition: opacity .3s var(--hfk-ease), transform .35s var(--hfk-ease), visibility .3s;
}
.nav-item.has-mega:hover > .mega-panel, .nav-item.has-mega:focus-within > .mega-panel, .nav-item.has-mega.is-open > .mega-panel {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
.main-nav.is-closing .mega-panel { opacity: 0 !important; visibility: hidden !important; }
.mega-inner { max-width: 1320px; margin: 0 auto; padding: 2rem clamp(1rem, 3vw, 1.75rem); display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 2rem; }
.mega-intro-icon { width: 54px; height: 54px; display: grid; place-items: center; font-size: 1.35rem; color: var(--hfk-green); background: var(--hfk-green-light); border-radius: 50%; margin-bottom: 1rem; }
.mega-intro h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.mega-intro p { color: var(--hfk-muted); font-size: .92rem; }
.mega-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem .9rem; align-content: start; }
.mega-link { display: flex; align-items: flex-start; gap: .8rem; padding: .7rem; border-radius: 12px; color: var(--hfk-text); transition: background .3s, transform .3s var(--hfk-ease); }
.mega-link:hover { background: var(--hfk-green-soft); color: var(--hfk-text); transform: translateX(4px); }
.mega-link-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 50%; color: var(--hfk-green); background: var(--hfk-cream); transition: background .3s, color .3s; }
.mega-link:hover .mega-link-icon { background: var(--hfk-green); color: #fff; }
.mega-link-text strong { display: block; font-size: .94rem; font-weight: 600; font-family: var(--hfk-font-head); color: var(--hfk-charcoal); }
.mega-link-text small { display: block; color: var(--hfk-muted); font-size: .8rem; line-height: 1.4; }
.mega-promo {
    position: relative; overflow: hidden; padding: 1.6rem; color: #fff; border-radius: 18px;
    background: linear-gradient(180deg, rgba(10, 30, 15, .25), rgba(10, 30, 15, .75)), url('https://images.unsplash.com/photo-1475738972911-5b44ce984c42?auto=format&fit=crop&w=600&q=70') center / cover;
}
.mega-promo > * { position: relative; }
.mega-promo-tag { display: inline-flex; gap: .4rem; align-items: center; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hfk-charcoal); background: var(--hfk-yellow); padding: .25rem .6rem; border-radius: var(--hfk-radius-pill); }
.mega-promo h4 { color: #fff; font-size: 1.12rem; margin: .7rem 0 .5rem; }
.mega-promo p { color: rgba(255, 255, 255, .88); font-size: .86rem; }
.mega-promo-link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mega-promo-link:hover { color: var(--hfk-yellow); }

/* ---------------------------------------------------------------------
 * VOILE + TIROIRS
 * ------------------------------------------------------------------- */
.overlay-backdrop { position: fixed; inset: 0; z-index: 1900; background: rgba(15, 20, 25, .45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s; }
.overlay-backdrop.is-visible { opacity: 1; }

.drawer-close { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--hfk-cream); color: var(--hfk-charcoal); font-size: 1.05rem; transition: background .3s, color .3s, transform .35s var(--hfk-ease); }
.drawer-close:hover { background: var(--hfk-green); color: #fff; transform: rotate(90deg); }

.cart-drawer, .mobile-menu {
    position: fixed; top: 0; bottom: 0; z-index: 1950; display: flex; flex-direction: column;
    width: min(440px, 100vw); background: #fff; box-shadow: var(--hfk-shadow-lg); visibility: hidden;
    transition: transform .5s var(--hfk-ease), visibility .5s;
}
.cart-drawer { right: 0; transform: translateX(105%); border-radius: 22px 0 0 22px; }
.mobile-menu { left: 0; width: min(400px, 92vw); transform: translateX(-105%); border-radius: 0 22px 22px 0; }
.cart-drawer.is-open, .mobile-menu.is-open { transform: none; visibility: visible; }

.cart-drawer-head, .mobile-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--hfk-border); }
/* Titre « Warenkorb » centré + trait vert, comme le panneau « Кошик » */
.cart-drawer-head { position: relative; justify-content: center; padding-bottom: 1.25rem; }
.cart-drawer-head h2 { font-size: 1.2rem; margin: 0; display: flex; align-items: center; gap: .5rem; position: relative; }
.cart-drawer-head h2::after { content: ''; position: absolute; left: 50%; bottom: -.55rem; width: 34px; height: 3px; margin-left: -17px; border-radius: 3px; background: var(--hfk-green); }
.cart-drawer-head h2 i { display: none; }
.cart-drawer-head .drawer-close { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }
.cart-drawer-head .drawer-close:hover { transform: translateY(-50%) rotate(90deg); }
.cart-drawer-count { color: var(--hfk-muted); font-weight: 400; }
.cart-drawer-body { flex: 1; overflow-y: auto; }

/* ---------------------------------------------------------------------
 * MINI-PANIER
 * ------------------------------------------------------------------- */
.mini-cart { display: flex; flex-direction: column; min-height: 100%; }
.mini-cart-shipping { margin: 1rem 1.25rem 0; padding: .9rem 1rem; background: var(--hfk-green-soft); border-radius: 12px; }
.mini-cart-shipping p { margin: 0 0 .55rem; font-size: .86rem; }
.mini-cart-shipping i { color: var(--hfk-green); margin-right: .3rem; }
.mini-cart-shipping .is-free, .mini-cart-shipping .is-free i { color: var(--hfk-green-dark); }
.mini-cart-progress { height: 6px; background: #DDEFE2; overflow: hidden; border-radius: 6px; }
.mini-cart-progress span { display: block; height: 100%; background: var(--hfk-green); border-radius: 6px; transition: width .6s var(--hfk-ease); }
.mini-cart-list { list-style: none; margin: 0; padding: .5rem 1.25rem; flex: 1; }
.mini-cart-item { display: flex; align-items: center; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--hfk-border); animation: hfk-fade-up .4s var(--hfk-ease) both; }
.mini-cart-item.is-removing { opacity: .35; pointer-events: none; transition: opacity .3s; }
.mini-cart-thumb { width: 64px; height: 64px; flex: 0 0 64px; overflow: hidden; background: #F3F4F6; border-radius: 12px; }
.mini-cart-thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.mini-cart-thumb .img-ph { min-height: 64px; }
.mini-cart-thumb .img-ph i { font-size: 1.3rem; }
.mini-cart-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.mini-cart-name { font-weight: 500; font-size: .88rem; line-height: 1.3; color: var(--hfk-charcoal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini-cart-meta { font-size: .78rem; color: var(--hfk-muted); }
.mini-cart-line { font-family: var(--hfk-font-head); font-weight: 600; color: var(--hfk-charcoal); }
.mini-cart-remove { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: #A3A9AF; transition: color .3s, background .3s; }
.mini-cart-remove:hover { color: #fff; background: var(--hfk-ember); }
.mini-cart-footer { padding: 1.1rem 1.25rem 1.3rem; border-top: 1px solid var(--hfk-border); background: #fff; position: sticky; bottom: 0; }
.mini-cart-subtotal { display: flex; justify-content: center; align-items: baseline; gap: .5rem; font-size: 1rem; }
.mini-cart-subtotal strong { font-family: var(--hfk-font-head); font-size: 1.3rem; color: var(--hfk-green-dark); }
.mini-cart-note { font-size: .76rem; color: var(--hfk-muted); margin: .2rem 0 .9rem; text-align: center; }
.mini-cart-buttons { display: grid; grid-template-columns: 1fr; gap: .55rem; }
.mini-cart-buttons .btn { padding: .78rem .6rem; font-size: .92rem; width: 100%; }
.mini-cart-buttons .btn:not(.btn-hfk) { background: #fff; color: var(--hfk-green-dark); border: 1.5px solid var(--hfk-green); }
.mini-cart-buttons .btn:not(.btn-hfk):hover { background: var(--hfk-green-soft); }
.mini-cart-empty { padding: 2.5rem 1.5rem; text-align: center; }
.mini-cart-empty-icon { width: 84px; height: 84px; margin: 0 auto 1rem; display: grid; place-items: center; font-size: 2rem; border-radius: 50%; color: var(--hfk-green); background: var(--hfk-green-light); animation: hfk-float 3.5s ease-in-out infinite; }
.mini-cart-empty-title { font-family: var(--hfk-font-head); font-weight: 700; font-size: 1.12rem; color: var(--hfk-charcoal); margin-bottom: .35rem; }
.mini-cart-empty-text { color: var(--hfk-muted); font-size: .9rem; }

/* ---------------------------------------------------------------------
 * MENU (hamburger) — panier en haut
 * ------------------------------------------------------------------- */
.mobile-menu-body { flex: 1; overflow-y: auto; padding-bottom: 2rem; }
.mobile-cart { margin: 1rem 1.25rem 0; border: 1px solid var(--hfk-border); border-radius: 16px; overflow: hidden; }
.mobile-cart-toggle { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .95rem 1.1rem; border: 0; background: var(--hfk-green); color: #fff; text-align: left; }
.mobile-cart-title { flex: 1; display: flex; align-items: center; gap: .55rem; font-family: var(--hfk-font-head); font-weight: 600; font-size: 1rem; }
.mobile-cart-title i { color: #fff; }
.mobile-cart-badge { min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 11px; background: var(--hfk-yellow); color: var(--hfk-charcoal); font-size: .74rem; }
.mobile-cart-sum { font-family: var(--hfk-font-head); font-weight: 700; color: #fff; }
.mobile-cart-caret { transition: transform .35s var(--hfk-ease); }
.mobile-cart-toggle[aria-expanded="false"] .mobile-cart-caret { transform: rotate(-90deg); }
.mobile-cart-content { max-height: 1200px; overflow: hidden; transition: max-height .5s var(--hfk-ease); background: #fff; }
.mobile-cart-content.is-collapsed { max-height: 0; }
.mobile-cart-content .mini-cart-footer { position: static; }
.mobile-cart-content .mini-cart-shipping { margin: .8rem .8rem 0; }
.mobile-cart-content .mini-cart-list { padding: .4rem .9rem; }
.mobile-cart-content .mini-cart-empty { padding: 1.5rem 1.25rem; }
.mobile-cart-content .mini-cart-empty-icon { width: 64px; height: 64px; font-size: 1.5rem; }
.mobile-cart.is-highlight { animation: hfk-pulse-soft 1.2s ease-in-out 2; }

.mobile-menu-search { display: flex; margin: 1.1rem 1.25rem .4rem; border: 1px solid var(--hfk-border); border-radius: var(--hfk-radius-pill); box-shadow: 0 2px 10px rgba(20, 30, 40, .06); overflow: hidden; }
.mobile-menu-search input { flex: 1; border: 0; padding: .7rem 1.1rem; min-width: 0; }
.mobile-menu-search input:focus { outline: none; }
.mobile-menu-search button { border: 0; width: 48px; color: var(--hfk-green); background: transparent; font-size: 1.05rem; }
.mobile-menu-label { margin: 1.3rem 1.25rem .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hfk-muted); }

.mobile-cats { list-style: none; margin: 0 .75rem; padding: 0; }
.mobile-cat { border-bottom: 1px solid #F0F2F4; }
.mobile-cat-row { display: flex; align-items: center; }
.mobile-cat-link { flex: 1; display: flex; align-items: center; gap: .8rem; padding: .7rem .5rem; font-family: var(--hfk-font-head); font-weight: 500; color: var(--hfk-charcoal); }
.mobile-cat-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--hfk-green); background: var(--hfk-green-light); font-size: .9rem; }
.mobile-cat-toggle { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--hfk-muted); }
.mobile-cat-toggle i { transition: transform .35s var(--hfk-ease); }
.mobile-cat.is-open .mobile-cat-toggle { color: var(--hfk-green); }
.mobile-cat.is-open .mobile-cat-toggle i { transform: rotate(135deg); }
.mobile-subcats { list-style: none; margin: 0 0 .5rem; padding: 0 0 0 2.6rem; max-height: 0; overflow: hidden; transition: max-height .45s var(--hfk-ease); }
.mobile-cat.is-open .mobile-subcats { max-height: 700px; }
.mobile-subcats a { display: flex; align-items: center; gap: .55rem; padding: .5rem .5rem; color: var(--hfk-text); font-size: .92rem; border-radius: 10px; }
.mobile-subcats a:hover { background: var(--hfk-green-soft); }
.mobile-subcats a i { color: var(--hfk-green); font-size: .7rem; }
.mobile-subcats-all { font-weight: 600; color: var(--hfk-green-dark) !important; }

.mobile-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: 0 1.25rem; }
.mobile-quick-item { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .85rem .3rem; border-radius: 14px; background: var(--hfk-cream); color: var(--hfk-charcoal); font-size: .76rem; font-weight: 500; text-align: center; transition: background .3s, color .3s, transform .3s var(--hfk-ease); }
.mobile-quick-item i { font-size: 1.15rem; color: var(--hfk-green); transition: color .3s; }
.mobile-quick-item:hover { background: var(--hfk-green); color: #fff; transform: translateY(-2px); }
.mobile-quick-item:hover i { color: #fff; }
.mobile-quick-item.is-hot { background: var(--hfk-yellow); color: var(--hfk-charcoal); }
.mobile-quick-item.is-hot i { color: var(--hfk-charcoal); }

.mobile-account { list-style: none; margin: 0; padding: 0 1.25rem; }
.mobile-account a { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; color: var(--hfk-charcoal); font-weight: 500; border-bottom: 1px solid #F0F2F4; }
.mobile-account a i { width: 20px; color: var(--hfk-green); }
.mobile-account-badge { margin-left: auto; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 11px; background: var(--hfk-green-light); color: var(--hfk-green-dark); font-size: .74rem; font-weight: 700; }
.mobile-contact { display: flex; flex-direction: column; gap: .6rem; margin: 1.5rem 1.25rem 0; padding: 1.1rem; border-radius: 16px; background: var(--hfk-green-soft); }
.mobile-contact a { color: var(--hfk-charcoal); font-size: .92rem; display: flex; align-items: center; gap: .6rem; }
.mobile-contact i { color: var(--hfk-green); }

/* Animation d'entrée des éléments du menu */
.mobile-menu.is-open .mobile-cat, .mobile-menu.is-open .mobile-quick-item { animation: hfk-fade-up .5s var(--hfk-ease) both; }
.mobile-menu.is-open .mobile-cat:nth-child(2) { animation-delay: .04s; }
.mobile-menu.is-open .mobile-cat:nth-child(3) { animation-delay: .08s; }
.mobile-menu.is-open .mobile-cat:nth-child(4) { animation-delay: .12s; }
.mobile-menu.is-open .mobile-cat:nth-child(5) { animation-delay: .16s; }
.mobile-menu.is-open .mobile-cat:nth-child(6) { animation-delay: .2s; }
.mobile-menu.is-open .mobile-cat:nth-child(7) { animation-delay: .24s; }

/* ---------------------------------------------------------------------
 * RECHERCHE MOBILE PLEIN ÉCRAN
 * ------------------------------------------------------------------- */
.mobile-search { position: fixed; inset: 0; z-index: 1980; background: rgba(255, 255, 255, .98); padding: 1rem; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: opacity .35s, transform .4s var(--hfk-ease), visibility .35s; }
.mobile-search.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-search-inner { max-width: 640px; margin: 0 auto; }
.mobile-search form { position: relative; display: flex; align-items: center; gap: .6rem; border: 1px solid var(--hfk-border); border-radius: var(--hfk-radius-pill); box-shadow: 0 2px 12px rgba(20, 30, 40, .08); padding: .25rem .3rem .25rem 1.1rem; }
.mobile-search form > i { color: var(--hfk-green); font-size: 1.05rem; }
.mobile-search input { flex: 1; border: 0; font-size: 1.05rem; padding: .55rem 0; background: transparent; min-width: 0; }
.mobile-search input:focus { outline: none; }
.mobile-search-close { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--hfk-cream); color: var(--hfk-charcoal); }
.mobile-search .search-suggest { left: 0; right: 0; }
.mobile-search-tags { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1.4rem; font-size: .9rem; }
.mobile-search-tags span { color: var(--hfk-muted); }
.mobile-search-tags a { padding: .38rem .9rem; border-radius: var(--hfk-radius-pill); background: var(--hfk-cream); color: var(--hfk-charcoal); }
.mobile-search-tags a:hover { background: var(--hfk-green); color: #fff; }

/* ---------------------------------------------------------------------
 * RESPONSIVE
 * ------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
    .nav-link { padding: .85rem .6rem; font-size: .9rem; }
}
@media (max-width: 1199.98px) {
    .nav-link > i:first-child { display: none; }
    .mega-inner { grid-template-columns: 1fr 2fr; }
    .mega-promo { display: none; }
    .header-account .header-action-label { display: none; }
}
@media (max-width: 991.98px) {
    .topbar-links { display: none; }
    .topbar-inner { justify-content: center; min-height: 32px; font-size: .76rem; }
    .main-nav { display: none; }
    /* Comme la maquette mobile : bouton rond, recherche pilule au centre, panier */
    .header-main-inner { gap: .6rem; min-height: 66px; }
    .header-main-inner > .brand .brand-text { display: none; }
    .header-main-inner > .brand .brand-mark { width: 40px; height: 40px; font-size: 1.05rem; }
    .header-main-inner > .brand .brand-logo { max-height: 38px; max-width: 90px; object-fit: contain; }
    .header-search { display: flex; max-width: none; }
    .header-search input { padding: .6rem 1rem; font-size: .9rem; }
    .header-search-btn { width: 36px; height: 36px; }
    .header-actions [data-search-open], .header-account, .header-wish { display: none; }
    .header-action { font-size: 1.25rem; padding: .45rem; }
    .header-badge { left: 1.4rem; }
    .hamburger { width: 42px; height: 42px; }
}