/* ═══════════════════════════════════════════════════════════════
   Accueil, scène 6 : au cinéma, en ce moment (js/scenes/cinema.js). Préfixe .cn__
   Le soir, devant la salle : le caisson lumineux de l'affiche sur le sol du hall, « Au cinéma » en très grand,
   le film, le tableau des séances de la semaine. Puis on entre dans la lumière du caisson ; au jour, à la même
   place, le caisson éteint du film qui s'annonce.
   L'allumage : --lit (0 éteint, 1 allumé), deux tubes --ta et --tb pour les battements ; ses couleurs --c1, --c2,
   --c3 (le haut, le milieu et le bas de l'affiche) sont mesurées sur l'affiche par le script. L'éblouissement et
   l'entrée dans la vitre sont écrits par le script, élément par élément (opacités, transformations).
   ═══════════════════════════════════════════════════════════════ */
.cn {
  position: relative; background: var(--paper); color: var(--ink); overflow-x: clip;
  /* le noir du hall, celui de la salle ; le sol un ton plus bas. La couleur vient de la lumière de l'affiche */
  --wall: var(--night); --floor-c: #050302;
}
.cn__track { background: var(--floor-c); }
.cn__track.is-day { background: var(--paper); }
.cn__stage {
  --lit: 0; --ta: 0; --tb: 0;
  --c1: 70 160 196; --c2: 214 199 186; --c3: 60 50 44;
  position: relative; overflow: hidden; color: var(--ivory); background: var(--wall);
}
/* le sol du hall : il commence au pied du caisson (le script le place) */
.cn__floor { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 100%; background: var(--floor-c); box-shadow: inset 0 1px 0 rgba(239, 230, 216, .09); pointer-events: none; will-change: transform; }
.cn__set { position: absolute; z-index: 1; inset: 0; }

/* ── le titre ── */
.cn__mast { margin: 0; font-family: var(--display); font-stretch: 62.5%; font-weight: 400; line-height: .84; text-transform: uppercase; letter-spacing: .005em; white-space: nowrap; }
.cn__row { display: block; width: max-content; }
.cn__ar { display: block; margin-top: .08em; font-family: var(--ar); font-weight: 700; font-size: .26em; line-height: 1.3; text-transform: none; letter-spacing: 0; text-align: right; }
.cn__stage .cn__ar { color: var(--ivory-2); }

/* ── le caisson ── */
.cn__unit { position: relative; z-index: 0; isolation: isolate; }
.cn__box {
  position: relative; margin: 0; padding: 11px; border-radius: 2px;
  background: linear-gradient(155deg, #2e2a27 0%, #15120f 46%, #211d1a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .12), 0 44px 60px -34px rgba(0, 0, 0, .95);
}
/* sa lueur autour du cadre : dessinée une fois, seule son opacité suit l'allumage */
.cn__stage .cn__box::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 80px 4px rgb(var(--c2) / .22); opacity: var(--lit); }
.cn__stage .cn__mbox::after { display: none; }
.cn__glass { position: relative; overflow: hidden; aspect-ratio: var(--ar, 3 / 4); background: #060606; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }
.cn__poster {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(calc(.24 + var(--lit) * .82)) saturate(calc(.42 + var(--lit) * .64)) contrast(calc(1.1 - var(--lit) * .12));
}
/* les tubes, derrière l'affiche : pendant les battements, l'un s'allume avant l'autre */
.cn__tube { position: absolute; left: 0; right: 0; height: 58%; pointer-events: none; mix-blend-mode: screen; }
.cn__tube[data-t="a"] { top: -4%; opacity: var(--ta); background: linear-gradient(to bottom, rgba(236, 244, 250, 0), rgba(236, 244, 250, .7) 42%, rgba(236, 244, 250, 0)); }
.cn__tube[data-t="b"] { bottom: -4%; opacity: var(--tb); background: linear-gradient(to bottom, rgba(250, 242, 228, 0), rgba(250, 242, 228, .7) 58%, rgba(250, 242, 228, 0)); }
/* l'éblouissement : la vitre devient blanche */
.cn__white { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; will-change: opacity; }
/* la vitre : son reflet se voit tant que le caisson est éteint ; allumée, une très légère lumière laiteuse */
.cn__sheen { position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - var(--lit) * .75);
  background: linear-gradient(118deg, transparent 26%, rgba(255, 255, 255, .09) 38%, transparent 47%, transparent 63%, rgba(255, 255, 255, .05) 69%, transparent 75%); }
