/* ==========================================================

   ZANDOS — GLOBAL.CSS

   VERSION NETTOYÉE

   Composants communs :

   ✓ Top bar

   ✓ Navbar sticky

   ✓ Recherche

   ✓ Profil client

   ✓ Favoris

   ✓ Panier

   ✓ Catégories

   ✓ Menu hamburger

   ✓ Footer

   ✓ Formulaire recherche produit

   ✓ Accordéons mobile

   ✓ WhatsApp flottant

   ✓ Responsive

========================================================== */

/* ==========================================================

   1. VARIABLES

========================================================== */

:root {

    --primary:

        #F76902;

    --primary-dark:

        #E85C00;

    --primary-soft:

        #FFF4EC;

    --text:

        #111111;

    --text-secondary:

        #343434;

    --text-light:

        #6D6D6D;

    --text-muted:

        #929292;

    --white:

        #FFFFFF;

    --background:

        #FFFFFF;

    --background-soft:

        #F6F6F4;

    --background-gray:

        #EFEFEC;

    --border:

        #E7E7E3;

    --border-dark:

        #D8D8D3;

    --success:

        #15803D;

    --danger:

        #B42318;

    --radius-sm:

        8px;

    --radius:

        12px;

    --radius-lg:

        18px;

    --global-padding:

        4%;

    --shadow-navbar:

        0 7px 25px rgba(0, 0, 0, 0.05);

    --shadow-menu:

        24px 0 70px rgba(0, 0, 0, 0.18);

    --shadow-dropdown:

        0 18px 50px rgba(0, 0, 0, 0.12);

}

/* ==========================================================

   2. RESET

========================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    min-height: 100%;

    scroll-behavior: smooth;

}

body {

    min-height: 100vh;

    overflow-x: hidden;

    color:

        var(--text);

    background:

        var(--background);

    font-family:

        "Inter",

        sans-serif;

    font-size:

        14px;

    -webkit-font-smoothing:

        antialiased;

    text-rendering:

        optimizeLegibility;

}

body.menu-open {

    overflow: hidden;

}

a {

    color: inherit;

    text-decoration: none;

}

button,

input,

select,

textarea {

    font: inherit;

}

button {

    padding: 0;

    color: inherit;

    background: none;

    border: none;

    cursor: pointer;

}

img {

    display: block;

    max-width: 100%;

}

ul {

    list-style: none;

}

[hidden] {

    display: none !important;

}

/* ==========================================================

   3. TOP BAR PROMOTIONNELLE

   Nouveau :

   ✓ fond rouge

   ✓ texte blanc

   ✓ animation conservée

========================================================== */

.promo-bar {

    position: relative;

    z-index: 1001;

    display: flex;

    align-items: center;

    width: 100%;

    height: 38px;

    overflow: hidden;

    color:

        #FFFFFF;

    background:

        #D71920;

    border-bottom:

        1px solid #C6161C;

    transition:

        height 0.3s ease,

        opacity 0.3s ease,

        transform 0.3s ease;

}

.promo-bar.hide {

    height: 0;

    opacity: 0;

    transform:

        translateY(-100%);

}

.promo-slider {

    width: 100%;

    overflow: hidden;

}

.promo-track {

    display: flex;

    align-items: center;

    width:

        max-content;

    gap: 80px;

    padding-right:

        80px;

    animation:

        zandosPromoMarquee

        35s

        linear

        infinite;

}

.promo-track span {

    flex:

        0 0 auto;

    color:

        #FFFFFF;

    font-size:

        12px;

    font-weight:

        550;

    letter-spacing:

        0.1px;

    white-space:

        nowrap;

}

.promo-bar:hover

.promo-track {

    animation-play-state:

        paused;

}

.promo-close {

    position: absolute;

    z-index: 2;

    top: 50%;

    right: 10px;

    width: 28px;

    height: 28px;

    display: grid;

    place-items: center;

    color:

        #FFFFFF;

    background:

        #D71920;

    border-radius:

        50%;

    font-size:

        13px;

    transform:

        translateY(-50%);

    transition:

        background 0.2s ease,

        transform 0.2s ease;

}

.promo-close:hover {

    background:

        #B9141A;

}

@keyframes zandosPromoMarquee {

    from {

        transform:

            translateX(0);

    }

    to {

        transform:

            translateX(-50%);

    }

}

/* ==========================================================

   4. NAVBAR PRINCIPALE

========================================================== */

.navbar {

    position: sticky;

    z-index: 1000;

    top: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    height: 72px;

    padding:

        0

        var(--global-padding);

    background:

        rgba(

            255,

            255,

            255,

            0.97

        );

    border-bottom:

        1px solid transparent;

    backdrop-filter:

        blur(15px);

    -webkit-backdrop-filter:

        blur(15px);

    transition:

        height 0.25s ease,

        border-color 0.25s ease,

        box-shadow 0.25s ease;

}

.navbar.scrolled {

    height: 64px;

    border-color:

        var(--border);

    box-shadow:

        var(--shadow-navbar);

}

.nav-left,

.nav-right {

    display: flex;

    align-items: center;

}

.nav-left {

    gap: 18px;

}

.nav-right {

    gap: 6px;

}

/* ==========================================================

   5. LOGO

========================================================== */

.logo {

    display: inline-flex;

    align-items: center;

    color:

        var(--text);

    font-size:

        24px;

    font-weight:

        850;

    line-height: 1;

    letter-spacing:

        -1.3px;

}

.logo img {

    width: auto;

    height: 28px;

    object-fit:

        contain;

}

/* ==========================================================

   6. MARKETPLACE / LOGISTIQUE

========================================================== */

.current-zandos-section {

    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding-left:

        15px;

    color:

        var(--text-light);

    border-left:

        1px solid var(--border-dark);

    font-size:

        12px;

    font-weight:

        600;

    white-space:

        nowrap;

}

/* ==========================================================

   7. HAMBURGER NAVBAR

========================================================== */

.menu-toggle {

    display: flex;

    flex-direction:

        column;

    justify-content:

        center;

    width: 42px;

    height: 42px;

    gap: 5px;

    border-radius:

        50%;

    transition:

        background 0.2s ease;


    align-items: flex-start;
}

.menu-toggle:hover {

    background:

        var(--background-soft);

}

.menu-toggle span {

    display: block;
    flex: 0 0 auto;

    height:

        1.5px;

    margin-left:

        8px;

    background:

        var(--text);

    border-radius:

        10px;

    transform-origin:

        center;

    transition:

        width 0.3s ease,

        opacity 0.3s ease,

        transform 0.3s ease;

}

.menu-toggle

span:nth-child(1),

.menu-toggle

span:nth-child(3) {

    width:

        25px;

}

.menu-toggle

span:nth-child(2) {

    width:

        14px;

}

.menu-toggle.active

span:nth-child(1) {

    transform:

        translateY(6.5px)

        rotate(45deg);

}

.menu-toggle.active

span:nth-child(2) {

    opacity: 0;

    transform:

        translateX(-8px);

}

.menu-toggle.active

span:nth-child(3) {

    transform:

        translateY(-6.5px)

        rotate(-45deg);

}

/* ==========================================================

   8. ICÔNES NAVBAR

========================================================== */

.nav-icon,

.search-toggle {

    position: relative;

    display: grid;

    width: 42px;

    height: 42px;

    place-items: center;

    color:

        var(--text);

    background:

        transparent;

    border:

        1px solid transparent;

    border-radius:

        50%;

    font-size:

        18px;

    transition:

        background 0.2s ease,

        border-color 0.2s ease,

        transform 0.2s ease;

}

.nav-icon:hover,

.search-toggle:hover {

    background:

        var(--background-soft);

    border-color:

        var(--border);

    transform:

        translateY(-1px);

}

/* ==========================================================

   9. AVATAR CLIENT NAVBAR

========================================================== */

.account-nav-avatar {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    border-radius:

        50%;

}

.account-nav-avatar.client-avatar-active {

    width: 35px;

    height: 35px;

    color:

        var(--primary);

    background:

        var(--primary-soft);

    border:

        1px solid #FFE0CA;

    border-radius:

        50%;

    font-size:

        11px;

    font-weight:

        800;

    letter-spacing:

        0.2px;

}

/* ==========================================================

   10. COMPTEUR PANIER

========================================================== */

.cart-btn {

    position: relative;

}

#cartCount,

.nav-counter {

    position: absolute;

    top: 1px;

    right: -1px;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 18px;

    height: 18px;

    padding:

        0 4px;

    color:

        var(--white);

    background:

        var(--text);

    border:

        2px solid var(--white);

    border-radius:

        20px;

    font-size:

        9px;

    font-weight:

        750;

    line-height: 1;

}

/* ==========================================================

   11. RECHERCHE DESKTOP

========================================================== */

.search-wrapper {

    position: relative;

    display: flex;

    align-items: center;

    gap: 5px;

}

.search-box-expand {

    display: flex;

    align-items: center;

}

.search-input {

    width: 0;

    height: 42px;

    opacity: 0;

    padding: 0;

    color:

        var(--text);

    background:

        var(--background-soft);

    border:

        1px solid transparent;

    border-radius:

        50px;

    outline: none;

    font-size:

        13px;

    pointer-events:

        none;

    transition:

        width 0.3s ease,

        opacity 0.2s ease,

        padding 0.3s ease,

        border-color 0.2s ease,

        background 0.2s ease;

}

.search-input::placeholder {

    color:

        var(--text-muted);

}

.search-wrapper.active

.search-input {

    width: 250px;

    opacity: 1;

    padding:

        0 17px;

    border-color:

        var(--border);

    pointer-events:

        auto;

}

.search-input:focus {

    background:

        var(--white);

    border-color:

        #BDBDB8;

}

@media (

    hover: hover

)

and (

    min-width: 701px

) {

    .search-wrapper:hover

    .search-input,

    .search-wrapper:focus-within

    .search-input {

        width: 250px;

        opacity: 1;

        padding:

            0 17px;

        border-color:

            var(--border);

        pointer-events:

            auto;

    }

}

/* ==========================================================

   12. PROFIL DROPDOWN

========================================================== */

.profile-wrapper {

    position: relative;

    display: flex;

    align-items: center;

}

.profile-wrapper::after {

    content: "";

    position: absolute;

    z-index: 2199;

    top: 100%;

    right: 0;

    width: 275px;

    height: 16px;

    background: transparent;

}

.profile-dropdown {

    position: absolute;

    z-index: 2200;

    top:

        calc(

            100% + 8px

        );

    right: 0;

    width: 275px;

    opacity: 0;

    visibility: hidden;

    padding:

        9px;

    color:

        var(--text);

    background:

        var(--white);

    border:

        1px solid var(--border);

    border-radius:

        15px;

    box-shadow:

        var(--shadow-dropdown);

    transform:

        translateY(7px);

    pointer-events:

        none;

    transition:

        opacity 0.2s ease,

        visibility 0.2s ease,

        transform 0.2s ease;

}

.profile-wrapper:hover

.profile-dropdown,

.profile-wrapper:focus-within

.profile-dropdown {

    opacity: 1;

    visibility: visible;

    transform:

        translateY(0);

    pointer-events:

        auto;

}

.profile-dropdown-header {

    margin-bottom:

        6px;

    padding:

        13px 12px 14px;

    border-bottom:

        1px solid var(--border);

}

.profile-dropdown-header

strong {

    display: block;

    margin-bottom:

        5px;

    overflow: hidden;

    color:

        var(--text);

    font-size:

        14px;

    font-weight:

        750;

    text-overflow:

        ellipsis;

    white-space:

        nowrap;

}

.profile-dropdown-header

p {

    margin: 0;

    overflow-wrap:

        anywhere;

    color:

        var(--text-light);

    font-size:

        11px;

    line-height:

        1.5;

}

/* ==========================================================

   13. LIENS PROFIL

========================================================== */

.profile-menu-group {

    width: 100%;

}

.profile-menu-group > a {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 43px;

    gap: 10px;

    padding:

        0 12px;

    color:

        var(--text);

    border-radius:

        9px;

    font-size:

        13px;

    font-weight:

        550;

    transition:

        padding 0.2s ease,

        background 0.2s ease;

}

.profile-menu-group > a i {

    width: 17px;

    color:

        var(--text-light);

    font-size:

        13px;

    text-align:

        center;

}

.profile-menu-group > a:hover {

    padding-left:

        16px;

    background:

        var(--background-soft);

}

/* ==========================================================

   14. DÉCONNEXION DESKTOP

========================================================== */

.profile-dropdown-logout {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 43px;

    gap: 10px;

    padding:

        0 12px;

    margin-top:

        4px;

    color:

        var(--danger);

    background:

        transparent;

    border-top:

        1px solid var(--border);

    border-radius:

        8px;

    font-size:

        13px;

    font-weight:

        650;

    text-align:

        left;

    transition:

        background 0.2s ease,

        padding 0.2s ease;

}

.profile-dropdown-logout i {

    width: 17px;

    text-align:

        center;

}

.profile-dropdown-logout:hover {

    padding-left:

        16px;

    background:

        #FFF1F0;

}

/* ==========================================================

   15. CATÉGORIES MARKETPLACE

========================================================== */

.top-categories {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    gap: 29px;

    padding:

        14px

        var(--global-padding);

    overflow-x: auto;

    background:

        var(--white);

    border-bottom:

        1px solid var(--border);

    white-space:

        nowrap;

    scrollbar-width:

        none;

    -webkit-overflow-scrolling:

        touch;

}

.top-categories::-webkit-scrollbar {

    display: none;

}

.top-categories a {

    position: relative;

    flex:

        0 0 auto;

    color:

        var(--text);

    font-size:

        13px;

    font-weight:

        550;

    transition:

        color 0.2s ease;

}

.top-categories

a:not(.highlight)::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: -5px;

    left: 0;

    height:

        1px;

    background:

        var(--text);

    transform:

        scaleX(0);

    transform-origin:

        center;

    transition:

        transform 0.2s ease;

}

.top-categories

a:hover::after {

    transform:

        scaleX(1);

}

.top-categories

.highlight {

    color:

        var(--primary);

    font-size:

        12px;

    font-weight:

        750;

    text-transform:

        uppercase;

}

/* ==========================================================

   16. RECHERCHE MOBILE

========================================================== */

.mobile-tools {

    display: none;

    width: 100%;

    padding:

        10px 16px 13px;

    background:

        var(--white);

    border-bottom:

        1px solid var(--border);

}

.mobile-search-wrapper {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

}

.mobile-search-wrapper i {

    position: absolute;

    z-index: 2;

    left: 15px;

    color:

        var(--text-light);

    font-size:

        14px;

    pointer-events:

        none;

}

.mobile-search {

    width: 100%;

    height: 44px;

    padding:

        0 16px

        0 42px;

    color:

        var(--text);

    background:

        var(--background-soft);

    border:

        1px solid transparent;

    border-radius:

        50px;

    outline:

        none;

    font-size:

        13px;

    transition:

        background 0.2s ease,

        border-color 0.2s ease;

}

.mobile-search:focus {

    background:

        var(--white);

    border-color:

        var(--border-dark);

}

/* ==========================================================

   17. OVERLAY HAMBURGER

========================================================== */

.mobile-menu-overlay {

    position: fixed;

    z-index: 4998;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    background:

        rgba(

            17,

            17,

            17,

            0.50

        );

    backdrop-filter:

        blur(2px);

    -webkit-backdrop-filter:

        blur(2px);

    transition:

        opacity 0.3s ease,

        visibility 0.3s ease;

}

.mobile-menu-overlay.active {

    opacity: 1;

    visibility: visible;

}

/* ==========================================================

   18. MENU HAMBURGER PREMIUM

========================================================== */

