/** * Bouton « Commande en gros » dans l'en-tête. * * L'entrée est un élément du menu imbriqué Elementor, transformé en bouton * d'appel à l'action aux couleurs de la charte Start Distrib : accent #E01660, * comme le bouton « Commander » du panier. * * Le sélecteur s'appuie sur l'URL du lien : il fonctionne aussi bien avec une * adresse relative qu'absolue, en local comme en ligne. * * Les !important sont nécessaires : Elementor génère ses styles de menu dans * un fichier séparé, avec une spécificité élevée. */ /* Raccourci de lecture : « la case de menu qui contient notre lien ». */ .e-n-menu-item:has( a[href*="/commande-en-gros" ] ) { display: flex; align-items: center; } /* * Le dégradé est repris à l'identique une bonne dizaine de fois — au repos, au * survol, sur le parent comme sur le lien. Une variable évite qu'une retouche * n'en oublie une et fasse clignoter le bouton au passage de la souris. */ .e-n-menu-item:has( a[href*="/commande-en-gros" ] ) { --sdc-fond: linear-gradient(180deg, #EC2470 0%, #D4104F 100%); --sdc-icone: url('data:image/svg+xml;utf8,'); --sdc-ombre: 0 2px 6px rgb(212 16 79 / .3), inset 0 1px 0 rgb(255 255 255 / .18); } /* * Le parent reste transparent. * * Elementor l'entoure de 8px/16px de rembourrage : peindre les deux surfaces * donnerait deux pastilles emboîtées (240×62 autour de 198×46). Avec un aplat * cela ne se remarquait pas ; avec un dégradé, celui du lien redémarre au clair * au milieu de celui du parent et laisse une couture visible. Une seule surface * peinte — le lien — supprime le problème, et le rembourrage du parent devient * simplement l'espace qui sépare le bouton du reste du menu. */ .e-n-menu-title:has( a[href*="/commande-en-gros" ] ) { background: none !important; background-color: transparent !important; } /* * Le lien porte la forme, l'icône et le relief. * * Les deux couches de fond sont déclarées dans un seul raccourci : écrire * « background-image » séparément effacerait le dégradé, les deux propriétés * visant la même case. L'icône est intégrée en data-URI — aucune requête * réseau — et occupe le retrait à gauche, d'où le rembourrage asymétrique. */ a.e-n-menu-title-container[href*="/commande-en-gros"] { background: var( --sdc-icone ) no-repeat 17px center / 17px 17px, var( --sdc-fond ) !important; border-radius: 999px !important; padding: 11px 21px 11px 42px !important; margin-inline-start: 10px; font-size: 14px !important; line-height: 1.2 !important; white-space: nowrap; /* Ombre statique : de la profondeur, aucun mouvement. */ box-shadow: var( --sdc-ombre ) !important; } /* ------------------------------------------------------------------------- * Aucun effet au survol. * * Elementor applique ses effets sur le conteneur parent — « .e-n-menu-title:hover » * — et non sur le lien lui-même. Ne neutraliser que le lien laissait donc * subsister le changement de couleur du libellé. On couvre ici les deux * niveaux, dans tous les états d'interaction. * * On répète l'apparence au repos plutôt que de tout remettre à zéro : * annuler l'ombre ou le fond ferait disparaître le relief au moment précis * où la souris passe dessus — soit exactement l'effet qu'on veut éviter. * ---------------------------------------------------------------------- */ .e-n-menu-title:has( a[href*="/commande-en-gros" ] ):hover, .e-n-menu-title:has( a[href*="/commande-en-gros" ] ):focus-within, .e-n-menu-title:has( a[href*="/commande-en-gros" ] ):active { background: none !important; background-color: transparent !important; transform: none !important; box-shadow: none !important; filter: none !important; opacity: 1 !important; text-decoration: none !important; } a.e-n-menu-title-container[href*="/commande-en-gros"]:hover, a.e-n-menu-title-container[href*="/commande-en-gros"]:focus, a.e-n-menu-title-container[href*="/commande-en-gros"]:active { background: var( --sdc-icone ) no-repeat 17px center / 17px 17px, var( --sdc-fond ) !important; transform: none !important; filter: none !important; opacity: 1 !important; text-decoration: none !important; box-shadow: var( --sdc-ombre ) !important; } /* Le libellé reste blanc en toutes circonstances : au repos comme au survol, et quels que soient les éléments imbriqués qu'Elementor ajoute. */ .e-n-menu-title:has( a[href*="/commande-en-gros" ] ), .e-n-menu-title:has( a[href*="/commande-en-gros" ] ) *, .e-n-menu-title:has( a[href*="/commande-en-gros" ] ):hover, .e-n-menu-title:has( a[href*="/commande-en-gros" ] ):hover *, a.e-n-menu-title-container[href*="/commande-en-gros"], a.e-n-menu-title-container[href*="/commande-en-gros"] *, a.e-n-menu-title-container[href*="/commande-en-gros"]:hover, a.e-n-menu-title-container[href*="/commande-en-gros"]:hover * { color: #ffffff !important; fill: #ffffff !important; font-weight: 600 !important; letter-spacing: 0.01em; transition: none !important; animation: none !important; } /* Elementor souligne l'entrée survolée ou active : inutile sur un bouton. */ .e-n-menu-title:has( a[href*="/commande-en-gros" ] )::before, .e-n-menu-title:has( a[href*="/commande-en-gros" ] )::after, a.e-n-menu-title-container[href*="/commande-en-gros"]::before, a.e-n-menu-title-container[href*="/commande-en-gros"]::after { display: none !important; content: none !important; } /* En version mobile, le menu se replie : le bouton reprend toute la largeur plutôt que de flotter au milieu d'une colonne. Le rembourrage redevient symétrique pour que le libellé tombe bien au centre, l'icône restant calée à gauche. */ @media (max-width: 1024px) { a.e-n-menu-title-container[href*="/commande-en-gros"], a.e-n-menu-title-container[href*="/commande-en-gros"]:hover { margin: 6px 0; justify-content: center; width: 100%; padding: 12px 42px !important; } }