/* ==========================================================================
   LA CROQUETTERIE — lc_megamenu.css
   ==========================================================================
   Feuille de styles du module méga-menu : panneaux mobile « pop 3D »,
   méga-menu desktop, navbar mobile (burger + recherche) et header desktop.

   HISTORIQUE — ce fichier consolide trois blocs livrés séparément :
   - Mega Menu ............ v2.1.0
   - Mobile Navbar ........ v3.1.0
   - Header Desktop ....... v3.2.9

   ⚠ COULEURS DYNAMIQUES (back-office)
   --------------------------------------------------------------------------
   --lc-vert et --lc-gris sont RÉINJECTÉES dynamiquement depuis le BO du
   module : les valeurs du :root ci-dessous ne sont que des défauts.
   Conséquence : les occurrences de #a7bc44 / #414142 écrites EN DUR dans ce
   fichier (dégradés, outline de focus, icônes SVG en data-URI…) sont
   volontairement laissées telles quelles — les convertir en var(--lc-vert)
   les ferait suivre la couleur du BO, ce qui changerait le comportement.

   ⚠ ORDRE DES RÈGLES — NE PAS RÉORGANISER SANS TEST
   --------------------------------------------------------------------------
   Plusieurs règles se surchargent volontairement dans l'ordre du fichier :
   - Section 3 : « transition: none !important » sur .lc-panel /
     .lc-subcat-panel NEUTRALISE les transitions déclarées en section 8
     (kill-switch : les panneaux s'ouvrent sans animation).
   - Section 9 : le scale(0.98) au :active écrase le translateY déclaré
     en section 6 (c'est le scale qui s'applique aujourd'hui).
   - Section 8 : la transition des flèches (0.25s) remplace celle de la
     section 6 (0.2s).
   Les !important compensent la spécificité du thème PrestaShop
   (#header .menu, #header input…) : ne pas les retirer sans test.

   TABLE DES MATIÈRES
   --------------------------------------------------------------------------
    1. VARIABLES ................. défauts BO + palette statique du module
    2. ACCESSIBILITÉ ............. prefers-reduced-motion
    3. ÉLÉMENTS COMMUNS .......... kill-switch transitions, sous-cat simples
    4. FLÈCHES DESKTOP (col. 2) .. chevron « › »
    5. BOUTONS « VOIR TOUT » ..... lien dégradé + boutons colonne desktop
    6. MOBILE < 960px ............ menu « pop 3D » (onglets, cartes, panneaux)
    7. DESKTOP ≥ 960px ........... barre de nav + méga-menu 3 colonnes
    8. ANIMATIONS ................ panneaux, flèches, colonnes (voir ⚠ §3)
    9. FOCUS & RETOURS TACTILES .. focus-visible + press mobile
   10. INTÉGRATION THÈME ......... alignement barre desktop (.js-top-menu)
   11. NAVBAR MOBILE ............. header sticky, burger, utilitaires, search
   12. HEADER DESKTOP ........... grille logo / recherche / icônes Lucide
   13. ÉCRANS MOYENS 960–1199px .. compaction du header
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
    /* Défauts — surchargés dynamiquement depuis le back-office du module */
    --lc-vert: #a7bc44;
    --lc-gris: #414142;

    /* Palette statique du module (indépendante du BO)                      */
    --lc-vert-hover:        #96ab3a;   /* vert foncé (hover boutons verts)  */
    --lc-vert-actif:        #8a9c38;   /* fond sous-cat mobile ouverte      */
    --lc-vert-relief:       #7e9133;   /* relief 3D des sous-cat mobiles    */
    --lc-vert-relief-fonce: #6a7a2c;   /* relief 3D, état ouvert            */
    --lc-vert-pale:         #ecf0e0;   /* fond au tap des liens mobiles     */
    --lc-gris-ombre:        #2c2c2d;   /* relief 3D des onglets espèces     */
    --lc-texte-secondaire:  #666;      /* liens secondaires desktop         */
    --lc-gris-clair:        #999;      /* chevrons, placeholders, icônes    */
    --lc-bordure:           #e8e8e8;   /* bordures / séparateurs clairs     */
    --lc-fond-hover:        #f9f9f9;   /* fond au survol (desktop)          */
    --lc-fond-gris:         #f4f4f4;   /* fond du menu mobile               */
}


/* ==========================================================================
   2. ACCESSIBILITÉ — REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .lc-panel, .lc-subcat-panel, .lc-mega, .lc-col2, .lc-col3,
    .lc-sub, .lc-cat, .lc-arrow, .lc-arrow-sub {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}


/* ==========================================================================
   3. ÉLÉMENTS COMMUNS
   ========================================================================== */

