@import url('assets/fonts.css');
@import url('walk.css?v=parcours7');
:root{color-scheme:dark;font-family:'Atkinson Hyperlegible Next',Arial,sans-serif;color:#f4f2e9;background:#17201b;line-height:1.6;--opening:0;--open-shade:1;--ink:#f4f2e9;--olive:#ccd3ae;--night:#17201b;--stone:#d6d4c7}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;overflow-x:clip}h1,h2,p{margin:0}h1,h2{text-wrap:balance}p{text-wrap:pretty}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--olive);outline-offset:6px}::selection{background:var(--olive);color:var(--night)}
.brand{position:fixed;z-index:10;top:26px;left:clamp(24px,5.6vw,80px);font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:600;font-size:30px;line-height:1;letter-spacing:.03em;pointer-events:none;text-shadow:0 2px 12px #0008}
.entrance-scroll{height:370svh;position:relative}.entrance-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}.environment{position:absolute;inset:0;background:var(--night)}.environment img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);will-change:transform}.environment-shade{position:absolute;inset:0;background:linear-gradient(0deg,#0d171890,transparent 60%)}
.entry{position:absolute;inset:0}.stage-front{position:absolute;inset:0;transform-origin:50% 40%;will-change:transform,opacity}.curtain-box{position:absolute;inset:8% 7% 14%;overflow:hidden}.curtain{position:absolute;top:0;bottom:0;width:50.3%;background-image:url('assets/rideaux.png');background-size:200% 100%;filter:brightness(.82);will-change:transform;box-shadow:inset 0 30px 40px #0008}.curtain-left{left:0;background-position:left center;transform:translateX(calc(var(--opening) * -104%))}.curtain-right{right:0;background-position:right center;transform:translateX(calc(var(--opening) * 104%))}.curtain-box:after{content:'';position:absolute;inset:0;background:linear-gradient(#0005,transparent 25%,#0004);pointer-events:none;opacity:var(--open-shade)}.beam{position:absolute;left:4%;right:4%;top:6%;height:3%;background:linear-gradient(#34392f,#0d120f 35%,#30352d 80%,#090f0a);border-block:2px solid #333b31;box-shadow:0 8px 12px #0008;z-index:2}.truss{position:absolute;top:6%;bottom:13%;width:3%;border-inline:4px solid #353b30;background:repeating-linear-gradient(44deg,transparent 0,transparent 28px,#404437 29px,#151a14 33px,transparent 34px,transparent 56px);box-shadow:inset 0 0 14px #000,2px 0 12px #0009;z-index:2}.truss-left{left:4%}.truss-right{right:4%}.canopy{position:absolute;inset:0 0 auto;height:8%;background:linear-gradient(155deg,#2b332bcc,#131a14);z-index:2}.stage-floor{position:absolute;left:-10%;right:-10%;bottom:-1%;height:17%;background:repeating-linear-gradient(0deg,transparent,transparent 16px,#11170ecc 17px,#11170ecc 18px),linear-gradient(105deg,#453025,#8d5b37 48%,#2d261d);box-shadow:inset 0 10px 22px #000,0 -2px 3px #d39445;transform:perspective(500px) rotateX(28deg);transform-origin:bottom;z-index:3}.lamp{position:absolute;top:14%;width:20px;height:32px;border-radius:3px 3px 50% 50%;background:linear-gradient(#11180f 65%,#ffe5aa 68%,#fff2c4);box-shadow:0 16px 40px 8px #f7b26366;z-index:4}.lamp-left{left:5%;transform:rotate(-28deg)}.lamp-right{right:5%;transform:rotate(28deg)}
.entry-copy{position:absolute;left:50%;top:46%;width:min(590px,82%);transform:translate(-50%,-50%);text-align:center;text-shadow:0 2px 18px #0008}.entry-copy h1{font-size:clamp(32px,3.4vw,49px);font-weight:400;line-height:1.2;letter-spacing:-.03em}.entry-copy p{font-size:17px;line-height:1.65;margin-top:19px;color:#e2ddd2}.entry-cue{position:absolute;bottom:15%;left:0;right:0;text-align:center;font-size:12px;color:#eee5d4}.scroll-line{display:block;width:1px;height:29px;margin:14px auto 0;background:#eee5d477}
.choices{position:absolute;inset:0;opacity:0;visibility:hidden;background:#10201844}.choice-frame{position:absolute;left:50%;top:50%;width:min(100vw,160svh);aspect-ratio:1.6;transform:translate(-50%,-50%)}.choice-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.choice-frame:after{content:'';position:absolute;inset:72% 0 0;background:linear-gradient(transparent,#0e171a90);pointer-events:none}.choices h2{position:absolute;top:19%;left:10%;right:10%;text-align:center;font-size:clamp(22px,2vw,28px);font-weight:400;letter-spacing:-.02em;text-shadow:0 2px 12px #000b;z-index:1}.role-choice{position:absolute;top:38%;left:14%;width:22%;height:56%;border:0;background:none;padding:0;z-index:2}.role-choice:nth-of-type(2){left:39%}.role-choice:nth-of-type(3){left:64%}.choice-copy{position:absolute;top:70%;left:0;right:0;display:flex;align-items:center;flex-direction:column}.choice-name{font-size:clamp(14px,1.45vw,21px);font-weight:400;line-height:1.25;min-height:52px;text-shadow:0 2px 8px #000e}.choice-caption{font-size:clamp(11px,.95vw,14px);margin-top:7px;text-shadow:0 2px 8px #000e}.role-choice:hover .choice-name,.role-choice:focus-visible .choice-name{color:var(--olive);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.role-route{display:none;position:fixed;inset:0;z-index:6;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:var(--night);outline:none;scrollbar-color:#9da88b #17201b;scrollbar-width:thin;scroll-behavior:auto}.role-scroll{position:relative;height:620svh}.role-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}.story-scenes,.story-scene{position:absolute;inset:0}.story-scene{visibility:hidden;opacity:0;pointer-events:none}.story-scene:first-child{visibility:visible;opacity:1}.story-scene:nth-child(1){z-index:1}.story-scene:nth-child(2){z-index:2}.story-scene:nth-child(3){z-index:3}.story-scene:nth-child(4){z-index:4}.story-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}.story-shade{position:absolute;inset:0;background:linear-gradient(0deg,#0a171be6,transparent 70%),linear-gradient(90deg,#0a171a65,transparent 53%)}.story-copy{position:absolute;left:clamp(24px,5.6vw,80px);bottom:clamp(115px,11vh,140px);width:calc(100% - 48px);max-width:420px;text-shadow:0 1px 8px #0007;will-change:transform,opacity}.story-copy h2{font-size:clamp(26px,2.4vw,35px);font-weight:400;letter-spacing:-.025em;line-height:1.22;margin-bottom:19px;max-width:410px}.story-copy>p:not(.story-detail){font-size:16px;line-height:1.7;color:#f0f0e9}.story-detail{font-size:11px;line-height:1.7;color:#dde3cd;margin-top:23px}.return-button{position:fixed;top:24px;right:clamp(24px,5.6vw,80px);z-index:10;border:0;background:#142018d9;padding:10px 13px;font-size:13px;display:flex;align-items:center;gap:12px}.return-button:hover{background:#273729}.return-button span{font-size:19px;line-height:1}.story-footer{position:absolute;left:clamp(24px,5.6vw,80px);right:clamp(24px,5.6vw,80px);bottom:46px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:11px;color:#e0e2d5;text-shadow:0 1px 6px #000b}.story-progress{display:flex;gap:15px;align-items:center;white-space:nowrap;font-size:11px}.progress-track{display:block;width:90px;height:2px;background:#d1d7bb45}.progress-track>span{display:block;background:var(--olive);height:100%;width:100%;transform:scaleX(0);transform-origin:left}.project-note{position:fixed;z-index:10;left:clamp(24px,5.6vw,80px);bottom:15px;font-size:9px;color:#dbdbd0;pointer-events:none;text-shadow:0 1px 6px #0009}.noscript-message{position:fixed;inset:auto 15px 60px;padding:16px;background:var(--night);border:1px solid var(--olive);font-size:14px;z-index:20}
.story-visual{position:absolute;inset:0;pointer-events:none;--work:0}.work-note{position:absolute;top:24%;right:8%;width:245px;padding:26px;background:#ecece1;color:#25342c;box-shadow:3px 7px 8px #0004;transform:rotate(-4deg)}.note-label{font-size:11px;letter-spacing:.04em;margin-bottom:19px;color:#58604f}.work-note>p:not(.note-label){font-size:19px;line-height:1.35}.note-rule{display:block;width:32px;height:1px;background:#707d61;margin:20px 0}.work-note .note-small{font-size:13px!important;line-height:1.5!important}.poster-demo{position:absolute;top:22%;right:12%;width:260px;display:flex;flex-direction:column;align-items:center;gap:23px}.concert-poster{position:relative;width:190px;height:258px;background:#c3c9a9;color:#203c2b;padding:20px;box-shadow:4px 6px 8px #0006;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.poster-brand{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:16px;font-weight:600}.concert-poster p{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:44px;line-height:.98;letter-spacing:-.015em}.poster-detail{font-size:10px;line-height:1.5}.format-label{font-size:11px;color:#f5f4e7;text-shadow:0 1px 6px #000c}.publication-plan{position:absolute;top:23%;right:7%;width:290px;background:#e9eade;color:#25342b;padding:22px 25px;box-shadow:4px 6px 8px #0005;transform:rotate(2deg)}.demo-label{font-size:11px;margin-bottom:9px}.publication{padding:17px 0;border-top:1px solid #26352633}.publication span{font-size:10px;color:#51634b}.publication p{font-size:15px;line-height:1.45;margin-top:5px}.message-demo{position:absolute;right:8%;top:27%;width:290px}.public-question{background:#e8eadf;color:#243528;padding:16px 19px;width:fit-content;font-size:16px}.public-answer{margin:15px 0 0 22px;background:#cdd7b5;color:#203624;padding:20px;font-size:14px;line-height:1.5}.public-answer span{display:block;font-size:10px;margin-top:16px}.site-sign{position:absolute;top:33%;right:9%;width:270px;background:#e8e8db;color:#213c2b;padding:20px 25px;box-shadow:4px 6px 8px #0006}.site-sign>span{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:16px}.site-sign p{font-size:28px;line-height:1.4;margin-top:15px}.site-sign p span{float:right}.checklist-demo{position:absolute;top:25%;right:8%;width:285px;background:#eaebdf;color:#293927;padding:25px;box-shadow:4px 6px 8px #0006;transform:rotate(-2deg)}.checklist-demo>p{font-size:17px;margin-bottom:20px}.check-row{display:flex;gap:11px;align-items:center;font-size:14px;padding:12px 0;border-top:1px solid #25332626}.check-symbol{font-size:18px;color:#264b2d;display:inline-block}.route-demo{position:absolute;inset:0}.route-demo svg{width:100%;height:100%;overflow:visible}.route-line{fill:none;stroke:#eff3d2;stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 2px 3px #162218b3)}.route-demo circle{fill:#eff3d2;stroke:#263f23;stroke-width:3}.route-start,.route-end{position:absolute;padding:5px 10px;background:#223621dc;font-size:12px;white-space:nowrap}.route-start{left:67%;top:84%}.route-end{left:82%;top:29%}.closing-demo{position:absolute;right:8%;top:38%;max-width:330px;text-align:right;text-shadow:0 2px 12px #000b}.closing-demo p{font-size:24px;line-height:1.3}.closing-demo span{display:block;font-size:11px;margin-top:10px;color:#e0e7d1}
body[data-view=role] .role-route{display:block}body[data-view=role] .entrance-stage{visibility:hidden}body[data-view=role]{overflow-y:hidden}
@media(max-width:700px){.brand{font-size:26px;top:22px;left:22px}.curtain-box{inset:8% 2% 13%}.truss-left{left:1%}.truss-right{right:1%}.truss{width:3%;border-inline-width:2px}.beam{left:1%;right:1%}.lamp-left{left:2%}.lamp-right{right:2%}.lamp{width:12px;height:23px}.stage-floor{height:15%}.entry-copy h1{font-size:35px}.entry-copy p{font-size:15px}.choices{background:#102018b8}.choice-frame{width:100vw}.choices h2{top:-19%;font-size:24px;left:4%;right:4%}.choice-name{font-size:14px;min-height:36px}.choice-caption{font-size:10px;line-height:1.4;margin-top:7px}.choice-copy{top:76%}.role-choice{top:35%;height:65%}.choice-frame:after{inset:74% 0 0}.return-button{right:18px;top:18px;font-size:12px;padding:9px 11px;gap:8px}.story-copy{left:24px;bottom:112px;max-width:350px}.story-copy h2{font-size:26px;margin-bottom:15px;max-width:310px}.story-copy>p:not(.story-detail){font-size:14px;line-height:1.65}.story-detail{font-size:10px;margin-top:18px}.story-shade{background:linear-gradient(0deg,#0b181bf2,transparent 88%)}.story-footer{left:24px;right:24px;bottom:52px;gap:12px;font-size:10px;align-items:flex-end}.story-footer>p{max-width:210px;line-height:1.4}.story-progress{font-size:10px;gap:8px}.progress-track{width:45px}.project-note{left:24px;font-size:8px}.work-note{top:18%;right:7%;width:175px;padding:18px}.work-note>p:not(.note-label){font-size:15px}.note-label{font-size:10px;margin-bottom:12px}.note-rule{margin:13px 0}.work-note .note-small{font-size:11px!important}.poster-demo{top:16%;right:8%;width:175px;transform:scale(.72);transform-origin:top right}.publication-plan{top:15%;right:7%;width:215px;padding:17px 19px}.publication{padding:11px 0}.publication p{font-size:12px}.demo-label{font-size:10px}.message-demo{top:19%;right:7%;width:215px}.public-question{font-size:13px;padding:12px 14px}.public-answer{font-size:12px;padding:15px;margin-left:12px}.public-answer span{font-size:9px;margin-top:10px}.checklist-demo{top:18%;right:7%;width:210px;padding:18px}.checklist-demo>p{font-size:15px;margin-bottom:14px}.check-row{font-size:11px;padding:9px 0}.check-symbol{font-size:16px}.site-sign{top:25%;right:8%;width:195px;padding:15px 19px}.site-sign p{font-size:23px;margin-top:10px}.site-sign>span{font-size:13px}.closing-demo{top:25%;right:8%;max-width:240px}.closing-demo p{font-size:21px}.closing-demo span{font-size:10px}.route-start{left:65%;top:77%}.route-end{left:65%;top:31%}.route-start,.route-end{font-size:10px}}
@media(max-width:360px){.entry-copy h1{font-size:30px}.choice-name{font-size:12px;min-height:32px}.choice-caption{font-size:9px}.story-copy{left:20px;bottom:105px;width:calc(100% - 40px)}.story-copy h2{font-size:24px}.story-copy>p:not(.story-detail){font-size:13px}.story-footer{left:20px;right:20px}.story-footer>p{max-width:185px}.work-note{top:17%;width:153px;padding:15px}.work-note>p:not(.note-label){font-size:13px}.publication-plan{top:15%;width:190px}.publication{padding:8px 0}.message-demo{top:17%;width:190px}.checklist-demo{width:190px;top:17%}.poster-demo{transform:scale(.6);top:15%;right:7%}.closing-demo{top:25%;max-width:190px}.closing-demo p{font-size:19px}}
@media(max-height:550px) and (min-width:550px){.brand{top:18px;font-size:25px}.return-button{top:13px}.choices h2{font-size:21px;top:16%}.choice-name{font-size:15px;min-height:38px}.choice-caption{font-size:10px;margin-top:2px}.story-copy{bottom:85px;max-width:340px}.story-copy h2{font-size:25px;margin-bottom:10px}.story-copy>p:not(.story-detail){font-size:13px;line-height:1.5}.story-detail{font-size:10px;margin-top:12px}.story-footer{bottom:40px;font-size:10px}.work-note,.publication-plan,.message-demo,.checklist-demo{top:20%;right:7%;transform:scale(.76);transform-origin:top right}.poster-demo{top:18%;transform:scale(.65);transform-origin:top right}.site-sign{top:30%;transform:scale(.8);transform-origin:top right}.closing-demo{top:30%;max-width:240px}.closing-demo p{font-size:21px}}
.story-copy{z-index:3}.story-visual{z-index:2}.route-demo svg{position:absolute}.route-demo{transform-origin:center}
.role-name{position:fixed;z-index:8;left:clamp(24px,5.6vw,80px);top:64px;font-size:11px;color:#e6e8dd;text-shadow:0 1px 8px #000c;pointer-events:none}.story-footer>p:after{content:'↓';display:inline-block;margin-left:10px;font-size:16px;color:var(--olive)}.role-stage[data-finished=true] .story-footer>p:after{content:''}
@media(max-width:700px){.role-name{left:22px;top:57px;font-size:10px}.choices{background:#101b16}.choice-frame{width:100vw;height:min(177.78vw,100svh);aspect-ratio:auto}.choice-photo{object-fit:contain}.choices h2{top:31%;font-size:24px}.role-choice{top:49.5%;left:3%;width:27%;height:40%}.role-choice:nth-of-type(2){left:36.5%}.role-choice:nth-of-type(3){left:70%}.choice-copy{top:65%}.choice-frame:after{inset:71% 0 0}}
@media(max-width:360px){.publication-plan{padding:14px 17px;top:14%}.publication-plan .publication p{font-size:11px}.public-answer{font-size:11px;line-height:1.45}}
@media(max-width:700px){.route-demo svg{mask-image:linear-gradient(#000 0 55%,#0008 65%,transparent 83%)}.route-start{display:none}}
.world{position:absolute;inset:0;visibility:hidden;background:#121c16;transform-origin:50% 50%;will-change:transform}.world-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.world-shade{position:absolute;inset:0;background:linear-gradient(0deg,#08150b99,transparent 53%);pointer-events:none}
.entry{z-index:2;pointer-events:none}.surround{position:absolute;background:#101914}.surround-top{inset:0 0 auto;height:8%}.surround-left{left:0;top:8%;bottom:14%;width:7%}.surround-right{right:0;top:8%;bottom:14%;width:7%}.surround-bottom{inset:auto 0 0;height:14%}
.choices{inset:0;opacity:0;visibility:hidden;background:none}.choices h2{top:23%;font-size:clamp(22px,1.7vw,27px);font-weight:400}.role-choice{position:absolute;left:50%;top:50%;transform:translateX(-50%);border:0;background:none;padding:0;min-height:44px}.choice-copy{top:var(--label-offset,180px);left:0;right:0}.choice-name{font-size:18px;line-height:1.22;min-height:44px}.choice-caption{font-size:11px;line-height:1.5;margin-top:7px}.role-choice:hover .choice-name{text-decoration:none;color:#f8f7ed}.role-choice:hover .choice-caption{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.entry-copy h1{font-size:clamp(30px,3.1vw,43px)}.entry-cue{font-size:11px}.scroll-line{height:22px}
.role-route:before{content:'';position:fixed;z-index:7;inset:0 0 auto;height:104px;background:linear-gradient(#06110b90,transparent);pointer-events:none}.return-button{top:17px;right:clamp(24px,5.6vw,80px);min-height:44px;padding:10px 0;gap:10px;background:none!important;font-size:12px;font-weight:400;line-height:1.2;text-shadow:0 1px 7px #000a;transition:color .2s}.return-button svg{display:block;transition:transform .2s}.return-button span{font-size:12px;line-height:1.2}.return-button:hover svg{transform:translateX(-3px)}.return-button:focus-visible{outline:1px solid #e3e8d3;outline-offset:4px}.story-copy{max-width:340px;bottom:112px}.story-copy h2{font-size:clamp(25px,2.1vw,31px);margin-bottom:14px}.story-copy>p:not(.story-detail){font-size:15px;line-height:1.65}.story-detail{margin-top:16px}.story-footer{font-size:10px}.role-name{font-size:10px;top:61px}.closing-demo p{font-size:22px}
@media(max-width:900px){.choice-name{font-size:14px;min-height:36px}.choice-caption{font-size:11px}}
@media(max-width:700px){.surround-left{width:2%}.surround-right{width:2%}.surround-top{height:8%}.surround-bottom{height:13%;}.choices{background:none}.choices h2{top:29%;left:5%;right:5%;font-size:22px}.choice-name{font-size:13px;min-height:34px}.choice-caption{font-size:10px}.choice-copy{top:var(--label-offset,150px)}.return-button{top:12px;right:22px;padding:10px 0}.return-button span{font-size:11px}.return-button svg{width:18px;height:18px}.role-name{top:56px;font-size:9px}.story-copy{max-width:310px;bottom:108px}.story-copy h2{font-size:25px;max-width:280px}.story-copy>p:not(.story-detail){font-size:14px}.closing-demo p{font-size:20px}}
@media(max-width:360px){.choice-name{font-size:12px;min-height:32px}.choice-caption{font-size:9px}.story-copy{max-width:280px;left:20px;bottom:102px}.story-copy h2{font-size:23px}.story-copy>p:not(.story-detail){font-size:13px}}
@media(max-height:550px) and (min-width:550px){.choices h2{top:21%;font-size:22px}.choice-name{font-size:14px;min-height:34px}.choice-caption{font-size:10px}.return-button{top:7px}.role-name{top:49px}.story-copy{bottom:85px;max-width:330px}.story-copy h2{font-size:24px;margin-bottom:11px}.story-copy>p:not(.story-detail){font-size:13px}.closing-demo p{font-size:20px}}
.role-choice[data-loading=true] .choice-caption:after{content:'';display:block;width:34px;height:1px;background:#e2e6c8;margin:7px auto 0;animation:photo-loading .7s ease-in-out infinite alternate}@keyframes photo-loading{from{opacity:.3;transform:scaleX(.4)}to{opacity:1;transform:scaleX(1)}}
.return-button,.return-button:hover{background:transparent}.publication-plan{width:230px;padding:18px 20px}.publication-plan .publication{padding:10px 0}.publication-plan .publication p{font-size:13px}.publication-plan .demo-label{font-size:10px;margin-bottom:6px}
@media(max-width:700px){.publication-plan{width:205px;padding:15px 17px}.publication-plan .publication{padding:9px 0}.publication-plan .publication p{font-size:12px}}
@media(max-width:360px){.publication-plan{width:185px;padding:13px 15px}.publication-plan .publication{padding:8px 0}.publication-plan .publication p{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.world,.stage-front,.curtain,.story-photo,.story-copy{will-change:auto}}