.main-menu .pos-menu-vertical .menu-content .menu-item.menu-item1 > a .menu-subtitle, .mobile-menu .pos-menu-vertical .menu-content .menu-item.menu-item1 > a .menu-subtitle{ background: #000000; color: #ffffff; text-transform: capitalize; }.main-menu .pos-menu-vertical .menu-content .menu-item.menu-item1 > a .menu-subtitle:after, .mobile-menu .pos-menu-vertical .menu-content .menu-item.menu-item1 > a .menu-subtitle:after{ border-right-color: #000000; }.main-menu .pos-menu-vertical .menu-content .menu-item.menu-item3 > a .menu-subtitle, .mobile-menu .pos-menu-vertical .menu-content .menu-item.menu-item3 > a .menu-subtitle{ text-transform: none; }.main-menu .pos-menu-vertical .menu-content .menu-item.menu-item3 > a .menu-subtitle:after, .mobile-menu .pos-menu-vertical .menu-content .menu-item.menu-item3 > a .menu-subtitle:after{ }.main-menu .pos-menu-vertical .menu-content .menu-item.menu-item4 > a .menu-subtitle, .mobile-menu .pos-menu-vertical .menu-content .menu-item.menu-item4 > a .menu-subtitle{ text-transform: none; }.main-menu .pos-menu-vertical .menu-content .menu-item.menu-item4 > a .menu-subtitle:after, .mobile-menu .pos-menu-vertical .menu-content .menu-item.menu-item4 > a .menu-subtitle:after{ }.main-menu .pos-menu-vertical .menu-content .menu-item.menu-item5 > a .menu-subtitle, .mobile-menu .pos-menu-vertical .menu-content .menu-item.menu-item5 > a .menu-subtitle{ text-transform: none; }.main-menu .pos-menu-vertical .menu-content .menu-item.menu-item5 > a .menu-subtitle:after, .mobile-menu .pos-menu-vertical .menu-content .menu-item.menu-item5 > a .menu-subtitle:after{ }.main-menu .pos-menu-vertical .menu-content .menu-item.menu-item6 > a .menu-subtitle, .mobile-menu .pos-menu-vertical .menu-content .menu-item.menu-item6 > a .menu-subtitle{ text-transform: none; }.main-menu .pos-menu-vertical .menu-content .menu-item.menu-item6 > a .menu-subtitle:after, .mobile-menu .pos-menu-vertical .menu-content .menu-item.menu-item6 > a .menu-subtitle:after{ }.main-menu .pos-menu-vertical .menu-content .menu-item.menu-item7 > a .menu-subtitle, .mobile-menu .pos-menu-vertical .menu-content .menu-item.menu-item7 > a .menu-subtitle{ text-transform: none; }.main-menu .pos-menu-vertical .menu-content .menu-item.menu-item7 > a .menu-subtitle:after, .mobile-menu .pos-menu-vertical .menu-content .menu-item.menu-item7 > a .menu-subtitle:after{ }.pos-menu-vertical{ background: #000000; }/* Product menu item with circular image - Image à GAUCHE, Nom à DROITE */ #_desktop_vegamenu .pos-menu-vertical .menu-content .product-menu-item, .pos-menu-vertical .menu-content .product-menu-item { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 15px; padding: 10px 0 !important; text-decoration: none !important; color: inherit !important; border: none !important; width: 100% !important; } #_desktop_vegamenu .pos-menu-vertical .menu-content .product-menu-item:hover, .pos-menu-vertical .menu-content .product-menu-item:hover { background-color: rgba(255, 255, 255, 0.05) !important; } #_desktop_vegamenu .pos-menu-vertical .menu-content .product-menu-item .product-menu-image, .pos-menu-vertical .menu-content .product-menu-item .product-menu-image, #_desktop_vegamenu .pos-menu-vertical .menu-content .product-menu-item img.product-menu-image, .pos-menu-vertical .menu-content .product-menu-item img.product-menu-image { width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important; max-width: 60px !important; max-height: 60px !important; border-radius: 50% !important; object-fit: cover !important; flex-shrink: 0 !important; transform: none !important; order: 1 !important; } /* Nom du produit en BLANC aligné à gauche */ #_desktop_vegamenu .pos-menu-vertical .menu-content .product-menu-item .product-menu-name, .pos-menu-vertical .menu-content .product-menu-item .product-menu-name { font-size: 14px !important; font-weight: 500 !important; color: #ffffff !important; text-transform: capitalize !important; text-align: left !important; flex: 1 !important; order: 2 !important; } /* Effet hover sur le nom du produit en ROUGE */ #_desktop_vegamenu .pos-menu-vertical .menu-content .product-menu-item:hover .product-menu-name, .pos-menu-vertical .menu-content .product-menu-item:hover .product-menu-name { color: #c40316 !important; } /* Menu principal - FORCER le fond noir */ #_desktop_vegamenu .pos-menu-vertical .menu-content, #_desktop_vegamenu .pos-menu-vertical > .menu-content, .pos-menu-vertical .menu-content { background: rgba(0, 0, 0, 0.85) !important; background-color: rgba(0, 0, 0, 0.85) !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } /* Items du menu principal */ #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-item, #_desktop_vegamenu .pos-menu-vertical .menu-content > .menu-item { background: transparent !important; background-color: transparent !important; padding: 0 10px !important; } /* Liens du menu principal en blanc */ #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-item > a, #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-item > a span { color: #ffffff !important; background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } /* Dernier item sans bordure */ #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-item:last-child > a { border-bottom: none !important; } /* Effet hover sur les items du menu principal */ #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-item:hover > a, #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-item.active > a { color: #c40316 !important; background-color: rgba(255, 255, 255, 0.05) !important; } /* Icônes en blanc */ #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-item > a .icon_sub { color: #ffffff !important; } /* Sous-menus avec fond noir transparent et texte blanc */ #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-dropdown { background: rgba(0, 0, 0, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; z-index: 999 !important; height: auto !important; overflow: visible !important; } #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-dropdown .popup_vertical { background: transparent !important; height: auto !important; max-height: none !important; overflow: visible !important; } /* Titres des colonnes en blanc */ #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-item .menu-dropdown .column_title, #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-dropdown .submenu-item > a, #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-item .column_title { color: #ffffff !important; } /* Liens des sous-menus en blanc */ #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-dropdown .submenu-item a, #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-dropdown .category-sub-menu a { color: #ffffff !important; } /* Effet hover sur les liens */ #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-dropdown .submenu-item a:hover, #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-dropdown .category-sub-menu a:hover { color: #c40316 !important; } /* Afficher le premier sous-menu par défaut - SANS ANIMATIONS */ #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-item:first-child .menu-dropdown { opacity: 1 !important; visibility: visible !important; display: block !important; z-index: 999 !important; position: absolute !important; height: auto !important; max-height: none !important; overflow: visible !important; transform: none !important; -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transition: none !important; -webkit-transition: none !important; -moz-transition: none !important; animation: none !important; } #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-item:first-child { position: relative; } /* Le contenu interne du premier sous-menu */ #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-item:first-child .menu-dropdown .popup_vertical { transform: none !important; } /* Tous les éléments à l'intérieur du premier sous-menu */ #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-item:first-child .menu-dropdown * { transform: none !important; } /* Quand on survole le premier item, garder son sous-menu ouvert */ #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-item:first-child:hover .menu-dropdown { opacity: 1 !important; visibility: visible !important; height: auto !important; transform: none !important; } /* Quand on survole les autres items, leur sous-menu s'affiche normalement */ #_desktop_vegamenu .pos-menu-vertical .menu-content .menu-item:not(:first-child):hover .menu-dropdown { opacity: 1 !important; visibility: visible !important; z-index: 1000 !important; height: auto !important; } /* Quand on survole un autre item, masquer le premier sous-menu */ #_desktop_vegamenu .pos-menu-vertical .menu-content:has(.menu-item:not(:first-child):hover) .menu-item:first-child .menu-dropdown { opacity: 0 !important; visibility: hidden !important; } /* Bloc bouton Voir tout */ .menu-view-all-block { padding: 20px; text-align: center; width: 100%; } .btn-view-all { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 30px; background: #c40316; color: #ffffff !important; text-decoration: none !important; font-size: 14px; font-weight: 600; text-transform: uppercase; border-radius: 25px; transition: all 0.3s ease; border: 2px solid #c40316; } .btn-view-all:hover { background: transparent; color: #c40316 !important; border-color: #c40316; transform: translateX(5px); } .btn-view-all i { font-size: 18px; transition: transform 0.3s ease; } .btn-view-all:hover i { transform: translateX(5px); } /* Bloc bouton Voir tout dans le HTML Block - CENTRÉ */ .html-block { padding: 20px; text-align: center; width: 100%; display: flex; justify-content: center; align-items: center; } .html-block .btn-view-all { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 30px; background: #c40316; color: #ffffff !important; text-decoration: none !important; font-size: 14px; font-weight: 600; text-transform: uppercase; border-radius: 25px; transition: all 0.3s ease; border: 2px solid #c40316; margin: 0 auto; } .html-block .btn-view-all:hover { background: transparent; color: #c40316 !important; border-color: #c40316; transform: translateX(5px); } .html-block .btn-view-all svg { transition: transform 0.3s ease; } .html-block .btn-view-all:hover svg { transform: translateX(5px); } /* Si le bouton est dans un submenu-item, centrer aussi */ .submenu-item .html-block { display: flex; justify-content: center; align-items: center; }