/* ⚠ KILL-SWITCH : désactive TOUTES les transitions/animations des panneaux
   dépliables, y compris celles déclarées en section 8 (les !important
   l'emportent). Supprimer ce bloc ré-activerait l'animation d'ouverture. */
.lc-panel,
.lc-subcat-panel {
    transition: none !important;
    animation: none !important;
}

/* Sous-catégories simples (sans enfants) — règles globales.
   NB : la section 7 contient des règles .lc-sub-simple proches ; celles-ci
   (spécificité supérieure) l'emportent sur les propriétés communes. */
.lc-sub.lc-sub-simple:hover {
    background: transparent;
    border-left-color: transparent;
}

.lc-sub.lc-sub-simple a {
    display: block;
    padding: 10px 20px;
    font-size: 13px;
    color: var(--lc-texte-secondaire);
    text-decoration: none;
    transition: all 0.2s ease;
}
.lc-sub.lc-sub-simple a:hover {
    padding-left: 28px;
    color: var(--lc-vert);
    background: var(--lc-fond-hover);
}


/* ==========================================================================
   4. FLÈCHES DESKTOP — COLONNE 2 (chevron « › »)
   ========================================================================== */
@media (min-width: 960px) {
    .lc-col2 .lc-sub:not(.lc-sub-simple) .lc-sub-label {
        position: relative;
        padding-right: 16px;
    }

    .lc-col2 .lc-sub:not(.lc-sub-simple) .lc-sub-label::after {
        content: "›";
        position: absolute;
        right: 4px;
        top: 50%;
        font-size: 12px;
        color: var(--lc-gris-clair);
        transform: translateY(-50%);
        transition: transform 0.2s ease, color 0.2s ease;
    }

    .lc-col2 .lc-sub:not(.lc-sub-simple):hover .lc-sub-label::after,
    .lc-col2 .lc-sub:not(.lc-sub-simple).active .lc-sub-label::after {
        color: var(--lc-vert);
        transform: translateY(-50%) translateX(2px);
    }
}


/* ==========================================================================
   5. BOUTONS « VOIR TOUT »
   ========================================================================== */

/* Lien dégradé (verts en dur : indépendants de la couleur BO) */
.lc-view-all-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: white !important;
    text-decoration: none;
    background: linear-gradient(135deg, #a7bc44 0%, #96ab3a 100%);
    border-radius: 4px;
    transition: all 0.2s ease;
}
.lc-view-all-link:hover {
    background: linear-gradient(135deg, #96ab3a 0%, #859a33 100%);
    box-shadow: 0 2px 8px rgba(167, 188, 68, 0.3);
    transform: translateY(-1px);
}

/* Boutons de bas de colonne (desktop uniquement).
   NB : .lc-view-all-btn est en display:none par défaut ; son affichage est
   piloté par le JS du module. */
@media (min-width: 960px) {
    .lc-view-all-buttons {
        display: flex;
        flex-direction: column;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--lc-bordure);
    }

    .lc-view-all-btn {
        display: none;
        padding: 12px 20px;
        font-size: 13px;
        font-weight: 600;
        color: var(--lc-vert);
        text-decoration: none;
        border-left: 3px solid transparent;
        transition: all 0.2s ease;
    }
    .lc-view-all-btn:hover {
        padding-left: 28px;
        background: var(--lc-fond-hover);
        border-left-color: var(--lc-vert);
    }

    .lc-view-all-btn::after {
        content: " →";
        margin-left: 4px;
        transition: margin-left 0.2s ease;
    }
    .lc-view-all-btn:hover::after {
        margin-left: 8px;
    }
}

@media (max-width: 959px) {
    .lc-view-all-buttons {
        display: none !important;
    }
}


/* ==========================================================================
   6. MOBILE (< 960px) — MENU STYLE « POP 3D »
   --------------------------------------------------------------------------
   Refonte v3.0 : cohérence visuelle avec le desktop.
   ========================================================================== */
