/* ============================================================
   KINBEN — style.css  (DESIGN "TEMPLATE" : béton + rouge)
   Mobile-first · dark only
   ============================================================ */

:root {
  --bg:        #2b2b2d;     /* béton */
  --bg-deep:   #202022;     /* sections sombres */
  --bg-card:   #1c1c1e;     /* cartes */
  --bg-card-2: #252527;
  --text:      #f5f4f1;
  --text-muted:#aeaeb2;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.18);

  --red:       #e8362a;
  --red-deep:  #c5271d;
  --red-soft:  rgba(232,54,42,.16);
  --green:     #84c34a;

  --radius:    16px;
  --radius-lg: 26px;
  --pill:      100px;
  --maxw:      1180px;

  --ff-head: 'Oswald', system-ui, sans-serif;
  --ff-body: 'Poppins', system-ui, sans-serif;
  --ff-jp:   'Zen Kaku Gothic New', sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
  --shadow: 0 30px 60px -22px rgba(0,0,0,.65);
  --shadow-sm: 0 14px 30px -14px rgba(0,0,0,.6);
}

/* ---------- RESET ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  font-family: var(--ff-body);
  color: var(--text);
  line-height: 1.65;
  background-color: var(--bg);
  background-image: linear-gradient(rgba(22,22,24,.84), rgba(22,22,24,.88)), url('../assets/img/concrete.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* grain */
body::before{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }

/* ---------- TYPO ---------- */
h1,h2,h3,h4{ font-family:var(--ff-head); font-weight:600; line-height:1.05; text-transform:uppercase; letter-spacing:.01em; }

/* ---------- LAYOUT ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem,5vw,2.6rem); }
.section{ position:relative; padding-block:clamp(3.6rem,9vw,6.5rem); }
.section__head{ margin-bottom:clamp(2rem,5vw,3.2rem); }
.section__head--center{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.section__title{ font-size:clamp(1.9rem,7vw,3.4rem); }
.section__intro{ color:var(--text-muted); max-width:48ch; }

.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--ff-head); font-weight:500;
  text-transform:uppercase; letter-spacing:.22em; font-size:.8rem; color:var(--text-muted); }
.eyebrow__bar{ width:30px; height:2px; background:var(--red); display:inline-block; }

/* bannière pill rouge (titres de section) */
.red-banner{ display:inline-block; background:var(--red); color:#fff; font-family:var(--ff-head); font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; font-size:.82rem; padding:.5rem 1.4rem; border-radius:var(--pill);
  box-shadow:0 10px 24px -10px rgba(232,54,42,.6); }

/* ---------- BUTTONS ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.85rem 1.7rem;
  border-radius:var(--pill); font-family:var(--ff-head); font-weight:500; text-transform:uppercase;
  letter-spacing:.1em; font-size:.85rem; white-space:nowrap; transition:transform .3s var(--ease),
  background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn--red{ background:var(--red); color:#fff; }
.btn--red:hover{ background:var(--red-deep); transform:translateY(-2px); }
.btn--outline{ border:1.5px solid var(--line-2); color:#fff; }
.btn--outline:hover{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-2px); }
.btn--dark{ background:#141416; color:#fff; border:1px solid var(--line); }
.btn--dark:hover{ background:var(--red); border-color:var(--red); transform:translateY(-2px); }
.wa-icon{ width:1.15em; height:1.15em; fill:currentColor; }

/* ---------- BADGES ---------- */
.badge{ display:inline-flex; align-items:center; gap:.25rem; font-family:var(--ff-head); font-weight:500;
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:.22rem .55rem; border-radius:var(--pill); }
.badge--spicy{ background:var(--red); color:#fff; }
.badge--sig{ background:#fff; color:#161616; }

/* ---------- DECOR (cut-outs) ---------- */
.deco{ position:absolute; pointer-events:none; z-index:1; opacity:.96; filter:drop-shadow(0 18px 24px rgba(0,0,0,.45)); }
.float{ transform:translate3d(var(--mx,0px),var(--my,0px),0); transition:transform .3s ease-out; will-change:transform; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:1000; transition:background .4s var(--ease), border-color .4s, backdrop-filter .4s; border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(20,20,22,.86); backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:1rem; }
.nav__logo{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--ff-head); font-weight:700; font-size:1.3rem; letter-spacing:.14em; }
.logo__box{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--red); color:#fff; font-family:var(--ff-jp); font-weight:700; font-size:1.15rem; box-shadow:0 8px 20px -8px rgba(232,54,42,.8); }
.nav__logo-img{ height:48px; width:auto; display:block; }

.nav__links{ display:none; gap:2rem; }
.nav__link{ font-family:var(--ff-head); font-weight:400; text-transform:uppercase; letter-spacing:.12em; font-size:.86rem; color:var(--text-muted); position:relative; transition:color .3s; }
.nav__link::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--red); transition:width .3s var(--ease); }
.nav__link:hover{ color:#fff; } .nav__link:hover::after{ width:100%; }

.nav__actions{ display:flex; align-items:center; gap:.7rem; }
.nav__socials{ display:none; gap:.5rem; }
.nav__socials a{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); transition:.3s; }
.nav__socials a:hover{ background:var(--red); border-color:var(--red); }
.nav__socials svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; }
.lang-toggle{ font-family:var(--ff-head); font-weight:500; font-size:.78rem; letter-spacing:.12em; border:1px solid var(--line-2); border-radius:var(--pill); padding:.35rem .7rem; transition:.3s; }
.lang-toggle:hover{ border-color:var(--red); color:var(--red); }
.nav__cta{ display:none; }

