:root{--ink:#17201b;--paper:#eeeee6;--lime:#d4ee97}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:75px}body{margin:0;background:var(--ink);color:var(--paper);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible,canvas:focus-visible{outline:2px solid var(--lime);outline-offset:5px}[hidden]{display:none!important}header{position:fixed;inset:0 0 auto;padding:25px 4vw;display:flex;justify-content:space-between;align-items:center;z-index:30;background:linear-gradient(#17201b80,transparent)}header.solid{background:#17201bef;backdrop-filter:blur(12px)}.brand{font:800 32px/1 Manrope,sans-serif;letter-spacing:-2px}.brand span,em{color:var(--lime)}.brand small{display:block;font:8px 'DM Sans',sans-serif;letter-spacing:2px;margin-top:10px}header button,.outline,.play{border:1px solid #ffffff65;border-radius:30px;background:#17201b30;padding:12px 20px;font-size:12px}#menu{position:fixed;inset:0;z-index:25;background:#17201bf7;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:120px 10vw}#menu a{font:500 clamp(25px,5vw,65px) Manrope,sans-serif;letter-spacing:-2px}#menu small{color:var(--lime);font:12px 'DM Sans';margin-right:20px}body.menu-open{overflow:hidden}.hero,.stage,.pano{height:100svh;min-height:650px;position:relative;overflow:hidden}video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#39443b}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#10190ec2,transparent 90%),linear-gradient(0deg,#111a1180,transparent 50%)}.topline{position:absolute;top:135px;left:4vw;right:4vw;font-size:9px;letter-spacing:2px;display:flex;justify-content:space-between}.copy{position:absolute;left:9vw;bottom:21%;max-width:82vw}.hero .copy{top:25%;bottom:auto}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:500;color:var(--lime);margin:0 0 28px}h1,h2{font-family:Manrope,sans-serif;font-weight:500;letter-spacing:-.055em;line-height:1.05;margin:0}h1{font-size:clamp(60px,7.4vw,115px)}h2{font-size:clamp(50px,6.5vw,100px)}em{font-style:normal}.copy>p:last-child{font-size:14px;line-height:1.9;margin-top:27px}.begin{position:absolute;left:9vw;bottom:45px;display:flex;align-items:center;gap:20px;font-size:12px}.begin b{border:1px solid #fff7;border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-size:21px;font-weight:400}.begin:hover b{background:var(--lime);color:var(--ink)}.film{height:260vh}.stage{position:sticky;top:0}.stage-bottom{position:absolute;left:9vw;right:9vw;bottom:40px;display:flex;align-items:center;gap:25px;font-size:9px;letter-spacing:1.5px}.track{width:200px;max-width:25vw;height:1px;background:#fff6}.track i{display:block;height:1px;background:var(--lime);width:0}.play{position:absolute;right:9vw;bottom:90px;backdrop-filter:blur(8px);font-size:11px}.dots{position:fixed;right:25px;top:50%;z-index:20;transform:translateY(-50%);display:grid;gap:18px}.dots a{display:flex;justify-content:flex-end;align-items:center;gap:12px;min-height:15px}.dots i{width:5px;height:5px;background:#fffa;border-radius:50%;box-shadow:0 0 0 4px #17201b40}.dots a.active i{background:var(--lime);box-shadow:0 0 0 4px #d4ee9740}.dots span{opacity:0;font-size:10px;background:#17201bc0;padding:5px 9px}.dots a:hover span,.dots a:focus-visible span{opacity:1}.progress{position:fixed;bottom:0;left:0;width:100%;height:3px;z-index:40}.progress i{display:block;height:3px;background:var(--lime);width:0}.plans{padding:115px 9vw;background:var(--paper);color:var(--ink)}.plans em,.plans .eyebrow{color:#697b4e}.heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:65px;gap:40px}.heading h2{font-size:clamp(50px,5.8vw,85px)}.heading>p{font-size:13px;line-height:1.9;color:#6a7366}.plan-layout{display:grid;grid-template-columns:260px 1fr;gap:60px}.tabs{display:grid}.tabs button{text-align:left;display:flex;gap:20px;align-items:center;border:0;border-bottom:1px solid #17201b30;padding:24px 0;background:none;font-size:13px}.tabs button small{opacity:.5;font-size:9px}.tabs button span{margin-left:auto}.tabs [aria-selected=true]{color:#647749;font-weight:700}aside>p{font-size:12px;line-height:1.8;margin:35px 0;color:#747b6b}.plans .outline{border-color:#919986;background:none}.paper{background:white;padding:30px 30px 55px;position:relative}.paper img{width:100%;height:560px;object-fit:contain;display:block}.paper>small{position:absolute;bottom:23px;font-size:9px;letter-spacing:2px;color:#6c7565}.pano{background:#576051}.pano canvas,.pano>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:grab;touch-action:pan-y}.pano canvas.dragging{cursor:grabbing}.pano-shade{position:absolute;inset:0;background:linear-gradient(0deg,#17201bbd,transparent 65%);pointer-events:none}.pano .copy{pointer-events:none;bottom:130px}.badge{position:absolute;right:9vw;top:130px;border:1px solid #fff9;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:14px;pointer-events:none}.pano-controls{position:absolute;bottom:42px;left:9vw;right:9vw;display:flex;align-items:center;justify-content:space-between}.pano-controls>span{font-size:9px;letter-spacing:2px}.pano-controls>div{border:1px solid #fff7;border-radius:30px;overflow:hidden;background:#17201b50;backdrop-filter:blur(8px)}.pano-controls button{width:45px;height:44px;background:none;border:0;font-size:20px}.pano-controls button:hover{background:#fff2}footer{padding:110px 9vw 35px}footer h2{font-size:clamp(36px,5vw,75px);margin-bottom:45px}footer>div{margin-top:100px;border-top:1px solid #fff3;padding-top:30px;display:flex;align-items:center;justify-content:space-between}footer b{font:800 30px Manrope;letter-spacing:-1.5px}footer small{font-size:8px;letter-spacing:2px;color:#a4afa1}dialog{border:0;border-radius:4px;width:94vw;max-width:1400px;height:90svh;padding:0;background:#eeeee6;color:var(--ink)}dialog::backdrop{background:#17201be0;backdrop-filter:blur(8px)}dialog>div{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;font-size:13px}dialog button{background:none;border:0;padding:12px}dialog>section{height:calc(100% - 100px);overflow:auto;background:white;text-align:center}dialog img{height:100%;max-width:100%;object-fit:contain;cursor:zoom-in}dialog img.zoomed{width:150%;height:auto;max-width:none;cursor:zoom-out}dialog>p{text-align:center;font-size:10px}
@media(max-width:800px){header{padding:23px 6vw}.brand{font-size:27px}.brand small{font-size:6px}.topline{left:7vw;top:115px}.topline span{display:none}.hero .copy{top:28%;left:7vw}h1{font-size:clamp(54px,12vw,85px)}.copy{left:7vw;bottom:24%}h2{font-size:clamp(44px,10vw,74px)}.copy>p:last-child{font-size:13px}.begin{left:7vw}.eyebrow{font-size:8px;letter-spacing:2px}.film{height:220vh}.stage-bottom{left:7vw;right:12vw;gap:15px;font-size:7px;bottom:30px}.play{right:7vw;bottom:80px}.dots{right:11px}.dots span{display:none}.plans{padding:85px 7vw}.heading{display:block;margin-bottom:35px}.heading h2{font-size:56px}.heading>p{margin-top:30px}.plan-layout{grid-template-columns:1fr;gap:25px}.tabs{display:flex;gap:15px}.tabs button{font-size:11px;flex:1;padding:15px 0}.tabs small,.tabs span,aside>p{display:none}.plans .outline{margin-top:20px}.paper{padding:20px 15px 55px}.paper img{height:430px}.pano .copy{left:7vw;bottom:140px}.pano-controls{left:7vw;right:7vw}.pano-controls>span{font-size:7px;letter-spacing:1px}.badge{right:7vw;top:120px;width:50px;height:50px}footer{padding:85px 7vw 30px}footer>div{gap:20px}footer small{font-size:6px;text-align:right;line-height:1.8}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.film{height:115vh}}



/* Horizontal full-screen journey. Wheel input advances a complete chapter. */
html,body{height:100%;overflow:hidden;scroll-behavior:auto;overscroll-behavior:none}
main{display:flex;width:100%;height:100svh;transform:translate3d(0,0,0);transition:transform .42s cubic-bezier(.22,.8,.25,1);will-change:transform}
main>.slide{flex:0 0 100vw;width:100vw;height:100svh;min-height:0;position:relative;overflow:hidden}
.film{height:100svh}.stage{height:100%;min-height:0;position:relative}
.hero,.pano{min-height:0}.hero .copy{top:24%}
.begin{bottom:100px}.stage-bottom{bottom:102px}.play{bottom:145px}
.journey-controls{position:fixed;bottom:28px;left:9vw;right:9vw;z-index:22;display:flex;align-items:center;justify-content:space-between;gap:20px}
#journeyStatus{font-size:10px;letter-spacing:.5px;color:#f2f4e9;background:#17201b65;padding:9px 12px;border-radius:20px;backdrop-filter:blur(8px)}
.journey-arrows{display:flex;gap:9px}.journey-arrows button{width:42px;height:42px;border:1px solid #fff7;border-radius:50%;background:#17201b65;backdrop-filter:blur(8px);font-size:19px}
button:disabled{cursor:default;opacity:.4}.video-locked .brand,.video-locked .dots{cursor:default}
.dots{top:auto;bottom:43px;left:50%;right:auto;transform:translateX(-50%);display:flex;gap:22px}
.dots a{position:relative}.dots span{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);white-space:nowrap}.dots a[aria-disabled=true]{opacity:.45}
.plans{padding:110px 9vw 115px;display:flex;flex-direction:column}.plans .heading{margin-bottom:24px;flex:none}.plans .heading h2{font-size:clamp(40px,4.8vw,70px)}.plans .heading .eyebrow{margin-bottom:16px}
.plan-layout{flex:1;min-height:0;gap:40px}.paper{min-height:0;padding:15px 25px 45px;height:100%}.paper img{height:100%;min-height:0}
.pano-controls{bottom:100px}.pano .copy{bottom:185px}
main>footer{padding:140px 9vw 120px;display:flex;flex-direction:column;justify-content:center}
footer>div{margin-top:60px}.plans~footer{}
@media(max-width:800px){
 .journey-controls{left:7vw;right:7vw;bottom:21px;align-items:center}
 #journeyStatus{font-size:8px;max-width:230px;padding:8px 10px;line-height:1.6}
 .journey-arrows button{height:36px;width:36px}
 .dots{bottom:80px;gap:20px}.hero .copy{top:26%}
 .begin{bottom:140px}.stage-bottom{bottom:145px}.play{bottom:185px}
 .copy{bottom:29%}.pano .copy{bottom:230px}.pano-controls{bottom:145px}
 .plans{padding:100px 7vw 145px}.plans .heading h2{font-size:40px}.plans .heading>p{font-size:11px;margin:10px 0 0}.plans .heading .eyebrow{margin-bottom:10px}.plans .heading{margin-bottom:12px}
 .plan-layout{display:flex;flex-direction:column;gap:12px}.plans aside{flex:none}.tabs button{padding:10px 0}.plans .outline{margin-top:10px;font-size:10px;padding:8px 13px}.paper{flex:1;min-height:0;padding:10px 12px 32px}.paper img{height:100%;min-height:0}.paper>small{bottom:13px;font-size:8px}
 main>footer{padding:110px 7vw 140px}footer>div{margin-top:50px}footer h2{font-size:38px}
}
@media(max-height:650px) and (min-width:801px){h1{font-size:65px}.hero .copy{top:24%}.hero .eyebrow{margin-bottom:16px}.copy{bottom:30%}h2{font-size:58px}.plans .heading h2{font-size:40px}.plans{padding-top:100px}.pano .copy h2{font-size:55px}footer>div{margin-top:25px}}
@media(prefers-reduced-motion:reduce){main{transition:none}.film{height:100svh}}


/* Depth transitions and the chapter timeline. */
:root{--chapter-accent:#bf9870;--dock-height:76px}
main{display:block;position:relative;height:calc(100svh - var(--dock-height));transform:none!important;transition:none;will-change:auto;isolation:isolate}
main>.slide{position:absolute;inset:0;width:100%;height:100%;min-height:0;visibility:hidden;opacity:0;pointer-events:none;transform:none;transform-origin:55% 48%;z-index:0}
main>.slide.is-current{visibility:visible;opacity:1;pointer-events:auto;z-index:2}
main>.slide.is-exiting{visibility:visible;opacity:1;pointer-events:none;z-index:1}
.hero,.pano,.film,.stage{height:100%;min-height:0}
.chapter-blocks{position:fixed;bottom:0;left:0;right:0;height:var(--dock-height);display:grid;grid-template-columns:repeat(7,minmax(0,1fr));z-index:35;background:#151a16;border-top:1px solid #ffffff17}
.chapter-blocks a{position:relative;display:flex;align-items:center;padding:0 24px;border-right:1px solid #ffffff0d;background:#151a16;color:#a7aaa0;min-width:0;transition:background .25s,color .25s}
.chapter-blocks a:last-child{border-right:0}
.chapter-blocks a.active{background:var(--chapter-accent);color:#272b24}
.chapter-blocks a:hover:not(.active):not([aria-disabled=true]){background:#262e26;color:#eee}
.chapter-blocks a[aria-disabled=true]{cursor:default}
.chapter-label{display:flex;align-items:center;gap:12px;font-size:11px;white-space:nowrap}
.chapter-label small{font-size:9px;opacity:.55}
.chapter-label b{font-size:8px;line-height:1;font-weight:400;border:1px solid currentColor;padding:3px;opacity:.65}
.chapter-meter{position:absolute;top:-2px;left:0;right:0;height:3px;overflow:hidden;background:transparent}
.chapter-meter i{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(var(--chapter-progress,0));background:#f7d2a1;opacity:0}
.chapter-blocks .active .chapter-meter i{opacity:1}
.chapter-blocks a:focus-visible{outline:2px solid #f7d2a1;outline-offset:-5px}
.progress,.stage-bottom{display:none}
.journey-controls{bottom:calc(var(--dock-height) + 16px);left:8vw;right:5vw}
#journeyStatus{background:none;backdrop-filter:none;font-size:9px;letter-spacing:.8px;color:#e6eadf;padding:0;max-width:none}
.journey-arrows button{width:32px;height:32px;font-size:16px;background:#17201b40}
.begin{bottom:80px}.film .copy{bottom:21%}.play{bottom:72px}
.pano .copy{bottom:145px}.pano-controls{bottom:70px}
.plans{padding-bottom:70px}
body[data-slide="4"] #journeyStatus{color:#727c67}
@media(max-width:1000px){.chapter-blocks a{padding:0 13px}.chapter-label{font-size:10px;gap:8px}.chapter-label b{display:none}}
@media(max-width:800px){
 :root{--dock-height:94px}
 .chapter-blocks{grid-template-columns:repeat(7,minmax(0,1fr));height:var(--dock-height)}
 .chapter-blocks a{padding:12px 2px;justify-content:center;align-items:center}
 .chapter-label{flex-direction:column;gap:9px;font-size:8px;white-space:normal;text-align:center;line-height:1.2}
 .chapter-label small{font-size:8px}
 .journey-controls{bottom:calc(var(--dock-height) + 16px);left:7vw;right:7vw}
 #journeyStatus{font-size:7px;max-width:225px}
 .journey-arrows button{height:30px;width:30px}
 .hero .copy{top:27%}.begin{bottom:88px}
 .film .copy{bottom:26%}.play{bottom:76px}
 .pano .copy{bottom:170px}.pano-controls{bottom:75px}
 .plans{padding-top:100px;padding-bottom:66px}
 main>footer{padding-bottom:90px}
}
@media(max-height:650px) and (min-width:801px){main>.hero .copy{top:23%}.hero h1{font-size:58px}.hero .copy>p:last-child{margin-top:16px}.film .copy{bottom:23%}.plans{padding-top:95px}.plans .heading{margin-bottom:15px}.pano .copy{bottom:115px}.pano .copy h2{font-size:46px}}


/* Habitéa: yellow #FFC00C, black, white and strong geometric headings. */
:root{--ink:#000;--paper:#fff;--lime:#ffc00c;--chapter-accent:#ffc00c}
body{background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif}
h1,h2,#menu a{font-family:Arial,Helvetica,sans-serif;font-weight:800;letter-spacing:-.045em}
header,header.solid{height:86px;background:#fff;padding:14px 4vw;color:#000;backdrop-filter:none;border-bottom:1px solid #0000000d}
.brand{display:block;line-height:1;letter-spacing:0}.brand img{display:block;width:190px;height:auto}
header button{border:1px solid #000;background:#000;color:#ffc00c;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;border-radius:0}
#menu{background:#fff;color:#000}.header button:hover,#menu a:hover{color:#ffc00c}
#menu small{color:#a87d00}#menu a{font-size:clamp(27px,4.5vw,62px);text-transform:uppercase}
h1{font-size:clamp(46px,4.8vw,76px);line-height:1.16;text-transform:uppercase;letter-spacing:-.04em}
.hero h1 span,.hero h1 em{display:inline-block;background:#ffc00c;color:#000;padding:4px 12px;font-style:normal}
.hero h1 em{margin-top:7px}
h2{font-size:clamp(45px,5.4vw,82px);line-height:1.05}
.copy>p:last-child{font-size:14px;line-height:1.8;max-width:650px}
.eyebrow{letter-spacing:2px;font-weight:700;color:#ffc00c}
.topline{top:117px;font-size:9px;letter-spacing:1.3px}
.shade{background:linear-gradient(90deg,#000000ad,transparent 87%),linear-gradient(0deg,#00000080,transparent 50%)}
.hero .copy{top:28%}.film .copy{bottom:24%}
.begin b{border-radius:0;border-color:#ffc00c;background:#ffc00c;color:#000}
.begin{font-weight:700}.outline,.play{border-radius:0}
button:focus-visible,a:focus-visible,canvas:focus-visible{outline-color:#ffc00c}
.chapter-blocks{background:#000;border-top-color:#ffffff20}
.chapter-blocks a{background:#000;color:#d3d3d3;border-right-color:#ffffff18}
.chapter-blocks a.active{background:#ffc00c;color:#000}
.chapter-blocks a:hover:not(.active):not([aria-disabled=true]){background:#222;color:#fff}
.chapter-meter i{background:#fff}
.chapter-label{font-weight:700;font-size:11px;letter-spacing:.2px}
.chapter-blocks a:focus-visible{outline-color:#fff}
.plans{background:#fff;color:#000}.plans em,.plans .eyebrow{color:#000}
.plans .eyebrow{display:inline-block;padding:6px 9px;background:#ffc00c}
.plans .heading h2{font-weight:800}.plans .heading>p{color:#444}
.paper{background:#f3f3f3}.paper img{background:#fff}
.tabs [aria-selected=true]{color:#000;border-bottom:3px solid #ffc00c}
.tabs button{font-weight:700}
.plans .outline{border-color:#000;background:#000;color:#ffc00c}
.pano canvas{touch-action:none}.pano .copy{max-width:70%;bottom:155px}
.pano-shade{background:linear-gradient(0deg,#000000a0,transparent 70%);pointer-events:none}
.pano-controls>div{border-radius:0;border-color:#ffc00c;background:#00000080}
.pano-controls button{color:#ffc00c}.badge{border-radius:0;color:#ffc00c;border-color:#ffc00c}
.play{border-color:#ffc00c;color:#ffc00c;background:#00000070}
.journey-arrows button{border-radius:0;border-color:#ffc00c;color:#ffc00c;background:#00000060}
body[data-slide="4"] #journeyStatus{color:#555}
main>footer{background:#fff;color:#000}
footer em{color:#000}footer .eyebrow{color:#000;background:#ffc00c;padding:8px 10px;align-self:flex-start}
footer>div{border-top-color:#00000025}footer .footer-logo{width:190px;height:auto}
footer small{color:#555}
footer .contact-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin:0;padding:0;border:0}
.contact-link{background:#000;color:#ffc00c;padding:15px 21px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
footer .outline{color:#000;border-color:#000;background:none}
.restart{font-size:11px;text-decoration:underline}
main>footer h2{font-size:clamp(42px,5vw,70px);margin-bottom:35px}
@media(max-width:800px){
 header,header.solid{height:78px;padding:15px 6vw}.brand img{width:155px}
 header button{font-size:9px;padding:11px 13px}
 h1{font-size:clamp(31px,8.3vw,49px);letter-spacing:-.05em}
 .hero h1 span,.hero h1 em{padding:5px 8px}
 .hero .copy{top:29%;max-width:88vw}
 .topline{top:100px;left:7vw;font-size:8px}
 .copy>p:last-child{font-size:12px;line-height:1.8}
 h2{font-size:clamp(36px,9.4vw,54px)}
 .film .copy{bottom:28%;max-width:85vw}
 .chapter-label{font-size:8px;letter-spacing:0;gap:9px}
 .chapter-label small{font-weight:400}
 .plans .heading h2{font-size:36px}
 .pano .copy{max-width:80%;bottom:180px}
 .pano .copy h2{font-size:40px}
 footer .contact-actions{gap:12px}
 .contact-link{font-size:10px;padding:12px 15px}
 footer .outline{font-size:10px;padding:12px 15px}
 .restart{font-size:10px}
 footer .footer-logo{width:150px}
 footer>div{margin-top:35px}
 main>footer h2{font-size:40px}
}
@media(max-height:650px) and (min-width:801px){.hero h1{font-size:45px}.hero .copy{top:29%}h2{font-size:52px}.copy>p:last-child{font-size:12px}.film .copy{bottom:26%}}


/* Six chapters; the welcome view uses the supplied Alix & Perrine rendering. */
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.chapter-blocks{grid-template-columns:repeat(6,minmax(0,1fr))}


/* Transparent header lets the architecture remain visible up to the top edge. */
header,header.solid{background:transparent;border:0;backdrop-filter:none;color:#fff}
.brand img{filter:brightness(0) invert(1) drop-shadow(0 1px 4px #00000060)}
header button{background:#00000065;border-color:#ffc00c;color:#ffc00c;backdrop-filter:blur(5px)}
body.menu-open .brand img,body[data-slide="5"] .brand img{filter:none}
body.menu-open header,body[data-slide="5"] header{color:#000}