/* ========================================================================== Curseur-icônes ciblé — index2 uniquement. Le curseur NATIF reste affiché partout, SAUF sur les éléments [data-cursor-icon] où il cède la place à une icône animée qui suit la souris : · phone → « Être rappelé » / « Réserver un appel » (combiné + ondes) · quote → « Devis » (feuille + crayon) Indépendant du curseur « Comète » (non chargé sur cette page). Actif seulement sur pointeur fin (desktop) : voir cursor-icons.js. ========================================================================== */ /* Le natif n'est masqué QUE sur les éléments porteurs d'une icône (et leurs enfants), et seulement quand le JS a pris la main (classe sur ). */ html.has-iconcursor [data-cursor-icon], html.has-iconcursor [data-cursor-icon] * { cursor: none !important; } #tvl-iconcursor { position: fixed; inset: 0; pointer-events: none; z-index: 99999; --ic: #274b8f; /* fond clair : bleu nuit */ } #tvl-iconcursor.on-dark { --ic: #ffffff; } /* fond bleu nuit / coloré : blanc */ .tvlic { position: absolute; left: 0; top: 0; width: 29px; height: 29px; opacity: 0; will-change: transform, opacity; transition: opacity .16s ease; } .tvlic svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .28)) drop-shadow(0 2px 5px rgba(0, 0, 0, .22)); transition: transform .16s cubic-bezier(.34, 1.56, .64, 1); } #tvl-iconcursor.on-dark .tvlic svg { filter: drop-shadow(0 0 1px rgba(0, 0, 0, .45)) drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); } /* Téléphone : +25% (29→36px), plein + léger stroke pour l'épaissir, ondes animées. */ .tvlic--phone { width: 36px; height: 36px; } .tvlic--phone svg { fill: var(--ic); transform: rotate(-6deg); transform-origin: 30% 24%; } .tvlic--phone .ic-body { stroke: var(--ic); stroke-width: .7; stroke-linejoin: round; } .tvlic--phone .ic-wave { fill: none; stroke: var(--ic); stroke-width: 1.7; stroke-linecap: round; transform-box: fill-box; transform-origin: 0% 100%; /* base côté combiné → l'onde s'ouvre vers le haut */ animation: tvlic-ring 1.5s ease-in-out infinite; } .tvlic--phone .ic-wave.w2 { animation-delay: .28s; } @keyframes tvlic-ring { 0% { opacity: 0; transform: scale(.55); } 45% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } } /* Devis : feuille + crayon, en trait. */ .tvlic--quote svg { fill: none; stroke: var(--ic); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-4deg); transform-origin: 28% 24%; } /* Icône active (survol d'un [data-cursor-icon]). */ #tvl-iconcursor.is-phone .tvlic--phone { opacity: 1; } #tvl-iconcursor.is-quote .tvlic--quote { opacity: 1; } /* Appui : léger enfoncement. */ #tvl-iconcursor.is-phone.is-pressing .tvlic--phone svg { transform: rotate(-6deg) scale(.86); } #tvl-iconcursor.is-quote.is-pressing .tvlic--quote svg { transform: rotate(-4deg) scale(.86); } @media (prefers-reduced-motion: reduce) { .tvlic svg { transition: none; } .tvlic--phone .ic-wave { animation: none; opacity: 1; } }