/* ==========================================================================
   Le Kô-ya — feuille de style du site public
   Direction artistique : noir profond, bordeaux du logo (#4C192C), or champagne, crème.
   Typographie inspirée de la carte d'origine : titres en serif de type Baskerville très espacés (Libre Baskerville),
   noms de plats, descriptions et prix en mono-espacée (IBM Plex Mono), comme sur la carte papier.
   ========================================================================== */
@font-face{font-family:"Libre Baskerville";src:url("/assets/fonts/LibreBaskerville-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/IBMPlexMono-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/IBMPlexMono-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  --night-0:#060204;   /* noir profond, légèrement chaud */
  --night-1:#0B0407;
  --night-2:#13070C;
  --night-3:#220C15;
  --wine:#4C192C;      /* bordeaux exact du logo Kô-ya : rgb(76,25,44) */
  --gold:#D4B26E;
  --gold-2:#B8975A;
  --ivory:#F6F0E6;
  --ink:#1B0A11;
  --muted:#5E4C53;
  --price:#4C192C;
  --f-display:"Libre Baskerville",Baskerville,"Baskerville Old Face",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --f-serif:var(--f-mono);
  --f-sans:var(--f-mono);
  --pad:clamp(1.25rem,5vw,2.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--night-1);color:var(--ivory);font:400 .95rem/1.6 var(--f-mono);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.menu{background:var(--ivory)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
address{font-style:normal}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.theme-light :focus-visible,.sheet-home :focus-visible,.endcap :focus-visible{outline-color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- boutons ---------- */
.btn{display:inline-block;padding:.95rem 2rem;border:1px solid var(--gold);color:var(--gold);text-decoration:none;
  font:400 .8rem/1.3 var(--f-display);letter-spacing:.24em;text-transform:uppercase;text-align:center;transition:background .25s,color .25s}
.btn:hover{background:rgba(212,178,110,.14)}
.btn-solid{background:var(--gold);color:var(--night-0);font-weight:400}
.btn-solid:hover{background:#E2C283}
.endcap .btn{border-color:var(--ink);color:var(--ink)}
.endcap .btn-solid{background:var(--wine);color:var(--gold);border-color:var(--wine)}
.endcap .btn:hover{background:rgba(76,25,44,.08)}
.endcap .btn-solid:hover{background:#5E2036}

/* ---------- ambiance nuit : halos, fumée, grain ---------- */
.night{position:absolute;inset:0;overflow:hidden;z-index:-1;background:var(--night-0)}
.glow{position:absolute;inset:0;background:
  radial-gradient(60% 42% at 50% 36%,rgba(76,25,44,.85),rgba(46,15,27,.45) 55%,transparent 80%),
  radial-gradient(100% 55% at 50% 118%,rgba(52,17,30,.8),transparent 72%)}
.ember{position:absolute;left:-25%;bottom:-18%;width:85%;height:55%;background:radial-gradient(closest-side,rgba(150,100,35,.20),transparent)}
.grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.smoke{position:absolute;inset:-12% -20%;pointer-events:none;overflow:hidden}
.smoke i{position:absolute;display:block;border-radius:50%;background:radial-gradient(closest-side,rgba(150,60,90,.16),rgba(150,60,90,0) 72%);will-change:transform}
.smoke i:nth-child(1){width:90%;height:38%;left:-8%;top:18%;animation:drift1 34s ease-in-out infinite alternate}
.smoke i:nth-child(2){width:75%;height:34%;right:-10%;top:46%;animation:drift2 41s ease-in-out infinite alternate;opacity:.85}
.smoke i:nth-child(3){width:65%;height:30%;left:10%;top:70%;animation:drift3 47s ease-in-out infinite alternate;opacity:.7}
@keyframes drift1{from{transform:translate3d(-6%,0,0) rotate(-8deg) scale(1)}to{transform:translate3d(14%,-10%,0) rotate(6deg) scale(1.18)}}
@keyframes drift2{from{transform:translate3d(8%,4%,0) rotate(10deg) scale(1.05)}to{transform:translate3d(-16%,-8%,0) rotate(-6deg) scale(.92)}}
@keyframes drift3{from{transform:translate3d(-10%,6%,0) rotate(4deg) scale(.95)}to{transform:translate3d(12%,-6%,0) rotate(-10deg) scale(1.15)}}

/* ---------- cadre doré (couverture) ---------- */
.frame{position:absolute;inset:max(14px,env(safe-area-inset-top)) 14px 14px;border:1px solid rgba(212,178,110,.6);pointer-events:none}
.frame::after{content:"";position:absolute;inset:6px;border:1px solid rgba(212,178,110,.22)}
.frame b{position:absolute;width:58px;height:58px;border:1px solid var(--gold);opacity:.85}
.frame b::before{content:"";position:absolute;inset:9px;border:1px solid rgba(212,178,110,.6)}
.frame b::after{content:"";position:absolute;inset:18px;border:1px solid rgba(212,178,110,.35)}
.frame b,.frame b::before,.frame b::after{border-radius:0}
.frame .tl{top:6px;left:6px;border-right:0;border-bottom:0;border-top-left-radius:58px}
.frame .tl::before,.frame .tl::after{border-right:0;border-bottom:0;border-top-left-radius:50px}
.frame .tr{top:6px;right:6px;border-left:0;border-bottom:0;border-top-right-radius:58px}
.frame .tr::before,.frame .tr::after{border-left:0;border-bottom:0;border-top-right-radius:50px}
.frame .bl{bottom:6px;left:6px;border-right:0;border-top:0;border-bottom-left-radius:58px}
.frame .bl::before,.frame .bl::after{border-right:0;border-top:0;border-bottom-left-radius:50px}
.frame .br{bottom:6px;right:6px;border-left:0;border-top:0;border-bottom-right-radius:58px}
.frame .br::before,.frame .br::after{border-left:0;border-top:0;border-bottom-right-radius:50px}

/* ---------- titres de catégories : serif fin, filet doré terminé par un losange ---------- */
.cat-title{margin:0;font:400 clamp(1.45rem,6.2vw,2.1rem)/1.25 var(--f-display);letter-spacing:.3em;text-transform:uppercase}
.rule{position:relative;width:min(62%,15rem);height:1px;margin:.9rem 0 1.5rem;background:linear-gradient(90deg,var(--gold-2),rgba(184,151,90,.15))}
.rule::after{content:"";position:absolute;right:-5px;top:-4px;width:9px;height:9px;background:var(--gold-2);transform:rotate(45deg)}

/* ---------- accueil ---------- */
.hero{position:relative;isolation:isolate;min-height:88svh;display:grid;place-items:center;text-align:center;padding:5rem var(--pad) 6.5rem;overflow:hidden}
.hero-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.9rem;animation:rise 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-logo{margin:0;width:min(78vw,30rem)}
.hero-logo img{width:100%;filter:drop-shadow(0 0 28px rgba(212,178,110,.22))}
.hero-place{margin:0;font:400 .85rem/1.5 var(--f-mono);color:rgba(246,240,230,.85);letter-spacing:.14em;text-transform:uppercase}
.sheet-home{position:relative;background:var(--ivory);color:var(--ink);margin-top:-2.6rem;border-radius:1.75rem 1.75rem 0 0;padding:3.25rem var(--pad) 3.75rem}
.sheet-home>*{max-width:44rem;margin-left:auto;margin-right:auto}
.sheet-home .cat-title{font-size:clamp(1.4rem,6vw,1.9rem)}
.doors{display:grid;gap:1rem}
.door{position:relative;display:grid;gap:.5rem;padding:1.6rem 3.4rem 1.6rem 1.5rem;text-decoration:none;color:var(--ivory);overflow:hidden;
  background:linear-gradient(135deg,#4C192C 0%,#2A0E18 55%,#0B0407 100%);box-shadow:inset 0 0 0 1px rgba(212,178,110,.35)}
.door-title{font:400 1.25rem/1.2 var(--f-display);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.door-list{font:400 .85rem/1.6 var(--f-mono);color:rgba(246,240,230,.8)}
.door-go{position:absolute;right:1.5rem;top:50%;width:.9rem;height:.9rem;border-top:1px solid var(--gold);border-right:1px solid var(--gold);transform:translateY(-50%) rotate(45deg);transition:right .25s}
.door:hover .door-go{right:1.1rem}

/* ---------- pied de page ---------- */
.foot{position:relative;background:var(--night-0);padding:3.25rem var(--pad) calc(2.5rem + env(safe-area-inset-bottom));text-align:center;border-top:1px solid rgba(212,178,110,.3)}
.foot-logo{width:min(46vw,11rem);margin:0 auto 1.75rem;opacity:.95}
.visit-list{display:grid;gap:1.1rem;max-width:22rem;margin:0 auto}
.visit-row{margin:0;display:grid;gap:.1rem;justify-items:center;line-height:1.45}
.visit-k{font:400 .78rem/1 var(--f-display);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.visit-row a{text-decoration:none;border-bottom:1px solid rgba(212,178,110,.35)}
.visit-row a:hover{border-bottom-color:var(--gold)}
.foot-note{margin:2rem 0 0;font:400 .8rem/1.2 var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}

/* ---------- carte : barre de navigation collante ---------- */
.topbar{position:sticky;top:0;z-index:20;background:#050204;border-bottom:1px solid rgba(212,178,110,.28)}
@supports (backdrop-filter:blur(8px)){.topbar{background:rgba(5,2,4,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
.topbar-row{display:flex;align-items:center;gap:.75rem;padding:.5rem var(--pad) .35rem;max-width:68rem;margin:0 auto}
.brand{flex:none;border-radius:50%;line-height:0}
.tabs{display:flex;flex:1;gap:.25rem}
.tab{flex:1;text-align:center;padding:.65rem .5rem .55rem;text-decoration:none;font:400 .78rem/1 var(--f-display);letter-spacing:.26em;text-transform:uppercase;color:rgba(246,240,230,.72);border-bottom:2px solid transparent}
.tab.on{color:var(--gold);border-bottom-color:var(--gold)}
.chips{max-width:68rem;margin:0 auto}
.chips-in{display:flex;gap:.5rem;overflow-x:auto;padding:.3rem var(--pad) .7rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips-in::-webkit-scrollbar{display:none}
.chip{flex:none;padding:.45rem .95rem;border:1px solid rgba(212,178,110,.45);border-radius:2rem;text-decoration:none;font:400 .8rem/1.1 var(--f-mono);letter-spacing:.04em;color:var(--ivory);white-space:nowrap;transition:background .2s,color .2s}
.chip.on{background:var(--gold);border-color:var(--gold);color:var(--night-0)}

/* ---------- carte : sections ---------- */
.carte{background:var(--ivory);color:var(--ink)}
.cat{position:relative;padding:3.25rem var(--pad) 3.5rem;scroll-margin-top:6.5rem;overflow-x:clip}
.cat-in{position:relative;z-index:1;max-width:40rem;margin:0 auto}
.theme-light{background:var(--ivory);color:var(--ink)}
.theme-light+.theme-light{border-top:1px solid rgba(76,25,44,.14)}
.theme-light .cat-title{color:var(--ink)}
.theme-dark{background:radial-gradient(90% 60% at 80% 10%,rgba(76,25,44,.7),transparent 70%),radial-gradient(80% 50% at 0% 100%,rgba(120,80,25,.14),transparent 70%),var(--night-1);color:var(--ivory);isolation:isolate}
.theme-dark .cat-title{color:var(--gold)}
.theme-dark .smoke{z-index:0;inset:-5% -25%}
.theme-dark .smoke i{background:radial-gradient(closest-side,rgba(150,60,90,.15),rgba(150,60,90,0) 72%)}
.cat-note{margin:-.4rem 0 1.25rem;font:400 .8rem/1.6 var(--f-display);letter-spacing:.04em;color:var(--muted)}
.theme-dark .cat-note{color:rgba(246,240,230,.88)}

.items{list-style:none;margin:0;padding:0}
.item{padding:.8rem 0}
.item-head{display:flex;align-items:baseline;gap:.6rem}
.name{flex:0 1 auto;font:700 .95rem/1.35 var(--f-mono);letter-spacing:.07em;text-transform:uppercase}
.leader{flex:1 1 .75rem;min-width:.75rem;border-bottom:1px dotted currentColor;opacity:.32;transform:translateY(-.28em)}
.price{flex:none;font:700 .98rem/1 var(--f-mono);color:var(--price);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.theme-dark .price{color:var(--gold)}
.desc{margin:.35rem 0 0;max-width:34rem;font-size:.84rem;line-height:1.6;color:var(--muted)}
.theme-dark .desc{color:rgba(246,240,230,.78)}
.detail{margin:.2rem 0 0;font:400 .78rem/1.4 var(--f-mono);color:var(--muted);text-align:right}
.theme-dark .detail{color:rgba(246,240,230,.72)}
.allerg{margin:.3rem 0 0;font-size:.85rem;color:var(--muted)}
.item.has-thumb{display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;align-items:center}
.thumb{width:4.5rem;height:4.5rem;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--night-1)}
.sub{margin-top:2.4rem}
.sub-title{margin:0 0 .6rem;font:400 .95rem/1.3 var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:var(--price)}
.theme-dark .sub-title{color:var(--gold)}
.sub .cat-note{margin-top:0}
.footnote{margin:2.25rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(76,25,44,.2);font:400 .78rem/1.7 var(--f-display);letter-spacing:.03em;color:var(--muted)}
.theme-dark .footnote{border-top-color:rgba(246,240,230,.2);color:rgba(246,240,230,.8)}

/* photos vues de dessus : médaillons ronds cerclés de noir profond, en léger débord comme sur la carte papier */
.cat-photo{width:min(78vw,23.5rem);aspect-ratio:1;border-radius:50%;overflow:hidden;margin-bottom:2rem;background:var(--night-2);
  box-shadow:0 0 0 clamp(6px,1.5vw,10px) var(--night-1),0 28px 44px -20px rgba(4,1,3,.6)}
.cat-photo img{width:100%;height:100%;object-fit:cover}
.photo-right .cat-photo{margin-left:auto;margin-right:calc(-1 * min(12vw,3.5rem))}
.photo-left .cat-photo{margin-right:auto;margin-left:calc(-1 * min(12vw,3.5rem))}

/* ---------- fin de page ---------- */
.endcap{display:grid;gap:.9rem;justify-items:center;padding:2.75rem var(--pad) 3.5rem;background:var(--ivory);border-top:1px solid rgba(76,25,44,.14);text-align:center}
.endcap .btn{width:min(100%,24rem);font-size:.92rem;letter-spacing:.12em;line-height:1.35}
.allergen{margin:0 0 1rem;max-width:30rem;font:400 .78rem/1.7 var(--f-display);letter-spacing:.03em;color:var(--muted)}

.lost{position:relative;isolation:isolate;min-height:100svh;display:grid;place-items:center;text-align:center;padding:2rem}
.lost .hero-in{gap:1.2rem}

/* ---------- tablette / ordinateur ---------- */
@media (min-width:900px){
  .hero{min-height:92vh}
  .doors{grid-template-columns:1fr 1fr;gap:1.25rem}
  .door{padding:2rem 3.4rem 2rem 2rem}
  .cat{padding:5rem var(--pad) 5.25rem}
  .cat.has-photo .cat-in{max-width:68rem;display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
  .cat.has-photo .cat-photo{width:100%;max-width:26rem;margin:0}
  .photo-right .cat-photo{grid-column:2;grid-row:1;justify-self:end}
  .photo-left .cat-photo{grid-column:1;grid-row:1;justify-self:start}
  .photo-right .cat-body{grid-column:1;grid-row:1}
  .photo-left .cat-body{grid-column:2;grid-row:1}
  .name{font-size:1.02rem}
  .topbar-row{padding-top:.7rem}
  .tabs{flex:0 1 32rem}
  .chips-in{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .smoke i,.hero-in{animation:none}
  *{transition:none!important}
}