/* ============================================================ button-glow.css — HALO LUMINEUX TOURNANT SUR TOUS LES BOUTONS 20/07/2026 — demande Julien. 100 % VISUEL, ADDITIF, RÉVERSIBLE. ------------------------------------------------------------ Étend à TOUT le socle de boutons l'anneau lumineux qui n'existait que sur les gros CTA. Anneau en ::after (le ::before est déjà pris), avec un liseré cyan CONSTANT + un segment brillant qui TOURNE + un léger halo (drop-shadow) → bien visible même sur fond sombre, tout en restant premium. GATÉ par body.ui-glow (réglage admin site.ui.button_glow) : tant que la classe est absente, ce fichier est TOTALEMENT INERTE. Chargé APRÈS buttons-premium.css. Cibles : tout ce qui contient btn/cta, les boutons d'envoi, ET les 4 boutons d'action de la barre du haut (Entraide / Ajouter un lieu / Coup de propre / Signaler) qui n'ont pas de classe « btn ». Garde-fous : • inset:0 (anneau DANS le bord) → aucun débordement, aucun rognage par overflow:hidden, taille du bouton INCHANGÉE. • border-radius:inherit → épouse ronds/pilules/rectangles. • pointer-events:none → ne bloque jamais le clic. • liseré à opacité constante → le drop-shadow ne se recalcule pas à chaque image (léger/performant). • EXCLUS : onglets, puces, interrupteurs, boutons radio de la carte, boutons icônes, boutons de coin (fermer/favori), liens, désactivés. • prefers-reduced-motion → anneau figé (reste visible, ne tourne plus). ============================================================ */ @property --glowang { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes glowRingSpin { to { --glowang: 360deg; } } /* Positionnement du pseudo-anneau (nécessaire à ::after absolute) */ body.ui-glow :is([class*="btn"], [class*="cta"], button[type="submit"], .pub-entraide, .pub-addplace, .pub-coupdepropre, .pub-report-top, .pub-rail-item, .bn-item, .bn-more-item):not([class*="chip"]):not([class*="tab"]):not([class*="toggle"]):not([class*="radbtn"]):not([class*="icon-btn"]):not(.btn-link):not(.btn-premium-link):not(.btn-phare-on):not(.btn-phare-off):not(.btn-glow-active):not(.btn-glow-modern):not(.btn-glow-soft):not(.btn-glow-off):not(.ma-fav):not(.fm-close):not(.gc-aux-close):not(:disabled):not([disabled]) { position: relative; isolation: isolate; } /* Anneau lumineux : liseré cyan constant + segment brillant qui tourne + halo doux (base = Phare allumé / défaut) */ body.ui-glow :is([class*="btn"], [class*="cta"], button[type="submit"], .pub-entraide, .pub-addplace, .pub-coupdepropre, .pub-report-top, .pub-rail-item, .bn-item, .bn-more-item):not([class*="chip"]):not([class*="tab"]):not([class*="toggle"]):not([class*="radbtn"]):not([class*="icon-btn"]):not(.btn-link):not(.btn-premium-link):not(.btn-phare-on):not(.btn-phare-off):not(.btn-glow-active):not(.btn-glow-modern):not(.btn-glow-soft):not(.btn-glow-off):not(.ma-fav):not(.fm-close):not(.gc-aux-close):not(:disabled):not([disabled])::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 3; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; background: conic-gradient(from var(--glowang), rgba(125,211,255,0.28) 0deg, rgba(125,211,255,0.28) 190deg, rgba(125,211,255,0.70) 250deg, #d6f2ff 300deg, #f2fbff 322deg, #d6f2ff 344deg, rgba(125,211,255,0.28) 360deg); filter: drop-shadow(0 0 3px rgba(125,211,255,0.60)); animation: glowRingSpin 4.6s linear infinite; } /* Phare ÉTEINT : teinte plus froide et plus douce, tour plus lent */ body.ui-glow.phare-off :is([class*="btn"], [class*="cta"], button[type="submit"], .pub-entraide, .pub-addplace, .pub-coupdepropre, .pub-report-top, .pub-rail-item, .bn-item, .bn-more-item):not([class*="chip"]):not([class*="tab"]):not([class*="toggle"]):not([class*="radbtn"]):not([class*="icon-btn"]):not(.btn-link):not(.btn-premium-link):not(.btn-phare-on):not(.btn-phare-off):not(.btn-glow-active):not(.btn-glow-modern):not(.btn-glow-soft):not(.btn-glow-off):not(.ma-fav):not(.fm-close):not(.gc-aux-close):not(:disabled):not([disabled])::after { background: conic-gradient(from var(--glowang), rgba(150,180,210,0.22) 0deg, rgba(150,180,210,0.22) 210deg, rgba(178,200,224,0.60) 300deg, #e6eef7 335deg, rgba(150,180,210,0.22) 360deg); filter: drop-shadow(0 0 2px rgba(160,190,220,0.45)); animation-duration: 8s; } /* Survol : la lumière tourne plus vite et le halo se renforce (discret) */ body.ui-glow :is([class*="btn"], [class*="cta"], button[type="submit"], .pub-entraide, .pub-addplace, .pub-coupdepropre, .pub-report-top, .pub-rail-item, .bn-item, .bn-more-item):not([class*="chip"]):not([class*="tab"]):not([class*="toggle"]):not([class*="radbtn"]):not([class*="icon-btn"]):not(.btn-link):not(.btn-premium-link):not(.btn-phare-on):not(.btn-phare-off):not(.btn-glow-active):not(.btn-glow-modern):not(.btn-glow-soft):not(.btn-glow-off):not(.ma-fav):not(.fm-close):not(.gc-aux-close):not(:disabled):not([disabled]):hover::after { filter: drop-shadow(0 0 6px rgba(125,211,255,0.85)); animation-duration: 3s; } /* Accessibilité : animations réduites → anneau figé (reste visible, ne tourne plus) */ @media (prefers-reduced-motion: reduce) { body.ui-glow :is([class*="btn"], [class*="cta"], button[type="submit"], .pub-entraide, .pub-addplace, .pub-coupdepropre, .pub-report-top, .pub-rail-item, .bn-item, .bn-more-item):not([class*="chip"]):not([class*="tab"]):not([class*="toggle"]):not([class*="radbtn"]):not([class*="icon-btn"]):not(.btn-link):not(.btn-premium-link):not(.btn-phare-on):not(.btn-phare-off):not(.btn-glow-active):not(.btn-glow-modern):not(.btn-glow-soft):not(.btn-glow-off):not(.ma-fav):not(.fm-close):not(.gc-aux-close):not(:disabled):not([disabled])::after { animation: none; } } /* Boutons verrouillés (« Marché · fermé ») — menu gauche ET menu mobile « Plus » — pas d'anneau. */ body.ui-glow .pub-rail-item.is-locked::after, body.ui-glow .bn-more-item.is-locked::after { content: none; }