/* Décor 3D de l'accueil (Antoine, 31/10) : un ciel au couchant où passent des avions (three.js, decor.js), fixé
   derrière la page ; les cartes des jeux flottent doucement par-dessus, chacune à son rythme. */
.decor-pret body { background: #070a18; } /* fond de secours sombre ; sur body seulement, sinon il couvre la toile */
#decor { position: fixed; inset: 0; z-index: -2; width: 100vw; height: 100vh; display: block; }
.decor-pret .orbes { display: none; }
.decor-pret nav { background: rgba(18, 10, 30, .5); }
.decor-pret header { display: flex; flex-direction: column; align-items: center; text-align: center; }
.decor-pret header .logo { width: min(420px, 70vw); }

/* Lisibilité sur le ciel rose : les textes blancs posés sur le décor ont un fond sombre translucide. */
.decor-pret .accroche, .decor-pret main > h2, .decor-pret .note { width: fit-content; background: rgba(18, 10, 30, .78);
  padding: 6px 16px; border-radius: 14px; text-shadow: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.decor-pret main > h2 { padding: 8px 18px; }
.decor-pret .note { color: var(--texte); }

/* Cartes qui flottent : propriété translate (indépendante de transform, que Motion anime à l'apparition et au survol). */
@keyframes flotter { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.decor-pret .appli { animation: flotter 5.5s ease-in-out infinite; }
.decor-pret .appli:nth-child(2n) { animation-duration: 6.4s; animation-delay: -1.8s; }
.decor-pret .appli:nth-child(3n) { animation-duration: 7.1s; animation-delay: -3.1s; }
.decor-pret .appli:nth-child(4n+1) { animation-delay: -4.4s; }
@media (prefers-reduced-motion: reduce) { .decor-pret .appli { animation: none; } }
.decor-pret .note { margin-left: auto; margin-right: auto; text-align: center; } /* note centrée (Antoine, 31/10) */
.decor-pret main > h2 { margin-left: auto; margin-right: auto; text-align: center; } /* titres centrés (Antoine, 31/10) */
/* une carte seule dans sa section (ex. Coming soon) : centrée sous son titre */
.decor-pret .grille:has(> .appli:only-child) { grid-template-columns: minmax(0, 520px); justify-content: center; }