/*
 * Yam's — déco du banner des pages internes : trois dés qui roulent doucement.
 *
 * UNIQUEMENT la déco : la structure (.banner-home, .banner-title, .jeu-banner)
 * appartient au composant partagé fichiers-partages-des-jeux/css/banner.css.
 * Animations en transform/opacity seulement (pièges de perf Firefox).
 */

.de-deco {
  position: absolute;
  top: 18%;
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
  color: #f4ecd8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.de-un    { left: 14%; animation: de-roule 8s ease-in-out infinite; }
.de-deux  { left: 48%; animation: de-roule 8s ease-in-out infinite 2.6s; }
.de-trois { left: 80%; animation: de-roule 8s ease-in-out infinite 5.2s; }

/* Un dé qui roule d'un quart de tour et s'arrête. */
@keyframes de-roule {
  0%   { opacity: 0;    transform: translateX(-10px) rotate(-90deg) scale(0.8); }
  20%  { opacity: 0.85; transform: translateX(0) rotate(0deg) scale(1); }
  70%  { opacity: 0.85; transform: translateX(0) rotate(0deg) scale(1); }
  100% { opacity: 0;    transform: translateX(8px) rotate(20deg) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .de-deco { animation: none; opacity: 0.55; }
}

@media (max-width: 640px) {
  .de-trois { display: none; }
}