/* =========================================================================
   Showreel généré en code (voir assets/js/showreel.js)
   La scène est composée en 1600×900 (ou 900×1600 en format story) puis mise à l'échelle.
   ========================================================================= */
.sr { position: relative; }
.sr-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-l); background: #07080A; box-shadow: 0 0 0 1px var(--line), 0 40px 120px -40px rgba(0,0,0,.8); isolation: isolate; container-type: inline-size; }
/* Petit écran : on retire les repères (illisibles en tout petit) */
@container (max-width: 560px) { .sr-hud { display: none; } .sr-bars i { height: 14px; } }
.sr-story .sr-frame { aspect-ratio: 9 / 16; width: min(100%, calc(86vh * 9 / 16)); margin-inline: auto; }
.sr-stage { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform: scale(var(--k, .5)); transform-origin: 0 0; overflow: hidden; color: var(--fg); font-family: var(--sans); }
.sr-story .sr-stage { width: 900px; height: 1600px; }
.sr-stage p { margin: 0; }

/* Image d'attente (avant lecture et sans JavaScript) */
.sr-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: saturate(.8); }
.sr-poster-title { position: absolute; left: 110px; bottom: 120px; display: grid; gap: 14px; }
.sr-poster-title span { font: 600 22px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.sr-poster-title strong { font: 400 190px/.9 var(--serif); letter-spacing: -.02em; }
.sr-poster-title em { font-style: italic; }
.sr-story .sr-poster-title { left: 80px; bottom: 260px; }
.sr-story .sr-poster-title strong { font-size: 170px; }
.sr.is-built .sr-poster, .sr.is-built .sr-poster-title { display: none; }

/* Plans */
.sr-scene, .sr-scene > div, .sr-shot { position: absolute; inset: 0; }
.sr-glow { background: radial-gradient(60% 70% at 72% 30%, rgba(232,176,74,.22), transparent 70%), radial-gradient(50% 60% at 15% 90%, rgba(232,176,74,.08), transparent 70%); }
.sr-scene > .sr-iris { inset: auto; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; background: radial-gradient(circle, #FFF6E0 0, #F6C76A 14%, #C47A1E 38%, rgba(58,34,8,.55) 62%, transparent 72%); mix-blend-mode: screen; will-change: transform; }
.sr-story .sr-scene > .sr-iris { width: 1100px; height: 1100px; margin: -550px 0 0 -550px; }
.sr-ch { display: inline-block; will-change: transform; }
.sr-w { display: inline-block; white-space: nowrap; }

.sr-s1 { display: grid; align-content: center; padding-inline: 110px; gap: 26px; }
.sr-kicker { font: 600 24px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.sr-name { display: grid; font: 400 260px/.86 var(--serif); letter-spacing: -.025em; }
.sr-name > span { overflow: hidden; padding-bottom: .06em; }
.sr-l2 { font-style: italic; padding-left: 1.1em; }
.sr-story .sr-s1 { padding-inline: 70px; align-content: end; padding-bottom: 300px; }
.sr-story .sr-name { font-size: 210px; }
.sr-story .sr-l2 { padding-left: .4em; }
.sr-story .sr-kicker { font-size: 26px; line-height: 1.4; }

.sr-s2 { display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; }
.sr-num { display: flex; align-items: baseline; gap: 24px; font: 400 420px/.8 var(--serif); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sr-num-u { font: italic 400 120px/1 var(--serif); color: var(--accent); letter-spacing: 0; }
.sr-num-cap { font: 500 38px/1.3 var(--sans); color: var(--fg-2); }
.sr-story .sr-num { font-size: 330px; flex-direction: column; align-items: center; gap: 0; }

.sr-s3 { display: grid; align-content: center; padding-inline: 110px; gap: 6px; }
.sr-svc-a { font: 600 30px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 18px !important; }
.sr-slot { height: 190px; overflow: hidden; }
.sr-slot-in { display: grid; }
.sr-slot-in span { display: block; height: 190px; font: italic 400 170px/190px var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.sr-slot-in span:nth-child(odd) { color: var(--accent); }
.sr-story .sr-s3 { padding-inline: 70px; }
.sr-story .sr-slot, .sr-story .sr-slot-in span { height: 300px; }
.sr-story .sr-slot-in span { font-size: 132px; line-height: 150px; white-space: normal; display: flex; align-items: center; }

.sr-shot { margin: 0; overflow: hidden; will-change: transform; }
.sr-shot-m { position: absolute; inset: 0; overflow: hidden; }
.sr-shot-m img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.sr-shot-m::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,8,10,.15) 0, transparent 30%, transparent 50%, rgba(7,8,10,.85) 100%); }
.sr-lower { position: absolute; left: 110px; right: 110px; bottom: 90px; display: grid; gap: 12px; z-index: 1; }
.sr-lower > span { display: block; overflow: hidden; }
.sr-idx { display: inline-block !important; font: 600 22px/1 var(--sans); letter-spacing: .2em; color: var(--accent); }
.sr-idx i { font-style: normal; opacity: .5; margin-inline: .35em; }
.sr-ttl > span { display: block; font: 400 110px/1 var(--serif); letter-spacing: -.02em; padding-bottom: .08em; }
.sr-meta > span { display: block; font: 500 26px/1.3 var(--sans); color: rgba(236,233,227,.75); letter-spacing: .04em; }
.sr-story .sr-lower { left: 70px; right: 70px; bottom: 200px; }
.sr-story .sr-ttl > span { font-size: 96px; }

.sr-scene > .sr-wipe { background: var(--accent); z-index: 20; will-change: transform; }

.sr-s5 { display: grid; align-content: center; padding-inline: 110px; gap: 30px; z-index: 30; }
.sr-cred-k { font: 600 24px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.sr-cred { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sr-cred li { font: 400 104px/1.02 var(--serif); letter-spacing: -.015em; }
.sr-cred li:nth-child(even) { font-style: italic; padding-left: .8em; color: var(--fg-2); }
.sr-story .sr-s5 { padding-inline: 70px; align-content: start; padding-top: 250px; }
.sr-story .sr-cred li { font-size: 96px; }

.sr-s6 { display: grid; place-content: center; justify-items: center; text-align: center; gap: 40px; z-index: 31; background: var(--accent); color: var(--accent-ink); }
.sr-end { display: grid; font: 400 210px/.9 var(--serif); letter-spacing: -.025em; }
.sr-end > * { overflow: hidden; padding-bottom: .06em; }
.sr-e2 { font-style: italic; }
.sr-url { font: 600 26px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; padding: 16px 28px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--accent-ink); }
.sr-story .sr-end { font-size: 160px; }
.sr-scene > .sr-black { background: #000; z-index: 50; }

/* Habillage : bandes cinéma, repères, grain */
.sr-hud { position: absolute; inset: 0; z-index: 60; pointer-events: none; font: 600 18px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(236,233,227,.7); }
.sr-hud > span { position: absolute; }
.sr-slate { left: 46px; top: 44px; display: flex; align-items: center; gap: 12px; }
.sr-slate i { width: 10px; height: 10px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 12px #E5484D; }
.sr-scn { right: 46px; top: 44px; }
.sr-tc { right: 46px; bottom: 40px; font-variant-numeric: tabular-nums; color: var(--accent); }
.sr-bars { position: absolute; inset: 0; z-index: 55; pointer-events: none; }
.sr-bars i { position: absolute; left: 0; right: 0; height: 26px; background: #000; transform-origin: top; }
.sr-bars i:last-child { bottom: 0; transform-origin: bottom; }
.sr-grain { position: absolute; inset: -50%; z-index: 58; pointer-events: none; opacity: .09; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: sr-grain .5s steps(4) infinite; }
@keyframes sr-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-6%, 4%); } 50% { transform: translate(5%, -7%); } 75% { transform: translate(-3%, -4%); } }
.sr:not(.is-playing) .sr-grain { animation-play-state: paused; }

/* Commandes */
.sr-play { position: absolute; left: 50%; top: 50%; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 14px 22px 14px 16px; translate: -50% -50%; border: 0; border-radius: 999px; background: rgba(15,16,19,.72); color: var(--fg); font: 600 .95rem/1 var(--sans); letter-spacing: .04em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter: blur(8px); cursor: pointer; transition: opacity .35s var(--ease), background .25s, translate .5s var(--ease); }
.sr-play:hover { background: var(--accent); color: var(--accent-ink); }
.sr-play-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); position: relative; flex: none; }
.sr-play-icon::after { content: ""; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--accent-ink); }
.sr-play:hover .sr-play-icon { background: var(--accent-ink); }
.sr-play:hover .sr-play-icon::after { border-left-color: var(--accent); }
.sr.is-playing .sr-play-icon::after { left: 11px; top: 11px; width: 4px; height: 12px; border: 0; background: var(--accent-ink); box-shadow: 8px 0 0 var(--accent-ink); }
.sr.is-playing .sr-play:hover .sr-play-icon::after { background: var(--accent); box-shadow: 8px 0 0 var(--accent); }
/* En lecture, le bouton se range dans le coin et ne réapparaît qu'au survol */
.sr.is-playing .sr-play { left: auto; top: auto; right: 16px; bottom: 22px; translate: 0 0; opacity: 0; padding: 6px; }
.sr.is-playing .sr-play-txt { display: none; }
.sr.is-playing .sr-frame:hover .sr-play, .sr.is-playing .sr-play:focus-visible { opacity: 1; }
.sr-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; z-index: 69; cursor: pointer; }
.sr-bar i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.sr-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); }
@media (hover: none) { .sr.is-playing .sr-play { opacity: .8; } }

/* Section d'accueil */
.showreel-sec { padding-block: clamp(40px, 7vw, 100px); }
.showreel-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(20px, 3vw, 36px); }
.showreel-head p { margin: 0; max-width: 46ch; }

/* Page /showreel */
.sr-page { padding-block: clamp(110px, 12vw, 160px) clamp(50px, 8vw, 100px); }
.sr-page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; margin-bottom: 28px; }
.sr-page-head h1 { margin: 0; font: 400 clamp(3rem, 7vw, 6rem)/.95 var(--serif); letter-spacing: -.02em; }
.sr-page-head h1 em { color: var(--accent); }
.sr-page-head p { margin: 0; max-width: 52ch; color: var(--fg-2); }
.sr-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Mode enregistrement : plein écran, sans interface */
.sr-rec-body { margin: 0; background: #000; overflow: hidden; }
.sr-rec .sr-frame { position: fixed; inset: 0; width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: #000; }