/* 15 octobre 2026. Portrait, exploration et ouverture des perspectives. */
/* L’ouverture passe d’un regard rapproché à une galerie de personnes. */
#chooser .opening-camera{position:absolute;inset:0;background-image:url('../assets/cinematic-care-v4.webp');background-repeat:no-repeat;background-color:#222222;z-index:3;pointer-events:none;transform-origin:50% 24%;animation:cinema-opening 3.1s cubic-bezier(.2,.7,.2,1) both}
#chooser .chooser-mosaic{animation:cinema-gallery 3.1s ease both}
#chooser .chooser-mosaic i{animation:cinema-panel 1.35s cubic-bezier(.16,1,.3,1) both;animation-delay:1.5s;border:0;border-radius:0;rotate:0deg}
#chooser .chooser-mosaic i:nth-child(2){animation-delay:1.62s}
#chooser .chooser-mosaic i:nth-child(3){animation-delay:1.74s}
#chooser .chooser-mosaic i:nth-child(4){animation-delay:1.86s}
#chooser.previewing .opening-camera{display:none}
#chooser.previewing .chooser-mosaic{animation:none;opacity:0}
@keyframes cinema-opening{0%{opacity:1;transform:scale(1.3);clip-path:inset(0)}65%{opacity:1;transform:scale(1.02);clip-path:inset(0)}100%{opacity:0;transform:scale(1);clip-path:inset(0 0 100% 0)}}
@keyframes cinema-gallery{0%,54%{opacity:0}100%{opacity:1}}
@keyframes cinema-panel{from{clip-path:inset(100% 0 0);filter:brightness(.7)}to{clip-path:inset(0);filter:brightness(1)}}

