/* 15 octobre 2026. Mise en scène des films rendus dans DaVinci Resolve. */
#recit.portrait-explorer{min-height:100svh;height:auto;background:#0a0a0a}
#recit .film-stage{height:100svh;min-height:760px;padding:0;position:relative;background:#0a0a0a;isolation:isolate;overflow:hidden}
#recit .story-bg{inset:var(--header) 0 100px;z-index:-1;opacity:.7;height:auto}
#recit .story-bg:after{display:none}
#recit #story-photo{transform:none!important;opacity:1;transition:opacity .6s}
#recit.film-loaded .story-bg{opacity:0}
.motion-screen{position:absolute;inset:var(--header) 0 100px;overflow:hidden;isolation:isolate;background:#0a0a0a;animation:movie-opening 1.8s cubic-bezier(.16,1,.3,1) both}
.motion-screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,8,8,.3),transparent 58%),linear-gradient(0deg,rgba(8,8,8,.5),transparent 35%);z-index:2}
.portrait-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 18%;opacity:0;transform:scale(1.06);transition:opacity 1s ease,transform 1.6s cubic-bezier(.16,1,.3,1);background:#0a0a0a}
.portrait-video.is-current{opacity:1;transform:scale(1)}
@keyframes movie-opening{from{clip-path:inset(12% 18% 12% 18% round 3px);transform:scale(.9)}to{clip-path:inset(0);transform:scale(1)}}
#recit .explorer-heading{position:absolute;left:5vw;top:calc(var(--header) + 50px);z-index:3;max-width:48%;pointer-events:none;transition:opacity .4s,transform .6s}
#recit .story-kicker{margin:0 0 24px;font-size:22px;line-height:1.4;letter-spacing:.015em;font-weight:500;max-width:620px;color:#f0d1b4;text-transform:none}
#recit h2{font-size:clamp(48px,5vw,82px);line-height:1.05;letter-spacing:-.05em;font-weight:500}
#recit h2 em{color:#f2d3b7}
#recit .film-stage:not([data-lens=rest]) .explorer-heading{opacity:0;transform:translateY(-20px)}
#recit .portrait-insight{position:absolute;left:5vw;bottom:142px;width:min(540px,42vw);max-width:none;padding:29px 32px 31px;border:1px solid rgba(239,227,204,.28);border-radius:22px;background:rgba(23,23,23,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:4;animation:none;box-shadow:0 20px 80px #0005}
#recit .portrait-insight .insight-kicker{font-size:20px;color:#dfc0a5;margin:0 45px 16px 0;line-height:1.4}
#recit .portrait-insight h3{font-size:clamp(29px,2.5vw,39px);line-height:1.08;letter-spacing:-.035em;font-weight:500;color:#fff;margin:0 24px 19px 0}
#recit .portrait-insight #insight-copy{font-size:23px;line-height:1.5;color:#e9e7e4;margin:0}
.insight-close{position:absolute;right:16px;top:15px;width:42px;height:42px;border:1px solid #8f8d8a;border-radius:50%;background:#2f2f2f;color:#f4f1e8;font-size:29px;line-height:1;display:grid;place-items:center}
.film-console{position:absolute;left:5vw;right:5vw;bottom:28px;z-index:5;display:flex;justify-content:center;align-items:center;gap:22px}
#recit .portrait-points{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:12px;align-items:center}
#recit .portrait-point{font-size:22px;min-height:58px;padding:9px 20px 9px 11px;gap:13px;border-color:#63615e;border-radius:40px;background:#212121;scroll-margin-top:0;white-space:nowrap}
#recit .portrait-point:hover{background:#3f3f3f}
#recit .portrait-point[aria-expanded=true]{background:#e9e5db;color:#2f2f2f}
#recit .point-symbol{width:34px;height:34px;font-size:25px}
.film-playback{position:absolute;right:0;display:grid;place-items:center;width:50px;height:50px;border:1px solid #7c7a77;border-radius:50%;background:#212121;color:white;font-size:22px}
.movie-progress{position:absolute;left:5vw;right:5vw;bottom:100px;height:2px;background:#e3dfd51f;z-index:3}
.movie-progress i{display:block;height:100%;background:#d9b695;width:var(--movie-progress,0%)}
.film-forward{position:absolute;bottom:45px;left:5vw;z-index:6;display:flex;align-items:center;gap:16px;font-size:21px;color:#e6c4a7}
.possibilities-image video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
#chooser .opening-camera video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% top;opacity:0;transition:opacity .4s}
#chooser .opening-camera video.loaded{opacity:1}
@media(max-width:1100px){.film-forward{display:none}.film-console{justify-content:flex-start}.film-playback{right:0}#recit .portrait-insight{width:48vw}#recit .explorer-heading{max-width:53%}}
@media(max-width:700px){
 #recit .film-stage{height:100svh;min-height:720px;padding:0}
 #recit .story-bg,.motion-screen{inset:var(--header) 0 150px;height:auto}
 .portrait-video{object-fit:cover;object-position:100% top}
 #recit .explorer-heading{left:6vw;top:calc(var(--header) + 22px);max-width:90%;}
 #recit .story-kicker{font-size:20px;line-height:1.4;margin-bottom:16px;text-shadow:0 2px 15px #000}
 #recit h2{font-size:clamp(38px,9vw,58px);line-height:1.05;text-shadow:0 3px 20px #000}
 .motion-screen:after{background:linear-gradient(0deg,#0a0a0a,transparent 50%),linear-gradient(180deg,rgba(7,7,7,.6),transparent 42%)}
 .film-console{left:4vw;right:4vw;bottom:24px;justify-content:center;gap:10px;align-items:flex-end}
 #recit .portrait-points{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;align-items:stretch}
 #recit .portrait-point{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;white-space:normal;min-height:94px;border-radius:17px;font-size:22px;line-height:1.2;padding:12px 4px;text-align:center}
 #recit .point-symbol{width:30px;height:30px;font-size:24px}
 .film-playback{right:0;bottom:130px;width:44px;height:44px;font-size:20px}
 .film-forward{display:none}
 .movie-progress{left:4vw;right:4vw;bottom:150px}
 #recit .portrait-insight{left:4vw;right:4vw;bottom:170px;width:auto;padding:25px 23px;max-height:calc(100svh - var(--header) - 195px);overflow:auto;border-radius:20px;background:rgba(21,21,21,.96)}
 #recit .portrait-insight .insight-kicker{font-size:20px;margin-bottom:14px}
 #recit .portrait-insight h3{font-size:31px;line-height:1.1;margin-bottom:17px}
 #recit .portrait-insight #insight-copy{font-size:22px;line-height:1.5}
 #recit .portrait-point span:last-child{font-size:22px}
 #recit .film-stage[data-lens=rest] .portrait-video{object-position:85% top}
}
@media(max-width:360px){#recit .film-stage{min-height:680px}#recit .portrait-point{font-size:21px}#recit .portrait-point span:last-child{font-size:21px}#recit .portrait-insight{padding:23px 20px}#recit .portrait-insight h3{font-size:29px}}
@media(prefers-reduced-motion:reduce){.motion-screen{animation:none}.portrait-video{transition:none;transform:none}#recit .explorer-heading{transition:none}#chooser .opening-camera{display:block;animation:none}#chooser .opening-camera video{display:none}}
.motion-screen{animation:none}
.film-entered .motion-screen{animation:movie-opening 1.8s cubic-bezier(.16,1,.3,1) both}
.movie-progress i{transition:width .2s linear}

@media(prefers-reduced-motion:reduce){.film-entered .motion-screen{animation:none}}

.point-label-short{display:none}
@media(max-width:700px){#recit .film-stage{min-height:580px}.point-label-full{display:none}.point-label-short{display:inline}}
@media(max-width:700px){
 #recit .film-stage[data-lens=rest] .portrait-video{object-position:100% top}
 #recit .explorer-heading{top:auto;bottom:185px;left:6vw;max-width:88%}
 #recit h2{font-size:34px;line-height:1.05}
 #recit .story-kicker{font-size:20px;margin-bottom:14px}
}
@media(max-width:700px){
 #recit .portrait-insight{max-height:calc(100svh - var(--header) - 182px);padding:22px}
 #recit .portrait-insight .insight-kicker{display:none}
 #recit .portrait-insight h3{font-size:29px;line-height:1.1;margin-bottom:15px}
 #recit .portrait-insight #insight-copy{font-size:22px;line-height:1.4}
}