@font-face{font-family:"TLO Sans";src:url(../fonts/tlo-sans.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"TLO Mono";src:url(../fonts/tlo-mono.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
:root{--lbl:clamp(10.5px,.22vw + 9.6px,13.5px);--amber:#ffb561;--ink:#0d0b0a;--stone:#b9a78c;--paper:#f4eadb;--dim:rgba(185,167,140,.5);
  --sans:"TLO Sans","Avenir Next","Helvetica Neue",system-ui,sans-serif;--mono:"TLO Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --e:cubic-bezier(.2,.7,.2,1);--st:env(safe-area-inset-top,0px);--sr:env(safe-area-inset-right,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--ink);overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%}
body{position:fixed;inset:0;color:var(--paper);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:transparent}
button{font:inherit;color:inherit;background:none;border:0;border-radius:0;-webkit-appearance:none;appearance:none;touch-action:manipulation}
button:focus{outline:none}
button:focus-visible{outline:1px solid var(--amber);outline-offset:2px}
#stage{position:absolute;left:0;top:0;width:100%;height:100%;height:100dvh;overflow:hidden;touch-action:none;contain:strict}
#gl,.fb{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.fb{object-fit:cover;opacity:0}
#ov,#hud,.hsl{position:absolute;inset:0;pointer-events:none}

/* ---------- pièces de texte ancrées dans l'image ---------- */
.pc{position:absolute;left:0;top:0;will-change:transform;opacity:0;transition:opacity .6s var(--e)}
.pc.on{opacity:1}
.pc.off{opacity:0;transition-duration:.45s}
.pc>.in{position:absolute;transform:translate(-50%,-50%);width:max-content;max-width:min(88vw,760px);text-align:center}
.pc.a-l>.in{transform:translate(0,-50%);text-align:left}
.pc.a-r>.in{transform:translate(-100%,-50%);text-align:right}
.p-line>.in::before,.p-big>.in::before,.p-fin>.in::before,.p-title>.in::before,.p-steps>.in::before,.p-smap>.in::before{content:"";position:absolute;z-index:-1;inset:-46% -22%;background:radial-gradient(closest-side,rgba(13,11,10,.5),rgba(13,11,10,.22) 55%,transparent)}
.l{display:block}
.w,.ch{display:inline-block;opacity:0;transform:translateY(.4em);filter:blur(7px);will-change:transform,opacity,filter}
.sp{display:inline-block;width:.34em}
.on .w{animation:rise 1s var(--e) both;animation-delay:calc(var(--i)*75ms)}
.on .ch{animation:rise 1.1s var(--e) both;animation-delay:calc(var(--i)*48ms)}
@keyframes rise{to{opacity:1;transform:none;filter:blur(0)}}

.ln{font-size:clamp(22px,1.5vw + 16px,36px);line-height:1.32;font-weight:300;letter-spacing:.012em;text-shadow:0 1px 22px rgba(13,11,10,.75)}
.ln.big{font-size:clamp(27px,2.6vw + 17px,56px);font-weight:200;letter-spacing:.02em}
.ln.soft{font-size:clamp(19px,1vw + 15px,26px);color:var(--stone);font-weight:300}

.tag{display:inline-flex;align-items:center;gap:13px;font:300 var(--lbl)/1 var(--mono);letter-spacing:.36em;text-transform:uppercase;color:var(--amber);margin-bottom:18px;white-space:nowrap}
.tag i,.a-c .tag::after{content:"";width:26px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--e) .15s}
.a-c .tag::after{transform-origin:right}
.a-c .tag span{padding-left:.36em}
.on .tag i,.on.a-c .tag::after{transform:scaleX(1)}
.tag span{opacity:0;transition:opacity .9s .35s}
.on .tag span{opacity:1}
.p-tag .tag{margin:0}

/* titre */
.ttl{display:grid;justify-items:center}
.ttl h1{font-weight:100;font-size:clamp(92px,25vw,220px);line-height:.92;letter-spacing:.2em;margin-right:-.2em;color:var(--amber);text-shadow:0 0 60px rgba(255,181,97,.28)}
.ttl h1 .ch{animation-duration:1.8s;animation-delay:calc(var(--i)*170ms)}
.ttl .hr{display:block;width:1px;height:clamp(34px,6vh,56px);margin:clamp(14px,2.4vh,22px) 0;background:linear-gradient(var(--amber),rgba(255,181,97,0));transform:scaleY(0);transform-origin:top;transition:transform 1.3s var(--e) .8s}
.on .ttl .hr{transform:scaleY(1)}
.ttl .sub{font-weight:300;font-size:clamp(12px,.5vw + 10.5px,17px);letter-spacing:.58em;margin-right:-.58em;white-space:nowrap}
.ttl .sub .ch{animation-delay:calc(1.1s + var(--i)*34ms)}
.ttl .city{font:300 var(--lbl)/1 var(--mono);letter-spacing:.6em;margin:16px -.6em 0 0;color:var(--stone)}
.ttl .city .ch{animation-delay:calc(1.9s + var(--i)*60ms)}

/* 24 / 7 */
.bigt{font-weight:100;font-size:clamp(88px,23vw,230px);line-height:1;letter-spacing:.04em;white-space:nowrap;color:var(--paper);text-shadow:0 0 70px rgba(13,11,10,.6)}
.bigt .ch{animation-duration:1.5s;animation-delay:calc(var(--i)*130ms)}

/* bulles */
.p-chip{transition:opacity 1.1s var(--e)}
.p-chip>.in{transform:translate(-50%,calc(-50% + 18px));transition:transform 1.6s var(--e);max-width:none}
.p-chip.on>.in{transform:translate(-50%,-50%)}
.chip{font-size:clamp(14.5px,.5vw + 12.5px,18px);line-height:1.36;font-weight:300;padding:11px 16px 12px;width:max-content;max-width:min(68vw,320px);text-align:left;background:rgba(13,11,10,.5);border:1px solid rgba(255,181,97,.3);border-radius:15px;-webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.chip.tail-l{border-bottom-left-radius:3px}
.chip.tail-r{border-bottom-right-radius:3px}
.p-chip.on .chip{animation:float 7s ease-in-out 1.6s infinite alternate}
@keyframes float{to{transform:translateY(-6px)}}

/* build → produce → distribute → measure → iterate */
.steps{list-style:none;display:flex;position:relative}
.steps li::before{content:"";position:absolute;left:0;right:0;top:3px;height:1px;background:var(--dim);transform:scaleX(0);transform-origin:left;transition:transform .7s linear calc(var(--i)*.45s + .3s)}
.steps li:first-child::before{left:50%}
.steps li:last-child::before{right:50%}
.on .steps li::before{transform:scaleX(1)}
.steps li{position:relative;flex:1 0 auto;padding:0 clamp(9px,1.1vw,18px);display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--dim);opacity:0;transition:opacity .9s calc(var(--i)*180ms + .4s)}
.on .steps li{opacity:1;animation:lit calc(var(--n)*var(--step)) calc(var(--i)*var(--step) + 1.6s) infinite both}
.steps b{position:relative;display:block;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px var(--ink)}
.steps span{font-weight:300;font-size:clamp(12px,.55vw + 10px,19px);letter-spacing:.34em;margin-right:-.34em}
@keyframes lit{0%{color:var(--dim);text-shadow:none}4%,16%{color:var(--amber);text-shadow:0 0 22px rgba(255,181,97,.55)}24%,100%{color:var(--dim);text-shadow:none}}
@media (orientation:portrait){
  .p-steps>.in{text-align:left}
  .p-steps .tag::after{display:none}
  .steps{flex-direction:column;gap:30px;padding-left:2px}
  .steps li::before{display:none}
  .steps::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--dim);transform:scaleY(0);transform-origin:top;transition:transform 2s var(--e) .3s}
  .on .steps::before{transform:scaleY(1)}
  .steps li{flex-direction:row;gap:22px;padding:0}
  .steps span{font-size:17px;letter-spacing:.3em}
}

/* plan vivant des stations */
.smap{width:min(64vw,max(260px,21vw))}
.smap svg{display:block;width:100%;overflow:visible}
.smap .heart{fill:none;stroke:rgba(185,167,140,.38);stroke-width:.6}
.smap .obj{fill:var(--amber)}
.smap .d{fill:rgba(185,167,140,.3);opacity:0;transition:opacity .7s calc(var(--r)*.9s)}
.on .smap .d{opacity:1}
.on .smap .d.busy{fill:rgba(244,234,219,.85);animation:tw calc(3s + var(--r)*4s) ease-in-out calc(var(--r)*-5s) infinite alternate}
.on .smap .d:not(.busy):not(.pick){animation:scan .5s calc(.8s + (8 - var(--k))*.14s) both}
.on .smap .pick{animation:pick .7s 2s both}
.smap .sel{fill:none;stroke:var(--amber);stroke-width:.7;transform-box:fill-box;transform-origin:center;opacity:0}
.on .smap .sel{animation:sel 1.1s var(--e) 2s both,selb 2.6s ease-in-out 3.2s infinite alternate}
.smap .lead{fill:none;stroke:var(--amber);stroke-width:.6;stroke-dasharray:1;stroke-dashoffset:1}
.on .smap .lead{animation:draw .9s var(--e) 2.5s both}
.smap .cap{font:300 var(--lbl)/1 var(--mono);letter-spacing:.2em;color:var(--amber);margin-top:10px;white-space:nowrap;clip-path:inset(0 100% 0 0)}
.on .smap .cap{animation:wipe 1s steps(30) 3s both}
@keyframes tw{from{opacity:.4}to{opacity:1}}
@keyframes scan{50%{fill:rgba(255,181,97,.95)}}
@keyframes pick{to{fill:var(--amber)}}
@keyframes sel{from{transform:scale(2.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes selb{to{transform:scale(1.28);opacity:.55}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}

/* la promesse */
.fin{display:grid;justify-items:center;width:min(88vw,1100px)}
.fin .f1{grid-area:1/1;align-self:center;transition:opacity 1s,filter 1s}
.s2 .f1{opacity:0;filter:blur(8px)}
.fin .f2{grid-area:1/1;align-self:center;font-weight:200;font-size:clamp(30px,2.7vw + 6px,50px);line-height:1.42;letter-spacing:.24em;margin-right:-.24em}
.fin .f2 .ch{animation:none}
.s2 .f2 .ch{animation:rise 1.2s var(--e) both;animation-delay:calc(.7s + var(--i)*42ms)}
.fin .f3{font:300 var(--lbl)/1 var(--mono);letter-spacing:.4em;margin:30px -.4em 0 0;color:var(--stone);opacity:0;transition:opacity 1.4s;white-space:nowrap}
.s3 .f3{opacity:1}
.again{pointer-events:auto;display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:16px 18px;font:300 var(--lbl)/1 var(--mono);letter-spacing:.36em;text-transform:uppercase;color:var(--amber);cursor:pointer;opacity:0;visibility:hidden;transition:opacity 1.4s .6s,visibility 0s 0s}
.again i{width:22px;height:1px;background:currentColor}
.s3 .again{opacity:1;visibility:visible}

/* ---------- points d'intérêt ---------- */
.hs{position:absolute;left:0;top:0;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none;cursor:pointer;color:var(--amber);opacity:0;transition:opacity .8s var(--e);will-change:transform}
.hs.on{opacity:1;pointer-events:auto}
.hs.off{opacity:0;pointer-events:none;transition-duration:.25s}
.rg{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:1px solid var(--amber);background:rgba(13,11,10,.42);box-shadow:0 0 0 6px rgba(13,11,10,.2),0 0 26px 12px rgba(13,11,10,.34),inset 0 0 9px rgba(255,181,97,.25);animation:breathe 3.4s ease-in-out infinite}
.rg::before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber)}
.rg::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(255,181,97,.65);animation:echo 3.4s var(--e) infinite}
@keyframes breathe{50%{transform:scale(1.16)}}
@keyframes echo{0%{transform:scale(1);opacity:.7}75%,100%{transform:scale(2.4);opacity:0}}
.rg svg{position:absolute;left:-10px;top:-10px;width:44px;height:44px;transform:rotate(-90deg);opacity:0;transition:opacity .3s}
.pg{fill:none;stroke:var(--amber);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - max(var(--p,0),.14));transition:stroke-dashoffset .25s linear}
.hs.load .rg svg{opacity:1;animation:spin 1.5s linear infinite}
@keyframes spin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
.hs.load .rg{animation-duration:1s}
.hs:active .rg{transform:scale(.86)}
.lb{position:absolute;left:50%;top:calc(50% + 21px);transform:translateX(-50%);font:300 var(--lbl)/1 var(--mono);letter-spacing:.32em;text-transform:uppercase;white-space:nowrap;color:var(--paper);padding-left:.32em;text-shadow:0 0 12px rgba(13,11,10,.95),0 0 4px rgba(13,11,10,.9)}
.lb::before{content:"";display:block;width:1px;height:12px;margin:0 auto 7px;background:linear-gradient(var(--amber),rgba(255,181,97,0))}
@media (hover:hover) and (pointer:fine){
  .lb{opacity:0;transform:translate(-50%,-5px);transition:opacity .45s,transform .45s var(--e)}
  .hs.near .lb,.hs.show .lb,.hs:hover .lb,.hs:focus-visible .lb{opacity:1;transform:translateX(-50%)}
}

