/* === Rummi — décoration animée du banner ===
   Le layout banner (wrapper, home, title) vient de banner.css partagé,
   chargé via le proxy local css-banner.php depuis SHARED_PATH/banner.php.
*/

/* === Rummi — Bandeau identitaire persistant (toutes les pages) === */

/* Motif de tuiles/briques en fond du body */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(253,186,116,0.03) 2px, transparent 2px),
    linear-gradient(90deg, rgba(253,186,116,0.03) 2px, transparent 2px),
    linear-gradient(rgba(251,146,60,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251,146,60,0.02) 1px, transparent 1px);
  background-size: 60px 80px, 60px 80px, 30px 40px, 30px 40px;
  pointer-events: none;
  z-index: 0;
}

/* Bandeau compact */

/* Motifs décoratifs dans les coins */

/* Tuiles numérotées flottantes */

.tile-deco {
  width: 28px; height: 38px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 900;
  animation: tile-float 3s ease-in-out infinite;
  will-change: transform;
}
.tile-deco:nth-child(2) {
  animation-delay: -1s;
}
.tile-deco:nth-child(3) {
  animation-delay: -2s;
}
.tile-light {
  background: linear-gradient(135deg, rgba(253,186,116,0.25), rgba(253,186,116,0.1));
  box-shadow: 0 3px 8px rgba(253,186,116,0.3), inset 0 0 0 2px rgba(253,186,116,0.3);
  color: #fdba74;
}
.tile-mid {
  background: linear-gradient(135deg, rgba(251,146,60,0.25), rgba(251,146,60,0.1));
  box-shadow: 0 3px 8px rgba(251,146,60,0.3), inset 0 0 0 2px rgba(251,146,60,0.3);
  color: #fb923c;
}
.tile-dark {
  background: linear-gradient(135deg, rgba(249,115,22,0.25), rgba(249,115,22,0.1));
  box-shadow: 0 3px 8px rgba(249,115,22,0.3), inset 0 0 0 2px rgba(249,115,22,0.3);
  color: #f97316;
}
@keyframes tile-float {

  0%, 100% {
  transform: translateY(0);
}
  50% {
  transform: translateY(-5px);
}
}

/* Titre-lien */

/* Responsive */
@media (max-width: 480px) {

  
  
  .tile-deco {
  width: 22px; height: 30px; font-size: 0.85rem;
}
}

/* === Bouton retour à l'accueil (aligné verticalement avec .banner-title via `bottom`) === */

/* === FIN bouton retour à l'accueil === */