.mobile-menu {

    position: fixed;

    z-index: 4999;

    top: 0;

    bottom: 0;

    left: 0;

    width:

        min(

            430px,

            92vw

        );

    height:

        100dvh;

    overflow-y:

        auto;

    color:

        var(--text);

    background:

        var(--white);

    border-radius:

        0 20px 20px 0;

    box-shadow:

        var(--shadow-menu);

    transform:

        translateX(-105%);

    transition:

        transform

        0.35s

        cubic-bezier(

            0.22,

            1,

            0.36,

            1

        );

    overscroll-behavior:

        contain;

}

.mobile-menu.active {

    transform:

        translateX(0);

}

/* ==========================================================

   19. HEADER HAMBURGER

========================================================== */

.mobile-menu-header {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    width: 100%;

    height: 70px;

    padding:

        0 25px;

}

/* ==========================================================

   20. FERMER MENU

========================================================== */

.close-menu {

    position: relative;

    display: grid;

    width: 42px;

    height: 42px;

    place-items: center;

    background:

        var(--white);

    border:

        1px solid var(--border);

    border-radius:

        50%;

    transition:

        background 0.2s ease,

        transform 0.25s ease;

}

.close-menu:hover {

    background:

        var(--background-soft);

    transform:

        rotate(90deg);

}

.close-menu span {

    position: absolute;

    width: 21px;

    height: 1.5px;

    background:

        var(--text);

    border-radius:

        10px;

}

.close-menu

span:first-child {

    transform:

        rotate(45deg);

}

.close-menu

span:last-child {

    transform:

        rotate(-45deg);

}

/* ==========================================================

   21. CONTENU HAMBURGER

   min-height permet de pousser Assistance

   vers le bas du menu.

========================================================== */

.menu-content {

    display: flex;

    flex-direction:

        column;

    min-height:

        calc(

            100dvh - 70px

        );

    padding:

        12px 26px 30px;

}

/* ==========================================================

   22. BOUTONS INSCRIPTION / CONNEXION

========================================================== */

.mobile-auth-primary {

    display: grid;

    grid-template-columns:

        1fr 1fr;

    gap: 10px;

    margin-bottom:

        34px;

}

.mobile-auth-btn {

    width: 100%;

    min-height: 53px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:

        0 15px;

    border-radius:

        10px;

    font-size:

        14px;

    font-weight:

        700;

    transition:

        background 0.2s ease,

        color 0.2s ease,

        transform 0.2s ease;

}

.mobile-auth-btn:hover {

    transform:

        translateY(-1px);

}

.mobile-auth-btn-primary {

    color:

        var(--white);

    background:

        var(--text);

}

.mobile-auth-btn-primary:hover {

    background:

        #292929;

}

.mobile-auth-btn-secondary {

    color:

        var(--text);

    background:

        #F0F0ED;

}

.mobile-auth-btn-secondary:hover {

    background:

        #E6E6E2;

}

/* ==========================================================

   23. TITRE HAMBURGER

========================================================== */

.menu-content > h2 {

    max-width:

        340px;

    margin-bottom:

        26px;

    color:

        var(--text);

    font-size:

        25px;

    font-weight:

        600;

    line-height:

        1.15;

    letter-spacing:

        -1px;

}

/* ==========================================================

   24. ACTIONS PRINCIPALES HAMBURGER

========================================================== */

.menu {

    width: 100%;

}

.menu__list {

    width: 100%;

    margin: 0;

    padding: 0;

    border-top:

        1px solid var(--border);

}

.menu__list li {

    border-bottom:

        1px solid var(--border);

}

.menu__list a {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 59px;

    padding:

        0 2px;

    color:

        var(--text);

    font-size:

        15px;

    font-weight:

        600;

    transition:

        color 0.2s ease,

        padding 0.2s ease;

}

.menu__list a:hover {

    padding-left:

        7px;

    color:

        var(--primary);

}

/* ==========================================================

   25. BAS DU MENU HAMBURGER

========================================================== */

.mobile-menu-bottom {

    margin-top:

        auto;

    padding-top:

        45px;

}

.mobile-help-link {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 50px;

    gap: 11px;

    color:

        var(--text);

    border-top:

        1px solid var(--border);

    font-size:

        13px;

    font-weight:

        600;

}

.mobile-help-link i {

    width:

        18px;

    color:

        var(--text-light);

    text-align:

        center;

}

/* ==========================================================

   26. DÉCONNEXION HAMBURGER

========================================================== */

.mobile-client-logout {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 48px;

    gap: 11px;

    color:

        var(--danger);

    border-top:

        1px solid var(--border);

    font-size:

        13px;

    font-weight:

        650;

    text-align:

        left;

}

.mobile-client-logout i {

    width:

        18px;

    text-align:

        center;

}

.mobile-client-logout:hover {

    color:

        #8F1D15;

}

/* ==========================================================

   27. FOOTER

========================================================== */

.footer {

    width: 100%;

    color:

        var(--text);

    background:

        var(--white);

    border-top:

        1px solid var(--border);

}

/* ==========================================================

   28. FOOTER SECTION PRODUIT RECHERCHÉ

========================================================== */

.footer-container {

    display: grid;

    grid-template-columns:

        minmax(

            280px,

            0.8fr

        )

        minmax(

            390px,

            1fr

        );

    align-items:

        start;

    width: 100%;

    gap:

        clamp(

            60px,

            10vw,

            150px

        );

    padding:

        76px

        var(--global-padding)

        68px;

}

.footer-left {

    max-width:

        500px;

}

.footer-title {

    margin-bottom:

        17px;

    color:

        var(--text);

    font-size:

        clamp(

            28px,

            2.8vw,

            42px

        );

    font-weight:

        500;

    line-height:

        1.1;

    letter-spacing:

        -1.8px;

}

.footer-desc {

    max-width:

        410px;

    color:

        var(--text-light);

    font-size:

        14px;

    line-height:

        1.7;

}

/* ==========================================================

   29. FORMULAIRE FOOTER

========================================================== */

.newsletter-box {

    display: flex;

    flex-direction:

        column;

    width: 100%;

    max-width:

        560px;

    gap:

        13px;

}

.newsletter-label {

    margin-top:

        3px;

    color:

        var(--text);

    font-size:

        12px;

    font-weight:

        650;

}

.newsletter-input {

    width: 100%;

}

.newsletter-input input {

    width: 100%;

    height: 51px;

    padding:

        0 17px;

    color:

        var(--text);

    background:

        var(--white);

    border:

        1px solid var(--border-dark);

    border-radius:

        10px;

    outline: none;

    font-size:

        13px;

    transition:

        border-color 0.2s ease,

        box-shadow 0.2s ease;

}

.newsletter-input

input::placeholder {

    color:

        #9A9A96;

}

.newsletter-input

input:hover {

    border-color:

        #C5C5C0;

}

.newsletter-input

input:focus {

    border-color:

        var(--text);

    box-shadow:

        0 0 0 3px

        rgba(

            17,

            17,

            17,

            0.05

        );

}

/* ==========================================================

   30. BOUTON FORMULAIRE

========================================================== */

.newsletter-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 51px;

    gap:

        9px;

    margin-top:

        5px;

    color:

        var(--white);

    background:

        var(--text);

    border:

        1px solid var(--text);

    border-radius:

        50px;

    font-size:

        13px;

    font-weight:

        650;

    transition:

        background 0.2s ease,

        color 0.2s ease,

        transform 0.2s ease;

}

.newsletter-btn:hover {

    color:

        var(--text);

    background:

        var(--white);

    transform:

        translateY(-1px);

}

/* ==========================================================

   31. TEXTE CONFIDENTIALITÉ

========================================================== */

.newsletter-policy {

    color:

        var(--text-light);

    font-size:

        10px;

    line-height:

        1.65;

}

.newsletter-policy a {

    color:

        var(--text);

    text-decoration:

        underline;

    text-underline-offset:

        2px;

}

#newsletterStatus {

    min-height:

        18px;

    color:

        var(--success);

    font-size:

        12px;

    font-weight:

        600;

    line-height:

        1.5;

}

/* ==========================================================

   32. FOOTER SECONDAIRE

========================================================== */

.footer-secondary {

    width: 100%;

    padding:

        54px

        var(--global-padding)

        48px;

    background:

        var(--background-soft);

    border-top:

        1px solid var(--border);

}

.footer-links {

    display: grid;

    grid-template-columns:

        repeat(

            4,

            minmax(

                0,

                1fr

            )

        );

    gap:

        50px;

}

/* ==========================================================

   33. COLONNES FOOTER

========================================================== */

.column

h4.footer-toggle {

    display: flex;

    align-items: center;

    margin-bottom:

        19px;

    color:

        var(--text);

    font-size:

        13px;

    font-weight:

        750;

    cursor:

        default;

}

.column ul {

    margin: 0;

    padding: 0;

}

.column ul li {

    margin-bottom:

        11px;

}

.column ul li a {

    display:

        inline-block;

    color:

        var(--text-light);

    font-size:

        12px;

    line-height:

        1.5;

    transition:

        color 0.2s ease,

        transform 0.2s ease;

}

.column ul li a:hover {

    color:

        var(--text);

    transform:

        translateX(3px);

}

/* ==========================================================

   34. RÉSEAUX SOCIAUX

========================================================== */

.social-icons {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top:

        16px;

}

.social-icons a {

    display: grid;

    width: 38px;

    height: 38px;

    place-items: center;

    color:

        var(--text);

    background:

        var(--white);

    border:

        1px solid var(--border);

    border-radius:

        50%;

    font-size:

        14px;

    transition:

        color 0.2s ease,

        background 0.2s ease,

        transform 0.2s ease;

}

.social-icons a:hover {

    color:

        var(--white);

    background:

        var(--text);

    transform:

        translateY(-2px);

}

/* ==========================================================

   35. FOOTER BOTTOM

========================================================== */

.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    gap: 20px;

    padding:

        20px

        var(--global-padding);

    background:

        var(--background-soft);

    border-top:

        1px solid var(--border);

}

.footer-bottom p {

    color:

        var(--text-light);

    font-size:

        11px;

    line-height:

        1.5;

}

.back-to-top {

    display:

        inline-flex;

    align-items:

        center;

    justify-content:

        center;

    min-height:

        40px;

    gap:

        8px;

    padding:

        0 17px;

    color:

        var(--white);

    background:

        var(--text);

    border:

        1px solid var(--text);

    border-radius:

        50px;

    font-size:

        10px;

    font-weight:

        700;

    letter-spacing:

        0.4px;

    text-transform:

        uppercase;

    transition:

        color 0.2s ease,

        background 0.2s ease,

        transform 0.2s ease;

}

.back-to-top:hover {

    color:

        var(--text);

    background:

        var(--white);

    transform:

        translateY(-1px);

}

/* ==========================================================

   36. WHATSAPP FLOTTANT

   Conservé.

========================================================== */

.floating-whatsapp {

    position: fixed;

    z-index: 3000;

    right: 20px;

    bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 52px;

    height: 52px;

    padding: 0;

    overflow:

        hidden;

    color:

        var(--white);

    background:

        var(--text);

    border-radius:

        50px;

    box-shadow:

        0 8px 25px

        rgba(

            0,

            0,

            0,

            0.18

        );

    font-size:

        21px;

    transition:

        padding 0.3s ease,

        background 0.2s ease,

        transform 0.2s ease;

}

.floating-whatsapp

.wa-label {

    max-width:

        0;

    opacity:

        0;

    overflow:

        hidden;

    color:

        var(--white);

    font-size:

        11px;

    font-weight:

        650;

    white-space:

        nowrap;

    transition:

        max-width 0.3s ease,

        opacity 0.2s ease,

        margin 0.3s ease;

}

.floating-whatsapp:hover {

    padding:

        0 18px;

    background:

        #222222;

    transform:

        translateY(-2px);

}

.floating-whatsapp:hover

.wa-label {

    max-width:

        180px;

    opacity:

        1;

    margin-left:

        9px;

}

/* ==========================================================

   37. TABLETTE

========================================================== */

@media (

    max-width: 1000px

) {

    :root {

        --global-padding:

            28px;

    }

    .navbar {

        height:

            68px;

    }

    .top-categories {

        justify-content:

            flex-start;

        gap:

            24px;

        padding-top:

            13px;

        padding-bottom:

            13px;

    }

    .footer-container {

        grid-template-columns:

            1fr 1fr;

        gap:

            50px;

    }

    .footer-links {

        grid-template-columns:

            repeat(

                2,

                1fr

            );

        gap:

            45px 35px;

    }

}

/* ==========================================================

   38. MOBILE

========================================================== */

@media (

    max-width: 700px

) {

    :root {

        --global-padding:

            16px;

    }

    /* TOP BAR */

    .promo-bar {

        height:

            35px;

    }

    .promo-track {

        gap:

            55px;

        padding-right:

            55px;

        animation-duration:

            28s;

    }

    .promo-track span {

        font-size:

            11.5px;

    }

    .promo-close {

        right:

            5px;

        width:

            25px;

        height:

            25px;

        font-size:

            11px;

    }

    /* NAVBAR */

    .navbar,

    .navbar.scrolled {

        height:

            62px;

        padding-right:

            11px;

        padding-left:

            11px;

    }

    .nav-left {

        gap:

            8px;

    }

    .nav-right {

        gap:

            0;

    }

    .logo {

        font-size:

            19px;

        letter-spacing:

            -0.8px;

    }

    .current-zandos-section {

        padding-left:

            8px;

        font-size:

            9px;

    }

    .menu-toggle,

    .nav-icon,

    .search-toggle {

        width:

            38px;

        height:

            38px;

    }

    .menu-toggle span {

        margin-left:

            7px;

    }

    .menu-toggle

    span:nth-child(1),

    .menu-toggle

    span:nth-child(3) {

        width:

            23px;

    }

    .nav-icon,

    .search-toggle {

        font-size:

            16px;

    }

    /* DROPDOWN DESKTOP */

    .profile-dropdown,

    .profile-wrapper::after {

        display:

            none;

    }

    /* RECHERCHE DESKTOP */

    .search-box-expand {

        display:

            none;

    }

    /*

       Le champ de recherche mobile est déjà affiché sous

       les catégories : on masque uniquement l'icône loupe

       présente dans la navbar sur les petits écrans.

    */

    .search-toggle {

        display:

            none;

    }

    /* FAVORIS :

       on garde l'icône navbar */

    .favorites-icon {

        display:

            grid;

    }

    /* RECHERCHE MOBILE */

    .mobile-tools {

        display:

            block;

    }

    /* CATÉGORIES */

    .top-categories {

        justify-content:

            flex-start;

        gap:

            21px;

        padding:

            12px 16px;

        border-top:

            0;

    }

    .top-categories a {

        font-size:

            12px;

    }

    .top-categories

    .highlight {

        font-size:

            10px;

    }

    /* MENU */

    .mobile-menu {

        width:

            min(

                390px,

                94vw

            );

        border-radius:

            0 16px 16px 0;

    }

    .mobile-menu-header {

        height:

            62px;

        padding:

            0 18px;

    }

    .close-menu {

        width:

            38px;

        height:

            38px;

    }

    .menu-content {

        min-height:

            calc(

                100dvh - 62px

            );

        padding:

            14px

            20px

            27px;

    }

    .mobile-auth-primary {

        margin-bottom:

            30px;

    }

    .mobile-auth-btn {

        min-height:

            49px;

        font-size:

            13px;

    }

    .menu-content > h2 {

        max-width:

            300px;

        margin-bottom:

            23px;

        font-size:

            22px;

        line-height:

            1.18;

        letter-spacing:

            -0.7px;

    }

    .menu__list a {

        min-height:

            56px;

        font-size:

            14px;

    }

    .mobile-menu-bottom {

        padding-top:

            36px;

    }

    /* FOOTER */

    .footer-container {

        display:

            flex;

        flex-direction:

            column;

        gap:

            35px;

        padding:

            53px

            18px

            45px;

    }

    .footer-left {

        max-width:

            100%;

    }

    .footer-title {

        max-width:

            430px;

        margin-bottom:

            13px;

        font-size:

            28px;

        letter-spacing:

            -1.2px;

    }

    .footer-desc {

        font-size:

            13px;

    }

    .newsletter-box {

        max-width:

            100%;

    }

    .newsletter-label {

        font-size:

            12px;

    }

    .newsletter-input

    input {

        height:

            49px;

        font-size:

            13px;

    }

    .newsletter-btn {

        min-height:

            49px;

    }

    .newsletter-policy {

        font-size:

            10px;

    }

    /* FOOTER ACCORDÉON */

    .footer-secondary {

        padding:

            8px

            18px

            20px;

    }

    .footer-links {

        display:

            flex;

        flex-direction:

            column;

        gap:

            0;

    }

    .column {

        border-bottom:

            1px solid

            var(--border);

    }

    .column

    h4.footer-toggle {

        position:

            relative;

        justify-content:

            space-between;

        width:

            100%;

        margin:

            0;

        padding:

            19px 2px;

        font-size:

            13px;

        cursor:

            pointer;

    }

    .footer-toggle::after {

        content:

            "\f078";

        margin-left:

            auto;

        font-family:

            "Font Awesome 6 Free";

        font-size:

            10px;

        font-weight:

            900;

        transition:

            transform 0.3s ease;

    }

    .footer-toggle.open::after {

        transform:

            rotate(180deg);

    }

    .column ul {

        max-height:

            0;

        opacity:

            0;

        overflow:

            hidden;

        transition:

            max-height 0.35s ease,

            opacity 0.25s ease,

            padding 0.35s ease;

    }

    .column ul.active {

        max-height:

            450px;

        opacity:

            1;

        padding:

            0 2px 18px;

    }

    .column ul li {

        margin-bottom:

            12px;

    }

    .column ul li a {

        font-size:

            12px;

    }

    .column

    .social-icons {

        display:

            none;

        margin-top:

            0;

        padding:

            0 2px 18px;

    }

    .footer-toggle.open

    ~ .social-icons {

        display:

            flex;

    }

    /* FOOTER BOTTOM */

    .footer-bottom {

        align-items:

            flex-start;

        flex-direction:

            column-reverse;

        gap:

            15px;

        padding:

            23px

            18px

            28px;

    }

    .footer-bottom p {

        font-size:

            10px;

    }

    .back-to-top {

        align-self:

            flex-end;

        font-size:

            9px;

    }

    /* WHATSAPP */

    .floating-whatsapp {

        right:

            14px;

        bottom:

            14px;

        min-width:

            48px;

        height:

            48px;

        font-size:

            19px;

    }

    .floating-whatsapp:hover {

        padding:

            0;

    }

    .floating-whatsapp:hover

    .wa-label {

        max-width:

            0;

        opacity:

            0;

        margin-left:

            0;

    }

}

