/* ============================================================
   ZaZa Super-App — Global Design System
   Charte  : zaza-brand.css (tokens --z-*)  ← source de vérité
   Thèmes  : zaza-themes.css (tokens --zz-* par data-theme)
   Font    : Poppins
   ------------------------------------------------------------
   Ce fichier ne définit PLUS de couleur de marque : il ne contient
   que les règles de composants, qui consomment les tokens --zz-*.
   ============================================================ */

:root {
  /* Métriques uniquement — les couleurs viennent de zaza-themes.css */
  --zz-font:        var(--z-font);
  --zz-nav-h:       64px;
  --zz-r:           16px;
  --zz-r-sm:        10px;
}

/* ── Reset & base ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;             /* seul .zz-content-area gère le scroll */
  background: var(--zz-black);
  color: var(--zz-white);
  font-family: var(--zz-font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ── Layout shell ────────────────────────────── */
.zz-app {
  display: flex;
  flex-direction: column;
  height: 100vh;                /* fixe la hauteur = viewport exact */
  overflow: hidden;             /* empêche le débordement hors container */
  background: var(--zz-black);
}

.zz-content-area {
  flex: 1;
  overflow-y: auto;             /* seul scroll vertical autorisé */
  overflow-x: hidden;
  padding-bottom: var(--zz-nav-h);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.zz-content-area::-webkit-scrollbar { display: none; }

/* ── Bottom Navigation ──────────────────────── */
.zz-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--zz-nav-h);
  background: var(--zz-nav-bg);
  border-top: 1px solid var(--zz-border);
  /* Coins hauts prononcés : la barre se lit comme une feuille posée sur la page,
     pas comme un bandeau collé. Valeur identique dans l'app chauffeur — les deux
     fronts partagent cette charte, les laisser diverger se voit d'un écran à l'autre. */
  border-radius: 28px 28px 0 0;
  display: flex;
  z-index: 50000;
  box-shadow: 0 -6px 24px var(--zz-nav-shadow);
}

.zz-nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--zz-muted);
  font-size: 10px;
  font-family: var(--zz-font);
  font-weight: 500;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0 2px;
  transition: color .15s;
}
.zz-nav-tab .nav-icon { font-size: 22px; line-height: 1; display: block; }
.zz-nav-tab.active { color: var(--zz-yellow); }
.zz-nav-tab.active .nav-label { font-weight: 700; }
.zz-nav-tab.sos-color,
.zz-nav-tab.nav-sos { color: var(--c-urgences); }
.zz-nav-tab.nav-sos.active { color: #FF6666; }

/* ── SOS FAB ────────────────────────────────── */
.zz-sos-fab {
  position: fixed;
  bottom: calc(var(--zz-nav-h) + 14px);
  right: 16px;
  width: 50px; height: 50px;
  background: var(--c-urgences);
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: white; font-weight: 900; font-size: 12px;
  font-family: var(--zz-font); letter-spacing: .5px;
  cursor: pointer; z-index: 49999;
  display: flex; align-items: center; justify-content: center;
  animation: sos-pulse 2.5s ease-in-out infinite;
}
@keyframes sos-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.7); }
  50%      { box-shadow: 0 0 0 9px rgba(239,68,68,0); }
}

/* ── Buttons ────────────────────────────────── */
.zz-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px; border-radius: 50px;
  font-family: var(--zz-font); font-size: 15px; font-weight: 700;
  border: none; cursor: pointer; width: 100%;
  transition: transform .15s, opacity .15s;
  -webkit-tap-highlight-color: transparent;
}
.zz-btn:active { transform: scale(.97); opacity: .9; }
.zz-btn-primary   { background: var(--zz-accent); color: var(--zz-on-accent); box-shadow: 0 4px 16px var(--zz-accent-dim); }
.zz-btn-secondary { background: var(--zz-card2); color: var(--zz-white); border: 1.5px solid var(--zz-border); }
.zz-btn-danger    { background: var(--c-urgences); color: white; box-shadow: 0 4px 16px rgba(239,68,68,.4); }
.zz-btn-ghost     { background: transparent; color: var(--zz-yellow); border: 1.5px solid var(--zz-yellow); }

/* ── Inputs ─────────────────────────────────── */
.zz-input {
  background: var(--zz-card); color: var(--zz-white);
  /* --zz-border-strong : la bordure est la seule chose qui délimite le
     champ, elle doit rester perceptible (≥ 3:1). */
  border: 1.5px solid var(--zz-border-strong); border-radius: var(--zz-r);
  padding: 14px 16px; font-family: var(--zz-font); font-size: 15px;
  width: 100%; outline: none; transition: border-color .2s;
}
.zz-input::placeholder { color: var(--zz-muted); }
.zz-input:focus { border-color: var(--zz-yellow); }