@media (max-width: 959px) {

    /* Masquer la barre desktop */
    .lc-desktop-bar {
        display: none;
    }

    /* Menu mobile */
    .lc-menu {
        margin-top: 0;
        background: var(--lc-fond-gris);
    }

    /* ------------------------------------------------------------------
       6.1 Onglets espèces (Chien / Chat) — style pop
       ------------------------------------------------------------------ */
    .lc-tabs-mobile {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 100;
        gap: 8px;
        padding: 10px 12px;
        background: var(--lc-gris);
        border-bottom: 3px solid var(--lc-vert);
    }

    .lc-tab {
        position: relative;
        flex: 1;
        padding: 11px 10px;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: #cfcfcf;             /* usage unique */
        background: #565658;        /* usage unique */
        border: none;
        border-radius: 10px;
        box-shadow: 0 3px 0 var(--lc-gris-ombre);
        cursor: pointer;
        transition: transform 0.12s ease, box-shadow 0.12s ease,
                    background 0.18s ease, color 0.18s ease;
    }
    .lc-tab:active {
        transform: translateY(2px);
        box-shadow: 0 1px 0 var(--lc-gris-ombre);
    }
    .lc-tab-active {
        color: var(--lc-gris);
        background: #fff;
        box-shadow: 0 3px 0 var(--lc-vert);
    }

    /* Masquer les emojis dans les onglets espèces */
    .lc-tab .lc-tab-emoji {
        display: none;
    }

    /* ------------------------------------------------------------------
       6.2 Contenu mobile
       ------------------------------------------------------------------ */
    .lc-mobile-content {
        display: none;
        padding: 20px 12px 24px;
    }
    .lc-mobile-content.active {
        display: block;
    }

    .lc-mobile-item {
        margin-bottom: 12px;
    }

    /* ------------------------------------------------------------------
       6.3 Bouton « pop 3D » — base réutilisable
       (fond gris, relief vert, texte blanc)
       ------------------------------------------------------------------ */
    .lc-all-link,
    .lc-find-link,
    .lc-panel-view-all {
        position: relative;
        display: block;
        text-align: center;
        font-weight: 800;
        color: #fff !important;
        text-decoration: none;
        background: var(--lc-gris);
        border-radius: 12px;
        box-shadow: 0 4px 0 var(--lc-vert);
        transition: transform 0.12s ease, box-shadow 0.12s ease;
    }
    .lc-all-link:active,
    .lc-find-link:active,
    .lc-panel-view-all:active {
        transform: translateY(3px);
        box-shadow: 0 1px 0 var(--lc-vert);
    }

    /* « Tous les produits » — bouton principal */
    .lc-all-link {
        margin: 2px 0 16px;
        padding: 15px 20px;
        font-size: 15px;
        letter-spacing: 0.3px;
    }

    /* « Trouver la recette » — variante inversée (fond vert) */
    .lc-find-link {
        margin-top: 14px;
        padding: 13px 20px;
        font-size: 13.5px;
        font-weight: 700;
        background: var(--lc-vert);
        box-shadow: none;
    }
    .lc-find-link:active {
        background: var(--lc-vert-hover);
        box-shadow: none;
        transform: none;
    }

    /* ------------------------------------------------------------------
       6.4 Catégories principales — cartes pop
       (fond gris, texte blanc, relief vert + blob décoratif)
       ------------------------------------------------------------------ */
    .lc-main-cat {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 14px 16px;
        font-size: 15px;
        font-weight: 700;
        text-align: left;
        color: #fff;
        background: var(--lc-gris);
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 0 var(--lc-vert);
        cursor: pointer;
        transition: transform 0.12s ease, box-shadow 0.14s ease,
                    background 0.18s ease, color 0.18s ease;
    }

    /* Libellé + blob à gauche */
    .lc-main-cat > span:first-child {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1 1 auto;
        min-width: 0;
        padding-left: 0;
        line-height: 1.3;
        word-break: break-word;
        hyphens: auto;
    }

    /* Blob décoratif (forme « pop ») — une image différente par catégorie */
    .lc-main-cat > span:first-child::before {
        content: '';
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        transition: transform 0.18s ease;
    }
    .lc-main-cat[data-blob="1"] > span:first-child::before { background-image: url('../img/bg_other_1.png'); }
    .lc-main-cat[data-blob="2"] > span:first-child::before { background-image: url('../img/bg_other_3.png'); }
    .lc-main-cat[data-blob="3"] > span:first-child::before { background-image: url('../img/bg_other_4.png'); }
    .lc-main-cat[data-blob="4"] > span:first-child::before { background-image: url('../img/bg_other_5.png'); }
    .lc-main-cat[data-blob="5"] > span:first-child::before { background-image: url('../img/bg_other_6.png'); }

    /* NB : le translateY ci-dessous est écrasé par le scale(0.98) de la
       section 9 (comportement d'origine, conservé) ; le box-shadow reste. */
    .lc-main-cat:active {
        transform: translateY(3px);
        box-shadow: 0 1px 0 var(--lc-vert);
    }
    .lc-main-cat.active {
        border-radius: 12px 12px 0 0;
    }
    .lc-main-cat.active > span:first-child::before {
        transform: scale(1.08) rotate(-6deg);
    }

    /* Flèche */
    .lc-arrow {
        display: inline-block;
        flex: 0 0 auto;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid currentColor;
        transition: transform 0.2s;
    }
    .lc-main-cat.active .lc-arrow {
        transform: rotate(180deg);
    }

    /* ------------------------------------------------------------------
       6.5 Panneaux dépliables
       ------------------------------------------------------------------ */
    .lc-panel {
        max-height: 0;
        overflow: hidden;
        background: #fff;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 4px 0 var(--lc-vert);
    }
    .lc-panel.active {
        max-height: 6000px;
        padding: 14px 12px 16px;
    }

    /* Lien « Voir tout » dans le panel — bouton pop */
    .lc-panel-view-all {
        margin-bottom: 14px;
        padding: 13px 16px;
        font-size: 13.5px;
        letter-spacing: 0.2px;
    }

    /* Liens simples du panel */
    .lc-panel > a:not(.lc-panel-view-all) {
        position: relative;
        display: block;
        margin-bottom: 6px;
        padding: 13px 14px 13px 26px;
        font-size: 14px;
        font-weight: 600;
        color: var(--lc-gris);
        text-decoration: none;
        background: var(--lc-fond-gris);
        border-radius: 9px;
        transition: background 0.18s, color 0.18s, transform 0.1s;
    }
    .lc-panel > a:not(.lc-panel-view-all)::before {
        content: '';
        position: absolute;
        left: 12px;
        top: 50%;
        width: 6px;
        height: 6px;
        background: var(--lc-vert);
        border-radius: 50%;
        transform: translateY(-50%);
        transition: transform 0.15s ease;
    }
    .lc-panel > a:not(.lc-panel-view-all):active {
        color: var(--lc-vert);
        background: var(--lc-vert-pale);
        transform: scale(0.99);
    }
    .lc-panel > a:not(.lc-panel-view-all):last-child {
        margin-bottom: 0;
    }

    /* ------------------------------------------------------------------
       6.6 Sous-catégories
       ------------------------------------------------------------------ */
    .lc-subcat {
        margin-bottom: 8px;
    }
    .lc-subcat:last-child {
        margin-bottom: 0;
    }

    .lc-subcat-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 12px 14px;
        font-size: 14px;
        font-weight: 700;
        text-align: left;
        color: #fff;
        background: var(--lc-vert);
        border: none;
        border-radius: 10px;
        box-shadow: 0 2px 0 var(--lc-vert-relief);
        cursor: pointer;
        transition: transform 0.12s ease, box-shadow 0.14s ease,
                    background 0.18s ease, color 0.18s ease;
    }
    /* NB : translateY écrasé par le scale(0.98) de la section 9 (voir §6.4) */
    .lc-subcat-head:active {
        transform: translateY(2px);
        box-shadow: 0 0 0 var(--lc-vert-relief);
    }
    .lc-subcat-head > span:first-child {
        flex: 1 1 auto;
        min-width: 0;
        line-height: 1.3;
        word-break: break-word;
        hyphens: auto;
    }
    .lc-subcat-head.active {
        color: #fff;
        background: var(--lc-vert-actif);
        border-radius: 10px 10px 0 0;
        box-shadow: 0 2px 0 var(--lc-vert-relief-fonce);
    }

    .lc-arrow-sub {
        display: inline-block;
        flex: 0 0 auto;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid currentColor;
        transition: transform 0.2s;
    }
    .lc-subcat-head.active .lc-arrow-sub {
        transform: rotate(180deg);
    }

    .lc-subcat-panel {
        max-height: 0;
        overflow: hidden;
        background: #fbfbfb;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 2px 0 var(--lc-vert-relief-fonce);
    }
    .lc-subcat-panel.active {
        max-height: 3000px;
        padding: 8px;
    }

    .lc-subcat-panel a {
        position: relative;
        display: block;
        margin-bottom: 4px;
        padding: 11px 12px 11px 24px;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--lc-gris);
        text-decoration: none;
        background: #fff;
        border-radius: 8px;
        transition: background 0.18s, color 0.18s, transform 0.1s;
    }
    .lc-subcat-panel a::before {
        content: '';
        position: absolute;
        left: 11px;
        top: 50%;
        width: 5px;
        height: 5px;
        background: var(--lc-vert);
        border-radius: 50%;
        transform: translateY(-50%);
    }
    .lc-subcat-panel a:last-child {
        margin-bottom: 0;
    }
    .lc-subcat-panel a:active {
        color: var(--lc-vert);
        background: var(--lc-vert-pale);
        transform: scale(0.99);
    }
}


