/* === Nonogrammes — décoration animée du banner ===
   Le layout banner (wrapper, home, title) vient de banner.css partagé.
*/

/* Motif quadrillé décoratif en fond du body */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
  z-index: 0;
}
#app, .container { position: relative; z-index: 1; }

/* Cases décoratives flottantes dans le banner */
.cell-deco {
  width: 26px; height: 26px;
  border-radius: 5px;
  border: 2px solid rgba(165, 180, 252, 0.5);
  animation: cell-banner-float 3s ease-in-out infinite;
  will-change: transform;
  position: relative;
}
.cell-deco:nth-child(2) { animation-delay: -0.75s; }
.cell-deco:nth-child(3) { animation-delay: -1.5s; }
.cell-deco:nth-child(4) { animation-delay: -2.25s; }
.cell-deco-1 { background: linear-gradient(135deg, #818cf8, #4338ca); border-color: transparent; }
.cell-deco-2 { background: transparent; }
.cell-deco-2::after { content: '✕'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-weight: 700; font-size: 0.85rem; }
.cell-deco-3 { background: linear-gradient(135deg, #818cf8, #4338ca); border-color: transparent; }
.cell-deco-4 { background: transparent; }
@keyframes cell-banner-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (max-width: 480px) {
  .cell-deco { width: 20px; height: 20px; }
}