/* Le portrait reste une scène unique. Le clic ouvre une explication. */
#recit.portrait-explorer{height:auto;min-height:100svh;background:#141414}
#recit .film-stage{position:relative;top:auto;min-height:100svh;height:auto;overflow:hidden;isolation:isolate;padding:calc(var(--header) + 45px) 5vw 48px;background:#141414}
#recit .story-bg{position:absolute;inset:0;z-index:-2;background:#1e1e1e}
#recit .story-bg:after{inset:0;z-index:2;background:linear-gradient(90deg,#141414 0%,rgba(20,20,20,.97) 28%,rgba(20,20,20,.78) 44%,rgba(20,20,20,.12) 69%,rgba(20,20,20,.02) 100%);pointer-events:none}
#recit #story-photo{opacity:1;visibility:visible;inset:0;transform:translate3d(var(--camera-x,0px),var(--camera-y,0px),0) scale(var(--camera-scale,1.02))!important;transform-origin:78% 24%;transition:transform 1.25s cubic-bezier(.2,.75,.2,1),filter 1.1s;background-repeat:no-repeat;will-change:auto}
#recit .explorer-content{width:min(53%,770px);position:relative;z-index:3}
#recit .story-kicker{font-size:21px;line-height:1.45;color:#e3ba99;letter-spacing:.02em;text-transform:none;overflow-wrap:anywhere;margin:0 0 24px;max-width:660px}
#recit h2{font-size:clamp(54px,5.3vw,86px);line-height:1.02;letter-spacing:-.055em;font-weight:600;max-width:760px;margin:0}
#recit h2 em{color:#e4b48e}
.explorer-invitation{font-size:23px;line-height:1.5;color:#dfddda;margin:24px 0 20px}
.portrait-points{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.portrait-point{position:relative;display:inline-flex;align-items:center;gap:15px;min-height:56px;max-width:100%;padding:8px 18px 8px 9px;border:1px solid #706e6b;border-radius:32px;background:rgba(40,40,40,.92);color:#fff;font-size:23px;line-height:1.35;text-align:left;transition:background .3s,border-color .3s}
.portrait-point:hover{background:#474747;border-color:#b8b6b3}
.portrait-point[aria-expanded=true]{background:#f0ede3;color:#323232;border-color:#f0ede3}
.point-symbol{display:grid;place-items:center;flex-shrink:0;width:35px;height:35px;border:1px solid currentColor;border-radius:50%;font-size:27px;font-weight:400;line-height:1;transition:transform .45s}
.portrait-point[aria-expanded=true] .point-symbol{transform:rotate(45deg)}
.portrait-insight{max-width:650px;padding:23px 0 0;animation:insight-in .5s ease both}
.portrait-insight h3{font-size:29px;line-height:1.2;font-weight:500;letter-spacing:-.025em;margin-bottom:12px;color:#e7c4a6}
.portrait-insight p{font-size:23px;line-height:1.5;color:#f2f0ed}
@keyframes insight-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.explorer-actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:30px}
.explorer-actions a,.explorer-actions button{font-size:21px;line-height:1.45;color:#eee5d8;text-decoration:underline;text-underline-offset:6px}
.explorer-actions button{padding:0;border:0;background:transparent;color:#cfcdca}
.explorer-actions a span{margin-left:15px}
.portrait-caption{position:absolute;right:5vw;bottom:35px;font-size:20px;line-height:1.4;letter-spacing:.025em;color:#e8e6e3;text-shadow:0 1px 12px #000}

/* L’image prend toute la place avant de révéler le message au défilement. */
.possibilities{height:210svh;position:relative;background:#101010;scroll-margin-top:0;--open:0;--message:0}
.possibilities-stage{height:100svh;min-height:680px;position:sticky;top:0;overflow:hidden;isolation:isolate;background:#101010}
.possibilities-image{position:absolute;inset:0;background:url('../assets/cinematic-conversation-v4.webp') 54% center/cover no-repeat;transform:scale(calc(1.18 - var(--open)*.18));filter:brightness(calc(.9 - var(--open)*.48));clip-path:inset(calc(var(--open)*8%) calc(var(--open)*7%) calc(var(--open)*8%));opacity:calc(1 - var(--open)*.52);will-change:auto}
.possibilities-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,11,11,.9),transparent 70%);opacity:calc(.22 + var(--open)*.78)}
.possibilities-copy{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--header) + 25px) 6vw 65px;opacity:var(--message);transform:translateY(calc((1 - var(--message))*70px));pointer-events:none}
.possibilities[data-message=true] .possibilities-copy{pointer-events:auto}
.possibilities-copy>.eyebrow{color:#f0d0b0;font-size:21px;letter-spacing:.025em;text-transform:none;margin-bottom:24px}
.possibilities h2{font-size:clamp(66px,8.5vw,150px);line-height:1.03;letter-spacing:-.055em;font-weight:600;max-width:1500px}
.possibilities h2>span,.possibilities h2>em{display:block}
.possibilities h2>em{color:#e8bd96;margin-top:7px}
.possibilities-copy>p:not(.eyebrow){font-size:clamp(24px,2vw,31px);line-height:1.5;max-width:850px;color:#f1efec;margin-top:32px}
.possibilities-copy>a{display:inline-flex;align-items:center;gap:22px;margin-top:32px;color:#e9c6a6;font-size:22px;line-height:1.5;text-decoration:underline;text-underline-offset:7px}
.possibilities-cue{position:absolute;bottom:35px;left:5%;right:5%;z-index:2;font-size:22px;line-height:1.4;text-align:center;color:#fff;opacity:calc(1 - var(--open)*2);text-shadow:0 2px 14px #000}
.possibilities-cue span{display:block;margin-top:14px;font-size:30px}
@media(min-width:1500px){#recit .film-stage{padding-top:calc(var(--header) + 60px)}.portrait-points{gap:13px}.portrait-point{min-height:61px}}
@media(max-width:1000px) and (min-width:701px){#recit .explorer-content{width:58%}#recit h2{font-size:54px}.portrait-insight p{font-size:22px}.portrait-caption{max-width:28%;text-align:right}}
@media(max-width:700px){
 #recit .film-stage{padding:calc(var(--header) + 370px) 5vw 42px;min-height:0}
 #recit .story-bg{inset:var(--header) 0 auto;height:430px;z-index:-2}
 #recit .story-bg:after{background:linear-gradient(0deg,#141414 0%,rgba(20,20,20,.92) 12%,transparent 48%)}
 #recit #story-photo{transform-origin:50% 24%}
 #recit .explorer-content{width:100%;max-width:650px;margin:auto}
 #recit .story-kicker{font-size:21px;margin-bottom:18px}
 #recit h2{font-size:clamp(44px,10vw,65px);line-height:1.05}
 .explorer-invitation{font-size:22px;margin-top:21px}
 .portrait-point{font-size:22px;min-height:58px;gap:13px}
 .portrait-insight h3{font-size:29px;line-height:1.2}
 .portrait-insight p{font-size:23px;line-height:1.5}
 .explorer-actions{gap:22px;margin-top:29px}
 .explorer-actions a,.explorer-actions button{font-size:21px}
 .portrait-caption{display:none}
 .possibilities{height:185svh}
 .possibilities-stage{min-height:650px}
 .possibilities-copy{padding:calc(var(--header) + 15px) 6vw 55px}
 .possibilities-copy>.eyebrow{font-size:21px;margin-bottom:24px}
 .possibilities h2{font-size:clamp(45px,11vw,72px);line-height:1.06}
 .possibilities-copy>p:not(.eyebrow){font-size:24px;line-height:1.5;margin-top:26px}
 .possibilities-copy>a{font-size:22px;margin-top:24px}
 .possibilities-image{background-position:56% center}
 .possibilities-cue{font-size:21px;bottom:28px}
}
@media(prefers-reduced-motion:reduce){
 #chooser .opening-camera{display:none}
 #chooser .chooser-mosaic,#chooser .chooser-mosaic i{animation:none}
 #recit #story-photo{transform:none!important;transition:none}
 .portrait-insight{animation:none}
 .point-symbol{transition:none}
 .possibilities{height:auto;--open:1!important;--message:1!important}
 .possibilities-stage{position:relative;min-height:850px;height:auto}
 .possibilities-copy{position:relative;min-height:850px;pointer-events:auto}
 .possibilities-image{transform:none}
 .possibilities-cue{display:none}
}
/* L’entrée doit disparaître lorsque le parcours est engagé. */
body.ready #chooser,body.choosing-direction #chooser{display:none!important}
.portrait-point{scroll-margin-top:calc(var(--header) + 20px)}
/* Réserver la zone de navigation et la marge autour du visage pendant le zoom. */
@media(min-width:701px){#recit .story-bg{inset:var(--header) 0 0}}
/* Sur téléphone, l’ouverture commence quand les portraits entrent dans l’écran. */
#chooser .opening-camera,#chooser .chooser-mosaic,#chooser .chooser-mosaic i{animation-play-state:paused}
#chooser .cinema-started .opening-camera,#chooser .cinema-started .chooser-mosaic,#chooser .cinema-started .chooser-mosaic i{animation-play-state:running}

/* Sur téléphone, les quatre portraits restent alignés dans leur grille. */
@media (max-width: 850px) {
  #chooser .chooser-mosaic i {
    animation: none !important;
    clip-path: none !important;
    transform: none !important;
  }
}