.mascotte {
  --px: 4;
  --frames: 15;
  width:  calc(32px * var(--px));
  height: calc(32px * var(--px));
  background-image: url("/mascotte/PixelBrain_V1endormi.png");
  background-repeat: no-repeat;
  background-size: calc(32px * var(--frames) * var(--px))
                   calc(32px * var(--px));
  image-rendering: pixelated;
  animation: mascotte 1s steps(15) infinite;
}
@keyframes mascotte {
  to { background-position: calc(-32px * var(--frames) * var(--px)) 0; }
}

.connexion:has(input[type="text"]:focus, input[type="password"]:focus)
.mascotte {
  --frames: 11;
  background-image: url("/mascotte/PixelBrain_V1actifCoucou.png");
  animation: mascotte 1s steps(11) infinite;
}

.mascotte.marche {
  --frames: 11;
  background-image: url("/mascotte/PixelBrain_V1actifMarche.png");
  animation: mascotte 1s steps(11) infinite;
}

.mascotte.saut {
  --frames: 11;
  background-image: url("/mascotte/PixelBrain_V1actifSaut.png");
  animation: mascotte 1s steps(11) infinite;
}

/* Attention, c'est inversé : les fichiers décrivent l'orientation du dessin,
   pas la direction du mouvement. MarcheGauche.png s'utilise quand la
   mascotte se déplace vers la DROITE, MarcheDroite.png vers la GAUCHE. */
.mascotte.marche-droite {
  --frames: 11;
  background-image: url("/mascotte/PixelBrain_V1actifMarcheGauche.png");
  animation: mascotte 1s steps(11) infinite;
}

.mascotte.marche-gauche {
  --frames: 11;
  background-image: url("/mascotte/PixelBrain_V1actifMarcheDroite.png");
  animation: mascotte 1s steps(11) infinite;
}

@media (max-width: 600px)  { .mascotte { --px: 2; } }
@media (min-width: 1400px) { .mascotte { --px: 6; } }
@media (prefers-reduced-motion: reduce) { .mascotte { animation: none; } }

/* Mode libre : détachée du flux, positionnée en JS via left/top (px viewport) */
.mascotte.libre {
  position: fixed;
  z-index: 50; /* au-dessus du contenu, sous #fxOverlay (z-index: 60) */
  pointer-events: none;
  cursor: default;
}