:root {
  --green: #173a26;
  --green-2: #22503a;
  --green-3: #2f6b4b;
  --cream: #f8f1e4;
  --cream-2: #efe2c9;
  --ochre: #e3a13b;
  --terra: #c4512b;
  --ink: #1f1b16;
  --muted: #6d6458;
  --line: rgba(31, 27, 22, 0.12);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --radius: 18px;
  /* wax-print inspired band: triangles + diamonds */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Crect width='64' height='32' fill='%23173a26'/%3E%3Cpath d='M0 32 16 0l16 32z' fill='%23e3a13b'/%3E%3Cpath d='M32 32 48 0l16 32z' fill='%23c4512b'/%3E%3Cpath d='M16 16l4 8h-8zM48 16l4 8h-8z' fill='%23f8f1e4'/%3E%3Cpath d='M32 4l4 6-4 6-4-6z' fill='%23f8f1e4'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { background: var(--cream); color: var(--ink); font: 400 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.05; letter-spacing: -.015em; }
h2 { font-size: clamp(2.1rem, 4.8vw, 3.4rem); }
em { font-style: italic; font-weight: 400; color: var(--terra); }
.eyebrow { font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--green-3); margin-bottom: .9rem; }
.eyebrow--light { color: var(--ochre); }
.center { text-align: center; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.5rem; border-radius: 999px; font-weight: 600; border: 1.5px solid transparent; transition: transform .2s, background .2s, color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn--lg { min-height: 56px; padding: 0 1.9rem; }
.btn--green { background: var(--green); color: var(--cream); }
.btn--green:hover { background: var(--green-2); }
.btn--line { border-color: var(--green); color: var(--green); }
.btn--line:hover { background: var(--green); color: var(--cream); }
.btn--cream { background: var(--cream); color: var(--green); }

/* top bar */
.topbar { background: var(--green); color: var(--cream); font-size: .82rem; letter-spacing: .06em; }
.topbar__in { display: flex; justify-content: center; align-items: center; gap: .8rem; min-height: 36px; }
.topbar .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ochre); }

/* header */
.header { position: sticky; top: 0; z-index: 40; background: rgba(248, 241, 228, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header__in { display: flex; align-items: center; gap: 2rem; min-height: 72px; }
.logo { display: grid; line-height: 1; margin-right: auto; }
.logo--mark { display: flex; align-items: center; gap: .7rem; }
.logo__icon { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 4px 8px rgba(23, 58, 38, .25)); }
.logo__txt { display: grid; gap: .3rem; }
.logo--mark .logo__name { font: 600 1.45rem/1 var(--serif); letter-spacing: .04em; }
.logo--mark .logo__sub { font: 600 .6rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--terra); padding-left: 0; margin: 0; }
.logo__name { font: 800 1.55rem var(--sans); letter-spacing: -.02em; color: var(--green); }
.logo__sub { font: italic 400 1.05rem var(--serif); color: var(--ochre); margin-top: -2px; padding-left: 2.2rem; }
.logo--light .logo__name { color: var(--cream); }
.nav { display: flex; gap: 1.8rem; font-weight: 500; font-size: .95rem; }
.nav a { position: relative; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--terra); transform: scaleX(0); transition: transform .3s; }
.nav a:hover::after { transform: scaleX(1); }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.burger i { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--green); transition: transform .3s, top .3s; }
.burger i:first-child { top: 17px; }
.burger i:last-child { top: 25px; }
.burger[aria-expanded='true'] i:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded='true'] i:last-child { top: 21px; transform: rotate(-45deg); }
@media (max-width: 880px) {
  .burger { display: block; }
  .header__cta { display: none; }
  .header__in { min-height: 64px; }
  html { scroll-padding-top: 120px; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--cream); max-height: 0; overflow: hidden; transition: max-height .35s ease; box-shadow: 0 20px 30px -20px rgba(0, 0, 0, .25); }
  .nav.is-open { max-height: 360px; }
  .nav a { padding: 1rem 1.25rem; border-top: 1px solid var(--line); font: 600 1.25rem var(--serif); }
  .nav a::after { display: none; }
}

/* hero */
.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
.hero__in { display: grid; gap: 3.5rem; align-items: center; }
.hero h1 { font-size: clamp(2.7rem, 6.6vw, 5.2rem); font-weight: 600; margin-bottom: 1.4rem; }
.hero h1 em { display: block; }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2.2rem 0 2rem; }
.modes { display: flex; flex-wrap: wrap; gap: .6rem; }
.modes li { padding: .45rem 1rem; border-radius: 999px; background: var(--cream-2); font-size: .9rem; }
.modes b { font-weight: 600; color: var(--green); }

.hero__art { position: relative; justify-self: center; width: min(420px, 82vw); aspect-ratio: 1; perspective: 1100px; }
/* wax-print halo behind the medallion */
.hero__art::before { content: ''; position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(227, 161, 59, .28), rgba(227, 161, 59, 0)); }

