/* backgammon-banner.css — uniquement la déco animée du banner partagé.
   Les styles de .banner-home / .banner-title sont gérés par SHARED_PATH/css/banner.css.
   Perf : animer transform/opacity uniquement (cf. pièges perf CSS Firefox). */

.pion-deco {
  display: inline-block;
  font-size: 1.5rem;
  margin: 0 4px;
  color: #e8c07d;
  opacity: 0.85;
  will-change: transform;
  animation: bg-pion-flotte 3.2s ease-in-out infinite;
}
.pion-deco:nth-child(2) { animation-delay: 0.5s; color: #f2e6cf; }
.pion-deco:nth-child(3) { animation-delay: 1s; color: #d98f3a; }

@keyframes bg-pion-flotte {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(8deg); }
}