.cn__glass::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--lit) * .55);
  background: radial-gradient(120% 80% at 50% 45%, rgba(255, 255, 255, .07), transparent 70%); mix-blend-mode: screen; }
/* sa lumière sur le mur, aux couleurs de l'affiche ; et celle, plus blanche, de l'éblouissement */
.cn__halo, .cn__flare { position: absolute; z-index: -1; left: -16%; right: -16%; top: -7%; bottom: 2%; pointer-events: none; will-change: opacity; }
.cn__halo { background: linear-gradient(to bottom, rgb(var(--c1)), rgb(var(--c2)) 52%, rgb(var(--c3))); filter: blur(64px); opacity: calc(var(--lit) * .36); }
.cn__flare { left: -10%; right: -10%; top: -4%; bottom: 0; background: rgb(255 250 242); filter: blur(56px); opacity: 0; }
/* au sol : la flaque de lumière et le reflet du caisson (ils s'effacent quand le caisson recule) */
.cn__ground { position: absolute; z-index: -1; left: 0; right: 0; top: 100%; height: var(--fl, 110px); pointer-events: none; }
.cn__pool { position: absolute; left: -40%; right: -40%; top: 0; height: 100%;
  background: radial-gradient(46% 70% at 50% 0%, rgb(var(--c2) / .3), rgb(var(--c2) / 0) 100%); opacity: var(--lit); }
.cn__mirror { position: absolute; left: 0; right: 0; top: 0; height: 100%; overflow: hidden; opacity: calc(.08 + var(--lit) * .3);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent 82%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent 82%); }
.cn__mbox { transform: scaleY(-1); filter: blur(1.5px); box-shadow: none; }

/* ── le film ── */
.cn__head { display: inline-block; max-width: 100%; vertical-align: top; }
.cn__title { margin: 0; font-family: var(--display); font-stretch: 62.5%; font-weight: 400; font-size: clamp(2.6rem, 4.1vw, 4.8rem); line-height: .9; text-transform: uppercase; letter-spacing: .005em; }
.cn__w { display: inline-block; }
/* (l'arabe s'aligne sous le bord droit du titre, comme sous « Au cinéma ») */
.cn__tar { margin: 4px 0 0; font-family: var(--ar); font-weight: 700; font-size: clamp(1.5rem, 1.9vw, 2.2rem); line-height: 1.2; text-align: right; }
.cn__line { margin: 14px 0 0; max-width: 36ch; font-family: var(--text); font-size: clamp(1.05rem, 1.22vw, 1.3rem); line-height: 1.5; }
.cn__line em { font-style: italic; }
.cn__credits { margin: 14px 0 0; max-width: 48ch; font-size: .86rem; line-height: 1.6; }
.cn__stage .cn__tar, .cn__stage .cn__credits { color: var(--ivory-2); }

