* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overscroll-behavior-y: contain; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative; }

/* ===== Screens (transition douce entre vues) ===== */
.screen { display: none; animation: screenIn var(--t) var(--ease); }
.screen.active { display: block; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===== Header ===== */
.app-header {
  position: sticky; top: 0; z-index: 30;
  padding: calc(var(--safe-t) + var(--s-5)) var(--s-5) var(--s-4);
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
/* Chorégraphie d'entrée — cascade orchestrée header → meta → tabs → cartes */
@keyframes riseIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.brand-row { display: flex; align-items: center; gap: var(--s-3); animation: riseIn .55s var(--ease) both; }
.brand-meta { animation: riseIn .55s var(--ease) .05s both; }
.tabs { animation: riseIn .55s var(--ease) .1s both; }
.brand-logo { width: 44px; height: 44px; border-radius: 13px; box-shadow: 0 1px 2px rgba(17,17,20,.08), inset 0 0 0 1px rgba(17,17,20,.05); flex: 0 0 44px; }
.brand-block { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.brand-bio { font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Meta utiles (horaires / zone / délai) */
.brand-meta { display: flex; gap: 6px; margin-top: var(--s-3); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.brand-meta::-webkit-scrollbar { display: none; }
.meta-chip { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--bg-soft); padding: 6px 11px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(17,17,20,.04); }

/* Quick-nav catégories (scroll vers section, scrollspy) */
.cat-nav { display: none; gap: 7px; margin-top: var(--s-3); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding: 12px; }
.cat-nav.show { display: flex; }
.cat-nav::-webkit-scrollbar { display: none; }
.cat-chip {
  flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  background: var(--bg-soft); padding: 8px 14px; border-radius: var(--r-pill);
  white-space: nowrap; transition: all var(--t-fast) var(--ease);
}
.cat-chip.active { background: var(--ink); color: #fff; }
.cat-chip:active { transform: scale(.96); }
.status-pill {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: var(--bg-soft); padding: 7px 13px; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px rgba(17,17,20,.04);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(20,164,77,.5); animation: pulse 2s infinite; }
.status-dot.closed { background: var(--ink-3); animation: none; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(20,164,77,.5)} 70%{box-shadow:0 0 0 7px rgba(20,164,77,0)} 100%{box-shadow:0 0 0 0 rgba(20,164,77,0)} }

/* ===== Tabs catégories (swipe) ===== */
.tabs { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.tab {
  flex: 1; padding: 10px 12px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 14px; color: var(--ink-2);
  background: var(--bg-soft); transition: all var(--t-fast) var(--ease);
}
.tab.active { background: var(--ink); color: #fff; }
.tab:active { transform: scale(.97); }

/* ===== Sections menu ===== */
.menu-wrap { padding: var(--s-5) var(--s-5) 120px; }
.section-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.035em; margin: var(--s-6) 0 var(--s-3); scroll-margin-top: 190px; padding-left: 12px; position: relative; }
.section-title::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 4px; background: var(--accent); }
.section-title:first-child { margin-top: var(--s-2); }

/* ===== Grille produits (style Uber Eats / McDo) ===== */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-3); margin-top: var(--s-1); align-items: start; }
.card {
  position: relative; cursor: pointer;
  animation: cardIn var(--t-slow) var(--ease) both;
  transition: transform var(--t-fast) var(--ease);
}
.card:active { transform: scale(.97); }
@keyframes cardIn { from { opacity:0; transform: translateY(10px);} to {opacity:1; transform:none;} }

.card-media { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center; }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-emoji { font-size: 64px; line-height: 1; user-select: none; }
/* Tuile appétit : dégradé chaud + lueur, varié par catégorie (en attendant les vraies photos) */
.card-media.placeholder {
  background: radial-gradient(120% 120% at 30% 20%, #fff3e6 0%, #ffe2c4 48%, #ffd0a3 100%);
  box-shadow: inset 0 0 0 1px rgba(255,138,61,.16);
}
.card-media.placeholder.cat-boisson {
  background: radial-gradient(120% 120% at 30% 20%, #eaf6ff 0%, #cfe9fb 48%, #aed8f5 100%);
  box-shadow: inset 0 0 0 1px rgba(54,148,214,.16);
}
.card-media.placeholder.cat-dessert {
  background: radial-gradient(120% 120% at 30% 20%, #fff0f5 0%, #ffd9e6 48%, #ffc2d6 100%);
  box-shadow: inset 0 0 0 1px rgba(214,84,140,.16);
}

.card-info { padding: var(--s-2) 2px 0; }
.card-name { font-size: 15px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-desc { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.card-price { font-size: 15px; font-weight: 800; margin-top: 5px; color: var(--accent); letter-spacing: -.01em; }

/* Bouton + blanc posé sur la photo (pattern Uber Eats) */
.add-btn {
  position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px;
  border-radius: 50%; background: #fff; color: var(--ink);
  box-shadow: 0 2px 8px rgba(17,17,20,.18), inset 0 0 0 .5px rgba(17,17,20,.04);
  display: grid; place-items: center; font-size: 21px; font-weight: 600; line-height: 1;
  transition: transform var(--t-fast) var(--spring);
}
.add-btn:active { transform: scale(.85); }

/* ===== Skeleton ===== */
.sk { background: linear-gradient(100deg, #eee 30%, #f5f5f6 50%, #eee 70%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: var(--r-sm); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk-card { display:flex; gap: var(--s-4); padding: var(--s-3) 0; border-bottom:1px solid var(--line); }
.sk-line { height: 14px; margin-bottom: 8px; }

/* ===== Écran fermé ===== */
.closed-screen { min-height: 100dvh; place-items: center; text-align: center; padding: var(--s-6); }
.closed-screen.active { display: grid; }
.closed-inner { max-width: 320px; }
.closed-logo { width: 96px; height: 96px; border-radius: 28px; margin: 0 auto var(--s-5); box-shadow: var(--sh-2); animation: floaty 4s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.closed-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.closed-sub { color: var(--ink-2); margin-top: var(--s-3); line-height: 1.45; }
.countdown { margin-top: var(--s-6); font-variant-numeric: tabular-nums; font-size: 40px; font-weight: 800; letter-spacing: -.02em; }
.countdown-label { font-size: 13px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }

/* ===== Barre panier sticky ===== */
.cart-bar {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(140%);
  bottom: calc(var(--safe-b) + 14px); width: min(452px, calc(100% - 28px));
  z-index: 40; background: var(--ink); color: #fff;
  border-radius: var(--r-pill); padding: 16px 22px;
  display: flex; align-items: center; gap: var(--s-3);
  box-shadow: var(--sh-3); transition: transform var(--t) var(--spring);
}
.cart-bar.show { transform: translateX(-50%) translateY(0); }
.cart-count { background: #fff; color: var(--ink); min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: var(--r-pill); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.cart-label { font-weight: 700; }
.cart-total { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.bump { animation: bump var(--t) var(--spring); }
@keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.25)} 100%{transform:scale(1)} }
/* Pulsation discrète à l'ajout (barre déjà visible) — feedback de conversion */
.cart-bar.pulse { animation: cartPulse .42s var(--spring); }
@keyframes cartPulse {
  0%   { transform: translateX(-50%) translateY(0) scale(1); }
  35%  { transform: translateX(-50%) translateY(0) scale(1.035); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

.empty { text-align: center; color: var(--ink-3); padding: var(--s-12) var(--s-6); }

/* ===== Bandeau fermé (non bloquant) ===== */
.closed-banner { display: none; padding: 12px var(--s-5); background: #fff7ed; border-bottom: 1px solid #fde7c8; }
.closed-banner.show { display: block; }
.cb-text { font-size: 13.5px; font-weight: 600; color: #92510c; line-height: 1.4; }
.cb-text b { font-weight: 800; }

/* ===== Accessibilité — respect du mouvement réduit ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== HERO restaurant (style Uber Eats) ===== */
.resto-hero { background: var(--bg); }
.resto-cover {
  position: relative; width: 100%; height: 172px; overflow: hidden;
  background: linear-gradient(135deg, #2a1a12 0%, #50260f 55%, #ff5a1f 140%);
}
.resto-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.resto-cover-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.28) 100%); }
.resto-fab {
  position: absolute; top: calc(var(--safe-t) + 12px); right: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center; font-size: 17px; font-weight: 800; color: var(--ink);
  box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: transform var(--t-fast) var(--spring);
}
.resto-fab:active { transform: scale(.9); }
.resto-fab.logged { background: var(--ink); color: #fff; }

.resto-id { position: relative; padding: 0 var(--s-5) var(--s-4); }
.resto-logo {
  width: 72px; height: 72px; border-radius: 20px; object-fit: cover;
  margin-top: -34px; position: relative; border: 3px solid var(--bg);
  box-shadow: 0 6px 18px rgba(17,17,20,.18); background: var(--bg);
}
.resto-name { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; margin: 10px 0 4px; }
.resto-rate { font-size: 13.5px; color: var(--ink-2); font-weight: 600; line-height: 1.5; margin: 0; }
.rr-star { color: #ff9500; }
.resto-rate b { color: var(--ink); font-weight: 800; }
.rr-dot { color: var(--ink-3); margin: 0 3px; }

/* Carte infos livraison */
.resto-info {
  display: flex; align-items: stretch; gap: 0; margin-top: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--bg);
  box-shadow: var(--sh-1);
}
.ri-cell { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.ri-icon { display: inline-flex; align-items: center; color: var(--accent); }
.ri-txt b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.ri-txt small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 600; margin-top: 1px; }
.ri-sep { width: 1px; background: var(--line); }

/* Promo mise en avant */
.promo {
  display: none; margin-top: var(--s-3); padding: 13px 15px;
  background: #fff4e2; border: 1px solid #fde7c8; border-radius: var(--r-md);
}
.promo.show { display: block; }
.promo.promo-open { background: #e9f8ef; border-color: #c7ebd5; }
.cb-text { font-size: 13.5px; font-weight: 600; color: #92510c; line-height: 1.4; }
.promo.promo-open .cb-text { color: #137a43; }
.cb-text b { font-weight: 800; }

/* Sticky nav sous le hero */
.subnav {
  position: sticky; top: 0; z-index: 30; padding: var(--s-3) var(--s-5) 0;
  background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.subnav .cat-nav { margin-bottom: var(--s-3); }

/* ===== Splash de démarrage (ressenti app native) ===== */
.splash {
  position: fixed; inset: 0; z-index: 999; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 30%, #3a2113 0%, #271611 45%, #150c0a 100%);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.splash.hide { opacity: 0; transform: scale(1.04); pointer-events: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; }
.splash-logo {
  width: 108px; height: 108px; border-radius: 26px; object-fit: cover;
  box-shadow: 0 18px 50px rgba(255,90,31,.30), 0 0 0 1px rgba(0,0,0,.04);
  animation: splashPop .7s var(--spring) both;
}
.splash-name {
  font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.04em;
  color: #fff; margin-top: 18px; animation: splashRise .6s var(--ease) .12s both;
}
.splash-tag { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.6); margin-top: 4px; animation: splashRise .6s var(--ease) .2s both; }
.splash-spin {
  position: absolute; bottom: calc(var(--safe-b) + 54px); width: 26px; height: 26px;
  border: 2.5px solid rgba(255,255,255,.18); border-top-color: var(--accent);
  border-radius: 50%; animation: co-spin .8s linear infinite; opacity: 0; animation: co-spin .8s linear infinite, splashRise .5s var(--ease) .35s both;
}
@keyframes splashPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes splashRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Entrée douce du hero après le splash */
.resto-cover-img { animation: heroFade .7s var(--ease) both; }
.resto-id { animation: riseIn .55s var(--ease) .08s both; }
@keyframes heroFade { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }