/* ═══════════════════════════════════════════════════════════
   DASHBOARD SHELL — Atelier Vert · bandeau vert + base douce
   (2026-05-19 bis · adoucissement pour usage prolongé 8h/jour)
   ═══════════════════════════════════════════════════════════
   Évolution depuis le « vert imperial dominant » de la session
   précédente : le vert plein écran fatigue les yeux du staff
   sur des sessions longues. On garde la signature verte mais
   uniquement en BANDEAU SUPÉRIEUR qui fade vers un fond beige
   chaud désaturé eye-friendly.

   Pattern :
   - background-attachment: fixed sur body + html → le gradient
     reste figé au scroll (la bande verte reste visible en haut
     même quand on scroll bas dans le contenu).
   - Vert imperial #004B23 plein de 0% à ~6% du viewport,
     fade vers #EDE7D3 (sable chaud désaturé) à ~35%, base
     constante en bas.
   - Le #EDE7D3 est entre cream (#F8F1DA) et taupe : assez
     chaud pour rester dans Editorial Warmth, assez désaturé
     pour reposer l'œil. Contraste avec le vert imperial reste
     subtil (pas un cut blanc agressif).
   - Halos paprika baissés à 5%/3% pour ne pas devenir trop
     visibles sur fond clair.
   - Header + nav.tabs vivent dans la bande verte (texte cream
     OK). Le main et les cards vivent sur le sable.
   - Dark mode : même pattern inversé — bande supérieure
     #002E15 (green-deep) qui fade vers #001A0C (green-darker).
   ═══════════════════════════════════════════════════════════ */

/* ---------- 1. Fond global : bande verte → sable doux ---------- */
body.light-surface {
  /* Layer order (top → bottom) :
     1. halos paprika ultra-subtils (5% / 3%)
     2. gradient vertical vert imperial → sable
     Le sable #EDE7D3 reste comme base infinie quand on scroll. */
  background-color: #EDE7D3 !important;
  background-image:
    radial-gradient(ellipse at 80% 0%, rgba(227, 106, 40, 0.05), transparent 55%),
    radial-gradient(ellipse at 0% 80%, rgba(227, 106, 40, 0.03), transparent 50%),
    linear-gradient(
      180deg,
      #004B23 0%,
      #004B23 6%,
      #1F5B2F 10%,
      #EDE7D3 16%,
      #EDE7D3 100%
    ) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat;
  transition: background-color 0.4s ease;
}

/* html doit aussi être vert en TOP pour que la zone d'overscroll
   bounce (iOS / Mac trackpad scroll-top) montre du vert, pas du
   sable abrupt. Côté bottom, on laisse le sable. */
html {
  background-color: #EDE7D3;
  transition: background-color 0.4s ease;
}

/* ---------- 2. Main = transparent (laisse passer le gradient) ---------- */
body.light-surface main {
  background-color: transparent;
  padding-top: 2.4rem;
  transition: background-color 0.4s ease;
}

/* Hairline paprika juste sous la nav (signature design system). */
body.light-surface nav.tabs::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(227, 106, 40, 0.55) 20%,
    rgba(227, 106, 40, 0.55) 80%,
    transparent 100%
  );
  pointer-events: none;
}

/* ---------- 3. Cards : cream sur sable (= papiers posés) ---------- */
/* Les cards et panels gardent leur fond cream/blanc défini par les
   tokens light-surface — c'est ce qui rend la donnée lisible. On
   ajoute juste un accent gauche paprika 3px (signature) et une
   ombre verte douce pour les ancrer sur le sable. */
