:root{--ink:#11152a;--ink2:#1b2140;--pom:#9e1530;--pom2:#c2263f;--saf:#e5a823;--saf2:#f3cf6b;--cream:#f3e9d6;--paper:#efe3cc;--mute:#7b7468;
--disp:'Rowan',Georgia,serif;--txt:'Ranade',system-ui,sans-serif;--fa:'Geeza Pro','Noto Naskh Arabic','Segoe UI',serif}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);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:.06;pointer-events:none;z-index:90}
img{display:block;max-width:100%}
a{color:inherit}
em{font-style:normal;color:var(--saf)}
[lang=fa]{font-family:var(--fa)}
.kick{font:500 12px/1.2 var(--txt);letter-spacing:.2em;text-transform:uppercase;color:var(--saf)}
h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:-.01em}

.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 a{pointer-events:auto;text-decoration:none}
.logo{font:400 26px/1 var(--disp);color:var(--cream);display:flex;gap:10px;align-items:baseline}
.logo span{font-size:20px;color:var(--saf)}
.bar-cta{font:500 13px/1 var(--txt);color:var(--cream);border-bottom:1px solid var(--saf);padding:8px 0}

.btn{display:inline-block;font:500 15px/1 var(--txt);text-decoration:none;padding:17px 20px;border-radius:2px;letter-spacing:.01em}
.btn-pom{background:var(--pom);color:#fff}
.btn-ghost{color:var(--cream);border:1px solid rgba(243,233,214,.45)}
.btn-line{border:1px solid rgba(243,233,214,.4);color:var(--cream)}
.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-open{height:340vh}.js .s-trois{height:420vh}.js .s-kebab{height:520vh}.js .s-mot{height:260vh}
html:not(.motion) .scene{height:auto!important}
html:not(.motion) .stage{position:relative;height:auto;min-height:100svh}

/* 1 open: the plate turns and opens */
.s-open .stage{background:radial-gradient(120% 80% at 50% 60%,#1d2547 0%,var(--ink) 60%)}
.disc{position:absolute;left:50%;top:58%;width:min(118vw,92vh);aspect-ratio:1;--t:0;
  transform:translate(-50%,-50%) rotate(calc(var(--t)*-110deg)) scale(calc(.62 + var(--t)*1.25));
  border-radius:50%;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 calc((1 - var(--t))*10px) rgba(229,168,35,.12)}
.disc img{width:100%;height:100%;object-fit:cover}
.disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(17,21,42,0) 40%,rgba(17,21,42,calc(.15 + var(--t)*.55)) 100%)}
.open-a{position:absolute;left:20px;right:20px;top:74px;--u:0;opacity:calc(1 - var(--u));transform:translateY(calc(var(--u)*-50px));z-index:3}
.open-a h1{font-size:clamp(52px,14vw,150px);line-height:.92;margin-top:14px;text-shadow:0 4px 40px rgba(0,0,0,.45)}
.open-a h1 em{color:var(--pom2);font-style:italic}
.open-b{position:absolute;left:20px;right:20px;bottom:calc(86px + env(safe-area-inset-bottom));max-width:540px;z-index:3;--t:0;opacity:var(--t);transform:translateY(calc((1 - var(--t))*40px));
  background:rgba(17,21,42,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:22px;border-left:3px solid var(--saf)}
.open-b p{font-size:18px}
.seeds{position:absolute;inset:0;--t:0;z-index:2;pointer-events:none}
.seeds i{position:absolute;left:var(--x);top:var(--y);width:calc(14px*var(--s));height:calc(18px*var(--s));border-radius:48% 48% 52% 52%/60% 60% 40% 40%;
  background:radial-gradient(circle at 35% 30%,#ff8a9a 0,#c2263f 35%,#6e0c1f 100%);box-shadow:0 0 18px rgba(194,38,63,.5);
  transform:translateY(calc(var(--t)*var(--d)*-60vh)) rotate(calc(var(--t)*var(--d)*200deg));opacity:.9}
html:not(.motion) .open-b{opacity:1;transform:none;position:relative;left:auto;bottom:auto;margin:60vh 20px 40px}
html:not(.motion) .disc{transform:translate(-50%,-50%) scale(.9)}

/* 2 trois couleurs */
.s-trois .stage{background:var(--paper);color:var(--ink)}
.tri{position:absolute;inset:0;--t:0;clip-path:circle(calc(var(--t)*120%) at 50% 62%)}
.tri img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.25 - var(--t)*.25))}
.tri::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,21,42,.7) 0%,rgba(17,21,42,0) 45%)}
.tri-w{position:absolute;left:20px;right:20px;top:84px;z-index:4;color:#fff;font:400 clamp(46px,12vw,120px)/.95 var(--disp);--t:0;--u:0;
  opacity:calc(min(1,var(--t)*3) - var(--u));transform:translateY(calc((1 - var(--t))*30px - var(--u)*30px))}
