:root{--night:#0e1828;--night2:#15233a;--gold:#e0ad4f;--gold2:#f3d08a;--tomato:#d4432e;--cream:#f5ecdc;--ink:#1a1410;--mute:#7b7064;
--disp:'Melodrama',Georgia,serif;--txt:'Hoover',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--night);color:var(--cream);font:400 17px/1.55 var(--txt);overflow-x:clip}
body::after{content:"";position:fixed;inset:0;background:url(../img/grain.png);opacity:.08;pointer-events:none;z-index:90}
img{display:block;max-width:100%}
a{color:inherit}
em{font-style:normal;color:var(--gold)}
h1,h2,h3{font-family:var(--disp);font-weight:500;letter-spacing:-.01em}
.kick{font:500 12px/1.2 var(--txt);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.bar{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;pointer-events:none}
.bar::before{content:"";position:absolute;inset:0 0 -26px 0;background:linear-gradient(180deg,rgba(14,24,40,.85),rgba(14,24,40,0));z-index:-1}
.bar a{pointer-events:auto;text-decoration:none}
.logo{font:500 24px/1 var(--disp)}
.bar-cta{font:500 13px/1 var(--txt);border-bottom:1px solid var(--gold);padding:8px 0;font-variant-numeric:tabular-nums}
.btn{display:inline-block;font:500 15px/1 var(--txt);text-decoration:none;padding:17px 22px;border-radius:999px}
.btn-or{background:var(--gold);color:#1d1306}
.btn-ghost,.btn-line{border:1px solid rgba(245,236,220,.4)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.scene{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.js .s-four{height:320vh}.js .s-pate{height:380vh}.js .s-carte{height:440vh}.js .s-mot{height:240vh}
html:not(.motion) .scene{height:auto!important}
html:not(.motion) .stage{position:relative;height:auto;min-height:100svh}

/* 1 four */
.sky{position:absolute;inset:0;background:radial-gradient(120% 60% at 50% 105%,#3a2a1c 0%,#1b2236 45%,var(--night) 75%)}
.sun{position:absolute;left:50%;top:50%;width:min(118vw,78vh);aspect-ratio:1;--t:0;
  transform:translate(-50%,calc(2% - var(--t)*52%)) scale(calc(.9 + var(--t)*.25))}
.disc{position:absolute;inset:13%;width:74%;height:74%;border-radius:50%;filter:drop-shadow(0 40px 70px rgba(0,0,0,.6));transform:rotate(calc(var(--t)*-200deg))}
.rays{position:absolute;inset:-10%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(224,173,79,.22) 0 1.5deg,transparent 1.5deg 9deg);
  -webkit-mask:radial-gradient(circle,transparent 42%,#000 46%,transparent 70%);mask:radial-gradient(circle,transparent 42%,#000 46%,transparent 70%);transform:rotate(calc(var(--t)*80deg));opacity:calc(.4 + var(--t)*.6)}
.orbit{position:absolute;inset:0;width:100%;height:100%;transform:rotate(calc(var(--t)*120deg))}
.orbit text{font:500 15px var(--txt);letter-spacing:.32em;fill:var(--gold2)}
.c-a{position:absolute;left:20px;right:20px;top:86px;z-index:3;--u:0;opacity:calc(1 - var(--u));transform:translateY(calc(var(--u)*-60px))}
.c-a h1{font-size:clamp(46px,12.5vw,128px);line-height:.95;margin-top:14px;max-width:11ch;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.status{margin-top:18px;display:inline-flex;align-items:center;gap:10px;font:500 14px/1 var(--txt);padding:10px 14px;border:1px solid rgba(224,173,79,.5);border-radius:999px;background:rgba(14,24,40,.55);backdrop-filter:blur(6px)}
.dot{width:8px;height:8px;border-radius:50%;background:#ff7a3d;box-shadow:0 0 0 0 rgba(255,122,61,.7);animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(255,122,61,0)}100%{box-shadow:0 0 0 0 rgba(255,122,61,0)}}
.c-b{position:absolute;left:20px;right:20px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:3;max-width:540px;--t:0;opacity:var(--t);transform:translateY(calc((1 - var(--t))*40px));
  background:rgba(14,24,40,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:22px;border-radius:18px;border:1px solid rgba(224,173,79,.35)}
.c-b p{font-size:18px}
html:not(.motion) .c-b{opacity:1;transform:none;position:relative;left:auto;bottom:auto;margin:80vh 20px 40px}

/* 2 pate */
.s-pate .stage{background:var(--cream);color:var(--ink)}
.pate-img{position:absolute;inset:0;--t:0;overflow:hidden}
.pate-img img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.3 - var(--t)*.3));transform-origin:50% 30%;filter:saturate(1.08)}
.pate-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,24,40,.55) 0%,rgba(14,24,40,0) 30%,rgba(14,24,40,.1) 55%,rgba(14,24,40,.85) 100%)}
.pate-k{position:absolute;left:20px;top:86px;z-index:3;color:var(--gold2)}
.mots{list-style:none;position:absolute;left:20px;right:20px;bottom:calc(150px + env(safe-area-inset-bottom));z-index:3}
.mots li{position:absolute;left:0;bottom:0;--t:0;--u:0;font:500 clamp(58px,17vw,170px)/.9 var(--disp);color:var(--cream);opacity:calc(min(1,var(--t)*2.4) - var(--u));transform:translateY(calc((1 - var(--t))*50px)) skewY(calc((1 - var(--t))*-4deg))}
.mots li:nth-child(2){color:var(--gold2)}
.pate-q{position:absolute;left:20px;right:20px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:3;--t:0;opacity:var(--t);transform:translateY(calc((1 - var(--t))*30px));
  font:400 20px/1.35 var(--disp);color:var(--cream);background:rgba(14,24,40,.82);padding:18px;border-radius:16px;max-width:560px}
.pate-q small{display:block;font:500 12px/1 var(--txt);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:12px}
html:not(.motion) .pate-img{position:relative;height:70vh}
html:not(.motion) .mots,html:not(.motion) .pate-q{position:relative;bottom:auto;left:auto;right:auto;padding:20px}
html:not(.motion) .mots li{position:relative;opacity:1;transform:none;color:var(--ink)}
html:not(.motion) .pate-q{opacity:1;transform:none;margin:20px}

/* 3 carte */
.s-carte .stage{background:var(--night2)}
.carte-k{position:absolute;left:20px;top:86px;z-index:3}
.rail{position:absolute;left:20px;right:20px;top:114px;height:1px;background:rgba(245,236,220,.18)}
.rail::after{content:"";position:absolute;left:0;top:-1px;height:3px;width:calc(var(--t,0)*100%);background:var(--tomato)}
.track{position:absolute;top:136px;bottom:0;left:0;display:flex;width:400%;--k:0;transform:translateX(calc(var(--k)*-75%))}
.pane{width:25%;padding:12px 20px 0;display:flex;flex-direction:column;gap:20px}
.pane figure{width:min(100%,48vh);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 8px rgba(224,173,79,.14),0 30px 70px rgba(0,0,0,.5)}
.pane figure img{width:100%;height:100%;object-fit:cover}
.n{font:500 12px/1 var(--txt);letter-spacing:.2em;color:var(--tomato)}
.pane h2{font-size:clamp(40px,10.5vw,92px);line-height:.95;margin-top:8px}
.pane p{margin-top:10px;color:#d6cbb8;max-width:34ch}
html:not(.motion) .track{position:relative;top:auto;width:auto;flex-direction:column;transform:none;padding-top:130px}
html:not(.motion) .pane{width:auto;padding-bottom:40px}

/* 4 camion */
.camion{background:var(--cream);color:var(--ink);--f:0;padding-bottom:60px}
.cam-img{height:64vh;overflow:hidden}
.cam-img img{width:100%;height:125%;object-fit:cover;object-position:40% 50%;transform:translateY(calc(var(--f)*-20%))}
.cam-txt{padding:44px 20px 0}
.cam-txt .kick{color:var(--tomato)}
.cam-txt h2{font-size:clamp(38px,9.5vw,86px);line-height:.98;margin:14px 0 16px;max-width:15ch}
.cam-txt h2 em{color:var(--tomato)}
.cam-txt>p{color:#4f463c;max-width:46ch}
.q{margin-top:28px;border-left:3px solid var(--gold);padding-left:16px}
.q blockquote{font:400 23px/1.3 var(--disp)}
.q figcaption{font-size:13px;color:var(--mute);margin-top:8px}
.cam-2{margin:40px 20px 0;height:420px;overflow:hidden;border-radius:22px}
.cam-2 img{width:100%;height:100%;object-fit:cover}

/* 5 mot */
.s-mot .stage{background:var(--tomato);color:#fff6e8;display:flex;flex-direction:column;justify-content:center;padding:0 20px}
.mot{font:500 clamp(50px,13vw,150px)/.95 var(--disp)}
.mot span{display:block;--t:0;opacity:calc(.15 + .85*var(--t));transform:translateY(calc((1 - var(--t))*26px))}
.mot em{color:var(--night)}
.mot-by{margin-top:26px;font-size:14px;--u:0;opacity:var(--u)}
html:not(.motion) .mot span,html:not(.motion) .mot-by{opacity:1;transform:none}

/* 6 venir */
.venir{background:var(--night);padding:90px 20px 120px}
.venir h2{font-size:clamp(44px,11vw,108px);line-height:.96;margin:14px 0 22px}
.how{list-style:none;display:grid;gap:12px;max-width:560px}
.how li{display:flex;gap:14px;border-top:1px solid rgba(245,236,220,.18);padding-top:12px;font-size:18px}
.how span{font:500 22px/1 var(--disp);color:var(--gold);min-width:18px}
.hours{margin-top:40px;display:grid;gap:10px}
.hours div{display:flex;justify-content:space-between;border-top:1px solid rgba(245,236,220,.16);padding-top:10px;font-variant-numeric:tabular-nums}
.hours dt{color:#b9ad99}
.hours .today dt,.hours .today dd{color:var(--gold2)}
.hours .today dt::after{content:" · aujourd’hui";font-size:13px}
.foot{background:#0a1220;color:#9d927f;padding:40px 20px 110px;font-size:14px;display:grid;gap:8px}
.foot-logo{font:500 30px/1 var(--disp);color:var(--cream)}
.foot-prop{color:var(--gold)}
.dock{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;display:grid;grid-template-columns:1fr 1.7fr 1fr;background:rgba(14,24,40,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(224,173,79,.35);border-radius:999px;overflow:hidden}
.dock a{color:var(--cream);text-decoration:none;text-align:center;padding:15px 6px;font:500 14px/1 var(--txt)}
.dock-main{background:var(--gold);color:#1d1306!important}
@media (min-width:900px){
  body{font-size:18px}.bar{padding:22px 44px}.dock{display:none}
  .c-a{left:60px;top:140px;max-width:46%}
  .sun{left:70%;width:min(64vw,92vh);transform:translate(-50%,calc(-30% - var(--t)*20%)) scale(calc(.8 + var(--t)*.3))}
  .c-b{left:60px;bottom:64px}
  .pate-k{left:60px;top:130px}.mots{left:60px;bottom:200px}.pate-q{left:auto;right:60px;bottom:64px;max-width:460px}
  .carte-k,.rail{left:60px}.rail{right:60px;top:160px}.track{top:190px}
  .pane{flex-direction:row;align-items:center;gap:60px;padding:0 60px}.pane figure{width:min(40vw,64vh);flex:none}
  .camion{display:grid;grid-template-columns:1.1fr 1fr;align-items:start}
  .cam-img{grid-row:span 2;height:100vh;position:sticky;top:0}
  .cam-txt{padding:110px 60px 0}.cam-2{margin:40px 60px 0;height:460px}
  .s-mot .stage{padding:0 60px}
  .venir{padding:130px 60px}.hours{grid-template-columns:repeat(5,1fr);gap:24px}.hours div{flex-direction:column;gap:6px}
  .foot{padding:40px 60px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}