/* ============================================================
   MON MENU — DESIGN SYSTEM WEB
   Basé sur la charte graphique v1.0 (Bold Agence × Mon Menu)
   ============================================================ */

:root{
  --red-900:#B30A0A; --red-700:#D11414; --red-500:#ED1C24; --red-100:#FDECEC;
  --ink-900:#0E0E10; --ink-700:#2B2B2F; --ink-500:#6E6E76; --ink-300:#B7B7BD; --ink-100:#ECECEE;
  --paper:#FAF8F5; --paper-pure:#FFFFFF; --gold:#C9A14A;
  --success:#0F8F4F; --warning:#C77A00; --error:#C8211F; --info:#1F5BC8;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  --shadow-1: 0 1px 2px rgba(14,14,16,0.06), 0 1px 1px rgba(14,14,16,0.04);
  --shadow-2: 0 8px 20px rgba(14,14,16,0.08), 0 2px 6px rgba(14,14,16,0.05);
  --shadow-3: 0 20px 48px rgba(14,14,16,0.16);
  --shadow-cta: 0 10px 24px rgba(179,10,10,0.28);

  --ease-signature: cubic-bezier(0.32,0.72,0,1);
  --ease-out: cubic-bezier(0.4,0,0.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink-900);
  font-family:'Geist', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }
:focus-visible{ outline:2.5px solid var(--red-700); outline-offset:2px; border-radius:4px; }

.wrap{ max-width:1280px; margin:0 auto; padding:0 40px; }
.wrap-narrow{ max-width:920px; margin:0 auto; padding:0 40px; }

.eyebrow{
  font-family:'JetBrains Mono', monospace; font-weight:600; font-size:11px;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--red-700);
}

/* ===== Photo placeholders (signature duotone) ===== */
.photo{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 140% at 15% 10%, rgba(255,255,255,0.10), transparent 45%),
    linear-gradient(135deg, var(--ink-900) 0%, var(--red-900) 58%, var(--red-700) 100%);
}
.photo::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 6px);
  mix-blend-mode:overlay;
}
.photo .glyph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:64px; filter:drop-shadow(0 8px 20px rgba(0,0,0,0.25)); opacity:0.92;
}
.photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.photo.gold::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, transparent 40%, rgba(201,161,74,0.22) 100%);
}
.asset-tag{
  position:absolute; bottom:10px; left:10px;
  font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:0.03em;
  color:rgba(255,255,255,0.72); background:rgba(14,14,16,0.35);
  padding:4px 8px; border-radius:6px; backdrop-filter:blur(4px); pointer-events:none;
}

/* ===== Utility + Header ===== */
.utility-bar{ background:var(--ink-900); color:rgba(255,255,255,0.72); }
.utility-bar .wrap{ display:flex; align-items:center; justify-content:space-between; height:36px; font-size:12.5px; }
.utility-bar .u-left, .utility-bar .u-right{ display:flex; align-items:center; gap:20px; }
.utility-bar a{ transition:color .15s var(--ease-out); }
.utility-bar a:hover{ color:#fff; }
.utility-bar .u-right a.partner{ color:var(--gold); font-weight:500; }

header.main{ position:sticky; top:0; z-index:50; background:var(--paper-pure); border-bottom:1px solid var(--ink-100); }
header.main .wrap{ display:flex; align-items:center; gap:32px; height:84px; }
.logo img{ height:30px; width:auto; }

.search-cluster{
  flex:1; display:flex; align-items:center; background:var(--paper);
  border:1.5px solid var(--ink-100); border-radius:var(--r-pill); height:52px;
  padding:0 6px 0 20px; transition:border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
  max-width:640px; margin:0 auto;
}
.search-cluster:focus-within{ border-color:var(--red-700); box-shadow:0 0 0 4px var(--red-100); }
.search-cluster svg{ flex-shrink:0; color:var(--ink-500); }
.search-cluster input{
  border:none; background:none; outline:none; font-family:'Geist'; font-size:14.5px;
  color:var(--ink-900); width:100%; height:100%; padding:0 12px;
}
.search-cluster input::placeholder{ color:var(--ink-500); }
.search-cluster .loc-chip{
  display:flex; align-items:center; gap:6px; background:var(--paper-pure);
  border:1px solid var(--ink-100); border-radius:var(--r-pill); padding:8px 14px 8px 10px;
  font-size:13px; font-weight:500; white-space:nowrap; flex-shrink:0;
}
.search-cluster .loc-chip svg{ color:var(--red-700); }

.header-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }

.search-btn{
  display:inline-flex; align-items:center; gap:9px;
  height:44px; padding:0 20px;
  border:1.5px solid var(--ink-100); border-radius:var(--r-pill);
  background:var(--paper); color:var(--ink-700);
  font-size:14px; font-weight:600;
  transition:border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.search-btn:hover{ border-color:var(--ink-300); background:var(--paper-pure); }
.search-btn svg{ color:var(--ink-500); }
.icon-btn{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-pill); color:var(--ink-700); transition:background .15s var(--ease-out);
  position:relative;
}
.icon-btn:hover{ background:var(--ink-100); }
.icon-btn .dot-badge{
  position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%;
  background:var(--red-700); border:1.5px solid #fff;
}

