/**
 * LA CROQUETTERIE - Mobile Navbar
 * Version: 3.1.0
 */

@media (max-width: 959px) {

    /* ---- MASQUER ÉLÉMENTS DESKTOP ---- */
    .header-additional {
        display: none !important;
    }

    /* ---- HEADER STICKY ----
       On rend TOUT le #header sticky, pas juste .header-main.
       Comme ça, même si le thème met position:relative sur #header,
       on le force. */
    #header {
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: #fff !important;
    }

    .header-main {
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        margin: 0 !important;
        padding: 0 !important;
    }

    .header-main > .wrapper {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    /* ---- HEADER-MAIN-INNER : barre fixe 56px ---- */
    .header-main-inner {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 56px !important;
        min-height: 0 !important;
        max-height: 56px !important;
        overflow: visible !important;
        padding: 0 15px !important;
        margin: 0 !important;
    }

    /* Masquer les enfants indésirables */
    .header-main-inner > *:not(.header-logo):not(.lc-burger):not(#main-nav) {
        position: absolute !important;
        visibility: hidden !important;
        pointer-events: none !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Le toggler natif n'existe plus dans le DOM (supprimé du template) */

    /* ---- MENU #main-nav : fixé sous le header ---- */
    /* Spécificité maximale pour overrider le thème #header .menu */
    html.main-nav-open #header #main-nav.menu,
    html.main-nav-open #header #main-nav.lc-menu,
    html.main-nav-open #header nav#main-nav.menu.js-top-menu,
    html.main-nav-open #header nav#main-nav.menu.js-top-menu.lc-menu,
    html.main-nav-open #header #main-nav,
    html.main-nav-open #header nav#main-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        z-index: 999 !important;
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        /* top et height sont définis par le JS dynamiquement */
    }

    /* ---- LOGO CENTRÉ ---- */
    .header-logo,
    .header-main-inner .header-logo,
    .header-main .header-logo {
        position: relative !important;
        visibility: visible !important;
        display: block !important;
        height: auto !important;
        width: auto !important;
        overflow: visible !important;
        margin: 0 auto !important;
        padding: 0 !important;
        pointer-events: auto !important;
        z-index: 1;
        float: none !important;
        text-align: center !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }

    .header-logo img {
        height: 40px;
        width: auto;
        display: block;
    }

    .header-logo h1 {
        margin: 0;
        padding: 0;
        line-height: 1;
    }

    /* ---- BURGER À GAUCHE ---- */
    .lc-burger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;

        position: absolute !important;
        left: 10px;
        right: auto;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001;

        visibility: visible !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }

    .lc-burger-lines {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        width: 26px;
        height: 20px;
        position: relative;
    }

    .lc-burger-lines span {
        display: block;
        height: 2.5px;
        background-color: #414142;
        border-radius: 2px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: absolute;
        right: 0;
    }

    .lc-burger-lines span:nth-child(1) { width: 26px; top: 0; }
    .lc-burger-lines span:nth-child(2) { width: 20px; top: 50%; transform: translateY(-50%); }
    .lc-burger-lines span:nth-child(3) { width: 14px; bottom: 0; }

    .lc-burger:hover .lc-burger-lines span,
    .lc-burger:focus .lc-burger-lines span {
        width: 26px;
    }

    .lc-burger.is-open .lc-burger-lines span:nth-child(1) {
        width: 26px; top: 50%; transform: translateY(-50%) rotate(45deg);
    }
    .lc-burger.is-open .lc-burger-lines span:nth-child(2) {
        opacity: 0; width: 0;
    }
    .lc-burger.is-open .lc-burger-lines span:nth-child(3) {
        width: 26px; bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg);
    }

    /* ---- UTILITIES (compact) ---- */
    .lc-nav-utilities {
        display: flex;
        justify-content: center;
        gap: 0;
        padding: 0;
        border-bottom: 1px solid #eee;
        background: #fafafa;
    }

    .lc-nav-utilities a {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        justify-content: center;
        text-decoration: none;
        color: #444;
        font-size: 13px;
        font-weight: 600;
        padding: 14px 8px;
        transition: all 0.2s ease;
        border-right: 1px solid #eee;
    }

    .lc-nav-utilities a:last-child {
        border-right: none;
    }

    .lc-nav-utilities a:hover,
    .lc-nav-utilities a:active {
        background: rgba(167, 188, 68, 0.08);
        color: var(--lc-vert, #a7bc44);
    }

    .lc-nav-utilities a svg {
        width: 22px;
        height: 22px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        flex-shrink: 0;
    }

    /* ---- RECHERCHE (simplifiée) ---- */
    .lc-nav-search {
        padding: 8px 12px;
        background: #fff;
        border-bottom: 1px solid #eee;
    }

    .lc-nav-search-input {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 8px 12px;
        border: 1.5px solid #ddd;
        border-radius: 8px;
        background: #f8f8f8;
        transition: border-color 0.2s ease, background 0.2s ease;
    }

    .lc-nav-search-input:focus-within {
        border-color: var(--lc-vert, #a7bc44);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(167, 188, 68, 0.1);
    }

    .lc-nav-search-input input {
        flex: 1;
        border: none;
        background: none;
        font-size: 14px;
        color: #414142;
        outline: none;
    }

    .lc-nav-search-input input::placeholder {
        color: #999;
    }

    .lc-nav-search-input svg {
        width: 18px;
        height: 18px;
        stroke: #999;
        fill: none;
        stroke-width: 2;
        flex-shrink: 0;
    }

    .lc-nav-search-input button {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        display: flex;
    }
}

@media (min-width: 960px) {
    .lc-burger,
    .lc-nav-utilities,
    .lc-nav-search {
        display: none !important;
    }
}