/* ═══════════════════════════════════════════════════════════════
   Accueil, scène 4 : mes derniers films, la séance (js/scenes/derniers.js). Préfixe .dn__
   Dans le noir de la salle, « Derniers films » et l'éventail des trois affiches ; puis le présentoir qui tourne, chaque
   film à sa couleur, son titre en très grand et son histoire ; enfin le mur de toutes mes affiches, qui s'allume.
   ═══════════════════════════════════════════════════════════════ */
.dn { position: relative; background: var(--night); color: var(--ivory); }

/* les grands titres : chaque ligne monte derrière son cache */
.dn__tt { display: block; }
.dn__tl { display: block; clip-path: inset(-.16em -.3em 0 -.3em); }
.dn__tl > span { display: inline-block; white-space: nowrap; will-change: transform; }
/* (dans le plan fixe, les lignes d'un titre bougent ensemble, dans la fenêtre de leur titre : le compteur) */
.dn.is-stage .dn__story .dn__tl, .dn.is-stage .dn__mq .dn__tl, .dn.is-stage .dn__end .dn__tl { will-change: transform; }

/* ═════════ Le plan fixe ═════════ */
.dn.is-stage .dn__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--night); }
.dn__room, .dn__bloom, .dn__glow, .dn__halo, .dn__floor, .dn__disc, .dn__veil { position: absolute; pointer-events: none; }
.dn__room { inset: 0; z-index: 0; background: var(--night); }
/* au changement, la lumière de la nouvelle affiche déborde dans la salle, sans bord, et s'éteint (js : son dégradé) */
.dn__bloom { z-index: 1; visibility: hidden; opacity: 0; will-change: transform, opacity; }
/* la lumière de l'ouverture, derrière l'éventail */
.dn__glow { z-index: 2; left: 10%; right: 10%; bottom: -30%; height: 90%; background: radial-gradient(closest-side, rgba(255, 226, 190, .11), rgba(255, 226, 190, .04) 55%, rgba(255, 226, 190, 0)); }
.dn__halo { z-index: 2; opacity: 0; }
.dn__floor { z-index: 5; opacity: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
/* le plateau du présentoir : une ellipse sombre, cerclée d'un filet de lumière */
.dn__disc { z-index: 4; opacity: 0; border-radius: 50%; border: 1px solid rgba(239, 230, 216, .1); background: radial-gradient(closest-side, rgba(0, 0, 0, .34), rgba(0, 0, 0, .16) 70%, rgba(0, 0, 0, .05)); box-shadow: inset 0 1px 0 rgba(239, 230, 216, .05); }

/* le titre de l'ouverture */
.dn__mbox { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.dn__mast { position: absolute; z-index: 5; 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; color: var(--ivory); }
.dn__mar { display: block; margin-top: .08em; font-family: var(--ar); font-weight: 700; font-size: .3em; line-height: 1.3; text-transform: none; letter-spacing: 0; text-align: right; color: var(--ivory-2); }
.dn.is-portrait .dn__mar { font-size: .34em; }

/* au téléphone, le titre de chaque film en haut, derrière le présentoir */
.dn__mq { position: absolute; left: 0; top: 0; margin: 0; visibility: hidden; text-align: center; font-family: var(--display); font-stretch: 62.5%; font-weight: 400; line-height: .84; text-transform: uppercase; letter-spacing: .005em; white-space: nowrap; color: var(--accent); }

/* le présentoir : trois panneaux écartés autour d'un axe, une affiche sur chacun, sur un sol qui les reflète */
.dn__col { position: absolute; inset: 0; z-index: 6; pointer-events: none; --rf: 0; }
.dn__face {
  display: block; position: absolute; left: 0; top: 0; margin: 0; overflow: hidden; background: #1d1210; transform-origin: 50% 50%; text-decoration: none;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform;
  box-shadow: 0 60px 90px -50px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05);
  -webkit-box-reflect: below 3px linear-gradient(transparent 66%, rgba(255, 255, 255, var(--rf)));
}
.dn__face img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease), transform .9s var(--ease); }
.dn__face img.is-in { opacity: 1; }
.dn__face:hover img { transform: scale(1.035); }
.dn__face:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }
.dn__shade { position: absolute; inset: 0; background: var(--night); opacity: 0; }
.dn__glare { position: absolute; top: -12%; bottom: -12%; left: 0; width: 60%; opacity: 0; mix-blend-mode: screen; background: linear-gradient(90deg, rgba(255, 246, 230, 0), rgba(255, 246, 230, .16) 30%, rgba(255, 250, 240, .62) 50%, rgba(255, 246, 230, .16) 70%, rgba(255, 246, 230, 0)); }

