/**
 * LA CROQUETTERIE - Header Desktop Modernisé
 * Version: 3.2.9
 *
 * S'appuie sur le système de grille du thème :
 * - .wrapper max-width: 1200px, padding: 0 24px
 * - .header-main-inner: flex-wrap, margin: 0 -12px (gouttières)
 * - Grille 33.33% : logo / search / additional
 * - #header .menu: width:100vw, margin-left:calc(-(100vw - 100%) / 2)
 */

/* ========================================
   DESKTOP (>= 960px)
   ======================================== */
@media (min-width: 960px) {

    /* Header non-sticky (seule la nav l'est via JS) */
    #header {
        position: relative !important;
        z-index: 1000 !important;
        background: #fff !important;
        height: auto !important;
    }

    .header-main {
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
    }

    /* Respecter le max-width du thème */
    .header-main > .wrapper {
        max-width: 1200px !important;
    }

    /* ----------------------------------------
       HEADER-MAIN-INNER
       On garde le système de grille du thème
       margin -12px = gouttières
       ---------------------------------------- */
    .header-main-inner {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
    }

    /* ----------------------------------------
       LOGO - 33.33% comme le thème
       ---------------------------------------- */
    .header-logo {
        flex: 0 0 auto !important;
        width: 33.3333% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        justify-content: flex-start !important;
        height: 80px !important;
    }

    .header-logo img {
        width: auto !important;
        height: 42px !important;
        display: block !important;
    }

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

    /* ----------------------------------------
       SEARCH WIDGET - 33.33%
       Rectangle avec border-radius (comme mobile)
       ---------------------------------------- */
    .header-main .search-widget {
        flex: 0 0 auto !important;
        width: 33.3333% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        order: 0 !important;
        margin-top: 0 !important;
    }

    .header-main .search-widget form {
        display: flex !important;
        background: #f5f5f5 !important;
        border: 1.5px solid #ddd !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    .header-main .search-widget input[type="text"],
    .header-main .search-widget input[type="search"] {
        flex: 1 !important;
        border: none !important;
        background: transparent !important;
        font-size: 14px !important;
        color: #414142 !important;
        outline: none !important;
        padding-left: 14px !important;
        height: 42px !important;
        box-shadow: none !important;
    }

    .header-main .search-widget input::placeholder {
        color: #aaa !important;
        font-weight: 400 !important;
    }

    .header-main .search-widget form:focus-within {
        background: #fff !important;
        border-color: var(--lc-vert, #a7bc44) !important;
        box-shadow: 0 0 0 3px rgba(167, 188, 68, 0.1) !important;
    }

    .header-main .search-widget button {
        width: 42px !important;
        height: 42px !important;
        background: var(--lc-vert, #a7bc44) !important;
        border-radius: 0 6px 6px 0 !important;
        border: none !important;
        transition: background 0.2s ease !important;
    }

    .header-main .search-widget button:hover {
        background: #96ab3a !important;
    }

    .header-main .search-widget button svg {
        width: 18px !important;
        height: 18px !important;
    }

    .header-main .search-widget button svg path,
    .header-main .search-widget button svg .svg-path-primary,
    .header-main .search-widget button svg .svg-path-secondary {
        fill: #fff !important;
    }

    /* ----------------------------------------
       HEADER ADDITIONAL - 25% (thème large)
       Icônes Lucide
       ---------------------------------------- */
    .header-additional {
        flex: 0 0 auto !important;
        width: 25% !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .header-additional > ul > li a {
        height: auto !important;
        font-size: 12px !important;
    }

    .header-additional > ul > li a:hover {
        color: var(--lc-vert, #a7bc44) !important;
    }

    /* Masquer les anciennes icônes SVG du thème */
    .header-additional > ul > li svg {
        display: none !important;
    }

    /* Nouvelles icônes Lucide via ::before */
    .header-additional > ul > li a::before {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        margin: 0 auto 6px !important;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.85;
        transition: opacity 0.2s ease;
    }

    .header-additional > ul > li a:hover::before {
        opacity: 1;
    }

    /* Magasins (pin) */
    .header-additional > ul > li:first-child a::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23414142' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    }
    .header-additional > ul > li:first-child a:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a7bc44' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    }

    /* Compte (user) */
    .header-additional > ul > li:nth-child(2) a::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23414142' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 1 0-16 0'/%3E%3C/svg%3E");
    }
    .header-additional > ul > li:nth-child(2) a:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a7bc44' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 1 0-16 0'/%3E%3C/svg%3E");
    }

    /* Panier (bag) */
    .header-additional > ul > li:last-child a::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23414142' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
    }
    .header-additional > ul > li:last-child a:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a7bc44' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
    }

    /* ----------------------------------------
       #main-nav - Utiliser le MÊME hack que le thème
       pour #header .menu (width:100vw + calc margins)
       ---------------------------------------- */
    .header-main-inner > #main-nav,
    .header-main-inner > nav#main-nav {
        order: 1 !important;
        flex: 0 0 auto !important;
        width: 100vw !important;
        margin-left: calc(-1 * (100vw - 100%) / 2) !important;
        margin-right: calc(-1 * (100vw - 100%) / 2) !important;
    }

    /* ----------------------------------------
       BARRE DE NAV STICKY (activée par JS)
       ---------------------------------------- */
    .lc-desktop-bar.lc-nav-sticky {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        z-index: 9990 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    }
}

/* ========================================
   ÉCRANS MOYENS (960px - 1199px)
   Le thème passe en grille 33% avec wrapper 1200px
   On réduit la recherche et masque le texte des icônes
   ======================================== */
@media (min-width: 960px) and (max-width: 1199px) {

    .header-logo {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    .header-logo img {
        height: 35px !important;
    }

    .header-main .search-widget {
        width: auto !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }

    .header-main .search-widget input[type="text"],
    .header-main .search-widget input[type="search"] {
        font-size: 13px !important;
        height: 38px !important;
    }

    .header-main .search-widget button {
        width: 38px !important;
        height: 38px !important;
    }

    .header-additional {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    /* Masquer le texte des icônes, garder les SVG */
    .header-additional > ul > li a {
        font-size: 0 !important;
        height: auto !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .header-additional > ul > li a::before {
        margin-bottom: 0 !important;
    }
}