:root{--sage:#5f7a63;--sage2:#7f9a80;--sage3:#dfe6d9;--wood:#c9a57a;--crust:#b8692a;--cream:#f7f2e8;--ink:#23241f;--mute:#6d6c63;
--disp:'Recia',Georgia,serif;--txt:'Switzer',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font:400 17px/1.55 var(--txt);overflow-x:clip}
body::after{content:"";position:fixed;inset:0;background:url(../img/grain.png);opacity:.06;pointer-events:none;z-index:90;mix-blend-mode:multiply}
img{display:block;max-width:100%}
a{color:inherit}
em{font-style:italic}
h1,h2{font-family:var(--disp);font-weight:400;letter-spacing:-.015em}
.kick{font:500 12px/1.2 var(--txt);letter-spacing:.2em;text-transform:uppercase;color:var(--crust)}
.bar{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;justify-content:space-between;align-items:center;padding:12px 18px;pointer-events:none}
.bar::before{content:"";position:absolute;inset:0 0 -20px;background:linear-gradient(180deg,rgba(35,36,31,.55),rgba(35,36,31,0));z-index:-1}
.logo{pointer-events:auto;text-decoration:none;color:#fff;font:500 26px/1 var(--disp);display:flex;flex-direction:column}
.logo small{font:500 10px/1.4 var(--txt);letter-spacing:.26em;text-transform:uppercase;opacity:.85}
.open{font:500 12px/1 var(--txt);color:#fff;display:flex;align-items:center;gap:7px;background:rgba(35,36,31,.35);padding:8px 10px;border-radius:2px;backdrop-filter:blur(6px)}
.open i{width:7px;height:7px;border-radius:50%;background:#c9c3b5}
.open.on i{background:#9fd39a;box-shadow:0 0 0 3px rgba(159,211,154,.25)}
.btn{display:inline-block;font:500 15px/1 var(--txt);text-decoration:none;padding:17px 20px;border-radius:2px}
.btn-sage{background:var(--sage);color:#fff}
.btn-ghost{border:1px solid rgba(255,255,255,.6);color:#fff}
.btn-line{border:1px solid rgba(35,36,31,.3)}
.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-jour{height:560vh}.js .s-mot{height:240vh}
html:not(.motion) .scene{height:auto!important}
html:not(.motion) .stage{position:relative;height:auto;min-height:100svh}

/* 1 fournée : warm push-in, the light rises */
.s-four .stage{background:#2a2118;color:#fff}
.four-img{position:absolute;inset:0;--t:0}
.four-img img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - var(--t)*.12));filter:saturate(calc(.85 + var(--t)*.25)) brightness(calc(.78 + var(--t)*.22))}
.four-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,22,14,.62) 0%,rgba(30,22,14,.05) 40%,rgba(30,22,14,.15) 60%,rgba(30,22,14,.82) 100%)}
.four-a{position:absolute;left:20px;right:20px;top:92px;--u:0;opacity:calc(1 - var(--u));transform:translateY(calc(var(--u)*-40px))}
.four-a .kick{color:#f2c58f}
.four-a h1{font-size:clamp(50px,13vw,140px);line-height:.94;margin-top:14px;max-width:10ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.four-a h1 em{color:#f2c58f}
.four-b{position:absolute;left:20px;right:20px;bottom:calc(86px + env(safe-area-inset-bottom));max-width:540px;--t:0;opacity:var(--t);transform:translateY(calc((1 - var(--t))*40px))}
.four-b p{font-size:19px;line-height:1.5}
html:not(.motion) .four-b{opacity:1;transform:none}

/* 2 journée : the day passes, light shifts */
.s-jour .stage{background:var(--sage3)}
.clock-line{position:absolute;left:20px;right:20px;top:80px;height:2px;background:rgba(95,122,99,.25);z-index:3}
.clock-line span{position:absolute;left:0;top:0;height:2px;width:calc(var(--t,0)*100%);background:var(--crust)}
.track{display:flex;height:100%;width:500%;--k:0;transform:translateX(calc(var(--k)*-80%))}
.pane{width:20%;padding:100px 20px 0;display:flex;flex-direction:column}
.pane .h{font:400 clamp(64px,18vw,170px)/.9 var(--disp);color:var(--sage)}
.pane figure{height:40vh;overflow:hidden;margin:14px 0 18px;border-radius:2px}
.pane figure img{width:100%;height:100%;object-fit:cover}
.pane h2{font-size:clamp(30px,8vw,60px);line-height:1}
.pane p:not(.h){margin-top:8px;color:var(--mute);max-width:36ch}
html:not(.motion) .track{width:auto;flex-direction:column;transform:none;height:auto}
html:not(.motion) .pane{width:auto;padding-bottom:40px}

/* 3 mot */
.s-mot .stage{background:var(--sage);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:0 20px}
.mot-img{position:absolute;right:-22%;top:7%;width:62%;height:36%;--t:0;transform:translateY(calc((1 - var(--t))*12%)) rotate(calc((1 - var(--t))*6deg));opacity:.9}
.mot-img img{width:100%;height:100%;object-fit:cover;border-radius:999px 999px 0 0}
.mot{position:relative;font:400 clamp(40px,10.5vw,118px)/1 var(--disp);text-shadow:0 2px 20px rgba(0,0,0,.15)}
.mot span{display:block;--t:0;opacity:calc(.16 + .84*var(--t));transform:translateY(calc((1 - var(--t))*24px))}
.mot em{color:#f6d7ae}
.mot-by{position:relative;margin-top:24px;font-size:14px;--u:0;opacity:var(--u)}
html:not(.motion) .mot span,html:not(.motion) .mot-by{opacity:1;transform:none}

/* 4 lieu */
.lieu{--f:0;padding-bottom:60px}
.lieu-img{height:70vh;overflow:hidden}
.lieu-img img{width:100%;height:125%;object-fit:cover;transform:translateY(calc(var(--f)*-18%))}
.lieu-txt{padding:44px 20px 0}
.lieu-txt h2{font-size:clamp(38px,9.5vw,88px);line-height:1;margin:14px 0 16px;max-width:13ch}
.lieu-txt h2 em{color:var(--sage)}
.lieu-txt>p{color:var(--mute);max-width:46ch}
.quotes{display:grid;gap:20px;margin-top:30px}
.quotes blockquote{font:400 23px/1.25 var(--disp)}
.quotes figcaption{font-size:13px;color:var(--mute);margin-top:6px}
.lieu-2{margin:40px 20px 0;height:260px;overflow:hidden}
.lieu-2 img{width:100%;height:100%;object-fit:cover}

/* 5 comptoir */
.comptoir{background:#2a2118;color:#f7efe2;padding:70px 0 0}
.comptoir .kick{padding:0 20px;color:#f2c58f}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;padding:18px 20px 40px;font:400 clamp(28px,7vw,56px)/1.15 var(--disp)}
.tags li:nth-child(3n+2){font-style:italic;color:#f2c58f}
.comptoir-img{width:100%;height:46vh;object-fit:cover}

/* 6 venir */
.venir{background:var(--sage3);padding:80px 20px 110px}
.venir h2{font-size:clamp(44px,11vw,104px);line-height:.98;margin:14px 0 16px}
.venir h2 em{color:var(--sage)}
.v-lede{max-width:520px;color:var(--mute)}
.hours{margin-top:40px;display:grid;gap:10px}
.hours div{display:flex;justify-content:space-between;border-top:1px solid rgba(35,36,31,.15);padding-top:10px;font-size:18px}
.hours dt{color:var(--mute)}
.foot{background:var(--sage);color:#e9efe4;padding:40px 20px 110px;font-size:14px;display:grid;gap:8px}
.foot-logo{font:500 28px/1 var(--disp);color:#fff}.foot-logo small{font:500 11px/1 var(--txt);letter-spacing:.24em;text-transform:uppercase}
.foot-prop{color:#f6d7ae}
.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.4fr 1fr;background:rgba(247,242,232,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(35,36,31,.15);border-radius:3px;overflow:hidden}
.dock a{text-decoration:none;text-align:center;padding:15px 6px;font:500 14px/1 var(--txt)}
.dock-main{background:var(--sage);color:#fff}
@media (min-width:900px){
  body{font-size:18px}.bar{padding:20px 40px}.dock{display:none}
  .four-a{left:56px;top:130px}.four-b{left:56px;bottom:64px}
  .clock-line{left:56px;right:56px;top:110px}
  .pane{display:grid;grid-template-columns:1fr 1.2fr;grid-template-rows:auto auto 1fr;column-gap:56px;padding:150px 56px 0;align-content:start}
  .pane .h{grid-column:1}.pane h2{grid-column:1}.pane p:not(.h){grid-column:1}
  .pane figure{grid-column:2;grid-row:1 / span 3;height:66vh;margin:0}
  .s-mot .stage{padding:0 56px}.mot-img{right:4%;top:10%;width:34%;height:80%}
  .lieu{display:grid;grid-template-columns:1.1fr 1fr;align-items:start}
  .lieu-img{grid-row:span 2;height:100vh;position:sticky;top:0}
  .lieu-txt{padding:100px 56px 0}.lieu-2{margin:40px 56px 0;height:320px}
  .comptoir .kick,.tags{padding-left:56px;padding-right:56px}
  .venir{padding:120px 56px}.hours{grid-template-columns:repeat(3,1fr);gap:28px}
  .foot{padding:40px 56px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}