/* ============================================================
   CHEZ CALI COFFEE — Design system partagé
   Ambiance du logo : crème, chocolat, sauge (tasse), moutarde, rose
   ============================================================ */

:root {
  /* ------------------------------------------------------------
     Palette « diner maison » — tirée directement du logo :
     tasse & soucoupe sauge/vert · médaillon rose · pointe moutarde ·
     crème · chocolat. Le VERT mène, le ROSE signe (carreaux), la
     moutarde n'est qu'un micro-accent.
     Les noms --caramel/--caramel-lite/--gold sont historiques : ils
     portent désormais la famille verte et sont aussi pilotés par le
     panneau Tweaks (voir js/tweaks.js, palette « chezcali »).
     ------------------------------------------------------------ */
  --cream:        #FAF3E8;   /* crème dominante (LE fond du site)   */
  --cream-2:      #F4EBDA;   /* crème un peu plus chaude (panneaux) */
  --paper:        #FFFCF6;   /* blanc cassé (cartes)                */
  --espresso:     #2B190D;   /* encre (texte)                       */
  --espresso-2:   #3E2717;
  --coffee:       #6E4327;   /* brun café (prix, détails)           */

  /* Vert forêt — accent « banquette de diner » (barres, texte, cadres) */
  --green:        #4C6A4C;   /* vert forêt, accent principal */
  --green-deep:   #33482F;   /* vert sombre : barres/pied    */
  --green-soft:   #AFC7A9;   /* vert clair sur fond sombre    */
  --green-tint:   rgba(76, 106, 76, 0.12); /* voile vert sur crème */

  /* Alias historiques (accent = vert forêt) */
  --caramel:      #4C6A4C;
  --caramel-lite: #AFC7A9;
  --sage:         #4C6A4C;
  --sage-deep:    #3A5238;

  /* Rose poudré — le co-accent diner : damier, DINER, étincelles, tampons */
  --rose:         #D98F94;   /* rose poudré (damier, accents)  */
  --rose-deep:    #C06E74;   /* rose soutenu (texte)           */
  --rose-soft:    #F0D3D3;   /* rose pâle                      */
  --checker-light:#FFFFFF;   /* carreau CLAIR du damier (blanc, pas crème) */

  /* Moutarde du médaillon — micro-accent seulement (surtout pas des aplats) */
  --mustard:      #E3AC66;
  --gold:         #E3AC66;   /* bouton or (comme la carte) */
  --gold-lite:    #EFC287;

  --cocoa:        #4A3223;
  --line:         rgba(43, 25, 13, 0.13);
  --line-strong:  rgba(43, 25, 13, 0.22);

  /* ------------------------------------------------------------
     Gris CHAUDS (7 niveaux) et couleurs d'ETAT.
     Ajout purement additif : rien au-dessus n'est modifie.
     Ces 14 variables ne sont PAS pilotees par js/tweaks.js et ne
     doivent jamais l'etre : « Refuse » doit rester rouge meme
     quand le visiteur choisit la palette rose.
     ------------------------------------------------------------ */
  --neutral-900:  #2A2018;   /* texte fort sur fond clair          */
  --neutral-800:  #453B31;   /* texte courant secondaire           */
  --neutral-700:  #6B5F52;   /* labels, legendes, texte discret    */
  --neutral-400:  #8F8275;   /* placeholder, icone desactivee      */
  --neutral-200:  #D9CEC0;   /* bordure de champ, piste d'un switch */
  --neutral-100:  #EDE5D9;   /* fond desactive, fond de segment    */
  --neutral-50:   #F7F2EA;   /* fond tres clair, ligne alternee    */

  --ok:           #4F6B33;   /* vert olive : accepte, ouvert, paye */
  --ok-bg:        #E8EFDD;
  --warn:         #8A5A12;   /* ambre : en attente, stock bas      */
  --warn-bg:      #FAEED4;
  --danger:       #B24A3A;   /* brique : refuse, ferme, epuise     */
  --danger-bg:    #FBE8E3;

  /* Anneau de focus clavier. Bleu volontairement hors palette :
     il doit se distinguer de tous les accents du site. Sur fond
     sombre, la regle « .section-dark …:focus-visible » plus bas
     bascule sur un or clair. */
  --focus:        #1B62C9;

  /* Typographie */
  --font-display: "DM Serif Display", "Georgia", serif;
  --font-script:  "Caveat", "Segoe Script", cursive;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;

  /* Damier rose (signature diner) — taille d'un carreau */
  --sq: 13px;

  /* Effets 3D (pilotable par Tweaks) */
  --fx-intensity: 1;

  --maxw: 1240px;
  --nav-h: 92px;
}