/* ── le tableau des séances : la semaine, puis les salles, entre deux filets ── */
.cn__since { margin: 0; font-family: var(--text); font-size: clamp(1.05rem, 1.2vw, 1.3rem); line-height: 1.35; }
.cn__week { margin: 6px 0 0; font-size: 1rem; line-height: 1.45; color: var(--ivory); }
.cn__halls { list-style: none; margin: 18px 0 0; padding: 0; }
.cn__halls li:first-child a { border-top: 1px solid var(--line-2); }
.cn__halls a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 13px 0 13px; border-bottom: 1px solid var(--line-2); text-decoration: none; }
.cn__city { font-family: var(--display); font-stretch: 62.5%; font-weight: 400; font-size: clamp(1.8rem, 2.3vw, 2.7rem); line-height: .92; text-transform: uppercase; letter-spacing: .01em; transition: color .3s; }
.cn__hall { grid-column: 1; margin-top: 6px; font-size: .84rem; line-height: 1.4; color: var(--ivory-2); }
.cn__halls i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; color: var(--ivory-3); transition: color .3s, transform .4s var(--ease); }
.cn__halls a:hover .cn__city { color: #fff; }
.cn__halls a:hover i { color: var(--ivory); transform: translate(2px, -2px); }
.cn__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 24px 0 0; }
.cn__btn { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 26px; background: var(--ivory); color: var(--night); text-decoration: none; font-size: .98rem; font-weight: 500; transition: background .4s var(--ease), color .4s var(--ease); }
.cn__btn i, .cn__more i { font-style: normal; transition: transform .4s var(--ease); }
.cn__btn:hover { background: var(--velvet); color: #fff; }
.cn__btn:hover i, .cn__more:hover i { transform: translateX(4px); }
.cn__more { padding: 6px 0; text-decoration: none; border-bottom: 1px solid currentColor; font-size: .95rem; font-weight: 500; transition: color .3s; }
.cn__stage .cn__more:hover { color: #fff; }

/* ═════════ Le plan fixe ═════════ */
.cn.is-pin .cn__stage { position: sticky; top: 0; height: 100vh; height: 100svh; }

/* écran large : la façade, en trois colonnes ; le tableau commence à la hauteur du titre du film */
.cn.is-pin.is-wide .cn__stage { min-height: 560px; }
.cn.is-pin.is-wide .cn__set {
  left: var(--gutter); right: var(--gutter); top: var(--gt, 100px); bottom: var(--fl, 13vh); max-width: 1720px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--bw, 460px) minmax(0, .78fr); grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "mast unit ." "film unit board" "about unit board"; column-gap: clamp(36px, 4.2vw, 84px);
  transform-origin: 0 0; will-change: transform;
}
/* (le titre a la largeur de sa plus longue ligne : l'arabe s'aligne sur elle) */
.cn.is-pin.is-wide .cn__set > .cn__mast { grid-area: mast; justify-self: start; }
.cn.is-pin.is-wide .cn__set > .cn__film { grid-area: film; padding-top: clamp(16px, 3vh, 34px); }
.cn.is-pin.is-wide .cn__set > .cn__about { grid-area: about; align-self: start; }
.cn.is-pin.is-wide .cn__set > .cn__unit { grid-area: unit; align-self: end; }
.cn.is-pin.is-wide .cn__set > .cn__board { grid-area: board; align-self: start; padding-top: clamp(16px, 3vh, 34px); }
.cn.is-wide .cn__city { font-size: clamp(2rem, 2.6vw, 3.4rem); }
.cn.is-pin.is-wide .cn__set > .cn__board.is-up { grid-row: 1 / -1; align-self: end; padding-top: 0; padding-bottom: clamp(14px, 2.4vh, 26px); }
.cn.is-wide .cn__board.is-tight .cn__city { font-size: clamp(1.7rem, 2.1vw, 2.5rem); }
.cn.is-wide .cn__board.is-tight .cn__halls a { padding: 10px 0; }
.cn.is-wide .cn__board.is-tight .cn__cta { margin-top: 18px; }

/* écran vertical : chaque bloc à sa place, calculée par le script pour chacun des plans */
.cn.is-pin.is-tall .cn__set > * { position: absolute; left: 0; top: 0; }
.cn.is-pin.is-tall .cn__unit { transform-origin: 0 0; will-change: transform; }
.cn.is-pin.is-tall .cn__halo { filter: blur(44px); }
.cn.is-pin.is-tall .cn__flare { filter: blur(40px); }
.cn.is-pin.is-tall .cn__ground { will-change: opacity; }
.cn.is-pin.is-tall .cn__film .cn__head { display: block; }
.cn.is-pin.is-tall .cn__film .cn__title { line-height: .88; }
.cn.is-pin.is-tall .cn__film .cn__tar { margin-top: 10px; font-size: 1.5rem; }
.cn.is-pin.is-tall .cn__since { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 1rem; }
.cn.is-pin.is-tall .cn__line { margin: 0; max-width: none; font-size: 1.28rem; line-height: 1.46; }
.cn.is-pin.is-tall .cn__credits { max-width: none; margin-top: 16px; font-size: .86rem; }
.cn.is-pin.is-tall .cn__week { margin: 0; }
.cn.is-pin.is-tall .cn__halls { margin-top: 10px; }
.cn.is-pin.is-tall .cn__halls a { padding: 10px 0 11px; }
.cn.is-pin.is-tall .cn__city { font-size: 1.85rem; }
.cn.is-pin.is-tall .cn__cta { margin-top: 18px; gap: 12px 20px; }
.cn.is-pin.is-tall .cn__board > .cn__cta:first-child { margin-top: 0; }
.cn.is-pin.is-tall .cn__btn { min-height: 52px; padding: 0 22px; font-size: .95rem; }

/* ═════════ Le film qui s'annonce, au jour : le même caisson, éteint, à la même place ═════════ */
.cn__next { --fg: var(--ink); --fg2: var(--ink-2); --day: 1; color: var(--fg); }
.cn__next .cn__mast { color: var(--fg); }
.cn__next .cn__ar { margin-top: .2em; font-size: .36em; color: var(--fg2); }
.cn__nunit { --lit: 0; --c2: 214 199 186; position: relative; }
.cn__nunit .cn__glass { aspect-ratio: var(--ar, 3 / 4); }
.cn__nunit .cn__poster { filter: brightness(calc(.32 + var(--day) * .42 + var(--lit) * .34)) saturate(calc(.5 + var(--lit) * .56)) contrast(1.02); }
.cn__nunit .cn__box { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .12), 0 34px 44px -30px rgba(10, 6, 5, .5); }
/* le sol du hall, au jour : un filet au pied du caisson, sur toute la largeur */
.cn__nunit::after { content: ''; position: absolute; left: -100vw; right: -100vw; bottom: 0; height: 1px; background: var(--fg); opacity: .2; pointer-events: none; }
.cn__next .cn__title { font-size: clamp(2.4rem, 3.4vw, 3.8rem); }
.cn__next .cn__tar { color: var(--fg2); }
.cn__next .cn__line { color: var(--fg); }
.cn__status { margin: 14px 0 0; font-size: .9rem; font-weight: 600; letter-spacing: .02em; color: var(--fg); }
.cn__nlinks { margin: 20px 0 0; }
.cn__next .cn__more:hover { color: var(--velvet); }

