/* Curseur — une flèche, flou à l'intérieur, contour orange.
   ------------------------------------------------------------------
   Demandé par Lohann à la place du phare, puis du rond : la forme d'une
   vraie flèche de souris, sans la tige — la seule tête triangulaire,
   avec son encoche. L'intérieur laisse voir la page, légèrement floutée ;
   le contour est orange. Sur ce qui se clique, la flèche grandit un peu
   et se teinte d'orange ; au clic, elle se resserre.

   Deux couches : la tête découpée en polygone (.curseur-flou) porte le
   flou de l'arrière-plan ; le contour est un tracé SVG posé par-dessus.
   Un seul élément ne suffirait pas : un fond orange sous le flou serait
   flouté avec la page.

   Il n'existe que là où il a un sens : souris ou pavé tactile (pointeur
   fin, survol possible). js/curseur.js pose .a-curseur sur <html> une
   fois la flèche en place ; sans script, les curseurs du système
   restent. */

html.a-curseur,
html.a-curseur * { cursor: none !important; }
/* Dans un champ de saisie, la barre de texte reste plus précise. */
html.a-curseur :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
                   textarea, [contenteditable="true"]) { cursor: text !important; }

/* La position est posée par le script dans la propriété `translate` ;
   `scale` reste libre pour le survol et le clic, autour de la pointe. */
.curseur {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  width: 16px;
  height: 22px;
  pointer-events: none;
  transform-origin: 1.5px 1.5px;         /* la pointe de la flèche */
  opacity: 0;
  transition: scale 0.2s var(--ease-sortie), opacity 0.2s linear;
  will-change: translate;
}
.curseur.est-visible { opacity: 1; }

.curseur-flou {
  position: absolute;
  inset: 0;
  clip-path: polygon(1.5px 1.5px, 1.5px 19px, 6px 14.6px, 13.5px 14.6px);
  background: rgb(255 255 255 / 0.22);
  -webkit-backdrop-filter: blur(3px) saturate(1.2);
  backdrop-filter: blur(3px) saturate(1.2);
  transition: background-color 0.2s var(--ease-sortie);
}
.curseur svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.curseur path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.curseur.est-survol { scale: 1.2; }
.curseur.est-survol .curseur-flou { background: rgb(255 80 0 / 0.16); }
.curseur.est-appui { scale: 0.88; }
.curseur.est-survol.est-appui { scale: 1.05; }

/* Au-dessus d'un champ de saisie, elle s'efface devant la barre de texte. */
.curseur.est-texte { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .curseur, .curseur-flou { transition: opacity 0.2s linear; }
}