/* ==========================================================

   39. PETIT MOBILE

========================================================== */

@media (

    max-width: 420px

) {

    .current-zandos-section {

        display:

            none;

    }

    .mobile-auth-primary {

        grid-template-columns:

            1fr 1fr;

        gap:

            8px;

    }

    .mobile-auth-btn {

        padding:

            0 8px;

        font-size:

            12px;

    }

    .menu-content {

        padding-right:

            17px;

        padding-left:

            17px;

    }

    .menu-content > h2 {

        font-size:

            21px;

    }

}

/* ==========================================================

   40. TRÈS PETIT MOBILE

========================================================== */

@media (

    max-width: 350px

) {

    .mobile-auth-primary {

        grid-template-columns:

            1fr;

    }

    .user-icon {

        display:

            none;

    }

}

/* ==========================================================

   41. ACCESSIBILITÉ

========================================================== */

button:focus-visible,

a:focus-visible,

input:focus-visible,

select:focus-visible,

textarea:focus-visible {

    outline:

        3px solid

        rgba(

            247,

            105,

            2,

            0.28

        );

    outline-offset:

        3px;

}

/* ==========================================================

   42. RÉDUCTION DES ANIMATIONS

========================================================== */

@media (

    prefers-reduced-motion:

        reduce

) {

    *,

    *::before,

    *::after {

        scroll-behavior:

            auto !important;

        animation-duration:

            0.01ms !important;

        animation-iteration-count:

            1 !important;

        transition-duration:

            0.01ms !important;

    }

}

/* ==========================================================

   ZANDOS — LIVE SEARCH

========================================================== */

/* ==========================================================

   DESKTOP CONTAINER

========================================================== */

#desktopSearchWrapper {

    position: relative;

}

/* ==========================================================

   PANEL

========================================================== */

.live-search-panel {

    position: absolute;

    z-index: 5000;

    top: calc(100% + 12px);

    right: 0;

    width: 390px;

    max-height: 520px;

    overflow: hidden;

    color: #111111;

    background: #ffffff;

    border: 1px solid #e5e5e2;

    border-radius: 15px;

    box-shadow:

        0 22px 65px

        rgba(

            0,

            0,

            0,

            0.14

        );

}

/* ==========================================================

   HEADER

========================================================== */

.live-search-header {

    display: flex;

    align-items: center;

    min-height: 43px;

    padding: 0 16px;

    color: #777777;

    background: #fafaf8;

    border-bottom: 1px solid #eeeeeb;

    font-size: 10px;

    font-weight: 750;

    letter-spacing: 0.8px;

    text-transform: uppercase;

}

/* ==========================================================

   LIST

========================================================== */

.live-search-list {

    max-height: 455px;

    overflow-y: auto;

    overscroll-behavior: contain;

}

/* ==========================================================

   RESULT

========================================================== */

.live-search-result {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 82px;

    gap: 13px;

    padding: 10px 13px;

    color: #111111;

    background: #ffffff;

    border-bottom: 1px solid #eeeeeb;

    transition:

        background 0.18s ease;

}

.live-search-result:last-child {

    border-bottom: 0;

}

.live-search-result:hover {

    background: #f7f7f5;

}

/* ==========================================================

   IMAGE

========================================================== */

.live-search-image {

    flex: 0 0 52px;

    width: 52px;

    height: 62px;

    overflow: hidden;

    background: #f3f3f1;

    border-radius: 8px;

}

.live-search-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

/* ==========================================================

   INFO

========================================================== */

.live-search-info {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.live-search-brand {

    color: #858585;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.5px;

    text-transform: uppercase;

}

.live-search-info strong {

    max-width: 285px;

    overflow: hidden;

    color: #111111;

    font-size: 12px;

    font-weight: 650;

    line-height: 1.4;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.live-search-info small {

    color: #111111;

    font-size: 11px;

    font-weight: 700;

}

/* ==========================================================

   LOADING

========================================================== */

.live-search-loading {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 95px;

    gap: 9px;

    color: #777777;

    font-size: 12px;

}

/* ==========================================================

   EMPTY

========================================================== */

.live-search-empty {

    display: flex;

    align-items: center;

    min-height: 100px;

    gap: 14px;

    padding: 18px;

}

.live-search-empty > i {

    display: grid;

    flex: 0 0 40px;

    width: 40px;

    height: 40px;

    place-items: center;

    color: #777777;

    background: #f3f3f1;

    border-radius: 50%;

    font-size: 13px;

}

.live-search-empty div {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.live-search-empty strong {

    color: #111111;

    font-size: 12px;

    font-weight: 700;

}

.live-search-empty span {

    color: #777777;

    font-size: 11px;

    line-height: 1.5;

}

/* ==========================================================

   MOBILE

========================================================== */

.mobile-search-container {

    position: relative;

    width: 100%;

}

.mobile-live-search-panel {

    top: calc(100% + 7px);

    right: 0;

    left: 0;

    width: 100%;

    max-height: 430px;

    border-radius: 12px;

}

@media (max-width: 700px) {

    .live-search-result {

        min-height: 75px;

        padding: 9px 11px;

    }

    .live-search-image {

        flex-basis: 47px;

        width: 47px;

        height: 56px;

    }

    .live-search-info strong {

        max-width: 230px;

    }

}

/* ==========================================================

   ZANDOS — FAVORIS + PANIER NAVBAR PREVIEW

========================================================== */

/* ==========================================================

   WRAPPER

========================================================== */

.nav-preview-wrapper {

    position: relative;

    display: flex;

    align-items: center;

}

/*

 * Petit pont invisible.

 * Évite que le dropdown se ferme

 * entre l'icône et le panneau.

 */

.nav-preview-wrapper::after {

    content: "";

    position: absolute;

    top: 100%;

    right: 0;

    width: 330px;

    height: 16px;

}

/* ==========================================================

   DROPDOWN

========================================================== */

.nav-preview-dropdown {

    position: absolute;

    z-index: 5200;

    top:

        calc(

            100% + 12px

        );

    right: 0;

    width: 330px;

    opacity: 0;

    visibility: hidden;

    overflow: hidden;

    color:

        var(--text);

    background:

        var(--white);

    border:

        1px solid

        var(--border);

    border-radius:

        16px;

    box-shadow:

        var(--shadow-dropdown);

    transform:

        translateY(7px);

    pointer-events:

        none;

    transition:

        opacity 0.2s ease,

        visibility 0.2s ease,

        transform 0.2s ease;

}

/* ==========================================================

   OUVERTURE

========================================================== */

.nav-preview-wrapper:hover

.nav-preview-dropdown,

.nav-preview-wrapper:focus-within

.nav-preview-dropdown {

    opacity: 1;

    visibility: visible;

    transform:

        translateY(0);

    pointer-events:

        auto;

}

/* ==========================================================

   HEADER

========================================================== */

.nav-preview-header {

    display: flex;

    align-items:

        center;

    justify-content:

        space-between;

    gap:

        20px;

    padding:

        16px;

    background:

        #FAFAF8;

    border-bottom:

        1px solid

        var(--border);

}

.nav-preview-header > div {

    min-width: 0;

}

.nav-preview-eyebrow {

    display: block;

    margin-bottom:

        4px;

    color:

        var(--text-muted);

    font-size:

        9px;

    font-weight:

        750;

    letter-spacing:

        0.8px;

    text-transform:

        uppercase;

}

.nav-preview-header strong {

    color:

        var(--text);

    font-size:

        13px;

    font-weight:

        750;

}

.nav-preview-number {

    display: grid;

    flex:

        0 0 30px;

    width: 30px;

    height: 30px;

    place-items:

        center;

    color:

        var(--text);

    background:

        var(--background-soft);

    border-radius:

        50%;

    font-size:

        11px;

    font-weight:

        750;

}

/* ==========================================================

   CONTENT

========================================================== */

.nav-preview-content {

    max-height:

        310px;

    overflow-y:

        auto;

    overscroll-behavior:

        contain;

}

/* ==========================================================

   PRODUIT

========================================================== */

.nav-preview-product {

    display: flex;

    align-items:

        center;

    width: 100%;

    min-height:

        77px;

    gap:

        12px;

    padding:

        10px 13px;

    color:

        var(--text);

    background:

        var(--white);

    border-bottom:

        1px solid

        var(--border);

    transition:

        background 0.18s ease;

}

.nav-preview-product:hover {

    background:

        var(--background-soft);

}

/* ==========================================================

   IMAGE

========================================================== */

.nav-preview-product-image {

    flex:

        0 0 47px;

    width: 47px;

    height: 57px;

    overflow:

        hidden;

    background:

        var(--background-soft);

    border-radius:

        8px;

}

.nav-preview-product-image img {

    width: 100%;

    height: 100%;

    object-fit:

        cover;

}

/* ==========================================================

   PRODUCT INFO

========================================================== */

.nav-preview-product-info {

    min-width: 0;

    display: flex;

    flex-direction:

        column;

    gap:

        5px;

}

.nav-preview-product-info strong {

    max-width:

        235px;

    overflow:

        hidden;

    color:

        var(--text);

    font-size:

        11px;

    font-weight:

        650;

    line-height:

        1.4;

    text-overflow:

        ellipsis;

    white-space:

        nowrap;

}

.nav-preview-product-info span {

    color:

        var(--text-light);

    font-size:

        10px;

    font-weight:

        600;

}

/* ==========================================================

   EMPTY

========================================================== */

.nav-preview-empty {

    display: flex;

    align-items:

        center;

    min-height:

        110px;

    gap:

        13px;

    padding:

        18px;

}

.nav-preview-empty > i {

    display: grid;

    flex:

        0 0 40px;

    width: 40px;

    height: 40px;

    place-items:

        center;

    color:

        var(--text-light);

    background:

        var(--background-soft);

    border-radius:

        50%;

    font-size:

        14px;

}

.nav-preview-empty div {

    display: flex;

    flex-direction:

        column;

    gap:

        4px;

}

.nav-preview-empty strong {

    color:

        var(--text);

    font-size:

        12px;

    font-weight:

        700;

}

.nav-preview-empty span {

    color:

        var(--text-light);

    font-size:

        10px;

    line-height:

        1.5;

}

/* ==========================================================

   TOTAL PANIER

========================================================== */

.nav-cart-preview-summary {

    display: flex;

    align-items:

        center;

    justify-content:

        space-between;

    gap:

        20px;

    padding:

        13px 15px;

    background:

        #FAFAF8;

    border-top:

        1px solid

        var(--border);

}

.nav-cart-preview-summary span {

    color:

        var(--text-light);

    font-size:

        11px;

}

.nav-cart-preview-summary strong {

    color:

        var(--text);

    font-size:

        13px;

    font-weight:

        800;

}

/* ==========================================================

   FOOTER LINK

========================================================== */

.nav-preview-footer-link {

    display: flex;

    align-items:

        center;

    justify-content:

        space-between;

    width: 100%;

    min-height: 48px;

    padding:

        0 15px;

    color:

        var(--white);

    background:

        var(--text);

    font-size:

        11px;

    font-weight:

        700;

    transition:

        background 0.2s ease;

}

.nav-preview-footer-link:hover {

    background:

        #292929;

}

/* ==========================================================

   MOBILE

   Aucun dropdown.

   Les icônes restent des liens simples.

========================================================== */

@media (

    max-width: 700px

) {

    .nav-preview-dropdown,

    .nav-preview-wrapper::after {

        display:

            none;

    }

}

/* ==========================================================
   ZANDOS — OVERRIDES 2026
   Top bar vert citron + footer sombre épuré
   Navbar/recherche/menu/panier/favoris conservés
========================================================== */

/* TOP BAR : rotation verticale, plus de défilement horizontal */
.promo-bar {
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    overflow: hidden;
    color: #111111;
    background: #c7ff00;
    border-bottom: 0;
    transition: height .3s ease, opacity .3s ease, transform .3s ease;
}

.promo-bar.hide {
    height: 0;
    opacity: 0;
    transform: translateY(-100%);
}

.promo-slider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.promo-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: none;
    gap: 0;
    padding: 0 50px;
    padding-right: 50px;
    animation: none;
    transform: none;
}

.promo-bar:hover .promo-track {
    animation-play-state: running;
}

.promo-track span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: calc(100% - 100px);
    flex: none;
    color: #111111;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 18px);
    animation: zandosPromoVertical 16s infinite;
}

.promo-track span:nth-child(n + 5) {
    display: none;
}

.promo-track span:nth-child(1) { animation-delay: 0s; }
.promo-track span:nth-child(2) { animation-delay: 4s; }
.promo-track span:nth-child(3) { animation-delay: 8s; }
.promo-track span:nth-child(4) { animation-delay: 12s; }

@keyframes zandosPromoVertical {
    0% {
        opacity: 0;
        transform: translate(-50%, 18px);
    }
    7% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    25% {
        opacity: 0;
        transform: translate(-50%, -18px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -18px);
    }
}

.promo-close {
    position: absolute;
    z-index: 5;
    top: 50%;
    right: 12px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: #111111;
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 12px;
    transform: translateY(-50%);
    transition: background .2s ease;
}

.promo-close:hover {
    color: #111111;
    background: rgba(0, 0, 0, .08);
}

/* FOOTER : le formulaire "Vous cherchez un produit ?" a été
   retiré du footer HTML et doit rester uniquement sur newsletter. */
.footer {
    width: 100%;
    color: #f5f5f5;
    background: #191919;
    border-top: 1px solid #343434;
}

.footer > .footer-container {
    display: none !important;
}

.footer-secondary {
    width: 100%;
    padding: 64px var(--global-padding) 58px;
    color: #f5f5f5;
    background: #191919;
    border: 0;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    margin: 0;
    gap: clamp(35px, 6vw, 90px);
}

.footer-links .column {
    min-width: 0;
}

.footer-links .column h4.footer-toggle {
    display: flex;
    align-items: center;
    margin: 0 0 21px;
    padding: 0;
    color: #f5f5f5;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.1px;
    cursor: default;
}

.footer-links .column h4.footer-toggle::after {
    display: none;
}

.footer-links .column ul {
    display: block;
    max-height: none;
    margin: 0;
    padding: 0;
    opacity: 1;
    overflow: visible;
}

.footer-links .column ul li {
    margin: 0 0 12px;
}

.footer-links .column ul li:last-child {
    margin-bottom: 0;
}

.footer-links .column ul li a {
    display: inline-block;
    padding: 0;
    color: #a6a6a6;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0;
    transition: color .2s ease;
}

.footer-links .column ul li a:hover {
    color: #ffffff;
}

.footer .social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 18px 0 0;
    padding: 0;
}

