/* Curseur : une petite flamme bleue (onibi) qui suit la souris. La pointe de la flamme est le point de clic.
   Activé par curseur.js seulement avec une souris ; dans les champs de texte, le curseur normal revient. */
:root { --flamme-l: 18px; --flamme-h: 27px; }
html.curseur-flamme, html.curseur-flamme * { cursor: none !important; }
html.curseur-flamme input, html.curseur-flamme textarea, html.curseur-flamme select, html.curseur-flamme [contenteditable] { cursor: auto !important; }
html.curseur-flamme input[type="range"] { cursor: none !important; }
.curseur { position: fixed; left: 0; top: 0; z-index: 10000; width: var(--flamme-l); height: var(--flamme-h); pointer-events: none;
  margin-left: calc(var(--flamme-l) / -2); opacity: 0; transition: opacity .2s; will-change: transform; }
.curseur.visible { opacity: 1; }
.curseur svg { width: 100%; height: 100%; overflow: visible; display: block;
  filter: drop-shadow(0 0 3px rgba(60, 170, 255, .9)) drop-shadow(0 0 9px rgba(30, 110, 255, .65)); }
.curseur .ext { transform-origin: 50% 85%; transform-box: fill-box; animation: flamme-ext .45s ease-in-out infinite alternate; }
.curseur .int { transform-origin: 50% 90%; transform-box: fill-box; animation: flamme-int .3s ease-in-out infinite alternate; }
.curseur .langue { transform-origin: 50% 100%; transform-box: fill-box; animation: flamme-langue .6s ease-in-out infinite alternate; }
@keyframes flamme-ext { 0% { transform: scale(1, .94) skewX(-3deg); } 50% { transform: scale(.95, 1.04) skewX(2deg); } 100% { transform: scale(1.02, .98) skewX(-1deg); } }
@keyframes flamme-int { from { transform: scale(1, .92); } to { transform: scale(.93, 1.05); } }
@keyframes flamme-langue { from { transform: translateY(1px) scaleY(.8); opacity: .5; } to { transform: translateY(-1px) scaleY(1.1); opacity: .95; } }
/* survol d'un lien ou d'un bouton : la flamme grandit un peu ; clic : elle s'embrase */
.curseur.sur-lien { --flamme-l: 22px; --flamme-h: 33px; }
.curseur { transition: opacity .2s, width .2s, height .2s, margin .2s; }
.curseur.clic svg { animation: flamme-clic .35s ease-out; }
@keyframes flamme-clic { 40% { filter: drop-shadow(0 0 6px rgba(150, 220, 255, 1)) drop-shadow(0 0 18px rgba(30, 110, 255, .9)); transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .curseur .ext, .curseur .int, .curseur .langue { animation: none; } }