/* l'histoire d'un film */
.dn__story { position: absolute; z-index: 7; left: 0; top: 0; visibility: hidden; color: var(--ivory); }
.dn__head { display: inline-block; max-width: 100%; }
.dn__title { margin: 0; font-family: var(--display); font-stretch: 62.5%; font-weight: 400; line-height: .84; text-transform: uppercase; letter-spacing: .005em; color: var(--accent); }
.dn__ar { margin: .14em 0 0; font-family: var(--ar); font-weight: 700; line-height: 1.25; text-align: right; color: var(--ivory-2); }
.dn__when { margin: 16px 0 0; font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.dn__line { margin: 12px 0 0; max-width: 40ch; font-family: var(--text); font-size: clamp(1.1rem, 1.3vw, 1.3rem); line-height: 1.5; color: var(--ivory); }
.dn__line em { font-style: italic; }
.dn__dl { margin: 18px 0 0; max-width: 46ch; border-top: 1px solid rgba(239, 230, 216, .22); }
.dn__dl > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(239, 230, 216, .12); }
.dn__dl dt { font-family: var(--sans); font-size: .8rem; color: var(--ivory-2); padding-top: 3px; }
.dn__dl dd { margin: 0; font-family: var(--text); font-size: 1rem; line-height: 1.45; color: var(--ivory); }
.dn__num { display: flex; align-items: flex-start; gap: 18px; margin: 20px 0 0; max-width: 46ch; }
.dn__num b { flex: none; font-family: var(--display); font-stretch: 62.5%; font-weight: 400; font-size: clamp(2.8rem, 4.4vw, 4.4rem); line-height: .82; color: var(--accent); white-space: nowrap; font-variant-numeric: lining-nums; }
.dn__num p, .dn__prize p { margin: 0; font-family: var(--text); font-size: 1rem; line-height: 1.45; color: var(--ivory); }
.dn__prize { display: flex; align-items: flex-start; gap: 14px; margin: 16px 0 0; max-width: 46ch; }
.dn__tag { flex: none; margin-top: 2px; padding: 4px 8px 3px; border: 1px solid #c9b27c; color: #d8c48f; font-family: var(--sans); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.dn__src { display: block; margin-top: 3px; font-family: var(--sans); font-size: .76rem; line-height: 1.5; color: rgba(239, 230, 216, .62); }
.dn__src a { color: inherit; text-decoration: underline; text-decoration-color: rgba(239, 230, 216, .3); text-underline-offset: 2px; transition: color .3s; }
.dn__src a:hover { color: var(--ivory); }
.dn__links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 22px 0 0; }
.dn__links a { padding: 6px 0; text-decoration: none; border-bottom: 1px solid currentColor; font-size: .95rem; font-weight: 500; color: var(--ivory); transition: color .3s; }
.dn__links a:hover { color: var(--accent); }
.dn__links i { font-style: normal; }
.dn .is-off { display: none !important; }

/* le numéro du film */
.dn__meter { position: absolute; z-index: 7; left: var(--gutter); bottom: 5vh; margin: 0; display: flex; align-items: baseline; gap: 10px; font-family: var(--sans); font-size: .78rem; letter-spacing: .2em; color: var(--ivory-2); opacity: 0; visibility: hidden; }
.dn__n { font-family: var(--display); font-stretch: 62.5%; font-weight: 400; font-size: 3.4rem; line-height: 1; letter-spacing: .01em; color: var(--ivory); }