.footer .social-icons a {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    padding: 0;
    color: #f5f5f5;
    background: transparent;
    border: 1px solid #444444;
    border-radius: 50%;
    font-size: 13px;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.footer .social-icons a:hover {
    color: #191919;
    background: #ffffff;
    border-color: #ffffff;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 23px var(--global-padding) 25px;
    color: #898989;
    background: #191919;
    border-top: 1px solid #343434;
}

.footer-bottom p {
    margin: 0;
    color: #898989;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
}

.back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    color: #a6a6a6;
    background: transparent;
    border: 0;
    font-size: 10px;
    font-weight: 400;
}

.back-to-top:hover {
    color: #ffffff;
}

@media (max-width: 900px) {
    .promo-bar {
        height: 42px;
    }

    .promo-track {
        padding: 0 42px 0 14px;
    }

    .promo-track span {
        width: calc(100% - 70px);
        font-size: 10.5px;
        font-weight: 500;
        line-height: 1.25;
        white-space: normal;
    }

    .promo-close {
        right: 7px;
        width: 27px;
        height: 27px;
        font-size: 11px;
    }

    .footer-secondary {
        padding: 8px 18px 16px;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .footer-links .column {
        width: 100%;
        border-bottom: 1px solid #343434;
    }

    .footer-links .column h4.footer-toggle {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        padding: 20px 2px;
        color: #f2f2f2;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.3;
        letter-spacing: 0;
        cursor: pointer;
    }

    .footer-links .column h4.footer-toggle::after {
        content: "\f078";
        display: block;
        flex: 0 0 auto;
        margin-left: 20px;
        color: #a8a8a8;
        font-family: "Font Awesome 6 Free";
        font-size: 9px;
        font-weight: 900;
        transition: transform .3s ease;
    }

    .footer-links .column h4.footer-toggle.open::after {
        transform: rotate(180deg);
    }

    .footer-links .column ul {
        display: block;
        max-height: 0;
        margin: 0;
        padding: 0 2px;
        opacity: 0;
        overflow: hidden;
        transition: max-height .35s ease, opacity .25s ease, padding .35s ease;
    }

    .footer-links .column ul.active {
        max-height: 450px;
        padding: 0 2px 19px;
        opacity: 1;
    }

    .footer-links .column ul li {
        margin: 0 0 12px;
    }

    .footer-links .column ul li a {
        color: #9f9f9f;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.55;
        letter-spacing: 0;
    }

    .footer .column .social-icons {
        display: none;
        margin: 0;
        padding: 0 2px 20px;
    }

    .footer .footer-toggle.open ~ .social-icons {
        display: flex;
    }

    .footer .social-icons a {
        width: 35px;
        height: 35px;
        font-size: 12px;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column-reverse;
        gap: 16px;
        padding: 22px 18px 27px;
    }

    .footer-bottom p {
        font-size: 9px;
        font-weight: 400;
    }

    .back-to-top {
        align-self: flex-end;
        font-size: 9px;
        font-weight: 400;
    }
}

@media (prefers-reduced-motion: reduce) {
    .promo-track span {
        animation: none;
    }

    .promo-track span:first-child {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* ==========================================================
   ZANDOS — FOOTER SOMBRE + SUPPORT FLOTTANT
   COUCHE FINALE 2026
========================================================== */

.footer,
.footer-secondary,
.footer-bottom {
    background: #191919 !important;
    color: #f5f5f5 !important;
}

.footer .footer-container {
    display: none !important;
}

.footer {
    width: 100%;
    border-top: 1px solid #343434 !important;
}

.footer-secondary {
    width: 100%;
    padding: 64px var(--global-padding) 58px !important;
    background: #191919 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #343434;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(36px, 6vw, 90px);
    width: 100%;
}

.footer .column h4.footer-toggle {
    display: flex;
    align-items: center;
    margin: 0 0 20px;
    padding: 0;
    color: #fff !important;
    font-size: 13px;
    font-weight: 500 !important;
    line-height: 1.4;
    cursor: default;
}

.footer .column ul {
    margin: 0;
    padding: 0;
}

.footer .column ul li {
    margin: 0 0 11px;
}

.footer .column ul li a {
    display: inline-block;
    color: #a8a8a8 !important;
    font-size: 12px;
    font-weight: 400 !important;
    line-height: 1.55;
    transition: color .2s ease, transform .2s ease;
}

.footer .column ul li a:hover {
    color: #fff !important;
    transform: translateX(2px);
}

.footer .social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.footer .social-icons a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #f5f5f5 !important;
    background: transparent !important;
    border: 1px solid #454545 !important;
    border-radius: 50%;
    font-size: 14px;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.footer .social-icons a:hover {
    color: #191919 !important;
    background: #fff !important;
    border-color: #fff !important;
    transform: translateY(-2px);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
    padding: 20px var(--global-padding) !important;
    background: #191919 !important;
    border-top: 1px solid #343434 !important;
}

.footer-bottom p {
    margin: 0;
    color: #8f8f8f !important;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
}

.back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    gap: 8px;
    padding: 0 17px;
    color: #fff !important;
    background: transparent !important;
    border: 1px solid #4a4a4a !important;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.back-to-top:hover {
    color: #191919 !important;
    background: #fff !important;
    border-color: #fff !important;
    transform: translateY(-1px);
}

/* Ancien bouton WhatsApp */
.floating-whatsapp {
    display: none !important;
}

/* SUPPORT FLOTTANT */
.support-fab {
    position: fixed;
    z-index: 3200;
    right: 20px;
    bottom: 20px;
    margin: 0;
}

.support-fab summary {
    list-style: none;
}

.support-fab summary::-webkit-details-marker {
    display: none;
}

.support-fab-toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: #fff;
    background: #202020;
    border: 1px solid #454545;
    border-radius: 50%;
    box-shadow: 0 12px 34px rgba(0,0,0,.32);
    font-size: 19px;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.support-fab-toggle:hover {
    background: #292929;
    border-color: #626262;
    transform: translateY(-2px);
}

.support-fab[open] .support-fab-toggle {
    background: #fff;
    color: #191919;
    border-color: #fff;
}

.support-fab .support-open-icon,
.support-fab .support-close-icon {
    position: absolute;
    transition: opacity .18s ease, transform .18s ease;
}

.support-fab .support-close-icon {
    opacity: 0;
    transform: rotate(-45deg) scale(.7);
}

.support-fab[open] .support-open-icon {
    opacity: 0;
    transform: rotate(45deg) scale(.7);
}

.support-fab[open] .support-close-icon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.support-fab-actions {
    position: absolute;
    right: 0;
    bottom: 66px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-width: 210px;
}

.support-fab-action {
    display: flex;
    align-items: center;
    width: 210px;
    min-height: 50px;
    gap: 12px;
    padding: 8px 14px 8px 8px;
    color: #fff;
    background: #232323;
    border: 1px solid #414141;
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(0,0,0,.28);
    opacity: 0;
    transform: translateY(10px) scale(.96);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.support-fab[open] .support-fab-action {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.support-fab[open] .support-fab-action:nth-child(1) { transition-delay: .03s; }
.support-fab[open] .support-fab-action:nth-child(2) { transition-delay: .08s; }

.support-fab-action:hover {
    color: #191919;
    background: #fff;
    border-color: #fff;
}

.support-fab-action-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: inherit;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    font-size: 15px;
}

.support-fab-action-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.support-fab-action-text strong {
    color: inherit;
    font-size: 12px;
    font-weight: 600;
}

.support-fab-action-text span {
    color: #a8a8a8;
    font-size: 10px;
    font-weight: 400;
}

.support-fab-action:hover .support-fab-action-text span {
    color: #555;
}

@media (max-width: 900px) {
    .footer-secondary {
        padding: 8px 18px 18px !important;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .footer .column {
        border-bottom: 1px solid #343434;
    }

    .footer .column:last-child {
        border-bottom: 0;
    }

    .footer .column h4.footer-toggle {
        position: relative;
        justify-content: space-between;
        width: 100%;
        min-height: 58px;
        margin: 0;
        padding: 0 2px;
        font-size: 13px;
        font-weight: 400 !important;
        cursor: pointer;
    }

    .footer .column h4.footer-toggle::after {
        content: "\f078";
        font-family: "Font Awesome 6 Free";
        font-size: 10px;
        font-weight: 900;
        color: #8f8f8f;
        transition: transform .22s ease;
    }

    .footer .column h4.footer-toggle.open::after {
        transform: rotate(180deg);
    }

    .footer .column ul {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        padding: 0;
        transition: max-height .3s ease, opacity .2s ease, padding .3s ease;
    }

    .footer .column ul.active {
        max-height: 480px;
        opacity: 1;
        padding: 0 0 17px;
    }

    .footer .column ul li a {
        font-size: 12px;
        font-weight: 400 !important;
    }

    .footer .social-icons {
        display: none;
        margin: 0 0 18px;
    }

    .footer .footer-toggle.open ~ .social-icons {
        display: flex;
    }

    .footer-bottom {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px !important;
    }

    .footer-bottom p {
        max-width: calc(100% - 54px);
        font-size: 10px;
    }

    .back-to-top {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
    }

    .back-to-top i {
        font-size: 12px;
    }

    .support-fab {
        right: 16px;
        bottom: 16px;
    }

    .support-fab-toggle {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .support-fab-actions {
        right: 0;
        bottom: 61px;
        min-width: 50px;
        gap: 9px;
    }

    .support-fab-action {
        justify-content: center;
        width: 50px;
        min-width: 50px;
        height: 50px;
        min-height: 50px;
        padding: 0;
        border-radius: 50%;
    }

    .support-fab-action-icon {
        width: auto;
        height: auto;
        border: 0;
        background: transparent;
        font-size: 17px;
    }

    .support-fab-action-text {
        display: none;
    }
}

/* ==========================================================
   ZANDOS — NAVBAR DARK UNIFIÉE 2026
   Couche finale : navbar / recherche / catégories / menu
========================================================== */

:root {
    --z-dark: #191919;
    --z-nav: #242424;
    --z-surface: #2b2b2b;
    --z-line: #3a3a3a;
    --z-white: #f7f7f7;
    --z-muted: #9d9d9d;
    --z-lime: #c7ff00;
}

/* NAVBAR */
.navbar,
.navbar.scrolled {
    background: #242424 !important;
    border-bottom: 1px solid #343434 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.navbar .logo,
.navbar .logo-text {
    color: #fff !important;
    font-weight: 750 !important;
    letter-spacing: -.45px !important;
}

.current-zandos-section {
    color: #9b9b9b !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: .1px !important;
}

.menu-toggle,
.search-toggle,
.navbar .nav-icon,
.account-nav-avatar {
    color: #f7f7f7 !important;
    background: transparent !important;
    border-color: transparent !important;
}

.menu-toggle span { background: #fff !important; }

.search-toggle,
.navbar .nav-icon {
    border-radius: 50% !important;
    transition: background .2s ease, color .2s ease, transform .2s ease !important;
}

.search-toggle:hover,
.navbar .nav-icon:hover {
    color: #fff !important;
    background: #303030 !important;
    transform: translateY(-1px);
}

/* RECHERCHE DESKTOP : reste fermée jusqu'au clic JS */
.search-box-expand {
    background: #191919 !important;
    border-color: #565656 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

.search-input {
    color: #fff !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}
.search-input::placeholder { color: #777 !important; opacity: 1; }

.live-search-panel {
    color: #fff !important;
    background: #202020 !important;
    border: 1px solid #3b3b3b !important;
    box-shadow: 0 20px 55px rgba(0,0,0,.38) !important;
}
.live-search-header { color: #999 !important; border-bottom-color: #363636 !important; }
.live-search-item { color: #eee !important; border-bottom-color: #343434 !important; }
.live-search-item:hover { background: #292929 !important; }

/* CATÉGORIES */
.top-categories {
    background: #191919 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #343434 !important;
}
.top-categories a {
    color: #d7d7d7 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}
.top-categories a:hover { color: #fff !important; }
.top-categories a:not(.highlight)::after,
.top-categories a::after { background: #fff !important; }
.top-categories .highlight { color: #fff !important; font-weight: 550 !important; }

/* DROPDOWNS COMPTE / FAVORIS / PANIER */
.profile-dropdown,
.nav-preview-dropdown {
    color: #f4f4f4 !important;
    background: #202020 !important;
    border: 1px solid #3b3b3b !important;
    box-shadow: 0 20px 55px rgba(0,0,0,.4) !important;
}
.profile-dropdown-header,
.nav-preview-header { border-bottom-color: #363636 !important; }
.profile-dropdown-header strong,
.nav-preview-header strong,
.nav-preview-empty strong { color: #fff !important; }
.profile-dropdown-header p,
.nav-preview-eyebrow,
.nav-preview-empty span { color: #929292 !important; }
.profile-menu-group a,
.profile-dropdown-logout,
.nav-preview-footer-link {
    color: #e5e5e5 !important;
    background: transparent !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
}
.profile-menu-group a:hover,
.profile-dropdown-logout:hover,
.nav-preview-footer-link:hover { color: #fff !important; background: #2b2b2b !important; }
.nav-preview-footer-link,
.nav-cart-preview-summary { border-top-color: #363636 !important; }
.nav-cart-preview-summary { color: #fff !important; }

/* MOBILE SEARCH */
.mobile-tools {
    background: #242424 !important;
    border-bottom: 1px solid #343434 !important;
}
.mobile-search-wrapper {
    background: #191919 !important;
    border: 1px solid #5b5b5b !important;
    border-radius: 999px !important;
}
.mobile-search-wrapper i { color: #aaa !important; }
.mobile-search {
    color: #fff !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}
.mobile-search::placeholder { color: #777 !important; }
.mobile-live-search-panel { background: #202020 !important; }

/* OVERLAY + HAMBURGER */
.mobile-menu-overlay {
    background: rgba(0,0,0,.72) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.mobile-menu {
    color: #fff !important;
    background: #191919 !important;
    border-right: 1px solid #343434 !important;
    box-shadow: 18px 0 60px rgba(0,0,0,.42) !important;
    transition: transform .32s cubic-bezier(.22,1,.36,1) !important;
}
.mobile-menu-header {
    background: #242424 !important;
    border-bottom: 1px solid #343434 !important;
}
.close-menu { background: transparent !important; }
.close-menu span { background: #fff !important; }
.menu-content { color: #fff !important; background: #191919 !important; }
#dynamicMenuTitle,
.menu-content > h2 {
    color: #fff !important;
    font-size: clamp(21px,5vw,28px) !important;
    font-weight: 400 !important;
    line-height: 1.18 !important;
    letter-spacing: -.45px !important;
}
.menu__list { border-top: 1px solid #343434 !important; }
.menu__list li { border-bottom: 1px solid #343434 !important; }
.menu__list a {
    color: #f3f3f3 !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    transition: background .2s ease, padding .2s ease !important;
}
.menu__list a:hover { background: #242424 !important; }
.mobile-menu-bottom { border-top-color: #343434 !important; }
.mobile-help-link,
.mobile-client-logout { color: #b8b8b8 !important; font-size: 11.5px !important; }
.mobile-help-link:hover,
.mobile-client-logout:hover { color: #fff !important; }

/* AUTH MOBILE */
.mobile-auth-btn {
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    transition: transform .2s ease, background .2s ease !important;
}
.mobile-auth-btn-primary {
    color: #191919 !important;
    background: #fff !important;
    border-color: #fff !important;
}
.mobile-auth-btn-secondary {
    color: #fff !important;
    background: transparent !important;
    border-color: #555 !important;
}
.mobile-auth-btn:hover { transform: translateY(-1px); }

/* ANIMATIONS */
.search-box-expand,
.live-search-panel,
.profile-dropdown,
.nav-preview-dropdown {
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease, width .28s cubic-bezier(.2,.8,.2,1) !important;
}

@media (max-width: 900px) {
    .navbar,
    .navbar.scrolled { background: #242424 !important; }
    .navbar .logo,
    .navbar .logo-text { color: #fff !important; font-size: 18px !important; }
    .current-zandos-section { color: #929292 !important; font-size: 9px !important; }
    .top-categories { justify-content: flex-start !important; background: #191919 !important; }
    .top-categories a { font-size: 10.5px !important; }
    .mobile-menu { border-radius: 0 !important; }
}

@media (max-width: 480px) {
    #dynamicMenuTitle,
    .menu-content > h2 { font-size: 23px !important; }
    .menu__list a { font-size: 13px !important; }
}

/* ==========================================================
   ZANDOS — NAVBAR / SEARCH FINAL HARMONY 2026
   Desktop + mobile
========================================================== */
.promo-bar{height:42px!important;color:#111!important;background:#c7ff00!important;border-bottom:1px solid rgba(0,0,0,.12)!important}.promo-slider{position:relative!important;height:100%!important;overflow:hidden!important}.promo-track{position:relative!important;display:block!important;width:100%!important;height:100%!important;padding:0!important;animation:none!important}.promo-track span{position:absolute!important;left:50%!important;top:50%!important;width:min(78vw,760px)!important;color:#111!important;font-size:12px!important;font-weight:500!important;letter-spacing:.01em!important;text-align:center!important;opacity:0;white-space:nowrap!important;transform:translate(-50%,-18px);animation:zandosPromoVertical 16s infinite}.promo-track span:nth-child(1){animation-delay:0s}.promo-track span:nth-child(2){animation-delay:4s}.promo-track span:nth-child(3){animation-delay:8s}.promo-track span:nth-child(4){animation-delay:12s}.promo-track span:nth-child(n+5){display:none!important}.promo-close{color:#111!important;background:transparent!important;font-size:12px!important}@keyframes zandosPromoVertical{0%{opacity:0;transform:translate(-50%,-16px)}6%,20%{opacity:1;transform:translate(-50%,-50%)}25%,100%{opacity:0;transform:translate(-50%,10px)}}
.z-nav-svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.navbar .nav-icon,.navbar .search-toggle{width:40px!important;height:40px!important;font-size:17px!important}#favoritesNavLink,#cartNavLink{color:#f7f7f7!important}#favoritesNavLink:hover,#cartNavLink:hover{background:#303030!important}.search-box-icon{display:none!important}.search-wrapper.active .search-toggle{background:#191919!important}.search-wrapper.active .search-input{width:230px!important;padding:0 16px!important}.search-box-expand{position:relative!important;overflow:hidden!important}.search-input:focus{color:#fff!important;background:#191919!important;border-color:#606060!important}.profile-dropdown,.nav-preview-dropdown,.live-search-panel{border-radius:16px!important;overflow:hidden!important}.live-search-result{border-bottom:1px solid #343434!important;background:#202020!important;color:#f5f5f5!important}.live-search-result:hover{background:#292929!important}.live-search-brand{color:#8e8e8e!important}.live-search-info strong,.live-search-price{color:#fff!important}
@media(max-width:700px){.promo-bar{height:40px!important}.promo-track span{width:76vw!important;font-size:11px!important}.navbar,.navbar.scrolled{height:64px!important;padding:0 16px!important}.navbar .nav-left{gap:8px!important}.navbar .nav-right{gap:2px!important}.navbar .logo,.navbar .logo-text{font-size:20px!important;letter-spacing:-.5px!important}.current-zandos-section{display:none!important}.navbar .nav-icon,.navbar .search-toggle{width:38px!important;height:38px!important}#favoritesPreviewWrapper{display:none!important}.top-categories{display:none!important}.mobile-tools{display:block!important;padding:0!important;background:#242424!important;border-bottom:1px solid #343434!important}.mobile-search-container{position:relative!important;width:100%!important;padding:22px 18px 0!important}.mobile-search-wrapper{width:100%!important;height:54px!important;padding:0 18px!important;gap:13px!important;background:#191919!important;border:1px solid #6a6a6a!important;border-radius:999px!important;transition:border-color .2s ease,box-shadow .2s ease!important}.mobile-search-container:focus-within .mobile-search-wrapper{border-color:#9b9b9b!important;box-shadow:0 0 0 1px rgba(255,255,255,.08)!important}.mobile-search-wrapper i{font-size:19px!important;color:#b9b9b9!important}.mobile-search{height:52px!important;font-size:14px!important;color:#fff!important}.mobile-search::placeholder{color:#777!important}.mobile-search-discovery{display:none;margin:0 -18px;padding:30px 18px 26px;color:#fff;background:#191919}.mobile-search-container:focus-within .mobile-search-discovery{display:block;animation:zandosDiscoveryIn .24s ease both}.mobile-search-container:has(.mobile-live-search-panel:not([hidden])) .mobile-search-discovery{display:none!important}.mobile-search-discovery h2{margin:0 0 24px;font-size:27px;line-height:1.12;font-weight:400;letter-spacing:-.7px;text-align:center}.mobile-audience-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:22px;padding:3px;background:#252525;border-radius:999px}.mobile-audience-tabs a{display:flex;align-items:center;justify-content:center;min-height:42px;padding:0 8px;border-radius:999px;color:#f3f3f3;font-size:13px;font-weight:500}.mobile-audience-tabs a.active{color:#111;background:#c7ff00}.mobile-discovery-list{border-top:1px solid #383838}.mobile-discovery-list a{display:grid;grid-template-columns:34px 1fr 18px;align-items:center;min-height:66px;gap:13px;color:#f5f5f5;border-bottom:1px solid #383838;font-size:16px;font-weight:400}.mobile-discovery-icon{display:grid;place-items:center;width:30px;height:30px;color:#fff;font-size:17px}.mobile-discovery-list>a>i:last-child{color:#8f8f8f;font-size:13px}@keyframes zandosDiscoveryIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.mobile-live-search-panel{position:relative!important;inset:auto!important;width:calc(100% + 36px)!important;margin:18px -18px 0!important;max-height:62vh!important;border:0!important;border-top:1px solid #343434!important;border-radius:0!important;box-shadow:none!important;overflow:auto!important}.mobile-live-search-panel .live-search-header{background:#191919!important}.mobile-menu{width:min(92vw,390px)!important;background:#191919!important}.mobile-menu-header{min-height:72px!important;padding:0 20px!important}.mobile-menu-logo{font-size:20px!important;font-weight:800!important;letter-spacing:-.5px!important}.mobile-menu-section{color:#8f8f8f!important;font-size:10px!important}.menu-content{padding:24px 20px 28px!important}.mobile-menu-intro{margin:10px 0 24px!important}.mobile-menu-eyebrow{color:#c7ff00!important;font-size:10px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.08em}#dynamicMenuTitle{margin-top:8px!important;font-size:25px!important}.menu__list li{border-bottom:1px solid #383838!important}.menu__list a{min-height:62px!important;padding:0 2px!important;font-size:14px!important}}
@media(min-width:701px){.mobile-search-discovery{display:none!important}}

/* ==========================================================
   ZANDOS — NAVBAR MASTER FINAL 2026
   Mobile + Desktop
   Noir / blanc / gris uniquement
   HTML et logique JS inchangés
========================================================== */

/* ----------------------------------------------------------
   TOP PROMOTION
---------------------------------------------------------- */

.promo-bar {
    height: 38px !important;

    color: #ffffff !important;
    background: #111111 !important;

    border-bottom: 1px solid #303030 !important;
}

.promo-track span {
    color: #ffffff !important;

    font-size: 11px !important;
    font-weight: 500 !important;

    letter-spacing: .01em !important;
}

.promo-close {
    color: #ffffff !important;
    background: transparent !important;
}

.promo-close:hover {
    color: #ffffff !important;
    background: #292929 !important;
}


/* ----------------------------------------------------------
   NAVBAR — BASE
---------------------------------------------------------- */

.navbar,
.navbar.scrolled {
    height: 66px !important;

    padding-left: clamp(18px, 3vw, 48px) !important;
    padding-right: clamp(18px, 3vw, 48px) !important;

    background: #191919 !important;

    border-bottom: 1px solid #303030 !important;

    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.navbar .nav-left,
.navbar .nav-right {
    display: flex !important;
    align-items: center !important;
}

.navbar .nav-left {
    min-width: 0 !important;
    gap: 12px !important;
}

.navbar .nav-right {
    flex: 0 0 auto !important;
    gap: 2px !important;
}


/* ----------------------------------------------------------
   HAMBURGER
---------------------------------------------------------- */

.navbar .menu-toggle {
    display: flex !important;

    width: 40px !important;
    height: 40px !important;

    flex: 0 0 40px !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
}

.navbar .menu-toggle:hover {
    background: #262626 !important;
}

.navbar .menu-toggle span {
    height: 1.5px !important;
    background: #ffffff !important;
}


/* ----------------------------------------------------------
   ZANDOS
---------------------------------------------------------- */

.navbar .logo,
.navbar .logo-text {
    color: #ffffff !important;

    font-size: 21px !important;
    font-weight: 750 !important;
    line-height: 1 !important;

    letter-spacing: -.55px !important;

    white-space: nowrap !important;
}

.navbar .current-zandos-section {
    margin-left: 0 !important;

    color: #858585 !important;

    font-size: 10px !important;
    font-weight: 400 !important;

    letter-spacing: 0 !important;
}


/* ----------------------------------------------------------
   ACTIONS
---------------------------------------------------------- */

.navbar .search-toggle,
.navbar .nav-icon,
.navbar .account-nav-avatar {
    display: grid !important;
    place-items: center !important;

    width: 40px !important;
    height: 40px !important;

    padding: 0 !important;

    color: #ffffff !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;
}

.navbar .search-toggle:hover,
.navbar .nav-icon:hover {
    color: #ffffff !important;
    background: #292929 !important;

    transform: none !important;
}

.z-nav-svg {
    width: 21px !important;
    height: 21px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


/* ----------------------------------------------------------
   COMPTEURS
---------------------------------------------------------- */

.nav-counter,
#cartCount {
    background: #ffffff !important;
    color: #111111 !important;

    border: 2px solid #191919 !important;

    font-weight: 700 !important;
}


/* ----------------------------------------------------------
   RECHERCHE DESKTOP
---------------------------------------------------------- */

.search-wrapper {
    height: 40px !important;
}

.search-wrapper.active {
    background: transparent !important;
}

.search-wrapper.active .search-toggle {
    background: transparent !important;
}

.search-box-expand {
    height: 40px !important;

    background: #191919 !important;

    border: 1px solid #4a4a4a !important;
    border-radius: 999px !important;

    overflow: hidden !important;
}

.search-wrapper.active .search-input {
    width: 240px !important;

    padding: 0 16px !important;

    color: #ffffff !important;
    background: transparent !important;

    font-size: 12px !important;
}

.search-input::placeholder {
    color: #777777 !important;
}


/* ----------------------------------------------------------
   CATÉGORIES
---------------------------------------------------------- */

.top-categories {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 46px !important;

    background: #191919 !important;

    border-top: 0 !important;
    border-bottom: 1px solid #303030 !important;

    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
}

.top-categories::-webkit-scrollbar {
    display: none !important;
}

.top-categories a {
    position: relative !important;

    display: flex !important;
    flex: 0 0 auto !important;

    align-items: center !important;

    min-height: 46px !important;

    padding: 0 !important;

    color: #cfcfcf !important;

    font-size: 11px !important;
    font-weight: 500 !important;

    white-space: nowrap !important;
}

.top-categories a:hover,
.top-categories .highlight {
    color: #ffffff !important;
}

.top-categories .highlight {
    font-weight: 600 !important;
}

.top-categories a::after {
    bottom: 0 !important;

    height: 1px !important;

    background: #ffffff !important;
}


/* ----------------------------------------------------------
   DROPDOWNS DESKTOP
---------------------------------------------------------- */

.profile-dropdown,
.nav-preview-dropdown,
.live-search-panel {
    color: #ffffff !important;
    background: #191919 !important;

    border: 1px solid #353535 !important;
    border-radius: 12px !important;

    box-shadow: 0 18px 45px rgba(0, 0, 0, .38) !important;

    overflow: hidden !important;
}

.profile-dropdown-header,
.nav-preview-header {
    border-bottom-color: #333333 !important;
}

.profile-menu-group a,
.profile-dropdown-logout,
.nav-preview-footer-link {
    color: #e8e8e8 !important;
    background: transparent !important;
}

.profile-menu-group a:hover,
.profile-dropdown-logout:hover,
.nav-preview-footer-link:hover {
    color: #ffffff !important;
    background: #252525 !important;
}

.nav-preview-footer-link,
.nav-cart-preview-summary {
    border-top-color: #333333 !important;
}


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 701px) {

    .top-categories {
        justify-content: center !important;

        gap: clamp(22px, 2.4vw, 42px) !important;

        padding: 0 clamp(24px, 3vw, 52px) !important;
    }

    .mobile-search-discovery {
        display: none !important;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .promo-bar {
        height: 36px !important;
    }

    .promo-track span {
        width: 78vw !important;

        font-size: 10px !important;
        font-weight: 500 !important;

        white-space: nowrap !important;
    }


    /* Barre principale */

    .navbar,
    .navbar.scrolled {
        height: 60px !important;

        padding: 0 12px !important;

        background: #191919 !important;
    }

    .navbar .nav-left {
        gap: 7px !important;
    }

    .navbar .nav-right {
        gap: 0 !important;
    }


    /* Hamburger */

    .navbar .menu-toggle {
        width: 36px !important;
        height: 36px !important;

        flex-basis: 36px !important;
    }


    /* Logo */

    .navbar .logo,
    .navbar .logo-text {
        font-size: 18px !important;
        letter-spacing: -.4px !important;
    }

    .current-zandos-section {
        display: none !important;
    }


    /* Icônes */

    .navbar .search-toggle,
    .navbar .nav-icon,
    .navbar .account-nav-avatar {
        width: 35px !important;
        height: 35px !important;
    }

    .navbar .search-toggle {
        display: grid !important;
    }

    .navbar .z-nav-svg {
        width: 20px !important;
        height: 20px !important;
    }

    #favoritesPreviewWrapper {
        display: none !important;
    }


    /* Catégories */

    .top-categories {
        justify-content: flex-start !important;

        min-height: 42px !important;

        gap: 23px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 0 16px !important;
    }

    .top-categories a {
        min-height: 42px !important;

        font-size: 11px !important;
    }


    /* Recherche mobile */

    .mobile-tools {
        display: block !important;

        padding: 0 !important;

        background: #191919 !important;

        border-bottom: 1px solid #303030 !important;
    }

    .mobile-search-container {
        position: relative !important;

        width: 100% !important;

        padding: 18px 16px 0 !important;
    }

    .mobile-search-wrapper {
        width: 100% !important;
        height: 52px !important;

        gap: 12px !important;

        padding: 0 17px !important;

        background: #111111 !important;

        border: 1px solid #505050 !important;
        border-radius: 999px !important;

        box-shadow: none !important;
    }

    .mobile-search-container:focus-within .mobile-search-wrapper {
        border-color: #8a8a8a !important;
        box-shadow: none !important;
    }

    .mobile-search-wrapper i {
        color: #bdbdbd !important;
        font-size: 18px !important;
    }

    .mobile-search {
        height: 50px !important;

        color: #ffffff !important;

        font-size: 14px !important;
    }

    .mobile-search::placeholder {
        color: #777777 !important;
    }


    /* Découverte recherche */

    .mobile-search-discovery {
        margin: 0 -16px !important;

        padding: 28px 16px 26px !important;

        color: #ffffff !important;
        background: #191919 !important;
    }

    .mobile-search-discovery h2 {
        color: #ffffff !important;
    }

    .mobile-audience-tabs {
        background: #252525 !important;
    }

    .mobile-audience-tabs a {
        color: #e9e9e9 !important;
    }

    .mobile-audience-tabs a.active {
        color: #111111 !important;
        background: #ffffff !important;
    }

    .mobile-discovery-list {
        border-top-color: #343434 !important;
    }

    .mobile-discovery-list a {
        color: #ffffff !important;

        border-bottom-color: #343434 !important;
    }


    /* Résultats */

    .mobile-live-search-panel {
        width: calc(100% + 32px) !important;

        margin: 18px -16px 0 !important;

        background: #191919 !important;

        border: 0 !important;
        border-top: 1px solid #303030 !important;
        border-radius: 0 !important;

        box-shadow: none !important;
    }


    /* Menu hamburger */

    .mobile-menu {
        width: min(92vw, 390px) !important;

        color: #ffffff !important;
        background: #191919 !important;
    }

    .mobile-menu-header {
        min-height: 68px !important;

        padding: 0 20px !important;

        border-bottom-color: #333333 !important;
    }

    .mobile-menu-logo {
        color: #ffffff !important;

        font-size: 19px !important;
        font-weight: 750 !important;

        letter-spacing: -.45px !important;
    }

    .mobile-menu-section,
    .mobile-menu-eyebrow {
        color: #8d8d8d !important;
    }

    #dynamicMenuTitle {
        color: #ffffff !important;

        font-size: 24px !important;
        font-weight: 450 !important;
    }

    .menu__list li {
        border-bottom-color: #343434 !important;
    }

    .menu__list a {
        min-height: 62px !important;

        color: #ffffff !important;

        font-size: 14px !important;
    }
}

/* ZANDOS — NAVBAR PRECISION FIX 2026 */

/* Compteurs Favoris / Panier :
   noir, bord blanc fin, chiffre blanc */
.nav-counter,
#favoritesCount,
#cartCount {
    z-index: 4 !important;

    min-width: 16px !important;
    height: 16px !important;

    padding: 0 4px !important;

    color: #ffffff !important;
    background: #111111 !important;

    border: 1px solid #ffffff !important;
    border-radius: 999px !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 14px !important;

    text-align: center !important;
}


/* ==========================================================
   DESKTOP — FAVORIS / PANIER STABLES
========================================================== */

@media (min-width: 701px) {

    #favoritesPreviewWrapper,
    #cartPreviewWrapper {
        position: relative !important;

        flex: 0 0 40px !important;

        width: 40px !important;
        height: 40px !important;

        overflow: visible !important;
    }

    #favoritesNavLink,
    #cartNavLink {
        position: relative !important;

        display: grid !important;
        place-items: center !important;

        width: 40px !important;
        height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;
        background: transparent !important;

        border: 0 !important;
        border-radius: 50% !important;
    }

    #favoritesNavLink:hover,
    #cartNavLink:hover {
        background: #292929 !important;
    }

    #favoritesPreviewWrapper .nav-preview-dropdown,
    #cartPreviewWrapper .nav-preview-dropdown {
        top: calc(100% + 10px) !important;

        margin-top: 0 !important;
    }
}


/* ==========================================================
   MOBILE — CATÉGORIES
========================================================== */

@media (max-width: 700px) {

    .top-categories {
        min-height: 46px !important;

        gap: 8px !important;

        padding: 6px 14px !important;

        background: #191919 !important;

        scroll-snap-type: x proximity !important;
    }

    .top-categories a {
        min-height: 34px !important;

        padding: 0 15px !important;

        color: #bdbdbd !important;
        background: transparent !important;

        border: 1px solid #383838 !important;
        border-radius: 999px !important;

        font-size: 10.5px !important;
        font-weight: 500 !important;

        scroll-snap-align: start !important;
    }

    .top-categories a:hover {
        color: #ffffff !important;

        border-color: #686868 !important;
    }

    .top-categories .highlight {
        color: #111111 !important;
        background: #ffffff !important;

        border-color: #ffffff !important;

        font-weight: 650 !important;
    }

    .top-categories a::after {
        display: none !important;
    }
}

/* ZANDOS — NAVBAR LAST POLISH 2026 */


/* ==========================================================
   LIVE SEARCH — DESIGN FINAL
   Desktop + Mobile
========================================================== */

/* Panneau complet */

#desktopLiveSearchResults,
#mobileLiveSearchResults,
.live-search-panel {
    color: #ffffff !important;
    background: #191919 !important;

    border-color: #353535 !important;
}


/* Header "Résultats" */

#desktopLiveSearchResults .live-search-header,
#mobileLiveSearchResults .live-search-header,
.live-search-header {
    color: #909090 !important;
    background: #191919 !important;

    border-bottom: 1px solid #343434 !important;
}


/* Liste */

#desktopLiveSearchList,
#mobileLiveSearchList,
.live-search-list {
    color: #ffffff !important;
    background: #191919 !important;
}


/* Produit */

#desktopLiveSearchList > a.live-search-result,
#mobileLiveSearchList > a.live-search-result,
a.live-search-result {
    color: #ffffff !important;
    background: #191919 !important;

    border-bottom: 1px solid #343434 !important;
}


/* Hover produit */

#desktopLiveSearchList > a.live-search-result:hover,
#mobileLiveSearchList > a.live-search-result:hover,
a.live-search-result:hover {
    color: #ffffff !important;
    background: #252525 !important;
}


/* Bloc image */

.live-search-result .live-search-image {
    background: #242424 !important;
}


/* L'image produit elle-même */

.live-search-result .live-search-image img {
    background: transparent !important;
}


/* Bloc texte */

.live-search-result .live-search-info {
    color: #ffffff !important;
    background: transparent !important;
}


/* Marque */

.live-search-result .live-search-brand {
    color: #8f8f8f !important;
    background: transparent !important;
}


/* Nom */

.live-search-result .live-search-info strong {
    color: #ffffff !important;
    background: transparent !important;
}


/* Prix */

.live-search-result .live-search-price,
.live-search-result .live-search-info small {
    color: #ffffff !important;
    background: transparent !important;
}


/* Flèche */

.live-search-result .live-search-arrow {
    color: #777777 !important;
    background: transparent !important;
}


/* Loading / aucun résultat */

.live-search-loading,
.live-search-empty,
.live-search-empty div {
    color: #929292 !important;
    background: #191919 !important;
}

.live-search-empty > i {
    color: #ffffff !important;
    background: #292929 !important;
}

.live-search-empty strong {
    color: #ffffff !important;
}

.live-search-empty span {
    color: #929292 !important;
}


/* ==========================================================
   DESKTOP SEARCH
========================================================== */

@media (min-width: 701px) {

    #desktopSearchWrapper {
        position: relative !important;
    }

    #searchBoxExpand {
        background: #191919 !important;

        border: 1px solid #505050 !important;
        border-radius: 999px !important;

        box-shadow: none !important;
    }

    #desktopSearchInput {
        color: #ffffff !important;
        background: transparent !important;
    }

    #desktopSearchInput::placeholder {
        color: #777777 !important;
    }


    /* Dropdown directement sous la recherche */

    #desktopLiveSearchResults {
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;

        width: 390px !important;

        background: #191919 !important;

        border: 1px solid #353535 !important;
        border-radius: 12px !important;

        box-shadow: 0 18px 45px rgba(0,0,0,.42) !important;

        overflow: hidden !important;
    }
}


/* ==========================================================
   MOBILE SEARCH
   Une seule interface ouverte par la loupe
========================================================== */

@media (max-width: 700px) {

    /*
       Le conteneur parent reste présent mais ne prend
       aucune hauteur lorsque la recherche est fermée.
    */

    .mobile-tools {
        display: block !important;

        height: 0 !important;
        min-height: 0 !important;

        padding: 0 !important;

        overflow: visible !important;

        background: transparent !important;
        border: 0 !important;
    }


    /* Fermé */

    #mobileSearchContainer {
        display: none !important;
    }


    /* Ouvert uniquement après clic sur la loupe */

    #mobileSearchContainer.active {
        position: relative !important;
        z-index: 5000 !important;

        display: block !important;

        width: 100% !important;

        padding: 18px 16px 20px !important;

        color: #ffffff !important;
        background: #191919 !important;

        border-bottom: 1px solid #303030 !important;
    }


    /*
       On retire le gros titre.
       Il ne reste qu'un vrai moteur de recherche.
    */

    #mobileSearchContainer .mobile-search-heading {
        display: none !important;
    }


    /* Champ */

    #mobileSearchContainer .mobile-search-wrapper {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        height: 50px !important;

        gap: 11px !important;

        margin: 0 !important;
        padding: 0 16px !important;

        background: #111111 !important;

        border: 1px solid #505050 !important;
        border-radius: 999px !important;

        box-shadow: none !important;
    }

    #mobileSearchContainer .mobile-search-wrapper i {
        flex: 0 0 auto !important;

        color: #a0a0a0 !important;

        background: transparent !important;

        font-size: 16px !important;
    }

    #mobileSearchInput {
        display: block !important;

        width: 100% !important;
        height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;
        background: transparent !important;

        border: 0 !important;
        outline: 0 !important;

        font-size: 14px !important;
    }

    #mobileSearchInput::placeholder {
        color: #777777 !important;
        opacity: 1 !important;
    }


    /* ======================================================
       DÉCOUVERTE
       Une seule liste propre sous le champ
    ====================================================== */

    #mobileSearchDiscovery {
        display: block !important;

        margin: 18px 0 0 !important;
        padding: 0 !important;

        color: #ffffff !important;
        background: #191919 !important;
    }


    /*
       Les 4 boutons Femme/Homme/Enfant/Nouveautés
       sont retirés : ils faisaient doublon avec la liste.
    */

    #mobileSearchDiscovery .mobile-discovery-tabs,
    #mobileSearchDiscovery .mobile-audience-tabs {
        display: none !important;
    }


    /* Liste catégories */

    #mobileSearchDiscovery .mobile-discovery-list {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #191919 !important;

        border-top: 1px solid #343434 !important;
    }

    #mobileSearchDiscovery .mobile-discovery-list a {
        display: grid !important;

        grid-template-columns: 32px 1fr 16px !important;

        align-items: center !important;

        min-height: 54px !important;

        gap: 12px !important;

        margin: 0 !important;
        padding: 0 2px !important;

        color: #eeeeee !important;
        background: #191919 !important;

        border-bottom: 1px solid #343434 !important;

        border-radius: 0 !important;

        font-size: 13px !important;
        font-weight: 450 !important;
    }

    #mobileSearchDiscovery .mobile-discovery-list a:hover {
        color: #ffffff !important;
        background: #242424 !important;
    }

    #mobileSearchDiscovery .mobile-discovery-icon {
        display: grid !important;
        place-items: center !important;

        width: 30px !important;
        height: 30px !important;

        color: #ffffff !important;
        background: transparent !important;

        font-size: 14px !important;
    }

    #mobileSearchDiscovery .mobile-discovery-list > a > i:last-child {
        color: #777777 !important;

        background: transparent !important;

        font-size: 10px !important;
    }


    /*
       Quand l'utilisateur commence à écrire,
       le JS applique hidden à la découverte.
    */

    #mobileSearchDiscovery[hidden] {
        display: none !important;
    }


    /* ======================================================
       RÉSULTATS MOBILE
    ====================================================== */

    #mobileLiveSearchResults {
        position: relative !important;
        inset: auto !important;

        width: 100% !important;
        max-height: 60vh !important;

        margin: 16px 0 0 !important;

        color: #ffffff !important;
        background: #191919 !important;

        border: 1px solid #343434 !important;
        border-radius: 10px !important;

        box-shadow: none !important;

        overflow: hidden !important;
    }

    #mobileLiveSearchResults[hidden] {
        display: none !important;
    }

    #mobileLiveSearchList {
        max-height: calc(60vh - 42px) !important;

        overflow-y: auto !important;

        background: #191919 !important;
    }

    #mobileLiveSearchList > a.live-search-result {
        min-height: 72px !important;

        padding: 8px 10px !important;

        background: #191919 !important;
    }

    #mobileLiveSearchList .live-search-image {
        flex: 0 0 46px !important;

        width: 46px !important;
        height: 56px !important;

        background: #242424 !important;

        border-radius: 7px !important;
    }
}


/* ==========================================================
   DESKTOP — FAVORIS / PANIER
   Conservation de la correction hover
========================================================== */

@media (min-width: 701px) {

    #favoritesPreviewWrapper,
    #cartPreviewWrapper {
        position: relative !important;
        overflow: visible !important;
    }

    #favoritesPreviewDropdown,
    #cartPreviewDropdown {
        top: 100% !important;
        right: 0 !important;
        left: auto !important;

        margin-top: 0 !important;
    }

    #favoritesPreviewWrapper::after,
    #cartPreviewWrapper::after {
        content: "" !important;

        position: absolute !important;

        top: 100% !important;
        right: 0 !important;

        width: 100% !important;
        height: 8px !important;

        background: transparent !important;

        pointer-events: auto !important;
    }
}

/* ZANDOS — NAVBAR FINAL MICRO FIX 2026 */


/* ==========================================================
   MOBILE — LOUPE ALIGNÉE DANS LE CHAMP
========================================================== */

@media (max-width: 700px) {

    #mobileSearchContainer .mobile-search-wrapper {
        position: relative !important;

        display: flex !important;
        align-items: center !important;

        height: 50px !important;

        padding: 0 16px !important;

        overflow: hidden !important;
    }

    #mobileSearchContainer .mobile-search-wrapper > i {
        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: block !important;

        flex: 0 0 18px !important;

        width: 18px !important;
        height: auto !important;

        margin: 0 11px 0 0 !important;
        padding: 0 !important;

        color: #9a9a9a !important;
        background: transparent !important;

        font-size: 15px !important;
        line-height: 1 !important;

        transform: none !important;
    }

    #mobileSearchInput {
        position: static !important;

        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;
        height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;
        background: transparent !important;

        border: 0 !important;

        line-height: 48px !important;

        transform: none !important;
    }

    #mobileSearchInput::placeholder {
        color: #777777 !important;
        opacity: 1 !important;
    }
}


/* ==========================================================
   DESKTOP — FAVORIS / PANIER TOUJOURS SOMBRES
   Y COMPRIS APRÈS SCROLL
========================================================== */

@media (min-width: 701px) {

    #favoritesPreviewWrapper,
    #cartPreviewWrapper,
    .navbar.scrolled #favoritesPreviewWrapper,
    .navbar.scrolled #cartPreviewWrapper {
        background: transparent !important;
    }

    #favoritesNavLink,
    #cartNavLink,
    .navbar.scrolled #favoritesNavLink,
    .navbar.scrolled #cartNavLink {
        color: #ffffff !important;
        background: transparent !important;

        border-color: transparent !important;

        box-shadow: none !important;
    }

    #favoritesNavLink:hover,
    #cartNavLink:hover,
    .navbar.scrolled #favoritesNavLink:hover,
    .navbar.scrolled #cartNavLink:hover {
        color: #ffffff !important;
        background: #292929 !important;
    }

    #favoritesNavLink i,
    #cartNavLink i,
    .navbar.scrolled #favoritesNavLink i,
    .navbar.scrolled #cartNavLink i,
    #favoritesNavLink svg,
    #cartNavLink svg,
    .navbar.scrolled #favoritesNavLink svg,
    .navbar.scrolled #cartNavLink svg {
        color: #ffffff !important;

        background: transparent !important;

        fill: none !important;
        stroke: currentColor !important;
    }


    /* Compteurs : noir, jamais blanc */

    #favoritesCount,
    #cartCount,
    .navbar.scrolled #favoritesCount,
    .navbar.scrolled #cartCount {
        color: #ffffff !important;
        background: #111111 !important;

        border: 1px solid #ffffff !important;

        box-shadow: none !important;
    }
}

