:root {
  --abeille-ratio: 1.25; /* Ajuste ici si tu changes de sprite */
  --abeille-width: 131px;
  --abeille-width-mobile: 100px;
  --abeille-height: calc(var(--abeille-width) / var(--abeille-ratio));
  --abeille-height-mobile: calc(80px / var(--abeille-ratio));
}

/* PNG par défaut */
.anim-abeille {
  width: var(--abeille-width);
  height: var(--abeille-height);
  background-image: url('./anim-abeille.png');
  background-repeat: no-repeat;
  background-size: 500% 100%; /* 5 frames horizontales */
  animation: anim-abeille-anim 0.4s steps(4, end) infinite;
  image-rendering: pixelated;
  transform: translateZ(0);
  will-change: background-position;
}

/* WebP si supportée */
@supports (background-image: url("image.webp")) {
  .anim-abeille {
    background-image: url('./anim-abeille.webp');
  }
}

/* Responsive mobile */
@media (max-width: 768px) {
  .anim-abeille {
    width: var(--abeille-width-mobile);
    height: var(--abeille-height-mobile);
  }
}

/* Animation */
@keyframes anim-abeille-anim {
  0%   { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}