.tri-w span{display:block;font:500 13px/1 var(--txt);letter-spacing:.2em;color:var(--saf2);margin-bottom:12px}
.tri-w small{display:block;font:400 18px/1.4 var(--txt);margin-top:14px;max-width:24ch;color:#f6ecdc}
.s-trois .stage::before{content:"Trois couleurs, une table.";position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%);font:400 clamp(40px,10vw,96px)/1 var(--disp);color:var(--pom)}
html:not(.motion) .tri{position:relative;height:80vh;clip-path:none}
html:not(.motion) .tri-w{position:relative;top:auto;left:auto;color:var(--ink);padding:24px 20px;opacity:1;transform:none}
html:not(.motion) .tri-w small{color:var(--mute)}
html:not(.motion) .s-trois .stage::before{display:none}

/* 3 kebabs: skewer travelling */
.s-kebab .stage{background:var(--ink2)}
.kebab-img{position:absolute;inset:auto 0 0 0;height:46%;--t:0;overflow:hidden}
.kebab-img img{width:140%;max-width:none;height:100%;object-fit:cover;transform:translateX(calc(var(--t)*-28%))}
.kebab-img::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--ink2) 0%,rgba(27,33,64,0) 40%)}
.kebab-k{position:absolute;left:20px;top:78px;z-index:3}
.skewer{position:absolute;left:20px;right:20px;top:112px;height:2px;background:rgba(243,233,214,.18);z-index:3}
.skewer::after{content:"";position:absolute;left:0;top:0;height:2px;width:calc(var(--t,0)*100%);background:var(--saf)}
.track{position:absolute;top:130px;left:0;display:flex;width:500%;--k:0;transform:translateX(calc(var(--k)*-80%));z-index:3}
.pane{width:20%;padding:18px 20px 0}
.pane .fa{font-size:30px;color:var(--saf);line-height:1.2}
.pane h2{font-size:clamp(58px,16vw,150px);line-height:.95;margin:6px 0 12px}
.pane p:not(.fa){font-size:19px;max-width:26ch;color:#d9d2c3}
html:not(.motion) .track{position:relative;top:auto;width:auto;flex-direction:column;transform:none;padding-top:120px}
html:not(.motion) .pane{width:auto;padding-bottom:28px}
html:not(.motion) .kebab-img{position:relative;height:50vh}

/* 4 carte */
.carte{background:var(--cream);color:var(--ink);padding:84px 20px 70px;--f:0}
.carte-head h2{font-size:clamp(44px,11vw,104px);line-height:.96;margin-top:14px;max-width:12ch}
.carte-head h2 em{color:var(--pom)}
.carte-head .kick{color:var(--pom)}
.carte-grid{display:grid;gap:40px;margin-top:44px}
.carte h3{font-size:30px;color:var(--pom);margin-bottom:10px}
.carte dl div{padding:14px 0;border-top:1px solid rgba(17,21,42,.14)}
.carte dt{font:400 23px/1.15 var(--disp)}
.carte dd{color:#5d574d;margin-top:4px;font-size:16px}
.carte-img{height:62vh;overflow:hidden;border-radius:50% 50% 0 0/28% 28% 0 0}
.carte-img img{width:100%;height:125%;object-fit:cover;transform:translateY(calc(var(--f)*-18%))}
.carte-note{margin-top:22px;font:500 13px/1.4 var(--txt);letter-spacing:.08em;text-transform:uppercase;color:var(--pom)}

/* 5 mot */
.s-mot .stage{background:var(--pom);display:flex;flex-direction:column;justify-content:center;padding:0 20px}
.mot-img{position:absolute;right:-12%;top:8%;width:62%;height:56%;opacity:.28;--t:0;transform:translateY(calc(var(--t)*-12%));mix-blend-mode:luminosity}
.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)}
.mot span{display:block;--t:0;opacity:calc(.14 + .86*var(--t));transform:translateY(calc((1 - var(--t))*26px))}
.mot em{color:var(--saf2);font-style:italic}
.mot-by{position:relative;margin-top:26px;font-size:14px;letter-spacing:.04em;--u:0;opacity:var(--u)}
html:not(.motion) .mot span,html:not(.motion) .mot-by{opacity:1;transform:none}