/* ZANDOS — MOBILE FAVORITES FINAL 2026 */

@media (max-width: 700px) {

    /* ======================================================
       FAVORIS MOBILE
       Réutilise le bouton + compteur existants
    ====================================================== */

    #favoritesPreviewWrapper {
        position: relative !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 0 0 38px !important;

        width: 38px !important;
        height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        overflow: visible !important;
    }


    #favoritesNavLink {
        position: relative !important;

        display: grid !important;
        place-items: center !important;

        width: 38px !important;
        height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;
        background: transparent !important;

        border: 0 !important;
        border-radius: 50% !important;

        box-shadow: none !important;
    }


    #favoritesNavLink i {
        color: #ffffff !important;
        background: transparent !important;

        font-size: 17px !important;
    }


    #favoritesNavLink:hover,
    #favoritesNavLink:active {
        color: #ffffff !important;
        background: #292929 !important;
    }


    /* Compteur favoris */

    #favoritesCount {
        position: absolute !important;

        top: -1px !important;
        right: -1px !important;

        z-index: 5 !important;

        min-width: 15px !important;
        height: 15px !important;

        padding: 0 3px !important;

        color: #ffffff !important;
        background: #111111 !important;

        border: 1px solid #ffffff !important;
        border-radius: 999px !important;

        font-size: 8px !important;
        font-weight: 700 !important;
        line-height: 13px !important;

        text-align: center !important;
    }


    #favoritesCount[hidden] {
        display: none !important;
    }


    /*
       Sur mobile on garde seulement l'accès aux favoris.
       Le panneau preview reste une interaction desktop.
    */

    #favoritesPreviewDropdown {
        display: none !important;
    }


    /* Navbar droite : loupe + favoris + panier */

    .navbar .nav-right,
    .navbar.scrolled .nav-right {
        display: flex !important;
        align-items: center !important;

        gap: 1px !important;

        overflow: visible !important;
    }
}