/* ==========================================================================
   7. DESKTOP (≥ 960px) — BARRE DE NAV + MÉGA-MENU
   ========================================================================== */
@media (min-width: 960px) {

    /* Masquer les éléments mobile */
    .lc-tabs-mobile,
    .lc-mobile-content {
        display: none !important;
    }

    /* ------------------------------------------------------------------
       7.1 Barre de navigation principale
       ------------------------------------------------------------------ */
    .lc-desktop-bar {
        position: relative;
        left: 50%;
        width: 100vw !important;
        margin-left: -50vw !important;
        height: 60px;
        padding: 0;
        line-height: 1;
        background: var(--lc-gris);
        border-bottom: 3px solid var(--lc-vert);
    }

    .lc-nav {
        display: flex;
        justify-content: center;
        align-items: stretch;
        max-width: 1400px;
        height: 60px;
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }

    .lc-nav-item {
        position: relative;
        display: flex;
        align-items: stretch;
        height: 60px;
    }

    .lc-nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        padding: 0 28px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.5px;
        white-space: nowrap;
        color: white;
        text-decoration: none;
        transition: all 0.3s;
    }
    .lc-nav-link:hover {
        color: var(--lc-gris);
        background: white;
    }

    .lc-nav-link.lc-promo {
        color: var(--lc-vert);
    }
    .lc-nav-link.lc-promo:hover {
        background: white;
    }

    .lc-nav-arrow {
        display: inline-block;
        margin-left: 6px;
        font-size: 9px;
        transition: transform 0.3s;
    }
    .lc-nav-item:hover .lc-nav-arrow {
        transform: translateY(2px);
    }

    /* ------------------------------------------------------------------
       7.2 Méga-menu (conteneur)
       ------------------------------------------------------------------ */
    .lc-mega {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        flex-direction: row;
        min-height: 400px;
        background: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .lc-nav-item:hover .lc-mega {
        display: flex;
    }

    /* ------------------------------------------------------------------
       7.3 Colonne 1 — catégories
       ------------------------------------------------------------------ */
    .lc-col1 {
        width: 220px;
        padding: 0 0 16px 0;
        background: white;
        border-right: 1px solid var(--lc-bordure);
    }

    .lc-cat {
        display: flex;
        align-items: center;
        min-height: 46px;
        padding: 14px 20px;
        text-decoration: none;
        border-left: 3px solid transparent;
        cursor: pointer;
        transition: all 0.2s;
    }
    .lc-cat:hover,
    .lc-cat.active {
        background: var(--lc-fond-hover);
        border-left-color: var(--lc-vert);
    }

    .lc-cat-label {
        font-size: 14px;
        font-weight: 600;
        color: var(--lc-gris);
    }
    .lc-cat:hover .lc-cat-label,
    .lc-cat.active .lc-cat-label {
        color: var(--lc-vert);
    }

    .lc-cat-find {
        margin-top: 12px;
    }

    .lc-find-link-desktop {
        display: block;
        margin: 0 16px;
        padding: 12px 20px;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        color: white;
        text-decoration: none;
        background: var(--lc-vert);
        border: 2px solid var(--lc-vert);
        border-radius: 4px;
        transition: all 0.2s;
    }
    .lc-find-link-desktop:hover {
        background: var(--lc-vert-hover);
        border-color: var(--lc-vert-hover);
    }

    /* Titres de colonnes */
    .lc-col1-title,
    .lc-col2-title,
    .lc-col3-title {
        margin: 0;
        padding: 12px 20px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        line-height: 1;
        text-transform: uppercase;
        color: var(--lc-vert);
        background: white;
        border-bottom: 2px solid var(--lc-bordure);
    }

    /* ------------------------------------------------------------------
       7.4 Colonne 2 — sous-catégories
       ------------------------------------------------------------------ */
    .lc-col2 {
        display: none;
        width: 260px;
        padding: 0 0 16px 0;
        background: white;
        border-right: 1px solid var(--lc-bordure);
    }
    .lc-col2.visible {
        display: block;
    }

    .lc-sub {
        display: none;
        align-items: center;
        min-height: 46px;
        padding: 14px 20px;
        text-decoration: none;
        border-left: 3px solid transparent;
        cursor: pointer;
        transition: all 0.2s;
    }
    .lc-sub.visible {
        display: flex;
    }
    .lc-sub:hover,
    .lc-sub.active {
        background: var(--lc-fond-hover);
        border-left-color: var(--lc-vert);
    }

    .lc-sub-label {
        font-size: 13px;
        font-weight: 600;
        color: var(--lc-gris);
    }
    .lc-sub:hover .lc-sub-label,
    .lc-sub.active .lc-sub-label {
        color: var(--lc-vert);
    }

    /* Sous-catégories simples — voir aussi les règles globales (section 3),
       de spécificité supérieure, qui s'appliquent en priorité aux liens */
    .lc-sub-simple {
        display: none;
        flex-direction: column;
        min-height: auto;
        padding: 8px 0;
        border-left: 3px solid transparent;
    }
    .lc-sub-simple.visible {
        display: flex;
    }
    .lc-sub-simple a {
        display: block;
        padding: 10px 20px;
        font-size: 13px;
        color: var(--lc-texte-secondaire);
        text-decoration: none;
        transition: all 0.2s ease;
    }
    .lc-sub-simple a:hover {
        padding-left: 28px;
        color: var(--lc-vert);
    }

    /* ------------------------------------------------------------------
       7.5 Colonne 3 — options
       ------------------------------------------------------------------ */
    .lc-col3 {
        display: none;
        width: 240px;
        padding: 0 0 16px 0;
        background: white;
    }
    .lc-col3.visible {
        display: block;
    }

    .lc-opts {
        display: none;
        margin: 0;
        padding: 0;
    }
    .lc-opts.visible {
        display: block;
    }

    .lc-opts h4 {
        margin: 0;
        padding: 12px 20px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        line-height: 1;
        text-transform: uppercase;
        color: var(--lc-vert);
        background: white;
        border-bottom: 2px solid var(--lc-bordure);
    }

    .lc-opts a {
        display: block;
        padding: 10px 20px;
        font-size: 13px;
        font-weight: 400;
        color: var(--lc-texte-secondaire);
        text-decoration: none;
        transition: all 0.2s ease;
    }
    .lc-opts a:hover {
        padding-left: 28px;
        color: var(--lc-vert);
        background: var(--lc-fond-hover);
    }
}