/* ============================================================
   SIGNATURE DINER — damier rose (liseré fin, jamais un aplat)
   ============================================================ */
.checker {
  height: 16px;
  background:
    conic-gradient(var(--rose) 0 90deg, var(--checker-light) 0 180deg,
                   var(--rose) 0 270deg, var(--checker-light) 0)
    0 0 / calc(var(--sq) * 2) calc(var(--sq) * 2);
}
.checker.on-dark {
  background:
    conic-gradient(var(--rose) 0 90deg, var(--green-deep) 0 180deg,
                   var(--rose) 0 270deg, var(--green-deep) 0)
    0 0 / calc(var(--sq) * 2) calc(var(--sq) * 2);
}
.checker.tall { height: 22px; }

/* Titre « script » vert, comme les catégories du menu papier.
   Couleur = accent pilotable (vert par défaut). */
.script {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--caramel);
  letter-spacing: 0.005em;
  line-height: 0.95;
}

/* Étincelle diner (✦) — séparateur/ornement rose */
.spark { color: var(--rose); font-style: normal; font-weight: 400; display: inline-block; }
.eyebrow .spark { font-size: .85em; }

/* Bouton pilule à contour vert (le « VOIR LE MENU » des diners) */
.btn-outline {
  background: var(--paper); color: var(--green);
  border: 1.6px solid var(--green);
  box-shadow: 0 6px 18px rgba(51,72,47,.10);
}
.btn-outline:hover { background: var(--green); color: var(--cream); transform: translateY(-2px); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--espresso);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

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

/* Labels / sur-titres */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--caramel);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 1.5px;
  background: var(--caramel);
  display: inline-block;
}
.eyebrow.center { justify-content: center; }
.eyebrow.no-line::before { display: none; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}
.nav .wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
/* logo centré en absolu ; les deux groupes de liens flottent aux extrémités */
.nav-menu { display: contents; }
.nav-side { display: flex; align-items: center; gap: 30px; }
.nav.scrolled {
  background: rgba(250, 244, 234, 0.86);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1px 0 var(--line);
}
/* Logo centré (en absolu) et prominent, sans texte descriptif */
.brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; }
.brand-logo { height: 72px; width: auto; display: block; transition: height .3s ease; }
.nav.scrolled .brand-logo { height: 58px; }
.nav.on-dark .nav-links a { color: var(--cream); }
.nav.on-dark.scrolled .nav-links a { color: var(--espresso); }
/* CTA de la nav : crème sur le hero vert (contraste), vert une fois scrollé
   sur la barre crème. Sélecteur assez spécifique pour battre .nav-links a. */
.nav.on-dark .nav-links a.btn-gold { background: var(--cream); color: var(--green-deep); }
.nav.on-dark.scrolled .nav-links a.btn-gold { background: var(--caramel); color: var(--cream); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-links a.link {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  padding: 6px 0;
  color: var(--espresso);
}
/* Étincelles roses entre les liens de nav (mood diner) */
.nav-links a.link:not(:first-child)::before {
  content: "✦";
  color: var(--rose);
  font-size: 10px;
  margin-right: 30px;
  transform: translateY(-1px);
  display: inline-block;
}
.nav.on-dark .nav-links a.link:not(:first-child)::before { color: var(--rose); }
.nav-links a.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--caramel);
  transition: width .3s ease;
}
.nav-links a.link:hover::after,
.nav-links a.link.active::after { width: 100%; }

/* Le logo est centré EN ABSOLU : les deux groupes de liens ne le voient pas et
   peuvent lui rentrer dedans. Avec quatre liens plus le CTA, le groupe de
   droite passe à 6 px du logo vers 900 px de large. On resserre l'espacement
   avant que ça n'arrive, plutôt que de rapetisser le logo, qui est la marque.
   Mesuré, pas supposé : 900 px est le pire cas, le burger prend la main à 880. */
@media (max-width: 1180px) {
  .nav-side { gap: 20px; }
  .nav-links { gap: 20px; }
  .nav-links a.link:not(:first-child)::before { margin-right: 20px; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  padding: 13px 24px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.3,.7,.4,1), box-shadow .25s, background .25s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--green-deep);
  color: var(--cream);
  box-shadow: 0 8px 24px rgba(46, 60, 56, 0.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(46,60,56,.36); }