/* ZANDOS — HAMBURGER PREMIUM FINAL 2026 */


/* ==========================================================
   PANNEAU
========================================================== */

.mobile-menu {
    color: #ffffff !important;
    background: #191919 !important;

    border: 1px solid #363636 !important;
    border-radius: 0 22px 22px 0 !important;

    box-shadow: 18px 0 55px rgba(0, 0, 0, .42) !important;

    overflow-x: hidden !important;
}


/* ==========================================================
   HEADER
========================================================== */

.mobile-menu-header {
    min-height: 74px !important;

    padding: 0 22px !important;
    background: #262626 !important;
    border-bottom: 1px solid #414141 !important;
}


/*
   Le nom ZANDOS et le petit libellé Marketplace
   sont inutiles dans le panneau.
*/

.mobile-menu-logo,
.mobile-menu-section {
    display: none !important;
}


/* Fermeture */

.close-menu {
    width: 40px !important;
    height: 40px !important;

    margin-left: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 2px !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease !important;
}

.close-menu:hover {    background: #3b3b3b !important;
    border-color: transparent !important;
}

.close-menu:active {
    transform: scale(.94) !important;
}


/* ==========================================================
   CONTENU
========================================================== */

.menu-content {    padding: 20px 20px 28px !important;

    color: #ffffff !important;
    background: #262626 !important;
}


