/* Café Loichet — palette from the vitrine cream, brass table rims, and warm wood */
:root{
  --night:#120E0B;
  --ink:#1A140F;
  --wood:#8A5A32;
  --brass:#C9A36A;
  --cream:#EDE6DC;
  --stone:#A89888;
  --foam:#D8C4A8;
  --g:'Cabinet', 'Helvetica Neue', Arial, sans-serif;
  --s:'Zodiak', Georgia, serif;
  --x:20px;
  --vh:100vh;
}
@supports (height:100svh){:root{--vh:100svh}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--cream);font-family:var(--g);font-size:17px;line-height:1.45;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::after{content:"";position:fixed;inset:-50%;background:url(../img/grain.png);opacity:.07;mix-blend-mode:overlay;pointer-events:none;z-index:80}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,p,figure,ul,li{margin:0;padding:0}
em{font-family:var(--s);font-style:italic;font-weight:400;letter-spacing:-.01em}
::selection{background:var(--brass);color:var(--night)}

.mark{position:fixed;top:16px;left:var(--x);z-index:70;font-weight:700;font-size:16px;letter-spacing:-.03em;text-decoration:none;color:var(--cream);text-shadow:0 1px 18px rgba(18,14,11,.55);transition:color .4s}
.mark i{font-family:var(--s);font-style:italic;font-weight:400;font-size:1.15em;padding-right:.15em;letter-spacing:0}
.on-light .mark{color:var(--night);text-shadow:none}

.b-solid{display:inline-flex;align-items:center;gap:14px;background:var(--brass);color:var(--night);text-decoration:none;font-weight:700;font-size:15px;letter-spacing:-.01em;padding:15px 18px;border-radius:0}
.b-solid::after{content:"";width:22px;height:1px;background:currentColor;transition:width .6s cubic-bezier(.83,0,.17,1)}
.b-solid:hover::after,.b-solid:focus-visible::after{width:46px}
.b-thread{color:var(--cream);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;font-weight:500;font-size:15px}
.b-thread:hover{text-decoration-color:var(--brass)}
.kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);font-weight:500}

[data-r]{--t:1}[data-o]{--u:0}
.scene{position:relative}
.stage{position:relative;min-height:var(--vh);overflow:hidden}
.motion .scene{height:var(--h)}
.motion .stage{position:sticky;top:0;height:var(--vh);min-height:0}
.veil{position:absolute;inset:0;pointer-events:none}

/* 1 · aube */
.s-arrive{--h:250vh}
.arrive-depth{position:absolute;inset:0;overflow:hidden}
.arrive-bg{position:absolute;inset:-12%;background:#2A1A10;transform:scale(calc(1.12 + .08*var(--t)));filter:blur(18px) brightness(.55);will-change:transform}
.arrive-img{position:absolute;inset:0;transform:scale(calc(1.22 - .22*var(--t)));transform-origin:18% 40%;will-change:transform}
.arrive-img img{width:100%;height:100%;object-fit:cover;object-position:40% 55%}
.s-arrive .veil{background:linear-gradient(180deg,rgba(18,14,11,.55) 0,rgba(18,14,11,.08) 28%,rgba(18,14,11,.2) 58%,rgba(18,14,11,.92) 92%)}
.arrive-place{position:absolute;top:19px;right:var(--x);display:flex;flex-direction:column;align-items:flex-end;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);opacity:.85;line-height:1.5}
.arrive-a{position:absolute;left:var(--x);right:var(--x);bottom:92px;opacity:calc(1 - var(--u));transform:translateY(calc(var(--u)*-70px))}
.s-arrive h1{font-family:var(--s);font-weight:400;font-size:clamp(48px,13.5vw,120px);line-height:.9;letter-spacing:-.04em}
.s-arrive h1 span,.s-arrive h1 em{display:block}
.s-arrive h1 em{color:var(--brass);font-size:.86em;margin-top:.08em;letter-spacing:-.03em}
.arrive-cta{display:flex;align-items:center;gap:20px;margin-top:26px;flex-wrap:wrap}
.arrive-b{position:absolute;left:var(--x);right:var(--x);bottom:104px;opacity:var(--t);transform:translateY(calc((1 - var(--t))*50px))}
@media (prefers-reduced-motion:no-preference){.js .arrive-b{--t:0}}
.arrive-b p{font-weight:500;font-size:clamp(28px,7.4vw,56px);line-height:1.05;letter-spacing:-.035em;max-width:14em}
.arrive-b em{display:block;color:var(--brass)}
.cue{position:absolute;right:var(--x);bottom:96px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:calc(1 - var(--u));writing-mode:vertical-rl;display:none}