/* ==========================================================================
   8. ANIMATIONS
   --------------------------------------------------------------------------
   ⚠ Les transitions de .lc-panel / .lc-subcat-panel ci-dessous sont
   NEUTRALISÉES par le kill-switch de la section 3 (transition: none
   !important). Elles sont conservées pour pouvoir réactiver l'animation
   en supprimant simplement le kill-switch.
   ========================================================================== */
.lc-panel,
.lc-subcat-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}
.lc-panel.active {
    max-height: 6000px;
    opacity: 1;
}
.lc-subcat-panel.active {
    max-height: 3000px;
    opacity: 1;
}

/* Flèches : cette transition (0.25s) remplace celle de la section 6 (0.2s) —
   même spécificité, déclarée plus tard (comportement d'origine conservé) */
.lc-arrow,
.lc-arrow-sub {
    display: inline-block;
    transition: transform 0.25s;
}
.lc-main-cat.active .lc-arrow,
.lc-subcat-head.active .lc-arrow-sub {
    transform: rotate(180deg);
}

.lc-main-cat,
.lc-subcat-head {
    transition: background-color 0.2s;
}

/* Hover : uniquement sur desktop, et sur surface claire.
   Sur mobile les boutons sont gris/vert : pas de hover de fond
   (le texte est blanc, un fond clair le rendrait illisible). */
