:root {
    /* Couleurs */
    --background-color: var(--background-color, #ffffff);      /* Fond blanc pur */
    --primary-color: var(--text-color, #000000);     /* Couleur principale du texte - noir */
    --medium-gray: var(--medium-gray, #333333);   /* Texte secondaire */
    --light-bg: var(--light-bg, #f8f8f8);      /* Fond au survol des liens - gris ultra-léger */
    --border-color-light: var(--border-color-light, #e8e8e8);  /* Bordure légère subtile */
    --shadow-light: rgba(0, 0, 0, 0.08); /* Ombre portée légère */
    --shadow-medium: rgba(0, 0, 0, 0.12); /* Ombre portée moyenne */
    --primary-color: var(--primary-color, #000000);  /* Couleur d'accent - noir */
    --primary-color: var(--primary-color, #000000);     /* Fond bouton noir */
    --background-color: var(--button-text-color, #ffffff);   /* Texte bouton blanc */
    --secondary-color: var(--secondary-color, #333333);  /* Fond bouton au survol */

    /* Typographie */
    --font-family: var(--font-family-base, Arial, sans-serif);
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* 🌟 Style général du menu */
.a4w-megamenu {
    background: var(--background-color);
    padding: 0px 0;
    font-family: var(--font-family);
    position: relative;
}

#header .menu {
    padding-left: 0;
    /*width: 100%;*/
    /*background-color: var(--light-bg);*/
    margin: 0 auto;
}

/* 🌟 Organisation du menu principal */
.a4w-megamenu .nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
}

/* 🌟 Mode horizontal */
.nav-princ {
    display: flex;
    gap: 20px;
}

/* 🌟 Mode vertical */
.nav-vertical {
    display: block;
}

/* 🌟 Élément principal */
.a4w-megamenu .nav-item {
    position: static;
    display: flex;
    align-items: center;
}

/* 🌟 Style des liens niveau 0 */
.a4w-megamenu .main-menu__tree > li > a,
.a4w-megamenu .nav > .nav-item > .nav-link {
    outline-offset: -.5rem;
    padding: 1.5rem 1px;
}

/* 🌟 Masquer la flèche dropdown-toggle */
.a4w-megamenu .dropdown-toggle::after {
    display: none;
}

/* 🌟 Séparateur entre les liens du niveau 0 (desktop) */
@media (min-width: 1200px) {
    .a4w-megamenu .nav-item > .nav-link {
        display: inline-flex;
        align-items: center;
        line-height: 1;
    }

    .a4w-megamenu .nav-item:not(:last-child) > .nav-link::after {
        content: '';
        display: block;
        flex: 0 0 auto;
        width: 7.647px;
        height: 7.647px;
        border-radius: 382.341px;
        background: #593322;
        margin-left: 15px;
    }

    .a4w-megamenu .nav-item:not(:last-child) {
        margin-right: 15px;
    }
}

/* 🌟 Affichage du menu au survol */
.a4w-megamenu .nav-item:hover > .dropdown-menu2,
.a4w-megamenu .nav-item:hover > .menu-container {
    display: block;
    width: 1240px;
    opacity: 1;
}

/* 🌟 Mode horizontal */
.mega-menu {
    min-width: 600px;
    padding: 20px;
}

/* 🌟 Mode vertical */
.nav-vertical .dropdown-menu2 {
    left: 100%;
    top: 0;
    min-width: 250px; 
    padding: 10px;
}

/* 🌟 Alignement en colonnes des sous-menus */
.sub-menu-container {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: var(--background-color);
    min-width: 250px;
    padding: 10px;
    box-shadow: 0 4px 6px var(--shadow-light);
}

/* 🌟 Garder le sous-menu ouvert lorsque la souris est dessus */
.menu-item.has-children:hover > .sub-menu-container,
.sub-menu-container:hover {
    display: flex;
    flex-direction: column;
}

/* 🌟 Correction pour aligner tous les niveaux */
.sub-menu-container .sub-menu-container {
    top: 0 !important;
    left: 100%;
}

/* 🌟 Catégories principales */
.menu-column {
    width: 250px;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

/* 🌟 Élément de menu */
.menu-item {
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 🎨 Chevron moderne avec rotation */
.menu-item.has-children > .chevron {
    font-size: 14px;
    font-weight: bold;
    margin-left: 10px;
    color: var(--primary-color);
    transition: transform 0.2s ease;
    display: inline-block;
}

.menu-item.has-children:hover > .chevron {
    transform: translateX(4px);
}

/* STYLE BOUTON - Niveau 0 */
.nav-item.btn-style {
    background: var(--primary-color);
    padding: 0;
    margin: 0 8px;
    transition: all 0.3s ease;
}

.nav-item.btn-style .nav-link {
    color: var(--background-color) !important;
    padding: 16px !important;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-item.btn-style:hover {
    background: var(--secondary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-item.btn-style:hover .nav-link {
    color: var(--background-color) !important;
}

/* 🌟 Style des liens - Menu normal */
.a4w-megamenu a {
    text-decoration: none;
    color: var(--primary-color);
    padding: 15px 5px;
    display: block;
    font-weight: var(--font-weight-normal);
    transition: all 0.15s ease;
}

/* 🌟 Effet hover - Menu principal niveau 0 */
.a4w-megamenu .nav-item:not(.btn-style) .nav-link:hover {
    color: var(--primary-color);
}

/* 🌟 Structure en colonnes */
.mega-menu-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
}

/* 🌟 Conteneur du niveau 3 */
.mega-menu-level-3-container {
    position: relative;
    min-width: 250px;
    padding-left: 15px;
}

/* 🌟 Niveau 3 : Masqué par défaut */
.mega-menu-level-3 {
    display: none;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* 🌟 Affichage du niveau 3 au survol */
.menu-item.has-children:hover > .mega-menu-level-3,
.mega-menu-level-3:hover {
    display: block;
}

/* 🌟 Organisation des niveaux */
.mega-menu-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
}

.mega-menu-level-2,
.mega-menu-level-3,
.mega-menu-level-4,
.mega-menu-level-5 {
    min-width: 250px;
    padding-right: 15px;
}

/* ✅ Force l'alignement des colonnes pour qu'elles aient toutes la même hauteur */
.mega-menu-row {
    display: flex;
    align-items: stretch; /* 🔥 Étire les colonnes pour qu'elles aient la même hauteur */
}

/* ✅ Chaque colonne remplit tout l'espace disponible */
.mega-menu-column {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    min-height: 100%;
}

/* 🎨 Bordures subtiles entre colonnes */
.mega-menu-level-2:has(.menu-item.has-children),
.mega-menu-level-3:has(.menu-item.has-children),
.mega-menu-level-4:has(.menu-item.has-children),
.mega-menu-level-5:has(.menu-item.has-children) {
    border-right: 1px solid var(--border-color-light);
    height: auto;
    padding-right: 20px;
    margin-right: 20px;
}

/* ✅ Bordure aussi pour CMS si des catégories ont des enfants */


/* 🌟 Niveau 3 (caché par défaut) */
.mega-menu-level-3,
.mega-menu-level-4,
.mega-menu-level-5 {
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* 🌟 Afficher le niveau 3, 4, 5 actif */
.mega-menu-level-3.active,
.mega-menu-level-4.active,
.mega-menu-level-5.active {
    display: block;
    opacity: 1;
}

/* 🌟 Afficher les niveaux au hover */
.menu-item.has-children:hover > .mega-menu-level-3,
.menu-item.has-children:hover > .mega-menu-level-4,
.menu-item.has-children:hover > .mega-menu-level-5,
.mega-menu-level-3:hover,
.mega-menu-level-4:hover,
.mega-menu-level-5:hover {
    display: block;
    opacity: 1;
}

/* 🌟 Garder les sub-menu-container visibles */
.menu-item.has-children:hover > .sub-menu-container,
.sub-menu-container:hover {
    display: block;
    opacity: 1;
}


/* 🎨 Style des titres dans sous-menus */
.vertical .mg-title,
.mg-title {
    font-weight: var(--font-weight-bold);
    font-size: 15px;
    color: var(--primary-color);
    margin-bottom: 6px;
    margin-top: 3px;
    display: block;
    padding: 10px 15px !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 4px;
}

/* 🎨 Rapprochement des éléments dans le menu vertical */
.vertical .category-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vertical .subcategory-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 2px;
    margin-bottom: 8px;
    padding-left: 0;
}

/* 🎨 Hiérarchie visuelle - Niveau 1 (catégories principales avec enfants) */
.vertical .category-group > a.mg-title {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    padding: 12px 15px !important;
    margin-top: 0;
    background: none;
}

/* 🎨 Niveau 2 (sous-catégories avec enfants) */
.vertical .subcategory-list > a.mg-title {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    padding: 9px 15px 9px 25px !important;
    margin-top: 6px;
    background: transparent;
    border-left: 3px solid var(--primary-color);
}

/* 🎨 Niveau 3 (sous-sous-catégories avec enfants) */
.vertical .subcategory-list .subcategory-list > a.mg-title {
    font-size: 13px;
    padding: 8px 15px 8px 35px !important;
    text-transform: none;
    background: transparent;
    border-left: 2px solid var(--medium-gray);
}

/* 🎨 Niveau 4 (avec enfants) */
.vertical .subcategory-list .subcategory-list .subcategory-list > a.mg-title {
    font-size: 13px;
    padding: 7px 15px 7px 45px !important;
    font-weight: var(--font-weight-normal);
    font-style: italic;
}

/* 🎨 Éléments sans enfants - Niveau 2 */
.vertical .subcategory-list > a:not(.mg-title) {
    padding: 7px 15px 7px 25px !important;
    font-size: 14px;
    color: var(--medium-gray);
}

/* 🎨 Éléments sans enfants - Niveau 3 */
.vertical .subcategory-list .subcategory-list > a:not(.mg-title) {
    padding: 6px 15px 6px 35px !important;
    font-size: 13px;
    color: var(--medium-gray);
}

/* 🎨 Éléments sans enfants - Niveau 4 */
.vertical .subcategory-list .subcategory-list .subcategory-list > a:not(.mg-title) {
    padding: 6px 15px 6px 45px !important;
    font-size: 13px;
    color: var(--medium-gray);
}

/* 🎨 Éléments sans enfants - Niveau 5 */
.vertical .subcategory-list .subcategory-list .subcategory-list .subcategory-list > a {
    padding: 5px 15px 5px 55px !important;
    font-size: 12px;
    color: var(--medium-gray);
}

/* 🎨 Amélioration du hover pour tous les niveaux */
.vertical .category-group a:hover,
.vertical .subcategory-list a:hover {
    background: var(--light-bg) !important;
    color: var(--primary-color) !important;
    transform: translateX(3px);
}

/* 🎨 Espacement entre les groupes de catégories */
.vertical .menu-item.has-children {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color-light);
}

.vertical .menu-item.has-children:last-child {
    border-bottom: none;
}
.svg-menu svg{
    width: 20px;
    height: 20px;
    margin-left: 6px;
}
.svg-menu {
    width: 0px;
}
#desktop-menu .nav-link {
    display: flex;
}
/* 🎨 Amélioration des liens dans sous-menus - Desktop uniquement */
@media (min-width: 992px) {
    .mega-menu-level-2 a,
    .mega-menu-level-3 a,
    .mega-menu-level-4 a,
    .mega-menu-level-5 a,
    .dropdown-menu2 a {
        padding: 10px 15px !important;
        font-size: 14px;
        color: var(--medium-gray);
        position: relative;
        border-left: 3px solid transparent;
        transition: all 0.15s ease;
        border-bottom: none !important;
    }

    .mega-menu-level-2 a:hover,
    .mega-menu-level-3 a:hover,
    .mega-menu-level-4 a:hover,
    .mega-menu-level-5 a:hover,
    .dropdown-menu2 a:hover {
        background: var(--light-bg) !important;
        border-left-color: var(--primary-color);
        padding-left: 20px !important;
        color: var(--primary-color);
        border-bottom: none !important;
    }
}

/* 🌟 Assurer que le survol garde le niveau 3 visible */
.mega-menu-level-3:hover {
    display: block;
    opacity: 1;
}

/* 🌟 Afficher le niveau 2 lorsqu'on survole un élément du niveau 1 */
.a4w-megamenu .nav-item:hover > .dropdown-menu2,
.a4w-megamenu .nav-item:hover > .menu-container,
.dropdown-menu2:hover,
.menu-container:hover {
    display: block !important;
}
.menu-item.has-children > div > div > a:hover {
    margin-left: 10px;
  }

/* 🎨 AMÉLIORATION SOUS-MENUS - Dropdown moderne */
.dropdown-menu2,
.menu-container.dropdown-menu2 {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    width: max-content;
    background: var(--background-color);
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 8px 16px var(--shadow-light);
    border-radius: 8px;
    border-top: 3px solid var(--primary-color);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* Override Hummingbird desktop dropdown positioning (theme uses left: 0; right: 0) */
@media (min-width: 1200px) {
    .a4w-megamenu .main-menu__tree > li > .menu-container.dropdown-menu2 {
        left: 43%;
        right: auto;
        transform: translateX(-50%);
    }
}

.nav-item:hover .dropdown-menu2,
.nav-item:hover .menu-container {
    opacity: 1;
}

/* 🌟 Garder le niveau 2 ouvert lorsqu'on survole */
.nav-item.has-dropdown:hover > .dropdown-menu2,
.nav-item.has-dropdown:hover > .menu-container,
.dropdown-menu2:hover,
.menu-container.dropdown-menu2:hover {
    display: block;
}

/* 🎨 Séparateurs subtils entre sections */
.mega-menu-column + .mega-menu-column {
    position: relative;
}

.mega-menu-column + .mega-menu-column::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 1px;
    background: var(--border-color-light);
}

/* Masquer le séparateur pour le mode vertical */
.mega-menu-row.vertical .mega-menu-column + .mega-menu-column::before {
    display: none;
}

@media (min-width: 1610px) and (max-width: 1920px) {
    .a4w-megamenu .nav-item:hover > .dropdown-menu2 {
        display: block;
        width: min(calc(100vw - var(--a4w-container-gutter, 2rem)), var(--a4w-container-xxl-max-width, 1320px));
        opacity: 1;
    }
}

/* 🌟 Assurer que le niveau 3 fonctionne comme prévu */
.mega-menu-level-3,
.mega-menu-level-4,
.mega-menu-level-5 {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.menu-item.has-children:hover > .mega-menu-level-3,
.mega-menu-level-3:hover {
    display: block;
    opacity: 1;
}

/* 🌟 Afficher le niveau 4 et 5 au survol */
.menu-item.has-children:hover > .mega-menu-level-4,
.mega-menu-level-4:hover {
    display: block;
}

.menu-item.has-children:hover > .mega-menu-level-5,
.mega-menu-level-5:hover {
    display: block;
}

.mega-menu-level-4.active,
.mega-menu-level-5.active {
    display: block;
    opacity: 1;
}

.vertical .menu-item {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.vertical .mega-menu-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100%;
    width: 100%;
}

a.nav-link {
    text-transform: uppercase;
}

/* 🎨 Amélioration espacement menu-item */
.menu-item {
    margin-bottom: 4px;
}

.menu-item a {
    border-radius: 4px;
}

/* 🎨 Style des conteneurs de sous-menu */
.sub-menu-container {
    background: var(--background-color);
    box-shadow: 0 4px 8px var(--shadow-light);
    border-radius: 4px;
}

@media (max-width: 1025px) {
    .a4w-megamenu .nav-item:hover > .dropdown-menu2 {
        width: 100%;
    }
    .a4w-megamenu a {
        padding: 10px 5px;
    }

    /* Désactiver le style bouton sur mobile */
    .nav-item.btn-style {
        background: transparent;
        border-radius: 0;
        margin: 0;
    }

    .nav-item.btn-style .nav-link {
        color: var(--primary-color) !important;
        padding: 15px 5px !important;
    }
}

/* ===================================
   MODE BLOCK - Affichage en blocs
   =================================== */

/* Container général pour le mode block */
.dropdown-display-mode-block {
    margin-bottom: 10px;
}

/* Surcharge des styles de .dropdown-menu2 a pour le mode block */
.dropdown-display-mode-block a.category-block-item,
.dropdown-display-mode-block a.cms-block-item,
.dropdown-display-mode-block a.custom-block-item {
    padding: 10px !important;
    border: 2px solid #000000 !important;
    border-left: 2px solid #000000 !important;
    border-bottom: 2px solid #000000 !important;
    display: flex;
    align-items: center;
}

/* Surcharge du hover pour le mode block */
.dropdown-display-mode-block a.category-block-item:hover,
.dropdown-display-mode-block a.cms-block-item:hover,
.dropdown-display-mode-block a.custom-block-item:hover {
    padding: 10px !important;
    border: 2px solid #000000 !important;
    border-left: 2px solid #000000 !important;
    border-left-color: #000000 !important;
    border-bottom: 2px solid #000000 !important;
    background-color: #000000 !important;
    background: #000000 !important;
    color: #000000 !important;
    color: #ffffff !important;
}

/* Blocs de catégories */
.category-blocks {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.category-block-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 25px;
    background-color: #ffffff;
    border: 2px solid #000000;
    border-radius: 0;
    color: #000000;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease;
    position: relative;
    margin-bottom: -2px;
}

.category-block-item:first-child {
    border-top: 2px solid #000000;
}

.category-block-item:last-child {
    border-bottom: 2px solid #000000;
    margin-bottom: 0;
}

.category-block-item::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    transform: rotate(-45deg);
    margin-left: 10px;
}

.category-block-item:hover {
    background-color: #f5f5f5;
    color: #000000;
}

.category-block-item:hover::after {
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

/* Blocs CMS */
.cms-blocks {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cms-block-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 25px;
    background-color: #ffffff;
    border: 2px solid #000000;
    border-radius: 0;
    color: #000000;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease;
    position: relative;
    margin-bottom: -2px;
}

.cms-block-item:first-child {
    border-top: 2px solid #000000;
}

.cms-block-item:last-child {
    border-bottom: 2px solid #000000;
    margin-bottom: 0;
}

.cms-block-item::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    transform: rotate(-45deg);
    margin-left: 10px;
}

.cms-block-item:hover {
    background-color: #f5f5f5;
    color: #000000;
}

/* Bloc Custom URL */
.custom-block-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 25px;
    background-color: #ffffff;
    border: 2px solid #000000;
    border-radius: 0;
    color: #000000;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease;
    position: relative;
}

.custom-block-item::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    transform: rotate(-45deg);
    margin-left: 10px;
}

.custom-block-item:hover {
    background-color: #f5f5f5;
    color: #000000;
}

/* ===================================
   TRANSPARENT MODE - Homepage only
   =================================== */

/* Note: the header transitions are declared inside the @media block below and
   gated behind `.header-fade-ready` so they only run after the first paint
   (no fade-in on initial load) and only where the transparent effect applies. */

/* ---- TRANSPARENT STATE (desktop only) ---- */
@media (min-width: 1200px) {

    /* Header pinned consistently in BOTH states -> it never changes position,
       so there's no jump and no content shift. Only its appearance changes. */
    body#index .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 100;
    }

    /* Fluid fades — gated behind .header-fade-ready (added by JS once the
       initial state is painted) so nothing animates on first load. */
    body#index.header-fade-ready .header {
        transition: background-color 0.45s ease, box-shadow 0.45s ease;
    }

    /* Transparent state: white-alpha (not `transparent`) so the fade to white
       is clean, avoiding the muddy black interpolation from `transparent`. */
    body#index .header--transparent {
        background-color: rgba(255, 255, 255, 0) !important;
    }

    .header-bottom {
     --header-top-border-bottom: none !important;
     --header-bottom-border-bottom: none !important;
     border-bottom: none !important;
    }

    .header, #header {
        border-bottom: none !important;
    }

    /* Dark gradient overlay is always present; its OPACITY fades (1 in the
       transparent state, 0 in solid) instead of display:none, so it dissolves. */
    body#index .header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0) 100%);
        pointer-events: none;
        z-index: 0;
        opacity: 0;
    }

    body#index.header-fade-ready .header::after {
        transition: opacity 0.45s ease;
    }

    body#index .header--transparent::after {
        opacity: 1;
    }

    /* Content stays above the overlay in BOTH states (so it doesn't shift during the fade) */
    body#index .header > * {
        position: relative;
        z-index: 1;
    }

    /* Sub-sections stay transparent in both states: only the main header bg
       paints, so a single clean fade happens behind everything. */
    body#index .header-top,
    body#index .header-bottom,
    body#index .a4w-megamenu {
        background: transparent !important;
    }

    /* ---- Fluid transitions for text / icons / logo / accents (gated) ---- */
    body#index.header-fade-ready .header-top,
    body#index.header-fade-ready .header-top a,
    body#index.header-fade-ready .header-bottom,
    body#index.header-fade-ready .header-block__title,
    body#index.header-fade-ready .header-block__badge,
    body#index.header-fade-ready .a4w-megamenu > .nav > .nav-item > .nav-link,
    body#index.header-fade-ready .header-bottom > .container-md a,
    body#index.header-fade-ready .material-icons,
    body#index.header-fade-ready .header-block__icon.material-icons {
        transition: color 0.45s ease;
    }

    body#index.header-fade-ready img.header-block__icon,
    body#index.header-fade-ready .header .logo img {
        transition: filter 0.45s ease, opacity 0.45s ease;
    }

    body#index.header-fade-ready .a4w-megamenu .nav-item:not(:last-child) > .nav-link::after {
        transition: background-color 0.45s ease;
    }

    body#index.header-fade-ready .nav-item.btn-style {
        transition: background-color 0.45s ease, border-color 0.45s ease;
    }

    /* White text for level 0 elements only in transparent mode */
    body#index .header--transparent,
    body#index .header--transparent .header-top,
    body#index .header--transparent .header-top a,
    body#index .header--transparent .header-bottom,
    body#index .header--transparent .header-block__title,
    body#index .header--transparent .header-block__badge {
        color: #ffffff !important;
    }

    /* Level 0 menu links only */
    body#index .header--transparent .a4w-megamenu > .nav > .nav-item > .nav-link {
        color: #ffffff !important;
    }

    /* Other header links (sign in, etc.) but NOT dropdown links */
    body#index .header--transparent .header-bottom > .container-md a:not(.dropdown-item):not(.btn):not(.dropdown-menu2 a):not(.menu-container a) {
        color: #ffffff !important;
    }

    /* White material icons */
    body#index .header--transparent .material-icons,
    body#index .header--transparent .header-block__icon.material-icons {
        color: #ffffff !important;
    }

    /* White SVG icons (cart, user, search) */
    body#index .header--transparent img.header-block__icon {
        filter: brightness(0) invert(1);
    }

    /* White separator dots between menu items */
    body#index .header--transparent .a4w-megamenu .nav-item:not(:last-child) > .nav-link::after {
        background: #ffffff;
    }

    /* Dropdowns keep their original styling */
    body#index .header--transparent .dropdown-menu2,
    body#index .header--transparent .menu-container {
        background: var(--background-color, #ffffff);
    }

    body#index .header--transparent .dropdown-menu2 a,
    body#index .header--transparent .menu-container a {
        color: var(--medium-gray, #333333) !important;
    }

    body#index .header--transparent .dropdown-menu2 a:hover,
    body#index .header--transparent .menu-container a:hover {
        color: var(--primary-color, #000000) !important;
    }

    /* Logo: invert via CSS if no custom logo uploaded */
    body#index .header--transparent:not(.header--has-custom-logo) .logo img {
        filter: brightness(0) invert(1);
    }

    /* Logo: constrain swapped logo to same container as original */
    body#index .header--has-custom-logo .navbar-brand .logo,
    body#index .header--has-custom-logo .logo.img-fluid,
    .header-bottom .navbar-brand .logo {
        max-height: 50px;
        width: auto;
        object-fit: contain;
    }

    /* Button style override in transparent mode */
    body#index .header--transparent .nav-item.btn-style {
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.4);
    }

    body#index .header--transparent .nav-item.btn-style .nav-link {
        color: #ffffff !important;
    }

    /* ---- SOLID STATE (after scroll) ---- */

    body#index .header--solid {
        background-color: var(--header-bg, #ffffff) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* (overlay is faded out via opacity above — no display toggle, so it dissolves) */

    /* Reset SVG icon filters when solid (the change fades via the base transition) */
    body#index .header--solid img.header-block__icon {
        filter: none;
    }

} /* end @media min-width 1200px */

/* ===================================
   MENU MOBILE - Compatible Hummingbird/Gumuchev2
   =================================== */

/* Cacher le menu desktop sur mobile */
@media (max-width: 1199.98px) {
    .js-menu-desktop,
    #desktop-menu {
        display: none !important;
    }
}

/* Cacher le bouton hamburger sur desktop */
@media (min-width: 1200px) {
    .header-block.d-xl-none {
        display: none !important;
    }
}

/* Styles du menu mobile - Structure compatible avec le thème */
.main-menu__mobile {
    position: relative;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.main-menu__mobile .menu {
    position: absolute;
    left: 100%;
    display: none;
    width: 100%;
    padding: 0.5rem;
    transition: 0.25s ease-out;
}

.main-menu__mobile .menu--current {
    position: relative;
    left: 0;
    display: block;
}

.main-menu__mobile .menu--parent {
    left: -100%;
    display: block;
    opacity: 0;
}

.main-menu__mobile .menu--fromLeft {
    animation: menu-from-left 0.25s;
}

.main-menu__mobile .menu--fromRight {
    animation: menu-from-right 0.25s;
}

@keyframes menu-from-left {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes menu-from-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Liste du menu */
.main-menu__mobile .menu__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-menu__mobile .menu__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color-light, #e8e8e8);
}

.main-menu__mobile .menu__list li:last-child {
    border-bottom: none;
}

/* Liens du menu mobile */
.main-menu__mobile .menu__link {
    flex: 1;
    padding: 1rem 0.5rem;
    color: var(--primary-color, #000);
    text-decoration: none;
    font-size: 1rem;
}

/* Titre de section dans les sous-menus */
.main-menu__mobile .main-menu__title {
    width: 100%;
    padding: 1rem 0.5rem;
    margin: 0;
    font-weight: 600;
    border-bottom: 2px solid var(--primary-color, #000);
}

/* Éléments avec enfants */
.main-menu__mobile .menu--childrens {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Bouton pour ouvrir les sous-menus */
.main-menu__toggle-child {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    cursor: pointer;
    background: transparent;
    border: none;
}

.main-menu__toggle-child i {
    font-size: 1.25rem;
    color: var(--primary-color, #000);
}

/* Bouton retour */
.main-menu__back-button .js-back-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.main-menu__back-button .js-back-button i {
    font-size: 1.25rem;
}

/* Éléments additionnels du menu mobile */
.main-menu__additionnals {
    padding: 1rem;
    border-top: 1px solid var(--border-color-light, #e8e8e8);
}

.main-menu__selects {
    margin-bottom: 1rem;
}

/* Style bouton dans menu mobile */
.main-menu__mobile .is-button .menu__link {
    background: var(--primary-color, #000);
    color: var(--background-color, #fff) !important;
    text-align: center;
    font-weight: 600;
    margin: 0.5rem;
    border-radius: 4px;
}