.nav__burger{ display:flex; flex-direction:column; gap:5px; width:30px; padding:4px 0; }
.nav__burger span{ height:2px; width:100%; background:#fff; border-radius:2px; transition:transform .35s var(--ease), opacity .3s; }
body.nav-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-open .nav__burger span:nth-child(2){ opacity:0; }
body.nav-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Drawer mobile */
.nav__links{ position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:center; gap:1.6rem;
  background:rgba(18,18,20,.98); padding:2.4rem 1rem 3rem; transform:translateY(-120%); transition:transform .45s var(--ease);
  border-bottom:1px solid var(--line); }
body.nav-open .nav__links{ transform:translateY(0); display:flex; }
.nav__links .nav__link{ font-size:1.3rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding-top:90px; padding-bottom:60px; overflow:hidden; }
.hero__inner{ display:flex; flex-direction:column; gap:1.5rem; position:relative; z-index:2; width:100%; }
.hero__eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--ff-head); text-transform:uppercase; letter-spacing:.22em; font-size:.82rem; color:var(--text-muted); }
.hero__no{ background:var(--red); color:#fff; font-weight:700; padding:.15rem .5rem; border-radius:6px; letter-spacing:.05em; }
.hero__title{ font-family:var(--ff-head); font-weight:700; font-size:clamp(3.6rem,20vw,7rem); line-height:.9; letter-spacing:.02em; }
.hero__jp{ font-family:var(--ff-jp); font-weight:700; color:var(--red); font-size:clamp(1.1rem,5vw,1.6rem); letter-spacing:.12em; margin-top:-.2rem; }
.hero__text{ color:var(--text-muted); max-width:42ch; font-size:1.02rem; }
.hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.4rem; }

.hero__visual{ position:relative; width:100%; max-width:460px; margin:1rem auto 0; }
.hero__food{ width:100%; }

.deco--fern-hero{ width:120px; top:80px; right:-10px; transform:rotate(8deg); opacity:.85; display:none; }
.deco--maki-hero{ width:128px; bottom:6%; left:-12px; z-index:1; display:none; }
.deco--nigiri-hero{ width:86px; top:auto; bottom:30%; right:6%; left:auto; z-index:1; display:none; }

.hero__scroll{ position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem; font-family:var(--ff-head); font-size:.68rem; letter-spacing:.25em; text-transform:uppercase; color:var(--text-muted); }
.hero__scroll-line{ width:1px; height:42px; background:linear-gradient(var(--red),transparent); }

/* ============================================================
   FEATURE BAND (rouge)
   ============================================================ */
