/* -------------------------------------------------------------------------- */ /* Curseur custom — point blanc qui INVERSE (mix-blend-mode: difference) + */ /* bulle « Voir » à fond noir au survol. */ /* */ /* IMPORTANT : le point et la bulle sont des éléments de PREMIER NIVEAU */ /* (enfants directs de ). Le blend `difference` doit être porté par un */ /* élément non isolé dans un stacking-context parent, sinon il n'inverse pas */ /* la page (il blende seulement avec son conteneur transparent). */ /* La position/échelle est pilotée par GSAP (transform). */ /* -------------------------------------------------------------------------- */ @media (pointer: fine) { html.has-ac-cursor, html.has-ac-cursor * { cursor: none !important; } html.has-ac-cursor :where( input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select, [contenteditable="true"] ) { cursor: auto !important; } html.has-ac-cursor .flair, html.has-ac-cursor .cursor-sidecar { display: none !important; } /* LE POINT — cercle blanc qui inverse les couleurs sous lui */ .ac-cursor { position: fixed; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #ffffff; mix-blend-mode: difference; /* inverse la page (élément non isolé) */ pointer-events: none; z-index: 2147483000; will-change: transform, opacity; } /* LA BULLE — rond noir qui grossit au survol (pas de blend) */ .ac-cursor-bubble { position: fixed; top: 0; left: 0; width: 66px; height: 66px; border-radius: 50%; background: #141414; color: #f6f6f4; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2147483001; will-change: transform, opacity; } .ac-cursor-bubble__label { font-size: 13px; font-weight: 500; letter-spacing: .3px; line-height: 1; text-transform: none; white-space: nowrap; } } @media (pointer: coarse) { .ac-cursor, .ac-cursor-bubble { display: none !important; } }