/* ==========================================================
   Header, navigation mobile et icônes
========================================================== */

.custom-cart-icon,
.custom-account-icon {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    transition: opacity .2s ease, transform .2s ease !important;
}

.site-header a[href*="panier"],
.site-header a[href*="cart"],
.kadence-header-cart a,
.header-cart-wrap a,
.site-header-cart a,
.header-cart-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.site-header a[href*="mon-compte"],
.site-header a[href*="my-account"],
.mobile-header-wrap a[href*="mon-compte"],
.mobile-header-wrap a[href*="my-account"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px;
    min-height: 28px;
    padding: 0 !important;
    overflow: hidden;
    color: transparent !important;
    font-size: 0 !important;
    white-space: nowrap;
}

.site-header a[href*="mon-compte"]::before,
.site-header a[href*="my-account"]::before,
.mobile-header-wrap a[href*="mon-compte"]::before,
.mobile-header-wrap a[href*="my-account"]::before {
    display: block;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    background: #111;
    content: "";
    -webkit-mask: url("../images/account.svg") center / contain no-repeat;
    mask: url("../images/account.svg") center / contain no-repeat;
    transition: opacity .2s ease, transform .2s ease;
}

.site-header a.ec14-account-icon-ready::before,
.mobile-header-wrap a.ec14-account-icon-ready::before {
    display: none;
}

.site-header a[href*="mon-compte"]:hover::before,
.site-header a[href*="my-account"]:hover::before,
.mobile-header-wrap a[href*="mon-compte"]:hover::before,
.mobile-header-wrap a[href*="my-account"]:hover::before {
    opacity: .7;
    transform: scale(1.08);
}

.site-header .custom-cart-icon,
.site-header .custom-account-icon,
.mobile-header-wrap .custom-cart-icon,
.mobile-header-wrap .custom-account-icon {
    flex: 0 0 28px;
    margin: 0;
}

a:hover > .custom-cart-icon,
.header-cart-button:hover .custom-cart-icon,
.header-cart-wrap a:hover .custom-cart-icon,
.site-header-cart a:hover .custom-cart-icon,
.kadence-header-cart a:hover .custom-cart-icon,
.site-header a:hover .custom-account-icon,
.mobile-header-wrap a:hover .custom-account-icon {
    opacity: .7 !important;
    transform: scale(1.08) !important;
}

.transparent-header .custom-cart-icon,
.transparent-header .custom-account-icon {
    filter: brightness(0) invert(1) !important;
}

.transparent-header .site-header a[href*="mon-compte"]::before,
.transparent-header .site-header a[href*="my-account"]::before,
.transparent-header .mobile-header-wrap a[href*="mon-compte"]::before,
.transparent-header .mobile-header-wrap a[href*="my-account"]::before {
    background: #fff;
}

.transparent-header .header-cart-total {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    background: #7f1725 !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

@media (max-width: 1024px) {
    #mobile-menu-toggle {
        position: relative !important;
        z-index: 10000 !important;
        display: block !important;
        width: 42px !important;
        height: 42px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        appearance: none !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
    }

    #mobile-menu-toggle::before,
    #mobile-menu-toggle::after,
    #mobile-menu-toggle > span:not(.screen-reader-text) {
        position: absolute !important;
        left: 8px !important;
        width: 26px !important;
        height: 2px !important;
        background: #111 !important;
        border-radius: 999px !important;
        content: "" !important;
        transition: all .3s ease !important;
    }

    #mobile-menu-toggle::before {
        top: 12px !important;
    }

    #mobile-menu-toggle > span:not(.screen-reader-text) {
        top: 20px !important;
    }

    #mobile-menu-toggle::after {
        top: 28px !important;
    }

    .transparent-header #mobile-menu-toggle::before,
    .transparent-header #mobile-menu-toggle::after,
    .transparent-header #mobile-menu-toggle > span:not(.screen-reader-text) {
        background: #fff !important;
    }

    #mobile-menu-toggle.active::before {
        top: 20px !important;
        transform: rotate(45deg) !important;
    }

    #mobile-menu-toggle.active > span:not(.screen-reader-text) {
        opacity: 0 !important;
    }

    #mobile-menu-toggle.active::after {
        top: 20px !important;
        transform: rotate(-45deg) !important;
    }

    #mobile-menu-dropdown {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 9999 !important;
        max-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, .96) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        text-align: center !important;
        transform: translateY(-6px) !important;
        visibility: hidden !important;
        transition: max-height .35s ease, opacity .25s ease, transform .25s ease, padding .25s ease !important;
    }

    #mobile-menu-dropdown.open {
        max-height: 220px !important;
        padding: 8px 0 12px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        visibility: visible !important;
    }

    #mobile-menu-dropdown a {
        display: block !important;
        padding: 0 !important;
        color: #111 !important;
        font-family: Futura, "Trebuchet MS", Arial, sans-serif !important;
        font-size: clamp(13px, 2vw, 15px) !important;
        font-weight: 500 !important;
        letter-spacing: .5px !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        transition: opacity .2s ease, transform .2s ease !important;
    }

    #mobile-menu-dropdown a:hover {
        opacity: .6 !important;
        transform: scale(1.03) !important;
    }
}

@media (max-width: 768px) {
    #masthead {
        z-index: 1000;
    }

    .site-header-row-container-inner {
        z-index: 1001;
    }

    #mobile-menu-toggle {
        z-index: 1002 !important;
    }

    #mobile-menu-dropdown {
        z-index: 1003 !important;
    }

    .mobile-header-wrap a[href*="mon-compte"],
    .mobile-header-wrap .kadence-header-cart a,
    .mobile-header-wrap #mobile-menu-toggle {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #mobile-menu-toggle::before,
    #mobile-menu-toggle::after,
    #mobile-menu-toggle > span:not(.screen-reader-text),
    #mobile-menu-dropdown,
    #mobile-menu-dropdown a,
    .custom-cart-icon,
    .custom-account-icon {
        transition: none !important;
    }
}