:root{
  --ink:#171513;
  --paper:#f6f1e7;
  --warm:#efe1c8;
  --olive:#2f3a2a;
  --grenade:#8c1c13;
  --night:#0f1110;

  --line: rgba(23,21,19,.16);
  --shadow: 0 18px 60px rgba(0,0,0,.18);
  --radius: 18px;

  --wrap: 1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}

body{
  margin:0;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  color:var(--ink);
  background: var(--paper);
}

.skip{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{left:14px; top:14px; width:auto; height:auto; padding:.6rem .8rem; background:#fff; border:1px solid var(--line); z-index:9999}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 18px}

/* TOPBAR */
.topbar{
  position:sticky; top:0;
  background: rgba(246,241,231,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  z-index:50;
}
.topbar__inner{
  max-width:var(--wrap);
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink);
}
.brand__mark{
  width:12px; height:12px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #d45b3a, var(--grenade));
  box-shadow: 0 0 0 4px rgba(140,28,19,.12);
}
.brand__text{font-weight:700; letter-spacing:.02em}

.nav{display:none; gap:18px}
.nav a{
  text-decoration:none; color:var(--ink);
  font-size:.98rem;
  padding:8px 10px;
  border-radius:999px;
}
.nav a:hover{background:rgba(23,21,19,.06)}
.nav a:focus-visible{outline:2px solid var(--grenade); outline-offset:2px}

.burger{
  width:44px; height:44px; border-radius:12px;
  border:1px solid var(--line);
  background:transparent;
  display:grid;
  place-content:center;
  gap:6px;
}
.burger span{
  display:block;
  width:18px; height:2px;
  background: var(--ink);
  border-radius:2px;
}
.burger:focus-visible{outline:2px solid var(--grenade); outline-offset:2px}

.mobile{
  border-top:1px solid var(--line);
  padding:12px 18px 16px;
}
.mobile__nav{display:grid; gap:8px}
.mobile__nav a{
  text-decoration:none;
  color:var(--ink);
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.mobile__nav a:focus-visible{outline:2px solid var(--grenade); outline-offset:2px}
.mobile__cta{margin-top:12px}

/* HERO */
.hero{
  position:relative;
  min-height:92vh;
  border-bottom:1px solid var(--line);
}
.hero__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter: saturate(1.05) contrast(1.03) brightness(.75);
}
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 700px at 20% 60%, rgba(246,241,231,.92) 0%, rgba(246,241,231,.70) 42%, rgba(246,241,231,0) 68%),
    linear-gradient(180deg, rgba(15,17,16,.15), rgba(15,17,16,.35));
}
.hero__grid{
  position:relative;
  max-width:var(--wrap);
  margin:0 auto;
  padding: 110px 18px 60px;
  display:grid;
  gap:24px;
}
.kicker{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.78rem;
  margin:0 0 10px;
  color:rgba(23,21,19,.78);
}
.hero h1{
  margin:0;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height:1.02;
  letter-spacing:-.02em;
}
.lead{
  margin:14px 0 0;
  max-width: 42ch;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 1.02rem;
  color: rgba(23,21,19,.84);
}

.hero__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius: 999px;
  text-decoration:none;
  border:1px solid var(--line);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight:650;
  letter-spacing:.01em;
  cursor:pointer;
}
.btn:focus-visible{outline:2px solid var(--grenade); outline-offset:2px}

.btn--primary{
  background: linear-gradient(135deg, var(--grenade), #d85c3b);
  color:#fff;
  border-color: rgba(255,255,255,.18);
}
.btn--primary:hover{filter:brightness(1.03)}
.btn--ghost{
  background: rgba(246,241,231,.9);
  color: var(--ink);
}

.hero__meta{
  display:grid; gap:10px;
  margin-top:18px;
  max-width: 520px;
}
.chip{
  display:flex; gap:10px; align-items:baseline;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(23,21,19,.18);
  background: rgba(246,241,231,.88);
}
.chip__label{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(23,21,19,.62);
  min-width: 88px;
}
.chip__value{color: rgba(23,21,19,.92); text-decoration:none}
.chip__value:focus-visible{outline:2px solid var(--grenade); outline-offset:2px}

/* image stack */
.hero__stack{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-content:start;
}
.shot{
  margin:0;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.18);
}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot--a{grid-column:1 / -1; aspect-ratio: 16/9}
.shot--b{aspect-ratio: 1/1}
.shot--c{aspect-ratio: 1/1}

