/* ============================================================
   film.css — LE PLAN QUI SE CONSTRUIT
   Séquence d'images pilotée par le défilement (canvas épinglé).
   La page s'ouvre sur une feuille blanche portant le seul monogramme ;
   dès le premier geste de défilement le plan se trace, se lève en volume,
   prend ses matières, et devient la villa terminée.

   POURQUOI UN CANVAS ET PAS UNE <video> : sur iOS, `currentTime` posé à
   chaque frame de défilement ne rend pas — la vidéo saute ou se fige. La
   séquence d'images est la seule technique qui se contrôle image par image
   sur tous les moteurs. C'est aussi ce qui permet de charger la 1re image
   (82 octets, la feuille blanche) tout de suite et le reste en fond.
   ============================================================ */

.film {
  position: relative;
  /* La hauteur EST la durée : 110 images réparties sur 4,2 écrans de
     défilement. Le film dure 37 s en lecture ; ici il se traverse en
     quelques secondes — c'est le geste du visiteur qui donne le tempo. */
  height: 420vh;
  background: var(--blanc);
}

.film__scene {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--blanc);
  display: grid;
  place-items: center;
}

.film__toile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Le monogramme posé sur la feuille ─────────────────────────────────── */
.film__marque {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  text-align: center;
  color: var(--noir);
  will-change: opacity, transform;
}

.film__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(84px, 11vw, 132px);
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.5vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
}

.film__nom {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.05rem, 2.2vw, 1.7rem);
  letter-spacing: 0.04em;
}

.film__lieu {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--beton-encre);
}

/* ── L'invite de défilement ────────────────────────────────────────────── */
.film__invite {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(1.6rem, 4vh, 3rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--beton-encre);
  will-change: opacity;
}

.film__invite span::after {
  content: "";
  display: block;
  width: 1px;
  height: 42px;
  margin: 0.7rem auto 0;
  background: currentColor;
  transform-origin: top;
  animation: film-fil 2.4s cubic-bezier(0.66, 0, 0.34, 1) infinite;
}

@keyframes film-fil {
  0%   { transform: scaleY(0);   opacity: 0; }
  35%  { transform: scaleY(1);   opacity: 1; }
  100% { transform: scaleY(1);   opacity: 0; transform-origin: bottom; }
}

/* ── Sans JS, en mouvement réduit, ou en passe d'audit ──────────────────
   La section cesse d'être un rail de défilement : elle se réduit à un seul
   écran et la toile porte l'image FINALE (la villa terminée). Une page qui
   ne peut pas animer doit montrer le résultat, jamais une feuille vide. */
.no-js .film,
.film[data-fige="1"] {
  height: 100svh;
}

.no-js .film__invite,
.film[data-fige="1"] .film__invite {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .film { height: 100svh; }
  .film__invite { display: none; }
  .film__invite span::after { animation: none; }
}

@media (max-width: 760px) {
  .film { height: 360vh; }
  .film__marque { gap: 1rem; }
}

/* ── LE PREMIER ÉCRAN, POSÉ À L'ARRIVÉE ────────────────────────────────
   Le contenu d'accueil ne précède plus le film : il le CONCLUT. Il se
   découvre sur la villa terminée, une fois la construction jouée.

   Il est VISIBLE par défaut, et c'est délibéré : sans JS ou en mouvement
   réduit, la toile porte déjà l'image finale, et le texte doit être là.
   C'est le script qui l'efface pour le faire revenir — jamais l'inverse,
   sinon une page sans JS perdrait tout son contenu d'accueil. */
.film__hero {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  padding-block: 9rem 0;
  color: var(--creme);
}

/* Le texte crème se lit sur une villa en pleine lumière dorée : sans voile,
   rien ne passe. Le dégradé monte du bas, là où se tient le contenu. */
.film__hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    /* du bas : sous le titre, le paragraphe et les boutons */
    linear-gradient(to top,
      color-mix(in srgb, var(--noir) 92%, transparent) 0%,
      color-mix(in srgb, var(--noir) 74%, transparent) 34%,
      color-mix(in srgb, var(--noir) 34%, transparent) 62%,
      transparent 88%),
    /* du haut : la ligne de coordonnées y était mesurée à 1,83:1 sur la villa
       en pleine lumière (07/09). Ce second voile la ramène au-dessus de AA. */
    linear-gradient(to bottom,
      color-mix(in srgb, var(--noir) 72%, transparent) 0%,
      color-mix(in srgb, var(--noir) 58%, transparent) 26%,
      transparent 48%);
}

/* Le béton clair ne suffit pas sur une image dorée : la ligne de coordonnées
   passe au blanc franc de la charte. Mesuré, pas supposé. */
.film__hero .hero__coord { color: var(--blanc); }

.film__hero .hero__corps { position: relative; z-index: 1; }
.film__hero h1 { color: var(--creme); }

@media (max-width: 760px) {
  .film__hero { padding-block: 6rem 0; }
}

/* L'image FIXE du repli (sans JS, mouvement réduit, passe d'audit). Elle
   remplace la toile : une <img> est attendue par le navigateur avant `load`,
   un dessin sur canvas ne l'est pas — c'est ce qui rendait les captures vides. */
.film__fige {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Même règle que pour la toile : en portrait, un cadrage plein écran rognerait
   les deux tiers de l'image. On la montre alors en entier. */
@media (max-aspect-ratio: 1/1) {
  .film__fige { object-fit: contain; background: var(--blanc); }
}