/* ==========================================================
   Amarity — page Vertical (s'appuie sur styles.css)
   Un écran 9:16 fixe ; le scroll de la page devient un swipe.
   ========================================================== */
:root {
  --phone-h: min(78vh, 760px);
  --phone-w: calc(var(--phone-h) * 9 / 16);
}

/* ---------- 1. Le fil ---------- */
.feed { position: relative; height: calc((var(--n, 3) + 1) * 100vh); }
.feed__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  isolation: isolate;
}

/* lumière ambiante : l'image du film déborde, très floue */
.ambient { position: absolute; inset: -12%; z-index: -1; pointer-events: none; }
.ambient img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(70px) saturate(1.35) brightness(.42);
  opacity: 0; transition: opacity 1.1s var(--ease); will-change: opacity;
}
.ambient img.is-on { opacity: 1; }
.feed__stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(11,11,10,.75) 100%);
}

/* l'écran */
.phone {
  position: absolute; left: 50%; top: 50%;
  width: var(--phone-w); height: var(--phone-h);
  translate: -50% -50%;
  border-radius: 30px; overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 0 0 1px rgba(237,232,223,.16), 0 50px 120px rgba(0,0,0,.55);
}
.phone__track { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--n, 3) * 100%); will-change: transform; }
.slide { position: relative; height: calc(100% / var(--n, 3)); overflow: hidden; cursor: pointer; }
.slide > img, .slide > video, .slide > iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0;
}
.slide > iframe { opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.slide > iframe.is-ready { opacity: 1; }
.slide__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 80px 20px 22px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.72));
}
.slide__title { margin: 0; font-weight: 800; font-variation-settings: "wdth" 118; text-transform: uppercase; font-size: clamp(16px, 2.1vh, 21px); line-height: 1.05; letter-spacing: -.01em; }
.slide__meta { margin-top: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(237,232,223,.75); }

/* barres « stories » : elles suivent la lecture réelle */
.phone__bars { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 3; display: flex; gap: 4px; }
.phone__bars span { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.28); overflow: hidden; }
.phone__bars i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.phone__bars span.is-done i { transform: scaleX(1); }
.phone__bars span.is-timed i { animation: bar var(--dur, 30s) linear infinite; }
@keyframes bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.phone__sound {
  position: absolute; right: 14px; top: 30px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 10px;
  border-radius: 999px; background: rgba(11,11,10,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone);
  transition: background .3s var(--ease);
}
.phone__sound svg { width: 16px; height: 16px; }
.phone__sound:hover { background: rgba(11,11,10,.75); }

/* intro, à gauche de l'écran */
.intro {
  position: absolute; top: 50%; translate: 0 -50%;
  left: calc(var(--gutter) + 24px); width: calc(50% - var(--phone-w) / 2 - var(--gutter) - 24px - 3vw);
  display: grid; gap: 22px;
}
.intro__title {
  margin: 0; font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase;
  font-size: clamp(34px, min(3.3vw, 6.6vh), 84px); line-height: .9; letter-spacing: -.03em;
}
.intro__title em { letter-spacing: -.01em; }
.intro__text { margin: 0; max-width: 40ch; color: var(--bone-2); }

/* titre composé à la verticale, collé à l'écran */
.vtitle {
  position: absolute; top: 50%; translate: 0 -50%;
  right: calc(50% + var(--phone-w) / 2 + 3vw);
  height: var(--phone-h); width: 28vh; overflow: hidden; opacity: 0;
}
.vtitle__track { position: relative; height: 100%; }
.vtitle__item {
  position: absolute; right: 0; bottom: 0; height: 100%;
  writing-mode: vertical-rl; transform: rotate(180deg);
  margin: 0; font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase;
  font-size: clamp(36px, 7.2vh, 84px); line-height: .9; letter-spacing: -.02em;
  white-space: nowrap; visibility: hidden;
}
.vtitle__item em { font-size: .62em; letter-spacing: 0; color: var(--gold); }

/* fiche du film, à droite */
.details {
  position: absolute; top: 50%; translate: 0 -50%;
  left: calc(50% + var(--phone-w) / 2 + 4vw); width: min(320px, calc(50% - var(--phone-w) / 2 - 10vw));
  display: grid; gap: 14px; opacity: 0;
}
.details__count { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; color: var(--muted); }
.details__count b { font-weight: 400; color: var(--gold); }
.details__title { margin: 0; font-weight: 850; font-variation-settings: "wdth" 120; text-transform: uppercase; font-size: clamp(22px, 2.2vw, 34px); line-height: .98; letter-spacing: -.01em; }
.details__sub { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 22px; line-height: 1.15; color: var(--bone-2); }
.details__list { margin: 10px 0 0; border-top: 1px solid rgba(237,232,223,.18); }
.details__list div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(237,232,223,.18); }
.details__list dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.details__list dd { margin: 0; font-size: 14px; text-align: right; }