/* écran large : la façade au jour. « Prochainement » et le film dans la première colonne, comme le soir ; le caisson
   éteint debout sur le sol ; la troisième colonne, celle des séances, reste vide (la première est plus large) */
.cn.is-wide .cn__nin {
  display: grid; grid-template-columns: minmax(0, 1.3fr) var(--bw, 460px) minmax(0, .48fr); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "mast unit ." "copy unit ."; column-gap: clamp(36px, 4.2vw, 84px);
}
.cn.is-wide .cn__nin > .cn__mast { grid-area: mast; }
.cn.is-wide .cn__nunit { grid-area: unit; align-self: end; }
/* une image en largeur (pas une affiche) : le caisson prend aussi la troisième colonne */
.cn.is-wide .cn__nin:has(.cn__nunit.is-wide) { grid-template-areas: "mast unit unit" "copy unit unit"; }
.cn.is-wide .cn__ncopy { grid-area: copy; align-self: end; padding: 24px 0 clamp(14px, 2.4vh, 26px); }
.cn.is-wide .cn__next .cn__title { font-size: clamp(2.2rem, 3vw, 3.4rem); }
.cn.is-wide .cn__ncopy .cn__line { max-width: 34ch; }

/* écran vertical : « Prochainement », puis le caisson et le titre du film côte à côte, puis ma phrase */
.cn.is-tall .cn__nin {
  --nbw: min(48vw, calc((100svh - 470px) * .76 + 22px), 270px);
  display: grid; grid-template-columns: var(--nbw) minmax(0, 1fr); grid-template-areas: "mast mast" "unit head"; column-gap: clamp(14px, 4vw, 24px); align-items: end;
}
.cn.is-tall .cn__nin > .cn__mast { grid-area: mast; margin-bottom: clamp(18px, 3vh, 30px); }
.cn.is-tall .cn__nunit { grid-area: unit; }
.cn.is-tall .cn__ncopy { display: contents; }
.cn.is-tall .cn__ncopy > .cn__head { grid-area: head; display: block; padding-bottom: 4px; }
.cn.is-tall .cn__ncopy > :not(.cn__head) { grid-column: 1 / -1; }
.cn.is-tall .cn__next .cn__title { line-height: .88; }
.cn.is-tall .cn__next .cn__tar { margin-top: 8px; font-size: 1.45rem; }
.cn.is-tall .cn__next .cn__line { margin-top: clamp(16px, 2.6vh, 26px); font-size: 1.1rem; line-height: 1.5; }
.cn.is-tall .cn__next .cn__ar { font-size: .46em; }

