/* Film Aitzaga (64 s, généré en code) : salle de projection sombre, toutes les classes préfixées af-. */
.af {
  --af-nuit: #141210;      /* fond de projection */
  --af-suie: #1E1B18;      /* surfaces */
  --af-cuir: #F3ECE0;      /* texte (cuir clair de la marque) */
  --af-cendre: #9C9184;    /* texte secondaire */
  --af-flamme: #D9642B;    /* accent de marque */
  --af-braise: #F08A4B;    /* accent lumineux sur fond sombre */
  --af-givre: #CFE3EE;     /* hiver */
  --af-f-titre: "Alegreya", "Iowan Old Style", Georgia, serif;
  --af-f-mono: "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}

/* Scène */
.af-ecran { position: relative; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; background: #0B0A09; overflow: hidden; border-radius: 3px; container-type: inline-size; isolation: isolate; }
.af-ecran:fullscreen { border-radius: 0; width: 100vw; height: auto; max-height: 100vh; margin: auto; }
#af-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.af-calque { position: absolute; inset: 0; pointer-events: none; }
.af-cue { position: absolute; white-space: nowrap; visibility: hidden; will-change: transform, opacity; }
.af-cue.af-centre { left: 50% !important; }
.af-ln { display: inline-block; overflow: hidden; padding: .06em .08em .14em; margin: -.06em -.08em -.14em; vertical-align: top; }
.af-l { display: inline-block; will-change: transform; }
.af-t-xl { font-family: var(--af-f-titre); font-weight: 800; font-size: 14.5cqw; line-height: .9; letter-spacing: -.02em; }
.af-t-l { font-family: var(--af-f-titre); font-weight: 800; font-size: 9cqw; line-height: .95; letter-spacing: -.015em; }
.af-t-m { font-family: var(--af-f-titre); font-weight: 500; font-size: 4.4cqw; line-height: 1.05; }
.af-t-a { font-family: var(--af-f-titre); font-weight: 500; font-style: italic; font-size: 3.1cqw; line-height: 1.1; }
.af-t-s { font-family: var(--af-f-mono); font-size: 1.35cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--af-cendre); }
.af-t-s b { color: var(--af-cuir); font-weight: 400; font-variant-numeric: tabular-nums; }
.af-it { font-style: italic; }
.af-or { color: var(--af-braise); }
.af-gv { color: var(--af-givre); }
.af-mlab { position: absolute; font-family: var(--af-f-mono); font-size: 1.2cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--af-cuir); visibility: hidden; white-space: nowrap; }
.af-mlab::before { content: ""; display: inline-block; width: .55em; height: .55em; border: 1px solid currentColor; border-radius: 50%; margin-right: .6em; vertical-align: .05em; }
.af-mlab.af-camp { color: var(--af-braise); }
.af-glyphe-film { position: absolute; left: 10%; top: 17%; width: 33cqw; height: 33cqw; visibility: hidden; overflow: visible; }
.af-glyphe-film path { stroke: var(--af-braise); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.af-logo-film { position: absolute; left: 50%; top: 31%; width: 58cqw; height: auto; color: var(--af-cuir); transform: translateX(-50%); visibility: hidden; overflow: visible; }
.af-hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--af-f-mono); font-size: 1.05cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--af-cuir); opacity: .55; }
.af-hud > span { position: absolute; }
.af-hud .af-hg { left: 2.4%; top: 4%; }
.af-hud .af-hd { right: 2.4%; top: 4%; font-variant-numeric: tabular-nums; }
.af-hud .af-bg { left: 2.4%; bottom: 4%; }
.af-hud .af-bd { right: 2.4%; bottom: 4%; }
.af-hud .af-reticule { left: 50%; top: 50%; width: 1.4cqw; height: 1.4cqw; transform: translate(-50%, -50%); border: 1px solid var(--af-cuir); border-radius: 50%; opacity: 0; }
.af-balayage { position: absolute; top: -10%; height: 120%; width: 55%; left: 0; background: linear-gradient(90deg, transparent, var(--af-flamme) 18%, var(--af-braise) 50%, var(--af-flamme) 82%, transparent); transform: translateX(-200%) skewX(-16deg); mix-blend-mode: normal; pointer-events: none; }
.af-eclair { position: absolute; inset: 0; background: radial-gradient(circle at 50% 62%, #FFE7C9, var(--af-flamme) 40%, transparent 75%); opacity: 0; pointer-events: none; }
.af-grain { position: absolute; inset: -50%; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.af-voile { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--af-nuit) 35%, transparent); border: 0; padding: 0; cursor: pointer; color: var(--af-cuir); font: inherit; }
.af-voile[hidden] { display: none !important; }
.af-voile .af-rond { width: clamp(64px, 9cqw, 112px); height: clamp(64px, 9cqw, 112px); border-radius: 50%; background: var(--af-flamme); display: grid; place-items: center; box-shadow: 0 0 0 10px color-mix(in srgb, var(--af-flamme) 25%, transparent); transition: transform .25s; }
.af-voile:hover .af-rond, .af-voile:focus-visible .af-rond { transform: scale(1.07); }
.af-voile svg { width: 34%; margin-left: 8%; fill: #FFF6EC; }
.af-voile:focus-visible { outline: 2px solid var(--af-braise); outline-offset: -4px; }

/* Commandes */
.af-commandes { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.af-btn { font: inherit; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--af-cuir); background: var(--af-suie); border: 1px solid #36312B; border-radius: 999px; padding: .55rem 1rem; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; }
.af-btn:hover { border-color: var(--af-flamme); }
.af-btn:focus-visible, .af-piste input:focus-visible, .af-chap button:focus-visible { outline: 2px solid var(--af-braise); outline-offset: 2px; }
.af-btn.af-princ { background: var(--af-flamme); border-color: var(--af-flamme); color: #FFF6EC; }
.af-piste { flex: 1 1 260px; position: relative; min-width: 0; height: 28px; display: flex; align-items: center; }
.af-piste input { width: 100%; margin: 0; accent-color: var(--af-flamme); position: relative; z-index: 1; background: transparent; }
.af-ticks { position: absolute; left: 0; right: 0; top: 50%; height: 0; pointer-events: none; }
.af-ticks i { position: absolute; top: -9px; width: 1px; height: 18px; background: #4A433B; }
.af-temps { font-size: .82rem; color: var(--af-cendre); font-variant-numeric: tabular-nums; min-width: 6.5em; text-align: right; }
.af-chap { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.af-chap button { font: inherit; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--af-cendre); background: transparent; border: 1px solid #2E2A25; border-radius: 4px; padding: .4rem .6rem; cursor: pointer; }
.af-chap button span { color: var(--af-braise); margin-right: .45em; }
.af-chap button.af-actif { color: var(--af-cuir); border-color: var(--af-flamme); }
.af-note { font-size: .74rem; color: var(--af-cendre); letter-spacing: .04em; line-height: 1.6; max-width: 70ch; margin: 0; }

.af { background: var(--af-nuit); color: var(--af-cuir); font-family: var(--af-f-mono); border-radius: 6px; padding-block: 14px 16px; padding-inline: clamp(10px, 2vw, 18px); display: flex; flex-direction: column; gap: 12px; margin-top: 1.5rem; color-scheme: dark; }
.af * { box-sizing: border-box; }
.af p { margin: 0; }
.af-credit { font-size: 12px; color: var(--ink-mute, #9c9182); margin: 0; }
.film { padding-top: 72px; }
.film-tete { display: flex; flex-direction: column; gap: 8px; max-width: 62ch; }
.film-tete h2 { font: 600 clamp(26px, 3vw, 34px)/1.2 var(--serif); margin: 0; }
.film-tete p { color: var(--ink-soft); margin: 0; }
@media (max-width: 860px) { .film { padding-top: 48px; } }