/* le mur de toutes mes affiches */
.dn__wall { position: absolute; inset: 0; z-index: 3; visibility: hidden; }
.dn__row { position: absolute; left: 0; display: flex; will-change: transform; }
/* (une affiche éteinte se fond dans la nuit ; js : sa lumière) */
.dn__tile { display: block; flex: none; overflow: hidden; background: transparent; }
.dn__tile img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: transform .9s var(--ease); }
.dn__tile:hover img, .dn__tile:focus-visible img { opacity: 1 !important; transform: scale(1.04); transition: opacity .4s var(--ease), transform .9s var(--ease); }
.dn__veil { z-index: 4; opacity: 0; }
.dn__veil--top { left: 0; right: 0; top: 0; height: calc(var(--header) + 70px); background: linear-gradient(180deg, rgba(10, 6, 5, .82), rgba(10, 6, 5, 0)); }
.dn__veil--bot { left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(0deg, #0a0605 4%, rgba(10, 6, 5, .7) 45%, rgba(10, 6, 5, 0)); }
.dn__veil--text { background: radial-gradient(closest-side, rgba(10, 6, 5, .9), rgba(10, 6, 5, .78) 50%, rgba(10, 6, 5, 0)); }
.dn.is-portrait .dn__veil--text { background: linear-gradient(0deg, #0a0605 30%, rgba(10, 6, 5, .86) 62%, rgba(10, 6, 5, 0)); }

/* toute la filmographie */
.dn__end { position: absolute; z-index: 8; left: 0; top: 0; visibility: hidden; }
.dn__endT { margin: 0; font-family: var(--display); font-stretch: 62.5%; font-weight: 400; line-height: .84; text-transform: uppercase; letter-spacing: .005em; color: var(--ivory); }
.dn__endAr { margin: .12em 0 0; font-family: var(--ar); font-weight: 700; line-height: 1.3; text-align: right; color: var(--ivory-2); }
.dn__endL { margin: 14px 0 0; max-width: 40ch; font-family: var(--text); font-size: clamp(1.1rem, 1.3vw, 1.3rem); line-height: 1.5; color: var(--ivory); }
.dn__cta { margin: 26px 0 0; }
.dn__btn { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 28px; background: var(--ivory); color: var(--night); text-decoration: none; font-size: .98rem; font-weight: 500; transition: background .4s var(--ease), color .4s var(--ease); }
.dn__btn i { font-style: normal; transition: transform .4s var(--ease); }
.dn__btn:hover { background: var(--velvet); color: #fff; }
.dn__btn:hover i { transform: translateX(4px); }

/* au téléphone : le titre en haut, le présentoir devant, l'histoire dessous (le nom arabe sur la ligne de la date) */
.dn.is-portrait .dn__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dn.is-portrait .dn__head { display: block; float: right; margin: 0 0 0 14px; }
.dn.is-portrait .dn__ar { margin: 0; line-height: 1.15; color: var(--ivory); }
.dn.is-portrait .dn__when { margin-top: 0; padding-top: 11px; font-size: .68rem; letter-spacing: .16em; }
.dn.is-portrait .dn__story > :not(.dn__head):not(.dn__when) { clear: both; }
.dn.is-portrait .dn__line { margin-top: 8px; font-size: 1.04rem; line-height: 1.45; }
.dn.is-portrait .dn__dl { margin-top: 12px; }
.dn.is-portrait .dn__dl > div { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 6px 0; }
.dn.is-portrait .dn__dl dt { font-size: .78rem; }
.dn.is-portrait .dn__dl dd { font-size: .94rem; line-height: 1.38; }
.dn.is-portrait .dn__num { margin-top: 12px; gap: 12px; }
.dn.is-portrait .dn__num b { font-size: 2.7rem; }
.dn.is-portrait .dn__num p, .dn.is-portrait .dn__prize p { font-size: .94rem; line-height: 1.38; }
.dn.is-portrait .dn__prize { margin-top: 10px; gap: 10px; }
.dn.is-portrait .dn__links { margin-top: 12px; }
.dn.is-portrait .dn__links a { padding: 3px 0; font-size: .9rem; }
.dn.is-portrait .dn__meter { left: auto; right: var(--gutter); bottom: auto; top: 0; flex-direction: column; align-items: flex-end; gap: 0; }
.dn.is-portrait .dn__n { font-size: 2.6rem; }
.dn.is-portrait .dn__endL { font-size: 1.04rem; }
.dn.is-portrait .dn__cta { margin-top: 18px; }
.dn.is-portrait .dn__btn { min-height: 50px; padding: 0 22px; font-size: .94rem; }

/* ═════════ Sans animation : les films l'un sous l'autre ═════════ */
.dn.is-static .dn__open { padding: clamp(90px, 14vh, 140px) var(--gutter) 40px; }
.dn.is-static .dn__mast { position: static; font-size: clamp(4rem, 14vw, 13rem); }
.dn.is-static .dn__panel { padding: 60px var(--gutter); }
.dn.is-static .dn__pimg { margin: 0 auto 30px; width: min(78%, 420px); aspect-ratio: 2 / 3; overflow: hidden; }
.dn.is-static .dn__pimg img { width: 100%; height: 100%; object-fit: cover; }
.dn.is-static .dn__story { position: static; visibility: visible; max-width: 720px; margin: 0 auto; }
.dn.is-static .dn__title { font-size: clamp(3rem, 9vw, 7rem); }
.dn.is-static .dn__ar { font-size: 2rem; }
.dn.is-static .dn__endWrap { padding: 90px var(--gutter) 110px; }
.dn.is-static .dn__end { position: static; visibility: visible; max-width: 900px; margin: 0 auto; }
.dn.is-static .dn__endT { font-size: clamp(3rem, 9vw, 8rem); }
.dn.is-static .dn__endAr { font-size: 2rem; }