/* Lonja · restaurant gastronomique (démo). Sable, nuit marine, terre cuite, laiton. */
:root{
  --sand:#ECE3D2;--sand-2:#E3D7C1;--sea:#0E1C1F;--sea-2:#16292C;--terra:#8C3A22;--brass:#B8955A;--brass-t:#76581F;--foam:#F4EEE3;
  --bg:var(--sand);--ink:#13201E;--muted:#5E6762;--line:rgba(19,32,30,.16);--line-strong:rgba(19,32,30,.35);
  --accent:var(--sea);--accent-ink:var(--foam);--panel:#F4EEE3;--field:rgba(255,255,255,.45);
  --ff-d:"Instrument Serif",Georgia,serif;--ff-b:"Manrope",system-ui,sans-serif;--r-btn:999px;--r-in:10px;--r-modal:18px
}
body{background:var(--sand)}
em{font-style:italic}
.eyebrow{font:600 11.5px/1.3 var(--ff-b);letter-spacing:.18em;text-transform:uppercase;color:var(--brass-t)}
.lnk{font-weight:600;font-size:14.5px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.btn{font-weight:600;letter-spacing:.01em}
.wrap{width:min(1240px,100% - 48px)}

/* ---------- en-tête : îlot collé au bord haut (façon « dynamic island ») ---------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:center;pointer-events:none}
.isl{pointer-events:auto;position:relative;display:flex;align-items:center;gap:22px;width:min(1060px,100% - 32px);height:62px;padding:0 10px 0 24px;border-radius:0 0 26px 26px;background:rgba(14,28,31,.92);color:var(--foam);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 -1px 0 rgba(244,238,227,.08),0 18px 40px -22px rgba(0,0,0,.55);transition:width .6s cubic-bezier(.2,.8,.2,1),height .5s cubic-bezier(.2,.8,.2,1),border-radius .5s}
.isl::before,.isl::after{content:"";position:absolute;top:0;width:26px;height:26px;pointer-events:none}
.isl::before{left:-26px;background:radial-gradient(circle at 0 100%,transparent 25.5px,rgba(14,28,31,.92) 26px)}
.isl::after{right:-26px;background:radial-gradient(circle at 100% 100%,transparent 25.5px,rgba(14,28,31,.92) 26px)}
.isl.compact{width:min(900px,100% - 32px);height:54px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 28px/1 var(--ff-d);letter-spacing:.01em;flex:none}
.logo svg{width:32px;height:20px;fill:none;stroke:var(--brass);stroke-width:1.8;stroke-linecap:round}
/* Lucian UX/UI Prompt #039 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#039 */
.nav{position:relative;display:flex;margin:0 auto;padding:4px;border-radius:999px;background:rgba(244,238,227,.06);box-shadow:0 0 0 1px rgba(244,238,227,.1)}
.nav-pill{position:absolute;left:0;top:4px;bottom:4px;width:var(--w,80px);border-radius:999px;background:var(--foam);transform:translateX(var(--x,4px));box-shadow:0 8px 16px -10px rgba(0,0,0,.6);opacity:0;transition:transform .5s cubic-bezier(.34,1.45,.64,1),width .5s cubic-bezier(.34,1.45,.64,1),opacity .3s}
.nav a{position:relative;z-index:1;display:grid;place-items:center;height:36px;padding:0 16px;border-radius:999px;text-decoration:none;font-size:13.5px;font-weight:650;color:rgba(244,238,227,.72);white-space:nowrap;transition:color .35s cubic-bezier(.2,.8,.2,1)}
.nav a.is-on{color:var(--sea)}
.nav.hov a.is-on{color:rgba(244,238,227,.72)}
.nav a:hover{color:var(--sea)}
.isl-status{display:flex;align-items:center;gap:7px;flex:none;font-size:12px;font-weight:600;color:rgba(244,238,227,.7);white-space:nowrap}
.isl-status i{width:7px;height:7px;border-radius:50%;background:#c9806b;box-shadow:0 0 0 3px rgba(201,128,107,.2)}
.isl-status i.on{background:#7fc29b;box-shadow:0 0 0 3px rgba(127,194,155,.22);animation:orLive 2s infinite}
@keyframes orLive{50%{box-shadow:0 0 0 6px rgba(127,194,155,0)}}
.isl .btn.res{flex:none;min-height:44px;background:var(--foam);color:var(--sea)}
.isl .btn.res .rb-orb{background:linear-gradient(135deg,#E4C489,#B8955A)}
.isl .kd-burger{color:var(--foam)}
html.kd-menu-open .hd{z-index:70}
@media (max-width:1060px){.isl-status{display:none}}
@media (max-width:860px){.nav{display:none}.isl{height:58px;padding:0 6px 0 18px;justify-content:space-between}.isl .btn.res{display:none}}

/* ---------- boutons : les lettres roulent, la pastille fléchée ressort et revient ---------- */
/* Lucian UX/UI Prompt #009 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#009 */
.btn.rb{position:relative;gap:14px;padding:0 8px 0 24px;overflow:hidden;isolation:isolate;transition:transform .5s cubic-bezier(.34,1.45,.64,1),box-shadow .3s,background-color .3s,color .3s}
.btn.rb.ghost{padding:0 24px}
.btn.rb:hover{transform:none}
.btn.rb:active{transform:scale(.96)}
.rb-word{position:relative;display:flex;height:20px;overflow:hidden;line-height:20px}
.rb-face{display:flex}
.rb-face>span{display:flex;flex-direction:column;transition:transform .55s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 22ms)}
.rb-face>span::after{content:attr(data-c);display:block}
.btn.rb:hover .rb-face>span,.btn.rb:focus-visible .rb-face>span{transform:translateY(-20px)}
.rb-orb{position:relative;width:34px;height:34px;flex:none;border-radius:50%;background:linear-gradient(135deg,#E4C489,#B8955A);color:var(--sea);overflow:hidden;transition:transform .6s cubic-bezier(.34,1.45,.64,1)}
.rb-orb svg{position:absolute;left:9px;top:9px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.rb-orb svg+svg{transform:translate(-30px,30px)}
.btn.rb:hover .rb-orb svg:first-child{transform:translate(30px,-30px)}
.btn.rb:hover .rb-orb svg+svg{transform:none;transition-delay:.08s}
.btn.rb.block{justify-content:space-between}
.kd-reduce .rb-face>span,.kd-reduce .rb-orb svg{transition:none}
.kd-mnav{background:var(--sea);color:var(--foam)}

/* ---------- histoire du plat ---------- */
.story{position:relative;height:580vh;color:var(--ink)}
.story.dark{color:var(--foam)}
.st-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--sand)}
.st-rev{position:absolute;inset:0;clip-path:circle(0 at 50% 56%)}
.st-word{position:absolute;left:0;right:0;bottom:-.12em;font:400 clamp(160px,30vw,460px)/1 var(--ff-d);letter-spacing:-.02em;white-space:nowrap;pointer-events:none;opacity:.5}
.st-word span{display:inline-block;color:transparent;-webkit-text-stroke:1px rgba(19,32,30,.2);padding-left:4vw}
.story.dark .st-word span{-webkit-text-stroke-color:rgba(244,238,227,.14)}
.st-hero{position:absolute;left:clamp(20px,6vw,90px);top:50%;width:min(540px,42vw);transform:translateY(calc(-50% - (1 - var(--hero,1)) * 40px));opacity:var(--hero,1);z-index:3}
.story.past-hero .st-hero{pointer-events:none}
.st-hero h1{margin:18px 0 20px;font:400 clamp(46px,5.6vw,88px)/.98 var(--ff-d);letter-spacing:-.01em}
.st-hero h1 em{color:var(--terra)}
.st-hero .lead{max-width:440px;font-size:17px;color:var(--muted)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ctas.center{justify-content:center}
.hint{display:flex;align-items:center;gap:12px;margin-top:44px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.hint i{position:relative;width:22px;height:34px;border-radius:12px;box-shadow:inset 0 0 0 1.5px currentColor}
.hint i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:currentColor;animation:orHint 1.8s infinite}
@keyframes orHint{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}

.st-tabs{position:absolute;left:50%;top:84px;z-index:4;display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.35);backdrop-filter:blur(10px);transform:translateX(-50%);opacity:calc(1 - var(--hero,1) * .0);box-shadow:inset 0 0 0 1px var(--line)}
.story.dark .st-tabs{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(244,238,227,.14)}
.st-tabs button{position:relative;z-index:1;display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;transition:color .35s cubic-bezier(.2,.8,.2,1)}
.st-tabs button b{font:400 16px/1 var(--ff-d)}
.st-tabs button>span{max-width:0;overflow:hidden;opacity:0;transition:max-width .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.st-tabs button[aria-selected="true"]>span{max-width:200px;opacity:1}
/* Lucian UX/UI Prompt #039 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#039 */
.st-tpill{position:absolute;left:0;top:4px;bottom:4px;width:var(--w,40px);border-radius:999px;background:var(--ink);transform:translateX(var(--x,4px));box-shadow:0 8px 16px -10px rgba(0,0,0,.45);transition:transform .5s cubic-bezier(.34,1.45,.64,1),width .5s cubic-bezier(.34,1.45,.64,1),background-color .4s}
.story.dark .st-tpill{background:var(--foam)}
.st-tabs:not(.hov) button[aria-selected="true"],.st-tabs.hov button:hover{color:var(--sand)}
.story.dark .st-tabs:not(.hov) button[aria-selected="true"],.story.dark .st-tabs.hov button:hover{color:var(--sea)}
/* mini-assiette au survol */
.st-tpv{position:absolute;left:50%;top:calc(100% + 12px);display:grid;justify-items:center;gap:4px;width:150px;margin-left:-75px;padding:8px 8px 10px;border-radius:18px;background:rgba(14,28,31,.9);color:var(--foam);box-shadow:0 18px 40px -16px rgba(0,0,0,.55);backdrop-filter:blur(10px);opacity:0;transform:translateY(-8px) scale(.85);transform-origin:50% 0;transition:opacity .25s,transform .45s cubic-bezier(.34,1.45,.64,1);pointer-events:none}
.st-tpv>i{display:block;width:120px;height:120px;background:center/contain no-repeat;transform:rotate(-8deg) scale(.9);transition:transform .6s cubic-bezier(.34,1.45,.64,1)}
.st-tpv em{font:italic 400 14px/1.2 var(--ff-d);white-space:normal;text-align:center}
.st-tabs button:hover .st-tpv,.st-tabs button:focus-visible .st-tpv{opacity:1;transform:none}
.st-tabs button:hover .st-tpv>i{transform:none}
.st-tabs button[aria-selected="true"]:hover .st-tpv{opacity:0}
@media (hover:none){.st-tpv{display:none}}

.st-stage{position:absolute;inset:0;display:grid;place-items:center;perspective:1700px;perspective-origin:50% 30%;z-index:2;pointer-events:none}
.pl{position:relative;width:min(44vw,60vh);aspect-ratio:1;transition:opacity .38s,filter .38s;will-change:transform}
.pl.out{opacity:0;filter:blur(8px)}
.pl-3d{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.pl-base,.pl-part{position:absolute;inset:0;background-size:cover;background-position:center}
.pl-part{will-change:transform;transition:opacity .45s,filter .35s;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.pl-shadow{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.42),transparent);transform:translate3d(3%,7%,-2px) scale(1.08);opacity:var(--sh,1);filter:blur(10px)}
.pl-mk{position:absolute;width:1px;height:1px}
.pl-cr{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;opacity:0;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.pl-cr:nth-child(3n){border-radius:2px;width:5px;height:9px}

/* pile de couches détourées */
.pl.is-stack{container-type:inline-size}
.ly{position:absolute;will-change:transform;transition:opacity .45s}
.ly img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.ly-full{position:absolute;left:0;top:0;width:100%;z-index:30;pointer-events:none}
.ly-shadow{position:absolute;left:5%;right:5%;top:70%;height:20%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.4),transparent);filter:blur(10px);opacity:var(--sh,1)}
.story.dark .ly-shadow{background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent)}
.ly-cr{position:absolute;z-index:31;width:7px;height:7px;margin:-3.5px;border-radius:50%;opacity:0;pointer-events:none}
.ly-cr:nth-child(3n){border-radius:1px;width:4px;height:8px}
.ly-cr:nth-child(4n){width:4px;height:4px}
.ly-ring{position:absolute;left:8%;right:8%;top:60%;height:30%;border-radius:50%;border:1.5px solid rgba(228,196,137,.85);opacity:0;pointer-events:none;box-shadow:0 0 24px rgba(228,196,137,.45)}
.pl.ripple .ly-ring{animation:orRing 1.1s cubic-bezier(.2,.8,.2,1) both}
.pl.ripple .ly-ring.r2{animation-delay:.16s}
.pl.is-stack.ripple .pl-3d{animation:orSettle .8s cubic-bezier(.3,1.5,.5,1)}
@keyframes orSettle{0%{transform:scale(1.025,.965)}45%{transform:scale(.99,1.015)}100%{transform:none}}
@keyframes orRing{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.35)}}
/* anatomie du plat (comme le pot de tiramisu) : titre à gauche, étiquettes reliées par un trait horizontal */
.story.is-stack .st-card,.story.is-stack .st-toc,.story.is-stack .st-link{display:none}
.st-anat{position:absolute;left:clamp(20px,6vw,90px);top:24vh;z-index:4;max-width:min(420px,32vw);opacity:var(--lab,0);transform:translateY(calc((1 - var(--lab,0)) * 16px));pointer-events:none;display:none}
.story.is-stack .st-anat{display:block}
.st-anat h2{font:400 clamp(44px,4.6vw,72px)/.98 var(--ff-d);letter-spacing:-.01em}
.st-anat h2 em{color:#E4C489}
.st-anat p{margin-top:14px;font-size:16px;opacity:.75}
.st-tagl{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;overflow:visible;display:none}
.story.is-stack .st-tagl{display:block}
.st-tagl path{fill:none;stroke:color-mix(in srgb,#E4C489 calc(var(--g,0) * 100%),rgba(244,238,227,.55));stroke-width:calc(1px + var(--g,0) * .6px)}
.st-tagl circle{fill:#E4C489;filter:drop-shadow(0 0 calc(var(--g,0) * 8px) rgba(228,196,137,.9))}
.st-tags{position:absolute;left:0;top:0;z-index:4;pointer-events:none;display:none}
.story.is-stack .st-tags{display:block}
.st-tags li{position:absolute;left:0;top:0;display:grid;gap:1px;white-space:nowrap;opacity:0;will-change:transform}
.st-tags b{font:700 14.5px/1.2 var(--ff-b);letter-spacing:.005em;color:color-mix(in srgb,#F2D9A6 calc(var(--g,0) * 100%),var(--foam));font-size:calc(14.5px + var(--g,0) * 3px);text-shadow:0 0 calc(var(--g,0) * 18px) rgba(228,196,137,.55)}
.st-tags span{font-size:12px;opacity:calc(.6 + var(--g,0) * .3)}
@media (max-width:1023px){.st-anat{top:96px;left:20px;right:20px;max-width:none}.st-anat h2{font-size:38px}.st-anat p{font-size:14px;margin-top:6px}}
/* présentation des produits (plats en couches) : carte flottante, sommaire, lumière, flou */
.story.is-stack .st-labels,.story.is-stack .st-lines,.story.is-stack .st-panel{display:none}

.st-spot{position:absolute;left:0;top:0;z-index:1;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(closest-side,rgba(232,196,137,.34),rgba(184,149,90,.12) 55%,transparent);filter:blur(20px);opacity:0;transition:opacity .6s,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.st-spot{display:none}
.st-pin::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 70% 70% at 45% 50%,transparent 45%,rgba(5,10,11,.3));opacity:0;transition:opacity .7s;pointer-events:none}
.story.focus-on .st-pin::after{opacity:calc(var(--ex,0))}
.story.focus-on .st-word{filter:blur(3px);opacity:.4;transition:filter .6s,opacity .6s}
.st-word{transition:filter .6s,opacity .6s}
.st-link{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:0;transition:opacity .4s}
.story.focus-on .st-link{opacity:calc(var(--ex,0))}
.st-link path{fill:none;stroke:#E4C489;stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0}
.st-link.draw path{animation:orDraw .7s cubic-bezier(.2,.8,.2,1) both}
.st-link circle{fill:#E4C489;filter:drop-shadow(0 0 6px rgba(228,196,137,.9))}
.st-link.draw circle{animation:orPop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes orDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes orPop{from{r:0}to{r:4}}
.st-toc{position:absolute;left:clamp(20px,5vw,80px);top:50%;z-index:4;display:grid;gap:4px;transform:translateY(-50%);opacity:0;transition:opacity .5s;pointer-events:none;counter-reset:none}
.story.is-stack .st-toc{opacity:calc(var(--ex,0))}
.st-toc li{display:flex;align-items:baseline;gap:14px;padding:7px 0;opacity:.38;transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
.st-toc li i{font:600 11px var(--ff-b);font-style:normal;letter-spacing:.16em;color:var(--brass-t);min-width:20px}
.st-toc li span{font:400 20px/1.1 var(--ff-d);transition:font-size .5s cubic-bezier(.2,.8,.2,1),color .4s}
.st-toc li::after{content:"";align-self:center;width:0;height:1px;background:#E4C489;transition:width .55s cubic-bezier(.2,.8,.2,1)}
.st-toc li.done{opacity:.6}
.st-toc li.on{opacity:1;transform:translateX(8px)}
.st-toc li.on span{font-size:30px;color:#F2DDB2}
.st-toc li.on::after{width:44px}
.st-card{position:absolute;left:0;top:0;z-index:5;width:min(330px,26vw);padding:2px 0 4px 22px;color:var(--foam);opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;pointer-events:none;will-change:transform}
.st-card::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:linear-gradient(#E4C489,rgba(228,196,137,.1))}
.st-card.in{opacity:calc(var(--ex,0));visibility:visible}
.cd-n{font:600 11px var(--ff-b);letter-spacing:.22em;color:#E4C489}
.cd-n em{font-style:normal;opacity:.5}
.cd-txt h3{margin:10px 0 8px;font:400 clamp(30px,2.6vw,40px)/1.02 var(--ff-d);letter-spacing:-.005em}
.cd-o{margin-bottom:12px;font:italic 400 17px/1.3 var(--ff-d);color:#F0D7A6}
.cd-d{max-width:300px;font-size:14px;line-height:1.65;opacity:.78}
.st-card.swap .cd-txt>*{animation:orTxt .8s cubic-bezier(.2,.8,.2,1) both}
.st-card.swap .cd-txt>*:nth-child(2){animation-delay:.05s}.st-card.swap .cd-txt>*:nth-child(3){animation-delay:.1s}.st-card.swap .cd-txt>*:nth-child(4){animation-delay:.15s}
@keyframes orTxt{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@media (max-width:1023px){
  .st-toc,.st-link{display:none}
  .st-card{left:20px!important;right:20px;top:auto!important;bottom:104px;width:auto;padding:0 0 0 16px;transform:none!important}
  .cd-txt h3{font-size:24px}
  .cd-d{font-size:12.5px}
  .st-spot{width:360px;height:360px;margin:-180px 0 0 -180px}
}
/* fiche du plat : anatomie statique, on survole une couche */
.dp-plate{container-type:inline-size}
.dp-plate .pl-flat.is-stack{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.pl-flat.is-stack:not(.is-built){transform:scale(var(--ks,.5)) translateY(var(--ty,0))}
.pl-flat.is-stack .ly{cursor:pointer;transform:translate(var(--x,0),calc(var(--up,0) * -1cqw)) scale(var(--sc,1));transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .4s,filter .4s;filter:drop-shadow(0 12px 14px rgba(0,0,0,.3))}
.pl-flat.is-stack .ly-full{opacity:0;transition:opacity .25s}
.pl-flat.is-stack .ly.on{--x:-2%;--sc:1.06;filter:drop-shadow(0 12px 14px rgba(0,0,0,.3)) brightness(1.08)}
.pl-flat.is-stack.is-built .ly{transform:none;filter:none;opacity:0;transition:none}
.pl-flat.is-stack.is-built.closing .ly{transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .2s .75s,filter .4s}
.pl-flat.is-stack.is-built .ly-full{opacity:1;transition:none}
.pl-flat.is-stack.is-built.closing .ly-full{transition:opacity .3s .7s}
.dp-toggle{display:block;margin:14px auto 0;padding:9px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor;font-size:13px;font-weight:700;letter-spacing:.03em}
.st-lines{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;opacity:var(--ex,0);overflow:visible}
.st-lines path{fill:none;stroke:currentColor;stroke-width:1;opacity:.32;transition:stroke .3s,opacity .3s}
.st-lines circle{fill:currentColor;opacity:.6}
.st-lines .on{stroke:var(--brass);fill:var(--brass);opacity:1}
.st-labels{position:absolute;right:clamp(20px,4.5vw,70px);top:50%;z-index:3;display:grid;gap:clamp(10px,2.4vh,22px);width:min(300px,24vw);transform:translateY(-44%);opacity:var(--ex,0);pointer-events:none}
.st-labels li{display:grid;gap:2px;padding-left:12px;border-left:1px solid rgba(244,238,227,.2);transition:border-color .3s,transform .4s,opacity .3s;opacity:.55}
.st-labels li b{font:400 21px/1.15 var(--ff-d)}
.st-labels li span{font-size:12.5px;opacity:.7}
.st-labels li.on{opacity:1;border-color:var(--brass-t);transform:translateX(-6px)}
.st-labels li.on b{color:#E4C489}
.st-panel{position:absolute;left:clamp(20px,6vw,90px);top:50%;z-index:3;width:min(360px,28vw);transform:translateY(-50%);opacity:var(--ex,0);pointer-events:none}
.st-panel .pn-n{font:600 12px var(--ff-b);letter-spacing:.2em;color:var(--brass-t)}
.st-panel h3{margin:14px 0 6px;font:400 clamp(34px,3.4vw,52px)/1 var(--ff-d)}
.st-panel .pn-o{margin-bottom:14px;font-weight:600;font-size:14px;color:#E4C489}
.st-panel p:last-child{font-size:16px;line-height:1.6;opacity:.85}
.st-panel.swap>*{animation:orIn .55s cubic-bezier(.2,.8,.2,1) both}
.st-panel.swap>*:nth-child(2){animation-delay:.05s}.st-panel.swap>*:nth-child(3){animation-delay:.1s}.st-panel.swap>*:nth-child(4){animation-delay:.15s}
@keyframes orIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.st-facts{position:absolute;inset:0;z-index:3;pointer-events:none}
.fc{position:absolute;display:grid;gap:6px;width:min(250px,22vw);padding-top:14px;border-top:1px solid rgba(244,238,227,.35)}
.fc span{font:600 11px var(--ff-b);letter-spacing:.2em;text-transform:uppercase;color:#E9C998}
.fc b{font:400 clamp(20px,1.8vw,27px)/1.15 var(--ff-d)}
.fc0{left:clamp(20px,7vw,110px);top:22vh;opacity:calc(clamp(0,var(--fsteps,0) * 6,1) * var(--facts,0))}
.fc1{right:clamp(20px,7vw,110px);top:22vh;text-align:right;opacity:calc(clamp(0,var(--fsteps,0) * 6 - 1,1) * var(--facts,0))}
.fc2{left:clamp(20px,7vw,110px);bottom:16vh;opacity:calc(clamp(0,var(--fsteps,0) * 6 - 2,1) * var(--facts,0))}
.fc3{right:clamp(20px,7vw,110px);bottom:16vh;text-align:right;opacity:calc(clamp(0,var(--fsteps,0) * 6 - 3,1) * var(--facts,0))}

.st-detail{position:absolute;right:clamp(20px,5vw,80px);top:calc(50% + 36px);z-index:4;width:min(560px,44vw);max-height:calc(100vh - 210px);overflow:auto;padding:4px 6px 4px 0;transform:translate(calc((1 - var(--fin,0)) * 60px),-50%);opacity:var(--fin,0);pointer-events:none;scrollbar-width:thin}
.story.at-fin .st-detail{pointer-events:auto}
.st-detail h2{margin:10px 0 6px;font:400 clamp(40px,4vw,62px)/1 var(--ff-d)}
.dt-short{font:italic 400 22px/1.3 var(--ff-d);opacity:.8}
.dt-d{margin:16px 0 20px;font-size:15.5px;line-height:1.65;opacity:.88}
.dt-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin:0 0 22px}
.dt-facts div{padding-top:10px;border-top:1px solid var(--line)}
.dt-facts dt{font:600 10.5px var(--ff-b);letter-spacing:.18em;text-transform:uppercase;color:var(--brass-t)}
.dt-facts dd{margin:4px 0 0;font-size:14.5px;font-weight:500}
.st-detail h3{font:600 11px var(--ff-b);letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px;opacity:.7}
.dt-parts{display:grid;gap:0;margin-bottom:18px}
.dt-parts li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.dt-parts li span{opacity:.65;text-align:right}
.dt-al{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:20px}
.dt-al>span{font:600 10.5px var(--ff-b);letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.dt-al ul{display:flex;flex-wrap:wrap;gap:6px}
.dt-al li{padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong);font-size:12.5px;font-weight:600}
blockquote{margin:0 0 18px;padding-left:16px;border-left:2px solid var(--brass);font:italic 400 21px/1.35 var(--ff-d)}
blockquote cite{display:block;margin-top:6px;font:600 12px var(--ff-b);font-style:normal;opacity:.65}
.dt-menu{font-size:14px;margin-bottom:18px;opacity:.85}
.dt-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.story.dark .dt-facts div,.story.dark .dt-parts li{border-color:rgba(244,238,227,.2)}
.story.dark .dt-al li{box-shadow:inset 0 0 0 1px rgba(244,238,227,.35)}
.story.dark .btn.ghost{color:var(--foam);box-shadow:inset 0 0 0 1.5px rgba(244,238,227,.5)}

.st-prog{position:absolute;right:22px;bottom:28px;z-index:4;opacity:calc(1 - var(--fin,0));display:grid;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.06em}
.st-prog li{display:flex;align-items:center;justify-content:flex-end;gap:8px;opacity:.4;transition:opacity .3s}
.st-prog li i{order:2;width:34px;height:1.5px;background:currentColor;transform:scaleX(.53);transform-origin:0 50%;transition:transform .4s}
.st-prog li.on{opacity:1}.st-prog li.on i{transform:none;background:var(--brass)}
.st-prog li.done{opacity:.7}

/* ---------- les sept temps ---------- */
.seven{padding:120px 0 110px;background:var(--sand)}
.sec-h{max-width:640px;margin:0 auto 54px;text-align:center}
.sec-h.left{margin:0 0 34px;text-align:left}
.sec-h h1,.sec-h h2{margin:14px 0 14px;font:400 clamp(44px,5vw,76px)/1 var(--ff-d)}
.sec-h h1 em,.sec-h h2 em{color:var(--terra)}
.sec-h p{color:var(--muted);font-size:16.5px}
.seven-row{display:grid;grid-template-columns:repeat(7,1fr);gap:18px}
.seven-row li{display:grid;gap:10px;justify-items:center;text-align:center}
.sv{display:grid;justify-items:center;gap:6px;text-decoration:none}
.th{display:block;width:100%;aspect-ratio:1;background:var(--img) center/cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.sv .th{filter:drop-shadow(0 14px 18px rgba(0,0,0,.18))}
.sv:hover .th{transform:rotate(18deg) scale(1.05)}
.sv b{margin-top:10px;font:400 18px var(--ff-d);color:var(--brass-t)}
.sv strong{font:400 21px/1.1 var(--ff-d)}
.sv small{font-size:12.5px;color:var(--muted);line-height:1.4}
.sv-3d{font-size:12.5px;font-weight:700;letter-spacing:.04em;border-bottom:1px solid currentColor;padding-bottom:1px;opacity:.7}
.sv-3d:hover{opacity:1}
@media (max-width:1023px){.seven-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin:0 -24px;padding:0 24px 10px}.seven-row li{flex:0 0 46%;scroll-snap-align:center}}

.split{display:grid;grid-template-columns:1.1fr 1fr;min-height:86vh;background:var(--sea);color:var(--foam)}
.split-img{background:center/cover}
.split-txt{align-self:center;padding:clamp(40px,7vw,110px)}
.split-txt h2{margin:14px 0 20px;font:400 clamp(44px,5vw,74px)/1 var(--ff-d)}
.split-txt h2 em{color:#E4C489}
.split-txt p{max-width:470px;margin-bottom:28px;font-size:17px;line-height:1.65;opacity:.85}
@media (max-width:860px){.split{grid-template-columns:1fr}.split-img{min-height:60vh}}
.cta-res{padding:110px 0;background:var(--terra);color:var(--foam)}
.cta-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:30px}
.cta-in h2{max-width:720px;font:400 clamp(40px,4.6vw,68px)/1.02 var(--ff-d)}
.cta-in h2 em{opacity:.75}
.cta-in div{display:grid;gap:16px;justify-items:start}
.cta-res .btn{background:var(--foam);color:var(--sea)}

/* ---------- pages ---------- */
.pg{padding:140px 0 110px;min-height:80vh}
.mn{display:grid;max-width:900px;margin:0 auto}
.mn a{display:grid;grid-template-columns:96px 40px 1fr auto;align-items:center;gap:22px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .3s}
.mn a:hover{padding-left:10px}
.mn .th{width:96px}
.mn i{font:400 22px var(--ff-d);font-style:normal;color:var(--brass-t)}
.mn b{display:block;font:400 28px/1.1 var(--ff-d)}
.mn span{display:block;font-size:14.5px;color:var(--muted)}
.mn small{display:block;margin-top:4px;font-size:12px;color:var(--muted);opacity:.8}
.mn em{font-style:normal;font-size:13px;font-weight:700;white-space:nowrap}
@media (max-width:700px){.mn a{grid-template-columns:72px 1fr;gap:14px}.mn .th{width:72px}.mn i,.mn em{display:none}}
.mn-price{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:44px auto 36px}
.mn-price div{display:grid;gap:4px;padding:22px;border-radius:16px;background:rgba(255,255,255,.4);box-shadow:inset 0 0 0 1px var(--line)}
.mn-price b{font-size:14px}
.mn-price span{font:400 38px/1 var(--ff-d)}
.mn-price small{font-size:12.5px;color:var(--muted)}
@media (max-width:760px){.mn-price{grid-template-columns:1fr}}

.dp{padding:120px 0 90px}
.dp.is-dark{background:var(--sea);color:var(--foam)}
.dp.is-dark .dt-facts div,.dp.is-dark .dp-parts button{border-color:rgba(244,238,227,.18)}
.dp.is-dark .dt-al li{box-shadow:inset 0 0 0 1px rgba(244,238,227,.35)}
.dp.is-dark .btn{background:var(--foam);color:var(--sea)}
.dp.is-dark .btn.ghost{background:transparent;color:var(--foam);box-shadow:inset 0 0 0 1.5px rgba(244,238,227,.5)}
.dp-back{display:inline-block;margin-bottom:26px;font-size:14px;font-weight:600;text-decoration:none;opacity:.7}
.dp-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.dp-plate{position:sticky;top:96px}
.pl-flat{width:100%}
.pl-flat .pl-base{transition:filter .45s}
.pl-flat .pl-part{opacity:0;transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1),filter .4s}
.pl-flat.has-on .pl-base{filter:brightness(.42) saturate(.55)}
.pl-flat .pl-part.on{opacity:1;transform:scale(1.035);filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.pl-hot{position:absolute;z-index:3;width:34px;height:34px;margin:-17px;border-radius:50%;display:grid;place-items:center}
.pl-hot i{width:12px;height:12px;border-radius:50%;background:var(--foam);box-shadow:0 0 0 2px rgba(14,28,31,.5),0 0 0 0 rgba(244,238,227,.6);animation:orPulse 2.4s infinite}
.pl-hot.on i{background:var(--brass);animation:none;box-shadow:0 0 0 3px rgba(244,238,227,.9)}
@keyframes orPulse{0%{box-shadow:0 0 0 2px rgba(14,28,31,.5),0 0 0 0 rgba(244,238,227,.6)}70%{box-shadow:0 0 0 2px rgba(14,28,31,.5),0 0 0 14px rgba(244,238,227,0)}100%{box-shadow:0 0 0 2px rgba(14,28,31,.5),0 0 0 0 rgba(244,238,227,0)}}
.dp-hint{margin-top:14px;text-align:center;font-size:13px;font-weight:600;opacity:.6}
.dp-card{position:relative;z-index:4;width:min(380px,92%);min-height:118px;margin:14px auto 0;padding:16px 18px;border-radius:14px;background:rgba(14,28,31,.92);color:var(--foam);box-shadow:inset 0 0 0 1px rgba(244,238,227,.12);transform:translateY(8px);opacity:0;transition:opacity .3s,transform .4s;pointer-events:none}
.dp-card.in{opacity:1;transform:none}
.dp-card span{font:600 11px var(--ff-b);letter-spacing:.2em;color:var(--brass-t)}
.dp-card b{display:block;margin:4px 0 2px;font:400 24px/1.1 var(--ff-d)}
.dp-card em{display:block;margin-bottom:6px;font-style:normal;font-size:13px;color:#E4C489}
.dp-card p{font-size:13.5px;line-height:1.5;opacity:.85}
.dp-txt h1{margin:10px 0 6px;font:400 clamp(46px,5vw,76px)/1 var(--ff-d)}
.dp-parts{display:grid;margin:6px 0 24px}
.dp-parts button{display:grid;grid-template-columns:36px 1fr auto;align-items:baseline;gap:10px;width:100%;padding:12px 0;border-bottom:1px solid var(--line);text-align:left;transition:padding .3s,color .3s}
.dp-parts button i{font:600 11px var(--ff-b);font-style:normal;letter-spacing:.14em;color:var(--brass-t)}
.dp-parts button b{font:400 20px/1.15 var(--ff-d)}
.dp-parts button span{font-size:12.5px;opacity:.6;text-align:right}
.dp-parts button.on,.dp-parts button:hover{padding-left:8px}
.dp-parts button.on b{color:var(--terra)}
.dp.is-dark .dp-parts button.on b{color:#E4C489}
.dp-nav{display:flex;justify-content:space-between;gap:20px;margin-top:70px;padding-top:28px;border-top:1px solid var(--line)}
.dp.is-dark .dp-nav{border-color:rgba(244,238,227,.18)}
.dp-nav a{display:flex;align-items:center;gap:14px;text-decoration:none;font:400 22px/1.1 var(--ff-d)}
.dp-nav a:last-child{text-align:right}
.dp-nav small{display:block;font:600 11px var(--ff-b);letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:4px}
.dp-nav .th{width:64px;flex:none}
@media (max-width:900px){.dp-grid{grid-template-columns:1fr}.dp-plate{position:relative;top:0}.dp-nav a{font-size:17px}.dp-nav .th{width:48px}}

.exp-grid{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:300px 300px;gap:14px;margin-bottom:70px}
.exp-grid figure{position:relative;margin:0;border-radius:18px;background:center/cover;overflow:hidden}
.exp-grid .e1{grid-row:span 2}
.exp-grid figcaption{position:absolute;left:14px;bottom:14px;padding:7px 12px;border-radius:999px;background:rgba(14,28,31,.75);color:var(--foam);font-size:12.5px;font-weight:600;backdrop-filter:blur(6px)}
@media (max-width:760px){.exp-grid{grid-template-columns:1fr;grid-template-rows:340px 240px 240px}.exp-grid .e1{grid-row:auto}}
.steps-x{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.steps-x li{display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--line)}
.steps-x i{font:400 18px var(--ff-d);font-style:normal;color:var(--brass-t)}
.steps-x b{font:400 28px/1.1 var(--ff-d)}
.steps-x p{font-size:14.5px;color:var(--muted)}
@media (max-width:860px){.steps-x{grid-template-columns:1fr 1fr}}
.bd-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:start}
.bd-img{position:sticky;top:100px;aspect-ratio:3/4;border-radius:18px;background:center/cover}
.bd-grid h3{font:400 30px var(--ff-d);margin-bottom:14px}
.bd-pair,.bd-glass{margin-bottom:44px}
.bd-pair li,.bd-glass li{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.bd-glass li{grid-template-columns:1fr auto auto}
.bd-pair i{font:400 18px var(--ff-d);font-style:normal;color:var(--brass-t)}
.bd-pair b,.bd-glass b{font:400 20px var(--ff-d)}
.bd-pair span,.bd-glass span{font-size:13.5px;color:var(--muted);text-align:right}
.bd-glass em{font-style:normal;font-weight:700;font-size:14px;min-width:50px;text-align:right}
@media (max-width:860px){.bd-grid{grid-template-columns:1fr}.bd-img{position:relative;top:0;aspect-ratio:16/10}.bd-pair li{grid-template-columns:32px 1fr}.bd-pair span{grid-column:2;text-align:left}}

.rs-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
.rs-blk{padding:22px 0;border-top:1px solid var(--line)}
.rs-blk h3{font:600 11.5px var(--ff-b);letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;color:var(--muted)}
.rs-blk small{display:block;margin-top:10px;font-size:12.5px;color:var(--muted)}
.rs-days,.rs-row,.rs-times{display:flex;flex-wrap:wrap;gap:8px}
.rs-times{margin-top:14px}
.rs-days .chip{text-transform:capitalize}
.rs-opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .2s,background-color .2s}
.opt:has(input:checked){box-shadow:inset 0 0 0 1.5px var(--ink);background:rgba(255,255,255,.4)}
.opt input{accent-color:var(--sea);width:18px;height:18px}
.opt span{display:flex;justify-content:space-between;flex:1;gap:10px}
.opt em{font-style:normal;font-weight:700}
.rs-fields{display:grid;gap:16px}
.rs-sum{position:sticky;top:100px;padding:28px;border-radius:20px;background:var(--sea);color:var(--foam)}
.rs-sum dl{display:grid;gap:12px;margin:16px 0 20px}
.rs-sum dl div{display:flex;justify-content:space-between;gap:14px;padding-bottom:10px;border-bottom:1px solid rgba(244,238,227,.14)}
.rs-sum dt{opacity:.65;font-size:14px}
.rs-sum dd{margin:0;font-weight:600;text-align:right}.rs-sum dd::first-letter{text-transform:uppercase}
.rs-tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.rs-tot b{font:400 40px var(--ff-d)}
.rs-sum .btn{background:var(--foam);color:var(--sea)}
.rs-note{margin-top:12px;font-size:12.5px;opacity:.65}
@media (max-width:900px){.rs-grid{grid-template-columns:1fr}.rs-sum{position:relative;top:0}}
.ok-in{max-width:620px;text-align:center}
.ok-in h1{margin:12px 0 30px;font:400 clamp(44px,5vw,70px)/1.02 var(--ff-d)}
.ok-in h1 em{color:var(--terra)}
.ticket{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-bottom:22px;border-radius:18px;overflow:hidden;background:var(--line);box-shadow:0 30px 60px -30px rgba(14,28,31,.4)}
.ticket div{display:grid;gap:4px;padding:18px;background:var(--foam);text-align:left}
.ticket span{font:600 10.5px var(--ff-b);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.ticket b{font:400 24px var(--ff-d)}.ticket b::first-letter{text-transform:uppercase}
.ok-in .demo-note{text-align:left;margin-bottom:24px}

/* ---------- pied de page ---------- */
.ft{background:var(--sea);color:var(--foam);padding:80px clamp(20px,4vw,56px) 30px}
.ft-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;max-width:1240px;margin:0 auto 50px}
.ft-brand b{font:400 54px/1 var(--ff-d)}
.ft-brand p{margin-top:10px;opacity:.7}
.ft h4{font:600 11px var(--ff-b);letter-spacing:.18em;text-transform:uppercase;color:var(--brass-t);margin-bottom:12px}
.ft p{font-size:14.5px;line-height:1.7;opacity:.85;margin-bottom:8px}
.ft a{text-decoration:none;border-bottom:1px solid rgba(244,238,227,.3)}
.ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;max-width:1240px;margin:0 auto;padding-top:22px;border-top:1px solid rgba(244,238,227,.14);font-size:12.5px;opacity:.6}
@media (max-width:860px){.ft-in{grid-template-columns:1fr 1fr}.ft-brand{grid-column:span 2}}

/* ---------- voile de transition ---------- */
.veil{position:fixed;inset:0;z-index:90;background:var(--sea);transform:translateY(100%);pointer-events:none}
.veil::after{content:"Lonja";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:400 54px var(--ff-d);color:var(--brass-t);opacity:0;transition:opacity .3s .15s}
.veil.in{transform:none;transition:transform .42s cubic-bezier(.7,0,.3,1)}
.veil.in::after{opacity:1}
.veil.out{transform:translateY(-100%);transition:transform .6s cubic-bezier(.7,0,.3,1)}

/* ---------- mobile : l'histoire se lit en colonne ---------- */
@media (max-width:1023px){
  .story{height:260vh}
  .st-hero{left:20px;right:20px;top:92px;width:auto;transform:translateY(calc((1 - var(--hero,1)) * -30px))}
  .st-hero h1{font-size:clamp(40px,11vw,58px);margin:12px 0 12px}
  .st-hero .lead{font-size:15px}
  .st-hero .ctas{margin-top:18px}
  .hint{display:none}
  .st-tabs{top:auto;bottom:54px;max-width:calc(100% - 24px);overflow-x:auto;scrollbar-width:none}
  .st-panel{bottom:112px!important}
  .fc2,.fc3{bottom:112px!important}
  .pl{width:min(74vw,42vh)}
  .st-labels,.st-lines,.st-prog{display:none}
  .st-panel{left:20px;right:20px;top:auto;bottom:84px;width:auto;transform:none;text-align:center}
  .st-panel h3{font-size:34px;margin:8px 0 4px}
  .st-panel .pn-o{margin-bottom:6px}
  .st-panel p:last-child{font-size:14.5px}
  .fc{width:42vw}
  .fc0,.fc2{left:20px}.fc1,.fc3{right:20px}
  .fc0,.fc1{top:96px}.fc2,.fc3{bottom:84px}
  .fc b{font-size:19px}
  .st-word{font-size:58vw;bottom:auto;top:40%}
}

/* ---------- Lucian UX/UI : jetons calés sur la palette Lonja ---------- */
/* Lucian UX/UI Prompt theme tokens · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/ */
.ux{--ux-ink:var(--ink);--ux-ink-2:#3d4a47;--ux-ink-3:var(--muted);--ux-page:var(--foam);--ux-surface:rgba(255,255,255,.55);--ux-surface-2:rgba(19,32,30,.06);--ux-surface-3:rgba(19,32,30,.12);--ux-line:var(--line);--ux-shadow-strong:rgba(14,28,31,.35);--ux-accent:var(--brass);--ux-mint:#2f6e58;--ux-ease:cubic-bezier(.2,.8,.2,1);--ux-spring:cubic-bezier(.34,1.45,.64,1);font-family:inherit}
.ux,.ux *,.ux *::before,.ux *::after{box-sizing:border-box}

/* Lucian UX/UI Prompt #018 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#018 */
.u018{position:relative;width:min(420px,100%);margin-bottom:6px}
.u018-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}
.u018-step{display:flex;align-items:center;height:60px;padding:6px;border-radius:999px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 16px 30px -22px var(--ux-shadow-strong)}
.u018-step.is-shake{animation:u018-no .42s var(--ux-ease)}
@keyframes u018-no{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.u018-b{width:48px;height:48px;border:0;padding:0;border-radius:50%;background:var(--ux-surface-2);color:var(--ux-ink);display:grid;place-items:center;transition:transform .4s var(--ux-spring),background-color .25s var(--ux-ease),opacity .3s var(--ux-ease)}
.u018-b:hover{background:var(--ux-surface-3)}
.u018-b:active{transform:scale(.86)}
.u018-b:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
.u018-b[aria-disabled="true"]{opacity:.35}
.u018-b svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.u018-b.pl{background:var(--ux-ink);color:var(--ux-page)}
.u018-b.pl:hover{background:var(--ux-ink)}
.u018-num{display:flex;justify-content:center;width:56px;height:34px;overflow:hidden;font-size:26px;font-weight:780;line-height:34px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.u018-col{display:flex;flex-direction:column;transition:transform .55s var(--ux-spring),width .4s var(--ux-ease),opacity .3s var(--ux-ease)}
.u018-col span{height:34px;text-align:center}
.u018-col.is-hide{width:0!important;opacity:0}
.u018-sum{text-align:right}
.u018-sum small{display:block;font-size:12.5px;color:var(--ux-ink-3)}
.u018-sum b{display:block;margin-top:2px;font:400 30px/1 var(--ff-d);font-variant-numeric:tabular-nums}
.u018-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Lucian UX/UI Prompt #013 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#013 */
.u013{--on:linear-gradient(135deg,#B8955A,#8C3A22);position:relative;display:flex;align-items:center;gap:20px;padding:10px 0}
.u013-sw{position:relative;flex:none;width:140px;height:76px;border:0;padding:0;border-radius:999px;background:var(--ux-surface-3);touch-action:none;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.12),inset 0 0 0 1px var(--ux-line);transition:box-shadow .5s var(--ux-ease)}
.u013-sw::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--on);opacity:0;transition:opacity .45s var(--ux-ease)}
.u013-sw:focus-visible{outline:2px solid var(--ux-accent);outline-offset:4px}
.u013.is-on .u013-sw::before{opacity:1}
.u013.is-on .u013-sw{box-shadow:inset 0 2px 6px rgba(0,0,0,.12),0 16px 30px -16px rgba(140,58,34,.8)}
.u013-knob{position:absolute;top:8px;left:8px;width:60px;height:60px;border-radius:999px;background:#fff;display:grid;place-items:center;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 6px 14px -4px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.06);
  transition:left .5s var(--ux-spring),width .32s var(--ux-ease)}
.u013.is-on .u013-knob{left:72px}
.u013.is-stretch .u013-knob{width:84px;transition:left .5s var(--ux-spring),width .18s var(--ux-ease)}
.u013.is-on.is-stretch .u013-knob{left:48px}
.u013.is-drag .u013-knob{transition:width .2s var(--ux-ease)}
.u013-knob svg{width:24px;height:24px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.u013-x{stroke:#A3A0AA;stroke-dasharray:14;stroke-dashoffset:0;transition:stroke-dashoffset .3s var(--ux-ease) .1s}
.u013-v{stroke:#8C3A22;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .35s var(--ux-ease)}
.u013.is-on .u013-x{stroke-dashoffset:14;transition-delay:0s}
.u013.is-on .u013-v{stroke-dashoffset:0;transition-delay:.18s}
.u013-txt{min-width:0}
.u013-txt b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.u013-sub{position:relative;display:block;height:20px;margin-top:5px;overflow:hidden;font-size:14px;color:var(--ux-ink-3)}
.u013-sub span{display:block;line-height:20px;white-space:nowrap;transition:transform .5s var(--ux-spring),opacity .3s var(--ux-ease)}
.u013-sub span+span{position:absolute;left:0;right:0;top:0;transform:translateY(100%);opacity:0;color:var(--terra);font-weight:620}
.u013.is-on .u013-sub span:first-child{transform:translateY(-100%);opacity:0}
.u013.is-on .u013-sub span+span{transform:none;opacity:1}
@media (max-width:420px){.u013-sub span{white-space:normal}.u013-sub{height:auto}.u013-sub span+span{position:static;display:none}.u013.is-on .u013-sub span:first-child{display:none}.u013.is-on .u013-sub span+span{display:block}}

/* ---------- cave : accord interactif (le verre se vide puis se remplit de la couleur du vin) ---------- */
.pr{display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;align-items:center;gap:clamp(24px,5vw,70px);margin:0 0 80px;padding:clamp(28px,5vw,60px);border-radius:28px;background:radial-gradient(ellipse at 25% 40%,#1d3538,var(--sea) 70%);color:var(--foam);--wine:#E6CF86;--wine2:#C9A94E}
.pr-stage{position:relative;display:grid;place-items:center;min-height:340px}
.pr-glass{width:min(230px,100%);height:auto;overflow:visible;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.pr-liq{transform:translateY(175px)}
.pr.pour .pr-liq{animation:prPour 1.6s cubic-bezier(.65,0,.35,1) forwards}
@keyframes prPour{0%{transform:translateY(var(--from,175px))}35%{transform:translateY(175px)}100%{transform:translateY(64px)}}
.pr-fill{fill:var(--wine2);transition:fill .3s .5s}
.pr-wave{fill:var(--wine);transition:fill .3s .5s;animation:prWave 2.4s linear infinite}
@keyframes prWave{to{transform:translateX(100px)}}
.pr-drop{position:absolute;left:50%;top:-6px;width:5px;height:0;margin-left:-2.5px;border-radius:3px;background:linear-gradient(var(--wine),var(--wine2));opacity:0}
.pr.pour .pr-drop{animation:prDrop 1.6s cubic-bezier(.65,0,.35,1)}
@keyframes prDrop{0%,32%{height:0;opacity:0;top:-6px}40%{height:150px;opacity:1;top:-6px}85%{height:150px;opacity:1;top:-6px}100%{height:0;opacity:0;top:144px}}
.pr-txt h2{margin:12px 0 22px;font:400 clamp(34px,3.6vw,54px)/1.02 var(--ff-d)}
.pr-txt h2 em{color:#E4C489}
.pr-dishes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.pr-dishes button{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(244,238,227,.06);box-shadow:inset 0 0 0 1px rgba(244,238,227,.14);transition:transform .45s cubic-bezier(.34,1.45,.64,1),box-shadow .3s}
.pr-dishes button img{width:118%;max-width:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4));transition:transform .5s cubic-bezier(.34,1.45,.64,1)}
.pr-dishes button i{position:absolute;bottom:-6px;padding:1px 6px;border-radius:999px;background:var(--sea);font:400 12px/1.3 var(--ff-d);font-style:normal;color:#E4C489;box-shadow:0 0 0 1px rgba(244,238,227,.14)}
.pr-dishes button:hover{transform:translateY(-3px)}
.pr-dishes button:hover img{transform:rotate(-10deg) scale(1.06)}
.pr-dishes button[aria-checked="true"]{box-shadow:inset 0 0 0 2px #E4C489,0 0 0 4px rgba(228,196,137,.18)}
.pr-info{min-height:170px}
.pr-num{font:600 11px var(--ff-b);letter-spacing:.18em;text-transform:uppercase;color:#E4C489}
.pr-info h3{margin:8px 0 4px;font:400 clamp(28px,2.6vw,38px)/1.05 var(--ff-d)}
.pr-wine{font:italic 400 17px var(--ff-d);opacity:.8;margin-bottom:12px}
.pr-notes{font-size:15px;opacity:.9;margin-bottom:6px}
.pr-why{font-size:14px;opacity:.7;line-height:1.6;max-width:460px}
.pr-info.swap>*{animation:orTxt .7s cubic-bezier(.2,.8,.2,1) both}
.pr-info.swap>*:nth-child(2){animation-delay:.5s}.pr-info.swap>*:nth-child(3){animation-delay:.58s}.pr-info.swap>*:nth-child(4){animation-delay:.66s}.pr-info.swap>*:nth-child(5){animation-delay:.74s}
@media (max-width:760px){.pr{grid-template-columns:1fr;text-align:left}.pr-stage{min-height:260px}.pr-glass{width:170px}.pr-dishes button{width:54px;height:54px}}
.kd-reduce .pr.pour .pr-liq{animation:none;transform:translateY(64px)}.kd-reduce .pr-drop{display:none}.kd-reduce .pr-wave{animation:none}
/* ---------- Cave : anatomie du vermouth + vitrine « au verre » ---------- */
.pg.bodega{padding-top:0}
.vm{position:relative;overflow-x:clip}
.vm-pin{height:330vh}
.vm-sticky{position:sticky;top:0;z-index:2;height:100vh;background:radial-gradient(ellipse at 64% 55%,#1d3538,var(--sea) 70%);color:var(--foam)}
.vm-bg{position:absolute;inset:0;background:radial-gradient(circle at 64% 55%,#7a2a18,#3a120c 55%,#1f0907);clip-path:circle(0)}
.vm-txt{position:absolute;left:max(24px,6vw);top:50%;z-index:3;width:min(440px,32vw);transform:translateY(-50%)}
.vm-txt .eyebrow{color:#E4C489}
.vm-txt h1{margin:14px 0 18px;font:400 clamp(48px,5.4vw,84px)/.98 var(--ff-d)}
.vm-txt h1 em{color:#E4C489}
.vm-txt p:last-child{max-width:340px;font-size:16px;opacity:.75}
.vm-glass{position:absolute;left:0;top:0;z-index:5;transform-origin:50% 50%;will-change:transform;pointer-events:none}
.vm-stk{position:absolute;inset:0}
.vm-stk .ly{transition:none}
.vm-tags{position:absolute;inset:0;z-index:40}
.vm-tags li{position:absolute;display:flex;align-items:center;gap:12px;white-space:nowrap;opacity:0;transform:translateY(-50%);--g:0}
.vm-tags li i{position:relative;flex:none;height:1px;background:color-mix(in srgb,#E4C489 calc(var(--g) * 100%),rgba(244,238,227,.35))}
.vm-tags li i::before{content:"";position:absolute;left:-3.5px;top:-3px;width:7px;height:7px;border-radius:50%;background:#E4C489;box-shadow:0 0 calc(var(--g) * 14px) rgba(228,196,137,.95)}
.vm-tags span{display:grid;gap:2px}
.vm-tags b{font:700 calc(.9em + var(--g) * .2em)/1.2 var(--ff-b);color:color-mix(in srgb,#F2D9A6 calc(var(--g) * 100%),var(--foam));text-shadow:0 0 calc(var(--g) * 18px) rgba(228,196,137,.55)}
.vm-tags small{font-size:.75em;opacity:calc(.55 + var(--g) * .35)}
.vm-shelf{position:relative;z-index:1;padding:110px 0 100px}
.vm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vm-card{position:relative;padding:12px 12px 18px;border-radius:22px;background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px var(--line);transition:transform .5s cubic-bezier(.34,1.45,.64,1),box-shadow .3s}
.vm-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line),0 22px 34px -24px rgba(19,32,30,.55)}
.vm-card figure{position:relative;display:grid;place-items:center;aspect-ratio:1;margin:0 0 14px;border-radius:16px;background:radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--c) 34%,#fff),color-mix(in srgb,var(--c) 10%,var(--foam)) 72%)}
.vm-card svg{width:46%;height:auto;overflow:visible;filter:drop-shadow(0 14px 12px rgba(19,32,30,.2));transition:transform .6s cubic-bezier(.34,1.45,.64,1)}
.vm-card:hover svg{transform:rotate(-6deg)}
.vm-liq{fill:var(--c)}
.vm-card>*:not(figure){margin-left:6px;margin-right:6px}
.vm-card small{display:block;font:600 10.5px var(--ff-b);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-t)}
.vm-card h3{margin:6px 0 2px;font:400 24px/1.1 var(--ff-d)}
.vm-o{font:italic 400 15px/1.3 var(--ff-d);color:var(--muted)}
.vm-n{min-height:3.2em;margin:8px 0 12px;font-size:13.5px;line-height:1.5;opacity:.8}
.vm-card b{display:block;font:400 20px var(--ff-d)}
.vm-home{--c:#B4532E}
.vm-slot i{position:absolute;inset:16%;border-radius:50%;border:1.5px dashed rgba(140,58,34,.45);transition:opacity .4s,transform .6s cubic-bezier(.34,1.45,.64,1)}
.vm-home.landed .vm-slot i{opacity:0;transform:scale(.8)}
.vm-home.landed .vm-slot::after{content:"";position:absolute;inset:22%;border-radius:50%;border:2px solid #E4C489;animation:vmRip .9s cubic-bezier(.2,.8,.2,1) forwards;pointer-events:none}
@keyframes vmRip{from{transform:scale(.55);opacity:1}to{transform:scale(1.45);opacity:0}}
.vm-home>:not(figure){transition:opacity .5s .1s}
.vm-home:not(.landed)>:not(figure){opacity:.3}
.vm-home:hover svg{transform:none}
@media (max-width:899px){
  .vm-pin{height:300vh}
  .vm-txt{top:92px;left:20px;right:20px;width:auto;transform:none}
  .vm-txt h1{margin:8px 0 8px;font-size:clamp(38px,10vw,52px)}
  .vm-txt p:last-child{font-size:14px}
  .vm-shelf{padding:70px 16px 70px}
  .vm-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .vm-card h3{font-size:20px}
  .vm-n{display:none}
}
/* le verre se cale : petit rebond (écrasement puis retour), halo doré et case qui s'enfonce légèrement */
.vm-glass.settle .ly-full{transform-origin:50% 88%;animation:vmSettle .8s cubic-bezier(.3,1.4,.5,1)}
@keyframes vmSettle{0%{transform:translateY(-3%)}35%{transform:translateY(.6%) scale(1.05,.94)}65%{transform:scale(.98,1.03)}100%{transform:none}}
.vm-home.landed figure{animation:vmPress .7s cubic-bezier(.3,1.4,.5,1)}
@keyframes vmPress{30%{transform:scale(.97)}100%{transform:none}}
.vm-home figure::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(228,196,137,.55),transparent);opacity:0;pointer-events:none}
.vm-home.landed figure::before{animation:vmGlow 1.2s ease-out}
@keyframes vmGlow{20%{opacity:1}100%{opacity:0}}
@media (max-width:899px){.vm-home{order:-1}}
.vm-tags span{white-space:normal}
.vm-tags span{flex:none}
/* vignettes : photo détourée du plat entier (vue 3/4), sans recadrage */
.th.th-st{background:var(--img) center/contain no-repeat}
.sv:hover .th.th-st{transform:translateY(-6px) rotate(-4deg) scale(1.04)}

/* =====================================================================
   Revue design : une seule fiche, mobile court, étiquettes lisibles, contraste, mouvement réduit
   ===================================================================== */
.story.dark,.split,.pr,.vm-sticky,.ft,.dp.is-dark,.kd-mnav,.isl{--brass-t:#E4C489}
.ft-bot{opacity:.8}
.st-prog li{opacity:.6}
.sv-3d{opacity:.85}
/* 4. étiquettes de l'anatomie : fond derrière le texte, jamais illisibles sur l'assiette */
.st-tags li{padding:6px 11px 7px;border-radius:10px;background:rgba(14,28,31,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(244,238,227,calc(.08 + var(--g,0) * .3))}
/* 7. mot géant : contour plus marqué en grand écran, retiré sous 1024 px */
.st-word span{-webkit-text-stroke:1.2px rgba(19,32,30,.34)}
.story.dark .st-word span{-webkit-text-stroke-color:rgba(244,238,227,.24)}
/* 5. carrousel des sept temps */
.seven-row{position:relative;scrollbar-width:none}
.seven-row::-webkit-scrollbar{display:none}
.sv small{font-size:14px}
.sv-nav{display:none}
@media (max-width:1023px){
  .st-word{display:none}
  .st-tags li{white-space:normal;padding:4px 9px 5px}
  .st-tags b{font-size:calc(12.5px + var(--g,0) * 1.5px)}
  .st-tags span{display:none}
  .seven-row li{flex:0 0 min(64%,300px)}
  .sv-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px}
  .sv-arr{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink)}
  .sv-arr svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .sv-dots{display:flex}
  .sv-dots button{display:grid;place-items:center;width:24px;height:44px}
  .sv-dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-strong);transition:width .35s cubic-bezier(.2,.8,.2,1),background-color .3s}
  .sv-dots button[aria-current]::before{width:20px;border-radius:4px;background:var(--ink)}
  .sv-arr:focus-visible,.sv-dots button:focus-visible{outline:2px solid var(--brass-t);outline-offset:2px}
}
/* 1 + 9. sous 1024 px : la fiche (unique) suit l'écran épinglé dans le flux */
@media (max-width:1023px){
.st-pin{overflow:visible}
.story{overflow-x:clip}
.st-detail{position:absolute;left:0;right:0;top:100%;z-index:4;width:auto;max-height:none;overflow:visible;padding:64px max(20px,calc((100% - 640px) / 2)) 72px;background:var(--sand);color:var(--ink);transform:none;opacity:1;pointer-events:auto;--brass-t:#76581F}
.story.dark .st-detail .dt-facts div,.story.dark .st-detail .dt-parts li{border-color:var(--line)}
.story.dark .st-detail .dt-al li{box-shadow:inset 0 0 0 1px var(--line-strong)}
.story.dark .st-detail .btn.ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
}
/* 10. mouvement réduit : page complète et statique */
.calm .st-pin{overflow:visible}
.calm .story{overflow-x:clip}
.calm .st-detail{position:absolute;left:0;right:0;top:100%;z-index:4;width:auto;max-height:none;overflow:visible;padding:64px max(20px,calc((100% - 640px) / 2)) 72px;background:var(--sand);color:var(--ink);transform:none;opacity:1;pointer-events:auto;--brass-t:#76581F}
.calm .story.dark .st-detail .dt-facts div,.calm .story.dark .st-detail .dt-parts li{border-color:var(--line)}
.calm .story.dark .st-detail .dt-al li{box-shadow:inset 0 0 0 1px var(--line-strong)}
.calm .story.dark .st-detail .btn.ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.calm .story{height:100vh;height:100svh!important}
.calm .hint,.calm .st-prog{display:none}
.calm .vm-pin{height:auto}
.calm .vm-sticky{position:relative;height:auto;min-height:0;padding:150px 0 90px}
.calm .vm-txt{position:relative;left:auto;top:auto;width:auto;max-width:560px;margin:0 max(24px,6vw);transform:none}
.calm .vm-shelf{padding-top:70px}@media (max-width:1023px){.st-tags li{width:max-content}}
.calm .st-word{display:none}
/* indication « démo » dans l'en-tête, collée au logo */
.isl .kd-badge{margin-left:-10px}
@media (max-width:860px){.isl .kd-badge{margin-right:auto}}
html.in-frame{scrollbar-width:none}html.in-frame::-webkit-scrollbar{display:none}
@media (max-width:860px){html.kd-has-bar .st-tabs{bottom:64px}}

/* v3 : photos d'ambiance en <img> locales (WebP, srcset, width/height) */
.split-img{position:relative;overflow:hidden}
.exp-grid figure,.bd-img{overflow:hidden}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.exp-grid figcaption{z-index:1}