/* CTA principal (fonds clairs) : bouton OR (accord avec la carte). */
.btn-gold { background: var(--gold); color: var(--espresso); box-shadow: 0 8px 24px rgba(227,172,102,.34); }
.btn-gold:hover { transform: translateY(-2px); background: var(--gold-lite); }
/* CTA sur fond vert sombre : bouton crème (comme la mousse du logo). */
.btn-cream { background: var(--cream); color: var(--green-deep); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.btn-cream:hover { transform: translateY(-2px); background: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--espresso);
  border: 1.5px solid var(--line-strong);
}
.btn-ghost:hover { border-color: var(--espresso); transform: translateY(-2px); }
.btn-lg { padding: 17px 32px; font-size: 16px; }

.nav-burger { display: none; color: var(--espresso); }

/* ============================================================
   SECTIONS génériques
   ============================================================ */
.section { padding: 120px 0; position: relative; }
.section-dark { background: var(--green-deep); color: var(--cream); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--cream); }
.section-cream2 { background: var(--cream-2); }

.section-head { max-width: 720px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head h2 {
  font-size: clamp(38px, 5vw, 64px);
  margin-top: 18px;
}
.section-head .lead {
  font-size: 19px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--espresso) 78%, transparent);
  margin-top: 22px;
}
.section-dark .section-head .lead { color: color-mix(in srgb, var(--cream) 82%, transparent); }

/* Reveal au scroll */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--green);   /* vert sauge de la palette */
  color: var(--cream);
  padding: 80px 0 40px;
  position: relative;
}
/* liseré carreaux roses en tête de footer (signature diner) */
.footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background:
    conic-gradient(var(--rose) 0 90deg, var(--checker-light) 0 180deg,
                   var(--rose) 0 270deg, var(--checker-light) 0)
    0 0 / calc(var(--sq) * 2) calc(var(--sq) * 2);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(250,244,234,.16);
}
.footer-logo { height: 96px; width: auto; display: block; margin-bottom: 6px; }
.footer p.muted { color: color-mix(in srgb, var(--cream) 78%, transparent); margin-top: 18px; max-width: 340px; line-height: 1.7; }
.footer h4 { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--cream) 72%, transparent); margin-bottom: 20px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer ul a, .footer ul li { color: color-mix(in srgb, var(--cream) 80%, transparent); font-size: 15px; }
.footer ul a:hover { color: var(--caramel-lite); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-size: 13px;
  color: color-mix(in srgb, var(--cream) 55%, transparent);
  flex-wrap: wrap;
  gap: 12px;
}

/* ============================================================
   UTIL
   ============================================================ */