.zz-search { position: relative; }
.zz-search .zz-input { padding-left: 44px; border-radius: 50px; }
.zz-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--zz-muted); font-size: 18px; pointer-events: none;
}

/* ── Effacement d'une barre de recherche ─────────
   La croix n'est rendue QUE lorsque le champ porte du texte : sur un champ
   vide elle n'aurait rien à effacer et volerait de la place au placeholder.
   Elle vit DANS le champ, à droite, comme la loupe vit dedans à gauche.

   .zz-clear-hote sert d'ancre aux barres qui n'ont pas déjà un conteneur
   positionné ; .zz-search en est un (position:relative ci-dessus). */
.zz-clear-hote { position: relative; }
.zz-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: var(--zz-border, rgba(128,128,128,.28));
  color: var(--zz-muted, #8a8a8a); font-size: 11px; line-height: 1;
  cursor: pointer; z-index: 3; -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}
.zz-clear:hover, .zz-clear:focus-visible {
  background: var(--zz-muted, #8a8a8a); color: var(--zz-card, #fff);
}
.zz-clear:active { transform: translateY(-50%) scale(.9); }

/* La croix native de type="search" (WebKit) ferait doublon avec la nôtre. */
.zz-search .zz-input::-webkit-search-cancel-button,
.zz-clear-hote .zz-input::-webkit-search-cancel-button { display: none; }

/* Place réservée à la croix : sans elle, la fin du texte passe dessous. */
.zz-search .zz-input, .zz-clear-hote .zz-input { padding-right: 42px; }

/* ── Cards ──────────────────────────────────── */
.zz-card { background: var(--zz-card); border-radius: var(--zz-r); border: 1px solid var(--zz-border); }
.zz-tappable { cursor: pointer; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.zz-tappable:active { transform: scale(.97); }

/* ── Page ───────────────────────────────────── */
.zz-page { min-height: 100%; background: var(--zz-black); padding-bottom: 24px; animation: zz-fade .28s ease both; }
/* NE PAS animer transform ici : une animation transform en fill "both" reste "filling"
   et fait de .zz-page un bloc conteneur PERMANENT pour les descendants position:fixed
   (Chromium) → les bottom-sheets (feuille photo, etc.) sont piégés hors écran.
   Fondu d'opacité seul = aucun bloc conteneur, feuilles fixed OK. */
@keyframes zz-fade { from { opacity:0; } to { opacity:1; } }

.zz-page-hd { display: flex; align-items: center; gap: 12px; padding: 52px 16px 16px; }
.zz-back {
  width: 38px; height: 38px; background: var(--zz-card); border: 1px solid var(--zz-border);
  border-radius: var(--zz-r-sm); color: var(--zz-white); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.zz-page-title { font-size: 20px; font-weight: 800; flex: 1; }
/* Illustration du service dans l'en-tête de sa page, à droite du titre. Taille
   reprise de .gaz-titre-ico, le premier écran à l'avoir adoptée ; elle vaut
   maintenant pour tous, l'emoji ayant disparu des en-têtes. */
.zz-page-ico { height: 24px; width: auto; object-fit: contain; flex: none; }
/* Même illustration dans un bouton d'action, calée sur la ligne de texte. */
.zz-btn-ico { height: 19px; width: auto; object-fit: contain; vertical-align: -3px; margin-right: 6px; }

/* ── Sections ───────────────────────────────── */
.zz-sec { padding: 0 16px; margin-bottom: 28px; }
.zz-sec-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.zz-sec-title { font-size: 17px; font-weight: 700; }
.zz-sec-link { font-size: 13px; font-weight: 600; color: var(--zz-yellow); cursor: pointer; text-decoration: none; }

/* ── Grids ──────────────────────────────────── */
/* .zz-grid3 est la grille de services de référence : sur un écran de
   360 dp elle donne des tuiles d'environ 104 px, assez larges pour un
   libellé de 12 px sur une ligne (« Restauration » débordait en 4 col). */
.zz-grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.zz-grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.zz-grid2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }

/* ── Service Tile ───────────────────────────── */
.zz-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 6px; background: var(--zz-card);
  border-radius: var(--zz-r); border: 1px solid var(--zz-border);
  cursor: pointer; text-decoration: none;
  transition: transform .15s, background .15s; -webkit-tap-highlight-color: transparent;
  min-height: 92px; justify-content: center;
}
.zz-tile:active { transform: scale(.94); background: var(--zz-card2); }
.zz-tile-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.zz-tile-label { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; }

/* ── Icône image, à la place d'un emoji ─────────
   Une illustration remplace l'emoji là où le service en possède une. La
   hauteur est fixée à 78 % du bloc plutôt qu'à 100 % : une bouteille de gaz
   est bien plus haute que large, et à taille égale elle écraserait visuellement
   les emojis carrés qui l'entourent. `object-fit: contain` préserve les
   proportions quel que soit le bloc qui l'accueille. */
/* Hauteur calée sur la taille des emojis voisins, et non sur la boîte : les
   blocs qui accueillent ces icônes sont bien plus grands que leur contenu, si
   bien qu'un pourcentage élevé donnait une bouteille une fois et demie à deux
   fois plus grosse que les emojis d'à côté.
   57 % vaut environ 1,15 × la taille de police du bloc — la légère majoration
   compense le fait qu'une bouteille est étroite et paraîtrait maigre à hauteur
   strictement égale. */
.zz-ico-img { height: 57%; width: auto; max-width: 72%; object-fit: contain; display: block; }
.zz-ico-img.grand { height: 60%; }

/* ── Reflet au sol, sur TOUTES les illustrations ────────────────
   Une copie miroir de l'image, collée sous elle et qui se dissout en
   descendant : les rendus 3D détourés cessent de flotter et paraissent posés.

   -webkit-box-reflect ne duplique rien dans le DOM et ne fait pas décoder
   l'image deux fois — c'est ce qui permet de l'appliquer à toute la
   bibliothèque d'icônes sans coût de rendu notable sur un Android d'entrée.

   Le dégradé sert de masque à l'image reflétée AVANT son retournement :
   écrit « transparent → blanc », il donne donc, une fois retourné, un reflet
   dense sous l'objet qui s'éteint vers le bas. Le seuil à 70 % le raccourcit
   à trois dixièmes de la hauteur de l'image, ce qui le fait tenir dans les
   blocs existants sans déborder sur le libellé.

   Opacité de crête à .16 : au-delà d'environ .20, le reflet cesse de se lire
   comme un sol et devient une seconde illustration, à l'envers.

   Décalage NÉGATIF, et non zéro. Le reflet se place sous la BOÎTE de l'image,
   alors que plusieurs rendus 3D portent déjà leur propre ombre au sol, cuite
   dans le fichier en pixels opaques — impossible à retirer par un seuil
   d'alpha, elle est fusionnée avec la base de l'objet. Le bas visible de
   l'objet se trouve donc au-dessus du bas de la boîte, et un décalage de 0
   laissait un vide. Les 3 px repris tuckent le reflet sous l'objet.

   ⚠️ Firefox ne connaît pas cette propriété et affichera simplement les
   illustrations sans reflet. Rien ne casse et aucune place n'est réservée à
   vide — l'application vise Android en PWA, où le moteur est Chromium. */
.zz-ico-img {
  -webkit-box-reflect: below -3px linear-gradient(transparent 70%, rgba(255, 255, 255, .16));

  /* Ombrage porté, ÉCLAIRAGE VENU DU DESSUS : décalage vers le bas, jamais
     vers le haut ni sur le côté. drop-shadow et non box-shadow — le premier
     suit la silhouette détourée de l'illustration, le second aurait dessiné
     l'ombre du rectangle qui la contient.

     Volontairement discret (.22, flou 4 px) : plusieurs assets portent déjà
     une ombre cuite dans le fichier, et une seconde ombre appuyée par-dessus
     donnerait un objet doublement posé. */
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .22));
}


