/* Effets de halo bleu partagés par toutes les pages (tableau de bord, Params, profil, connexion).
   Désactivés sur écran tactile et pour les personnes qui ont demandé moins d'animations. */

/* Traînée bleue qui suit le pointeur sur toute la page (dessinée par effets.js) */
.spot-pointeur { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }

/* Les cartes se teintent de bleu soutenu le long de leur bordure, du côté du pointeur */
.lumiere { position: relative; }
.lumiere::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: radial-gradient(230px circle at var(--px, 50%) var(--py, 50%), rgba(59, 110, 235, 0.9), rgba(37, 80, 200, 0.4) 45%, transparent 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0; transition: opacity 0.35s ease;
}
.lumiere::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(340px circle at var(--px, 50%) var(--py, 50%), rgba(37, 80, 200, 0.14), transparent 66%);
    opacity: 0; transition: opacity 0.35s ease;
}
.lumiere:hover::before, .lumiere:hover::after { opacity: 1; }

@media (hover: none), (prefers-reduced-motion: reduce) {
    .spot-pointeur { display: none; }
    .lumiere::before, .lumiere::after { display: none; }
}