/* 3D medallion */
/* round emblem matching logo.svg */
.hero__art { --arch: 50%; }
.coin { position: absolute; inset: 7%; transform-style: preserve-3d; }
.coin__float { position: absolute; inset: 0; transform-style: preserve-3d; animation: float 8s ease-in-out infinite; }
/* rotation is set every frame by main.js; this is the resting pose before JS runs */
.coin__body { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(6deg) rotateY(-14deg); will-change: transform; }
.coin__face { position: absolute; inset: 0; border-radius: var(--arch); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.coin__face svg { width: 100%; height: 100%; display: block; }
.coin__face--front { transform: translateZ(calc(var(--depth, 1px) * 9.5)); }
.coin__face--back { transform: rotateY(180deg) translateZ(calc(var(--depth, 1px) * 9.5)); }
/* phones: closer camera + thicker coin so the 3D reads clearly on a small screen */
@media (max-width: 920px) {
  .hero__art { perspective: 600px; --depth: 1.6px; }
}
/* glossy light sweep */
.coin__face::after { content: ''; position: absolute; inset: 0; border-radius: var(--arch); background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 45%, transparent 60%); background-size: 250% 100%; background-position: 120% 0; mix-blend-mode: screen; }
.coin__edge { position: absolute; inset: 0; transform-style: preserve-3d; }
.coin__edge i { position: absolute; inset: 0; border-radius: var(--arch); background: linear-gradient(160deg, #d99a35, #8c5f1a); transform: translateZ(calc(var(--z) * var(--depth, 1px))); }
.coin__shadow { position: absolute; left: 14%; right: 14%; bottom: -14%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(23, 58, 38, .45), transparent); animation: shadow 5s ease-in-out infinite; transform: translateZ(-60px); }
@keyframes float { 50% { transform: translateY(-5px); } }
@keyframes shadow { 50% { transform: translateZ(-60px) scale(.82); opacity: .6; } }
.sticker { position: absolute; right: -9%; bottom: -5%; width: 27%; aspect-ratio: 1; border-radius: 50%; background: var(--terra); color: var(--cream); display: grid; place-content: center; text-align: center; font-size: clamp(.6rem, 1.6vw, .78rem); letter-spacing: .12em; text-transform: uppercase; line-height: 1.25; transform: rotate(-12deg); box-shadow: 0 0 0 5px var(--cream), 0 14px 30px -12px rgba(0, 0, 0, .4); }
.sticker b { font: italic 600 1.9em var(--serif); letter-spacing: 0; text-transform: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 920px) { .hero__in { grid-template-columns: 1.15fr 1fr; } }

/* ---------- mobile hero: one centred logo, compact, thumb-friendly ---------- */
@media (max-width: 919px) {
  .hero { padding: 1.6rem 0 3rem; }
  .hero__in { gap: 1.4rem; text-align: center; }
  .hero__art { order: -1; width: min(240px, 60vw); }
  .hero__art::before, .sticker { display: none; }
  .hero h1 { font-size: clamp(2.2rem, 10vw, 3rem); margin-bottom: 1rem; }
  .lead { margin-inline: auto; font-size: 1.02rem; }
  .hero__cta { flex-direction: column; margin: 1.6rem 0 1.4rem; }
  .hero__cta .btn { width: 100%; }
  .modes { justify-content: center; }
}

.band { height: 24px; background: var(--pattern); background-size: 48px 24px; }
.band--thin { height: 12px; background-size: 24px 12px; }

/* highlights */
.highlights { background: var(--green); color: var(--cream); padding: 2.2rem 0; }
.highlights__in { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; text-align: center; }
.highlights b { display: block; font: 600 clamp(2rem, 4vw, 2.8rem)/1 var(--serif); color: var(--ochre); }
.highlights span { font-size: .9rem; opacity: .85; }
@media (min-width: 760px) { .highlights__in { grid-template-columns: repeat(4, 1fr); } }

/* sections */
.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section--green { background: var(--green); color: var(--cream); }
.section--green em { color: var(--ochre); }
.head { margin-bottom: 2.8rem; }
.head--center { text-align: center; max-width: 680px; margin-inline: auto; }
.sub { color: var(--muted); margin-top: .8rem; }

/* menu */
.tabs { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; }
.tabs button { border: 1.5px solid var(--line); background: transparent; padding: .6rem 1.2rem; border-radius: 999px; font: 500 .95rem var(--sans); cursor: pointer; transition: all .2s; }
.tabs button:hover { border-color: var(--green); }
.tabs button[aria-selected='true'] { background: var(--green); border-color: var(--green); color: var(--cream); }
/* phones: tabs stay under the header and scroll sideways */
@media (max-width: 760px) {
  .tabs { position: sticky; top: 64px; z-index: 30; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; background: var(--cream); margin: 0 -1.25rem 1.2rem; padding: .7rem 1.25rem; border-bottom: 1px solid var(--line); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; min-height: 40px; }
  .menu__cat { padding: 1.2rem; }
  .dish h4 { font-size: 1.08rem; }
  .facts div { grid-template-columns: 1fr; gap: .3rem; }
  .head { margin-bottom: 2rem; }
}
.menu { display: grid; gap: 1.2rem; }
.menu__cat { background: #fffaf1; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3.5vw, 2.6rem); }
.menu__cat > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; padding-bottom: 1rem; margin-bottom: .6rem; border-bottom: 2px solid var(--green); }
.menu__cat h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--green); }
.menu__cat > header p { font: italic 400 1rem var(--serif); color: var(--terra); }
.menu__cat ul { display: grid; column-gap: 3rem; }
.dish { padding: 1rem 0; border-bottom: 1px dashed var(--line); break-inside: avoid; }
.dish__top { display: flex; align-items: baseline; gap: .6rem; }
.dish h4 { font-size: 1.22rem; font-weight: 600; }
.dish__top i { flex: 1; border-bottom: 2px dotted rgba(31, 27, 22, .25); transform: translateY(-4px); min-width: 1rem; }
.dish__price { font: 600 1.15rem var(--serif); color: var(--green); white-space: nowrap; }
.dish__tag { display: inline-block; vertical-align: middle; margin-left: .3rem; padding: .1rem .55rem; border-radius: 999px; background: var(--ochre); color: var(--green); font: 600 .68rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.dish p { font-size: .92rem; color: var(--muted); margin-top: .25rem; max-width: 52ch; }
.menu__note { margin: 1.8rem auto 1.5rem; max-width: 60ch; text-align: center; font-size: .88rem; color: var(--muted); }
@media (min-width: 860px) { .menu__cat ul { grid-template-columns: 1fr 1fr; } }

/* order */
.order { display: grid; gap: 1rem; }
.order__card { padding: 2rem; border-radius: var(--radius); background: var(--green-2); display: grid; gap: .8rem; align-content: start; border: 1px solid rgba(248, 241, 228, .1); }
.order__card--accent { background: var(--ochre); color: var(--green); }
.order__num { font: italic 400 2.4rem/1 var(--serif); color: var(--ochre); }
.order__card--accent .order__num { color: var(--terra); }
.order__card h3 { font-size: 1.8rem; }
.order__card p { opacity: .85; }
.link { font-weight: 600; color: var(--ochre); margin-top: .4rem; }
.apps { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.app { padding: .65rem 1.1rem; border-radius: 10px; font-weight: 600; font-size: .95rem; transition: transform .2s; }
.app:hover { transform: translateY(-2px); }
.app--guru { background: var(--green); color: var(--cream); }
.app--deliveroo { background: #00ccbc; color: #fff; }
@media (min-width: 860px) { .order { grid-template-columns: repeat(3, 1fr); } }

/* infos */
.infos { display: grid; gap: 2.5rem; align-items: center; }
.facts { display: grid; gap: 1.2rem; margin: 2rem 0; }
.facts div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.facts dt { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green-3); padding-top: .2rem; }
.facts dd { font: 500 1.15rem/1.5 var(--serif); }
.facts a:hover { color: var(--terra); }
.map { border-radius: var(--radius); overflow: hidden; border: 6px solid #fffaf1; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35); aspect-ratio: 4 / 3.4; background: var(--cream-2); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 900px) { .infos { grid-template-columns: 1fr 1.15fr; } }

/* footer */
.footer { background: var(--green); color: rgba(248, 241, 228, .8); padding-bottom: 6rem; font-size: .93rem; }
.footer__in { display: grid; gap: 1.6rem; padding: 3rem 0 2rem; border-bottom: 1px solid rgba(248, 241, 228, .12); }
.footer a:hover { color: var(--ochre); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.4rem; font-size: .85rem; }
@media (min-width: 860px) { .footer__in { grid-template-columns: 1fr 1.2fr 1.2fr; align-items: center; } .footer { padding-bottom: 2rem; } }

.mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: rgba(23, 58, 38, .97); }
@media (min-width: 881px) { .mobilebar { display: none; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero__art::before, .coin__float, .coin__face::after, .coin__shadow { animation: none; } * { transition: none !important; } }

/* dish marked "épuisé" (sold out) from the admin */
.dish--out h4, .dish--out .dish__price, .dish--out p { opacity: .5; }
.dish--out .dish__price { text-decoration: line-through; }
.dish__tag--out { background: var(--terra); color: var(--cream); opacity: 1; }

/* Netlify's free plan shows a "Powered by Netlify" badge in the bottom-right corner:
   keep the call/menu buttons clear of it */
.mobilebar { grid-template-columns: 1fr; padding-right: calc(1rem + 186px); }
.mobilebar .btn--cream { display: none; }