/* bands */
.band{padding: 56px 0}
.band--paper{background: var(--paper)}
.band--warm{background: var(--warm); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band--dark{background: var(--night); color:#f3efe6}

.sectionhead h2{
  margin:0;
  font-size: clamp(1.7rem, 4.2vw, 2.4rem);
  line-height:1.1;
}
.sub{
  margin:10px 0 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: rgba(23,21,19,.78);
  max-width: 70ch;
}
.band--dark .sub{color: rgba(243,239,230,.75)}
.note{display:block; margin-top:8px; color: rgba(23,21,19,.62)}
.muted{color: rgba(23,21,19,.66); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial}
.small{font-size:.92rem}

/* Menu tools */
.menu-tools{
  margin-top: 18px;
  display:grid;
  gap:14px;
}
.search{
  display:grid; gap:8px;
  padding:14px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background:#fff;
}
.search__label{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.76rem;
  color: rgba(23,21,19,.62);
}
.search input{
  border:1px solid rgba(23,21,19,.18);
  border-radius: 14px;
  padding: 12px 12px;
  font: inherit;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.search input:focus{outline:2px solid rgba(140,28,19,.5); border-color: rgba(140,28,19,.5)}

.tags{display:flex; flex-wrap:wrap; gap:8px}
.tag{
  border:1px solid rgba(23,21,19,.18);
  background: rgba(246,241,231,.75);
  padding: 10px 12px;
  border-radius: 999px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  cursor:pointer;
}
.tag[aria-pressed="true"]{
  background: rgba(140,28,19,.12);
  border-color: rgba(140,28,19,.35);
}
.tag:focus-visible{outline:2px solid var(--grenade); outline-offset:2px}

/* Menu list */
.menu{margin-top: 18px; display:grid; gap:12px}
.accord{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  overflow:hidden;
}
.accord summary{
  list-style:none;
  cursor:pointer;
  padding: 16px 16px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.accord summary::-webkit-details-marker{display:none}
.accord__title{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight:750;
}
.accord__count{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size:.9rem;
  color: rgba(23,21,19,.56);
}
.items{padding: 0 16px 16px; display:grid; gap:10px}
.item{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding-top:10px;
  border-top:1px dashed rgba(23,21,19,.18);
}
.item:first-child{border-top:none; padding-top:0}
.item__name{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; font-weight:650}
.item__desc{margin-top:3px; color: rgba(23,21,19,.66); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial}
.item__price{
  white-space:nowrap;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight:750;
  color: var(--olive);
}

.menu-foot{margin-top:18px; padding-top:18px; border-top:1px solid var(--line)}
.platform-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}

.pill{
  display:inline-flex;
  padding: 10px 14px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(23,21,19,.18);
  background:#fff;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight:650;
}
.pill:focus-visible{outline:2px solid var(--grenade); outline-offset:2px}
.pill--uber{background: rgba(0,0,0,.88); color:#fff; border-color: rgba(255,255,255,.14)}
.pill--take{background: rgba(47,58,42,.92); color:#fff; border-color: rgba(255,255,255,.14)}

/* Livraison split */
.split{display:grid; gap:18px}
.platforms{display:grid; gap:12px; margin-top:14px}
.cardlink{
  text-decoration:none;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
}
.cardlink__title{
  display:block;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight:800;
}
.cardlink__meta{
  display:block; margin-top:6px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: rgba(23,21,19,.62);
}
.cardlink:hover{box-shadow: 0 10px 28px rgba(0,0,0,.10)}
.cardlink:focus-visible{outline:2px solid var(--grenade); outline-offset:2px}

.asidebox{
  border:1px solid rgba(23,21,19,.18);
  background: rgba(246,241,231,.6);
  border-radius: var(--radius);
  padding:16px;
}
.asidebox h3{margin:0 0 10px; font-size:1.2rem}
.bullets{margin:0; padding-left:18px}
.bullets li{margin:6px 0}
.hint{margin-top:12px; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial}

.social{display:flex; gap:10px; margin-top:14px}
.iconbtn{
  width:44px; height:44px; border-radius:14px;
  border:1px solid rgba(23,21,19,.18);
  background:#fff;
  display:grid; place-items:center;
  text-decoration:none;
}
.iconbtn svg{width:22px; height:22px; fill: var(--ink)}
.iconbtn:hover{transform: translateY(-1px)}
.iconbtn:focus-visible{outline:2px solid var(--grenade); outline-offset:2px}

/* Avis & map */
.grid2{display:grid; gap:18px; margin-top: 18px}
.mapbox{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
}
.mapbox iframe{width:100%; height:360px; border:0; display:block}
.mapbox__actions{
  padding:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  border-top:1px solid var(--line);
}

.reviews{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  padding:16px;
}
.steps{margin:10px 0 0; padding-left:18px; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial}
.api{
  margin-top:14px;
  display:grid; gap:10px;
  padding-top:14px;
  border-top:1px dashed rgba(23,21,19,.18);
}
.api label span{
  display:block;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size:.86rem;
  color: rgba(23,21,19,.66);
  margin-bottom:6px;
}
.api input{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(23,21,19,.18);
  font: inherit;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.reviews__list{margin-top:12px; display:grid; gap:10px}
.review{
  border:1px solid rgba(23,21,19,.12);
  border-radius: 14px;
  padding:12px;
}
.review__top{
  display:flex; justify-content:space-between; gap:10px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight:750;
}
.review__meta{color: rgba(23,21,19,.56); font-weight:600; font-size:.9rem}
.review__text{
  margin-top:8px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: rgba(23,21,19,.72);
}

/* Contact */
.band--dark a{color:#f3efe6}
.contactcards{display:grid; gap:10px; margin-top:14px}
.contactcard{
  text-decoration:none;
  border:1px solid rgba(243,239,230,.18);
  background: rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding:14px;
}
.contactcard__k{
  display:block;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:.76rem;
  color: rgba(243,239,230,.68);
}
.contactcard__v{
  display:block;
  margin-top:6px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-weight:800;
}

.form{
  border:1px solid rgba(243,239,230,.16);
  background: rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding:16px;
  display:grid;
  gap:12px;
}
.form label span{
  display:block;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: rgba(243,239,230,.72);
  font-size:.9rem;
  margin-bottom:6px;
}
.form input, .form textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(243,239,230,.18);
  background: rgba(15,17,16,.35);
  color:#f3efe6;
}
.form input:focus, .form textarea:focus{outline:2px solid rgba(216,92,59,.7); border-color: rgba(216,92,59,.7)}

/* footer */
.footer{
  border-top:1px solid var(--line);
  padding: 18px 0;
  background: rgba(246,241,231,.9);
}
.footer__inner{
  display:grid;
  gap:10px;
  align-items:center;
}
.footer__links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.footer__links a{
  color: rgba(23,21,19,.78);
  text-decoration:none;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.footer__links a:hover{text-decoration:underline}

/* responsive */
@media (min-width: 880px){
  .nav{display:flex}
  .burger{display:none}
  .hero__grid{
    grid-template-columns: 1.05fr .95fr;
    align-items:start;
    gap:28px;
    padding-top: 120px;
  }
  .split{grid-template-columns: 1.1fr .9fr; align-items:start}
  .grid2{grid-template-columns: 1.1fr .9fr; align-items:start}
  .hero__stack{grid-template-columns: 1fr 1fr}
}