/* KOPI — une boisson par écran. Anton + Caveat + Poppins. Feuillage teinté par boisson, ligne blanche sinueuse, grains qui flottent, fresque au curseur. */
@font-face{font-family:"Anton";src:url("../fonts/anton.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Caveat";src:url("../fonts/caveat.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-600.woff2") format("woff2");font-weight:600;font-display:swap}
:root{--ink:#1f0e06;--cream:#f5f0e6;--gold:#f2c94c;--fa:"Anton",Impact,sans-serif;--fs:"Caveat",cursive;--ft:"Poppins",system-ui,sans-serif;--pad:clamp(20px,4vw,64px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--cream);font:400 1rem/1.6 var(--ft);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2{margin:0;font-family:var(--fa);font-weight:400;line-height:.95;text-transform:uppercase}
.kicker{margin:0 0 10px;font:600 .66rem/1 var(--ft);letter-spacing:.26em;text-transform:uppercase;opacity:.85}
.kicker--l{color:var(--gold);opacity:1}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:999px;background:var(--cream);color:var(--ink);font:600 .78rem/1 var(--ft);letter-spacing:.16em;text-transform:uppercase;border:2px solid var(--cream);transition:transform .25s,background .25s,color .25s}
.btn:hover{transform:translateY(-2px);background:var(--gold);border-color:var(--gold)}
.btn span{font-size:1.1em}
.btn--line{background:transparent;color:var(--cream);min-height:44px;padding:10px 18px;font-size:.7rem}
.btn--gold{background:var(--gold);border-color:var(--gold);min-height:56px;padding:14px 32px;font-size:.88rem}
.btn--gold:hover{background:var(--cream);border-color:var(--cream)}

/* Intro */

/* En-tête */
.hdr{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--pad);mix-blend-mode:difference;color:#fff}
.hdr__logo{font:400 1.25rem/1 var(--fa);letter-spacing:.06em}.hdr__logo span{font:600 1rem/1 var(--fs);text-transform:none;letter-spacing:0;margin-left:4px}
.hdr__nav{display:none;gap:26px;font:500 .74rem/1 var(--ft);letter-spacing:.14em;text-transform:uppercase}
.hdr__nav a{padding:8px 0;border-bottom:1px solid transparent}.hdr__nav a:hover{border-color:#fff}
@media (min-width:900px){.hdr__nav{display:flex}}
.hdr .btn--line{border-color:#fff}

/* La carte épinglée */
.menu{height:400vh;position:relative}
.menu__pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--bg,#c2410c);transition:background .9s}
.menu__bg{position:absolute;inset:0}
.menu__bg img{width:100%;height:100%;object-fit:cover;mix-blend-mode:luminosity;opacity:.55;transform:scale(1.06);will-change:transform}
.menu__tint{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 60%,transparent 20%,rgba(0,0,0,.35) 100%)}
.line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.line path{fill:none;stroke:#fff;stroke-width:16;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.beans{position:absolute;inset:0;pointer-events:none;z-index:3}
.beans img{position:absolute;left:var(--x);top:var(--y);width:clamp(140px,22vw,340px);transform:rotate(var(--r)) scale(var(--s));will-change:transform;filter:drop-shadow(0 20px 20px rgba(0,0,0,.35))}
.drink{position:absolute;inset:0;padding:96px var(--pad) 60px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto 1fr auto;color:var(--t);opacity:0;pointer-events:none;z-index:4}
.drink.on{opacity:1;pointer-events:auto}
.drink__n{grid-column:1;grid-row:1;z-index:5;margin:0;font:400 clamp(1.4rem,3vw,2.4rem)/1 var(--fa);align-self:start}
.drink__n b{font-size:1.5em}
.drink__t{grid-column:1/-1;grid-row:1;justify-self:center;align-self:start;position:relative;margin-top:-6px;z-index:3;text-align:center}
.drink__name{display:block;font-size:clamp(4rem,16vw,15rem);letter-spacing:.01em;text-shadow:0 10px 40px rgba(0,0,0,.25);color:var(--cream)}
.drink__script{position:absolute;right:-.4em;bottom:.2em;font:700 clamp(1.4rem,4vw,3.6rem)/1 var(--fs);color:var(--acc);transform:rotate(-8deg);text-transform:none}
.drink__copy{grid-column:1;grid-row:2/4;align-self:end;max-width:34ch;z-index:5}
.drink__adj{margin:0 0 14px;font:600 clamp(1.5rem,3vw,2.5rem)/1.05 var(--ft);letter-spacing:-.01em}
.drink__d{margin:0 0 22px;font-size:.95rem;opacity:.9;max-width:34ch}
.drink__cta{margin:0;display:flex;align-items:center;gap:18px}
.drink__cta b{font:400 1.5rem/1 var(--fa);color:var(--acc)}
.drink__fig{grid-column:2;grid-row:1/4;margin:0;align-self:end;justify-self:center;width:min(42vh,100%);z-index:4;filter:drop-shadow(0 40px 40px rgba(0,0,0,.4));will-change:transform}
.opts{grid-column:3;grid-row:2;justify-self:end;align-self:center;list-style:none;margin:0;padding:0;display:grid;gap:10px;z-index:5}
.opts li{display:contents}
.opts button{font-family:var(--ft);color:inherit;display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 18px 8px 10px;border-radius:999px;background:rgba(245,240,230,.14);border:1px solid rgba(245,240,230,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font:500 .78rem/1 var(--ft);letter-spacing:.08em;cursor:pointer;transition:background .25s,transform .25s}
.opts button::before{content:"";width:22px;height:22px;border-radius:50%;border:2px solid currentColor;background:transparent;transition:background .25s}
.opts button[aria-pressed="true"]::before{background:var(--acc);border-color:var(--acc)}
.opts button:hover{background:rgba(245,240,230,.28);transform:translateX(-4px)}
.badge{position:absolute;left:var(--pad);top:50%;width:120px;transform:translateY(-50%);z-index:5;animation:spin 16s linear infinite;pointer-events:none}
.badge text{fill:var(--cream);font:400 12px/1 var(--fa);letter-spacing:.2em}.badge circle{fill:var(--cream)}
.pager{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);list-style:none;margin:0;padding:0;display:flex;gap:8px;z-index:5}
.pager li{width:8px;height:8px;border-radius:50%;background:rgba(245,240,230,.4);transition:transform .3s,background .3s}.pager li.on{background:#fff;transform:scale(1.5)}
.menu__hint{position:absolute;right:var(--pad);bottom:22px;margin:0;font:500 .62rem/1 var(--ft);letter-spacing:.2em;text-transform:uppercase;opacity:.75;z-index:5}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
@media (max-width:900px){.drink{grid-template-columns:1fr 1fr;padding-top:84px}.drink__t{grid-column:1/-1}.drink__name{font-size:clamp(3.4rem,20vw,8rem)}.drink__copy{grid-column:1/-1;grid-row:3;max-width:none}.drink__fig{grid-column:1/-1;grid-row:2;width:min(34vh,70%);align-self:center}.opts{display:none}.badge{display:none}.drink__n{grid-row:3;align-self:end;justify-self:end;font-size:1.2rem;margin-bottom:6px}.drink__adj{font-size:1.3rem}.drink__d{display:none}.menu__hint{display:none}.beans img{width:120px}}

/* Histoire */
.story{position:relative;min-height:100svh;display:grid;align-items:center;padding:clamp(80px,14vh,160px) var(--pad);overflow:clip;background:#2b1508}
.story__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;will-change:transform}
.line--story{z-index:1;opacity:.95}
.story__copy{position:relative;z-index:2;max-width:620px;margin-left:auto;background:rgba(31,14,6,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:clamp(24px,4vw,48px);border-radius:18px}
.story__t{font-size:clamp(2.6rem,6vw,5.4rem)}.story__t i{font-style:normal;color:var(--gold)}
.story__p{margin:18px 0 26px;font-size:1rem;opacity:.9}
.stats{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stats dt{font:600 .62rem/1.3 var(--ft);letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-bottom:8px}
.stats dd{margin:0;font:400 clamp(1.6rem,3vw,2.6rem)/1 var(--fa);color:var(--gold)}

/* Tasse */
.cup{position:relative;min-height:90svh;display:grid;place-content:center;justify-items:center;text-align:center;gap:16px;padding:clamp(90px,16vh,180px) var(--pad);background:radial-gradient(ellipse 70% 60% at 50% 40%,#4a1f10,#1f0e06 70%);overflow:clip}
.line--cup{z-index:1}
.drop{fill:var(--gold);opacity:0}
.cup__bean{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.9;transform:scale(1.3);pointer-events:none;z-index:1}
.cup__t{position:relative;z-index:2;font-size:clamp(3rem,9vw,8rem);text-shadow:0 10px 40px rgba(0,0,0,.4)}
.cup .kicker{position:relative;z-index:2}.cup .btn{position:relative;z-index:2;margin-top:10px}

/* Fresque */
.mural{position:relative;aspect-ratio:16/9;max-height:100svh;overflow:hidden;background:#2b1508;cursor:none}
.mural img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mural__g{filter:grayscale(1) brightness(.5) contrast(1.05)}
.mural__c{-webkit-mask-image:radial-gradient(circle var(--rad,180px) at var(--mx,50%) var(--my,50%),#000 60%,transparent 100%);mask-image:radial-gradient(circle var(--rad,180px) at var(--mx,50%) var(--my,50%),#000 60%,transparent 100%)}
.mural__copy{position:absolute;left:var(--pad);top:28px;max-width:420px;z-index:2}
.mural__copy h2{font:600 .9rem/1.5 var(--ft);text-transform:none;opacity:.9}
@media (max-width:640px){.mural{aspect-ratio:3/4}}

.foot{padding:40px var(--pad);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 30px;font-size:.84rem;opacity:.85}
.foot p{margin:0}.foot a{margin-right:22px;border-bottom:1px solid currentColor}
@media (prefers-reduced-motion:reduce){.badge{animation:none}.line path{stroke-dashoffset:0}}