/* ---------- curseur personnalisé ----------
   Même curseur que sur newsletter.sciencespo-finance.fr et le brouillon :
   un point qui colle au pointeur, un anneau qui le rattrape avec un temps
   de retard et s'élargit quand la main va vite. Réservé aux souris : sur
   un écran tactile il n'y a pas de pointeur à suivre, et quand l'animation
   est refusée par le système, le curseur natif reprend sa place. */
:root {
  --cursor-accent: #2E6BB0;
  --cursor-accent-soft: #AECDEB;
}
.curseur, .curseur__anneau { display:none; }
@media (pointer:fine) {
  html.curseur-actif, html.curseur-actif * { cursor:none; }
  /* Le champ garde le sien : viser une zone de saisie sans repère est
     désagréable, et le gain esthétique n'en vaut pas la peine. */
  html.curseur-actif input,
  html.curseur-actif textarea { cursor:text; }

  .curseur, .curseur__anneau {
    display:block; position:fixed; top:0; left:0; z-index:9999;
    pointer-events:none; border-radius:50%;
    transform:translate3d(-100px,-100px,0);
  }
  .curseur { width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
             background:var(--cursor-accent); }
  .curseur__anneau { width:34px; height:34px; margin:-17px 0 0 -17px;
                     border:1.5px solid var(--cursor-accent);
                     opacity:.55;
                     transition:width .22s ease, height .22s ease,
                                margin .22s ease, opacity .22s ease,
                                background-color .22s ease; }
  .curseur__anneau.survol { width:52px; height:52px; margin:-26px 0 0 -26px;
                            opacity:.9; background:color-mix(in srgb,
                            var(--cursor-accent) 12%, transparent); }
  /* Sur un fond marine, le bleu d'accent se fond dedans : le curseur
     s'éclaircit le temps de le traverser. */
  .curseur.sur-marine { background:var(--cursor-accent-soft); }
  .curseur__anneau.sur-marine { border-color:var(--cursor-accent-soft); opacity:.75; }
}