/* ---------- retour, son, plan ---------- */
.ui{position:absolute;pointer-events:auto;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .7s var(--e),visibility 0s .7s;color:var(--paper)}
.back{left:calc(6px + var(--sl));top:calc(6px + var(--st));width:52px;height:52px;display:grid;place-items:center}
.back svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--e)}
.back:hover svg{transform:translateX(-3px)}
.entered .back.show{opacity:.9;visibility:visible;transition-delay:0s}
.snd{right:calc(6px + var(--sr));top:calc(6px + var(--st));width:52px;height:52px;display:grid;place-items:center}
.snd span{display:flex;gap:3px;align-items:center;height:14px}
.snd i{display:block;width:1px;height:14px;background:currentColor;transform:scaleY(.2);transition:transform .5s var(--e)}
.snd.on i{animation:bars 1s ease-in-out infinite alternate}
.snd.on i:nth-child(2){animation-delay:-.35s;animation-duration:.8s}
.snd.on i:nth-child(3){animation-delay:-.7s;animation-duration:1.25s}
.snd.on i:nth-child(4){animation-delay:-.15s;animation-duration:.9s}
@keyframes bars{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.entered .snd{opacity:.8;visibility:visible;transition-delay:0s}
.mini{left:calc(8px + var(--sl));bottom:calc(8px + var(--sb));width:46px;height:74px;padding:8px}
.mini svg{display:block;width:100%;height:100%;overflow:visible}
.entered .mini{opacity:.95;visibility:visible;transition-delay:0s}
.mini .e{stroke:rgba(185,167,140,.3);stroke-width:1.2}
.mini .e.seen{stroke:rgba(185,167,140,.75)}
.mini .n{fill:rgba(185,167,140,.38)}
.mini .n.seen{fill:var(--stone)}
.mini .n.cur{fill:var(--amber);filter:drop-shadow(0 0 3px var(--amber));animation:tw 1.6s ease-in-out infinite alternate}
.planopen .hsl,.planopen .back,.planopen .snd,.planopen .mini{opacity:0!important;pointer-events:none}
.plan{position:absolute;inset:0;display:grid;place-items:center;background:rgba(13,11,10,.74);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;visibility:hidden;transition:opacity .5s var(--e),visibility 0s .5s}
.plan.open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.sheet{width:min(92vw,78vh,560px);transform:scale(.94);transition:transform .7s var(--e)}
.plan.open .sheet{transform:none}
.plan svg{display:block;width:100%;overflow:visible}
.plan .e{stroke:rgba(185,167,140,.28);stroke-width:.3}
.plan .e.seen{stroke:rgba(185,167,140,.8)}
.plan g.n{cursor:pointer;outline:none}
.plan .hit{fill:transparent}
.plan .o{fill:var(--ink);stroke:rgba(185,167,140,.55);stroke-width:.3;transition:stroke .3s}
.plan .c{fill:transparent}
.plan .seen .c{fill:var(--stone)}
.plan .cur .c{fill:var(--amber)}
.plan .cur .o,.plan g.n:hover .o,.plan g.n:focus-visible .o{stroke:var(--amber)}
.plan text{font:300 3.2px var(--mono);letter-spacing:.95px;text-transform:uppercase;fill:var(--stone);dominant-baseline:central;transition:fill .3s}
.plan .cur text,.plan g.n:hover text{fill:var(--amber)}

/* secours : pas de JS / échec de chargement */
#still{position:absolute;inset:0;display:none;place-content:center;justify-items:center;text-align:center;gap:26px;font:300 11px/1.6 var(--mono);letter-spacing:.4em;text-transform:uppercase;color:var(--stone)}
#still b{font:100 clamp(64px,20vw,170px)/1 var(--sans);letter-spacing:.2em;margin-right:-.2em;color:var(--amber)}
.fail #still{display:grid}
.fail #stage{display:none}

@media (prefers-reduced-motion:reduce){
  .w,.ch{filter:none;transform:none}
  .rg,.rg::after,.p-chip.on .chip,.snd.on i,.mini .n.cur{animation:none}
  .on .steps li{animation-duration:calc(var(--n)*var(--step)*1.6)}
}