.three-canvas { display: block; width: 100%; height: 100%; }
.grain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 880px) {
  .wrap { padding: 0 22px; }
  .section { padding: 84px 0; }
  /* nav mobile : logo à gauche + burger ; liens en menu déroulant */
  .brand { position: static; transform: none; }
  .brand-logo, .nav.scrolled .brand-logo { height: 52px; }
  .nav-menu { display: none; }
  /* gap identique à celui des groupes : sinon le saut entre « La carte » et
     « Nous trouver » (la frontière des deux groupes) est plus serré que les
     autres, et la liste déroulante a l'air bancale. */
  .nav.menu-open .nav-menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 18px;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--cream); padding: 18px 22px 26px;
    box-shadow: 0 16px 40px rgba(42,27,17,.18);
  }
  .nav.menu-open .nav-side { flex-direction: column; align-items: flex-start; gap: 18px; width: 100%; }
  .nav-menu .nav-side a.link::before { display: none; }
  .nav-burger {
    display: flex; flex-direction: column; gap: 5px; cursor: pointer;
    background: none; border: none; padding: 8px;
  }
  .nav-burger span { width: 24px; height: 2px; background: currentColor; display: block; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================================
   PRIMITIVES PARTAGEES  (public + back-office)
   ------------------------------------------------------------
   Tout ce qui suit est ADDITIF : aucun selecteur ci-dessous
   n'existe plus haut dans ce fichier ni dans les <style> des
   pages publiques. Les pages actuelles ne changent donc pas
   d'un pixel tant qu'elles n'utilisent pas ces classes.
   Consommateurs prevus : tunnel de commande, reservation,
   admin/index.html (qui charge ce fichier puis admin.css).
   ============================================================ */

/* ---------- Focus clavier (repare le outline:none de la page
     Nous trouver). Specificite volontairement a 3 « classes »
     pour battre « .cc-fields input:focus { outline: none } ».
     Jamais de outline:none ici, et jamais sur :focus tout court :
     la souris ne declenche pas :focus-visible. ---------- */
:is(a[href], area[href], button, input, select, textarea, summary,
    [tabindex]:not([tabindex="-1"]), [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* Sur les pans sombres, le bleu disparait : anneau or clair. */
.section-dark :is(a[href], button, input, select, textarea, summary,
    [tabindex]:not([tabindex="-1"])):focus-visible,
.footer :is(a[href], button, input, select, textarea, summary,
    [tabindex]:not([tabindex="-1"])):focus-visible,
.cc :is(a[href], button, input, select, textarea, summary,
    [tabindex]:not([tabindex="-1"])):focus-visible,
.panel.dark :is(a[href], button, input, select, textarea, summary,
    [tabindex]:not([tabindex="-1"])):focus-visible {
  outline-color: #FFD98A;
}

/* Texte reserve aux lecteurs d'ecran (label d'un switch, region
   aria-live des toasts, en-tetes de tableau en mode carte). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================
   .field  ·  champ de formulaire
   Remplace .cc-fields. Structure :
   <div class="field"><label for=…>…</label><input id=…>
     <p class="hint">…</p><p class="field-error">…</p></div>
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--neutral-700);
}
.field > label .req { color: var(--danger); margin-left: 3px; }
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 400; line-height: 1.5;
  letter-spacing: 0; text-transform: none;
  color: var(--espresso);
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--neutral-200);
  background: var(--paper);
  width: 100%;
  transition: border-color .18s ease, background .18s ease;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--neutral-400); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:disabled, .field select:disabled, .field textarea:disabled {
  background: var(--neutral-100); color: var(--neutral-400); cursor: not-allowed;
}
.field .hint { font-size: 12.5px; line-height: 1.45; color: var(--neutral-700); }
.field-error {
  display: none;
  font-size: 12.5px; line-height: 1.45; font-weight: 600;
  color: var(--danger);
}
.field.is-invalid .field-error { display: block; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--danger); background: var(--danger-bg); }

/* Deux dispositions courantes, pour ne pas les reecrire par page. */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.field-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   .badge  ·  pastille d'etat
   Remplace .pill (carte), .cc-badge et .open-pill (nous trouver).
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
  line-height: 1.35; white-space: nowrap;
  background: var(--neutral-100); color: var(--neutral-800);
}
.badge .dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
  flex: 0 0 auto;
}
.badge.ok     { background: var(--ok-bg);     color: var(--ok); }
.badge.warn   { background: var(--warn-bg);   color: var(--warn); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }
/* Rose plus soutenu que --rose-deep : sur --rose-soft, #C06E74 ne
   donne que 2,6:1, illisible en 12,5px. #96444C monte a 4,6:1. */
.badge.info   { background: var(--rose-soft); color: #96444C; }
.badge.lg     { padding: 9px 16px; font-size: 14px; }
/* Compteur rond (panier, onglet Comptoir) : garde un cercle a 1 chiffre. */
.badge.count {
  min-width: 24px; height: 24px; padding: 0 7px; justify-content: center;
  background: var(--rose); color: #fff; font-size: 13px; font-weight: 800;
}

/* ============================================================
   .table  ·  tableau de donnees
   Sous 760px, ajouter la classe .stack et un data-label sur
   chaque <td> : le tableau devient une pile de cartes.
   ============================================================ */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th {
  text-align: left; padding: 11px 12px;
  font-family: var(--font-body); font-weight: 700;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--neutral-700);
  border-bottom: 1px solid var(--line-strong);
}
.table td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr.is-selected { background: var(--neutral-50); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .shrink { width: 1%; white-space: nowrap; }

@media (max-width: 760px) {
  .table.stack thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .table.stack tbody tr {
    display: block; margin-bottom: 12px; padding: 4px 14px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  }
  .table.stack td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 10px 0; text-align: right;
    border-bottom: 1px dashed var(--line);
  }
  .table.stack tbody tr td:last-child { border-bottom: none; }
  .table.stack td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto; text-align: left;
    font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--neutral-700);
  }
}

/* ============================================================
   .panel  ·  bloc de contenu encadre
   Remplace .info-card, .sec, .box, .cc-cart.
   ============================================================ */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 12px 34px rgba(42, 27, 17, .05);
}
.panel + .panel { margin-top: 18px; }
.panel.flush { padding: 0; overflow: hidden; }
.panel.flush .panel__head { padding: 20px 24px 0; }
.panel.dark {
  background: var(--green-deep); color: var(--cream);
  border-color: rgba(250, 244, 234, .14);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
}
.panel.dark .panel__sub { color: color-mix(in srgb, var(--cream) 74%, transparent); }
.panel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.panel__head h2, .panel__head h3 { font-family: var(--font-display); font-size: 25px; }
.panel__sub { font-size: 14px; line-height: 1.5; color: var(--neutral-700); flex: 1 1 100%; }
.panel__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel__foot {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}