@media (min-width: 960px) and (hover: hover) {
    .lc-main-cat:hover,
    .lc-subcat-head:hover {
        background-color: rgba(167, 188, 68, 0.08);
    }
}

@media (min-width: 960px) {
    .lc-mega {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;
    }
    .lc-nav-item:hover .lc-mega {
        opacity: 1;
        visibility: visible;
    }

    .lc-col2,
    .lc-col3 {
        opacity: 0;
        transition: opacity 0.15s;
    }
    .lc-col2.visible,
    .lc-col3.visible {
        opacity: 1;
    }
}


/* ==========================================================================
   9. FOCUS & RETOURS TACTILES
   ========================================================================== */

/* Vert en dur : l'anneau de focus ne suit pas la couleur BO (comportement
   d'origine conservé) */
.lc-main-cat:focus-visible,
.lc-subcat-head:focus-visible,
.lc-tab:focus-visible {
    outline: 2px solid #a7bc44;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(167, 188, 68, 0.2);
}

/* ⚠ Ce scale écrase les translateY déclarés en section 6 sur les mêmes
   sélecteurs :active (même spécificité, déclaré plus tard). C'est donc lui
   qui s'applique aujourd'hui — comportement d'origine conservé. */
@media (max-width: 959px) {
    .lc-main-cat:active,
    .lc-subcat-head:active {
        transform: scale(0.98);
    }
}