.features{ background:var(--red); position:relative; z-index:2; }
.features__inner{ display:grid; gap:2.2rem; padding-block:clamp(2.6rem,7vw,3.6rem); text-align:center; }
.feature__circle{ display:grid; place-items:center; width:74px; height:74px; margin:0 auto 1rem; border:2px solid rgba(255,255,255,.6); border-radius:50%; }
.feature__circle svg{ width:34px; height:34px; fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.feature h3{ color:#fff; font-size:1.15rem; letter-spacing:.06em; margin-bottom:.4rem; }
.feature p{ color:rgba(255,255,255,.85); font-size:.92rem; max-width:30ch; margin-inline:auto; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ overflow:hidden; }
.about__grid{ display:flex; flex-direction:column; gap:2.4rem; position:relative; z-index:2; }
.about__text > p{ color:var(--text-muted); margin-top:1.1rem; }
.about__text .section__title{ margin-top:.7rem; }
.about__stats{ display:flex; gap:1.8rem; margin:1.8rem 0; }
.stat{ display:flex; flex-direction:column; }
.stat__num{ font-family:var(--ff-head); font-weight:700; font-size:2.2rem; color:var(--red); line-height:1; }
.stat__label{ font-size:.82rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.1em; }
.about__visual{ position:relative; max-width:440px; margin-inline:auto; }
.about__food{ width:100%; }
.deco--nigiri-about{ position:absolute; width:90px; bottom:-6%; right:4%; filter:drop-shadow(0 16px 22px rgba(0,0,0,.5)); }
.deco--fern-about{ width:130px; top:6%; left:-30px; transform:scaleX(-1) rotate(10deg); opacity:.5; }

/* ============================================================
   MENU
   ============================================================ */
.menu__signatures{ display:grid; gap:1rem; margin-bottom:2.4rem; }
.sig-card{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:200px; display:flex; align-items:flex-end; text-align:left; box-shadow:var(--shadow-sm); }
.sig-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.sig-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 25%, rgba(0,0,0,.85)); }
.sig-card:hover img{ transform:scale(1.07); }
.sig-card__body{ position:relative; z-index:1; padding:1.2rem; display:flex; flex-direction:column; gap:.15rem; }
.sig-card__label{ font-family:var(--ff-head); text-transform:uppercase; letter-spacing:.12em; font-size:.66rem; color:#fff; background:var(--red); align-self:flex-start; padding:.18rem .5rem; border-radius:var(--pill); margin-bottom:.3rem; }
.sig-card__name{ font-family:var(--ff-head); font-weight:600; text-transform:uppercase; color:#fff; font-size:1.15rem; }
.sig-card__price{ color:var(--red); font-family:var(--ff-head); font-weight:600; }

.menu__filters{ display:flex; flex-wrap:nowrap; gap:.5rem; overflow-x:auto; padding-bottom:.6rem; margin-bottom:2rem; scrollbar-width:none; }
.menu__filters::-webkit-scrollbar{ display:none; }
.filter-btn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1.1rem; border-radius:var(--pill);
  border:1px solid var(--line-2); color:var(--text-muted); font-family:var(--ff-head); font-weight:400; text-transform:uppercase;
  letter-spacing:.08em; font-size:.82rem; transition:.3s var(--ease); }
.filter-btn .jp{ font-family:var(--ff-jp); font-size:.85em; opacity:.8; }
.filter-btn:hover{ color:#fff; border-color:var(--text-muted); }
.filter-btn.is-active{ background:var(--red); border-color:var(--red); color:#fff; }

.menu__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.1rem; }
.dish{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.dish:hover{ transform:translateY(-6px); border-color:var(--red); box-shadow:var(--shadow-sm); }
.dish__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#111; }
.dish__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.dish:hover .dish__media img{ transform:scale(1.07); }
.dish__tags{ position:absolute; top:.65rem; left:.65rem; display:flex; gap:.35rem; }
.dish__body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.dish__top{ display:flex; justify-content:space-between; align-items:baseline; gap:.7rem; }
.dish__name{ font-family:var(--ff-head); font-weight:600; text-transform:uppercase; font-size:1.02rem; letter-spacing:.01em; line-height:1.15; }
.dish__price{ font-family:var(--ff-head); font-weight:600; color:var(--red); white-space:nowrap; }
.dish__price span{ font-size:.7em; color:var(--text-muted); margin-left:.15em; }
.dish__desc{ color:var(--text-muted); font-size:.88rem; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery__grid{ display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; gap:.8rem; }
.gallery__item{ position:relative; overflow:hidden; border-radius:var(--radius); cursor:pointer; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery__item::after{ content:"＋"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:1.6rem; background:rgba(20,20,22,.5); opacity:0; transition:opacity .3s; }
.gallery__item:hover img{ transform:scale(1.08); }
.gallery__item:hover::after{ opacity:1; }
.gallery__item--tall{ grid-row:span 2; }
.gallery__item--wide{ grid-column:span 2; }

.lightbox{ position:fixed; inset:0; z-index:2000; display:none; place-items:center; background:rgba(8,8,10,.93); backdrop-filter:blur(6px); padding:5vw; }
.lightbox.is-open{ display:grid; }
.lightbox__img{ max-width:92vw; max-height:84vh; border-radius:var(--radius); box-shadow:var(--shadow); }
.lightbox__close{ position:absolute; top:1rem; right:1.4rem; font-size:2.4rem; line-height:1; color:#fff; }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:2.6rem; color:#fff; opacity:.7; padding:1rem; }
.lightbox__nav:hover{ opacity:1; }
.lightbox__nav--prev{ left:.4rem; } .lightbox__nav--next{ right:.4rem; }

/* ============================================================
   DELIVERY band
   ============================================================ */
.delivery{ position:relative; z-index:2; }
.delivery__inner{ position:relative; overflow:hidden; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.8rem,5vw,2.8rem); display:flex; flex-direction:column; gap:1.2rem; text-align:center; align-items:center; margin-block:clamp(1rem,4vw,2rem); }
.delivery__text h2{ font-size:clamp(1.5rem,5vw,2.2rem); }
.delivery__text p{ color:var(--text-muted); margin-top:.4rem; }
.deco--maki-delivery{ position:absolute; width:120px; top:-20px; right:-10px; opacity:.5; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact__grid{ display:flex; flex-direction:column; gap:1.6rem; }
.reserve{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.3rem,4vw,2rem); }
.field{ display:flex; flex-direction:column; gap:.35rem; grid-column:1/-1; }
.field--half{ grid-column:span 1; }
.field label{ font-family:var(--ff-head); font-weight:400; text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; color:var(--text-muted); }
.field input,.field textarea{ width:100%; background:var(--bg); border:1px solid var(--line-2); border-radius:10px; padding:.75rem .85rem; color:var(--text); font:inherit; font-size:.92rem; transition:border-color .3s; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--red); }
.field textarea{ resize:vertical; }
.btn--wa{ grid-column:1/-1; width:100%; }
.reserve__hint{ grid-column:1/-1; text-align:center; font-size:.78rem; color:var(--text-muted); }

.info{ display:flex; flex-direction:column; gap:1.3rem; }
.info__row{ display:flex; flex-direction:column; gap:.2rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line); }
.info__label{ font-family:var(--ff-head); text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; color:var(--red); }
.info__value a:hover{ color:var(--red); }
.info__socials{ display:flex; gap:1.1rem; }
.info__socials a:hover{ color:var(--red); }
.info__map{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/11; }
.info__map iframe{ width:100%; height:100%; border:0; filter:invert(.9) hue-rotate(180deg) grayscale(.2); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--bg-deep); border-top:1px solid var(--line); position:relative; z-index:2; padding-top:clamp(2.6rem,6vw,4rem); }
.footer__grid{ display:grid; grid-template-columns:1fr; gap:2rem; padding-bottom:2.4rem; }
.footer__logo{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--ff-head); font-weight:700; font-size:1.5rem; letter-spacing:.12em; }
.footer__logo-img{ height:62px; width:auto; display:block; }
.footer__jp{ display:block; font-family:var(--ff-jp); color:var(--red); margin:.4rem 0; }
.footer__tag{ color:var(--text-muted); font-size:.9rem; }
.footer__col h4{ font-size:1rem; letter-spacing:.08em; margin-bottom:.9rem; }
.footer__col a,.footer__col p{ display:block; color:var(--text-muted); font-size:.92rem; margin-bottom:.45rem; transition:color .3s; }
.footer__col a:hover{ color:var(--red); }
.footer__bottom{ display:flex; flex-direction:column; gap:.5rem; text-align:center; padding-block:1.4rem; border-top:1px solid var(--line); color:var(--text-muted); font-size:.82rem; }