/* ------------------------------------------------------ film (landing) ----
   Défilement piloté : la vidéo est une suite d'images AVIF peinte sur un
   canvas au rythme du scroll, doublée d'un plan 2D où la caméra avance en
   même temps. Par défaut (sans JS ou mouvement réduit), les chapitres
   s'empilent sur leurs images fixes et le plan s'affiche entier. */
::selection { background: var(--accent); color: #FFF; }

.film {
  --mast: 73px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --umber: 14, 11, 8;
  --cream: 255, 248, 240;
  --glow: 136, 196, 255;
  --brass: 214, 172, 108;
  background: #17130F;
  color: #FFF;
}

.film__canvas, .film__scrim, .film__hud, .film__hint { display: none; }

/* --- chapitres (mode empilé par défaut) --------------------------------- */
.film__chapter {
  position: relative;
  isolation: isolate;
  min-height: min(72svh, 640px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.film__still {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.film__chapter::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(var(--umber), .72) 0%, rgba(var(--umber), .3) 44%, rgba(var(--umber), 0) 70%),
    linear-gradient(0deg, rgba(var(--umber), .66) 0%, rgba(var(--umber), 0) 46%);
}
.film__copy { width: 100%; padding-block: clamp(40px, 8vh, 88px); }

.film__display {
  font-weight: 800;
  font-size: clamp(40px, 6vw, 84px);
  line-height: .98;
  letter-spacing: -0.04em;
  text-wrap: balance;
  max-width: 12ch;
}
.film__title {
  font-weight: 800;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 14ch;
}
.film__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.film__ghost { background: rgba(var(--cream), .06); color: #FFF; border-color: rgba(var(--cream), .4); }
.film__ghost:hover { background: rgba(var(--cream), .14); border-color: #FFF; color: #FFF; }
.film :where(a, button):focus-visible { outline-color: #FFF; }

/* --- plan 2D ------------------------------------------------------------- */
.film__plan {
  margin: 0 auto;
  padding: 18px 18px 14px;
  max-width: 520px;
  color: rgba(var(--cream), .9);
  background: rgba(28, 21, 14, .56);
  border: 1px solid rgba(var(--brass), .26);
  border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
}
.film:not(.film--live) .film__plan { margin-block: 40px; width: calc(100% - 2 * var(--gutter)); }

.film__plan-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: rgba(var(--cream), .8);
}
.film__plan-scale { font-weight: 500; color: rgba(var(--cream), .5); font-variant-numeric: tabular-nums; }

.plan { display: block; width: 100%; height: auto; overflow: visible; }
.plan__draw { fill: none; stroke: rgb(var(--cream)); stroke-linecap: round; stroke-linejoin: round; }
.plan__walls     { stroke-width: 4.5; stroke-linecap: square; }
.plan__glass     { stroke-width: .9; stroke: rgba(var(--brass), .85); }
.plan__furniture { stroke-width: 1.1; stroke: rgba(var(--cream), .58); }
.plan__dims      { stroke-width: .8; stroke: rgba(var(--cream), .36); }
.plan__labels text {
  fill: rgba(var(--cream), .66);
  font-family: var(--sans); font-size: 7px; font-weight: 600; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.plan__room {
  fill: rgba(var(--brass), .14);
  stroke: rgba(var(--brass), .62); stroke-width: 1;
  opacity: 0;
  transition: opacity .8s var(--ease-out);
  filter: drop-shadow(0 0 6px rgba(var(--brass), .4));
}
.film__plan[data-view="0"] .plan__room[data-room="0"],
.film__plan[data-view="1"] .plan__room[data-room="1"],
.film__plan[data-view="2"] .plan__room[data-room="2"] { opacity: 1; }

.plan__column { fill: rgba(var(--brass), .18); stroke: rgb(var(--brass)); }
.plan__lights {
  fill: none; stroke: #ffd599; stroke-width: 2;
  opacity: var(--night, 0);
  filter: drop-shadow(0 0 4px #eab977);
}

.plan__path  { fill: none; stroke: rgba(var(--brass), .32); stroke-width: 1; stroke-dasharray: 2 4; }
.plan__trail {
  fill: none; stroke: rgb(var(--brass)); stroke-width: 1.8; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: var(--trail, 1);
  filter: drop-shadow(0 0 3px rgba(var(--brass), .8));
}
.plan__cone  { fill: url(#plan-cone); }
.plan__dot   { fill: rgb(var(--brass)); stroke: #17130F; stroke-width: 1.2; }
.plan__pulse { fill: none; stroke: rgb(var(--brass)); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.film:not(.film--live) .plan__cam,
.film:not(.film--live) .plan__trail { display: none; }

/* --- mode piloté --------------------------------------------------------- */
.film--live { height: 460svh; }
.film--live .film__stage {
  position: sticky; top: var(--mast);
  height: calc(100svh - var(--mast));
  overflow: hidden;
}
.film--live .film__canvas {
  display: block; position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.film--live .film__scrim {
  display: block; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--umber), .62) 0%, rgba(var(--umber), .22) 36%, rgba(var(--umber), 0) 56%, rgba(var(--umber), .38) 100%),
    linear-gradient(0deg, rgba(var(--umber), .55) 0%, rgba(var(--umber), 0) 36%);
}

.film--live .film__chapters { position: absolute; inset: 0; }
.film--live .film__chapter {
  position: absolute; inset: 0; min-height: 0;
  opacity: 0; visibility: hidden;
  transform: translateY(24px);
  filter: blur(10px);
  transition:
    opacity .45s var(--ease-out),
    transform .9s var(--ease-out),
    filter .6s var(--ease-out),
    visibility 0s linear .9s;
}
.film--live .film__chapter::before,
.film--live .film__still { display: none; }
.film--live .film__chapter.is-active {
  opacity: 1; visibility: visible;
  transform: none; filter: blur(0);
  transition:
    opacity .9s var(--ease-out),
    transform 1.1s var(--ease-out),
    filter .9s var(--ease-out),
    visibility 0s;
}
.film--live .film__copy { padding-bottom: clamp(80px, 14vh, 136px); }

/* plan en surimpression */
.film--live .film__plan {
  position: absolute; right: var(--gutter); top: 50%;
  width: clamp(320px, 32vw, 470px);
  margin: 0;
  transform: translateY(-54%);
  background: rgba(26, 19, 13, .5);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}
.film--live .plan__draw > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: plan-draw 1.6s var(--ease-out) calc(.3s + var(--d, 0) * 1.4s) forwards;
}
@keyframes plan-draw { to { stroke-dashoffset: 0; } }
.film--live .plan__labels,
.film--live .plan__cam { animation: plan-fade .8s var(--ease-out) 1.6s both; }
@keyframes plan-fade { from { opacity: 0; } to { opacity: 1; } }
.film--live .plan__pulse { animation: plan-pulse 2s var(--ease-out) infinite; }
@keyframes plan-pulse {
  0%   { transform: scale(1); opacity: .9; }
  100% { transform: scale(4); opacity: 0; }
}

/* HUD */
.film--live .film__hud {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: var(--shell); margin-inline: auto;
  padding: 0 var(--gutter) 28px;
  font-size: 12px; font-weight: 500; letter-spacing: .02em;
  color: rgba(var(--cream), .74);
}
.film__meter { display: flex; align-items: center; gap: 16px; }
.film__count { font-variant-numeric: tabular-nums; }
.film__count b { color: #FFF; font-weight: 700; }
.film__track {
  position: relative; width: 220px; height: 2px;
  background: rgba(var(--cream), .22); border-radius: 2px; overflow: hidden;
}
.film__progress {
  position: absolute; inset: 0; background: rgb(var(--glow));
  box-shadow: 0 0 10px rgba(var(--glow), .9);
  transform-origin: left; transform: scaleX(0);
}
.film--live .film__hint {
  display: block; position: absolute; left: 50%; bottom: 64px;
  transform: translateX(-50%);
  font-size: 13px; font-weight: 600; color: rgba(var(--cream), .82);
  transition: opacity .6s var(--ease-out);
}
.film--live .film__hint::after {
  content: ""; display: block; width: 1px; height: 28px; margin: 10px auto 0;
  background: linear-gradient(rgba(var(--cream), .85), rgba(var(--cream), 0));
  transform-origin: top;
  animation: film-hint 1.8s var(--ease-out) infinite;
}
.film--live.is-scrolled .film__hint { opacity: 0; }
@keyframes film-hint {
  0%   { transform: scaleY(0); opacity: 1; }
  80%  { transform: scaleY(1); opacity: 0; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* --- tablette / mobile ---------------------------------------------------- */
@media (max-width: 1200px) {
}
@media (max-width: 1020px) {
  /* Le plan se range dans le coin haut droit et se fait discret : au centre
     de l'écran il masquait le lieu qu'il est censé commenter. */
  .film--live .film__plan { top: 20px; transform: none; width: min(40vw, 300px); padding: 12px 12px 8px; }
}
@media (max-width: 720px) {
  .film__chapter::before,
  .film--live .film__scrim {
    background: linear-gradient(0deg, rgba(var(--umber), .88) 0%, rgba(var(--umber), .5) 46%, rgba(var(--umber), .1) 100%);
  }
  /* Le film dure moins longtemps au doigt : 240 images sur quatre hauteurs et
     demie, c'était trois balayages avant d'atteindre le moindre contenu. */
  .film--live { height: 260svh; }

  .film--live .film__plan { width: min(46vw, 260px); right: 14px; top: 14px; padding: 10px 10px 8px; }
  .film__plan-head { font-size: 11px; margin-bottom: 6px; }
  .film--live .film__hint { display: none; }
  .film__track { width: 90px; }
  /* Le bandeau du bas revenait sur deux lignes et écrasait la jauge. */
  .film__caption { display: none; }
  .film--live .film__hud {
    justify-content: flex-end;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .film__chapter { min-height: min(62svh, 520px); }
  .film__display { font-size: 34px; }
  .film__title { font-size: 27px; }
  .film__actions { margin-top: 22px; }
}

/* Sur un vrai téléphone, un coin de 180 px ne montrerait plus rien : le plan
   reprend la largeur, en haut, où il redevient lisible. */
@media (max-width: 560px) {
  .film--live .film__plan {
    left: var(--gutter); right: var(--gutter); width: auto;
    padding: 12px 12px 10px;
  }
}

/* Écritures et traits du plan : leur épaisseur est exprimée dans le repère du
   dessin, donc elle fond avec lui. On la rattrape quand le plan rétrécit. */
@media (max-width: 860px) {
  .plan__labels text { font-size: 13px; letter-spacing: .03em; }
  .plan__furniture { stroke-width: 1.6; }
  .plan__dims      { stroke-width: 1.2; }
  .plan__glass     { stroke-width: 1.4; }
  .plan__walls     { stroke-width: 5.5; }
}
@media (max-width: 520px) {
  .plan__labels text { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .plan__pulse { animation: none !important; }
}