#15 Animations

.button {
  background: #3b82f6;
  transform: scale(1);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background: #2563eb;
  transform: scale(1.05);
}

/* Déplacer */
transform: translateX(50px);
transform: translate(50px, -20px);

/* Tourner */
transform: rotate(45deg);

/* Agrandir/réduire */
transform: scale(1.2);     /* Agrandir de 20% */
transform: scale(0.8);     /* Réduire de 20% */

/* Combiner */
transform: translate(-50%, -50%) rotate(45deg) scale(1.1);

@keyframes glissement {
  0%   { opacity: 0; transform: translateX(-100px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes pulsation {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.glisser {
  animation: glissement 0.5s ease-out forwards;
}

.pulser {
  animation: pulsation 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}