/* * Curseur premium — point centre + anneau à légère inertie (voir * assets/js/premium-cursor.js pour la logique). Desktop uniquement : le JS * ne s'active que sous `(hover: hover) and (pointer: fine)` et pose la * classe .zb-cursor-active sur . Sans JS actif (tactile, ou JS * désactivé), aucune règle ici ne s'applique et le curseur système normal * reste utilisé partout — rien n'est masqué par défaut. * * Couleur reprise de la palette existante du thème enfant (vert #39a751, * déjà utilisé dans ressources.css / ressources-article.css). */ :root { --zb-cursor-color: 57, 167, 81; /* #39a751 en RGB, pour moduler l'opacité */ --zb-cursor-dot-size: 7px; --zb-cursor-ring-size: 32px; } /* Le curseur système ne disparaît que lorsque le JS a confirmé un environnement compatible (souris desktop) — jamais par défaut. */ html.zb-cursor-active, html.zb-cursor-active a, html.zb-cursor-active button, html.zb-cursor-active .wp-block-button__link, html.zb-cursor-active [role="button"] { cursor: none; } .zb-cursor-dot, .zb-cursor-ring, .zb-cursor-wave { position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%; opacity: 0; will-change: transform, opacity; } .zb-cursor-dot { width: var(--zb-cursor-dot-size); height: var(--zb-cursor-dot-size); background: rgb(var(--zb-cursor-color)); z-index: 2147483647; } .zb-cursor-ring { width: var(--zb-cursor-ring-size); height: var(--zb-cursor-ring-size); border: 1px solid rgba(var(--zb-cursor-color), 0.55); background: rgba(var(--zb-cursor-color), 0.05); z-index: 2147483646; /* Le grossissement (scale) est piloté par le JS, image par image, en même temps que la position — une transition CSS séparée sur transform créerait un double-lissage. Seule la "luminosité" (couleur) passe par une transition CSS classique : ni la géométrie ni la mise en page n'en dépendent, donc aucun reflow. */ transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .zb-cursor-ring.is-hover { border-color: rgba(var(--zb-cursor-color), 0.9); background: rgba(var(--zb-cursor-color), 0.14); } .zb-cursor-wave { width: var(--zb-cursor-ring-size); height: var(--zb-cursor-ring-size); border: 1px solid rgba(var(--zb-cursor-color), 0.5); z-index: 2147483645; } /* Le JS bascule cette classe une fois le premier mousemove reçu, pour éviter un flash du curseur au centre de l'écran avant tout mouvement réel de la souris. */ html.zb-cursor-ready.zb-cursor-active .zb-cursor-dot, html.zb-cursor-ready.zb-cursor-active .zb-cursor-ring { opacity: 1; } /* Le JS retire .zb-cursor-active (et donc masque le curseur perso, cursor: none revient à auto) dès qu'un champ de saisie est survolé — cette règle est une sécurité supplémentaire purement CSS, redondante avec le JS. */ html.zb-cursor-active input, html.zb-cursor-active textarea, html.zb-cursor-active select, html.zb-cursor-active [contenteditable="true"] { cursor: auto; }