/* 15 octobre 2026. Portrait, perspectives, méthode : une progression au défilement. */
#recit .film-console .film-forward{position:static;display:inline-flex;align-self:flex-start;margin-top:8px;font-size:22px;line-height:1.5;text-decoration:underline;text-underline-offset:6px;white-space:normal}
.perspective-journey{height:235svh;background:#0b0b0b;--perspective-open:0;--perspective-progress:0%}
.perspective-journey .possibilities-stage{min-height:700px;height:100svh;background:#0b0b0b;padding:0}
.perspective-image{position:absolute;inset:0;overflow:hidden;transform:translateX(calc(var(--perspective-open)*18%)) scale(calc(1 - var(--perspective-open)*.12));transform-origin:right center;opacity:calc(1 - var(--perspective-open)*.88);clip-path:inset(calc(var(--perspective-open)*12%) 0 calc(var(--perspective-open)*12%) calc(var(--perspective-open)*34%));background:#121212;pointer-events:none}
.perspective-photo{position:absolute;max-width:none;display:block}
.perspective-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0b0b0bf5 0%,#0b0b0bdb 32%,#0b0b0b33 65%,transparent),linear-gradient(0deg,#0b0b0b 0%,transparent 50%)}
.perspective-nav{position:absolute;left:5%;bottom:100px;z-index:5;display:flex;flex-direction:column;gap:3px;max-width:270px}
.perspective-nav button{font:inherit;font-size:21px;line-height:1.4;text-align:left;min-height:57px;padding:15px 15px 15px 19px;border:0;border-left:1px solid #8f8d8a77;color:#bebcb9;background:transparent;cursor:pointer;transition:background .3s,color .3s}
.perspective-nav button[aria-selected=true]{color:#f4d1ae;border-left:2px solid #e4bb91;background:linear-gradient(90deg,#91714d2e,transparent)}
.perspective-panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;left:5%;width:88%;padding:45px 0 230px;pointer-events:none;transition:opacity .5s,transform .75s cubic-bezier(.2,.75,.2,1)}
.perspective-panel h2{max-width:760px;font-size:clamp(52px,5.9vw,96px);line-height:1.03;font-weight:500;letter-spacing:-.05em;text-align:left;margin:0;color:#f4f0e7}
.perspective-panel h2 em{display:block;color:#dcb891;margin-top:8px;max-width:930px}
.perspective-job{font-size:21px;line-height:1.5;text-transform:none;color:#ddc0a0;margin:0 0 26px;max-width:780px}
.perspective-question{font-size:clamp(23px,1.8vw,28px);line-height:1.55;max-width:690px;margin:30px 0 0;color:#e9e7e4}
.perspective-panel[aria-hidden=true]{visibility:hidden;pointer-events:none}
.perspective-origin{opacity:1;transform:translateY(0)}
.perspective-future{opacity:0;transform:translateY(60px)}
[data-act='1'] .perspective-origin{opacity:0;transform:translateY(-60px)}
[data-act='1'] .perspective-future{opacity:1;transform:translateY(0);pointer-events:auto}
.perspective-terms{display:flex;flex-wrap:wrap;gap:12px 28px;max-width:870px;margin:24px 0 0;font-size:21px;color:#c9b99f;line-height:1.5}
.perspective-terms span{border-top:1px solid #aa927761;padding-top:8px}
.perspective-link{font-size:22px;line-height:1.4;color:#efcaa6;text-decoration:underline;text-underline-offset:6px;margin:26px 0 0;max-width:650px;pointer-events:auto}
.perspective-cue{position:absolute;left:5%;bottom:35px;font-size:20px;color:#c7c5c2;line-height:1.4;max-width:750px}
.perspective-progress{position:absolute;height:2px;bottom:20px;left:5%;right:5%;background:#f0dfca22}
.perspective-progress i{display:block;height:100%;width:var(--perspective-progress);background:#dabb94}
.perspective-nav button:focus-visible,.perspective-link:focus-visible{outline:2px solid #e8c198;outline-offset:5px}
#methode.method{overflow:visible;background:#101010}
.method-scroll-cue{font-size:20px;line-height:1.5;color:#c1bfbc;margin:27px 0 0 21px;max-width:220px}
.method-scroll-progress{height:2px;background:#cfcdca26;margin:22px 0 0 21px;max-width:180px}
.method-scroll-progress i{display:block;height:100%;width:var(--phase-progress,0%);background:#d7b18a}
.method-scroll-cue,.method-scroll-progress{display:none}
@media(min-width:1000px) and (min-height:760px) and (prefers-reduced-motion:no-preference){
 .method-scroll{height:330svh;margin-top:55px;position:relative}
 #methode .xp-kinetic{height:100svh;min-height:0;position:sticky;top:0;margin:0;padding:35px 0 15px;grid-template-rows:minmax(0,1fr) auto}
 #methode .mk-rail{position:relative;top:auto;align-self:center;grid-row:1 / 3}
 #methode .mk-panel{min-height:0;height:100%;padding:30px 4%}
 #methode .mk-composition{min-height:0;padding:20px 0 25px}
 #methode .mk-type{font-size:clamp(64px,7.2vw,112px)}
 #methode [data-phase='1'] .mk-type,#methode [data-phase='2'] .mk-type{font-size:clamp(48px,4.7vw,76px);gap:19px}
 #methode .mk-stage{border:0;background:radial-gradient(ellipse at 80% 30%,#67543d20,transparent 65%),#101010}
 #methode .mk-type-caption{font-size:21px}
 #methode .mk-summary-copy{font-size:24px;line-height:1.5}
 #methode .mk-result{font-size:22px;margin-top:14px}
 #methode .mk-detail>summary{padding:20px 0}
 #methode .mk-detail[open]{grid-area:auto;position:absolute;inset:35px 0 15px calc(22% + 35px);padding:0 28px;background:#181818;border:1px solid #767471;overflow:auto;z-index:15;overscroll-behavior:contain;scrollbar-gutter:stable}
 #methode .mk-detail[open]>summary{position:sticky;top:0;background:#181818;z-index:1;padding:24px 0;border-bottom:1px solid #605e5b}
 #methode .mk-detail[open] .mk-detail-copy{padding-top:20px}
 .method-scroll-cue,.method-scroll-progress{display:block}
}
@media(max-width:1150px){.perspective-panel h2{font-size:clamp(53px,6vw,85px)}.perspective-panel{padding-bottom:235px}.perspective-question{max-width:640px}.perspective-terms{font-size:20px;gap:10px 20px}}
@media(max-width:850px){
 .perspective-journey{height:220svh}
 .perspective-journey .possibilities-stage{height:100svh;min-height:780px}
 .perspective-image{inset:74px 0 0;opacity:calc(.6 - var(--perspective-open)*.5);transform:translateX(calc(var(--perspective-open)*12%));clip-path:none}
 .perspective-shade{background:linear-gradient(0deg,#0b0b0b 16%,#0b0b0bea 49%,#0b0b0b33 100%)}
 .perspective-panel{left:6%;width:88%;padding:115px 0 225px;justify-content:center}
 .perspective-panel h2{font-size:clamp(42px,9vw,67px);line-height:1.05}
 .perspective-job{font-size:20px;margin-bottom:22px}
 .perspective-question{font-size:23px;line-height:1.5;margin-top:25px}
 .perspective-terms{display:none}
 .perspective-link{font-size:22px;margin-top:23px}
 .perspective-nav{left:6%;bottom:90px;max-width:88%}
 .perspective-nav button{font-size:21px;padding:13px 14px;min-height:54px}
 .perspective-cue{left:6%;bottom:33px;font-size:20px;max-width:85%}
 .perspective-progress{left:6%;right:6%;bottom:18px}
 #recit .film-console .film-forward{font-size:22px;margin-top:12px}
}
@media(max-width:370px){.perspective-journey .possibilities-stage{min-height:850px}.perspective-panel h2{font-size:40px}.perspective-panel{padding-top:110px;padding-bottom:245px}.perspective-question{font-size:22px}.perspective-cue{max-width:85%;font-size:20px}}
@media(prefers-reduced-motion:reduce){
 .perspective-journey{height:auto}
 .perspective-journey .possibilities-stage{position:relative;min-height:850px}
 .perspective-panel,.perspective-image,.perspective-nav button{transition:none;transform:none!important}
 .perspective-image{opacity:.18}
 .perspective-cue{display:none}
 .perspective-progress{display:none}
}