/* Styles propres à la page « video » (repris de la maquette). */
/* ---- Vidéo & motion design : la page est une table de montage ------------ */
.v-film { --len: 4.4; }
.v-film .pin-stage { background: #000; color: #fff; }
.v-frame { position: absolute; inset: calc(var(--bar-h) + 12px) max(12px, env(safe-area-inset-right, 0px)) 104px max(12px, env(safe-area-inset-left, 0px)); }
@media (min-width: 900px) { .v-frame { inset: calc(var(--bar-h) + 22px) 48px 124px 48px; } }
.v-frame .corner { position: absolute; width: 24px; height: 24px; border: 0 solid var(--jaune); z-index: 8; pointer-events: none; }
.v-frame .c1 { left: 0; top: 0; border-left-width: 3px; border-top-width: 3px; }
.v-frame .c2 { right: 0; top: 0; border-right-width: 3px; border-top-width: 3px; }
.v-frame .c3 { left: 0; bottom: 0; border-left-width: 3px; border-bottom-width: 3px; }
.v-frame .c4 { right: 0; bottom: 0; border-right-width: 3px; border-bottom-width: 3px; }
.v-hud { position: absolute; z-index: 8; left: 14px; right: 14px; top: 12px; display: flex; justify-content: space-between; gap: 12px; font: 500 .75rem/1.2 var(--f-mono); color: #fff; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
@media (min-width: 900px) { .v-hud { left: 22px; right: 22px; top: 18px; font-size: .875rem; } }
.v-hud .rec { display: inline-flex; align-items: center; gap: 8px; }
.v-hud .rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--rouge); animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.v-screen { position: absolute; inset: 0; overflow: hidden; background: #0B0D0E; }
.plan { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.plan .art { position: absolute; inset: 0; }
.plan .pp { position: absolute; z-index: 5; left: 16px; right: 16px; top: 40px; font: 750 clamp(2.6rem, 12vw, 9rem)/.86 var(--f-display); letter-spacing: -.038em; color: #fff; }
@media (min-width: 900px) { .plan .pp { left: 36px; top: 56px; max-width: 48%; font-size: clamp(3rem, 6.4vw, 6.5rem); } }
.plan .sub { position: absolute; z-index: 9; left: 50%; bottom: 5%; translate: -50% 0; width: max-content; max-width: calc(100% - 32px); text-align: center; font: 600 clamp(1rem, 2.2vw, 1.6rem)/1.3 var(--f-text); color: #fff; background: rgba(0,0,0,.78); padding: 7px 12px; }
.plan--0 { visibility: visible; display: grid; align-content: center; padding: 48px 18px 22px; }
@media (min-width: 900px) { .plan--0 { padding: 64px 40px 36px; } }
.plan--0 h1 { display: grid; gap: 16px; position: relative; z-index: 2; }
.plan--0 .h1-seo { color: #9AA5AD; }
.plan--0 .giant { color: var(--jaune); font-size: clamp(3rem, 12.5vw, 10.5rem); }
.plan--0 .play { margin-top: 22px; display: inline-flex; gap: 10px; align-items: center; font: 500 .875rem/1 var(--f-mono); color: #9AA5AD; }
.plan--0 .play svg { width: 18px; height: 20px; }
/* Plan 1 : le fil d'actualité qui défile, puis s'arrête */
.phone { position: absolute; left: 50%; top: 50%; height: min(56%, 520px); width: auto; max-width: 70%; aspect-ratio: 9 / 18; translate: -50% -50%; border: 3px solid #fff; border-radius: 34px; overflow: hidden; background: #0B0D0E; }
.feed { position: absolute; left: 8%; right: 8%; top: 4%; display: grid; gap: 10px; }
.feed .card { height: 74px; background: #1E2428; border-radius: 10px; }
.feed .card:nth-child(3n) { height: 110px; }
.feed .card.stop { height: 150px; background: #121A21; display: grid; place-items: center; }
.g-slot { position: relative; width: 52%; aspect-ratio: 63 / 68; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='106 23 63 68'><path d='M140 26H153V44H140A13 13 0 0 0 140 70H148V50H166V88H140A31 31 0 0 1 140 26Z'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='106 23 63 68'><path d='M140 26H153V44H140A13 13 0 0 0 140 70H148V50H166V88H140A31 31 0 0 1 140 26Z'/></svg>") center / contain no-repeat; overflow: hidden; }
.v-slot svg.footage, .g-slot svg.footage { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-slot video:not([src]), .g-slot video:not([src]) { display: none; }
.v-slot video, .g-slot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-slot { position: absolute; inset: 0; }
.slot-tag { position: absolute; z-index: 9; right: 12px; bottom: 12px; max-width: calc(100% - 24px); font: 500 .6875rem/1.25 var(--f-mono); color: #9AA5AD; background: rgba(0,0,0,.6); padding: 4px 6px; text-align: right; }
.ft-sky { animation: ftSky 6s ease-in-out infinite alternate; } @keyframes ftSky { to { transform: translateY(-8%); } }
.ft-hills { animation: ftHills 7s linear infinite; } @keyframes ftHills { to { transform: translateX(-50%); } }
.ft-walk { animation: ftWalk 3.2s ease-in-out infinite alternate; } @keyframes ftWalk { from { transform: translateX(-12px); } to { transform: translateX(12px); } }
.ft-rain line { animation: ftRain 1.1s linear infinite; } @keyframes ftRain { from { transform: translateY(-120px); } to { transform: translateY(520px); } }
.ft-flick { animation: ftFlick 2.4s steps(1) infinite; } @keyframes ftFlick { 0%, 40%, 44%, 100% { opacity: 1; } 42% { opacity: .72; } }
@media (prefers-reduced-motion: reduce) { .footage, .footage * { animation: none !important; } }
/* Plan 2 : quelqu'un, quelque part */
.city { position: absolute; left: 0; right: 0; bottom: 0; height: 72%; }
.city svg { width: 100%; height: 100%; }
.city .line { fill: none; stroke: #fff; stroke-width: 2.2; }
.city .arc { fill: none; stroke: #9AA5AD; stroke-width: 2.2; }
.city .sun { fill: var(--jaune); }
.walker { position: absolute; bottom: 9%; left: 6%; width: 18px; height: 63px; }
.walker::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px; background: var(--vert-clair); }
.walker::after { content: ""; position: absolute; left: 0; top: 26px; width: 18px; height: 37px; background: var(--vert-clair); }
/* Plan 3 : le problème */
.clock { position: absolute; left: 50%; top: 56%; width: min(66%, 52vh); aspect-ratio: 1; translate: -50% -50%; border: 4px solid #fff; border-radius: 50%; }
.clock i { position: absolute; left: 50%; top: 50%; background: #fff; transform-origin: 50% 100%; }
.clock .h { width: 8px; height: 30%; margin-left: -4px; margin-top: -30%; }
.clock .m { width: 5px; height: 42%; margin-left: -2.5px; margin-top: -42%; background: var(--rouge); }
.clock .t { position: absolute; inset: 6%; border-radius: 50%; background: repeating-conic-gradient(#fff 0 1deg, transparent 1deg 30deg); -webkit-mask: radial-gradient(circle, transparent 82%, #000 83%); mask: radial-gradient(circle, transparent 82%, #000 83%); }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 4; }
.letterbox { position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 6; }
.letterbox.t { box-shadow: 0 1px 0 #3B4247; } .letterbox.b { box-shadow: 0 -1px 0 #3B4247; }
.letterbox.t { top: 0; } .letterbox.b { bottom: 0; }
.plan--3 .pp { top: calc(12% + 20px); }
.v-frame.is-light .v-hud { color: var(--encre); text-shadow: none; }
.v-frame.is-light .corner { border-color: var(--encre); }
/* Plan 4 : la sortie */
.plan--4 { background: var(--jaune); }
.plan--4 .pp { color: var(--encre); }
.plan--4 .check { position: absolute; right: 8%; bottom: 22%; width: 46%; max-width: 360px; }
.plan--4 .check path { fill: none; stroke: var(--encre); stroke-width: 18; stroke-linecap: butt; }
.plan--4 .sub { background: var(--encre); }
@media (min-width: 900px) { .phone { left: 74%; } .clock { left: 72%; } .plan--3 .pp { top: calc(12% + 24px); } }
.iris { position: absolute; left: 50%; top: 50%; width: 26%; translate: -50% -50%; z-index: 7; visibility: hidden; }
/* Plan 5 : écran de fin */
.plan--5 { display: grid; align-content: center; gap: 14px; padding: 64px 16px 20px; }
@media (min-width: 900px) { .plan--5 { padding: 56px 40px 30px; } }
.plan--5 .pp { position: static; }
.ends { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 900px) { .ends { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.ends a { position: relative; aspect-ratio: 16 / 10; display: grid; align-content: end; padding: 10px; text-decoration: none; color: var(--encre); font: 600 .875rem/1.2 var(--f-text); overflow: hidden; }
.ends a svg { position: absolute; right: 8px; top: 8px; width: 28%; max-height: 60%; }
.ends a small { font: 500 .6875rem/1 var(--f-mono); opacity: .8; }
.plan--5 .btn { width: 100%; }
/* Banc de montage */
.v-timeline { position: absolute; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: 16px; height: 74px; display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 6px 8px; font: 500 .625rem/1 var(--f-mono); color: #9AA5AD; }
@media (min-width: 900px) { .v-timeline { left: 48px; right: 48px; bottom: 26px; height: 88px; font-size: .6875rem; } }
.v-timeline .trk { position: relative; display: flex; gap: 2px; min-width: 0; }
.v-timeline .clip { flex: var(--f) 1 0; min-width: 0; background: #2A2F33; color: #D6DCE0; padding: 0 4px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: clip; font-size: .6875rem; letter-spacing: -.02em; }
@media (min-width: 900px) { .v-timeline .clip { font-size: .6875rem; padding: 0 8px; } }
.v-timeline .clip.on { background: var(--jaune); color: var(--encre); }
.v-timeline .ttl { flex: var(--f) 1 0; min-width: 0; border: 1px dashed #3B4247; }
.v-timeline .ttl.on { border-color: #fff; background: rgba(255,255,255,.12); }
.v-timeline .head { position: absolute; top: -6px; bottom: -40px; left: 0; width: 2px; background: var(--rouge); z-index: 3; }
.v-timeline .lbl { align-self: center; }

/* « Regardable. » : le mot respire */
.v-breathe { --len: 1.4; }
.v-breathe .pin-stage { background: #000; display: grid; align-content: center; gap: 28px; }
.breathe { font: 700 24vw/.85 var(--f-display); letter-spacing: -.04em; color: var(--jaune); white-space: nowrap; width: max-content; }
.breathe span { display: inline-block; font-variation-settings: "wdth" var(--wd, 100), "opsz" 96; font-weight: var(--wg, 700); }
.v-breathe .cap { padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); color: #9AA5AD; max-width: 40em; font-size: var(--t-lead); }
@media (min-width: 900px) { .v-breathe .cap { padding-left: 64px; } }
.loops { display: grid; gap: 16px; }
@media (min-width: 900px) { .loops { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.loop { border: 1px solid var(--line); display: grid; grid-template-rows: 200px auto; }
.loop .stagebox { position: relative; overflow: hidden; background: #0B0D0E; display: grid; place-items: center; }
.loop p { padding: 16px 18px; display: grid; gap: 4px; }
.loop p b { font-weight: 600; }
.loop p span { color: var(--fg-2); font-size: .9375rem; }
.lp-logo svg { width: 62%; overflow: visible; }
.lp-logo .pc { animation: lpIn 3.6s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
.lp-logo .pc:nth-child(2) { animation-delay: .12s; } .lp-logo .pc:nth-child(3) { animation-delay: .24s; } .lp-logo .pc:nth-child(4) { animation-delay: .36s; } .lp-logo .pc:nth-child(5) { animation-delay: .48s; }
@keyframes lpIn { 0% { transform: translateY(40px) scale(.6); opacity: 0; } 22%, 78% { transform: none; opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }
.lp-dot svg { width: 30%; overflow: visible; }
.lp-dot .dot { animation: dotJump 1.6s cubic-bezier(.3,0,.3,1) infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes dotJump { 0%, 100% { transform: translateY(0) scale(1.2, .8); } 15% { transform: translateY(0) scale(1); } 50% { transform: translateY(-60%) scale(.95, 1.05); } 85% { transform: translateY(0) scale(1); } }
.lp-morph svg { width: 40%; overflow: visible; }
.loops-paused .loop * { animation-play-state: paused !important; }

/* Formats : un cadre qui change de proportions */
.v-formats { --len: 3; }
.v-formats .pin-stage { background: #000; color: #fff; }
.fm-head { position: absolute; top: calc(var(--bar-h) + 22px); left: max(20px, env(safe-area-inset-left, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); z-index: 2; }
@media (min-width: 900px) { .fm-head { left: 64px; } }
.fm-box { position: absolute; left: 50%; top: 46%; width: var(--fw, 80vw); height: var(--fh, 45vw); translate: -50% -50%; border: 3px solid var(--jaune); overflow: hidden; background: #0B0D0E; }
.fm-box svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fm-box video:not([src]) { display: none; } .fm-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fm-box svg .line { fill: none; stroke: #fff; stroke-width: 2.2; vector-effect: non-scaling-stroke; } .fm-box svg .arc { fill: none; stroke: #9AA5AD; stroke-width: 2.2; vector-effect: non-scaling-stroke; } .fm-box svg .sun { fill: var(--jaune); } .fm-box svg .walk { fill: var(--vert-clair); }
.fm-box .ratio { position: absolute; left: 10px; top: 8px; z-index: 2; font: 600 clamp(.875rem, 2vw, 1.25rem)/1 var(--f-mono); color: #000; background: var(--jaune); padding: 4px 7px; }
.fm-txt { position: absolute; left: max(20px, env(safe-area-inset-left, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); bottom: 28px; display: grid; }
@media (min-width: 900px) { .fm-txt { left: 64px; right: auto; width: 40vw; bottom: 48px; } }
.fm { grid-area: 1 / 1; display: grid; gap: 8px; visibility: hidden; }
.fm h3 { font: 750 clamp(1.8rem, 6vw, 3.6rem)/.95 var(--f-display); letter-spacing: -.035em; }
.fm p { color: #A9B4BC; font-size: 1rem; max-width: 34em; }
.fm .livrables { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.fm .livrables li { font-size: .8125rem; padding: 4px 8px; border: 1px solid #2A2F33; }
/* Téléphone à écran court : le cadre garde sa place sous le titre, les livrables se lisent plus bas dans la page */
@media (max-width: 899px) and (max-height: 760px) {
  .fm p { font-size: .9375rem; line-height: 1.45; }
  .fm-txt { bottom: 22px; }
  .fm .livrables li { font-size: .75rem; padding: 3px 7px; }
}
@media (max-width: 899px) and (max-height: 600px) { .fm .livrables { display: none; } }

/* Rushes, storyboard, questions de tournage */
.rushes { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .rushes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rush { display: grid; grid-template-rows: auto auto; text-align: left; background: #0B0D0E; border: 2px solid #2A2F33; padding: 0; cursor: pointer; color: #fff; }
.rush .thumb { aspect-ratio: 16 / 7; background: #101416; position: relative; }
.rush .thumb .tc { position: absolute; left: 8px; bottom: 8px; font: 500 .6875rem/1 var(--f-mono); color: var(--jaune); background: #000; padding: 4px 6px; }
.rush .thumb .sel { position: absolute; right: 8px; top: 8px; font: 600 .6875rem/1 var(--f-mono); padding: 5px 7px; background: #000; color: #9AA5AD; }
.rush .thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rush .thumb svg * { fill: none; stroke: #6B767E; stroke-width: 2.5; }
.rush .thumb svg .y { stroke: var(--jaune); stroke-width: 4; }
.rush .thumb svg circle.y { fill: var(--jaune); stroke: none; }
.rush .thumb svg .fy, .frame-s .sk svg .fy { fill: var(--jaune); stroke: none; }
.rush .thumb svg .fi, .frame-s .sk svg .fi { fill: #3CC2BF; stroke: none; }
.rush .thumb svg .fk { fill: #000; stroke: none; }
.rush .thumb svg .rd, .frame-s .sk svg .rd { stroke: var(--rouge); }
.frame-s .sk svg .y { stroke: var(--jaune); }
.rush .sel::before { content: "Sélectionner"; }
.rush[aria-pressed="true"] .sel::before { content: "Retenu ✓"; }
.rush[aria-pressed="true"] .thumb svg :not(.y):not(.rd):not(.fy):not(.fi):not(.fk) { stroke: #fff; }
.rush > span:last-child { padding: 14px 16px; font-size: 1.0625rem; line-height: 1.4; }
.rush[aria-pressed="true"] { border-color: var(--jaune); }
.rush[aria-pressed="true"] .sel { background: var(--jaune); color: var(--encre); }
.board { display: grid; gap: 16px; }
@media (min-width: 900px) { .board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.frame-s { display: grid; gap: 10px; align-content: start; }
.frame-s .sk { aspect-ratio: 16 / 9; border: 2px solid #fff; position: relative; overflow: hidden; background: #0B0D0E; }
.frame-s .sk span { position: absolute; left: 8px; top: 8px; font: 600 .75rem/1 var(--f-mono); color: var(--jaune); }
.frame-s .sk svg { position: absolute; inset: 18% 12%; width: 76%; height: 64%; }
.frame-s .sk svg * { fill: none; stroke: #9AA5AD; stroke-width: 2; }
.frame-s h3 { font: 700 1.375rem/1.1 var(--f-display); letter-spacing: -.02em; }
.frame-s p { color: #A9B4BC; font-size: .9375rem; }
.frame-s .vous { color: #fff; font-size: .9375rem; border-left: 3px solid var(--jaune); padding-left: 10px; }
.faq--subs summary { font-weight: 600; }
.faq--subs details > div p { display: inline; background: rgba(255,255,255,.08); padding: 3px 6px; line-height: 1.9; box-decoration-break: clone; -webkit-box-decoration-break: clone; color: #fff; }
.tc { position: fixed; z-index: 45; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); font: 500 .75rem/1 var(--f-mono); color: var(--jaune); background: rgba(0,0,0,.78); padding: 7px 9px; pointer-events: none; font-variant-numeric: tabular-nums; display: none; }
@media (min-width: 900px) { .tc.is-on { display: block; } }
.is-static .v-film .pin-stage, .is-static .v-formats .pin-stage, .is-static .v-breathe .pin-stage { padding: calc(var(--bar-h) + 30px) 0 40px; }
.is-static .v-frame { position: relative; inset: auto; margin: 0 16px; }
.is-static .v-screen { position: relative; }
.is-static .plan { position: relative; min-height: 420px; visibility: visible; }
.is-static .v-timeline, .is-static .fm-box { display: none; }
.is-static .fm-head, .is-static .fm-txt { position: relative; inset: auto; }
.is-static .fm { visibility: visible; grid-area: auto; margin-bottom: 24px; }