/* =========================
   ERREUR (secousse)
========================= */

@keyframes secousseErreur {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(calc(-6px * var(--scale))); }
  40%  { transform: translateX(calc(6px * var(--scale))); }
  60%  { transform: translateX(calc(-4px * var(--scale))); }
  80%  { transform: translateX(calc(4px * var(--scale))); }
  100% { transform: translateX(0); }
}

/* =========================
   SUCCÈS (rebond)
========================= */

@keyframes rebondSucces {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.025) translateY(calc(-3px * var(--scale))); }
  60%  { transform: scale(0.995) translateY(calc(1px * var(--scale))); }
  100% { transform: scale(1) translateY(0); }
}

/* =========================
   APPLICATION
========================= */

.cadre.succesAnime {
  animation: rebondSucces 0.35s ease;
}

.cadre.erreurAnime {
  animation: secousseErreur 0.35s ease;
}

/* =========================
   MOBILE (optionnel)
========================= */

@media (max-width:700px){

  .cadre.succesAnime {
    animation-duration: 0.4s; /* un peu plus doux */
  }

  .cadre.erreurAnime {
    animation-duration: 0.4s;
  }

}