/* dans le plan fixe, il arrive sur le blanc de la lumière */
.cn.is-pin .cn__next { position: absolute; z-index: 31; inset: 0; visibility: hidden; }
.cn.is-pin.is-wide .cn__nin { position: absolute; left: var(--gutter); right: var(--gutter); top: var(--gt, 100px); bottom: var(--fl, 13vh); max-width: 1720px; margin: 0 auto; }
/* (écran vertical : le bloc au milieu du plan, entre l'en-tête et le bas) */
.cn.is-pin.is-tall .cn__next { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header) + max(8px, 1.6vh)) var(--gutter) max(24px, 5vh); }

/* sans film en salle : le film qui s'annonce, seul ; la salle se rallume (le script mêle le noir et le blanc) */
.cn.is-single { --fg: var(--ink); --fg2: var(--ink-2); --day: 1; background: var(--paper); color: var(--fg); }
.cn.is-single .cn__next { --fg: inherit; --fg2: inherit; --day: inherit; }
.cn.is-flat .cn__next { background: var(--paper); }
.cn.is-single.is-wide .cn__next, .cn.is-flat.is-wide .cn__next { position: relative; height: 100vh; height: 100svh; min-height: 600px; }
.cn.is-single.is-wide .cn__nin, .cn.is-flat.is-wide .cn__nin { position: absolute; left: var(--gutter); right: var(--gutter); top: var(--gt, 100px); bottom: var(--fl, 13vh); max-width: 1720px; margin: 0 auto; }
.cn.is-single.is-tall .cn__next, .cn.is-flat.is-tall .cn__next { padding: calc(var(--header) + 5vh) var(--gutter) 12vh; }

/* ═════════ À plat (sans GSAP) : les blocs à la suite ═════════ */
.cn.is-flat .cn__floor, .cn.is-flat .cn__ground { display: none; }
.cn.is-flat .cn__stage { padding: calc(var(--header) + 30px) var(--gutter) 64px; }
.cn.is-flat .cn__set { position: relative; display: flex; flex-direction: column; gap: 28px; max-width: 620px; margin: 0 auto; }
.cn.is-flat .cn__unit { width: min(88%, 420px); margin: 0 auto; }

/* le caisson du film qui s'annonce, sans affiche officielle : une affiche en lettres, sur le noir de la salle */
.cn__teaser { position: absolute; inset: 0; container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw; padding: 10cqw 8cqw; background: radial-gradient(120% 80% at 50% 40%, #1d1210 0%, #0a0605 70%); color: var(--ivory); text-align: center; box-shadow: inset 0 0 0 1px rgba(239, 230, 216, .16), inset 0 0 0 5cqw #0a0605, inset 0 0 0 calc(5cqw + 1px) rgba(239, 230, 216, .1); }
.cn__t-ar { font-family: var(--ar); font-weight: 700; font-size: 17cqw; line-height: 1.2; color: var(--ivory-2); }
.cn__t-title { font-family: var(--display); font-stretch: 62.5%; font-weight: 400; font-size: 21cqw; line-height: .86; text-transform: uppercase; letter-spacing: .01em; }
.cn__t-by { margin-top: 3cqw; font-family: var(--sans); font-size: 3.6cqw; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--ivory-3); }