/* ── Scroll horizontal ──────────────────────── */
.zz-hscroll { display: flex; gap: 12px; overflow-x: auto; padding: 4px 16px; margin: 0 -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.zz-hscroll::-webkit-scrollbar { display: none; }

/* ── Bannière ───────────────────────────────── */
.zz-banner { flex-shrink: 0; width: 280px; height: 140px; border-radius: var(--zz-r); overflow: hidden; position: relative; display: flex; align-items: flex-end; padding: 14px; }
.zz-banner .bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 70px; opacity: .35; }

/* Ce bloc est un FILIGRANE : toute la carte, à 35 % d'opacité, DERRIÈRE le
   texte. Un emoji s'y prêtait ; une illustration centrée passe sous le titre
   et le rend illisible. On la ramène donc à droite, là où le texte n'est pas —
   il est calé en bas à gauche.
   ⚠️ Cette règle doit rester APRÈS celle ci-dessus : à spécificité égale,
   c'est la dernière qui l'emporte, et déclarée avant elle n'avait aucun effet.

   `:has()` ne cible que les bandeaux portant une illustration, pour laisser
   les emojis centrés comme avant. Sur une WebView trop ancienne pour le
   connaître, la règle est simplement ignorée : l'image reste centrée, un peu
   moins lisible, mais rien ne casse. */
