.projectile {
  position: absolute;
  left: 50%;
  bottom: 0%;
  transform: translate(-50%, 0);
  z-index: 500;
  left: 30%;
  bottom: 17%;
  width: 70px;
  opacity: 0;
}
.projectile-onPersonnage {
  position: absolute;
  width: 20px;
  top: -109px;
  left: 50%;
  transform: translate(-50%, -39px);
  animation: projectile-onPersonnage 1s;
}

@keyframes projectile-onPersonnage {
  0% {
    transform: translate(-50%, -39px);

    scale: 2;
  }
  100% {
    transform: translate(-50%, 97px);
    scale: 0.8;
    opacity: 0;
  }
}
.throw-action-left {
  animation: throwLeft 0.6s ease-out forwards;
}
.throw-action-right {
  animation: throwRight 0.6s ease-out forwards;
}

.throw-action-middle {
  animation: throwMiddle 0.6s ease-out forwards;
}
@keyframes throwLeft {
  0% {
    left: 50%;
    bottom: 0%;
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }

  25% {
    left: 43%;
    bottom: 20%;
    opacity: 1;
    scale: 0.85;
    rotate: 200deg;
  }

  50% {
    left: 36%;
    bottom: 50%;
    opacity: 1;
    scale: 0.7;
    rotate: 400deg;
  }

  65% {
    left: 33%;
    bottom: 45%;
    scale: 0.7;
    rotate: 500deg;
  }

  75% {
    left: 28%;
    bottom: 30%;
    scale: 0.7;
    opacity: 0;
    rotate: 600deg;
  }

  100% {
    left: 25%;
    bottom: 17%;
    opacity: 0;
    scale: 0.5;
    rotate: 720deg;
  }
}

@keyframes throwRight {
  0% {
    left: 50%;
    bottom: 0%;
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }

  25% {
    left: 57%;
    bottom: 20%;
    opacity: 1;
    scale: 0.85;
    rotate: -200deg;
  }

  50% {
    left: 64%;
    bottom: 50%;
    opacity: 1;
    scale: 0.7;
    rotate: -400deg;
  }

  65% {
    left: 67%;
    bottom: 45%;
    scale: 0.7;
    rotate: -500deg;
  }

  75% {
    left: 72%;
    bottom: 30%;
    scale: 0.7;
    opacity: 0;
    rotate: -600deg;
  }

  100% {
    left: 75%;
    bottom: 17%;
    opacity: 0;
    scale: 0.5;
    rotate: -720deg;
  }
}

@keyframes throwMiddle {
  0% {
    left: 50%;
    bottom: 0%;
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }

  25% {
    left: 50%;
    bottom: 20%;
    opacity: 1;
    scale: 0.85;
    rotate: 180deg;
  }

  50% {
    left: 50%;
    bottom: 50%;
    opacity: 1;
    scale: 0.7;
    rotate: 360deg;
  }

  65% {
    left: 50%;
    bottom: 45%;
    scale: 0.7;
    rotate: 480deg;
  }

  75% {
    left: 50%;
    bottom: 30%;
    scale: 0.7;
    opacity: 0;
    rotate: 600deg;
  }

  100% {
    left: 50%;
    bottom: 17%;
    opacity: 0;
    scale: 0.5;
    rotate: 720deg;
  }
}

.chut-effect-span {
  position: absolute;
  color: white;
  font-size: 50px;
  left: 50%;
  bottom: 0%;
  z-index: 500;
  transform: translate(-50%, 0);
}

.chut-effect-span1 {
  animation: chutEffectSpan1 2s linear;
}
@keyframes chutEffectSpan1 {
  0% {
    left: 50%;
    bottom: 0%;
  }
  20% {
    left: 40%;
    bottom: 6%;
  }
  40% {
    left: 45%;
    bottom: 12%;
  }
  60% {
    left: 30%;
    bottom: 18%;
    opacity: 1;
  }
  80% {
    left: 35%;
    bottom: 20%;
  }
  100% {
    left: 12%;
    bottom: 24%;
    opacity: 0;
  }
}

.chut-effect-span2 {
  animation: chutEffectSpan2 2s linear;
}
@keyframes chutEffectSpan2 {
  0% {
    left: 50%;
    bottom: 0%;
  }
  20% {
    left: 45%;
    bottom: 6%;
  }
  40% {
    left: 55%;
    bottom: 12%;
  }
  60% {
    left: 40%;
    bottom: 18%;
    opacity: 1;
  }
  80% {
    left: 45%;
    bottom: 20%;
  }
  100% {
    left: 30%;
    bottom: 40%;
    opacity: 0;
  }
}
 /* Animation vers la droite (proche du centre) */
.chut-effect-span3 {
  animation: chutEffectSpan3 2s linear;
}

@keyframes chutEffectSpan3 {
  0% {
    left: 50%;
    bottom: 0%;
  }
  20% {
    left: 60%; /* Inversé : 50 + 10 */
    bottom: 6%;
  }
  40% {
    left: 55%; /* Inversé : 50 + 5 */
    bottom: 12%;
  }
  60% {
    left: 70%; /* Inversé : 50 + 20 */
    bottom: 18%;
    opacity: 1;
  }
  80% {
    left: 65%; /* Inversé : 50 + 15 */
    bottom: 20%;
  }
  100% {
    left: 88%; /* Inversé : 100 - 12 */
    bottom: 24%;
    opacity: 0;
  }
}

/* Animation vers la droite (plus ample) */
.chut-effect-span4 {
  animation: chutEffectSpan4 2s linear;
}

@keyframes chutEffectSpan4 {
  0% {
    left: 50%;
    bottom: 0%;
  }
  20% {
    left: 55%;
    bottom: 6%;
  }
  40% {
    left: 45%;
    bottom: 12%;
  }
  60% {
    left: 60%;
    bottom: 18%;
    opacity: 1;
  }
  80% {
    left: 55%;
    bottom: 20%;
  }
  100% {
    left: 70%;
    bottom: 40%;
    opacity: 0;
  }
}