:root {
  --papillon-width: 88px;
  --papillon-height: 80px;
  --papillon-frames: 30;
  --papillon-total-width: calc(var(--papillon-width) * var(--papillon-frames));
}

.anim-papillon {
  width: var(--papillon-width);
  height: var(--papillon-height);
  background: url('./anim-papillon.png') no-repeat;
  background-size: var(--papillon-total-width) 100%;
  animation: anim-papillon-anim 1.99s steps(var(--papillon-frames)) infinite;
  image-rendering: pixelated;
  transform: translateZ(0); /* Optimisation GPU */
  will-change: background-position; /* Optimisation performance */
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {
  .anim-papillon {
    --papillon-width: 60px;
    --papillon-height: calc(60px * (80 / 88)); /* Maintient le ratio 88/80 */
    --papillon-total-width: calc(var(--papillon-width) * var(--papillon-frames));
  }
}

@keyframes anim-papillon-anim {
  0% { background-position: 0 0; }
  100% { background-position: calc(-1 * var(--papillon-total-width)) 0; }
}