/* Hero cinématographique piloté par le scroll — JB Peinture.
   Ne concerne que la section .hero-scroll. Les variables --* sont écrites par hero-film.js. */
.hero-scroll{height:330vh;height:330svh;position:relative;background:#fff}
.hero-scroll .hero-cinema{position:sticky;top:0;height:100vh;height:100svh;min-height:0;max-height:none;overflow:hidden;background:#fff;isolation:isolate;
 --nx:0;--ny:0;--op1:1;--op2:1;--opd:1;--t1x:0px;--t2x:0px;--ls1:-.075em;--ls2:-.075em;--veil:1;--white:0;--fade:0;--prog:0;--cue:1;--ind:1;--oa:0;--ob:0;--oc:0}
/* Média */
.hero-media{position:absolute;inset:0;z-index:-3;overflow:hidden;transform:translate3d(calc(var(--nx) * 3px),calc(var(--ny) * 2px),0) scale(1.012);will-change:transform;background:#e9e6e0}
.hero-media picture,.hero-media img,.hero-video,.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:62% 50%}
.hero-video,.hero-canvas{opacity:0;transition:opacity .5s}
.hero-cinema.is-ready .hero-video,.hero-cinema.is-ready .hero-canvas{opacity:1}
.hero-cinema.is-video .hero-canvas,.hero-cinema.is-frames .hero-video{display:none}
.hero-cinema.is-still .hero-video,.hero-cinema.is-still .hero-canvas{display:none}
/* Voile de lisibilité du premier plan, retiré pendant la matière */
.hero-cinema:after{opacity:var(--veil);pointer-events:none}
/* Fondu vers le blanc du site en bas de l'écran */
.hero-bottomfade{position:absolute;left:0;right:0;bottom:0;height:24%;z-index:2;pointer-events:none;background:linear-gradient(to top,#fff 0%,#ffffffd9 28%,#ffffff00 100%);opacity:var(--fade)}
/* Blanc pur : point de transition */
.hero-white{position:absolute;inset:0;z-index:6;background:#fff;opacity:var(--white);pointer-events:none}
/* Texte d'ouverture */
.hero-cinema .hero-content{z-index:3;max-width:none;pointer-events:none;transform:translate3d(calc(var(--nx) * 6px),calc(var(--ny) * 4px),0)}
.hero-cinema .hero-content a{pointer-events:auto}
.hero-cinema h1{font-size:clamp(64px,9vw,152px);letter-spacing:-.075em;margin:28px 0}
.hero-cinema .hero-line-first,.hero-cinema .hero-line-second{display:block;will-change:transform,opacity}
.hero-cinema .hero-line-first{opacity:var(--op1);transform:translate3d(var(--t1x),0,0);letter-spacing:var(--ls1)}
.hero-cinema .hero-line-second{opacity:var(--op2);transform:translate3d(var(--t2x),0,0);letter-spacing:var(--ls2)}
.hero-cinema .hero-description,.hero-cinema .hero-actions,.hero-cinema .hero-content>.eyebrow{opacity:var(--opd)}
.hero-cinema .hero-actions[data-inactive=true]{visibility:hidden;pointer-events:none}
/* Signature finale, révélée par masque */
.hero-outro{position:absolute;z-index:4;left:var(--pad);top:clamp(150px,26vh,270px);width:min(46vw,760px);pointer-events:none;transform:translate3d(calc(var(--nx) * 6px),calc(var(--ny) * 4px),0);visibility:hidden}
.hero-outro[data-on=true]{visibility:visible}
.hero-outro-title{margin:0;font-size:clamp(36px,4.4vw,74px);font-weight:450;letter-spacing:-.06em;line-height:1.02}
.hero-outro-title .mask{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero-outro-title .mask>span{display:block;will-change:transform}
.hero-outro-title .mask:nth-child(1)>span{transform:translate3d(0,calc((1 - var(--oa)) * 108%),0)}
.hero-outro-title .mask:nth-child(2)>span{transform:translate3d(0,calc((1 - var(--oa)) * 108%),0);transition:none}
.hero-outro-title .mask:nth-child(3)>span{transform:translate3d(0,calc((1 - var(--ob)) * 108%),0)}
.hero-outro-title em{font-family:var(--serif);font-weight:400;letter-spacing:-.03em}
.hero-outro-meta,.hero-outro .button{opacity:var(--oc);transform:translate3d(0,calc((1 - var(--oc)) * 14px),0)}
.hero-outro-meta{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:650;line-height:2;margin:30px 0 26px;color:var(--ink)}
.hero-outro[data-on=true] .button{pointer-events:auto}
/* Indicateur de progression */
.hero-cinema .hero-bottom{z-index:7;opacity:var(--ind);align-items:flex-end;pointer-events:none}
.hero-cinema .hero-progress{display:flex;align-items:center;gap:14px;pointer-events:auto;font-size:9px;letter-spacing:.13em}
.hero-cinema .hero-progress>span:first-child,.hero-cinema .hero-progress>span:last-child{opacity:var(--cue)}
.hero-progress-track{height:56px;width:1px;background:#17191722;display:block!important;position:relative;flex-shrink:0}
.hero-progress-track i{position:absolute;inset:0;background:var(--ink);transform:scaleY(var(--prog));transform-origin:top;will-change:transform}
/* Curseur : léger changement de taille sur la matière */
.custom-cursor{transition:scale .35s cubic-bezier(.2,.7,.2,1)}
.custom-cursor.matter{scale:1.45}
/* Tablette */
@media(max-width:1100px){.hero-scroll{height:280vh;height:280svh}}
/* Mobile : séquence courte, image portrait, pas de parallaxe */
@media(max-width:760px){
 .hero-scroll{height:190vh;height:190svh}
 .hero-scroll .hero-cinema{min-height:0}
 .hero-media{transform:none}
 .hero-media picture,.hero-media img,.hero-video,.hero-canvas{object-position:50% 50%}
 .hero-cinema .hero-content{padding-top:120px;transform:none}
 .hero-cinema h1{font-size:clamp(50px,14.4vw,78px);margin:22px 0}
 .hero-cinema .hero-bottom{align-items:flex-end;bottom:24px}
 .hero-cinema .hero-progress{font-size:8px;gap:12px;max-width:135px;letter-spacing:.06em}
 .hero-progress-track{height:44px}
 .hero-cinema .hero-phase{display:none}
 .hero-cinema .hero-bottom{justify-content:flex-start}
 .hero-outro{left:var(--pad);right:var(--pad);width:auto;top:118px;transform:none}
 .hero-outro-title{font-size:clamp(34px,10.6vw,52px)}
 .hero-bottomfade{height:20%}
}
@media(max-height:700px) and (min-width:761px){.hero-cinema .hero-content{padding-top:120px}.hero-cinema h1{font-size:min(9vw,15vh)}.hero-cinema .hero-bottom{bottom:18px}}
/* Sans JavaScript ou animations réduites : belle image fixe + transition simple vers le blanc */
html:not(.js) .hero-scroll,.hero-scroll.is-still{height:auto}
html:not(.js) .hero-scroll .hero-cinema,.hero-scroll.is-still .hero-cinema{position:relative;height:100vh;height:100svh;min-height:620px}
html:not(.js) .hero-bottomfade,.hero-scroll.is-still .hero-bottomfade{opacity:1}
html:not(.js) .hero-outro,.hero-scroll.is-still .hero-outro{display:none}
.hero-scroll.is-still .hero-media,.hero-scroll.is-still .hero-content,.hero-scroll.is-still .hero-line-first,.hero-scroll.is-still .hero-line-second{transform:none!important}
@media(prefers-reduced-motion:reduce){
 .hero-scroll{height:auto}
 .hero-scroll .hero-cinema{position:relative;height:100vh;height:100svh;min-height:620px}
 .hero-media,.hero-cinema .hero-content,.hero-cinema .hero-line-first,.hero-cinema .hero-line-second{transform:none!important}
 .hero-video,.hero-canvas,.hero-outro{display:none}
 .hero-bottomfade{opacity:1}
 .hero-cinema .hero-progress{display:none}
 .custom-cursor{scale:1!important}
}