/* indicateur de défilement du fil */
.scrubber {
  position: absolute; top: 50%; translate: 0 -50%; right: calc(var(--rail) + 44px);
  width: 2px; height: 140px; border-radius: 2px; background: rgba(237,232,223,.18); overflow: hidden;
}
.scrubber span { display: block; width: 100%; height: calc(100% / var(--n, 3)); background: var(--bone); border-radius: 2px; will-change: transform; }

.swipe-hint {
  position: absolute; left: 50%; bottom: calc((100vh - var(--phone-h)) / 2 - 38px); translate: -50% 0; margin: 0;
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-2);
}
.swipe-hint__thumb { position: relative; width: 12px; height: 20px; border: 1px solid currentColor; border-radius: 8px; }
.swipe-hint__thumb::after {
  content: ""; position: absolute; left: 50%; top: 11px; width: 3px; height: 4px; margin-left: -1.5px; border-radius: 2px; background: currentColor;
  animation: thumb 1.6s var(--ease) infinite;
}
@keyframes thumb { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(-7px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- 2. Le mur ---------- */
.wall { position: relative; overflow: hidden; padding: 18vh var(--gutter) 22vh calc(var(--gutter) + 24px); }
.wall__head { display: grid; gap: 22px; margin-bottom: 10vh; }
.wall__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 24px); align-items: start; }
.wall__col { display: grid; gap: clamp(12px, 1.6vw, 24px); will-change: transform; }
.wall__col:nth-child(even) { margin-top: 16vh; }
.tile { position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: var(--ink-2); cursor: pointer; display: block; width: 100%; text-align: left; }
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s var(--ease); filter: brightness(.86); }
.tile video { opacity: 0; transition: opacity .5s var(--ease); }
.tile:hover img { transform: scale(1.06); filter: brightness(1); }
.tile:hover video { opacity: 1; }
.tile__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 16px 16px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.7)); }
.tile__title { display: block; font-weight: 750; font-variation-settings: "wdth" 112; font-size: 15px; line-height: 1.15; }
.tile__meta { display: block; margin-top: 4px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(237,232,223,.72); }
.tile__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7); display: grid; place-items: center; opacity: 0; scale: .8;
  transition: opacity .4s var(--ease), scale .4s var(--ease);
}
.tile__play::after { content: ""; margin-left: 3px; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.tile:hover .tile__play, .tile:focus-visible .tile__play { opacity: 1; scale: 1; }

/* ---------- 3. Contact ---------- */
.vcta { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--bone); color: var(--ink); padding: 20vh var(--gutter) 0 calc(var(--gutter) + 24px); }
.vcta__title { margin: 0; font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase; font-size: clamp(52px, 11vw, 200px); line-height: .84; letter-spacing: -.04em; }
.vcta > p { max-width: 46ch; margin: 36px 0 0; font-size: 18px; color: #4c4842; }
.vcta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 40px; }
.vcta .link { margin-top: 0; }

/* lecteur 9:16 */
.lightbox__frame.is-vertical { width: auto; height: min(86vh, calc(86vw * 16 / 9)); aspect-ratio: 9 / 16; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  :root { --phone-h: min(66svh, calc(84vw * 16 / 9)); }
  .phone { top: calc(64px + var(--phone-h) / 2); }
  .intro {
    left: 50%; top: auto; bottom: 18px; translate: -50% 0; width: calc(100% - 2 * var(--gutter));
    gap: 10px; text-align: center; justify-items: center;
  }
  .intro .kicker { display: none; }
  .intro__title { font-size: clamp(30px, 9vw, 44px); }
  .intro__text { display: none; }
  .vtitle, .scrubber, .swipe-hint { display: none; }
  .details {
    left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: 16px; translate: none;
    gap: 6px; text-align: center; justify-items: center;
  }
  .details__list { display: none; }
  .details__title { font-size: 20px; }
  .details__sub { font-size: 17px; }
  .wall { padding-left: var(--gutter); }
  .wall__cols { grid-template-columns: repeat(2, 1fr); }
  .wall__col:nth-child(even) { margin-top: 10vh; }
  .vcta { padding-left: var(--gutter); }
}

/* ---------- Mouvement réduit : le fil se parcourt dans l'écran, sans scroll piloté ---------- */
@media (prefers-reduced-motion: reduce) {
  .feed { height: auto; }
  .feed__stage { position: relative; }
  .phone__track { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; }
  .slide { height: 100%; scroll-snap-align: start; }
  .details, .vtitle { opacity: 1; }
  .intro { opacity: 0; }
}