.account-btn{
  display:flex; align-items:center; gap:8px; padding:8px 16px 8px 8px; border-radius:var(--r-pill);
  transition:background .15s var(--ease-out); font-size:14px; font-weight:600;
}
.account-btn:hover{ background:var(--ink-100); }
.account-btn .avatar{
  width:32px; height:32px; border-radius:50%; background:var(--ink-100);
  display:flex; align-items:center; justify-content:center; color:var(--ink-500);
  font-family:'Fraunces'; font-weight:600; font-size:13px;
}

.cart-btn{
  display:flex; align-items:center; gap:8px; background:var(--red-700); color:#fff; height:44px;
  padding:0 18px 0 14px; border-radius:var(--r-pill); font-weight:600; font-size:14px;
  box-shadow:var(--shadow-cta); transition:background .15s var(--ease-out), transform .1s var(--ease-out);
}
.cart-btn:hover{ background:var(--red-900); }
.cart-btn:active{ transform:scale(0.97); }
.cart-badge{ background:rgba(255,255,255,0.22); border-radius:var(--r-pill); font-size:12px; font-weight:700; padding:1px 7px; }

/* ===== Sub-header (breadcrumb / page title bar) ===== */
.sub-header{ border-bottom:1px solid var(--ink-100); background:var(--paper-pure); }
.sub-header .wrap{ display:flex; align-items:center; gap:14px; height:60px; font-size:13.5px; color:var(--ink-500); }
.sub-header a:hover{ color:var(--red-700); }
.sub-header .current{ color:var(--ink-900); font-weight:600; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:15px;
  border-radius:var(--r-md); padding:0 26px; height:56px;
  transition:background .16s var(--ease-out), transform .1s var(--ease-out), box-shadow .16s var(--ease-out);
}
.btn:active{ transform:scale(0.98); }
.btn-md{ height:44px; font-size:14px; padding:0 20px; }
.btn-primary{ background:var(--red-700); color:#fff; box-shadow:var(--shadow-cta); }
.btn-primary:hover{ background:var(--red-900); }
.btn-primary:disabled{ opacity:0.4; box-shadow:none; cursor:not-allowed; }
.btn-dark{ background:var(--ink-900); color:#fff; }
.btn-dark:hover{ background:var(--ink-700); }
.btn-secondary{ background:#fff; color:var(--ink-900); border:1.5px solid var(--ink-100); }
.btn-secondary:hover{ border-color:var(--ink-300); }
.btn-ghost{ color:var(--ink-900); font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.btn-ghost svg{ transition:transform .15s var(--ease-out); }
.btn-ghost:hover svg{ transform:translateX(3px); }
.btn-destructive{ background:var(--error); color:#fff; }
.btn-full{ width:100%; }

/* ===== Section header ===== */
.section{ padding:56px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; }
.section-head h2{ font-family:'Fraunces'; font-weight:600; font-size:30px; letter-spacing:-0.01em; margin-top:8px; }
.section-head p.sub{ font-size:14.5px; color:var(--ink-500); margin-top:6px; max-width:480px; }
.see-all{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:14px; color:var(--ink-900); padding-bottom:4px; flex-shrink:0; }
.see-all svg{ transition:transform .15s var(--ease-out); }
.see-all:hover svg{ transform:translateX(3px); }

/* ===== Restaurant cards ===== */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }

.r-card{
  background:var(--paper-pure); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease-signature), box-shadow .2s var(--ease-out); cursor:pointer; display:block;
}
.r-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); }
.r-card .photo{ aspect-ratio:4/3; }
.r-card .photo .glyph{ font-size:46px; }
.r-card.wide .photo{ aspect-ratio:16/9; }

.badge{
  position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:5px;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; font-weight:600; letter-spacing:0.05em;
  padding:6px 10px; border-radius:var(--r-pill); text-transform:uppercase; z-index:2;
}
.badge-selection{ background:var(--paper-pure); color:var(--gold); border:1px solid var(--gold); }
.badge-new{ background:var(--ink-900); color:#fff; border:1px solid transparent; }
.badge-promo{ background:var(--red-700); color:#fff; }
.badge-closed{ background:rgba(14,14,16,0.72); color:#fff; left:auto; right:12px; }

.r-card .logo-chip{
  position:absolute; bottom:-22px; left:14px; width:44px; height:44px; border-radius:50%;
  background:var(--paper-pure); border:2px solid #fff; box-shadow:var(--shadow-2);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.r-card .photo-wrap{ position:relative; }
.r-card .r-body{ padding:30px 16px 16px; }
.r-card .r-name{ font-family:'Fraunces'; font-weight:600; font-size:17px; margin-bottom:4px; }
.r-card .r-meta{ font-size:13px; color:var(--ink-500); margin-bottom:8px; }
.r-card .r-foot{ display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.r-card .r-rating{ display:flex; align-items:center; gap:4px; font-weight:600; }
.r-card .r-rating svg{ color:var(--gold); }
.r-card .r-fee{ color:var(--ink-500); font-variant-numeric:tabular-nums; }
.r-card .editorial-note{
  font-family:'Fraunces'; font-style:italic; font-size:13px; color:var(--ink-700);
  border-left:2px solid var(--gold); padding-left:10px; margin-top:10px; line-height:1.4;
}

/* ===== Chips / filters ===== */
.chip{
  display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 16px;
  border-radius:var(--r-pill); border:1.5px solid var(--ink-100); background:#fff;
  font-size:13.5px; font-weight:600; color:var(--ink-700); transition:all .15s var(--ease-out);
}
.chip:hover{ border-color:var(--ink-300); }
.chip.active{ background:var(--ink-900); border-color:var(--ink-900); color:#fff; }
.chip svg{ opacity:0.7; }

/* ===== Inputs ===== */
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:13px; font-weight:600; color:var(--ink-700); }
.field input, .field textarea, .field select{
  height:52px; border:1.5px solid var(--ink-100); border-radius:var(--r-md);
  padding:0 16px; font-family:'Geist'; font-size:14.5px; background:#fff; outline:none;
  transition:border-color .15s var(--ease-out), box-shadow .15s var(--ease-out); color: var(--ink-900);
}
.field textarea{ height:auto; padding:14px 16px; resize:vertical; min-height:90px; font-family:'Geist'; }
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--red-700); box-shadow:0 0 0 4px var(--red-100);
}
.field .hint{ font-size:12px; color:var(--ink-500); }

/* ===== Stepper ===== */
.stepper{
  display:inline-flex; align-items:center; gap:14px; height:36px; padding:0 6px;
  border-radius:var(--r-pill); border:1.5px solid var(--ink-100); background:#fff;
}
.stepper button{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--ink-100); color:var(--ink-900); font-weight:700; font-size:15px;
  transition:background .15s var(--ease-out);
}
.stepper button:hover{ background:var(--ink-300); }
.stepper button.remove{ background:var(--red-100); color:var(--red-700); }
.stepper .qty{ font-variant-numeric:tabular-nums; font-weight:600; min-width:14px; text-align:center; }

/* ===== Footer ===== */
footer{ background:var(--paper-pure); border-top:1px solid var(--ink-100); margin-top:40px; }
footer .footer-top{ padding:64px 0 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
footer .f-brand img{ height:26px; margin-bottom:16px; }
footer .f-brand p{ font-size:13.5px; color:var(--ink-500); max-width:260px; line-height:1.6; }
footer h4{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-500); margin-bottom:16px; }
footer ul li{ margin-bottom:12px; }
footer ul li a{ font-size:14px; color:var(--ink-700); transition:color .15s var(--ease-out); }
footer ul li a:hover{ color:var(--red-700); }
.payment-badges{ display:flex; gap:8px; margin-top:18px; }
.pay-pill{ height:28px; padding:0 12px; border-radius:var(--r-pill); display:flex; align-items:center; font-size:11.5px; font-weight:700; color:#fff; }
.pay-wave{ background:#1DC8FA; } .pay-om{ background:#FF7900; } .pay-djamo{ background:var(--ink-900); } .pay-cash{ background:var(--success); }
.footer-bottom{ border-top:1px solid var(--ink-100); padding:22px 0; display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--ink-500); }
.footer-bottom .socials{ display:flex; gap:14px; }
.footer-bottom .socials a{ width:34px; height:34px; border-radius:50%; background:var(--paper); display:flex; align-items:center; justify-content:center; transition:background .15s var(--ease-out); }
.footer-bottom .socials a:hover{ background:var(--ink-100); }

/* ===== Toast ===== */
/* display:none par défaut ; .open l'affiche, puis .show déclenche la glissade */
.toast{
  position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-140%);
  background:var(--ink-900); color:#fff; display:none; align-items:center; gap:10px;
  padding:12px 18px; border-radius:var(--r-pill); box-shadow:var(--shadow-3); z-index:200;
  font-size:14px; font-weight:600; transition:transform .32s var(--ease-signature);
}
.toast.open{ display:flex; }
.toast.show{ transform:translateX(-50%) translateY(0); }
.toast .dot{ width:20px; height:20px; border-radius:50%; background:var(--success); display:flex; align-items:center; justify-content:center; font-size:11px; }

/* ===== Empty / breadcrumb helpers ===== */
.crumb-sep{ opacity:0.4; }

/* ===== Smooth scroll (Lenis) ===== */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

@media (max-width:1100px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  footer .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .wrap, .wrap-narrow{ padding:0 20px; }
  .utility-bar{ display:none; }
  header.main .wrap{ height:72px; gap:14px; }
  .search-cluster .loc-chip{ display:none; }
  .account-btn span{ display:none; }
  .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr 1fr; gap:14px; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  footer .footer-top{ grid-template-columns:1fr; padding:40px 0 24px; }
}
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }