/* ============================================
   MENU FIX - Personnalisation complète
   ============================================ */

/* 1. Supprimer le fond coloré du sous-menu (la barre avec le nom) */
.menu-w .sub-menu-header,
.menu-w.sub-menu-style-over .sub-menu-header,
.menu-position-top.menu-w .sub-menu-header {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* 2. Forcer le fond du sous-menu en blanc */
.menu-w.sub-menu-style-over .sub-menu-w,
.menu-w .sub-menu-w,
.menu-position-top.menu-w ul.main-menu > li.selected .sub-menu-w {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* 3. Style du texte du sub-menu-header (rouge) */
.menu-w .sub-menu-header {
    color: #d6001c !important;
    font-weight: 700 !important;
    padding: 12px 15px !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

/* 4. Style des liens du sous-menu */
.menu-w .sub-menu a {
    color: #333333 !important;
    padding: 8px 15px !important;
    transition: all 0.2s ease !important;
}

.menu-w .sub-menu a:hover {
    color: #d6001c !important;
    background-color: rgba(214, 0, 28, 0.05) !important;
    padding-left: 20px !important;
}

/* 5. Icônes en rouge */
.menu-w .os-icon {
    color: #d6001c !important;
}

/* 6. Item sélectionné */
.menu-w .main-menu > li.selected > a {
    color: #d6001c !important;
    background-color: rgba(214, 0, 28, 0.07) !important;
}

/* 7. Pour le menu mobile aussi */
.menu-mobile .sub-menu-header {
    background-color: transparent !important;
    color: #d6001c !important;
}

.menu-mobile .sub-menu {
    background-color: #ffffff !important;
}
/* ============================================
   FIX - Couleur de survol des boutons principaux
   ============================================ */

/* Changer la couleur de survol des liens principaux (vert → rouge) */
.menu-w .main-menu > li > a:hover {
    color: #d6001c !important;
    background-color: rgba(214, 0, 28, 0.07) !important;
}

/* Pour le menu mobile aussi */
.menu-mobile .main-menu > li > a:hover {
    color: #d6001c !important;
    background-color: rgba(214, 0, 28, 0.07) !important;
}

/* Pour l'élément actif/sélectionné */
.menu-w .main-menu > li.selected > a {
    color: #d6001c !important;
    background-color: rgba(214, 0, 28, 0.1) !important;
}

.menu-w .main-menu > li.selected > a .os-icon {
    color: #d6001c !important;
}

/* Pour les sous-menus au survol (enlève l'ombre verte si présente) */
.menu-w .sub-menu a:hover {
    color: #d6001c !important;
    background-color: rgba(214, 0, 28, 0.05) !important;
}
/* ============================================
   FORCER LE ROUGE AU SURVOL (ÉCRASE LE VERT)
   ============================================ */

/* Survol des liens principaux */
.menu-w .main-menu > li > a:hover {
    color: #d6001c !important;
    background-color: rgba(214, 0, 28, 0.08) !important;
}

/* Survol des liens dans les sous-menus */
.menu-w .sub-menu a:hover {
    color: #d6001c !important;
    background-color: rgba(214, 0, 28, 0.08) !important;
}

/* Survol des éléments avec l'icône */
.menu-w .main-menu > li > a:hover .os-icon {
    color: #d6001c !important;
}

/* Pour le menu mobile aussi */
.menu-mobile .main-menu > li > a:hover {
    color: #d6001c !important;
    background-color: rgba(214, 0, 28, 0.08) !important;
}

.menu-mobile .sub-menu a:hover {
    color: #d6001c !important;
    background-color: rgba(214, 0, 28, 0.08) !important;
}
/* ============================================
   FORCER LE ROUGE AU SURVOL DES BOUTONS PRINCIPAUX
   ============================================ */

/* Boutons principaux (ceux avec les icônes en haut) */
.menu-w .main-menu > li > a:hover {
    color: #d6001c !important;
    background-color: rgba(214, 0, 28, 0.08) !important;
}

/* L'icône aussi doit devenir rouge au survol */
.menu-w .main-menu > li > a:hover .os-icon {
    color: #d6001c !important;
}

/* Pour le bouton actif/sélectionné aussi */
.menu-w .main-menu > li.selected > a {
    color: #d6001c !important;
    background-color: rgba(214, 0, 28, 0.1) !important;
}

.menu-w .main-menu > li.selected > a .os-icon {
    color: #d6001c !important;
}
/* ============================================
   FORCER LE ROUGE POUR L'ÉLÉMENT ACTIF/SELECTED
   ============================================ */

/* Bouton actif (quand on est sur la page) */
.menu-w .main-menu > li.selected > a {
    color: #d6001c !important;
    background-color: rgba(214, 0, 28, 0.1) !important;
}

/* Icône du bouton actif */
.menu-w .main-menu > li.selected > a .os-icon {
    color: #d6001c !important;
}

/* Le texte du bouton actif */
.menu-w .main-menu > li.selected > a span {
    color: #d6001c !important;
}

/* Pour le hover aussi, garder le rouge */
.menu-w .main-menu > li.selected > a:hover {
    color: #d6001c !important;
    background-color: rgba(214, 0, 28, 0.15) !important;
}