/* ==========================================================================
   10. INTÉGRATION THÈME — ALIGNEMENT DE LA BARRE DESKTOP
   --------------------------------------------------------------------------
   Les !important surclassent les règles du thème sur .menu.js-top-menu.
   ========================================================================== */
@media (min-width: 960px) {
    .lc-desktop-bar {
        display: block !important;
        height: 60px !important;
    }

    .menu.js-top-menu .lc-nav {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 60px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .menu.js-top-menu .lc-nav > li {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .menu.js-top-menu .lc-nav > li > a.lc-nav-link {
        display: inline-flex !important;
        align-items: center !important;
        height: 60px !important;
        line-height: 60px !important;
        padding: 0 28px !important;
    }
}


/* ==========================================================================
   11. NAVBAR MOBILE (< 960px) — v3.1.0
   --------------------------------------------------------------------------
   Header sticky, logo centré, burger animé, utilitaires et recherche.
   Les !important surclassent les règles #header du thème.
   ========================================================================== */
@media (max-width: 959px) {

    /* Masquer les éléments desktop */
    .header-additional {
        display: none !important;
    }

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

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

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

    /* ------------------------------------------------------------------
       11.2 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;
        margin: 0 !important;
        padding: 0 15px !important;
        overflow: visible !important;
    }

    /* Masquer les enfants indésirables
       (le toggler natif n'existe plus dans le DOM, supprimé du template) */
    .header-main-inner > *:not(.header-logo):not(.lc-burger):not(#main-nav) {
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* ------------------------------------------------------------------
       11.3 Menu #main-nav : fixé sous le header
       Spécificité maximale pour surclasser le thème (#header .menu).
       top et height sont définis dynamiquement par le JS.
       ------------------------------------------------------------------ */
    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;
        z-index: 999 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: none !important;
    }

    /* ------------------------------------------------------------------
       11.4 Logo centré
       ------------------------------------------------------------------ */
    .header-logo,
    .header-main-inner .header-logo,
    .header-main .header-logo {
        position: relative !important;
        z-index: 1;
        display: block !important;
        flex: 0 0 auto !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
        overflow: visible !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .header-logo img {
        display: block;
        width: auto;
        height: 40px;
    }
    .header-logo h1 {
        margin: 0;
        padding: 0;
        line-height: 1;
    }

    /* ------------------------------------------------------------------
       11.5 Burger à gauche
       ------------------------------------------------------------------ */
    .lc-burger {
        position: absolute !important;
        left: 10px;
        right: auto;
        top: 50%;
        z-index: 1001;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
        transform: translateY(-50%);
        overflow: visible !important;
        visibility: visible !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent;
    }

    .lc-burger-lines {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        width: 26px;
        height: 20px;
    }
    .lc-burger-lines span {
        position: absolute;
        right: 0;
        display: block;
        height: 2.5px;
        background-color: #414142; /* gris en dur : indépendant du BO */
        border-radius: 2px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .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;
    }

    /* État ouvert : croix */
    .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) {
        width: 0;
        opacity: 0;
    }
    .lc-burger.is-open .lc-burger-lines span:nth-child(3) {
        width: 26px;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
    }

    /* ------------------------------------------------------------------
       11.6 Utilitaires (Magasins / Compte / Panier)
       ------------------------------------------------------------------ */
    #main-nav .lc-nav-utilities {
        display: flex;
        gap: 8px;
        padding: 8px 12px;
        background: var(--lc-gris, #414142);
        border-bottom: none;
    }
    #main-nav .lc-nav-utilities a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 1;
        padding: 8px 6px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.2px;
        color: #fff;
        text-decoration: none;
        background: #4f4f51;   /* usage unique */
        border: none;
        border-radius: 8px;
        box-shadow: none;
        transition: background 0.18s ease;
    }
    #main-nav .lc-nav-utilities a:active {
        color: #fff;
        background: #5e5e60;   /* usage unique */
    }
    #main-nav .lc-nav-utilities a svg {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        stroke: #fff;
        stroke-width: 1.8;
        fill: none;
    }

    /* ------------------------------------------------------------------
       11.7 Recherche
       Sélecteurs préfixés #main-nav : le thème applique des règles
       #header form / #header input qui écrasent les classes simples ;
       #main-nav remet la spécificité à niveau.
       ------------------------------------------------------------------ */
    #main-nav .lc-nav-search {
        padding: 0 12px 4px;
        background: var(--lc-gris, #414142);
        border-bottom: none;
    }

    #main-nav .lc-nav-search-input {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin: 0;
        padding: 6px 12px !important;
        background: #fff;
        border: 2px solid transparent;
        border-radius: 9px;
        box-shadow: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    #main-nav .lc-nav-search-input:focus-within {
        border-color: var(--lc-vert, #a7bc44);
        box-shadow: 0 0 0 3px rgba(167, 188, 68, 0.18);
    }

    #main-nav .lc-nav-search-input input {
        flex: 1;
        min-width: 0;
        height: auto;
        margin: 0;
        font-size: 14px;
        color: #414142; /* gris en dur : indépendant du BO */
        background: none;
        border: none;
        outline: none;
        box-shadow: none;
    }
    #main-nav .lc-nav-search-input input::placeholder {
        color: var(--lc-gris-clair);
    }

    #main-nav .lc-nav-search-input svg {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        stroke: var(--lc-gris-clair);
        stroke-width: 2;
        fill: none;
    }

    #main-nav .lc-nav-search-input button {
        display: flex;
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        cursor: pointer;
    }
}