/* Le petit mot Zandos au-dessus du Bonjour disparaît */

.mobile-menu-eyebrow {
    display: none !important;
}


.mobile-menu-intro {
    margin: 0 0 26px !important;
    padding: 0 2px !important;
}


#dynamicMenuTitle {
    margin: 0 !important;

    color: #ffffff !important;

    font-size: 25px !important;
    font-weight: 500 !important;
    line-height: 1.18 !important;

    letter-spacing: -.55px !important;
}


/* ==========================================================
   CONNEXION INVITÉ
========================================================== */

.mobile-auth-primary {
    gap: 10px !important;

    margin: 0 0 26px !important;
}


.mobile-auth-btn {
    min-height: 48px !important;
    border-radius: 2px !important;
}


.mobile-auth-btn-primary {
    color: #111111 !important;
    background: #ffffff !important;

    border: 1px solid #ffffff !important;
}


.mobile-auth-btn-secondary {
    color: #ffffff !important;
    background: #242424 !important;

    border: 1px solid #3d3d3d !important;
}


/* ==========================================================
   ACTIONS PRINCIPALES
========================================================== */

.menu__list {
    display: grid !important;
    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}


.menu__list li {
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}


.menu__list a {
    display: grid !important;
    grid-template-columns: 26px minmax(0,1fr) 18px !important;

    align-items: center !important;
    min-height: 54px !important;
    gap: 12px !important;
    padding: 9px 14px !important;

    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-size: 14px !important;
    font-weight: 500 !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease !important;
}


.menu__list a:hover {
    color: #ffffff !important;
    background: #3b3b3b !important;
    border-color: transparent !important;
    transform: none !important;
}


.menu__list a:active {
    background: #2c2c2c !important;

    border-color: #686868 !important;

    transform: scale(.985) !important;
}


/* Petite miniature/icône */

.menu-link-icon {
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;

    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-size: 16px !important;
}


.menu-link-label {
    min-width: 0 !important;

    color: #ffffff !important;
}


.menu-link-arrow {
    justify-self: end !important;

    color: #747474 !important;

    font-size: 11px !important;
}


/* ==========================================================
   CATÉGORIES MARKETPLACE
========================================================== */

.mobile-marketplace-section {
    margin-top: 32px !important;
}


/* On retire le titre Marketplace */

.mobile-menu-small-title {
    display: none !important;
}


.mobile-category-list {
    display: grid !important;
    gap: 0 !important;
}


.mobile-category-list a {
    display: grid !important;
    grid-template-columns: 26px minmax(0,1fr) 18px !important;

    align-items: center !important;
    min-height: 52px !important;
    gap: 12px !important;
    padding: 9px 14px !important;

    color: #eeeeee !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-size: 13.5px !important;
    font-weight: 450 !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease !important;
}


.mobile-category-list a:hover {
    color: #ffffff !important;
    background: #3b3b3b !important;
    border-color: transparent !important;
    transform: none !important;
}


.mobile-category-list a:active {
    background: #2b2b2b !important;

    border-color: #626262 !important;

    transform: scale(.985) !important;
}


.menu-category-icon {
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;

    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-size: 15px !important;
}


.menu-category-label {
    min-width: 0 !important;

    color: inherit !important;
}


.menu-category-arrow {
    justify-self: end !important;

    color: #747474 !important;

    font-size: 10px !important;
}


/* ==========================================================
   BAS DU MENU
========================================================== */

.mobile-menu-bottom {
    display: grid !important;

    gap: 8px !important;

    margin-top: 32px !important;
    padding-top: 22px !important;

    border-top: 1px solid #303030 !important;
}


.mobile-help-link,
.mobile-client-logout {
    display: flex !important;

    align-items: center !important;

    min-height: 52px !important;

    gap: 13px !important;

    padding: 0 14px !important;

    color: #ffffff !important;
    background: #202020 !important;

    border: 1px solid #323232 !important;
    border-radius: 15px !important;
}


.mobile-help-link i,
.mobile-client-logout i {
    display: grid !important;
    place-items: center !important;

    width: 30px !important;
    height: 30px !important;

    color: #ffffff !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .mobile-menu {
        top: 8px !important;
        bottom: 8px !important;

        width: calc(100vw - 16px) !important;
        max-width: 390px !important;
        height: calc(100dvh - 16px) !important;

        border-radius: 0 22px 22px 0 !important;
    }


    .mobile-menu-header {
        min-height: 68px !important;

        padding: 0 18px !important;
    }


    .menu-content {
        padding: 24px 18px 30px !important;
    }


    #dynamicMenuTitle {
        font-size: 23px !important;
    }


    .menu__list {
        gap: 8px !important;
    }


    .menu__list a {
        grid-template-columns: 40px minmax(0, 1fr) 16px !important;

        min-height: 60px !important;

        gap: 13px !important;

        padding: 8px 13px 8px 9px !important;

        border-radius: 15px !important;
    }


    .menu-link-icon {
        width: 40px !important;
        height: 40px !important;

        border-radius: 12px !important;
    }


    .mobile-marketplace-section {
        margin-top: 28px !important;
    }


    .mobile-category-list {
        gap: 7px !important;
    }


    .mobile-category-list a {
        min-height: 56px !important;

        border-radius: 14px !important;
    }
}


/* ==========================================================
   GRAND ÉCRAN / DESKTOP
   Le même panneau garde plus d'air
========================================================== */

@media (min-width: 701px) {

    .mobile-menu {
        width: 410px !important;

        border-radius: 0 24px 24px 0 !important;
    }


    .menu-content {
        padding: 30px 24px 36px !important;
    }


    .menu__list {
        gap: 10px !important;
    }


    .mobile-category-list {
        gap: 9px !important;
    }
}
/* ZANDOS — NAVBAR MOBILE REFINEMENT 2026 */

/* ==========================================================
   TOP BAR
   Fond vert citron / texte noir
========================================================== */

.promo-bar {
    background: #d4ec70 !important;
    color: #171717 !important;
    border-bottom: 0 !important;
}

.promo-bar .promo-track span {
    color: #171717 !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: .055em !important;
}

.promo-bar .promo-slider,
.promo-bar .promo-track,
.promo-bar .promo-track span {
    color: #111111 !important;
}

.promo-bar .promo-close {
    color: #111111 !important;
    background: transparent !important;
}

.promo-bar .promo-close:hover {
    color: #000000 !important;
    background: rgba(0, 0, 0, .08) !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    /*
       Lorsque la recherche mobile est ouverte, la rangée
       marketplace située sous la navbar devient inutile :
       les catégories existent déjà dans la découverte.
    */

    body.mobile-search-open #marketplaceCategories,
    body.mobile-search-open .top-categories {
        display: none !important;
    }

    /*
       On conserve une seule découverte :
       Nouveautés / Mode / Beauté / Électronique /
       Sport / Seconde main / Petits prix.
    */

    #mobileSearchDiscovery .mobile-discovery-tabs,
    #mobileSearchDiscovery .mobile-audience-tabs {
        display: none !important;
    }
}

/* ZANDOS — MOBILE HAMBURGER SHAPE FIX 2026 */

@media (max-width: 700px) {

    .navbar .menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    .navbar .menu-toggle span {
        display: block !important;
        flex: 0 0 auto !important;

        height: 2px !important;

        margin-left: 7px !important;
        margin-right: 0 !important;

        background: #ffffff !important;
        border-radius: 999px !important;
    }

    .navbar .menu-toggle span:nth-child(1),
    .navbar .menu-toggle span:nth-child(3) {
        width: 24px !important;
    }

    .navbar .menu-toggle span:nth-child(2) {
        width: 11px !important;
    }

    /* On conserve la transformation en X lorsque le menu est ouvert */

    .navbar .menu-toggle.active span:nth-child(1) {
        width: 24px !important;
        transform: translateY(6.5px) rotate(45deg) !important;
    }

    .navbar .menu-toggle.active span:nth-child(2) {
        opacity: 0 !important;
    }

    .navbar .menu-toggle.active span:nth-child(3) {
        width: 24px !important;
        transform: translateY(-6.5px) rotate(-45deg) !important;
    }
}

/* ZANDOS — DESKTOP HAMBURGER SHAPE FIX 2026 */

@media (min-width: 701px) {

    .navbar .menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    .navbar .menu-toggle span {
        display: block !important;
        flex: 0 0 auto !important;
        height: 2px !important;
        margin-left: 8px !important;
        margin-right: 0 !important;
        background: #ffffff !important;
        border-radius: 999px !important;
    }

    .navbar .menu-toggle span:nth-child(1),
    .navbar .menu-toggle span:nth-child(3) {
        width: 24px !important;
    }

    .navbar .menu-toggle span:nth-child(2) {
        width: 11px !important;
    }

    .navbar .menu-toggle.active span:nth-child(1) {
        width: 24px !important;
        transform: translateY(6.5px) rotate(45deg) !important;
    }

    .navbar .menu-toggle.active span:nth-child(2) {
        opacity: 0 !important;
    }

    .navbar .menu-toggle.active span:nth-child(3) {
        width: 24px !important;
        transform: translateY(-6.5px) rotate(-45deg) !important;
    }
}

/* ZANDOS — HAMBURGER BOTTOM ACTIONS 2026 */

/* Le contenu du menu utilise toute la hauteur disponible */
.mobile-menu .menu-content {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

/* Les actions principales restent groupées en haut */
.mobile-menu .menu {
    flex: 0 0 auto !important;
}

/* Aide + déconnexion sont poussées vers le bas */
.mobile-menu .mobile-menu-bottom {
    margin-top: auto !important;
    padding-top: 42px !important;
    padding-bottom: 4px !important;
    background: transparent !important;
    border: 0 !important;
}

/* Plus de cartes / carrés */
.mobile-menu .mobile-help-link,
.mobile-menu .mobile-client-logout {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 42px !important;

    gap: 11px !important;

    margin: 0 !important;
    padding: 0 2px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-size: 13px !important;
    text-align: left !important;
}

/* Aide */
.mobile-menu .mobile-help-link {
    color: #b5b5b5 !important;
}

.mobile-menu .mobile-help-link:hover {
    color: #ffffff !important;
    background: transparent !important;
}

/* Déconnexion */
.mobile-menu .mobile-client-logout {
    color: #9a9a9a !important;
}

.mobile-menu .mobile-client-logout:hover {
    color: #ffffff !important;
    background: transparent !important;
}

/* Icônes sobres */
.mobile-menu .mobile-help-link i,
.mobile-menu .mobile-client-logout i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 18px !important;

    color: currentColor !important;
    background: transparent !important;

    font-size: 14px !important;
}

/* Aucun séparateur entre aide et déconnexion */
.mobile-menu .mobile-help-link + .mobile-client-logout {
    border-top: 0 !important;
}


