/* La ville des sites, en-tête de /maquettes (08/10/2026).
   Les vingt captures des démos vues du ciel dans un panneau sombre.
   Fiche : bibliotheque-motion/motion-library/ville-des-sites/.
   Le canvas est dessiné par ville.js. Sans WebGL ou avec « réduire les
   animations », la mosaïque fixe prend sa place. */

.ville-m {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; aspect-ratio: 1 / 1;
  background: #101112; border-radius: 14px;
  box-shadow: 0 24px 60px -28px rgba(26, 26, 26, .55);
}
.ville-m canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Les bords se fondent dans la nuit, la ville semble continuer. */
.ville-m::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse 78% 74% at 50% 52%, rgba(16, 17, 18, 0) 58%, rgba(16, 17, 18, .55) 100%);
  box-shadow: inset 0 0 0 1px rgba(245, 242, 234, .06);
}

/* Repli : neuf captures à plat, inclinées en CSS, avec la lueur cuivre fixe.
   Affiché par la classe repli (posée par ville.js), ou tout de suite en
   mouvement réduit. */
.vm-mosaique {
  display: none; grid-template-columns: repeat(3, 1fr); gap: 4%;
  position: absolute; left: 50%; top: 50%; width: 175%; z-index: 0;
  transform: translate(-50%, -46%) perspective(900px) rotateX(48deg) rotateZ(-18deg);
}
.vm-mosaique img { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; object-position: top; border-radius: 3px; opacity: .82; }
.ville-m.repli canvas, html.calme .ville-m canvas { display: none; }
.ville-m.repli .vm-mosaique, html.calme .ville-m .vm-mosaique { display: grid; }
.ville-m.repli::before, html.calme .ville-m::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(217, 147, 94, .32), rgba(217, 147, 94, 0) 45%);
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
  .ville-m canvas { display: none; }
  .ville-m .vm-mosaique { display: grid; }
}

/* Téléphone et tablette : le panneau passe sous le titre, en 16:10. */
@media (max-width: 900px) {
  .ville-m { aspect-ratio: 16 / 10; max-width: 640px; border-radius: 12px; }
  .vm-mosaique { width: 112%; transform: translate(-50%, -50%) perspective(900px) rotateX(48deg) rotateZ(-18deg); }
}