/* Socle commun des cinq maquettes : remise à zéro, apparitions, cadres de tuiles mises à l'échelle.
   Chaque maquette pose ensuite sa propre identité (couleurs, polices, mise en page). */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 3px; }
body.menu-open { overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Apparition au défilement. Sans JavaScript (ou sans la classe js), tout reste visible. */
.js .rv { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease-out, cubic-bezier(.16,1,.3,1)), transform 0.9s var(--ease-out, cubic-bezier(.16,1,.3,1)); transition-delay: calc(var(--i, 0) * 90ms); }
.js .rv.in { opacity: 1; transform: none; }

/* Une tuile de la vidéo (js/art-*.js) dessinée à sa taille d'origine, ramenée à son cadre par kit.js. */
.fit { position: absolute; left: 0; top: 0; width: 558px; height: 718px; transform-origin: 0 0; transform: scale(var(--s, 0.5)); }
.fit-frame { position: relative; overflow: hidden; aspect-ratio: 558 / 718; }
[data-live]:not(.is-in) .fit *, [data-live]:not(.is-in) .fit *::before, [data-live]:not(.is-in) .fit *::after { animation-play-state: paused !important; }

/* Marquee sans fin : kit.js duplique le contenu, la vitesse vient de --speed (secondes pour un tour). */
.marquee { display: flex; overflow: hidden; user-select: none; }
.marquee__track { display: flex; flex: none; align-items: center; gap: var(--gap, 3rem); padding-right: var(--gap, 3rem); animation: marquee var(--speed, 30s) linear infinite; animation-direction: var(--dir, normal); }
@keyframes marquee { to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
}