/* 6 salle */
.salle{background:var(--ink);--f:0;padding-bottom:70px}
.salle-img{height:78vh;overflow:hidden}
.salle-img img{width:100%;height:125%;object-fit:cover;transform:translateY(calc(var(--f)*-20%))}
.salle-txt{padding:44px 20px 0}
.salle-txt h2{font-size:clamp(34px,8.5vw,72px);line-height:1.02;margin-top:14px;max-width:18ch}
.quotes{display:grid;gap:22px;margin-top:34px}
.quotes blockquote{font:400 22px/1.28 var(--disp)}
.quotes figcaption{font-size:13px;color:#a69e8f;margin-top:6px;letter-spacing:.06em}
.salle-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:44px 20px 0}
.salle-row img{width:100%;height:240px;object-fit:cover}
.salle-row img:first-child{grid-column:span 2;height:300px}

/* 7 venir */
.venir{background:var(--ink2);padding:80px 20px 110px;border-top:3px solid var(--saf)}
.venir h2{font-size:clamp(44px,11vw,104px);line-height:.96;margin:14px 0 16px}
.v-lede{max-width:520px;color:#cfc8b8}
.hours{margin-top:40px;display:grid;gap:12px}
.hours div{display:flex;justify-content:space-between;border-top:1px solid rgba(243,233,214,.18);padding-top:12px;font-size:18px}
.hours dt{color:#bdb5a5}
.foot{background:#0b0e1d;color:#a69e8f;padding:40px 20px 110px;font-size:14px;display:grid;gap:8px}
.foot-logo{font:400 30px/1 var(--disp);color:var(--cream)}.foot-logo span{color:var(--saf);font-size:24px}
.foot-prop{color:var(--saf)}
.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(17,21,42,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(229,168,35,.3);overflow:hidden;border-radius:3px}
.dock a{color:var(--cream);text-decoration:none;text-align:center;padding:15px 6px;font:500 14px/1 var(--txt)}
.dock-main{background:var(--pom);color:#fff!important}

@media (min-width:900px){
  body{font-size:18px}
  .bar{padding:22px 40px}.dock{display:none}
  .open-a{left:56px;top:120px;max-width:46%}
  .disc{left:70%;top:54%;width:min(70vw,96vh)}
  .open-b{left:56px;bottom:64px}
  .tri-w{left:56px;top:120px}
  .s-trois .stage::before{left:56px}
  .kebab-k,.skewer{left:56px}.skewer{right:56px}
  .pane{padding:30px 56px 0}
  .kebab-img{left:45%;top:0;height:100%}
  .kebab-img::before{background:linear-gradient(90deg,var(--ink2) 0%,rgba(27,33,64,0) 45%)}
  .carte{padding:120px 56px}
  .carte-grid{grid-template-columns:1fr .9fr 1fr;align-items:start}
  .carte-img{height:80vh;position:sticky;top:60px}
  .s-mot .stage{padding:0 56px}
  .salle{display:grid;grid-template-columns:1.1fr 1fr}
  .salle-img{grid-row:span 2;height:100vh;position:sticky;top:0}
  .salle-txt{padding:90px 56px 0}
  .salle-row{padding:44px 56px 0}
  .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}}
.bar::before{content:"";position:absolute;inset:0 0 -24px 0;background:linear-gradient(180deg,rgba(11,14,29,.72),rgba(11,14,29,0));z-index:-1}
.tri::after{background:linear-gradient(180deg,rgba(11,14,29,.86) 0%,rgba(11,14,29,.35) 34%,rgba(11,14,29,0) 52%)}
.tri-w,.open-a h1{text-shadow:0 2px 24px rgba(0,0,0,.5)}