/* 2 · vitre */
.s-vitre{--h:280vh;background:var(--night)}
.vitre{position:absolute;inset:0;clip-path:inset(0 calc(14% - 14%*var(--t)) 0 calc(14% - 14%*var(--t)));will-change:clip-path}
.vitre img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transform:scale(calc(1.22 - .22*var(--t)))}
.s-vitre .stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(18,14,11,.25) 0,transparent 30%,rgba(18,14,11,.15) 55%,rgba(18,14,11,.88) 100%)}
.vitre-copy{position:absolute;left:var(--x);right:var(--x);bottom:92px;z-index:2}
.s-vitre h2{font-weight:700;font-size:clamp(40px,11.5vw,88px);line-height:.92;letter-spacing:-.05em;margin:8px 0 14px;opacity:calc(.2 + .8*var(--t));transform:translateY(calc((1 - var(--t))*24px))}
.s-vitre h2 em{color:var(--brass)}
.vitre-p{font-size:17px;max-width:22em;color:var(--foam);opacity:var(--t);transform:translateY(calc((1 - var(--t))*18px))}
.s-vitre .kicker{opacity:var(--t)}

/* 3 · salle */
.s-salle{--h:170vh;height:var(--h);background:var(--night);position:relative;z-index:2}
.salle-pin{position:sticky;top:0;height:var(--vh);overflow:hidden}
.salle-img{position:absolute;inset:0}
.salle-img img{width:100%;height:128%;object-fit:cover;object-position:38% 50%;transform:translateY(calc(var(--f,0)*-16%))}
.salle-pin::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(18,14,11,.28) 0,transparent 28%,rgba(18,14,11,.2) 52%,rgba(18,14,11,.88) 100%)}
.salle-body{position:absolute;left:var(--x);right:var(--x);bottom:92px;z-index:2}
.s-salle h2{font-weight:700;font-size:clamp(32px,9.2vw,72px);line-height:1.02;letter-spacing:-.045em;max-width:14em}
.s-salle h2 em{color:var(--brass)}

/* 4 · comptoir 2.5D */
.s-comptoir{--h:280vh}
.depth{position:absolute;inset:0;overflow:hidden}
.d-bg{position:absolute;inset:-18%;will-change:transform;transform:translate3d(calc(var(--t)*-4%),0,0) scale(1.16);filter:blur(14px) brightness(.72)}
.d-bg img,.d-mid img,.d-fg img{width:100%;height:100%;object-fit:cover}
.d-mid img{object-position:72% 48%}
.d-mid{position:absolute;inset:0;will-change:transform;transform:translate3d(calc(var(--t)*-3%),0,0) scale(calc(1.12 - .08*var(--t)));transform-origin:72% 52%}
.veil-soft{background:linear-gradient(180deg,rgba(18,14,11,.35) 0,rgba(18,14,11,.08) 40%,rgba(18,14,11,.75) 100%)}
.comptoir-txt{position:absolute;left:var(--x);right:var(--x);bottom:200px;opacity:var(--t);transform:translateY(calc((1 - var(--t))*30px))}
.s-comptoir h2{font-weight:700;font-size:clamp(40px,11vw,92px);line-height:.94;letter-spacing:-.05em;margin-top:8px;max-width:10em}
.s-comptoir h2 em{color:var(--brass)}
.s-comptoir .note{position:absolute;left:var(--x);right:var(--x);bottom:88px;font-size:13px;color:var(--foam);max-width:28em;opacity:var(--t);border-top:1px solid rgba(237,230,220,.28);padding-top:10px}