.zz-banner .bg:has(img) { justify-content: flex-end; padding-right: 12px; }
.zz-banner .bg .zz-ico-img { height: 57%; }
.zz-banner .cnt { position: relative; z-index: 2; }
.zz-banner .tag { font-size: 10px; font-weight: 700; background: rgba(255,255,255,.22); padding: 3px 8px; border-radius: 50px; margin-bottom: 4px; display: inline-block; }
.zz-banner .ttl { font-size: 16px; font-weight: 800; color: white; text-shadow: 0 1px 4px rgba(0,0,0,.3); }
.zz-banner .sub { font-size: 11px; color: rgba(255,255,255,.85); margin-top: 2px; }

/* ── Carte offre ────────────────────────────── */
.zz-offer { flex-shrink: 0; width: 190px; background: var(--zz-card); border-radius: var(--zz-r); border: 1px solid var(--zz-border); overflow: hidden; }
.zz-offer .o-img { height: 80px; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.zz-offer .o-body { padding: 10px 12px 12px; }
.zz-offer .o-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.zz-offer .o-desc  { font-size: 11px; color: var(--zz-dim); margin-bottom: 8px; }
.zz-offer .o-badge { background: var(--zz-yellow-dim); color: var(--zz-yellow); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 50px; display: inline-block; }

/* ── Fournisseur ────────────────────────────── */
.zz-provider { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--zz-card); border-radius: var(--zz-r); border: 1px solid var(--zz-border); margin-bottom: 10px; cursor: pointer; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.zz-provider:active { transform: scale(.98); }
.zz-prov-avatar { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
/* Illustration de service dans une ligne de liste : 78 % au lieu des 57 % de la
   règle générale. Cette pastille ne fait que 48 px, et à 57 % l'illustration y
   pesait moins que l'emoji qu'elle remplace, alors qu'elle désigne la même chose. */
.zz-prov-avatar .zz-ico-img { height: 78%; max-width: 84%; }
.zz-prov-info { flex: 1; min-width: 0; }
.zz-prov-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.zz-prov-meta { font-size: 12px; color: var(--zz-dim); }
.zz-prov-price { font-size: 15px; font-weight: 800; color: var(--zz-yellow); text-align: right; flex-shrink: 0; }
.zz-prov-price small { display: block; font-size: 10px; font-weight: 400; color: var(--zz-dim); }

/* ── Boutons urgences ───────────────────────── */
.zz-em-btn { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--zz-r); border: none; cursor: pointer; font-family: var(--zz-font); width: 100%; text-align: left; transition: transform .15s; -webkit-tap-highlight-color: transparent; margin-bottom: 12px; }
.zz-em-btn:active { transform: scale(.97); }
.zz-em-btn .em-icon { font-size: 36px; flex-shrink: 0; }
.zz-em-btn .em-text { flex: 1; }
.zz-em-btn .em-title { font-size: 18px; font-weight: 800; margin-bottom: 2px; }
.zz-em-btn .em-sub   { font-size: 12px; opacity: .85; }
.em-police    { background: linear-gradient(135deg,#1D4ED8,#2563EB); color: white; }
.em-pompiers  { background: linear-gradient(135deg,#DC2626,#EF4444); color: white; }
.em-ambulance { background: linear-gradient(135deg,#15803D,#22C55E); color: white; }
.em-samu      { background: linear-gradient(135deg,#0E7490,#06B6D4); color: white; }

/* ── Tags ───────────────────────────────────── */
.zz-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 50px; font-size: 12px; font-weight: 600; }
.zz-tag-y { background: var(--zz-yellow-dim); color: var(--zz-yellow); }
.zz-tag-r { background: rgba(239,68,68,.15); color: #EF4444; }
.zz-tag-g { background: rgba(34,197,94,.15); color: #22C55E; }
.zz-tag-b { background: rgba(59,130,246,.15); color: #3B82F6; }

/* ── Divers ─────────────────────────────────── */
.zz-div { height: 8px; background: var(--zz-dark); margin: 0 -16px; }

/* ── Filtre pills (Pharmacie, Courses, Resto) ── */
.ph-cat { flex-shrink: 0; padding: 8px 16px; border-radius: 50px; background: var(--zz-card); border: 1.5px solid var(--zz-border); color: var(--zz-muted); font-family: var(--zz-font); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .15s; -webkit-tap-highlight-color: transparent; }
.ph-cat.sel { background: var(--zz-yellow-dim); border-color: var(--zz-yellow); color: var(--zz-yellow); }

/* ── Panier ─────────────────────────────────── */
.ph-cart-btn { position: relative; background: var(--zz-card); border: 1px solid var(--zz-border); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--zz-white); cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
.ph-cart-badge { position: absolute; top: -4px; right: -4px; background: var(--c-urgences); color: white; font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--zz-black); }

/* ── Produit ────────────────────────────────── */
.zz-product { background: var(--zz-card); border-radius: var(--zz-r); border: 1px solid var(--zz-border); overflow: hidden; cursor: pointer; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.zz-product:active { transform: scale(.97); }
.zz-product .p-img { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 48px; }
.zz-product .p-body { padding: 10px 12px 14px; }
.zz-product .p-name  { font-size: 13px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zz-product .p-price { font-size: 14px; font-weight: 800; color: var(--zz-yellow); }
.zz-product .p-unit  { font-size: 11px; color: var(--zz-dim); }

/* ── Ticket ─────────────────────────────────── */
.zz-ticket { background: var(--zz-card); border-radius: var(--zz-r); border: 1px solid var(--zz-border); padding: 16px; margin-bottom: 10px; cursor: pointer; transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.zz-ticket:active { transform: scale(.98); }
.zz-ticket-route { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.zz-ticket-city  { font-size: 18px; font-weight: 800; }
.zz-ticket-lbl   { font-size: 11px; color: var(--zz-dim); margin-top: 1px; }
.zz-ticket-arrow { font-size: 20px; color: var(--zz-yellow); }
.zz-ticket-foot  { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--zz-border); }
.zz-ticket-price { font-size: 16px; font-weight: 800; color: var(--zz-yellow); }
.zz-ticket-time  { font-size: 11px; color: var(--zz-dim); text-align: right; }

/* ── Compte ─────────────────────────────────── */
.zz-menu-item { display: flex; align-items: center; gap: 14px; padding: 15px 14px; background: var(--zz-card); border-radius: var(--zz-r); border: 1px solid var(--zz-border); margin-bottom: 8px; cursor: pointer; text-decoration: none; color: var(--zz-white); transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.zz-menu-item:active { transform: scale(.98); }
.zz-menu-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.zz-menu-txt { flex: 1; }
.zz-menu-lbl { font-size: 15px; font-weight: 600; }
.zz-menu-sub { font-size: 12px; color: var(--zz-dim); margin-top: 1px; }

/* ── Paiement ───────────────────────────────── */

/* ── Sheet de confirmation ──────────────────────────────────────────────────
   La feuille qui porte le récapitulatif et le bouton de commande. Elle prend la
   couleur de l'écran où elle apparaît : orange sur le gaz, bleu sur l'eau…
   Chaque page la déclare en surchargeant --zz-sheet-accent sur l'élément ;
   sans surcharge, c'est l'accent du thème.

   ⚠️ La couleur ne touche QUE le liséré et une teinte de fond à 6 %. Le fond
   reste une surface neutre : les montants, les libellés secondaires et le bouton
   gardent ainsi leurs contrastes validés, en thème jour comme en thème nuit.
   ------------------------------------------------------------------------- */
.zz-confirm-sheet {
  --zz-sheet-accent: var(--zz-accent);
  position: fixed; bottom: var(--zz-nav-h); left: 0; right: 0;
  /* Repli d'abord : si color-mix n'est pas reconnu (WebView Android ancien),
     la déclaration suivante est ignorée et la feuille garde un fond plein. */
  background: var(--zz-card);
  background: color-mix(in srgb, var(--zz-sheet-accent) 6%, var(--zz-card));
  border-top: 3px solid var(--zz-sheet-accent);
  border-radius: 20px 20px 0 0;
  padding: 16px; z-index: 10000;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .28);
}

/* ── Taille colis ───────────────────────────── */
.zz-size-opt { flex: 1; padding: 12px 4px; background: var(--zz-card); border: 1.5px solid var(--zz-border); border-radius: var(--zz-r-sm); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-align: center; transition: border-color .15s; -webkit-tap-highlight-color: transparent; }
.zz-size-opt.sel { border-color: var(--zz-yellow); }
.zz-size-opt .so-icon { font-size: 24px; }
.zz-size-opt .so-lbl  { font-size: 12px; font-weight: 700; }
.zz-size-opt .so-price{ font-size: 11px; color: var(--zz-dim); }