body.light-surface .card,
body.light-surface .panel,
body.light-surface .upgrade,
body.light-surface .hh-section,
body.light-surface .chart-card,
body.light-surface .me-quadrant,
body.light-surface .addon-card,
body.light-surface .plan-card:not(.featured),
body.light-surface .qr-card {
  border-left: 3px solid var(--paprika, #E36A28);
  box-shadow:
    0 1px 0 rgba(0, 75, 35, 0.05),
    0 8px 24px -8px rgba(0, 46, 21, 0.16),
    0 24px 56px -24px rgba(0, 26, 12, 0.18);
  transition:
    transform var(--t, 240ms) var(--ease, cubic-bezier(.2,.9,.2,1)),
    box-shadow var(--t, 240ms) var(--ease, cubic-bezier(.2,.9,.2,1)),
    border-color var(--t, 240ms) var(--ease, cubic-bezier(.2,.9,.2,1));
}

body.light-surface .card:hover,
body.light-surface .panel:hover,
body.light-surface .chart-card:hover {
  border-left-color: var(--paprika-bright, #F2832F);
  box-shadow:
    0 2px 0 rgba(0, 75, 35, 0.07),
    0 16px 36px -8px rgba(0, 46, 21, 0.22),
    0 40px 80px -24px rgba(0, 26, 12, 0.26);
}

/* Plan-card.featured (premium plan) garde son fond paprika rempli —
   ne pas écraser. Juste s'assurer que l'accent gauche n'apparait pas. */
body.light-surface .plan-card.featured {
  border-left: 1.5px solid var(--paprika, #E36A28);
}

/* ---------- 4. Modal backdrop : vert deep avec halo paprika ---------- */
body.light-surface .modal-backdrop {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(227, 106, 40, 0.18), transparent 55%),
    rgba(0, 26, 12, 0.72);
  backdrop-filter: blur(8px) saturate(120%);
  transition: background var(--t-slow, 440ms) var(--ease, cubic-bezier(.2,.9,.2,1));
}

/* ---------- 5. Toasts : reste paprika rempli sur fond mixte ---------- */
body.light-surface .toast {
  /* déjà paprika via tokens, juste shadow renforcée pour pop sur sable */
  box-shadow:
    0 18px 40px -12px rgba(0, 46, 21, 0.32),
    0 0 0 1px rgba(245, 200, 66, 0.18);
}

/* ---------- 6. Header + nav.tabs vivent dans la bande verte ---------- */
/* Le header est dans le premier ~6% du viewport = vert imperial plein.
   On force un fond vert imperial opaque pour qu'il reste lisible (texte
   cream sur vert) même si le bandeau passe en gradient légèrement plus
   clair en bas. Le `color-mix(--bg, 92%)` de dashboard.css devient
   transparent → on override. */
body.light-surface header {
  background: linear-gradient(180deg, #002E15 0%, #004B23 100%) !important;
  border-bottom-color: rgba(227, 106, 40, 0.18) !important;
  box-shadow:
    0 1px 0 rgba(227, 106, 40, 0.20),
    0 8px 24px -8px rgba(0, 0, 0, 0.30);
  transition: background var(--t-slow, 440ms) var(--ease, cubic-bezier(.2,.9,.2,1)),
              box-shadow var(--t, 240ms) var(--ease, cubic-bezier(.2,.9,.2,1));
}

/* Header text doit être cream-readable sur vert imperial. */
body.light-surface header .brand,
body.light-surface header .resto,
body.light-surface header .resto strong,
body.light-surface header h1,
body.light-surface header h2 {
  color: var(--cream, #F8F1DA) !important;
}
body.light-surface header .brand > span:not(.hz-mark):not(.hz-wordmark) {
  color: var(--paprika, #E36A28) !important;
}

/* Nav.tabs sticky sous le header — vit aussi dans la bande verte.
   On force le fond vert deep pour qu'elle reste lisible en sticky. */
body.light-surface nav.tabs {
  position: sticky;
  top: 0;
  z-index: 18;
  background: #002E15 !important;
  border-bottom-color: rgba(227, 106, 40, 0.15) !important;
  box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.30);
}

/* Liens nav.tabs : cream sur vert deep, paprika quand actif. */
body.light-surface nav.tabs .section-nav a,
body.light-surface nav.tabs .subtabs a,
body.light-surface nav.tabs > a {
  color: rgba(248, 241, 218, 0.65) !important;
}
body.light-surface nav.tabs .section-nav a.active {
  color: var(--cream, #F8F1DA) !important;
  background: var(--paprika, #E36A28) !important;
  border-color: var(--paprika, #E36A28) !important;
}
body.light-surface nav.tabs .section-nav a:not(.active):hover {
  color: var(--cream, #F8F1DA) !important;
  background: rgba(248, 241, 218, 0.08) !important;
}
body.light-surface nav.tabs .subtabs a.active,
body.light-surface nav.tabs > a.active {
  color: var(--cream, #F8F1DA) !important;
  border-bottom-color: var(--paprika, #E36A28) !important;
}
body.light-surface nav.tabs .subtabs a:hover,
body.light-surface nav.tabs > a:hover {
  color: var(--cream, #F8F1DA) !important;
}

/* ---------- 7. Login screen : vert imperial avec hero éditorial ---------- */
body.light-surface #login {
  background:
    radial-gradient(circle at 50% 30%, rgba(227, 106, 40, 0.22), transparent 55%),
    radial-gradient(circle at 85% 75%, rgba(245, 200, 66, 0.10), transparent 50%),
    linear-gradient(180deg, #002E15 0%, #001A0C 100%) !important;
  transition: background 0.4s ease;
}

body.light-surface #login .login-box {
  background: #FCF7E8;
  border-left: 3px solid var(--paprika, #E36A28);
  box-shadow:
    0 24px 60px -16px rgba(0, 0, 0, 0.50),
    0 60px 120px -32px rgba(0, 0, 0, 0.40);
}

body.light-surface #login .hero-intro {
  color: var(--cream, #F8F1DA);
}

/* ---------- 8. Boutons header : meilleur contraste sur vert ---------- */
/* Les boutons inline du header (lang picker, aide, mobile, logout) sont
   actuellement en `border:1px solid var(--line)` qui devient peu visible
   une fois sur fond vert deep. On bump le contraste. */
body.light-surface header .right select,
body.light-surface header .right a[href*="wa.me"],
body.light-surface header .right button.mobile-view-btn {
  border-color: rgba(248, 241, 218, 0.25) !important;
  color: rgba(248, 241, 218, 0.78) !important;
  background: rgba(248, 241, 218, 0.05) !important;
  transition: background var(--t, 240ms) var(--ease, cubic-bezier(.2,.9,.2,1)),
              border-color var(--t, 240ms) var(--ease, cubic-bezier(.2,.9,.2,1)),
              color var(--t, 240ms) var(--ease, cubic-bezier(.2,.9,.2,1));
}

body.light-surface header .right select:hover,
body.light-surface header .right a[href*="wa.me"]:hover,
body.light-surface header .right button.mobile-view-btn:hover {
  border-color: var(--paprika, #E36A28) !important;
  color: var(--cream, #F8F1DA) !important;
  background: rgba(227, 106, 40, 0.20) !important;
}

/* Le bouton "Se déconnecter" reste en text-only mais cream sur vert. */
body.light-surface header .logout {
  color: rgba(248, 241, 218, 0.70) !important;
}
body.light-surface header .logout:hover {
  color: var(--paprika, #E36A28) !important;
}

/* ---------- 9. Empty states italic serif sur fond sable ---------- */
/* Quand un onglet vide est rendu directement sur le main (sans card
   wrapper), on est désormais sur fond sable → texte ink lisible
   directement (pas besoin de forcer cream). Le default token suffit. */
body.light-surface main > .empty,
body.light-surface .panel-body > .empty:only-child {
  color: var(--ink-900, #1a0f06);
  opacity: 0.62;
}

/* Dark mode retired 2026-05-26 — only light mode (cream + paprika +
   green imperial) ships. The brand palette carries the hierarchy. */

/* ---------- 11. prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body.light-surface,
  body.light-surface main,
  body.light-surface header,
  body.light-surface .modal-backdrop,
  html {
    transition: none !important;
  }
}

/* ---------- 12. Mobile — gradient ajusté pour viewport court ---------- */
@media (max-width: 768px) {
  body.light-surface main {
    padding-top: 1.2rem;
  }
  /* Sur mobile, le viewport est plus court → on raccourcit la bande
     verte pour que le sable apparaisse plus tôt (sinon le header+nav
     occupent déjà 100% de la bande verte et le sable n'apparaît pas
     avant un long scroll). */
  body.light-surface {
    background-image:
      radial-gradient(ellipse at 80% 0%, rgba(227, 106, 40, 0.05), transparent 55%),
      radial-gradient(ellipse at 0% 80%, rgba(227, 106, 40, 0.03), transparent 50%),
      linear-gradient(
        180deg,
        #004B23 0%,
        #004B23 7%,
        #1F5B2F 12%,
        #EDE7D3 18%,
        #EDE7D3 100%
      ) !important;
  }
  /* Sticky nav peut être plus haute sur mobile, on évite l'ombre lourde */
  body.light-surface nav.tabs {
    box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.25);
  }
}

/* ---------- 12bis. Anti-bugs mobile (post-refonte mobile-first) ----------
   - Pas de scroll horizontal accidentel (Bug #4) — overflow-x:clip
     préserve position:sticky descendants (vs overflow:hidden qui casse).
   - Dynamic viewport height (Bug #2 — pas d'espace blanc en bas).
   - #tabContainer sans min-height forcé, layout flex column.
   - Header reste collé en haut (Bug #3) via sticky + safe-area-inset.   */
html { overflow-x: clip; max-width: 100%; }
body { overflow-x: clip; max-width: 100%; min-height: 100vh; min-height: 100dvh; }
@media (max-width: 1023px) {
  body.light-surface #app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  body.light-surface #tabContainer { flex: 1; min-height: 0; }
  body.light-surface main#tabContainer { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  /* Header sticky + safe-area pour notch iPhone (déjà sticky en §14, on ajoute le safe-area) */
  body.light-surface header { padding-top: env(safe-area-inset-top) !important; }
}

/* ═══════════════════════════════════════════════════════════
   13. MOBILE NAV — bottom nav iOS-style + drawer slide-in
   ═══════════════════════════════════════════════════════════
   Sous 1024px : nav.tabs cachée, bottom-nav 5 items + drawer
   pour les ~20 autres onglets. Au-delà : layout desktop intact.
   ═══════════════════════════════════════════════════════════ */

/* Cacher la bottom-nav et drawer sur desktop */
.dash-bottom-nav,
.dash-drawer,
.dash-drawer-backdrop {
  display: none;
}

/* Bottom nav — visible <1024px */
@media (max-width: 1023px) {
  /* Cacher la nav.tabs desktop ; le drawer prend le relais pour les
     onglets non-bottom (et la section-nav devient des headings dans
     le drawer). */
  body.light-surface nav.tabs {
    display: none !important;
  }

  /* Bottom nav fixed bottom, glassmorphism vert deep, 5 items équidistants */
  .dash-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(0, 26, 12, 0.96);
    backdrop-filter: blur(12px) saturate(120%);
    border-top: 2px solid var(--paprika, #E36A28);
    padding: 10px 4px env(safe-area-inset-bottom, 8px);
    box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, 0.25);
    transition: transform var(--t, 240ms) var(--ease, cubic-bezier(.2,.9,.2,1));
  }

  .dash-bn-item {
    flex: 1;
    min-height: 76px;
    background: transparent;
    border: 0;
    color: rgba(248, 241, 218, 0.62);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    cursor: pointer;
    font-family: var(--font-body), Inter, sans-serif;
    transition: color var(--t-fast, 180ms) var(--ease, ease),
                background var(--t-fast, 180ms) var(--ease, ease);
    position: relative;
  }

  .dash-bn-item:active {
    background: rgba(227, 106, 40, 0.12);
  }

  .dash-bn-item.is-active {
    color: var(--paprika, #E36A28);
  }

  .dash-bn-item.is-active .dash-bn-lbl {
    font-weight: 700;
  }

  .dash-bn-item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--paprika, #E36A28);
    border-radius: 0 0 2px 2px;
  }

  .dash-bn-ic {
    font-size: 26px;
    line-height: 1;
    font-family: var(--font-display), 'EB Garamond', serif;
    color: inherit;
    /* Force la présentation TEXTE des glyphes à variante emoji (↗ ⚙) →
       restent en EB Garamond paprika, pas en icône système colorée. */
    font-variant-emoji: text;
  }

  .dash-bn-lbl {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
    color: inherit;
  }

  .dash-bn-badge {
    position: absolute;
    top: 8px;
    right: calc(50% - 22px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--paprika, #E36A28);
    color: var(--cream, #F8F1DA);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    font-family: var(--font-mono, monospace);
    box-shadow: 0 2px 6px rgba(227, 106, 40, 0.45);
  }

  /* Drawer backdrop */
  .dash-drawer-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 60;
    background:
      radial-gradient(ellipse at 70% 30%, rgba(227, 106, 40, 0.18), transparent 55%),
      rgba(0, 26, 12, 0.72);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t, 240ms) var(--ease, ease);
  }

  .dash-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer slide-in right */
  .dash-drawer {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 380px);
    z-index: 70;
    background: #FFF8E7;
    box-shadow: -16px 0 48px -8px rgba(0, 26, 12, 0.40);
    transform: translateX(100%);
    transition: transform var(--t, 240ms) var(--ease, cubic-bezier(.2,.9,.2,1));
  }

  .dash-drawer.is-open {
    transform: translateX(0);
  }

  .dash-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    background: linear-gradient(180deg, #002E15 0%, #004B23 100%);
    border-bottom: 2px solid var(--paprika, #E36A28);
    color: var(--cream, #F8F1DA);
  }

  .dash-drawer-title {
    margin: 0;
    font-family: var(--font-display), 'EB Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    color: var(--cream, #F8F1DA);
    letter-spacing: -0.01em;
  }

  .dash-drawer-close {
    background: transparent;
    border: 1px solid rgba(248, 241, 218, 0.25);
    color: var(--cream, #F8F1DA);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--t-fast, 180ms) var(--ease, ease),
                border-color var(--t-fast, 180ms) var(--ease, ease);
  }
  .dash-drawer-close:hover,
  .dash-drawer-close:focus-visible {
    background: rgba(227, 106, 40, 0.20);
    border-color: var(--paprika, #E36A28);
  }

  .dash-drawer-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 24px;
  }

  /* Drawer sections : un h3 par section RESTO_SECTIONS, items dessous */
  .dash-drawer-section {
    padding: 10px 18px 6px;
  }

  .dash-drawer-section-title {
    margin: 0 0 6px;
    font-family: var(--font-mono, monospace);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--paprika, #E36A28);
  }

  .dash-drawer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: #0d2818;
    font-family: var(--font-body), Inter, sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background var(--t-fast, 180ms) var(--ease, ease);
  }

  .dash-drawer-item:hover,
  .dash-drawer-item:focus-visible {
    background: rgba(227, 106, 40, 0.08);
  }

  .dash-drawer-item.is-active {
    background: rgba(227, 106, 40, 0.14);
    color: var(--paprika-deep, #B84F18);
    font-weight: 700;
  }

  .dash-drawer-item.is-locked {
    color: #6b8475;
  }

  .dash-drawer-item-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #4d6b5a;
  }

  .dash-drawer-item .tier-icon {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .dash-drawer-item .tier-icon.pro {
    background: rgba(227, 106, 40, 0.18);
    color: var(--paprika-deep, #B84F18);
  }
  .dash-drawer-item .tier-icon.premium {
    background: rgba(245, 200, 66, 0.22);
    color: #8F7400;
  }
  .dash-drawer-item .tier-icon.addon {
    background: rgba(74, 124, 89, 0.22);
    color: #2e5240;
  }

  /* Header mobile : on compacte */
  body.light-surface header .right select#uiLangPicker,
  body.light-surface header .right .mobile-view-btn,
  body.light-surface header .right .role-badge {
    display: none;
  }
  body.light-surface header .right .hz-help button#helpMenuBtn span {
    display: none; /* "Aide" label caché, juste 💬 */
  }
  body.light-surface header .right {
    gap: 6px;
  }

  /* Brand : compacter le wordmark */
  body.light-surface header .brand .hz-wordmark {
    display: none;
  }

  /* Dark-mode bottom-nav inchangé (déjà vert profond + paprika) */
}

/* ─── Cards : forcer plus de contraste sur fond sable cream ───
   Les cards/sections en var(--cream-100) (dans renderers) se confondent
   avec le bg #EDE7D3. On force un fond plus chaud + ombre marquée. */
body.light-surface .card,
body.light-surface .panel {
  background: var(--surface-card-on-cream, #FFF8E7);
}

/* Mobile-first tap targets — boutons du dashboard ≥44px sur mobile */
@media (max-width: 1023px) {
  body.light-surface .btn,
  body.light-surface button.btn,
  body.light-surface .dash-drawer-item,
  body.light-surface .login-box button {
    min-height: 44px;
  }
  body.light-surface input,
  body.light-surface textarea,
  body.light-surface select {
    font-size: 16px; /* anti zoom iOS */
  }
}

/* ═══════════════════════════════════════════════════════════
   14. MOBILE NATIVE PASS — transforme le dashboard en app iOS-style
   ═══════════════════════════════════════════════════════════
   Cibles : ≤768px (téléphone). 769-1023px (tablette) garde un layout
   intermédiaire plus dense. ≥1024px (desktop) reste inchangé.

   Principe : single-column flow, gros tap targets, panel-head en
   section header italic Garamond éditorial, cards bord large radius
   16-20px, tables converties en list rows verticales, modales en
   bottom-sheets, header iOS-style (title centré + brand mini).
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ─── Header iOS-style : 1 ligne, brand-mark + title center + actions ─── */
  body.light-surface header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-radius: 0;
  }
  body.light-surface header .bar {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 12px;
    flex-wrap: nowrap !important;
  }
  /* Brand : juste le mark SVG, wordmark caché (déjà fait au §13) */
  body.light-surface header .brand {
    grid-column: 1;
    font-size: 0;
    line-height: 0;
    padding: 6px;
  }
  body.light-surface header .brand .hz-mark svg {
    width: 28px;
    height: 28px;
  }
  /* Restaurant name : titre éditorial centré italic Garamond paprika */
  body.light-surface header .resto-wrap {
    grid-column: 2;
    justify-content: center !important;
    order: 0 !important;
    flex: 0 !important;
    padding: 0 4px;
    min-width: 0;
  }
  body.light-surface header .resto {
    font-family: var(--font-display, 'EB Garamond'), serif;
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    color: var(--cream, #F8F1DA) !important;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-align: center;
    flex: 0 !important;
    padding: 0 !important;
    order: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 56vw;
  }
  body.light-surface header .resto strong {
    font-weight: 500;
  }
  /* Live indicator : compacter à 6px */
  body.light-surface header .live-dot {
    width: 6px;
    height: 6px;
  }
  /* Actions droite : iOS-style, juste 1-2 icones visibles + logout caché dans drawer header future */
  body.light-surface header .right {
    grid-column: 3;
    flex: 0 !important;
    gap: 4px !important;
    margin: 0 !important;
  }
  body.light-surface header .right > * {
    margin: 0 !important;
  }
  /* Hide on mobile : lang picker (in drawer), help text label, mobile-view btn */
  body.light-surface header .right select#uiLangPicker,
  body.light-surface header .right .mobile-view-btn {
    display: none !important;
  }
  /* Help button : icon only round */
  body.light-surface header .hz-help button#helpMenuBtn {
    width: 36px;
    height: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    font-size: 16px !important;
  }
  body.light-surface header .hz-help button#helpMenuBtn span {
    display: none;
  }
  /* Theme toggle : icon only round, same size */
  body.light-surface header .theme-toggle {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 15px !important;
  }
  /* Logout : caché en mobile, accessible via drawer footer (ajouté plus bas) */
  body.light-surface header .logout {
    display: none !important;
  }

  /* ─── Main : layout single-column généreux ─── */
  body.light-surface main {
    padding: 16px 14px 96px !important;
    max-width: 100%;
  }

  /* ─── Panel-head → section header iOS éditorial ─── */
  body.light-surface .panel {
    border-radius: 16px !important;
    margin-bottom: 16px !important;
    overflow: hidden;
  }
  body.light-surface .panel-head {
    background: transparent !important;
    padding: 18px 18px 12px !important;
    border-bottom: 0 !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  body.light-surface .panel-head h2 {
    font-family: var(--font-display, 'EB Garamond'), serif !important;
    font-style: italic;
    font-weight: 500;
    font-size: 24px !important;
    line-height: 1.15 !important;
    color: var(--ink-900, #0d2818) !important;
    letter-spacing: -0.015em;
    margin: 0 !important;
  }
  /* Tools wrap row complet */
  body.light-surface .panel-tools,
  body.light-surface .panel-head .tools,
  body.light-surface .panel-head > div[style*="flex"] {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  body.light-surface .panel-head .panel-tools input,
  body.light-surface .panel-head .panel-tools select {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  body.light-surface .panel-head .panel-tools .btn {
    flex: 1 1 auto !important;
  }
  body.light-surface .panel-body {
    padding: 4px 16px 18px;
  }

  /* ─── Cards iOS-style ─── */
  body.light-surface .card {
    border-radius: 18px !important;
    padding: 18px 20px !important;
    margin-bottom: 14px;
    border-left: 3px solid var(--paprika, #E36A28) !important;
    box-shadow:
      0 1px 0 rgba(0, 75, 35, 0.04),
      0 6px 18px -6px rgba(0, 46, 21, 0.10),
      0 16px 36px -20px rgba(0, 26, 12, 0.12) !important;
  }
  /* Grids stack to 1 col by default on mobile */
  body.light-surface .grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  body.light-surface .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  /* Metric cards (.card .big) : gros chiffre, label sobre */
  body.light-surface .card .label {
    font-family: var(--font-mono, monospace);
    font-size: 10.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-500, #4d6b5a);
    margin-bottom: 6px !important;
    line-height: 1.2;
  }
  body.light-surface .card .big {
    font-family: var(--font-display, 'EB Garamond'), serif !important;
    font-size: 32px !important;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink-900, #0d2818);
  }
  body.light-surface .card .sub {
    font-size: 13px !important;
    color: var(--ink-500, #4d6b5a);
    margin-top: 4px;
  }

  /* ─── Tables → list rows verticales (option B : keep table but soften) ───
     Quand le table est wrappé dans un container avec overflow-x, on lui
     laisse son scroll horizontal. Sinon on transforme en cards. */
  body.light-surface .panel table {
    min-width: unset !important;
    font-size: 14px;
  }
  body.light-surface .panel table thead {
    background: rgba(0, 75, 35, 0.04);
  }
  body.light-surface .panel table th {
    font-size: 10px !important;
    padding: 10px 12px !important;
    letter-spacing: 0.12em;
    color: var(--ink-600, #2e5240) !important;
    text-transform: uppercase;
  }
  body.light-surface .panel table td {
    padding: 12px 14px !important;
    font-size: 14px;
    color: var(--ink-900, #0d2818);
    vertical-align: middle;
  }
  body.light-surface .panel table .actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  body.light-surface .panel table .actions .btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    min-height: 32px !important;
  }

  /* ─── Forms iOS-style ─── */
  body.light-surface label {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-600, #2e5240);
    margin-bottom: 6px;
    margin-top: 14px;
  }
  body.light-surface input,
  body.light-surface textarea,
  body.light-surface select {
    width: 100%;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--line, rgba(0,75,35,0.18)) !important;
    background: var(--surface-card-on-cream, #FFF8E7) !important;
    color: var(--ink-900, #0d2818) !important;
    font-size: 16px !important;
    box-shadow: 0 1px 2px rgba(0, 26, 12, 0.04);
    transition: border-color var(--t-fast, 180ms) ease, box-shadow var(--t-fast, 180ms) ease;
  }
  body.light-surface input:focus,
  body.light-surface textarea:focus,
  body.light-surface select:focus {
    border-color: var(--paprika, #E36A28) !important;
    box-shadow: 0 0 0 3px rgba(227, 106, 40, 0.18) !important;
    outline: none;
  }

  /* ─── Buttons iOS-style ─── */
  body.light-surface .btn,
  body.light-surface button.btn {
    padding: 12px 18px !important;
    border-radius: 12px !important;
    min-height: 48px !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  body.light-surface .btn.primary {
    box-shadow: 0 4px 14px -2px rgba(227, 106, 40, 0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  }
  /* Bouton plein largeur par défaut dans les forms / panels */
  body.light-surface form .btn,
  body.light-surface form button[type="submit"] {
    width: 100%;
    margin-top: 12px;
  }

  /* ─── Modal → bottom sheet iOS ─── */
  body.light-surface .modal-backdrop {
    align-items: flex-end !important;
  }
  body.light-surface .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 22px 22px 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 -16px 48px -8px rgba(0, 26, 12, 0.40) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: hzSheetUp 280ms cubic-bezier(.2,.9,.2,1) both;
  }
  @keyframes hzSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  /* Drag handle pin top */
  body.light-surface .modal::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    background: rgba(0, 75, 35, 0.20);
    border-radius: 4px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }
  body.light-surface .modal-head {
    padding: 14px 20px 10px !important;
    border-bottom: 1px solid var(--line, rgba(0,75,35,0.12)) !important;
    flex-shrink: 0;
  }
  body.light-surface .modal-head h2,
  body.light-surface .modal-head h3 {
    font-family: var(--font-display, 'EB Garamond'), serif !important;
    font-style: italic;
    font-weight: 500;
    font-size: 22px !important;
    color: var(--ink-900, #0d2818) !important;
    letter-spacing: -0.015em;
    margin: 0;
  }
  body.light-surface .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px !important;
  }
  body.light-surface .modal-foot {
    flex-shrink: 0;
    padding: 12px 18px env(safe-area-inset-bottom, 14px) !important;
    border-top: 1px solid var(--line, rgba(0,75,35,0.12)) !important;
    display: flex;
    gap: 10px;
    background: var(--surface-card-on-cream, #FFF8E7);
  }
  body.light-surface .modal-foot .btn {
    flex: 1;
    min-height: 48px !important;
  }

  /* ─── Plan cards : 1 par row, padding généreux ─── */
  body.light-surface .plan-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  body.light-surface .plan-card {
    padding: 22px !important;
    border-radius: 20px !important;
  }

  /* ─── Stat & metric grids : 2x2 pour overview ─── */
  body.light-surface .stats-grid,
  body.light-surface .metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* ─── Toast iOS-bottom-aware ─── */
  body.light-surface #toasts {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    left: 14px !important;
    right: 14px !important;
  }
  body.light-surface .toast {
    border-radius: 14px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    box-shadow: 0 8px 24px -6px rgba(0, 26, 12, 0.30) !important;
  }

  /* ─── Skeleton card : iOS-feel ─── */
  body.light-surface .skeleton-card {
    border-radius: 18px !important;
    height: 100px !important;
    margin-bottom: 12px !important;
  }

  /* ─── Empty states : généreux ─── */
  body.light-surface .empty {
    padding: 32px 20px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* ─── Bouton bottom-nav : badge mieux placé ─── */
  .dash-bn-badge {
    right: calc(50% - 24px) !important;
    top: 6px !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    font-size: 10.5px !important;
  }

  /* ─── Drawer : ajouter footer logout + lang picker ─── */
  .dash-drawer-body {
    padding-bottom: 12px !important;
  }
  /* On laisse populateMobileDrawer ajouter une section "Compte" en fin
     avec le bouton Se déconnecter — fait côté JS dans une 2e itération.
     Pour cette passe, on rend le lang picker accessible via drawer header
     (Garamond italic centré). */
}

/* ─── Tablette intermédiaire 769-1023 : 2 cols max + cards spacieuses ─── */
@media (min-width: 769px) and (max-width: 1023px) {
  body.light-surface .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body.light-surface main {
    padding: 24px 20px 96px !important;
  }
  body.light-surface .panel {
    border-radius: 18px !important;
  }
  body.light-surface .panel-head {
    padding: 20px 22px 14px !important;
  }
  body.light-surface .panel-head h2 {
    font-size: 26px !important;
    font-family: var(--font-display, 'EB Garamond'), serif !important;
    font-style: italic;
    font-weight: 500;
  }
  body.light-surface .modal {
    max-width: 540px !important;
    border-radius: 22px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   15. SERVICE POS — ticket served / closed fade-out
   ═══════════════════════════════════════════════════════════
   When the staff hits "Encaisser" or "Clôturer" the ticket card plays a
   short fade-out + paprika checkmark before the panel re-renders. Gives
   the brain a clear "✓ done" signal in the middle of a busy service.
   Reduce-motion users : opacity stays at 1, no scale change. */
@keyframes ticketServedFadeOut {
  0%   { opacity: 1; transform: scale(1); }
  60%  { opacity: 1; transform: scale(0.98); }
  100% { opacity: 0; transform: scale(0.96); pointer-events: none; }
}

@keyframes checkmarkPop {
  0%   { transform: scale(0.3) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(0deg);   opacity: 1; }
  100% { transform: scale(1)   rotate(0deg);   opacity: 1; }
}

.ticket-served-flash {
  position: relative;
  animation: ticketServedFadeOut 1200ms ease-out forwards;
}

.ticket-served-flash::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 4rem;
  color: var(--paprika, #E36A28);
  font-weight: 700;
  font-family: var(--font-mono, 'JetBrains Mono'), monospace;
  animation: checkmarkPop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(227, 106, 40, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .ticket-served-flash {
    animation-duration: 0.01ms !important;
    opacity: 1;
  }
  .ticket-served-flash::after {
    animation: none;
    opacity: 1;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   §15  Mobile native v3 — patterns canoniques
   ════════════════════════════════════════════════════════════════════════
   Building blocks pour la refonte mobile-first du dashboard staff.
   Tous les sélecteurs sont opt-in (préfixe .hz-*) — pas de risque de
   régresser un écran existant. Les media queries ≤768px y ajoutent du
   raffinement (anti-zoom iOS, safe-area, etc.).
   ──────────────────────────────────────────────────────────────────── */

/* §15.1 Press feedback (mobile tap) ─────────────────────────────────── */
.hz-press { transition: transform 120ms cubic-bezier(.4,0,.2,1); user-select: none; }
@media (hover: none) and (pointer: coarse) {
  .hz-press:active { transform: scale(0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .hz-press { transition: none; }
  .hz-press:active { transform: none; }
}

/* §15.2 Panel head mobile (h2 italic 24-28 + mono eyebrow paprika) ──── */
.hz-panel-head-mobile { padding: 18px 20px 12px; }
.hz-panel-head-mobile .eyebrow {
  font: 500 11px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paprika, #E36A28);
  margin-bottom: 6px;
}
.hz-panel-head-mobile h2 {
  font: italic 500 26px/1.15 'EB Garamond', serif;
  letter-spacing: -0.015em;
  color: var(--ink-900, #1A0F06);
  margin: 0;
}
.hz-panel-head-mobile .subtitle {
  font: 400 14px/1.4 'Inter', sans-serif;
  color: var(--ink-600, #6B5A4A);
  margin-top: 6px;
}

/* §15.3 Form mobile (labels mono uppercase au-dessus, input 16px anti-zoom) */
.hz-form-mobile { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px; }
.hz-form-mobile label {
  font: 500 11px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paprika, #E36A28);
  display: block;
  margin-bottom: 6px;
}
.hz-form-mobile input,
.hz-form-mobile select,
.hz-form-mobile textarea {
  width: 100%;
  min-height: 48px;
  font: 400 16px/1.4 'Inter', sans-serif;
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(0,75,35,0.18);
  background: #FFF8E7;
  color: var(--ink-900, #1A0F06);
  -webkit-appearance: none;
  appearance: none;
}
.hz-form-mobile input:focus,
.hz-form-mobile select:focus,
.hz-form-mobile textarea:focus {
  outline: none;
  border-color: var(--paprika, #E36A28);
  box-shadow: 0 0 0 3px rgba(227,106,40,0.18);
}
.hz-form-mobile .submit-sticky {
  position: sticky;
  bottom: calc(96px + env(safe-area-inset-bottom));
  min-height: 56px;
  background: var(--paprika, #E36A28);
  color: var(--cream, #F8F1DA);
  font: 600 16px/1 'Inter', sans-serif;
  letter-spacing: 0.01em;
  border-radius: 14px;
  border: none;
  box-shadow: 0 6px 18px rgba(227,106,40,0.35);
}

/* §15.4 Bottom-sheet (slide-up modal) ───────────────────────────────── */
.hz-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 60;
  background: #FFF8E7;
  border-radius: 22px 22px 0 0;
  max-height: 92vh;
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 -8px 32px rgba(0,46,21,0.18);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-direction: column;
}
.hz-sheet.is-open { transform: translateY(0); }
.hz-sheet-handle {
  width: 38px; height: 4px;
  background: rgba(227,106,40,0.55);
  border-radius: 999px;
  margin: 10px auto 8px;
  flex-shrink: 0;
}
.hz-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px 20px;
  -webkit-overflow-scrolling: touch;
}
.hz-sheet-foot {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,248,231,0) 0%, #FFF8E7 30%);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(0,75,35,0.08);
}
.hz-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,26,12,0.55);
  backdrop-filter: blur(8px);
  z-index: 59;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms;
}
.hz-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .hz-sheet { transition: none; }
  .hz-sheet-backdrop { transition: none; }
}

/* §15.5 FAB (paprika rempli ≥56px) ─────────────────────────────────── */
.hz-fab {
  position: fixed;
  right: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom) + 16px);
  min-width: 56px; min-height: 56px;
  border-radius: 999px;
  background: var(--paprika, #E36A28);
  color: var(--cream, #F8F1DA);
  font: 500 22px/1 'EB Garamond', serif;
  border: none;
  box-shadow: 0 8px 24px rgba(227,106,40,0.45);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
}
.hz-fab.with-label {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  gap: 8px;
}
.hz-fab .fab-icon {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 22px;
}

/* §15.6 Status pills ───────────────────────────────────────────────── */
.hz-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 11px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.hz-status-pill.confirmed { background: rgba(122,143,99,0.30); color: #4A6244; }
.hz-status-pill.pending   { background: rgba(245,200,66,0.30); color: var(--ink-900, #1A0F06); }
.hz-status-pill.cancelled { background: rgba(196,87,74,0.30); color: #8A3D33; }
.hz-status-pill.active    { background: rgba(227,106,40,0.30); color: #B84F18; }
.hz-status-pill.served    { background: rgba(122,143,99,0.30); color: #4A6244; }
.hz-status-pill.no_show   { background: rgba(196,87,74,0.30); color: #8A3D33; }

/* §15.7 Segmented control ──────────────────────────────────────────── */
.hz-segmented {
  display: flex;
  gap: 0;
  padding: 4px;
  background: rgba(0,46,21,0.06);
  border-radius: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.hz-segmented::-webkit-scrollbar { display: none; }
.hz-segmented button {
  flex: 1;
  min-height: 38px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  font: 500 12px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-600, #6B5A4A);
  border-radius: 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 180ms, color 180ms;
}
.hz-segmented button.is-active {
  background: var(--paprika, #E36A28);
  color: var(--cream, #F8F1DA);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .hz-segmented button { transition: none; }
}

/* §15.8 Toast mobile (au-dessus du bottom-nav) ─────────────────────── */
.hz-toast-mobile {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom) + 8px);
  min-width: 280px;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  background: var(--ink-900, #1A0F06);
  color: var(--cream, #F8F1DA);
  font: 500 14px/1.3 'Inter', sans-serif;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,26,12,0.40);
  z-index: 70;
  animation: hz-toast-in 280ms cubic-bezier(.34,1.56,.64,1);
}
.hz-toast-mobile.ok    { background: #4A6244; }
.hz-toast-mobile.error { background: #8A3D33; }
.hz-toast-mobile.warn  { background: #B84F18; color: var(--cream, #F8F1DA); }
@keyframes hz-toast-in {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to   { transform: translate(-50%, 0);     opacity: 1; }
}

/* §15.9 Card emphasis hero (cream-warm) ────────────────────────────── */
.hz-card-emphasis {
  background: linear-gradient(135deg, #FFF8E7 0%, #F8F1DA 100%);
  border-left: 3px solid var(--paprika, #E36A28);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 4px 16px rgba(0,46,21,0.06), 0 1px 3px rgba(0,46,21,0.04);
}
.hz-card-emphasis h2 {
  font: italic 500 26px/1.2 'EB Garamond', serif;
  color: var(--ink-900, #1A0F06);
  margin: 0 0 6px;
}
.hz-card-emphasis h2 em { color: var(--paprika, #E36A28); font-style: italic; }
.hz-card-emphasis .meta {
  font: 500 11px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-600, #6B5A4A);
}

/* §15.10 Hover effects desktop only (gate global) ──────────────────── */
@media (hover: hover) and (pointer: fine) {
  .hz-card-hoverable {
    transition: transform 220ms, border-color 220ms;
  }
  .hz-card-hoverable:hover {
    transform: translateY(-2px);
    border-color: var(--paprika, #E36A28);
  }
}

/* §15.11 Bottom-nav active underline slide ─────────────────────────── */
/* NB : pas de `position: relative` sur #dashBottomNav — l'ID écraserait le
   `.dash-bottom-nav { position: fixed }` (spécificité ID > classe) et la nav
   redeviendrait in-flow (bande crème sous la nav + nav qui scrolle). Un
   élément `position: fixed` est déjà bloc conteneur pour ses enfants absolus,
   donc .dash-bn-rail s'ancre correctement sans cette règle. */
@media (max-width: 1023px) {
  #dashBottomNav .dash-bn-rail {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--paprika, #E36A28);
    border-radius: 0 0 2px 2px;
    pointer-events: none;
    transition: left 300ms cubic-bezier(.34,1.56,.64,1), width 300ms cubic-bezier(.34,1.56,.64,1);
  }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  #dashBottomNav .dash-bn-rail { transition: none; }
}

/* §15.11b Carte d'upgrade (feature gated) — stack 1 colonne sur mobile.
   Le markup inline pose grid-template-columns:1fr 1fr sans média query ; sur
   téléphone les 2 colonnes se chevauchaient (texte illisible + carte orange
   par-dessus). On force 1 colonne + on resserre le padding. */
@media (max-width: 768px) {
  .upgrade--shimmer {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding: 1.25rem !important;
  }
}

/* §15.12 KPI grid mobile 2×2 (override existing 4×1) ───────────────── */
@media (max-width: 768px) {
  body.light-surface .hz-kpi-grid-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  body.light-surface .hz-kpi-grid-mobile > .kpi { padding: 18px 16px; }
  body.light-surface .hz-kpi-grid-mobile > .kpi .value {
    font: 500 32px/1 'EB Garamond', serif;
  }
}

/* §15.13 Empty containers hide rule (anti bande beige) ─────────────── */
@media (max-width: 768px) {
  body.light-surface .panel:empty,
  body.light-surface .card:empty,
  body.light-surface section:empty { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   16. LOGIN MOBILE-FIRST — hero éditorial + form cream warm card
   ═══════════════════════════════════════════════════════════ */
/* §16.1 Brand + wordmark sur fond vert imperial */
body.light-surface #login .hz-login-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--cream, #F8F1DA); text-decoration: none; position: relative; z-index: 2; }
body.light-surface #login .hz-login-brand .hz-mark { color: var(--paprika, #E36A28); display: inline-flex; align-items: center; }
body.light-surface #login .hz-login-brand .hz-wordmark { font: 500 24px/1 'EB Garamond', serif; letter-spacing: -0.01em; }
body.light-surface #login .hz-login-brand .hz-wordmark em { color: var(--paprika, #E36A28); font-style: italic; }

/* §16.2 H1 hero éditorial */
body.light-surface #login .hz-hero-login { font: 500 32px/1.12 'EB Garamond', serif; letter-spacing: -0.02em; color: var(--cream, #F8F1DA); text-align: center; margin: 0; max-width: 480px; position: relative; z-index: 2; }
body.light-surface #login .hz-hero-login em { color: var(--paprika, #E36A28); font-style: italic; font-weight: 500; }

/* §16.3 Footer "Pas encore de compte ?" */
body.light-surface #login .login-footer { text-align: center; font: 500 14px/1.4 'Inter', sans-serif; color: rgba(248, 241, 218, 0.78); position: relative; z-index: 2; }
body.light-surface #login .login-footer a { color: var(--paprika, #E36A28); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* §16.4 Layout flex vertical centered — NO !important sur display
   (le JS toggle entre 'none' (hidden) et 'flex' (visible). Si on force
   display:flex !important, le login reste visible même connecté = bug.) */
body.light-surface #login { flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: max(24px, env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); min-height: 100vh; min-height: 100dvh; }

/* §16.5 Mobile (≤768px) — hero 30px, full-width login-box */
@media (max-width: 768px) {
  body.light-surface #login { gap: 20px; }
  body.light-surface #login .hz-hero-login { font-size: 30px; padding: 0 12px; }
  body.light-surface #login .login-box { width: 100%; max-width: 360px; margin: 0 auto !important; padding: 22px 20px; border-radius: 18px; }
  body.light-surface #login .login-box label { display: block; font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.10em; text-transform: uppercase; color: var(--paprika, #E36A28); margin: 0 0 6px; }
  body.light-surface #login .login-box label:first-of-type { margin-top: 0; }
  body.light-surface #login .login-box input[type=email],
  body.light-surface #login .login-box input[type=password] { width: 100%; min-height: 48px; font: 400 16px/1.4 'Inter', sans-serif; border-radius: 12px; padding: 12px 14px; border: 1px solid rgba(227, 106, 40, 0.18); background: #FBF5DD; color: var(--ink-900, #1A0F06); -webkit-appearance: none; appearance: none; margin-bottom: 14px; }
  body.light-surface #login .login-box input:focus { outline: none; border-color: var(--paprika, #E36A28); box-shadow: 0 0 0 3px rgba(227, 106, 40, 0.18); }
  body.light-surface #login .login-box button[type=submit] { width: 100%; min-height: 56px; margin-top: 8px; background: var(--paprika, #E36A28); color: var(--cream, #F8F1DA); font: 600 16px/1 'Inter', sans-serif; letter-spacing: 0.01em; border-radius: 14px; border: none; cursor: pointer; box-shadow: 0 6px 18px rgba(227, 106, 40, 0.35); transition: transform 120ms; }
  body.light-surface #login .login-box button[type=submit]:active { transform: scale(0.97); }
  @media (prefers-reduced-motion: reduce) {
    body.light-surface #login .login-box button[type=submit] { transition: none; }
  }
}

/* §16.6 Tablet & desktop (≥769px) — hero 38-44px, max-width 420 */
@media (min-width: 769px) {
  body.light-surface #login .hz-hero-login { font-size: 38px; }
  body.light-surface #login .login-box { max-width: 420px; width: 100%; }
}
@media (min-width: 1024px) {
  body.light-surface #login .hz-hero-login { font-size: 44px; }
}

/* ═══════════════════════════════════════════════════════════
   17. OVERVIEW MOBILE-FIRST — hero + arrivals + activity feed
   ═══════════════════════════════════════════════════════════ */
/* §17.1 Overview hero (cream-warm) */
body.light-surface .hz-overview-hero { margin: 0 0 16px; }
body.light-surface .hz-overview-hero .meta { margin-bottom: 8px; }
body.light-surface .hz-overview-hero h2 { margin: 0 0 14px; font: italic 500 26px/1.18 'EB Garamond', serif; color: var(--ink-900, #1A0F06); letter-spacing: -0.01em; }
body.light-surface .hz-overview-hero h2 .greet-name { color: var(--paprika, #E36A28); font-style: italic; }
body.light-surface .hz-overview-hero h2 .greet-sub { display: block; font-style: normal; font-weight: 400; color: var(--ink-600, #6B5A4A); font-size: 20px; margin-top: 2px; }
body.light-surface .hz-overview-hero .hz-date-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.light-surface .hz-overview-hero .hz-date-row .btn-day { min-height: 36px; padding: 8px 12px; background: rgba(227, 106, 40, 0.10); color: var(--paprika, #E36A28); border: 1px solid rgba(227, 106, 40, 0.22); border-radius: 10px; font: 500 12px/1 'JetBrains Mono', monospace; letter-spacing: 0.04em; cursor: pointer; transition: background 160ms; }
body.light-surface .hz-overview-hero .hz-date-row .btn-day:hover { background: rgba(227, 106, 40, 0.18); }
body.light-surface .hz-overview-hero .hz-date-row .btn-day.is-today { background: var(--paprika, #E36A28); color: var(--cream, #F8F1DA); border-color: var(--paprika, #E36A28); }
body.light-surface .hz-overview-hero .hz-date-row .hz-date-label { flex: 1; text-align: center; font: italic 500 13px/1 'EB Garamond', serif; color: var(--ink-900, #1A0F06); min-width: 0; }
body.light-surface .hz-overview-hero .hz-cta-new { margin-top: 14px; width: 100%; min-height: 48px; background: var(--paprika, #E36A28); color: var(--cream, #F8F1DA); border: none; border-radius: 12px; font: 600 14px/1 'Inter', sans-serif; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 4px 12px rgba(227, 106, 40, 0.28); transition: transform 120ms; }
body.light-surface .hz-overview-hero .hz-cta-new:active { transform: scale(0.97); }

/* §17.2 KPI cards on cream surface */
body.light-surface .hz-overview-kpi { background: #FFF8E7; border-radius: 16px; padding: 16px 14px; border: 1px solid rgba(0, 75, 35, 0.08); box-shadow: 0 2px 8px rgba(0, 46, 21, 0.04); }
body.light-surface .hz-overview-kpi .label { font: 500 10.5px/1 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paprika, #E36A28); margin-bottom: 8px; }
body.light-surface .hz-overview-kpi .big { font: 500 32px/1 'EB Garamond', serif; color: var(--ink-900, #1A0F06); margin: 0 0 4px; }
body.light-surface .hz-overview-kpi .sub { font: 500 11px/1.2 'JetBrains Mono', monospace; color: var(--ink-600, #6B5A4A); }

/* §17.3 Section blocks (arrivals, activity, pacing) */
body.light-surface .hz-overview-section { background: #FFF8E7; border-radius: 16px; padding: 18px 16px; margin-top: 16px; border: 1px solid rgba(0, 75, 35, 0.08); box-shadow: 0 2px 8px rgba(0, 46, 21, 0.04); }
body.light-surface .hz-overview-section .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
body.light-surface .hz-overview-section .sec-eyebrow { font: 500 10.5px/1 'JetBrains Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paprika, #E36A28); }
body.light-surface .hz-overview-section .sec-action { font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.04em; color: var(--paprika, #E36A28); background: transparent; border: none; cursor: pointer; padding: 4px 8px; }

/* §17.4 Arrivals list */
body.light-surface .hz-overview-arrivals .arrival-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid rgba(0, 75, 35, 0.06); cursor: pointer; transition: background 120ms; }
body.light-surface .hz-overview-arrivals .arrival-row:last-child { border-bottom: none; }
body.light-surface .hz-overview-arrivals .arrival-row:active { background: rgba(227, 106, 40, 0.06); }
body.light-surface .hz-overview-arrivals .arrival-row .time { font: 600 14px/1 'JetBrains Mono', monospace; color: var(--paprika, #E36A28); min-width: 52px; }
body.light-surface .hz-overview-arrivals .arrival-row .pax { font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.06em; background: rgba(227, 106, 40, 0.18); color: var(--paprika, #E36A28); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
body.light-surface .hz-overview-arrivals .arrival-row .name { font: italic 500 16px/1.2 'EB Garamond', serif; color: var(--ink-900, #1A0F06); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.light-surface .hz-overview-arrivals .arrival-row .vip { font: 500 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.08em; color: var(--paprika, #E36A28); }

/* §17.5 Activity live (placeholder éditorial v1) */
body.light-surface .hz-activity-live .activity-empty { font: italic 500 15px/1.4 'EB Garamond', serif; color: var(--ink-600, #6B5A4A); padding: 8px 4px 4px; margin: 0; }

/* §17.6 Setup checklist on cream */
body.light-surface .hz-overview-setup { background: #FFF8E7; border-left: 3px solid var(--paprika, #E36A28); border-radius: 14px; padding: 18px 16px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0, 46, 21, 0.04); }
body.light-surface .hz-overview-setup h3 { margin: 0 0 4px; font: italic 500 20px/1.2 'EB Garamond', serif; color: var(--ink-900, #1A0F06); }
body.light-surface .hz-overview-setup .sub { margin: 0 0 12px; font: 400 13.5px/1.5 'Inter', sans-serif; color: var(--ink-600, #6B5A4A); }
body.light-surface .hz-overview-setup ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
body.light-surface .hz-overview-setup li { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; background: rgba(248, 241, 218, 0.45); border: 1px solid rgba(0, 75, 35, 0.08); border-radius: 10px; }
body.light-surface .hz-overview-setup li.is-done { border-color: rgba(0, 75, 35, 0.32); }
body.light-surface .hz-overview-setup li .step { font: italic 500 16px/1 'EB Garamond', serif; color: var(--paprika, #E36A28); min-width: 22px; text-align: center; }
body.light-surface .hz-overview-setup li .text { flex: 1; font: 400 13.5px/1.4 'Inter', sans-serif; color: var(--ink-900, #1A0F06); }
body.light-surface .hz-overview-setup li .text strong { font-weight: 600; }
body.light-surface .hz-overview-setup li .text .help { display: block; font-size: 11.5px; color: var(--ink-600, #6B5A4A); margin-top: 2px; }
body.light-surface .hz-overview-setup li .step-cta { min-height: 36px; padding: 8px 12px; background: var(--paprika, #E36A28); color: var(--cream, #F8F1DA); border: none; border-radius: 10px; font: 600 12px/1 'Inter', sans-serif; cursor: pointer; white-space: nowrap; }

/* §17.7 Desktop layout — KPIs en 4×1, hero compact, sections side-by-side */
@media (min-width: 769px) {
  body.light-surface .hz-overview-hero { padding: 26px 24px; }
  body.light-surface .hz-overview-hero h2 { font-size: 32px; }
  body.light-surface .hz-overview-hero h2 .greet-sub { font-size: 22px; }
  body.light-surface .hz-kpi-grid-mobile { grid-template-columns: repeat(4, 1fr); }
  body.light-surface .hz-overview-hero .hz-cta-new { width: auto; padding: 12px 22px; }
}

/* ════════════════════════════════════════════════════════════════════════
   §18 Service POS mobile-first — tickets verticaux, sticky waiter calls,
   FAB nouveau ticket, bottom-sheet tables libres.
   Tap targets 44px, Garamond italic head, paprika accent gauche.
   Desktop hérite via @media min-width:1024px → grid auto-fill restored.
   ════════════════════════════════════════════════════════════════════════ */

/* Grid mobile : 1 colonne, desktop auto-fill */
.hz-tickets-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px;
}
@media (min-width: 1024px) {
  .hz-tickets-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

/* FAB mobile only */
.hz-service-fab { display: inline-flex; }
@media (min-width: 1024px) {
  .hz-service-fab { display: none; }
}

/* Walk-in row staff (desktop existant + mobile flex-wrap) */
.hz-service-walkin-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Newticket sheet body */
.hz-newticket-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 16px;
}
.hz-newticket-title {
  font: italic 500 24px/1.15 'EB Garamond', serif;
  color: var(--ink-900, #1A0F06);
  margin: 0;
}
/* Bouton fermer visible — la backdrop est souvent hors d'atteinte quand le
   sheet occupe tout l'écran (Image #8 : impossible d'enlever le panneau). */
.hz-sheet-close {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line, rgba(0,75,35,0.18));
  background: rgba(0, 75, 35, 0.06);
  color: var(--ink-700, #1a3a25);
  font-size: 24px; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hz-sheet-close:active { transform: scale(0.94); background: rgba(227,106,40,0.14); }
.hz-newticket-list { display: flex; flex-direction: column; gap: 8px; }
.hz-sheet-table-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 12px 16px;
  background: #FFF8E7;
  border: 1px solid rgba(0,75,35,0.08);
  border-left: 3px solid var(--paprika, #E36A28);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
}
.hz-sheet-table-row strong {
  font: italic 500 20px/1 'EB Garamond', serif;
  color: var(--ink-900);
  min-width: 60px;
}
.hz-sheet-table-row .cap {
  font: 500 12px/1 'JetBrains Mono', monospace;
  color: var(--ink-600, #6B5A4A);
}
.hz-sheet-table-row .hz-status-pill { margin-left: auto; }
.hz-newticket-walkin {
  display: flex;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  margin-top: 16px;
  background: var(--paprika, #E36A28);
  color: var(--cream, #F8F1DA);
  border: none;
  border-radius: 14px;
  font: 600 16px/1 'Inter', sans-serif;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.hz-sheet-empty {
  font: italic 400 15px/1.4 'EB Garamond', serif;
  color: var(--ink-600);
  text-align: center;
  padding: 24px 16px;
}

/* Sticky waiter call strip — mobile full-bleed agressif */
@media (max-width: 768px) {
  body.light-surface .hz-waiter-strip {
    position: sticky; top: 0; z-index: 25;
    background: rgba(196,87,74,0.96);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: var(--cream, #F8F1DA);
    padding: 12px 16px;
    margin: 0 -16px 12px;
    border-radius: 0;
  }
  body.light-surface .hz-waiter-strip-header {
    font: 500 12px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.10em; text-transform: uppercase;
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px;
  }
  body.light-surface .hz-waiter-strip-header .wcs-pulse {
    width: 8px; height: 8px; border-radius: 999px; background: var(--cream);
    box-shadow: 0 0 0 0 rgba(248,241,218,0.6);
    animation: hz-cream-pulse 1.6s infinite;
  }
  body.light-surface .hz-waiter-strip-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
    border-top: 1px solid rgba(248,241,218,0.18);
    font: 500 14px/1.3 'Inter', sans-serif;
  }
  body.light-surface .hz-waiter-strip-row .wcs-row-info {
    display: flex; flex-direction: column; gap: 2px; flex: 1;
  }
  body.light-surface .hz-waiter-strip-row small {
    font: 400 11px/1 'JetBrains Mono', monospace; opacity: 0.85;
  }
  body.light-surface .hz-waiter-strip-row button {
    padding: 6px 12px;
    background: var(--cream, #F8F1DA); color: #8A3D33;
    border: none; border-radius: 999px;
    font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.06em;
    text-transform: uppercase; min-height: 32px;
  }
}
@keyframes hz-cream-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(248,241,218,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(248,241,218,0); }
  100% { box-shadow: 0 0 0 0 rgba(248,241,218,0); }
}

/* Ticket card éditorial cream — mobile-first, desktop hérite */
.hz-ticket-card {
  background: var(--surface-card-on-cream, #FFF8E7);
  border-radius: 18px;
  border-left: 3px solid var(--paprika, #E36A28);
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0,46,21,0.06);
  display: flex; flex-direction: column;
}
.hz-ticket-card .ticket-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.hz-ticket-card .ticket-head h3 {
  font: italic 500 20px/1.1 'EB Garamond', serif;
  color: var(--ink-900, #1A0F06); margin: 0;
}
.hz-ticket-card .ticket-head .meta {
  font: 500 12px/1 'JetBrains Mono', monospace;
  color: var(--ink-600, #6B5A4A); font-style: normal;
}
.hz-ticket-card .ticket-head .hz-status-pill { margin-left: auto; }
.hz-ticket-card .ticket-items { display: flex; flex-direction: column; }
.hz-ticket-card .item-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  min-height: 44px;
  border-bottom: 1px solid rgba(0,75,35,0.04);
}
.hz-ticket-card .item-row:last-child { border-bottom: none; }
.hz-ticket-card .item-row.is-served { opacity: 0.7; }
.hz-ticket-card .item-served-btn {
  width: 36px; height: 36px; border-radius: 999px;
  background: transparent; border: 1.5px solid rgba(227,106,40,0.4);
  color: var(--paprika, #E36A28);
  font: italic 500 18px/1 'EB Garamond', serif;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0;
}
.hz-ticket-card .item-served-btn.served {
  background: rgba(122,143,99,0.3); border-color: #4A6244; color: #4A6244;
  font-style: normal;
}
.hz-ticket-card .item-name {
  flex: 1; font: 400 15px/1.3 'Inter', sans-serif;
  color: var(--ink-900);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.hz-ticket-card .item-row.is-served .item-name { text-decoration: line-through; }
.hz-ticket-card .item-name .pay-badge {
  font: 500 10px/1 'JetBrains Mono', monospace;
  padding: 3px 6px; border-radius: 6px;
}
.hz-ticket-card .item-name .pay-qr {
  background: rgba(122,143,99,0.18); color: #4A6244;
}
.hz-ticket-card .item-name .pay-pos {
  background: rgba(227,106,40,0.14); color: #B84F18;
}
.hz-ticket-card .item-price {
  font: 500 14px/1 'JetBrains Mono', monospace; color: var(--paprika);
  flex-shrink: 0;
}
.hz-ticket-card .item-remove-btn {
  background: none; border: none; color: rgba(196,87,74,0.6);
  font: 400 22px/1 'EB Garamond', serif;
  width: 36px; height: 36px; flex-shrink: 0; cursor: pointer;
}
.hz-ticket-card .ticket-add { margin-top: 8px; }
.hz-ticket-card .ticket-add input {
  width: 100%; min-height: 44px;
  font: 400 16px/1 'Inter', sans-serif;
  border-radius: 10px; padding: 10px 12px;
  border: 1px solid rgba(227,106,40,0.18);
  background: #FBF5DD; color: var(--ink-900);
}
.hz-ticket-card .ticket-add input:focus {
  outline: none; border-color: var(--paprika);
  box-shadow: 0 0 0 3px rgba(227,106,40,0.15);
}
.hz-ticket-card .ticket-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(0,75,35,0.08);
  display: flex; flex-direction: column; gap: 8px;
}
.hz-ticket-card .ticket-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 500 11px/1 'JetBrains Mono', monospace;
  color: var(--ink-600); text-transform: uppercase; letter-spacing: 0.10em;
}
.hz-ticket-card .ticket-total strong {
  font: 500 22px/1 'EB Garamond', serif; color: var(--paprika);
}
.hz-ticket-card .ticket-charge {
  width: 100%; min-height: 56px; margin-top: 4px;
  background: var(--paprika, #E36A28); color: var(--cream, #F8F1DA);
  border: none; border-radius: 14px;
  font: 600 16px/1 'Inter', sans-serif;
  box-shadow: 0 6px 18px rgba(227,106,40,0.35);
  cursor: pointer;
}
.hz-ticket-card.call-waiter-pulse {
  border-left-color: #8A3D33;
  box-shadow: 0 4px 20px rgba(196,87,74,0.18);
}

/* ════════════════════════════════════════════════════════════════════════
   §19 Réservations mobile-first — table restylée en cards sur mobile
   ════════════════════════════════════════════════════════════════════════
   Décision (commit 5) : pour rester dans le budget bundle 320KB on n'émet
   PAS de markup cards dupliqué. On restyle la <table.hz-resa-table>
   existante en blocks empilés via CSS. Plus de duplication HTML, même
   data → 2 présentations selon viewport. */
.hz-resa-controls { padding: 0 20px 12px; display: flex; flex-direction: column; gap: 12px; }
.hz-resa-search {
  width: 100%; min-height: 44px;
  font: 400 16px/1.4 'Inter', sans-serif;
  border-radius: 12px; padding: 10px 14px;
  border: 1px solid rgba(0,75,35,0.18);
  background: #FFF8E7; color: var(--ink-900, #1A0F06);
}
@media (max-width: 768px) {
  body.light-surface .hz-resa-table { display: block; padding: 0 16px 80px; }
  body.light-surface .hz-resa-table thead { display: none; }
  body.light-surface .hz-resa-table tbody { display: flex; flex-direction: column; gap: 10px; }
  body.light-surface .hz-resa-table tr {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t s" "n n" "m m" "a a";
    gap: 6px 12px; padding: 14px 16px;
    background: var(--surface-card-on-cream, #FFF8E7);
    border-radius: 14px; border-left: 3px solid var(--paprika, #E36A28);
    box-shadow: 0 2px 8px rgba(0,46,21,0.05);
    cursor: pointer; align-items: start;
  }
  body.light-surface .hz-resa-table td {
    border: none; padding: 0; background: transparent;
    font: 400 14px/1.3 'Inter', sans-serif; color: var(--ink-900, #1A0F06);
  }
  body.light-surface .hz-resa-table td:nth-child(1) { grid-area: t; font: 500 12px/1 'JetBrains Mono', monospace; color: var(--paprika); }
  body.light-surface .hz-resa-table td:nth-child(1) strong { font: 600 14px/1 'JetBrains Mono', monospace; color: var(--paprika); }
  body.light-surface .hz-resa-table td:nth-child(2) { grid-area: n; font: italic 500 16px/1.2 'EB Garamond', serif; }
  body.light-surface .hz-resa-table td:nth-child(3) { display: none; }
  body.light-surface .hz-resa-table td:nth-child(4) { grid-area: m; font: 500 12px/1 'JetBrains Mono', monospace; color: var(--ink-600); }
  body.light-surface .hz-resa-table td:nth-child(4)::after { content: ' couv'; }
  body.light-surface .hz-resa-table td:nth-child(5) { grid-area: s; justify-self: end; }
  body.light-surface .hz-resa-table td:nth-child(5) .badge { font: 600 10px/1 'JetBrains Mono', monospace; padding: 4px 8px; border-radius: 999px; }
  body.light-surface .hz-resa-table td:nth-child(6) { display: none; }
  body.light-surface .hz-resa-table td.actions { grid-area: a; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 6px; border-top: 1px solid rgba(0,75,35,0.08); }
}

/* ═══ §20 Drawer enrichi (C6) — tier badges éditoriaux + footer logout sticky ═══ */
@media (max-width: 1023px) {
  body.light-surface .dash-drawer-body { display: flex; flex-direction: column; padding: 8px 0 0; }
  body.light-surface .dash-drawer-section { padding: 10px 14px 12px; }
  body.light-surface .dash-drawer-section-title { padding: 0 6px 6px; border-bottom: 1px solid rgba(227,106,40,0.12); margin-bottom: 6px; }
  body.light-surface .hz-tier-badge {
    font: 600 9px/1 'JetBrains Mono', monospace; letter-spacing: 0.08em;
    padding: 3px 7px; border-radius: 999px; margin-left: auto; flex-shrink: 0;
  }
  body.light-surface .hz-tier-badge.pro     { background: rgba(227,106,40,0.18); color: var(--paprika-deep, #B84F18); }
  body.light-surface .hz-tier-badge.premium { background: rgba(245,200,66,0.22); color: #8F7400; }
  body.light-surface .hz-tier-badge.addon   { background: rgba(74,124,89,0.22);  color: #2e5240; }
  body.light-surface .dash-drawer-footer {
    position: sticky; bottom: 0; margin-top: auto;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    background: #FFF8E7; border-top: 1px solid rgba(227,106,40,0.10);
    display: flex; align-items: center; gap: 12px;
  }
  body.light-surface .dash-drawer-footer-avatar {
    width: 38px; height: 38px; border-radius: 999px;
    background: rgba(227,106,40,0.18); color: var(--paprika, #E36A28);
    display: inline-flex; align-items: center; justify-content: center;
    font: italic 600 16px/1 'EB Garamond', serif; flex-shrink: 0;
  }
  body.light-surface .dash-drawer-footer .email {
    flex: 1; min-width: 0; font: 500 13px/1.2 'Inter', sans-serif;
    color: var(--ink-900, #1A0F06);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.light-surface .dash-drawer-footer .logout {
    font: 500 13px/1 'Inter', sans-serif; color: var(--paprika, #E36A28);
    text-decoration: underline; text-underline-offset: 3px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   §21 8 onglets back-office mobile-first (2026-05-26)
   ────────────────────────────────────────────────────────────────────────
   Pattern unifié : on garde le markup <table> existant et on le restyle
   en cards empilées sous 768px via display:block + grid-template-areas.
   data-th="Label" sur chaque <td> sert de pseudo-eyebrow mobile.
   Desktop ≥769px : table reste intacte. Zéro régression.
   ──────────────────────────────────────────────────────────────────── */

/* §21 tokens partagés mobile cards back-office */
@media (max-width: 768px) {
  body.light-surface .hz-customer-table,
  body.light-surface .hz-automation-table,
  body.light-surface .hz-menuitem-table,
  body.light-surface .hz-cohort-table,
  body.light-surface .hz-campaigns-table {
    display: block; width: 100%; min-width: 0 !important;
  }
  body.light-surface .hz-customer-table thead,
  body.light-surface .hz-automation-table thead,
  body.light-surface .hz-menuitem-table thead,
  body.light-surface .hz-cohort-table thead,
  body.light-surface .hz-campaigns-table thead { display: none; }
  body.light-surface .hz-customer-table tbody,
  body.light-surface .hz-automation-table tbody,
  body.light-surface .hz-menuitem-table tbody,
  body.light-surface .hz-cohort-table tbody,
  body.light-surface .hz-campaigns-table tbody {
    display: flex; flex-direction: column; gap: 10px;
    padding: 0 14px 80px;
  }
  body.light-surface .hz-customer-table tr,
  body.light-surface .hz-automation-table tr,
  body.light-surface .hz-menuitem-table tr,
  body.light-surface .hz-cohort-table tr,
  body.light-surface .hz-campaigns-table tr {
    display: grid; gap: 6px 12px;
    padding: 14px 16px; min-height: 44px;
    background: var(--surface-card-on-cream, #FFF8E7);
    border-radius: 14px; border-left: 3px solid var(--paprika, #E36A28);
    box-shadow: 0 2px 8px rgba(0,46,21,0.05);
    align-items: start;
  }
  body.light-surface .hz-customer-table td,
  body.light-surface .hz-automation-table td,
  body.light-surface .hz-menuitem-table td,
  body.light-surface .hz-cohort-table td,
  body.light-surface .hz-campaigns-table td {
    border: none; padding: 0; background: transparent;
    font: 400 14px/1.35 'Inter', sans-serif; color: var(--ink-900, #1A0F06);
  }
  body.light-surface .hz-customer-table td[data-th]::before,
  body.light-surface .hz-automation-table td[data-th]::before,
  body.light-surface .hz-menuitem-table td[data-th]::before,
  body.light-surface .hz-cohort-table td[data-th]::before,
  body.light-surface .hz-campaigns-table td[data-th]::before {
    content: attr(data-th);
    display: block;
    font: 500 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--paprika, #E36A28); margin-bottom: 4px;
  }
  body.light-surface .hz-campaigns-table tr {
    grid-template-columns: 1fr 1fr; grid-template-areas:
      "nom nom" "cible statut" "dest creee" "act act";
  }
  body.light-surface .hz-campaigns-table td:nth-child(1) { grid-area: creee; font-size: 12px; }
  body.light-surface .hz-campaigns-table td:nth-child(2) { grid-area: nom; font: italic 500 16px/1.2 'EB Garamond', serif; }
  body.light-surface .hz-campaigns-table td:nth-child(3) { grid-area: cible; }
  body.light-surface .hz-campaigns-table td:nth-child(4) { grid-area: statut; }
  body.light-surface .hz-campaigns-table td:nth-child(5) { grid-area: dest; }
  body.light-surface .hz-campaigns-table td.actions { grid-area: act; padding-top: 6px; border-top: 1px solid rgba(0,75,35,0.08); }
}

/* §21.1 Clients — cards verticales */
@media (max-width: 768px) {
  body.light-surface .hz-customer-table tr {
    grid-template-columns: 1fr 1fr; grid-template-areas:
      "name name" "loy tags" "vis spend" "last no" "act act";
    cursor: pointer;
  }
  body.light-surface .hz-customer-table td:nth-child(1) { grid-area: name; font: italic 500 16px/1.2 'EB Garamond', serif; }
  body.light-surface .hz-customer-table td:nth-child(1) strong { font-weight: 500; }
  body.light-surface .hz-customer-table td:nth-child(1) small {
    display: block; font: 500 12px/1.2 'JetBrains Mono', monospace;
    color: var(--ink-600, #6B5A4A); margin-top: 2px;
  }
  body.light-surface .hz-customer-table td:nth-child(2) { grid-area: loy; }
  body.light-surface .hz-customer-table td:nth-child(3) { grid-area: tags; min-width: 0; }
  body.light-surface .hz-customer-table td:nth-child(3) .gtag { font-size: 10px; padding: 2px 6px; margin: 2px 2px 0 0; }
  body.light-surface .hz-customer-table td:nth-child(4) { grid-area: vis; }
  body.light-surface .hz-customer-table td:nth-child(5) { grid-area: spend; }
  body.light-surface .hz-customer-table td:nth-child(6) { grid-area: last; font-size: 12px; }
  body.light-surface .hz-customer-table td:nth-child(7) { grid-area: no; }
  body.light-surface .hz-customer-table td.actions { grid-area: act; display: flex; gap: 6px; padding-top: 6px; border-top: 1px solid rgba(0,75,35,0.08); }
}

/* §21.2 Automatisations marketing — cards */
@media (max-width: 768px) {
  body.light-surface .hz-automation-table tr {
    grid-template-columns: 1fr auto; grid-template-areas:
      "name actif" "trig trig" "val exec" "act act";
  }
  body.light-surface .hz-automation-table td:nth-child(1) { grid-area: name; font: italic 500 16px/1.2 'EB Garamond', serif; }
  body.light-surface .hz-automation-table td:nth-child(1) strong { font-weight: 500; }
  body.light-surface .hz-automation-table td:nth-child(1) small {
    display: block; font: 400 12px/1.3 'Inter', sans-serif;
    color: var(--ink-600, #6B5A4A); margin-top: 4px;
  }
  body.light-surface .hz-automation-table td:nth-child(2) { grid-area: trig; }
  body.light-surface .hz-automation-table td:nth-child(3) { grid-area: val; }
  body.light-surface .hz-automation-table td:nth-child(4) { grid-area: exec; }
  body.light-surface .hz-automation-table td:nth-child(5) {
    grid-area: actif; justify-self: end;
    font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.06em;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(122,143,99,0.30); color: #4A6244;
  }
  body.light-surface .hz-automation-table td.actions { grid-area: act; display: flex; gap: 6px; padding-top: 6px; border-top: 1px solid rgba(0,75,35,0.08); }
}

/* §21.3 Menu items — DÉPRÉCIÉ.
   L'écran Menu n'émet plus de <table class="hz-menuitem-table"> : renderMenu
   (commerce.js) rend désormais de vraies fiches-plat .mi-card (photo +
   EB Garamond italic + prix mono + chips). Le styling vit dans §24 ci-dessous.
   Les règles partagées §21 (.hz-menuitem-table dans les listes de sélecteurs
   plus haut) restent inertes — aucun .hz-menuitem-table n'est plus émis. */

/* §21.4 Cohortes — cards 1 par mois avec barres D7/D30/D90 empilées */
@media (max-width: 768px) {
  body.light-surface .hz-cohort-table-wrap { overflow: visible !important; }
  body.light-surface .hz-cohort-table { min-width: 0 !important; }
  body.light-surface .hz-cohort-table tr {
    grid-template-columns: 1fr auto; grid-template-areas:
      "cohort size" "d7 d7" "d30 d30" "d90 d90";
  }
  body.light-surface .hz-cohort-table td:nth-child(1) {
    grid-area: cohort;
    font: 500 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--paprika, #E36A28);
  }
  body.light-surface .hz-cohort-table td:nth-child(2) { grid-area: size; justify-self: end; text-align: right !important; }
  body.light-surface .hz-cohort-table td:nth-child(3) { grid-area: d7; }
  body.light-surface .hz-cohort-table td:nth-child(4) { grid-area: d30; }
  body.light-surface .hz-cohort-table td:nth-child(5) { grid-area: d90; }
}

/* §21.5 LTV grid 2×2 mobile (renderLtvCard) */
.hz-ltv-wrap { display: grid; grid-template-columns: minmax(180px,1fr) 2fr; gap: 2rem; align-items: center; }
.hz-ltv-hero { text-align: center; }
.hz-ltv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 1rem; }
.hz-ltv-cell { background: transparent; }
.hz-ltv-val { font: 500 18px/1 'JetBrains Mono', monospace; color: var(--ink-900, #1A0F06); margin-top: .25rem; }
.hz-ltv-seg-rows { margin-top: .35rem; display: flex; flex-direction: column; gap: .2rem; font: 500 13px/1 'JetBrains Mono', monospace; color: var(--ink-700); }
.hz-ltv-seg-rows > div { display: flex; justify-content: space-between; gap: .6rem; }
.hz-ltv-seg-rows > div span:first-child { color: var(--ink-500); }
@media (max-width: 768px) {
  body.light-surface .hz-ltv-wrap {
    grid-template-columns: 1fr; gap: 18px; padding: 18px 16px !important;
  }
  body.light-surface .hz-ltv-hero > div:first-child { font-size: 3rem !important; }
  body.light-surface .hz-ltv-grid {
    grid-template-columns: 1fr 1fr; gap: 12px;
  }
  body.light-surface .hz-ltv-cell {
    background: var(--surface-card-on-cream, #FFF8E7);
    border-radius: 12px; padding: 14px 12px;
    border-left: 3px solid var(--paprika, #E36A28);
  }
  body.light-surface .hz-ltv-cell.hz-ltv-segments { grid-column: 1 / -1; }
  body.light-surface .hz-ltv-val { font: 500 22px/1 'EB Garamond', serif; color: var(--paprika, #E36A28); }
}

/* §21.6 Phone-AI stack mobile (renderPhoneAi) */
@media (max-width: 768px) {
  body.light-surface .hz-phoneai-grid {
    grid-template-columns: 1fr !important; gap: 16px !important;
    padding: 16px !important;
  }
  body.light-surface .hz-call-example {
    padding: 18px !important; border-radius: 14px !important;
  }
  body.light-surface .hz-call-lines { font-size: 17px !important; }
}

/* §21.7 Langues du menu — rows checkbox + flag + name */
.hz-lang-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-bottom: 12px; }
.hz-lang-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 12px;
  background: var(--surface-card-on-cream, #FFF8E7);
  border-radius: 12px; border: 1px solid rgba(0,75,35,0.10);
  cursor: pointer; font: 500 14px/1 'Inter', sans-serif;
  color: var(--ink-900, #1A0F06); transition: background 160ms, border-color 160ms;
}
.hz-lang-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--paprika, #E36A28); margin: 0; flex-shrink: 0; }
.hz-lang-row.is-on { border-color: var(--paprika, #E36A28); background: rgba(227,106,40,0.06); }
.hz-lang-row .hz-lang-flag { font-size: 18px; line-height: 1; }
.hz-lang-row .hz-lang-name { font: 500 13.5px/1 'Inter', sans-serif; letter-spacing: 0.01em; }
.hz-lang-auto { margin-top: 8px; background: rgba(245,200,66,0.10); border-color: rgba(245,200,66,0.30); }
.hz-lang-auto.is-on { background: rgba(245,200,66,0.18); border-color: #B8911E; }
.hz-lang-actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 768px) {
  .hz-lang-list { grid-template-columns: 1fr; gap: 6px; }
  .hz-lang-actions .btn { flex: 1; min-height: 44px; }
}

/* §21.8 QR settings — rows checkbox + label éditorial + helper */
.hz-qrsettings-list { display: flex; flex-direction: column; gap: 8px; }
.hz-qrsettings-row {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 56px; padding: 14px 14px;
  background: var(--surface-card-on-cream, #FFF8E7);
  border-radius: 12px; border: 1px solid rgba(0,75,35,0.10);
  cursor: pointer; transition: background 160ms, border-color 160ms;
}
.hz-qrsettings-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--paprika, #E36A28); margin: 2px 0 0; flex-shrink: 0; }
.hz-qrsettings-row.is-on { border-color: var(--paprika, #E36A28); background: rgba(227,106,40,0.06); }
.hz-qrsettings-row .hz-qr-text { display: flex; flex-direction: column; gap: 3px; }
.hz-qrsettings-row .hz-qr-title { font: italic 500 15.5px/1.2 'EB Garamond', serif; color: var(--ink-900, #1A0F06); }
.hz-qrsettings-row .hz-qr-help { font: 400 12.5px/1.4 'Inter', sans-serif; color: var(--ink-600, #6B5A4A); }
.hz-qrsettings-actions { margin-top: 14px; display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 768px) { .hz-qrsettings-actions .btn { flex: 1; min-height: 44px; } }

/* §21.9 Share cards (Google Maps + WhatsApp + widget snippet) */
.hz-share-card {
  background: var(--surface-card-on-cream, #FFF8E7);
  border-radius: 14px; padding: 16px;
  border-left: 3px solid var(--paprika, #E36A28);
  box-shadow: 0 2px 8px rgba(0,46,21,0.04);
  margin-bottom: 14px;
}
.hz-share-eyebrow {
  font: 600 12px/1.2 'Inter', sans-serif; color: var(--ink-900, #1A0F06);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hz-share-tip {
  font: 500 9.5px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.10em; text-transform: uppercase;
  background: rgba(227,106,40,0.18); color: var(--paprika-deep, #B84F18);
  padding: 3px 7px; border-radius: 999px;
}
.hz-share-url {
  font: 500 13px/1.5 'JetBrains Mono', monospace;
  color: var(--ink-900, #1A0F06);
  background: rgba(0,46,21,0.04);
  padding: 10px 12px; border-radius: 10px;
  word-break: break-all; user-select: all;
  margin-bottom: 10px;
}
.hz-share-code {
  font: 500 11.5px/1.5 'JetBrains Mono', monospace;
  color: var(--ink-900, #1A0F06);
  background: rgba(0,46,21,0.04);
  padding: 10px 12px; border-radius: 10px;
  word-break: break-all; white-space: pre-wrap;
  margin: 0 0 10px; max-height: 120px; overflow-y: auto;
}
.hz-share-copy-btn {
  width: 100%; min-height: 44px;
  background: var(--paprika, #E36A28); color: var(--cream, #F8F1DA);
  border: none; border-radius: 10px;
  font: 600 14px/1 'Inter', sans-serif; letter-spacing: 0.01em;
  cursor: pointer; box-shadow: 0 4px 12px rgba(227,106,40,0.28);
  transition: transform 120ms, background 160ms;
}
.hz-share-copy-btn:active { transform: scale(0.97); }
.hz-share-copy-btn.is-copied { background: #4A6244; box-shadow: 0 4px 12px rgba(74,98,68,0.32); }
.hz-share-help {
  font: 400 12px/1.4 'Inter', sans-serif !important;
  color: var(--ink-600, #6B5A4A) !important;
  margin: 10px 0 0 !important;
}
@media (min-width: 769px) { .hz-share-copy-btn { width: auto; padding: 0 18px; } }

/* §22 — 2FA (Sécurité, comptes équipe) + CA observé clientèle. Styles sortis du
   bundle JS (servis via ce fichier static) pour tenir le cap dashboard 320 KB. */
.hz-2fa-on{display:inline-flex;align-items:center;gap:.4rem;background:rgba(0,75,35,0.08);color:#004B23;padding:.25rem .7rem;border-radius:100px;font-size:var(--step--2);font-weight:600;margin-bottom:1rem}
.hz-2fa-mono{font-family:'JetBrains Mono',monospace;background:rgba(0,75,35,0.06);border-radius:8px}
.hz-2fa-secret{display:block;font-size:var(--step--1);word-break:break-all;padding:.5rem .7rem;margin-bottom:1rem}
.hz-2fa-rc{font-size:var(--step--1);padding:.4rem .6rem;text-align:center}
.hz-2fa-codes{list-style:none;padding:0;margin:0 0 1rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.4rem}
.hz-2fa-err{font-size:var(--step--2);color:var(--danger,#b42318);margin-top:.5rem}
.hz-ca-obs{border-top:1px solid var(--line);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--surface,#fff)}
.hz-ca-obs .lab{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500)}
.hz-ca-obs .v{font-family:var(--font-display);font-size:1.35rem;color:var(--paprika);text-align:right}
.hz-ca-obs .est{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400)}

/* ═══════════════════════════════════════════════════════════
   §23  DEUX MONDES — toggle topbar (Service ⇄ Gestion) + hub Gestion
        (refonte 2026-06-02). Atelier Vert : pilule vert imperial,
        accent paprika, EB Garamond / JetBrains Mono / Inter.
   ═══════════════════════════════════════════════════════════ */

/* §23.1 — Toggle pilule topbar ─────────────────────────────────────── */
.hz-world-slot { display: inline-flex; align-items: center; }
.hz-world-slot[hidden] { display: none; }

.hz-world-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 38px;
  padding: 4px;
  background: rgba(0, 75, 35, 0.92);
  border: 1px solid rgba(227, 106, 40, 0.30);
  border-radius: 100px;
  box-shadow: inset 0 1px 0 rgba(248, 241, 218, 0.06);
}

/* Indicateur glissant sous le segment actif (180ms). */
.hz-world-rail {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  width: 0;
  background: var(--paprika, #E36A28);
  border-radius: 100px;
  box-shadow: 0 2px 10px rgba(227, 106, 40, 0.35);
  transform: translateX(4px);
  transition: transform 180ms var(--ease, cubic-bezier(.2,.9,.2,1)),
              width 180ms var(--ease, cubic-bezier(.2,.9,.2,1));
  z-index: 0;
  pointer-events: none;
}

.hz-world-seg {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 14px;
  height: 30px;
  min-width: 72px;
  font: 500 11px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248, 241, 218, 0.66);
  border-radius: 100px;
  transition: color 180ms var(--ease, ease);
  white-space: nowrap;
}
.hz-world-seg.is-active {
  color: var(--cream, #F8F1DA);
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .hz-world-seg:not(.is-active):hover { color: var(--cream, #F8F1DA); }
}

/* Compteur d'appels en attente (garde-fou SSE) + pulse paprika. */
.hz-world-alert {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paprika, #E36A28);
  color: var(--cream, #F8F1DA);
  border-radius: 100px;
  font: 700 10px/1 'JetBrains Mono', monospace;
  box-shadow: 0 2px 8px rgba(227, 106, 40, 0.5);
}
.hz-world-toggle.is-pulsing {
  animation: hz-world-pulse 1400ms var(--ease, ease) infinite;
}
@keyframes hz-world-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(248,241,218,0.06), 0 0 0 0 rgba(227,106,40,0.45); }
  50%      { box-shadow: inset 0 1px 0 rgba(248,241,218,0.06), 0 0 0 6px rgba(227,106,40,0.0); }
}
@media (prefers-reduced-motion: reduce) {
  .hz-world-rail { transition: none; }
  .hz-world-toggle.is-pulsing { animation: none; }
  .hz-world-toggle.is-pulsing { border-color: var(--paprika, #E36A28); }
}

/* Mobile : toggle compact dans la topbar grid (resto-wrap centré). */
@media (max-width: 768px) {
  .hz-world-toggle { height: 34px; padding: 3px; }
  .hz-world-seg { min-width: 60px; padding: 0 10px; height: 28px; font-size: 10px; letter-spacing: 0.05em; }
  /* Le toggle prime sur le nom du resto quand l'espace manque. */
  .resto-wrap .resto { font-size: 0.78rem; max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* §23.2 — Section-nav retour hub (← Gestion) ───────────────────────── */
body.light-surface nav.tabs .section-link--hub {
  font-family: var(--font-display), 'EB Garamond', serif !important;
  font-style: italic;
}

/* §23.3 — Hub Gestion : 4 grandes cartes tappables ─────────────────── */
.hz-hub { padding-top: 0; }
.hz-hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 8px;
}
@media (min-width: 720px) {
  .hz-hub-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

.hz-hub-card {
  appearance: none;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 18px;
  background: rgba(0, 46, 21, 0.92);
  border: 1px solid rgba(227, 106, 40, 0.30);
  border-left: 3px solid var(--paprika, #E36A28);
  border-radius: var(--r-lg, 18px);
  color: var(--cream, #F8F1DA);
  box-shadow: 0 4px 16px rgba(0, 26, 12, 0.18);
  transition: transform 180ms var(--ease, cubic-bezier(.2,.9,.2,1)),
              border-color 180ms var(--ease, ease),
              box-shadow 180ms var(--ease, ease);
}
@media (hover: hover) and (pointer: fine) {
  .hz-hub-card:hover {
    transform: translateY(-2px);
    border-left-color: var(--paprika, #E36A28);
    border-color: rgba(227, 106, 40, 0.55);
    box-shadow: 0 10px 28px rgba(0, 26, 12, 0.28);
  }
  .hz-hub-card:hover .hz-hub-card-arrow { transform: translateX(3px); }
}

.hz-hub-card-ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(227, 106, 40, 0.16);
  color: var(--paprika-bright, #F2832F);
  font-family: var(--font-display), 'EB Garamond', serif;
  font-size: 24px;
  line-height: 1;
}

.hz-hub-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hz-hub-card-title {
  font-family: var(--font-display), 'EB Garamond', serif;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--cream, #F8F1DA);
}
.hz-hub-card-tag {
  font-family: var(--font-mono, 'JetBrains Mono'), monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(248, 241, 218, 0.58);
}
.hz-hub-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.hz-hub-chip {
  font: 500 11px/1 'Inter', sans-serif;
  padding: 4px 9px;
  border-radius: 100px;
  background: rgba(248, 241, 218, 0.08);
  border: 1px solid rgba(248, 241, 218, 0.14);
  color: rgba(248, 241, 218, 0.82);
  white-space: nowrap;
}
.hz-hub-chip.is-locked { opacity: 0.5; }

.hz-hub-card-arrow {
  font-family: var(--font-mono, monospace);
  font-size: 18px;
  color: var(--paprika, #E36A28);
  transition: transform 180ms var(--ease, ease);
}

@media (prefers-reduced-motion: reduce) {
  .hz-hub-card, .hz-hub-card-arrow { transition: none; }
}

/* §23.4 — Bouton bottom-nav monde (⇄ Service / ⇄ Gestion) ──────────── */
@media (max-width: 1023px) {
  .dash-bn-item.dash-bn-world .dash-bn-ic { color: var(--paprika, #E36A28); }
  .dash-bn-item.dash-bn-world .dash-bn-lbl { color: rgba(248, 241, 218, 0.78); }
}

/* ═══════════════════════════════════════════════════════════════════════
   §24  ÉCRAN SERVICE — grille de salle vivante + carte-table dépliée
        (refonte deux mondes 2026-06-02). Mobile-first PRO : dense, calme,
        gros points de tap (≥44px), micro-anims utiles (états/transitions).
        Atelier Vert : cards vert translucide + accent gauche 3px paprika,
        EB Garamond pour les titres de section, JetBrains Mono pour les
        nombres/états/durées, Inter pour le reste.
   ═══════════════════════════════════════════════════════════════════════ */

.hz-svc { padding: 0 0 96px; }

/* §24.1 — Barre d'état salle (sticky) ──────────────────────────────── */
.hz-svc-roombar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 0 0 10px;
  background: rgba(0, 46, 21, 0.94);
  border: 1px solid rgba(227, 106, 40, 0.22);
  border-radius: var(--r-md, 12px);
  box-shadow: 0 6px 18px rgba(0, 26, 12, 0.18);
  backdrop-filter: blur(6px);
  font: 500 12px/1 'JetBrains Mono', monospace;
  color: rgba(248, 241, 218, 0.72);
  letter-spacing: 0.02em;
}
.hz-svc-roombar .rb-stat { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.hz-svc-roombar .rb-stat b { color: var(--cream, #F8F1DA); font-weight: 700; font-size: 13px; }
.hz-svc-roombar .rb-sep { color: rgba(248, 241, 218, 0.30); }
.hz-svc-roombar .rb-charge b { color: var(--saffron, #F5C842); }
.hz-svc-roombar .rb-todo {
  margin-left: auto;
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 5px 12px;
  min-height: 30px;
  background: var(--paprika, #E36A28);
  color: var(--cream, #F8F1DA);
  border-radius: 100px;
  font: 700 11px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(227, 106, 40, 0.4);
}

/* §24.2 — Chips filtres ────────────────────────────────────────────── */
.hz-svc-chips { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.hz-svc-chip {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  background: rgba(0, 75, 35, 0.08);
  border: 1px solid rgba(0, 75, 35, 0.24);
  border-radius: 100px;
  font: 600 12px/1 'Inter', sans-serif;
  color: var(--green-imperial, #004B23);
  letter-spacing: 0.02em;
  transition: background 160ms var(--ease, ease), border-color 160ms var(--ease, ease);
}
.hz-svc-chip .hz-svc-chip-n {
  font: 700 10px/1 'JetBrains Mono', monospace;
  background: rgba(227, 106, 40, 0.16);
  color: var(--paprika-deep, #B84F18);
  padding: 2px 5px;
  border-radius: 100px;
}
.hz-svc-chip.is-active {
  background: var(--paprika, #E36A28);
  border-color: var(--paprika, #E36A28);
  color: var(--cream, #F8F1DA);
  box-shadow: 0 2px 10px rgba(227, 106, 40, 0.35);
}
.hz-svc-chip.is-active .hz-svc-chip-n { background: rgba(248, 241, 218, 0.22); color: var(--cream, #F8F1DA); }
@media (hover: hover) and (pointer: fine) {
  .hz-svc-chip:not(.is-active):hover { background: rgba(0, 75, 35, 0.1); border-color: rgba(0, 75, 35, 0.28); }
}

/* §24.3 — Grille de cartes-tables ──────────────────────────────────── */
.hz-svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 560px) { .hz-svc-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 860px) { .hz-svc-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .hz-svc-grid { grid-template-columns: repeat(6, 1fr); } }
.hz-svc-empty {
  grid-column: 1 / -1;
  font-family: var(--font-display), 'EB Garamond', serif;
  font-style: italic;
}
/* États vides du monde SERVICE (fond vert/dégradé) : cream + ombre = toujours
   lisibles quelle que soit la position dans le dégradé. */
.hz-svc-empty,
.hz-arr .empty,
.hz-arr-body .empty {
  color: var(--green-imperial, #004B23);
  opacity: 0.82;
  font-size: 1.05rem;
  font-style: italic;
}

/* Cartes-tables : ombre légère pour se détacher du fond cream. */
.hz-tc { box-shadow: 0 1px 3px rgba(0, 46, 21, 0.07); }

/* Chips CLIQUABLES du hub Gestion (tap = va direct à l'onglet). */
.hz-hub-chip--nav { cursor: pointer; transition: background 140ms var(--ease, ease), border-color 140ms var(--ease, ease); }
@media (hover: hover) and (pointer: fine) {
  .hz-hub-chip--nav:hover { background: rgba(227, 106, 40, 0.18); border-color: rgba(227, 106, 40, 0.5); }
}
.hz-hub-chip--nav:active { transform: scale(0.96); }

/* Sous-nav MOBILE des sections Gestion (barre sombre + chips cream) — sans elle,
   on ne pouvait pas changer d'onglet dans une section sur mobile. */
#hzMobileSubnav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 0 0 6px;
  background: rgba(0, 46, 21, 0.96);
  border-bottom: 2px solid var(--paprika, #E36A28);
}
#hzMobileSubnav[hidden] { display: none; }
.hz-msub-hub {
  flex-shrink: 0; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(248, 241, 218, 0.12);
  border: 1px solid rgba(248, 241, 218, 0.3);
  border-radius: 10px; color: var(--cream, #F8F1DA);
  font-size: 17px; cursor: pointer;
}
.hz-msub-scroll { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hz-msub-scroll::-webkit-scrollbar { display: none; }
.hz-msub-chip {
  flex-shrink: 0; min-height: 36px; padding: 0 16px;
  background: rgba(248, 241, 218, 0.1);
  border: 1px solid rgba(248, 241, 218, 0.26);
  border-radius: 100px; color: var(--cream, #F8F1DA);
  font: 600 13px/1 'Inter', sans-serif; white-space: nowrap; cursor: pointer;
  transition: background 140ms var(--ease, ease);
}
.hz-msub-chip.is-active { background: var(--paprika, #E36A28); border-color: var(--paprika, #E36A28); color: var(--cream, #F8F1DA); box-shadow: 0 2px 8px rgba(227, 106, 40, 0.4); }
.hz-msub-chip.is-locked { opacity: 0.6; }
@media (min-width: 1024px) { #hzMobileSubnav { display: none !important; } }

/* Carte-table — fond vert translucide + accent gauche 3px paprika (signature).
   L'intensité de l'accent + une teinte de fond signalent l'urgence. */
.hz-tc {
  position: relative;
  appearance: none;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
  padding: 12px 12px 12px 16px;
  background: #FBF6E6;
  border: 1px solid rgba(0, 75, 35, 0.28);
  border-radius: var(--r-md, 12px);
  overflow: hidden;
  transition: transform 140ms var(--ease, cubic-bezier(.4,0,.2,1)),
              box-shadow 160ms var(--ease, ease),
              background 200ms var(--ease, ease);
}
.hz-tc:disabled { cursor: default; opacity: 0.92; }
.hz-tc .tc-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--paprika, #E36A28);
  opacity: 0.55;
}
@media (hover: hover) and (pointer: fine) {
  .hz-tc:not(:disabled):hover { box-shadow: 0 8px 20px rgba(0, 26, 12, 0.14); }
}

.hz-tc .tc-head { display: flex; align-items: center; gap: 6px; }
.hz-tc .tc-num {
  font-family: var(--font-display), 'EB Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--green-imperial, #004B23);
}
.hz-tc .tc-num--sm { font-size: 15px; font-weight: 600; font-family: 'Inter', sans-serif; }
.hz-tc .tc-pax {
  font: 600 11px/1 'JetBrains Mono', monospace;
  color: var(--green-imperial, #004B23);
  background: rgba(0, 75, 35, 0.1);
  padding: 3px 6px;
  border-radius: 6px;
}
.hz-tc .tc-pax--cap { opacity: 0.78; }
.hz-tc .tc-vip {
  margin-left: auto;
  font: 700 9px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  color: var(--cream, #F8F1DA);
  background: var(--paprika, #E36A28);
  padding: 3px 6px;
  border-radius: 100px;
}
.hz-tc .tc-sub, .hz-tc .tc-sub-soon, .hz-tc .tc-sub-free {
  font: 600 12px/1.3 'Inter', sans-serif;
  color: #143524;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hz-tc .tc-sub-soon { color: var(--green-imperial, #004B23); font-weight: 600; }
.hz-tc .tc-sub--order { color: var(--paprika-deep, #B84F18); font-weight: 600; }
.hz-tc .tc-sub-free { font-style: italic; font-family: var(--font-display), 'EB Garamond', serif; opacity: 0.92; }
.hz-tc .tc-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; }
.hz-tc .tc-money {
  margin-left: auto;
  font: 700 12px/1 'JetBrains Mono', monospace;
  color: var(--paprika-deep, #B84F18);
}

/* Pastille d'état (mono) ───────────────────────────────────────────── */
.hz-svc-pill {
  font: 700 10px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 100px;
  background: rgba(0, 75, 35, 0.1);
  color: var(--green-imperial, #004B23);
  white-space: nowrap;
}
.hz-svc-pill--call    { background: var(--paprika, #E36A28); color: var(--cream, #F8F1DA); }
.hz-svc-pill--bill    { background: rgba(227, 106, 40, 0.18); color: var(--paprika-deep, #B84F18); }
.hz-svc-pill--ready   { background: rgba(245, 200, 66, 0.28); color: #6b5318; }
.hz-svc-pill--new_qr  { background: rgba(227, 106, 40, 0.14); color: var(--paprika-deep, #B84F18); }
.hz-svc-pill--to_order{ background: rgba(227, 106, 40, 0.16); color: var(--paprika-deep, #B84F18); }
.hz-svc-pill--seated  { background: rgba(0, 75, 35, 0.12); color: var(--green-imperial, #004B23); }
.hz-svc-pill--soon    { background: rgba(122, 143, 99, 0.26); color: #3c5436; }
.hz-svc-pill--free    { background: rgba(0, 75, 35, 0.08); color: rgba(0, 75, 35, 0.78); }
.hz-svc-pill--takeaway{ background: rgba(0, 75, 35, 0.1); color: var(--green-imperial, #004B23); }

/* Teinte de fond + intensité d'accent par état (urgence décroissante). */
/* IMPORTANT : l'écran SERVICE a un FOND VERT FONCÉ. Les cartes doivent donc être
   des surfaces SOLIDES CLAIRES (pas des teintes translucides qui virent au sombre
   sur le vert et rendent le texte foncé illisible). Texte foncé sur carte claire
   = lisibilité maximale, cohérent avec la feuille de commande (elle aussi claire). */
.hz-tc--call   { background: #FBE3D4; border-color: rgba(227, 106, 40, 0.6); }
.hz-tc--call   .tc-accent { opacity: 1; width: 4px; box-shadow: 0 0 12px rgba(227, 106, 40, 0.5); }
.hz-tc--bill   { background: #FCE8D9; border-color: rgba(227, 106, 40, 0.42); }
.hz-tc--bill   .tc-accent { opacity: 0.9; width: 4px; }
.hz-tc--ready  { background: #FBF0D2; border-color: rgba(245, 200, 66, 0.62); }
.hz-tc--ready  .tc-accent { background: var(--saffron, #F5C842); opacity: 0.95; width: 4px; }
.hz-tc--new_qr { background: #FCEEE1; border-color: rgba(227, 106, 40, 0.34); }
.hz-tc--new_qr .tc-accent { opacity: 0.8; }
.hz-tc--to_order { background: #FBE9D9; border-color: rgba(227, 106, 40, 0.45); }
.hz-tc--to_order .tc-accent { opacity: 0.85; }
.hz-tc--seated { background: #F4EEDB; }

/* Sélecteur de table à l'installation (Arrivées → Asseoir) ─────────────── */
.arr-tablepick-sub {
  font: 600 13px/1.3 'Inter', sans-serif;
  color: var(--green-imperial, #004B23);
  margin: 0 0 12px;
}
.arr-tablepick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}
.arr-tablepick-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 60px;
  padding: 8px;
  background: rgba(0, 46, 21, 0.05);
  border: 1.5px solid rgba(0, 75, 35, 0.2);
  border-radius: var(--r-md, 12px);
  cursor: pointer;
  transition: border-color 140ms var(--ease, ease), background 140ms var(--ease, ease);
}
.arr-tablepick-opt input { position: absolute; opacity: 0; pointer-events: none; }
.arr-tablepick-opt:has(input:checked) {
  background: rgba(227, 106, 40, 0.12);
  border-color: var(--paprika, #E36A28);
  box-shadow: 0 0 0 1px var(--paprika, #E36A28);
}
.arr-tablepick-num {
  font: 500 20px/1 var(--font-display), 'EB Garamond', serif;
  color: var(--green-imperial, #004B23);
}
.arr-tablepick-cap { font: 600 10px/1 'JetBrains Mono', monospace; color: #2e5240; }
.hz-tc--seated .tc-accent { opacity: 0.4; }
.hz-tc--soon   { background: rgba(122, 143, 99, 0.08); border-color: rgba(122, 143, 99, 0.26); }
.hz-tc--soon   .tc-accent { background: #7a8f63; opacity: 0.5; }
.hz-tc--free   { background: rgba(0, 75, 35, 0.025); border-style: dashed; }
.hz-tc--free   .tc-accent { opacity: 0.16; }
.hz-tc.is-vip  { border-color: rgba(227, 106, 40, 0.5); }

/* Micro-pulse 1× sur mutation in-place (SSE). */
.hz-tc-pulse { animation: hz-tc-pulse 700ms var(--ease, ease) 1; }
@keyframes hz-tc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(227, 106, 40, 0.45); }
  60%  { box-shadow: 0 0 0 8px rgba(227, 106, 40, 0); }
  100% { box-shadow: 0 0 0 0 rgba(227, 106, 40, 0); }
}

/* §24.4 — Rail "Sans table / Comptoir" ─────────────────────────────── */
.hz-svc-rail { margin-top: 18px; }
.hz-svc-rail-head { margin-bottom: 8px; }
.hz-eyebrow {
  font: 600 10px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paprika-deep, #B84F18);
}
.hz-svc-rail-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.hz-tc--counter {
  flex: 0 0 auto;
  width: 168px;
  min-height: 84px;
  scroll-snap-align: start;
}

/* §24.5 — Carte-table DÉPLIÉE (feuille plein écran) ─────────────────── */
/* Feuilles de SERVICE en PLEIN ÉCRAN (carte-table + "ouvrir une table").
   On ne scrolle plus pour la voir : elle prend tout l'écran, la tête (avec le ×)
   colle en haut, le pied (Encaisser) en bas, le corps scrolle entre les deux.
   On en sort par le × (toujours visible) et on y revient par la grille. */
.hz-tsheet, .hz-newticket-sheet {
  inset: 0;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100dvh;
  height: 100vh;
  max-height: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
@supports (height: 100dvh) { .hz-tsheet, .hz-newticket-sheet { height: 100dvh; } }
.hz-tsheet .hz-sheet-handle, .hz-newticket-sheet .hz-sheet-handle { display: none; }
.hz-tsheet .hz-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 12px;
}
.hz-tsheet-head, .hz-newticket-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #FFF8E7;
  margin: -8px -20px 4px;
  padding: 14px 20px 10px;
  border-bottom: 1px solid rgba(0, 75, 35, 0.12);
}
.hz-tsheet-foot {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 248, 231, 0) 0%, #FFF8E7 30%);
  margin: 0 -20px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
}

.hz-tsheet-head { display: flex; align-items: flex-start; gap: 10px; }
.hz-tsheet-title {
  font-family: var(--font-display), 'EB Garamond', serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.05;
  color: var(--green-imperial, #004B23);
  margin: 0;
}
.hz-tsheet-meta {
  margin-top: 4px;
  font: 500 12px/1.4 'Inter', sans-serif;
  color: var(--ink-600, #5b5147);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.hz-tsheet-meta b { font-family: 'JetBrains Mono', monospace; color: var(--green-imperial, #004B23); }
.hz-tsheet-vip {
  font: 700 9px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  color: var(--cream, #F8F1DA);
  background: var(--paprika, #E36A28);
  padding: 3px 7px;
  border-radius: 100px;
}
.hz-tsheet-headbtns { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hz-tsheet-guest, .hz-tsheet-callbtn {
  appearance: none;
  cursor: pointer;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 100px;
  font: 600 12px/1 'Inter', sans-serif;
  border: 1px solid rgba(0, 75, 35, 0.2);
  background: rgba(0, 75, 35, 0.05);
  color: var(--green-imperial, #004B23);
}
.hz-tsheet-callbtn { background: var(--paprika, #E36A28); border-color: var(--paprika, #E36A28); color: var(--cream, #F8F1DA); }

/* Note de table — ligne éditable inline (✎). */
.hz-tsheet-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(245, 200, 66, 0.1);
  border: 1px solid rgba(245, 200, 66, 0.3);
  border-radius: var(--r-sm, 8px);
}
.hz-tsheet-note .note-text {
  flex: 1;
  font: 500 13px/1.4 'Inter', sans-serif;
  color: var(--ink-900, #1A0F06);
}
.hz-tsheet-note .note-edit, .hz-tsheet-note .note-add {
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  min-height: 36px;
  padding: 0 8px;
  font: 600 12px/1 'Inter', sans-serif;
  color: var(--paprika-deep, #B84F18);
}
.hz-tsheet-note .note-add { width: 100%; text-align: left; }
.hz-tsheet-note-edit { display: flex; gap: 8px; width: 100%; }
.hz-tsheet-note-edit input {
  flex: 1;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(0, 75, 35, 0.24);
  border-radius: var(--r-sm, 8px);
  font: 500 13px/1 'Inter', sans-serif;
  background: var(--cream, #F8F1DA);
}
.hz-tsheet-note-edit input:focus { outline: none; border-color: var(--paprika, #E36A28); }
.hz-tsheet-note-save {
  appearance: none; cursor: pointer; border: 0;
  min-height: 40px; padding: 0 16px; border-radius: var(--r-sm, 8px);
  background: var(--green-imperial, #004B23); color: var(--cream, #F8F1DA);
  font: 600 12px/1 'Inter', sans-serif;
}

/* Zones argent ─────────────────────────────────────────────────────── */
.hz-tz {
  border-radius: var(--r-md, 12px);
  border: 1px solid rgba(0, 75, 35, 0.12);
  overflow: hidden;
}
.hz-tz-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: rgba(0, 75, 35, 0.04);
}
.hz-tz-sum { font: 700 13px/1 'JetBrains Mono', monospace; color: var(--green-imperial, #004B23); }
.hz-tz-sum--charge { color: var(--paprika-deep, #B84F18); }
.hz-tz-items { display: flex; flex-direction: column; }
.hz-tz-empty {
  padding: 14px 12px;
  font-family: var(--font-display), 'EB Garamond', serif;
  font-style: italic;
  color: var(--ink-600, #5b5147);
  margin: 0;
}

/* ZONE PAYÉ VIA QR — verrouillée (affichage seul). */
.hz-tz--qr { border-color: rgba(0, 75, 35, 0.18); background: rgba(0, 75, 35, 0.03); }
.hz-tz--qr .hz-tz-head { background: rgba(0, 75, 35, 0.07); }

/* ZONE À ENCAISSER. */
.hz-tz--charge { border-color: rgba(227, 106, 40, 0.28); }
.hz-tz--charge .hz-tz-head { background: rgba(227, 106, 40, 0.08); }

.hz-trow {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px;
  padding: 6px 12px;
  border-top: 1px solid rgba(0, 75, 35, 0.07);
}
.hz-trow:first-child { border-top: 0; }
.hz-trow .tr-name { flex: 1; font: 500 14px/1.3 'Inter', sans-serif; color: var(--ink-900, #1A0F06); }
.hz-trow .tr-price { font: 600 13px/1 'JetBrains Mono', monospace; color: var(--green-imperial, #004B23); }
.hz-trow.is-served .tr-name { text-decoration: line-through; opacity: 0.6; }
.hz-trow--locked .tr-served {
  width: 28px; text-align: center;
  font: 600 14px/1 'JetBrains Mono', monospace;
  color: rgba(0, 75, 35, 0.4);
}
.hz-trow--locked { opacity: 0.85; }
.hz-trow .tr-served-btn {
  appearance: none; cursor: pointer; border: 0;
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 50%;
  background: rgba(0, 75, 35, 0.08);
  color: var(--green-imperial, #004B23);
  font: 600 16px/1 'JetBrains Mono', monospace;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 140ms var(--ease, ease), transform 120ms var(--ease, ease);
}
.hz-trow .tr-served-btn.served { background: rgba(122, 143, 99, 0.32); color: #3a5230; }
.hz-trow .tr-served-btn:active { transform: scale(0.92); }
.hz-trow .tr-remove-btn {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  width: 32px; height: 36px; flex: 0 0 32px;
  font: 400 20px/1 'Inter', sans-serif;
  color: rgba(196, 87, 74, 0.7);
}

/* Add row : chips top plats + recherche. */
.hz-tsheet-addrow { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.hz-tsheet-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hz-tsheet-chip {
  appearance: none; cursor: pointer;
  min-height: 36px; padding: 0 12px;
  border-radius: 100px;
  border: 1px solid rgba(227, 106, 40, 0.3);
  background: rgba(227, 106, 40, 0.07);
  color: var(--paprika-deep, #B84F18);
  font: 600 12px/1 'Inter', sans-serif;
}
.hz-tsheet-search { display: flex; gap: 8px; }
.hz-tsheet-search input {
  flex: 1; min-height: 42px; padding: 0 12px;
  border: 1px solid rgba(0, 75, 35, 0.2);
  border-radius: var(--r-sm, 8px);
  font: 500 14px/1 'Inter', sans-serif;
  background: var(--cream, #F8F1DA);
}
.hz-tsheet-search input:focus { outline: none; border-color: var(--paprika, #E36A28); }
.hz-tsheet-add-btn {
  appearance: none; cursor: pointer; border: 0; white-space: nowrap;
  min-height: 42px; padding: 0 14px; border-radius: var(--r-sm, 8px);
  background: var(--green-imperial, #004B23); color: var(--cream, #F8F1DA);
  font: 600 13px/1 'Inter', sans-serif;
}

/* Zone bas — giftcard lecture seule, total, actions. */
.hz-tsheet-foot { display: flex; flex-direction: column; gap: 10px; }
.hz-tsheet-giftcard {
  padding: 8px 12px;
  background: rgba(245, 200, 66, 0.12);
  border: 1px dashed rgba(245, 200, 66, 0.45);
  border-radius: var(--r-sm, 8px);
  font: 600 12px/1.3 'Inter', sans-serif;
  color: #6b5318;
}
.hz-tsheet-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 4px 2px;
  font: 500 13px/1 'Inter', sans-serif;
  color: var(--ink-600, #5b5147);
}
.hz-tsheet-total strong { font: 600 18px/1 'JetBrains Mono', monospace; color: var(--green-imperial, #004B23); }
.hz-tsheet-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hz-tsheet-charge {
  appearance: none; cursor: pointer; border: 0; flex: 1 1 auto;
  min-height: 52px; padding: 0 18px; border-radius: var(--r-md, 12px);
  background: var(--paprika, #E36A28); color: var(--cream, #F8F1DA);
  font: 700 15px/1 'Inter', sans-serif; letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(227, 106, 40, 0.35);
  transition: transform 120ms var(--ease, ease), box-shadow 160ms var(--ease, ease);
}
.hz-tsheet-close-table {
  appearance: none; cursor: pointer; flex: 1 1 auto;
  min-height: 52px; padding: 0 18px; border-radius: var(--r-md, 12px);
  background: rgba(0, 75, 35, 0.08); color: var(--green-imperial, #004B23);
  border: 1px solid rgba(0, 75, 35, 0.18);
  font: 600 14px/1 'Inter', sans-serif;
}
.hz-tsheet-2nd {
  appearance: none; cursor: pointer;
  min-height: 52px; padding: 0 16px; border-radius: var(--r-md, 12px);
  background: transparent; border: 1px solid rgba(0, 75, 35, 0.2);
  color: var(--green-imperial, #004B23);
  font: 600 13px/1 'Inter', sans-serif;
}
@media (hover: hover) and (pointer: fine) {
  .hz-tsheet-charge:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(227, 106, 40, 0.45); }
}
.hz-tsheet-charge:active, .hz-tsheet-2nd:active, .hz-tsheet-close-table:active { transform: scale(0.98); }

/* Récap inline avant débit. */
.hz-tsheet-recap {
  padding: 14px;
  background: rgba(227, 106, 40, 0.06);
  border: 1px solid rgba(227, 106, 40, 0.28);
  border-radius: var(--r-md, 12px);
  display: flex; flex-direction: column; gap: 10px;
}
.hz-recap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hz-recap-list li {
  display: flex; justify-content: space-between; gap: 12px;
  font: 500 13px/1.4 'Inter', sans-serif; color: var(--ink-900, #1A0F06);
}
.hz-recap-list .ri-price { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.hz-recap-total {
  display: flex; justify-content: space-between;
  padding-top: 8px; border-top: 1px solid rgba(227, 106, 40, 0.25);
  font: 500 13px/1 'Inter', sans-serif; color: var(--ink-600, #5b5147);
}
.hz-recap-total strong { font: 700 18px/1 'JetBrains Mono', monospace; color: var(--paprika-deep, #B84F18); }
.hz-recap-hint { margin: 0; font: 400 11px/1.4 'Inter', sans-serif; color: var(--ink-600, #5b5147); font-style: italic; }
.hz-recap-btns { display: flex; gap: 8px; }
.hz-recap-btns .hz-tsheet-charge, .hz-recap-btns .hz-tsheet-2nd { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
  .hz-tc, .hz-svc-chip, .hz-trow .tr-served-btn, .hz-tsheet-charge { transition: none; }
  .hz-tc-pulse { animation: none; }
}

/* Desktop : la grille a déjà 6 colonnes ; la feuille se centre en panneau. */
@media (min-width: 1024px) {
  .hz-tsheet { max-width: 560px; left: 50%; right: auto; transform: translate(-50%, 100%); border-radius: var(--r-lg, 16px); }
  .hz-tsheet.is-open { transform: translate(-50%, 0); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §25 — ÉCRAN ARRIVÉES (mode check-in, monde Service) — refonte "deux mondes"
   2026-06-02. Liste filtrable fusionnant résas du jour + walk-in/waitlist.
   Mobile-first PROFESSIONNEL : dense, gros points de tap (≥44px), pro & calme.
   Grammaire Atelier Vert : EB Garamond (titre/italics), Inter (UI), JetBrains
   Mono (heures/eyebrows), accent gauche 3px paprika sur chaque ligne.
   ═══════════════════════════════════════════════════════════════════════════ */
.hz-arr { display: flex; flex-direction: column; gap: 12px; padding-bottom: 96px; }

/* §25.1 — En-tête éditorial ────────────────────────────────────────── */
.hz-arr-head { display: flex; flex-direction: column; gap: 2px; }
.hz-arr-title {
  font-family: var(--font-display), 'EB Garamond', serif;
  font-weight: 500; font-size: 24px; line-height: 1.05;
  color: var(--green-imperial, #004B23); margin: 0;
}
.hz-arr-title em { font-style: italic; color: var(--paprika, #E36A28); }

/* §25.2 — Chips de statut (sticky) — même grammaire que les chips Service. */
.hz-arr-chips {
  position: sticky; top: 0; z-index: 6;
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 8px 0; margin: 0;
  background: linear-gradient(var(--cream, #F8F1DA) 70%, rgba(248, 241, 218, 0));
}
.hz-arr-chip {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px;
  background: rgba(0, 75, 35, 0.06);
  border: 1px solid rgba(0, 75, 35, 0.16);
  border-radius: 100px;
  font: 600 13px/1 'Inter', sans-serif;
  color: var(--green-imperial, #004B23);
  letter-spacing: 0.01em;
  transition: background 160ms var(--ease, ease), border-color 160ms var(--ease, ease);
}
.hz-arr-chip .hz-arr-chip-n {
  font: 700 11px/1 'JetBrains Mono', monospace;
  background: rgba(227, 106, 40, 0.16); color: var(--paprika-deep, #B84F18);
  padding: 2px 6px; border-radius: 100px;
}
.hz-arr-chip.is-active {
  background: var(--paprika, #E36A28); border-color: var(--paprika, #E36A28);
  color: var(--cream, #F8F1DA);
  box-shadow: 0 2px 10px rgba(227, 106, 40, 0.35);
}
.hz-arr-chip.is-active .hz-arr-chip-n { background: rgba(248, 241, 218, 0.22); color: var(--cream, #F8F1DA); }
@media (hover: hover) and (pointer: fine) {
  .hz-arr-chip:not(.is-active):hover { background: rgba(0, 75, 35, 0.1); border-color: rgba(0, 75, 35, 0.28); }
}

/* §25.3 — Groupes (par heure pour "à venir") ───────────────────────── */
.hz-arr-body { display: flex; flex-direction: column; gap: 14px; }
.hz-arr-group { display: flex; flex-direction: column; gap: 8px; }
.hz-arr-group-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 2px 0 2px 2px;
}
.hz-arr-hour {
  font: 700 13px/1 'JetBrains Mono', monospace;
  color: var(--green-imperial, #004B23); letter-spacing: 0.04em;
}
.hz-arr-group-n {
  font: 600 10px/1 'JetBrains Mono', monospace;
  color: var(--paprika-deep, #B84F18);
  background: rgba(227, 106, 40, 0.12);
  padding: 3px 6px; border-radius: 100px;
}

/* §25.4 — Ligne d'arrivée — vert translucide + accent gauche 3px paprika. */
.hz-arr-row {
  position: relative; text-align: left; width: 100%;
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 12px 14px 12px 16px;
  background: #FBF6E6;
  border: 1px solid rgba(0, 75, 35, 0.22);
  border-radius: var(--r-md, 12px);
  box-shadow: 0 1px 3px rgba(0, 46, 21, 0.07);
  overflow: hidden;
}
.hz-arr-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--paprika, #E36A28); opacity: 0.55;
}
button.hz-arr-row { appearance: none; cursor: pointer; }
button.hz-arr-row:disabled { cursor: default; opacity: 0.78; }
@media (hover: hover) and (pointer: fine) {
  button.hz-arr-row:not(:disabled):hover { box-shadow: 0 8px 20px rgba(0, 26, 12, 0.12); }
}

/* Colonne gauche (heure / icône d'état). */
.hz-arr-time { flex: 0 0 auto; min-width: 46px; display: flex; align-items: center; justify-content: center; }
.hz-arr-time-hhmm {
  font: 600 16px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  color: var(--green-imperial, #004B23);
}
.hz-arr-wait-icon { font-size: 20px; color: var(--paprika, #E36A28); }
.hz-arr-time--seated .hz-arr-seated-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--paprika, #E36A28); box-shadow: 0 0 0 4px rgba(227, 106, 40, 0.16);
}

/* Bloc central (nom / couverts / badges / note). */
.hz-arr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hz-arr-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hz-arr-name {
  font: 600 15px/1.2 'Inter', sans-serif;
  color: var(--green-imperial, #004B23);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.hz-arr-pax {
  font: 600 11px/1 'JetBrains Mono', monospace; color: var(--green-imperial, #004B23);
  background: rgba(0, 75, 35, 0.1); padding: 3px 7px; border-radius: 6px; white-space: nowrap;
}
.hz-arr-sub { font: 600 12px/1.3 'Inter', sans-serif; color: #2e5240; }
.hz-arr-note {
  font-family: var(--font-display), 'EB Garamond', serif; font-style: italic;
  font-size: 13px; line-height: 1.35; color: #2e5240;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Badges (VIP / allergène / acompte). */
.hz-arr-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.arr-badge {
  font: 700 9px/1 'JetBrains Mono', monospace; letter-spacing: 0.05em;
  padding: 3px 7px; border-radius: 100px; white-space: nowrap;
}
.arr-badge--vip { background: var(--paprika, #E36A28); color: var(--cream, #F8F1DA); }
.arr-badge--alrg { background: rgba(245, 200, 66, 0.30); color: #6b5318; }
.arr-badge--dep { background: rgba(227, 106, 40, 0.14); color: var(--paprika-deep, #B84F18); }
.arr-badge--dep-ok { background: rgba(0, 75, 35, 0.1); color: var(--green-imperial, #004B23); }
.arr-badge--notified { background: rgba(122, 143, 99, 0.22); color: #4A6244; }

/* Actions à droite (Asseoir / Notifier). Gros tap targets. */
.hz-arr-acts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.hz-arr-seat, .hz-arr-notify {
  appearance: none; cursor: pointer; white-space: nowrap;
  min-height: 44px; padding: 0 16px; border-radius: 100px;
  font: 600 13px/1 'Inter', sans-serif; letter-spacing: 0.01em;
  transition: transform 140ms var(--ease, ease), box-shadow 160ms var(--ease, ease), background 160ms var(--ease, ease);
}
.hz-arr-seat {
  background: var(--paprika, #E36A28); color: var(--cream, #F8F1DA); border: 0;
  box-shadow: 0 2px 10px rgba(227, 106, 40, 0.35);
}
.hz-arr-notify {
  background: rgba(0, 75, 35, 0.06); color: var(--green-imperial, #004B23);
  border: 1px solid rgba(0, 75, 35, 0.2);
}
@media (hover: hover) and (pointer: fine) {
  .hz-arr-seat:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(227, 106, 40, 0.45); }
  .hz-arr-notify:hover { background: rgba(0, 75, 35, 0.1); border-color: rgba(0, 75, 35, 0.3); }
}
.hz-arr-seat:active, .hz-arr-notify:active { transform: scale(0.97); }

.hz-arr-chev {
  flex: 0 0 auto; font: 400 22px/1 'Inter', sans-serif;
  color: var(--paprika, #E36A28); opacity: 0.7;
}

/* Empty state — Fraunces/EB Garamond italic via .empty (design.css). */
.hz-arr-body .empty { padding: 2.4rem 1rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .hz-arr-chip, .hz-arr-seat, .hz-arr-notify, button.hz-arr-row { transition: none; }
  .hz-arr-seat:active, .hz-arr-notify:active { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   §24 FICHE-PLAT — écran Menu (Gestion > Réglages), 2026-06-04
   ────────────────────────────────────────────────────────────────────────
   Remplace la mécanique table→cartes-CSS (§21.3 déprécié) par un vrai
   markup carte « fiche-plat » éditorial Atelier Vert :
     · miniature photo 72px (ou initiale EB Garamond sur gradient paprika)
     · nom EB Garamond italic + badge (renderBadgeCell) sur la même ligne
     · prix proéminent JetBrains Mono (paprika-deep)
     · 1 ligne de chips mono (allergènes · 🌿 · temps · dispo)
     · pied d'actions hairline : Modifier (paprika) / Supprimer (ruby LISIBLE)
   Mobile-first (1 col, gros tap targets ≥44px). Desktop ≥900px → 2 col.
   Catégorie : eyebrow paprika mono affiché 1× par groupe.
   Tokens uniquement : --paprika / --paprika-deep / --ruby-500 / --cream-50 /
   --green-imperial / --ink-* / --line / --font-display / --font-mono.
   ──────────────────────────────────────────────────────────────────── */

.mi-grid { padding: 0 1rem 5rem; }

/* Eyebrow catégorie — paprika mono, 1× par groupe */
.mi-cat {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 4px 10px;
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paprika-deep);
}
.mi-cat-l { flex: 0 0 auto; }
.mi-cat::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.mi-cat-n { flex: 0 0 auto; color: var(--paprika); opacity: 0.65; }

.mi-cards { display: grid; gap: 10px; }

/* Carte cream + accent gauche 3px paprika (signature Atelier Vert) */
.mi-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  grid-template-areas: "thumb body" "act act";
  gap: 0 14px;
  padding: 12px 14px;
  background: var(--cream-50, #FCF7E8);
  border: 1px solid var(--line);
  border-left: 3px solid var(--paprika);
  border-radius: var(--r-md, 14px);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast, 160ms) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.mi-thumb {
  grid-area: thumb; width: 72px; height: 72px;
  border-radius: 11px; overflow: hidden;
  background-size: cover; background-position: center;
  background-color: #00351a;
}
/* Fallback sans photo : gradient paprika + initiale EB Garamond */
.mi-thumb--ph {
  display: grid; place-items: center;
  background-image: linear-gradient(135deg, var(--paprika), var(--paprika-deep));
}
.mi-initial {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 32px; line-height: 1; color: var(--cream, #F8F1DA);
}

.mi-body { grid-area: body; min-width: 0; }
.mi-head { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.mi-name {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 18px; line-height: 1.18; color: var(--ink-900);
  margin: 0; overflow-wrap: anywhere;
}
.mi-badge { flex: 0 0 auto; }

.mi-price {
  font: 600 17px/1 var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--paprika-deep); margin: 7px 0 9px;
}

/* Meta : chips mono discrets, wrap si besoin */
.mi-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.mi-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.02em;
  padding: 5px 9px; border-radius: var(--r-pill, 999px);
  background: rgba(0, 75, 35, 0.05); color: var(--ink-600);
  border: 1px solid rgba(0, 75, 35, 0.10);
}
.mi-chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--paprika); }
.mi-chip--veg  { color: var(--green-imperial); background: rgba(0, 75, 35, 0.08); }
.mi-chip--time { color: var(--ink-500); }
.mi-chip--on   { color: var(--green-imperial); border-color: rgba(0, 75, 35, 0.18); }
.mi-chip--off  { color: var(--ruby-500); background: rgba(163, 46, 46, 0.08); border-color: rgba(163, 46, 46, 0.22); }

/* Pied actions — hairline paprika + gros tap targets pleine largeur */
.mi-actions {
  grid-area: act;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.mi-actions .btn.small {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.mi-edit { color: var(--paprika-deep); }

/* SUPPRIMER — danger LISIBLE : ruby foncé sur cream, jamais clair-sur-clair */
.mi-del {
  background: transparent; color: var(--ruby-500);
  border: 1px solid rgba(163, 46, 46, 0.35);
}

/* Plat épuisé : photo grisée + prix barré, carte toujours lisible */
.mi-card.is-off .mi-thumb { filter: grayscale(0.7) brightness(0.92); opacity: 0.75; }
.mi-card.is-off .mi-price { text-decoration: line-through; color: var(--ink-500); }

@media (hover: hover) and (pointer: fine) {
  .mi-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .mi-edit:hover { background: var(--paprika); color: var(--cream); border-color: var(--paprika); }
  .mi-del:hover  { background: var(--ruby-500); color: var(--cream); border-color: var(--ruby-500); }
}
.mi-card .btn.small:active { transform: scale(0.97); }

/* Desktop : grille 2 colonnes de fiches (l'écran reste lisible hors mobile) */
@media (min-width: 900px) {
  .mi-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mi-card, .mi-edit, .mi-del { transition: none; }
  .mi-card:hover { transform: none; }
  .mi-card .btn.small:active { transform: none; }
}