/* 5 · viennoiseries */
.s-pains{--h:480vh;--n:4}
.s-pains .stage{background:var(--night)}
.track{display:flex;height:100%;width:calc(var(--n)*100vw);transform:translateX(calc(var(--k,0)*(var(--n) - 1)*-100vw));will-change:transform}
.pane{position:relative;flex:0 0 100vw;height:100%;overflow:hidden}
.pane-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.p-vitrine .pane-bg{object-position:30% 100%;height:165%;width:100%;inset:auto 0 0 0}
.pane-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,14,11,.15) 0,rgba(18,14,11,0) 36%,rgba(18,14,11,.7) 72%,rgba(18,14,11,.94) 100%)}
.pane-txt{position:absolute;left:var(--x);right:var(--x);bottom:88px;z-index:2}
.pane h2{font-weight:700;letter-spacing:-.055em;line-height:.88;font-size:clamp(52px,14vw,140px);margin:6px 0 12px}
.pane h2 em{font-weight:400;letter-spacing:-.03em;color:var(--brass)}
.pane p{font-size:16.5px;line-height:1.4;max-width:22em}

/* 6 · carte */
.s-carte{background:var(--cream);color:var(--night);padding:0 0 120px;position:relative;z-index:2}
.carte-frame{overflow:hidden;height:62vw;min-height:260px;max-height:440px}
.carte-frame img{width:100%;height:120%;object-fit:cover;object-position:50% 42%;transform:translateY(calc(var(--f,0)*-12%))}
.carte-photo figcaption{font-size:12px;letter-spacing:.04em;color:#6B5A48;padding:10px var(--x) 0;font-family:var(--s);font-style:italic}
.carte-body{padding:28px var(--x) 0}
.s-carte .kicker{color:var(--wood)}
.s-carte h2{font-weight:700;font-size:clamp(36px,10vw,80px);line-height:.94;letter-spacing:-.05em;margin:8px 0 28px;max-width:12em}
.s-carte h2 em{color:var(--wood)}
.carte{list-style:none;border-top:1px solid rgba(18,14,11,.18)}
.carte li{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid rgba(18,14,11,.18)}
.carte span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#6B5A48;font-weight:500}
.carte em{font-size:clamp(20px,5.4vw,32px);line-height:1.15;letter-spacing:-.02em;color:var(--night)}
.modest{margin-top:28px;font-size:15px;color:#6B5A48;max-width:24em}

/* 7 · venir */
.s-come{background:var(--night);position:relative;z-index:2;padding-bottom:30px}
.come-img{height:calc(var(--vh)*.48);overflow:hidden}
.come-img img{width:100%;height:128%;object-fit:cover;object-position:46% 48%;transform:translateY(calc(var(--f,0)*-10%))}
.s-come h2{font-weight:700;font-size:clamp(46px,14vw,140px);line-height:.86;letter-spacing:-.055em;margin:-.5em var(--x) 0;position:relative}
.s-come h2 em{color:var(--brass);font-weight:400;letter-spacing:-.03em}
.come-grid{display:grid;gap:14px;padding:22px var(--x) 0}
.addr{font-size:23px;line-height:1.18;font-weight:700;letter-spacing:-.03em}
.addr span{display:block;font-family:var(--s);font-style:italic;font-weight:400;font-size:19px;letter-spacing:-.01em;color:var(--brass);margin-top:8px}
.hours{color:var(--stone);font-size:16px;max-width:24em}
.come-actions{display:grid;grid-template-columns:1.4fr 1fr;gap:1px;background:rgba(237,230,220,.18);margin:26px var(--x) 0;border:1px solid rgba(237,230,220,.18)}
.act{display:block;background:var(--night);padding:16px 14px 15px;text-decoration:none;transition:background .5s cubic-bezier(.83,0,.17,1),color .5s}
.act span{display:block;font-weight:700;font-size:22px;letter-spacing:-.035em}
.act small{display:block;color:var(--stone);font-size:13px;margin-top:2px}
.act:hover{background:#1E1814}
.act-main{background:var(--brass);color:var(--night)}
.act-main small{color:#4A3A22}
.act-main:hover{background:var(--cream)}

.foot{background:#0B0908;color:var(--stone);font-size:13px;padding:26px var(--x) 90px;position:relative;z-index:2}
.foot p{margin:0 0 8px}
.foot .prop{margin-top:14px;color:var(--cream);font-family:var(--s);font-style:italic;font-size:15px}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:75;display:grid;grid-template-columns:1.35fr 1fr;background:#0B0908;border-top:1px solid rgba(237,230,220,.16);padding-bottom:env(safe-area-inset-bottom)}
.dock a{padding:17px 14px 16px;font-weight:700;font-size:14.5px;letter-spacing:-.01em;text-decoration:none;color:var(--cream)}
.dock a+a{border-left:1px solid rgba(237,230,220,.14)}
.dock .dock-book{background:var(--brass);color:var(--night);display:flex;justify-content:space-between;align-items:center}
.dock .dock-book::after{content:"";width:18px;height:1px;background:currentColor}

/* reduced motion: readable sequence */
html:not(.motion) .track{flex-direction:column;width:auto;transform:none}
html:not(.motion) .pane{flex:none;width:100%;height:var(--vh);min-height:560px}
html:not(.motion) .s-pains .stage{overflow:visible}
html:not(.motion) .arrive-b{display:none}
html:not(.motion) .d-bg,html:not(.motion) .d-mid,html:not(.motion) .d-fg,.arrive-img,.arrive-bg{transform:none}
html:not(.motion) .vitre{clip-path:none}
html:not(.motion) .s-vitre .stage{min-height:auto}
html:not(.motion) .vitre{position:relative;height:var(--vh)}
html:not(.motion) .vitre-copy{position:relative;left:auto;right:auto;bottom:auto;padding:28px var(--x) 48px}
html:not(.motion) .s-salle{height:auto}
html:not(.motion) .salle-pin{position:relative;height:auto}
html:not(.motion) .salle-img{position:relative;height:var(--vh)}
html:not(.motion) .salle-body{position:relative;left:auto;right:auto;bottom:auto;padding:28px var(--x) 48px;width:auto}

/* desktop */
@media (min-width:900px){
  :root{--x:56px}
  body{font-size:18px}
  .mark{top:26px;font-size:20px}
  .dock{left:auto;right:28px;top:20px;bottom:auto;grid-template-columns:auto auto;border:1px solid rgba(237,230,220,.18)}
  .dock a{padding:11px 18px;font-size:14px}
  .dock .dock-book{gap:14px}
  .arrive-place{top:auto;bottom:64px;right:var(--x)}
  .arrive-a{bottom:64px;right:38vw}
  .arrive-b{bottom:64px;right:28vw}
  .cue{display:block;bottom:auto;top:50%}
  .s-arrive h1{font-size:7.4vw}
  .vitre{left:42vw;right:0;top:0;bottom:0;clip-path:inset(0 0 0 calc(36% - 36%*var(--t)))}
  .vitre-copy{bottom:auto;top:22vh;right:62vw;left:var(--x)}
  .s-vitre h2{font-size:5.6vw}
  .salle-pin::after{background:linear-gradient(90deg,transparent 42%,rgba(18,14,11,.78) 78%)}
  .salle-body{left:auto;right:var(--x);bottom:64px;width:min(22em,38vw)}
  .s-salle h2{font-size:3.6vw}
  .d-mid img{object-position:50% 50%}
  .d-mid{transform:translate3d(calc(var(--t)*-8%),0,0) scale(calc(1.16 - .10*var(--t)));transform-origin:68% 58%}
  .comptoir-txt{bottom:64px;right:40vw}
  .s-comptoir .note{bottom:64px;left:auto;right:var(--x);width:24em}
  .pane-txt{bottom:64px;right:auto;max-width:46vw}
  .pane h2{font-size:8.5vw}
  .p-vitrine .pane-bg{object-position:50% 42%;height:100%;inset:0}
  .s-carte{padding:0 var(--x) 80px 0;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:0 56px;align-items:end}
  .carte-frame{height:86vh;max-height:none;min-height:0}
  .carte-photo figcaption{padding:12px var(--x) 0}
  .carte-body{padding:132px var(--x) 0 0}
  .carte li{grid-template-columns:11em 1fr;align-items:baseline;gap:24px;padding:20px 0}
  .come-img{height:64vh}
  .come-grid{grid-template-columns:1fr 1fr;gap:56px;padding-top:34px}
  .come-actions{grid-template-columns:1.4fr 1fr;margin-top:40px;max-width:46em}
  .act{padding:26px 22px 24px}
  .act span{font-size:28px}
  .foot{padding:28px var(--x) 30px}
}