/* ============================================
   STYLE SIMPLE POUR MENU PRODUITS
   ============================================ */

/* Cibler spécifiquement le menu Produits (ajustez l'ID si nécessaire) */
#menu-item-produits .sub-menu,
.menu-item-produits > .sub-menu,
li[class*="produits"] > .sub-menu {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15) !important;
    border-radius: 5px !important;
    padding: 15px !important;
    min-width: 250px !important;
}

/* Style pour les éléments du sous-menu */
#menu-item-produits .sub-menu li,
.menu-item-produits .sub-menu li,
li[class*="produits"] .sub-menu li {
    padding: 8px 12px !important;
    margin: 3px 0 !important;
    border-radius: 4px !important;
    transition: background 0.2s ease !important;
}

#menu-item-produits .sub-menu li:hover,
.menu-item-produits .sub-menu li:hover,
li[class*="produits"] .sub-menu li:hover {
    background: #f0f7ff !important;
}

/* Style pour les liens */
#menu-item-produits .sub-menu a,
.menu-item-produits .sub-menu a,
li[class*="produits"] .sub-menu a {
    color: #2c3e50 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 5px 0 !important;
}

#menu-item-produits .sub-menu a:hover,
.menu-item-produits .sub-menu a:hover,
li[class*="produits"] .sub-menu a:hover {
    color: #007bff !important;
}

/* Sous-sous-menu */
#menu-item-produits .sub-menu .sub-menu,
.menu-item-produits .sub-menu .sub-menu,
li[class*="produits"] .sub-menu .sub-menu {
    margin-left: 15px !important;
    padding-left: 10px !important;
    border-left: 2px solid #e0e0e0 !important;
    box-shadow: none !important;
}

#menu-item-produits .sub-menu .sub-menu a,
.menu-item-produits .sub-menu .sub-menu a,
li[class*="produits"] .sub-menu .sub-menu a {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #555 !important;
}

/* Icônes pour identifier visuellement */
#menu-item-produits .sub-menu > li > a::before,
.menu-item-produits .sub-menu > li > a::before {
    content: "▸ ";
    color: #007bff;
    margin-right: 5px;
}