/* Éléments mobile masqués en desktop */
@media (min-width: 960px) {
    .lc-burger,
    .lc-nav-utilities,
    .lc-nav-search {
        display: none !important;
    }
}


/* ==========================================================================
   12. HEADER DESKTOP MODERNISÉ (≥ 960px) — v3.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)
   ========================================================================== */
@media (min-width: 960px) {

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

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

    /* ------------------------------------------------------------------
       12.1 header-main-inner : grille du thème (gouttières -12px)
       ------------------------------------------------------------------ */
    .header-main-inner {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
    }

    /* ------------------------------------------------------------------
       12.2 Logo — 33.33 % comme le thème
       ------------------------------------------------------------------ */
    .header-logo {
        flex: 0 0 auto !important;
        width: 33.3333% !important;
        height: 80px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        justify-content: flex-start !important;
    }
    .header-logo img {
        display: block !important;
        width: auto !important;
        height: 42px !important;
    }
    .header-logo h1 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

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

    .header-main .search-widget form {
        display: flex !important;
        background: #f5f5f5 !important;      /* usage unique */
        border: 1.5px solid #ddd !important; /* usage unique */
        border-radius: 8px !important;
        overflow: hidden !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 input[type="text"],
    .header-main .search-widget input[type="search"] {
        flex: 1 !important;
        height: 42px !important;
        padding-left: 14px !important;
        font-size: 14px !important;
        color: #414142 !important; /* gris en dur : indépendant du BO */
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    .header-main .search-widget input::placeholder {
        color: #aaa !important; /* usage unique */
        font-weight: 400 !important;
    }

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

    /* ------------------------------------------------------------------
       12.4 Header additional — 25 % (thème large), icônes Lucide
       Couleurs des SVG codées dans les data-URI (non variabilisables) :
       gris #414142 par défaut, vert #a7bc44 au survol.
       ------------------------------------------------------------------ */
    .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");
    }

    /* ------------------------------------------------------------------
       12.5 #main-nav : même hack que le thème pour #header .menu
       (width:100vw + marges négatives en calc)
       ------------------------------------------------------------------ */
    .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;
    }

    /* ------------------------------------------------------------------
       12.6 Barre de nav sticky (classe posée par le JS)
       ------------------------------------------------------------------ */
    .lc-desktop-bar.lc-nav-sticky {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9990 !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    }
}


/* ==========================================================================
   13. ÉCRANS MOYENS (960px – 1199px)
   --------------------------------------------------------------------------
   Le thème passe en grille 33 % avec wrapper 1200px : on réduit la
   recherche et on masque le texte des icônes.
   ========================================================================== */
@media (min-width: 960px) and (max-width: 1199px) {
    .header-logo {
        flex: 0 0 auto !important;
        width: auto !important;
    }
    .header-logo img {
        height: 35px !important;
    }

    .header-main .search-widget {
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0 !important;
    }
    .header-main .search-widget input[type="text"],
    .header-main .search-widget input[type="search"] {
        height: 38px !important;
        font-size: 13px !important;
    }
    .header-main .search-widget button {
        width: 38px !important;
        height: 38px !important;
    }

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

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