/* ============================================================
   .modal  ·  fenetre modale (recapitulatif, confirmation)
   <div class="modal-overlay" hidden><div class="modal" role="dialog">
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center; padding: 20px;
  background: rgba(43, 25, 13, .58);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.modal-overlay[hidden] { display: none; }
.modal {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: min(90vh, 780px); overflow: auto;
  background: var(--paper); color: var(--espresso);
  border-radius: 18px; padding: 26px 26px 24px;
  box-shadow: 0 30px 80px rgba(42, 27, 17, .38);
}
.modal__title { font-family: var(--font-display); font-size: 27px; padding-right: 34px; }
.modal__sub { font-size: 14.5px; line-height: 1.6; color: var(--neutral-700); margin-top: 6px; }
.modal__body { margin-top: 18px; }
.modal__close {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--neutral-700);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.modal__close:hover { background: var(--neutral-100); color: var(--espresso); }
.modal__foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 22px; }

/* ============================================================
   .toast  ·  message ephemere. Le conteneur .toast-stack porte
   aria-live="polite" et reste en place, les .toast y entrent.
   ============================================================ */
.toast-stack {
  position: fixed; z-index: 2100;
  left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  max-width: 100%; padding: 13px 18px;
  border-radius: 12px;
  background: var(--neutral-900); color: var(--cream);
  font-size: 14.5px; font-weight: 600; line-height: 1.4;
  box-shadow: 0 18px 44px rgba(42, 27, 17, .34);
  opacity: 0; transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: none; }
.toast.ok     { background: var(--ok); }
.toast.danger { background: var(--danger); }

/* ============================================================
   .tabs / .tab  ·  controle segmente. Remplace .cc-tab.
   Sur mobile la barre defile plutot que de passer a la ligne.
   ============================================================ */
.tabs {
  display: flex; gap: 4px; padding: 4px;
  border-radius: 999px;
  background: var(--neutral-100);
  border: 1px solid var(--line);
  max-width: 100%; min-width: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  border: 0; background: transparent;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--neutral-700);
  padding: 10px 18px; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.tab:hover { color: var(--espresso); }
.tab[aria-selected="true"], .tab.is-active {
  background: var(--paper); color: var(--espresso);
  box-shadow: 0 2px 6px rgba(42, 27, 17, .12);
}
.tab .badge.count { margin-left: 6px; }

/* ============================================================
   .switch  ·  interrupteur accessible
   <label class="switch"><input type="checkbox"><span class="track">
     </span><span>Commandes en ligne</span></label>
   ============================================================ */
.switch {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
}
.switch input {
  position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
}
.switch .track {
  position: relative; flex: 0 0 auto;
  width: 52px; height: 30px; border-radius: 999px;
  background: var(--neutral-200);
  transition: background .2s ease;
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(42, 27, 17, .32);
  transition: transform .2s ease;
}
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track::after { transform: translateX(22px); }
.switch input:disabled + .track { opacity: .5; }
.switch input:disabled ~ * { color: var(--neutral-400); }
.switch input:focus-visible + .track { outline: 2px solid var(--focus); outline-offset: 3px; }
/* Cible tactile confortable au comptoir. */
.switch.lg { min-height: 56px; font-size: 16px; }
.switch.lg .track { width: 62px; height: 36px; }
.switch.lg .track::after { width: 30px; height: 30px; }
.switch.lg input:checked + .track::after { transform: translateX(26px); }

/* ============================================================
   .empty / .loading  ·  les deux etats sans donnees
   ============================================================ */
.empty { text-align: center; padding: 44px 18px; color: var(--neutral-700); }
.empty__ic { width: 46px; height: 46px; margin: 0 auto 14px; color: var(--neutral-400); }
.empty__title { font-family: var(--font-display); font-size: 23px; color: var(--espresso); }
.empty p { font-size: 14.5px; line-height: 1.6; margin-top: 8px; }
.loading {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  padding: 40px 18px; color: var(--neutral-700); font-size: 14.5px;
}
.loading::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--neutral-200); border-top-color: var(--caramel);
  animation: cc-spin .7s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loading::before { animation-duration: 2.6s; }
  .toast { transition: none; }
}

/* ============================================================
   Variantes de .btn qui manquaient
   ============================================================ */
.btn-sm { padding: 9px 16px; font-size: 13px; gap: 7px; }
.btn-block { display: flex; width: 100%; justify-content: center; }
.btn-danger { background: var(--danger); color: #fff; box-shadow: 0 8px 22px rgba(178, 74, 58, .26); }
.btn-danger:hover { background: #9A3E30; transform: translateY(-2px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .48; cursor: not-allowed; transform: none; box-shadow: none;
}
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { transform: none; }