/* MOBILE */
@media (max-width: 700px) {

    .mobile-menu .mobile-menu-bottom {
        padding-top: 36px !important;
    }

}


/* DESKTOP */
@media (min-width: 701px) {

    .mobile-menu .mobile-menu-bottom {
        padding-top: 52px !important;
    }

}


/* ZANDOS — PROMO TYPOGRAPHY FINAL 2026 */
.promo-track span {
    font-size: 13px !important;
    font-weight: 600 !important;
}

@media (max-width: 900px) {
    .promo-track span {
        font-size: 12px !important;
        font-weight: 600 !important;
    }
}


/* ZANDOS — CUSTOMER HAMBURGER + BACK TO TOP FINAL 2026 */

/* Hamburger Marketplace = géométrie Seller */
.navbar .menu-toggle {
    position: relative !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.navbar .menu-toggle span {
    position: absolute !important;
    left: 7px !important;
    display: block !important;
    height: 2px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-radius: 999px !important;
    transform: none !important;
}

.navbar .menu-toggle span:nth-child(1) {
    top: 12px !important;
    width: 26px !important;
}

.navbar .menu-toggle span:nth-child(2) {
    top: 19px !important;
    width: 18px !important;
}

.navbar .menu-toggle span:nth-child(3) {
    display: block !important;
    top: 26px !important;
    width: 26px !important;
}

/* Logo Marketplace aligné sur l'écriture Seller */
.navbar .logo,
.navbar .logo-text {
    font-weight: 800 !important;
    letter-spacing: -.5px !important;
}

/* Flèche parfaitement centrée dans son cercle */
.back-to-top {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.back-to-top i {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    transform: none !important;
}

@media (max-width: 700px) {
    .navbar .menu-toggle {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }

    .navbar .menu-toggle span {
        left: 7px !important;
    }

    .navbar .menu-toggle span:nth-child(1) {
        top: 11px !important;
        width: 24px !important;
    }

    .navbar .menu-toggle span:nth-child(2) {
        top: 18px !important;
        width: 16px !important;
    }

    .navbar .menu-toggle span:nth-child(3) {
        display: block !important;
        top: 25px !important;
        width: 24px !important;
    }

    .navbar .logo,
    .navbar .logo-text {
        font-size: 20px !important;
        font-weight: 800 !important;
        letter-spacing: -.5px !important;
    }
}
/* ZANDOS — BACK TO TOP PRECISION 2026 */

.back-to-top {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    text-align: center !important;
    line-height: 1 !important;
}

.back-to-top > *,
.back-to-top svg,
.back-to-top i,
.back-to-top span {
    margin: 0 !important;

    display: block;

    line-height: 1 !important;

    transform: none !important;
}

/* ZANDOS — CARTES PHOTO DANS LA RECHERCHE */

.search-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.search-category-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 9px;
    text-decoration: none;
    color: inherit;
}

.search-category-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 9px;
    background: #eeeeee;
}

.search-category-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-category-image img[hidden] {
    display: none;
}

.search-category-card > span {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.desktop-search-discovery {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: min(460px, 90vw);
    padding: 18px;
    border-radius: 0 0 14px 14px;
    background: #191919;
    color: #fff;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .18);
    z-index: 100;
}

#desktopSearchWrapper.active .desktop-search-discovery {
    display: block;
}

#desktopSearchWrapper:has(
    #desktopSearchInput:not(:placeholder-shown)
) .desktop-search-discovery {
    display: none;
}

#desktopSearchWrapper:has(
    #desktopLiveSearchResults:not([hidden])
) .desktop-search-discovery {
    display: none;
}

.mobile-search-category-discovery {
    margin-bottom: 24px;
}

.mobile-search-category-discovery .search-category-card > span {
    color: #191919;
}

@media (max-width: 700px) {
    .desktop-search-discovery {
        display: none !important;
    }

    .mobile-search-category-discovery {
        padding: 8px 0 4px;
    }

    .mobile-search-category-discovery .search-category-grid {
        gap: 10px;
    }

    .mobile-search-category-discovery .search-category-card > span {
        font-size: 12px;
    }
}

/* ZANDOS — ACTIONS EN BAS DU MENU HAMBURGER */

.mobile-menu-bottom {
    margin-top: auto;
    flex-shrink: 0;
}

.mobile-menu-bottom .mobile-help-link,
.mobile-menu-bottom .mobile-client-logout {
    width: 100%;
}

.mobile-menu-bottom .mobile-client-logout[hidden] {
    display: none !important;
}

/* ZANDOS — STRUCTURE VERTICALE DU MENU */

.mobile-menu {
    display: flex;
    flex-direction: column;

    background: #262626 !important;
    border: 0 !important;
    border-radius: 0 !important;}

.mobile-menu > .menu-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.mobile-menu > .menu-content > .mobile-menu-bottom {
    margin-top: auto;
    flex-shrink: 0;
}

/* ZANDOS — VISIBILITÉ DES CARTES DE RECHERCHE */

#desktopSearchDiscovery[hidden],
#mobileSearchDiscovery[hidden] {
    display: none !important;
}


/* ZANDOS NAVIGATION REFERENCE 2026-10-08 */
/* Navigation et recherche : règles communes. */
/* Loupe sans pastille, dessin au trait de même épaisseur que le sac. */
.navbar #searchToggle,.navbar #searchToggle:hover,.navbar #searchToggle:focus-visible,.navbar .search-wrapper.active #searchToggle {background:transparent !important;box-shadow:none !important;border:0 !important;}
.navbar #searchToggle .z-nav-search {width:22px !important;height:22px !important;stroke-width:1.6 !important;fill:none !important;}
/* Cartes carrées, sans contour, légende sous chaque photo. */
.search-category-image {aspect-ratio:1 / 1 !important;border:0 !important;border-radius:4px !important;box-shadow:none !important;}
.search-category-card {gap:11px !important;}
.search-category-card > span {font-weight:500 !important;font-size:14px !important;letter-spacing:.005em !important;}
/* Recherche desktop plus généreuse et cohérente avec les références. */

.profile-dropdown,.nav-preview-dropdown {border-color:transparent !important;}
.nav-preview-eyebrow {display:none !important;}
.nav-preview-empty > i {font-size:36px !important;}
.nav-preview-footer-link {font-weight:500 !important;}
/* X de recherche blanc, y compris le bouton natif du champ search. */
#desktopSearchInput::-webkit-search-cancel-button,#mobileSearchInput::-webkit-search-cancel-button {filter:grayscale(1) brightness(0) invert(1) !important;cursor:pointer;}
/* Mobile : aucune catégorie ni bloc de recherche avant l'activation. */
@media (max-width:700px) {
 .promo-track span {font-size:11px !important;font-weight:500 !important;letter-spacing:.035em !important;}
 #marketplaceCategories,.top-categories {display:none !important;}
 body:not(.mobile-search-open) .mobile-tools {display:none !important;}
 body.mobile-search-open .mobile-tools {display:block !important;}
 body:not(.mobile-search-open) #mobileSearchDiscovery {display:none !important;}
 .mobile-search-category-discovery .search-category-grid {gap:10px !important;}
 .mobile-search-category-discovery .search-category-card > span {font-size:13px !important;}
 .navbar #searchToggle,.navbar #searchToggle:hover {border-radius:0 !important;}
}


/* Recherche mobile : cartes identiques, sans changer l'ouverture du panneau. */
@media (max-width: 700px) {
  #mobileSearchDiscovery .search-category-image {
    aspect-ratio: 1 / 1 !important;
    border: 0 !important;
    border-radius: 5px !important;
    overflow: hidden !important;
  }
}

/* ZANDOS — ICONES NAVIGATION SVG V5 */
.navbar .z-lucide-icon,
.mobile-tools .z-lucide-icon,
.mobile-menu .z-lucide-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.navbar .nav-preview-empty > .z-lucide-icon { width: 30px; height: 30px; }
.navbar .z-lucide-icon.menu-link-arrow,
.mobile-menu .z-lucide-icon.menu-link-arrow { width: 16px; height: 16px; }


/* ZANDOS V10 — ICÔNES UNIFIÉES */
.navbar .nav-right { align-items: center; gap: 6px; }
.navbar .nav-right .nav-icon,
.navbar .nav-right .search-toggle {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0; border-radius: 8px;
  color: #f6f6f6; line-height: 1;
  transition: background-color .18s ease, color .18s ease;
}
.navbar .nav-right .nav-icon:hover,
.navbar .nav-right .search-toggle:hover,
.navbar .nav-right .nav-icon:focus-visible,
.navbar .nav-right .search-toggle:focus-visible { background: #343434; }
.navbar .nav-right .z-nav-svg,
.navbar .nav-right #accountNavAvatar > .z-nav-svg {
  display: block; width: 20px; height: 20px;
  flex: 0 0 20px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.navbar #accountNavAvatar:not(.client-avatar-active) {
  display: grid; place-items: center;
  width: 100%; height: 100%; background: transparent; border: 0;
}
.navbar .nav-right .nav-counter,
.navbar .nav-right #cartCount { font-variant-numeric: tabular-nums; }
.navbar .menu-toggle { border-radius: 8px; }
.navbar .menu-toggle:hover,
.navbar .menu-toggle:focus-visible { background: #343434; }
@media (max-width: 700px) {
  .navbar .nav-right { gap: 0; }
  .navbar .nav-right .nav-icon,
  .navbar .nav-right .search-toggle { width: 38px; height: 38px; }
  .navbar .nav-right .z-nav-svg,
  .navbar .nav-right #accountNavAvatar > .z-nav-svg { width: 20px; height: 20px; }
}


/* SVG identiques sur les quatre actions, sans toucher aux badges. */
.navbar .nav-right .search-toggle > svg.z-nav-svg,
.navbar .nav-right .favorites-icon > svg.z-nav-svg,
.navbar .nav-right .cart-btn > svg.z-nav-svg,
.navbar .nav-right #accountNavAvatar:not(.client-avatar-active) > svg.z-nav-svg {
  width: 20px !important; height: 20px !important;
  fill: none !important; stroke: currentColor !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round; stroke-linejoin: round;
}
/* ZANDOS — NAVIGATION V9 — PANNEAUX DESKTOP CANONIQUES */
:root{--z-panel:#262626;--z-panel-line:#414141;--z-panel-muted:#b5b5b5}
@media(min-width:1001px){
.navbar .nav-icon,.navbar .search-toggle{background:transparent!important;border:0!important;box-shadow:none!important;transform:none!important}
.navbar .nav-icon:hover,.navbar .search-toggle:hover{background:#343434!important}
.navbar .z-nav-svg,.navbar .nav-icon .z-lucide-icon{width:24px!important;height:24px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
#profileDropdown,#favoritesPreviewDropdown,#cartPreviewDropdown{box-sizing:border-box!important;width:320px!important;min-width:320px!important;max-width:calc(100vw - 24px)!important;right:0!important;top:calc(100% + 8px)!important;padding:0!important;color:#f6f6f6!important;background:var(--z-panel)!important;border:0!important;border-radius:2px!important;box-shadow:0 18px 42px rgba(0,0,0,.3)!important;overflow:hidden!important}
#profileDropdown .profile-dropdown-header,#favoritesPreviewDropdown .nav-preview-header,#cartPreviewDropdown .nav-preview-header{margin:0!important;padding:18px 20px!important;border-bottom:1px solid var(--z-panel-line)!important;background:transparent!important}
#profileDropdown .profile-dropdown-header strong,#favoritesPreviewDropdown .nav-preview-header strong,#cartPreviewDropdown .nav-preview-header strong{color:#fff!important;font-size:14px!important;font-weight:600!important}
#profileDropdown .profile-dropdown-header p{color:var(--z-panel-muted)!important;font-size:12px!important;line-height:1.5!important}
#profileDropdown .profile-menu-group>a,#profileDropdown .profile-dropdown-logout{min-height:52px!important;padding:0 20px!important;border-radius:0!important;color:#f6f6f6!important;background:transparent!important;font-size:13px!important;font-weight:500!important}
#profileDropdown .profile-menu-group>a:hover,#profileDropdown .profile-dropdown-logout:hover{background:#3b3b3b!important;padding-left:20px!important}
#profileDropdown .profile-menu-group .z-lucide-icon,#profileDropdown .profile-dropdown-logout .z-lucide-icon{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.5!important}
#favoritesPreviewDropdown>*,#cartPreviewDropdown>*,#favoritesPreviewDropdown .nav-preview-content,#cartPreviewDropdown .nav-preview-content,#favoritesPreviewDropdown .nav-preview-empty,#cartPreviewDropdown .nav-preview-empty,#cartPreviewDropdown .nav-cart-preview-summary{background:transparent!important;box-shadow:none!important}
#favoritesPreviewDropdown .nav-preview-content,#cartPreviewDropdown .nav-preview-content{padding:12px 20px!important}
#favoritesPreviewDropdown .nav-preview-empty,#cartPreviewDropdown .nav-preview-empty{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:14px!important;min-height:140px!important;padding:18px 8px!important;text-align:center!important}
#favoritesPreviewDropdown .nav-preview-empty>.z-lucide-icon,#cartPreviewDropdown .nav-preview-empty>.z-lucide-icon{width:38px!important;height:38px!important;fill:none!important;stroke:#fff!important;stroke-width:1.5!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important}
#favoritesPreviewDropdown .nav-preview-empty strong,#cartPreviewDropdown .nav-preview-empty strong{color:#fff!important;font-size:13px!important;font-weight:600!important}
#favoritesPreviewDropdown .nav-preview-empty span,#cartPreviewDropdown .nav-preview-empty span{color:var(--z-panel-muted)!important;font-size:12px!important}
#favoritesPreviewDropdown .nav-preview-footer-link,#cartPreviewDropdown .nav-preview-footer-link{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:16px 20px!important;margin:0!important;border-top:1px solid var(--z-panel-line)!important;border-radius:0!important;color:#fff!important;background:transparent!important;font-size:12px!important;font-weight:500!important}
#favoritesPreviewDropdown .nav-preview-footer-link:hover,#cartPreviewDropdown .nav-preview-footer-link:hover{background:#3b3b3b!important}
#desktopSearchDiscovery,#desktopLiveSearchResults,#desktopSearchWrapper.active #desktopSearchDiscovery{box-sizing:border-box!important;width:min(520px,calc(100vw - 32px))!important;min-width:0!important;max-width:calc(100vw - 32px)!important;right:0!important;left:auto!important;top:calc(100% + 8px)!important;padding:0!important;background:#1c1c1c!important;color:#f6f6f6!important;border:0!important;border-radius:2px!important;box-shadow:0 18px 42px rgba(0,0,0,.3)!important;overflow:hidden!important}
#desktopSearchDiscovery .search-category-grid{padding:18px!important;gap:14px!important}
#desktopSearchDiscovery .search-category-image{aspect-ratio:1/1!important;background:#343434!important;border:0!important;border-radius:2px!important;overflow:hidden!important}
#desktopSearchDiscovery .search-category-card>span{color:#fff!important;font-size:13px!important}
#desktopLiveSearchResults .live-search-header{padding:14px 20px!important;background:transparent!important;border-bottom:1px solid var(--z-panel-line)!important;color:#fff!important;font-size:12px!important}
#desktopLiveSearchResults .live-search-list{padding:0!important;background:transparent!important}
#desktopLiveSearchResults .live-search-result{border-bottom:1px solid var(--z-panel-line)!important;border-radius:0!important;background:transparent!important}
#desktopLiveSearchResults .live-search-result:hover{background:#333!important}
#desktopLiveSearchResults .live-search-empty,#desktopLiveSearchResults .live-search-loading{padding:22px 20px!important;background:transparent!important}
#desktopSearchWrapper.active .search-input{width:270px!important;background:#1c1c1c!important;color:#fff!important;border:1px solid #777!important}
}