/*
 * LOBAKA Zando : systeme visuel de la place de marche (08/10/2026).
 *
 * S'appuie sur les jetons de l'application (app.css : fonds, encres, lignes, themes clair et sombre)
 * et ajoute ceux de Zando. Principes : peu de bordures, la hierarchie vient de la typographie, des
 * fonds et de l'espace ; le bleu Zando porte l'action principale, le vert LOBAKA dit « fait » ou
 * « confirme » ; une information n'est jamais portee par la couleur seule.
 */

/* ---------- jetons ---------- */
body.zando {
  /* Couleurs de role */
  --z-primary: var(--c-zando);                                   /* fond des actions principales */
  --z-primary-hover: color-mix(in srgb, var(--c-zando) 86%, #000);
  --z-primary-ink: var(--zando-ink);                             /* texte et icones en bleu */
  --z-primary-soft: color-mix(in srgb, var(--c-zando) 13%, transparent);
  --z-success: var(--lime-ink); --z-success-soft: var(--lime-tint);
  --z-warning: var(--warn); --z-warning-soft: color-mix(in srgb, var(--warn) 14%, transparent);
  --z-danger: var(--bad); --z-danger-soft: color-mix(in srgb, var(--bad) 12%, transparent);
  --z-info: var(--info); --z-info-soft: color-mix(in srgb, var(--info) 14%, transparent);
  /* LOBAKA Shop : corail, a l'oppose du bleu de Zando Services ; l'encre pour les points et les traits */
  --z-shop: var(--shop-ink); --z-shop-soft: color-mix(in srgb, var(--c-shop) 16%, transparent);
  --z-neutral-soft: var(--surface-2);
  /* Surfaces : la page, un plan pose dessus, un plan en retrait */
  --z-bg: var(--bg); --z-plane: var(--surface); --z-sunken: var(--surface-2);
  --z-divider: var(--line);
  /* Espacement (base 4 px) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px; --s9: 64px;
  /* Rayons */
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;   /* relief du 12/11/2026 (avant : 6, 8 et 14 px) */
  /* Ombres : seulement pour ce qui flotte (menus, tiroirs) */
  --z-float: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px -6px var(--shadow);
  /* Mise en page */
  --z-max: 1160px; --z-header: 64px; --z-tabbar: 64px;
  --z-dur: 160ms;
}
@media (prefers-reduced-motion: reduce) { body.zando { --z-dur: 0ms; } }

/* La page prend toute la largeur ; le contenu est contenu par .z-wrap. */
body.zando { max-width: none; padding: 0; background: var(--z-bg); }
.z-wrap { width: 100%; max-width: var(--z-max); margin-inline: auto; padding-inline: max(var(--s5), env(safe-area-inset-left, 0px)) max(var(--s5), env(safe-area-inset-right, 0px)); }
@media (min-width: 1024px) { .z-wrap { padding-inline: var(--s7); } }

/* ---------- typographie ---------- */
/* Display 32 · H1 28 · H2 20 · H3 16 · corps 15 · petit 14 · etiquette 13 · legende 12 */
.zando { font-size: 15px; line-height: 1.55; }
.zando h1 { font-size: clamp(24px, 3.2vw, 28px); line-height: 1.2; letter-spacing: -.02em; font-weight: 700; }
.zando .z-display { font-size: clamp(28px, 4.4vw, 34px); line-height: 1.12; letter-spacing: -.025em; }
.zando h2 { display: block; margin: 0; font-family: var(--sans); font-size: 18px; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.zando h2::before { content: none; display: none; }
.zando h3 { font-size: 15px; line-height: 1.35; font-weight: 600; letter-spacing: 0; }
.z-small { font-size: 14px; line-height: 1.45; }
.z-label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.z-caption, .z-meta { font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.z-overline { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.z-num { font-variant-numeric: tabular-nums; }

/* Liens : encre neutre par defaut (navigation, cartes) ; un lien d'action prend le bleu Zando.
   Un lien pose dans le texte du contenu est bleu ET souligne au repos : au doigt, il n'y a pas de survol pour le reveler
   (affordances, 11/10/2026). */
.zando a { color: var(--ink); text-decoration: none; }
.zando #view a:not([class]) { color: var(--z-primary-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .zando a:not(.button):not(.z-btn):not(.brand):hover { text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; color: var(--ink); }
  .zando #view a:not([class]):hover { color: var(--z-primary-ink); text-decoration-color: currentColor; }
}
.zando .z-link, .zando .z-row a, .zando .z-card a { color: var(--z-primary-ink); font-weight: 500; }
.zando .z-card a, .zando a.z-link { display: inline-flex; align-items: center; min-height: 24px; }
.zando :focus-visible { outline: 2px solid var(--z-primary-ink); outline-offset: 2px; border-radius: var(--r-sm); }

/* ---------- boutons ---------- */
.z-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  width: auto; min-height: 40px; padding: 0 var(--s4);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  background: var(--z-sunken); color: var(--ink);
  transition: background-color var(--z-dur) ease, border-color var(--z-dur) ease, color var(--z-dur) ease, transform 120ms var(--ease-out);
}
.z-btn:active:not(:disabled) { transform: scale(.97); }
.z-btn svg { flex: none; }
.z-btn.primary, button.z-primary { background: var(--z-primary); border-color: var(--z-primary); color: var(--on-accent); }
.z-btn.secondary { background: transparent; border-color: var(--line-2); color: var(--ink); }
.z-btn.ghost { background: transparent; color: var(--ink-2); }
.z-btn.success { background: var(--z-success-soft); color: var(--z-success); }
.z-btn.lg { min-height: 48px; padding: 0 var(--s5); font-size: 15px; }
.z-btn.icon { width: 40px; padding: 0; }
.z-btn.block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .z-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 8%, var(--z-sunken)); text-decoration: none; }
  .z-btn.primary:hover:not(:disabled), button.z-primary:hover:not(:disabled) { background: var(--z-primary-hover) !important; border-color: var(--z-primary-hover); }
  .z-btn.secondary:hover:not(:disabled), .z-btn.ghost:hover:not(:disabled) { background: var(--z-sunken); }
}
/* Ecran tactile : 44 px minimum pour toute cible */
@media (pointer: coarse) { .z-btn { min-height: 44px; } .z-btn.icon { width: 44px; } }

/* ---------- etiquettes d'etat (texte toujours present) ---------- */
/* Etiquettes (statut, langue, badge) : coins a 4 px, jamais la pilule bordee des filtres (.z-seg-opt). */
.z-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; background: var(--z-sunken); color: var(--ink-2); }
.z-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.z-tag.plain::before { display: none; }
.z-tag.primary { background: var(--z-primary-soft); color: var(--z-primary-ink); }
.z-tag.success { background: var(--z-success-soft); color: var(--z-success); }
.z-tag.warning { background: var(--z-warning-soft); color: var(--z-warning); }
.z-tag.danger { background: var(--z-danger-soft); color: var(--z-danger); }
.z-tag.info { background: var(--z-info-soft); color: var(--z-info); }

/* ============================================================
   EN-TETE
   ============================================================ */
.z-skip { position: absolute; inset-inline-start: var(--s4); top: -60px; z-index: 100; padding: var(--s2) var(--s4); border-radius: var(--r-sm); background: var(--ink); color: var(--bg) !important; font-weight: 600; }
.z-skip:focus { top: var(--s2); }
/* L'en-tete colle en haut : le focus ne s'y cache pas non plus (64 px = --z-header). */
html:has(body.zando) { scroll-padding-top: calc(64px + 8px + env(safe-area-inset-top, 0px)); }
.z-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--z-bg) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--z-divider); padding-top: env(safe-area-inset-top, 0px); }
.z-header-in { display: flex; align-items: center; gap: var(--s4); height: var(--z-header); }
.z-header .brand { min-height: 40px; gap: var(--s2); }
.z-header-in > .app-back { min-height: 40px; }
.z-header .brand-logo { height: 28px; }
.z-header .brand-product { font-size: 16px; font-weight: 700; color: var(--zando-ink); padding-inline-start: var(--s2); border-inline-start: 1px solid var(--line-2); line-height: 20px; }

.z-mainnav { display: flex; align-items: center; gap: var(--s1); margin-inline-start: var(--s4); min-width: 0; }
.z-mainnav a { position: relative; display: inline-flex; align-items: center; gap: var(--s2); height: 36px; padding: 0 var(--s3); border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--ink-2) !important; text-decoration: none !important; white-space: nowrap; }
.z-mainnav a[aria-current="page"] { color: var(--ink) !important; background: var(--z-sunken); }
@media (hover: hover) and (pointer: fine) { .z-mainnav a:hover { color: var(--ink) !important; background: var(--z-sunken); } }
.z-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--z-primary); color: var(--on-accent); font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

.z-tools { display: flex; align-items: center; gap: var(--s2); margin-inline-start: auto; flex: none; }
.z-tools .theme-toggle { width: 40px; min-width: 40px; height: 40px; min-height: 40px; border-color: transparent; }
.z-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); }
.z-iconbtn .z-count { position: absolute; top: 2px; inset-inline-end: 0; min-width: 16px; height: 16px; font-size: 11px; box-shadow: 0 0 0 2px var(--z-bg); }
.z-langbtn { display: inline-flex; align-items: center; gap: 6px; width: auto; height: 40px; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-family: var(--mono); font-size: 13px; }
.z-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--z-primary-soft); color: color-mix(in srgb, var(--z-primary-ink) 78%, var(--ink)); font-size: 13px; font-weight: 700; letter-spacing: .02em; flex: none; }
.z-avatar.has-photo { overflow: hidden; background: var(--z-primary-soft); }
.z-avatar > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.z-userbtn { display: inline-flex; align-items: center; gap: 10px; width: auto; height: 48px; min-height: 48px; padding: 0 12px 0 6px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: 15px; }
.z-userbtn .z-avatar { width: 36px; height: 36px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c-lobaka); }
.z-userbtn-name { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .z-userbtn { padding: 0 4px; border: 0; background: transparent; height: 44px; min-height: 44px; } .z-userbtn-name, .z-userbtn > svg { display: none; } }
.z-menu-head .z-avatar { width: 52px; height: 52px; font-size: 19px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c-lobaka); }
@media (hover: hover) and (pointer: fine) { .z-iconbtn:hover, .z-langbtn:hover, .z-userbtn:hover, .z-tools .theme-toggle:hover { background: var(--z-sunken) !important; color: var(--ink); } }
.z-iconbtn[aria-expanded="true"], .z-langbtn[aria-expanded="true"], .z-userbtn[aria-expanded="true"] { background: var(--z-sunken); color: var(--ink); }
/* Entre 900 et 1 099 px, le menu et « Deposer une demande » ne tiennent pas ensemble : le bouton garde son icone,
   son libelle reste lu par les lecteurs d'ecran et s'affiche au survol (lot 8). */
@media (min-width: 900px) and (max-width: 1099px) {
  .z-tools .z-cta-request { width: 40px; padding: 0; }
  .z-tools .z-cta-request .z-cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Petit telephone, visiteur : logo, theme et « Se connecter » tiennent sur la ligne a 360 px (lot 8). */
@media (max-width: 400px) {
  .z-header-in, .z-tools, .z-header .brand { gap: var(--s1); }
  .z-header .brand-product { padding-inline-start: var(--s1); font-size: 15px; }
  .z-tools .theme-toggle { width: 36px; min-width: 36px; }
  .z-tools > .z-btn { padding-inline: 10px; }
}

/* Menus deroulants (profil, langue, notifications) */
.z-pop { position: relative; }
.z-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; min-width: 240px; padding: var(--s2); border: 1px solid var(--z-divider); border-radius: var(--r-md); background: var(--z-plane); box-shadow: var(--z-float); transform-origin: top right; animation: z-pop var(--z-dur) var(--ease-out); }
[dir="rtl"] .z-menu { transform-origin: top left; }
@keyframes z-pop { from { opacity: 0; transform: scale(.97) translateY(-4px); } }
.z-menu-head { display: flex; gap: var(--s3); align-items: center; padding: var(--s2) var(--s2) var(--s3); border-bottom: 1px solid var(--z-divider); margin-bottom: var(--s1); }
.z-menu-head strong { display: block; font-size: 14px; }
.z-menu [role="menuitem"], .z-menu [role="menuitemradio"], .z-menu .z-menu-item {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 40px; padding: 0 var(--s2); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 400; text-align: start; text-decoration: none !important; cursor: pointer; justify-content: flex-start;
}
.z-menu [role="menuitem"] svg, .z-menu .z-menu-item svg { color: var(--ink-3); }
.z-menu [role="menuitem"]:focus-visible { background: var(--z-sunken); outline: none; }
@media (hover: hover) and (pointer: fine) { .z-menu [role="menuitem"]:hover, .z-menu [role="menuitemradio"]:hover, .z-menu .z-menu-item:hover { background: var(--z-sunken); } }
.z-menu [aria-checked="true"]::after { content: "✓"; margin-inline-start: auto; color: var(--z-success); }
.z-menu hr { margin: var(--s1) 0; border: 0; border-top: 1px solid var(--z-divider); }
.z-menu .theme-toggle { width: 100%; min-width: 0; height: auto; min-height: 40px; border: 0; border-radius: var(--r-sm); justify-content: flex-start; padding: 0 var(--s2); gap: var(--s3); color: var(--ink); }
.z-menu .theme-toggle svg { color: var(--ink-3); }
.z-menu .theme-toggle .z-switch { margin-inline-start: auto; }
.z-switch { position: relative; width: 32px; height: 18px; border-radius: var(--r-pill); background: var(--line-2); transition: background var(--z-dur) ease; flex: none; }
.z-switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--z-plane); transition: transform var(--z-dur) var(--ease-out); }
:is([aria-pressed="true"], [aria-checked="true"]) > .z-switch { background: var(--z-success); }
:is([aria-pressed="true"], [aria-checked="true"]) > .z-switch::after { transform: translateX(14px); }
[dir="rtl"] :is([aria-pressed="true"], [aria-checked="true"]) > .z-switch::after { transform: translateX(-14px); }

/* Panneau des notifications */
.z-notifs { width: min(380px, calc(100vw - 32px)); padding: 0; }
/* Telephone : le panneau des notifications occupe la largeur de l'ecran, sous l'en-tete (accroche a la cloche, il
   sortait par la gauche). */
@media (max-width: 640px) { .z-menu.z-notifs { position: fixed; top: calc(var(--z-header) + 4px); inset-inline: 12px; width: auto; min-width: 0; transform-origin: top center; } }
.z-notifs-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--z-divider); }
.z-notifs-list { max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; padding: var(--s1); }
.z-notifs-foot { padding: var(--s2) var(--s4); border-top: 1px solid var(--z-divider); text-align: center; }

/* ============================================================
   NAVIGATION MOBILE (barre d'onglets en bas)
   ============================================================ */
.z-tabbar { display: none; }
@media (max-width: 899px) {
  .z-mainnav, .z-tools .z-cta, .z-tools .z-langbtn-desk { display: none !important; }
  .z-header-in { height: 56px; gap: var(--s2); }
  .z-header .brand-logo { height: 24px; }
  body.zando.has-tabbar { padding-bottom: calc(var(--z-tabbar) + env(safe-area-inset-bottom, 0px)); }
  /* Barre Retour / Continuer de l'achat de Koris : au-dessus de la barre d'onglets, jamais dessous. */
  .has-tabbar .z-kb-nav { bottom: calc(var(--z-tabbar) + env(safe-area-inset-bottom, 0px)); }
  /* Au clavier, l'element qui recoit le focus ne passe pas sous la barre d'onglets (WCAG 2.4.11). 64 px = --z-tabbar, porte par body. */
  html:has(body.zando.has-tabbar) { scroll-padding-bottom: calc(64px + 8px + env(safe-area-inset-bottom, 0px)); }
  .has-tabbar .z-tabbar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--z-tabbar) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--z-plane) 94%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--z-divider);
  }
  .z-tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 48px; padding: 0 1px; font-size: 12px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; color: var(--ink-3) !important; text-decoration: none !important; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
  /* Onglet courant : graisse et trait en haut, en plus de la couleur de l'icone. */
  .z-tabbar a[aria-current="page"] { color: var(--ink) !important; font-weight: 600; }
  .z-tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; inset-inline: 28%; height: 2px; border-radius: 0 0 2px 2px; background: var(--z-primary-ink); }
  .z-tabbar a[aria-current="page"] svg { color: var(--z-primary-ink); }
  .z-tabbar a .z-count { position: absolute; top: 6px; inset-inline-start: calc(50% + 6px); min-width: 16px; height: 16px; font-size: 11px; box-shadow: 0 0 0 2px var(--z-plane); }
  .z-tabbar a.z-tab-create span.z-tab-plus { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 30px; border-radius: var(--r-pill); background: var(--z-primary); color: var(--on-accent); }
  .z-tabbar a.z-tab-create svg { color: var(--on-accent) !important; }
  .z-tabbar a:active { transform: scale(.96); }
}

/* ============================================================
   PAGE
   ============================================================ */
.z-page { padding-block: var(--s6) var(--s8); }
.z-page > .err:empty { display: none; }
main#view { min-height: 60vh; }
main#view:focus { outline: none; }
.z-section { margin-top: var(--s7); }
.z-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.z-section-head .z-caption { margin: 0; }
.z-plane { background: var(--z-plane); border-radius: var(--r-lg); }
.zando .panel { border: 0; border-radius: var(--r-lg); background: var(--z-plane); padding: var(--s5); box-shadow: inset 0 0 0 1px var(--z-divider); }

/* En-tete du tableau de bord */
.z-dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4); }
.z-dash-head p { margin-top: var(--s1); color: var(--ink-2); }
.z-dash-head .z-head-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.z-banner { display: flex; gap: var(--s3); align-items: flex-start; margin-top: var(--s5); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--z-info-soft); color: var(--ink); font-size: 14px; }
.z-banner svg { flex: none; margin-top: 2px; color: var(--z-info); }
.z-banner.warning { background: var(--z-warning-soft); }
.z-banner.warning svg { color: var(--z-warning); }

/* --- A faire maintenant --- */
.z-todo { margin-top: var(--s6); }
.z-todo-list { list-style: none; margin: 0; padding: 0; background: var(--z-plane); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--z-divider); overflow: hidden; }
.z-todo-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); }
.z-todo-item + .z-todo-item { border-top: 1px solid var(--z-divider); }
.z-todo-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--z-sunken); color: var(--ink-2); }
.z-todo-icon.primary { background: var(--z-primary-soft); color: var(--z-primary-ink); }
.z-todo-icon.success { background: var(--z-success-soft); color: var(--z-success); }
.z-todo-icon.warning { background: var(--z-warning-soft); color: var(--z-warning); }
.z-todo-icon.info { background: var(--z-info-soft); color: var(--z-info); }
.z-todo-main { min-width: 0; }
.z-todo-title { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.z-todo-ctx { margin-top: 2px; font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-todo-ctx b { font-weight: 500; color: var(--ink-2); }
.z-todo-side { display: flex; align-items: center; gap: var(--s3); }
.z-todo-time { font-size: 12px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.z-todo-more { display: flex; justify-content: center; padding: var(--s2); border-top: 1px solid var(--z-divider); }
.z-allclear { display: flex; gap: var(--s3); align-items: center; padding: var(--s4); border-radius: var(--r-lg); background: var(--z-plane); box-shadow: inset 0 0 0 1px var(--z-divider); color: var(--ink-2); font-size: 14px; }
.z-allclear svg { color: var(--z-success); flex: none; }
@media (max-width: 640px) {
  .z-todo-item { grid-template-columns: 32px minmax(0, 1fr); align-items: start; padding: var(--s3); }
  .z-todo-icon { width: 32px; height: 32px; }
  .z-todo-ctx { white-space: normal; }
  .z-todo-side { grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: var(--s2); margin-top: var(--s1); }
  .z-todo-side .z-btn { width: 100%; min-height: 44px; }
  .z-todo-time { padding-inline-start: 44px; }
}

/* --- Selecteur de contexte (onglets segmentes) --- */
.z-ctx { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s7); }
.z-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--z-sunken); }
.z-seg [role="tab"] { position: relative; z-index: 1; width: auto; min-height: 36px; padding: 0 var(--s4); border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color var(--z-dur) ease; }
.z-seg [role="tab"][aria-selected="true"] { color: var(--ink); }
.z-seg-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; border-radius: 8px; background: var(--z-plane); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--z-divider); transition: transform 220ms var(--ease-out), width 220ms var(--ease-out); }
.z-seg .z-seg-short { display: none; }
.z-ctx + [role="tabpanel"] .z-kpis { margin-top: var(--s4); }
@media (pointer: coarse) { .z-seg [role="tab"] { min-height: 40px; } }
@media (max-width: 480px) {
  .z-ctx { display: block; }
  .z-seg { display: grid; width: 100%; }
  .z-seg [role="tab"] { padding: 0 var(--s2); }
  .z-seg .z-seg-long { display: none; }
  .z-seg .z-seg-short { display: inline; }
}

/* --- Indicateurs --- */
.z-kpis { display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s7); border-radius: var(--r-lg); overflow: hidden; background: var(--z-divider); box-shadow: inset 0 0 0 1px var(--z-divider); }
.z-kpi-cell { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; padding: var(--s4) var(--s5); background: var(--z-plane); color: var(--ink) !important; text-decoration: none !important; }
/* Indicateur qui mene quelque part : une fleche au repos le distingue de l'indicateur qui informe seulement (meme case). */
a.z-kpi-cell { position: relative; padding-inline-end: calc(var(--s5) + 18px); }
a.z-kpi-cell::after { content: "→"; position: absolute; top: var(--s4); inset-inline-end: var(--s4); color: var(--ink-3); }
[dir="rtl"] a.z-kpi-cell::after { content: "←"; }
@media (hover: hover) and (pointer: fine) { a.z-kpi-cell:hover { background: color-mix(in srgb, var(--z-sunken) 60%, var(--z-plane)); } a.z-kpi-cell:hover::after { color: var(--ink); } }
.z-kpi-label { font-size: 13px; color: var(--ink-3); }
.z-kpi-value { font-size: 24px; line-height: 1.15; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.z-kpi-value small { font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
/* La note se lit en entier : tronquee, elle ne se lisait qu'au survol (title), jamais au doigt. */
.z-kpi-note { font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
@media (max-width: 899px) { .z-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .z-kpi-cell { padding: var(--s3) var(--s4); } .z-kpi-value { font-size: 21px; } }

/* --- Grille du tableau de bord --- */
.z-dash-grid { display: grid; gap: var(--s7); grid-template-columns: minmax(0, 1fr); margin-top: var(--s7); }
@media (min-width: 1024px) { .z-dash-grid.two { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--s7) var(--s8); } }
.z-dash-grid > * { min-width: 0; }
.z-stack { display: grid; gap: var(--s7); align-content: start; }
@media (max-width: 899px) { .z-dash-head .z-head-actions { display: none; } }
/* Sur le tableau de bord, l'action principale est deja dans l'en-tete de la page. */
body.on-dashboard .z-tools .z-cta { display: none; }

/* --- Listes compactes (a venir, demandes, activite) --- */
.z-list-plane { list-style: none; margin: 0; padding: 0; background: var(--z-plane); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--z-divider); overflow: hidden; }
.z-list-plane > li + li { border-top: 1px solid var(--z-divider); }
.z-event { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: var(--s3) var(--s4); }
.z-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--r-md); background: var(--z-sunken); line-height: 1; }
.z-date b { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.z-date span { margin-top: 3px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.z-event-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); margin-top: 3px; font-size: 13px; color: var(--ink-3); }
.z-dotsep::before { content: "·"; margin-inline-end: var(--s2); color: var(--ink-4); }
.z-event-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.z-amount { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 640px) {
  .z-event { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s3); align-items: start; }
  .z-date { width: 44px; height: 44px; } .z-date b { font-size: 16px; }
  .z-event-title { white-space: normal; }
  .z-event-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* --- Carte d'opportunite --- */
.z-opps { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
.z-opps > * { min-width: 0; }
.z-opp { padding: var(--s4) var(--s5); border-radius: var(--r-lg); background: var(--z-plane); box-shadow: inset 0 0 0 1px var(--z-divider); }
.z-opp-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s1) var(--s3); }
.z-opp-top > div { flex: 1 1 200px; }
.z-opp h3 { font-size: 16px; }
.z-opp-client { margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.z-facts { display: flex; flex-wrap: wrap; gap: 6px var(--s4); margin: var(--s3) 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.z-facts li { display: inline-flex; align-items: center; gap: 6px; }
.z-facts svg { color: var(--ink-3); }
.z-fit { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--z-success); white-space: nowrap; }
.z-fit .z-bars { display: inline-flex; gap: 2px; }
.z-fit .z-bars i { width: 4px; height: 10px; border-radius: 1px; background: var(--line-2); }
.z-fit .z-bars i.on { background: currentColor; }
.z-opp-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.z-opp-actions .spacer { flex: 1; }
/* Le mot d'un professionnel qui se propose (demandes ouvertes, 10/11/2026). */
.z-quote { margin: var(--s3) 0 0; padding: var(--s2) var(--s3); border-inline-start: 3px solid var(--z-divider); font-size: 14px; color: var(--ink-2); white-space: pre-wrap; }
.z-confirm-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--z-sunken); font-size: 14px; }
.z-confirm-inline span { flex: 1 1 200px; }
@media (max-width: 480px) { .z-opp { padding: var(--s4); } .z-opp-actions .z-btn { flex: 1 1 auto; } .z-opp-actions .spacer { display: none; } }

/* --- Carte de demande (cote achat) avec progression --- */
.z-req { padding: var(--s4) var(--s5); }
.z-req-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.z-req-top h3 a { display: inline-block; min-height: 24px; color: var(--ink) !important; font-weight: 600; }
.z-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s1); margin: var(--s4) 0 0; padding: 0; list-style: none; }
.z-steps li { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 12px; color: var(--ink-3); }
.z-steps li::before { content: ""; height: 4px; border-radius: 2px; background: var(--line-2); }
.z-steps li.done::before { background: var(--z-success); }
.z-steps li.current::before { background: var(--z-primary); }
.z-steps li.current { color: var(--ink); font-weight: 600; }
.z-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-req-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); margin-top: var(--s4); }
.z-req-foot .z-caption { margin: 0; }
.z-sasa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--lime-tint); font-size: 14px; }
.z-sasa .z-sasa-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--c-sasa); color: var(--on-accent); font-size: 12px; font-weight: 800; flex: none; }
.z-sasa p { flex: 1 1 220px; margin: 0; }
@media (max-width: 480px) { .z-req { padding: var(--s4); } .z-steps li span { display: none; } .z-steps { gap: 3px; } }

/* --- Activite --- */
.z-activity li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); font-size: 14px; }
.z-activity li a { display: flex; align-items: center; min-height: 32px; color: var(--ink) !important; font-weight: 400; }
.z-activity .z-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.z-activity .z-dot.unread { background: var(--z-primary); box-shadow: none; }
.z-activity .z-activity-time { font-size: 12px; color: var(--ink-3); white-space: nowrap; }

/* --- Etats : vide, chargement, erreur --- */
.z-notifs-wait { padding: 12px; }
/* Ecran vide : meme composant que le reste de l'application (app.css, .empty-state), dans le bleu de Zando. */
.z-empty-state, .z-empty { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 4px 14px; padding: var(--s5); border-radius: var(--r-lg); background: var(--z-plane); box-shadow: inset 0 0 0 1px var(--z-divider); }
.z-empty-state::before, .z-empty-state::after, .z-empty::before, .z-empty::after { content: ""; grid-column: 1; grid-row: 1 / span 4; width: 44px; height: 44px; border-radius: 12px; }
.z-empty-state::before, .z-empty::before { background: var(--z-primary-soft); }
.z-empty-state::after, .z-empty::after { background: var(--z-primary-ink); -webkit-mask: var(--ico-empty) center / 22px no-repeat; mask: var(--ico-empty) center / 22px no-repeat; }
.z-empty-state > *, .z-empty > * { grid-column: 2; margin: 0; justify-self: start; }
.z-empty-state.center { text-align: start; }
.z-empty-state strong { font-size: 15px; font-weight: 600; }
.z-empty-state p { color: var(--ink-3); font-size: 14px; max-width: 52ch; }
.z-empty-state .z-btn { margin-top: var(--s2); }
.z-skel { display: block; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--z-sunken) 0%, color-mix(in srgb, var(--z-sunken) 55%, var(--z-plane)) 50%, var(--z-sunken) 100%); background-size: 200% 100%; animation: z-shimmer 1.4s ease-in-out infinite; }
@keyframes z-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .z-skel { animation: none; } .z-menu, .z-drawer[open] .z-drawer-panel { animation: none !important; } .z-seg-thumb { transition: none; } }

/* --- Tiroir (dialog) : panneau lateral sur ordinateur, feuille en bas sur telephone --- */
.z-drawer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden; }
.z-drawer::backdrop { background: rgba(10, 12, 9, .45); }
.z-drawer[open] { display: flex; justify-content: flex-end; }
.z-drawer-panel { display: flex; flex-direction: column; width: min(480px, 100%); height: 100%; background: var(--z-plane); box-shadow: var(--z-float); animation: z-slide-in 220ms var(--ease-out); }
@keyframes z-slide-in { from { transform: translateX(24px); opacity: 0; } }
.z-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); padding: var(--s5) var(--s5) var(--s3); }
.z-drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s5) var(--s5); }
.z-drawer-foot { display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap; padding: var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--z-divider); }
.z-drawer dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s4); margin: var(--s4) 0; font-size: 14px; }
.z-drawer dt { color: var(--ink-3); }
.z-drawer dd { margin: 0; }
.z-drawer .z-desc { margin-top: var(--s3); font-size: 14px; white-space: pre-wrap; color: var(--ink-2); }
.z-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); padding: var(--s7) var(--s4); }
.z-success svg { color: var(--z-success); }
@media (max-width: 640px) {
  .z-drawer[open] { align-items: flex-end; justify-content: stretch; }
  .z-drawer-panel { width: 100%; height: auto; max-height: 88dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; animation-name: z-sheet-in; }
  .z-drawer-foot .z-btn { flex: 1 1 auto; }
}
@keyframes z-sheet-in { from { transform: translateY(24px); opacity: 0; } }

/* --- Message de confirmation (toast) --- */
.z-toast { position: fixed; inset-inline: 0; bottom: var(--s6); z-index: 80; display: flex; justify-content: center; pointer-events: none; }
.z-toast > div { display: inline-flex; align-items: center; gap: var(--s2); max-width: calc(100vw - 32px); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--ink); color: var(--bg); font-size: 14px; box-shadow: var(--z-float); animation: z-pop var(--z-dur) var(--ease-out); pointer-events: auto; }
@media (max-width: 899px) { .has-tabbar .z-toast { bottom: calc(var(--z-tabbar) + var(--s3) + env(safe-area-inset-bottom, 0px)); } }

/* --- Pied de role (ajouter l'autre role) --- */
.z-alsorole { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s7); padding: var(--s4) var(--s5); border-radius: var(--r-lg); background: var(--z-sunken); font-size: 14px; color: var(--ink-2); }

/* ============================================================
   VUES EXISTANTES : harmonisation (annuaire, messages, reservations, profil...)
   ============================================================ */
.z-hero { padding: 0 0 var(--s5); }
.z-hero h1 { max-width: 24ch; }
.z-hero p { margin-top: var(--s2); color: var(--ink-2); max-width: 62ch; }
.z-note { border: 0; background: var(--z-primary-soft); border-radius: var(--r-md); padding: var(--s3) var(--s4); font-size: 14px; }
.z-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.z-card { background: var(--z-plane); border: 0; box-shadow: inset 0 0 0 1px var(--z-divider); border-radius: var(--r-lg); padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.z-card h3 { font-size: 16px; margin: 0; }
.z-card .z-meta { font-size: 13px; color: var(--ink-3); }
/* Sous une liste de profils : ce que « Vérifié par LOBAKA » veut dire, en clair. */
.z-verified-note { margin: var(--s3) 0 0; max-width: 72ch; }
.z-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.z-chip { font-size: 12px; padding: 0 8px; height: 22px; border-radius: 4px; border: 0; background: var(--z-sunken); color: var(--ink-2); white-space: nowrap; }
.z-chip.ok { background: var(--z-success-soft); color: var(--z-success); }
.z-chip.warn { background: var(--z-warning-soft); color: var(--z-warning); }
.z-chip.z { background: var(--z-primary-soft); color: var(--z-primary-ink); }
/* Paire avec ses modes : le libelle peut passer a la ligne plutot que deborder sur un telephone. */
.z-chip.z-pair { height: auto; min-height: 22px; padding-block: 2px; white-space: normal; line-height: 18px; }
/* Modes d'une paire : un groupe de cases sous les langues, son titre comme un libelle de champ. */
.z-modes { border: 0; margin: 0; padding: 0; min-width: 0; }
.z-modes legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--ink-2); }
.z-modes .z-chips { gap: 0 var(--s4); }
.z-reasons { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--ink-3); display: grid; gap: 2px; }
.z-reasons li::before { content: "✓ "; color: var(--z-success); }
.z-reasons li.neg { color: var(--z-warning); }
/* Page d'une demande : chaque partie (propositions, contacts, suggestions) se detache de la precedente. */
.h-question.z-section-h { margin-top: var(--s7); }
.z-reasons li.neg::before, .z-blockers li::before { content: "– "; color: inherit; }
.z-blockers { margin-top: var(--s1); }
.z-score { font-family: var(--mono); font-size: 12px; color: var(--z-primary-ink); }
.z-filters { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); align-items: end; }
.z-check { display: flex; gap: var(--s2); align-items: flex-start; min-height: 32px; padding-block: 4px; cursor: pointer; }
.z-filters .z-check { align-items: center; min-height: 48px; }
/* Telephone : les champs courts vont par deux (langues, puis ville et date), le bouton reste a portee de pouce. */
@media (max-width: 599px) {
  .z-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .z-filters > :nth-child(1), .z-filters > :nth-child(n+6) { grid-column: 1 / -1; }
  .z-filters input[type="date"] { padding-inline: 10px; }
}
.z-check input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; }
.z-check span { font-size: 14px; }
.z-form { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.z-form .wide { grid-column: 1 / -1; }
.zando textarea { width: 100%; min-height: 90px; background: var(--field); border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--ink); padding: 10px 14px; font: inherit; }
.zando textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px var(--z-primary-soft); }
.z-actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-top: var(--s3); }
.z-actions button, .z-actions a.button { width: auto; }
button.z-primary { font-weight: 700; width: auto; }
.zando button.small, .zando .z-small-btn { min-height: 36px; padding: 6px 12px; font-size: 14px; }
@media (pointer: coarse) { .zando button.small { min-height: 44px; } }
.z-roles { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.z-role { text-align: start; padding: var(--s5); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--z-plane); width: 100%; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.z-role strong { font-size: 17px; }
.z-role span { color: var(--ink-3); font-size: 14px; font-weight: 400; }
.z-role[aria-pressed="true"] { border-color: var(--z-primary); background: var(--z-primary-soft); }
.z-list { display: grid; gap: 0; background: var(--z-plane); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--z-divider); overflow: hidden; }
.z-row { display: flex; gap: var(--s3); justify-content: space-between; align-items: center; flex-wrap: wrap; padding: var(--s3) var(--s4); border: 0; border-radius: 0; background: transparent; color: var(--ink) !important; text-decoration: none !important; }
.z-row + .z-row { border-top: 1px solid var(--z-divider); }
/* Ligne qui ouvre une conversation ou une commande : un chevron au repos, absent des lignes qui informent. */
a.z-row::after { content: "›"; flex: none; margin-inline-start: auto; font-size: 20px; line-height: 1; color: var(--ink-3); }
[dir="rtl"] a.z-row::after { content: "‹"; }
@media (hover: hover) and (pointer: fine) { a.z-row:hover { background: var(--z-sunken); } a.z-row:hover::after { color: var(--ink); } }
.z-row .z-meta { font-size: 13px; color: var(--ink-3); }
.z-msgs { display: flex; flex-direction: column; gap: var(--s2); max-height: 55vh; overflow-y: auto; padding: 4px 2px; }
.z-msg { max-width: 78%; padding: 8px 12px; border-radius: 12px; background: var(--z-sunken); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.z-msg.mine { align-self: flex-end; background: var(--z-primary-soft); }
.z-msg.sys { align-self: center; background: none; border: 1px dashed var(--line-2); color: var(--ink-3); font-size: 13px; max-width: 92%; text-align: center; }
.z-msg time { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.z-msg-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.z-msg.sys .z-msg-foot { justify-content: center; }
.z-msg-report { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; margin: -6px -8px -6px 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-3); cursor: pointer; touch-action: manipulation; }
.z-msg-report:active { background: var(--line); }
@media (hover: hover) and (pointer: fine) { .z-msg-report:hover { color: var(--z-danger); background: var(--z-danger-soft); } }
.z-demo-banner { margin: 0 0 var(--s4); }
.z-two { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .z-two { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.z-lines { display: grid; gap: 6px; }
.z-line { display: grid; gap: 6px; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; }
.z-line input { min-height: 40px; }
.z-kpi { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.z-kpi div { border: 0; border-radius: var(--r-md); padding: var(--s3); background: var(--z-sunken); }
.z-kpi b { display: block; font-size: 22px; }
.z-kpi span { font-size: 12px; color: var(--ink-3); }
.z-stars { display: inline-flex; gap: 1px; vertical-align: -2px; color: var(--warn); }
.z-stars .on { fill: currentColor; }
.z-stars .off { color: var(--line-2); }
.z-empty { color: var(--ink-3); }

/* Pied de page */
.z-foot { margin-top: var(--s8); padding-block: var(--s5) var(--s7); font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--z-divider); }
.z-foot a { color: var(--ink-3); }
.z-foot .z-foot-common { margin-top: var(--s3); padding-top: 0; border-top: none; }
.z-foot-note { text-align: center; }
@media (max-width: 560px) { .z-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .z-msg { max-width: 92%; } }
/* Univers d'une notification : Services ou boutique de LOBAKA, toujours dit en clair. */
.z-tag.z-uni-services{background:color-mix(in srgb,var(--c-zando) 13%,transparent);color:var(--zando-ink)}
.z-tag.z-uni-shop{background:var(--z-shop-soft);color:var(--ink)}

/* Bons Koris d'une commande (lot 3) : montant, code lisible, copier, ajouter. */
.z-vouchers ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.z-vouchers li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.z-vouchers .z-code { font-size: 15px; letter-spacing: .04em; padding: 2px 8px; border: 1px dashed var(--line-2); border-radius: 4px; user-select: all; }
.z-vouchers .z-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; margin: 0; }

/* --- LOBAKA Shop (lot 4, 08/10/2026) : catalogue, fiche, panier, commande ---------------------- */
.z-shopnav { display: flex; gap: var(--s1); flex-wrap: wrap; margin: 0 0 var(--s4); padding: 4px; width: fit-content; max-width: 100%; border-radius: var(--r-pill); background: var(--z-sunken); }
.z-shopnav a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s3); border-radius: var(--r-pill); color: var(--ink-2) !important; font-size: 14px; font-weight: 500; text-decoration: none !important; touch-action: manipulation; }
.z-shopnav a[aria-current="page"] { background: var(--z-plane); color: var(--ink) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
@media (hover: hover) and (pointer: fine) { .z-shopnav a:not([aria-current="page"]):hover { color: var(--ink) !important; } }
/* Telephone : une seule ligne qui defile, plutot qu'une pastille sur deux lignes (lot 8). */
@media (max-width: 640px) {
  .z-shopnav { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .z-shopnav::-webkit-scrollbar { display: none; }
  /* Les quatre onglets tiennent sur la largeur d'un telephone ; le defilement ne sert qu'aux tres petits ecrans. */
  .z-shopnav { width: 100%; }
  .z-shopnav a { flex: 1 0 auto; justify-content: center; padding: 0 10px; white-space: nowrap; }
}
.z-filterbar { margin: var(--s4) 0 0; }
.z-chip-btn { width: auto; min-height: 36px; padding: 0 var(--s3); border-radius: var(--r-pill); border: 1px solid var(--z-divider); background: var(--z-plane); color: var(--ink-2); font-size: 14px; font-weight: 500; touch-action: manipulation; }
.z-chip-btn[aria-pressed="true"] { background: var(--z-primary-soft); border-color: transparent; color: var(--z-primary-ink); }
.z-prod { position: relative; padding-top: var(--s4); }
.z-prod-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--z-sunken); }
.z-stretch { color: var(--ink) !important; text-decoration: none !important; }
.z-stretch::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.z-stretch:focus-visible { outline: none; }
.z-stretch:focus-visible::after { outline: 2px solid var(--z-primary-ink); outline-offset: 2px; }
/* Fiche d'un professionnel dans une liste : le lien « Voir le profil → » couvre la carte ; les autres controles restent au-dessus. */
.z-pro { position: relative; }
.z-pro-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.z-pro-link:focus-visible { outline: none; }
.z-pro-link:focus-visible::after { outline: 2px solid var(--z-primary-ink); outline-offset: 2px; }
.z-pro :is(button, a:not(.z-pro-link), select, input, summary) { position: relative; z-index: 2; }
/* Une fiche qui s'ouvre se souleve un peu sous la souris ; rien au doigt. */
.z-pro, .z-prod { transition: box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .z-pro:hover, .z-prod:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2), var(--z-float); } }
.z-clamp { margin: 0; font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.z-price { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 14px; }
.z-price strong { color: var(--ink); font-size: 16px; }
.z-price-lg strong { font-size: 22px; }
.z-product { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 860px) { .z-product { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.z-product-info { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.z-product-info h1 { margin: 0; }
.z-desc { margin: 0; color: var(--ink-2); white-space: pre-line; }
.z-gallery { display: grid; gap: var(--s2); }
.z-gallery-main { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); background: var(--z-sunken); }
.z-thumbs { display: flex; gap: var(--s2); flex-wrap: wrap; }
.z-thumbs button { width: auto; min-height: 0; padding: 2px; border-radius: var(--r-md); border: 2px solid transparent; background: none; touch-action: manipulation; }
.z-thumbs button[aria-pressed="true"] { border-color: var(--z-primary-ink); }
.z-thumbs img { display: block; width: 72px; height: 54px; object-fit: cover; border-radius: calc(var(--r-md) - 2px); }
.z-variants { display: grid; gap: var(--s2); margin: 0; padding: 0; border: 0; }
.z-variants legend { margin-bottom: var(--s2); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.z-variant { display: flex; gap: var(--s2) var(--s3); align-items: center; flex-wrap: wrap; min-height: 48px; padding: var(--s2) var(--s3); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--z-divider); background: var(--z-plane); text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink); cursor: pointer; }
.z-variant:has(input:checked) { box-shadow: inset 0 0 0 2px var(--z-primary-ink); }
.z-variant:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.z-variant input { width: auto; margin: 0; }
.z-qty { max-width: 7rem; }
.z-buy { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.z-cartline { align-items: flex-start; }
.z-cartline-main { flex: 1 1 260px; min-width: 0; }
.z-cartline-side { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; }
.z-cartline-side label { font-size: 12px; }
.z-cartline-side .z-num { min-height: 40px; display: inline-flex; align-items: center; font-weight: 600; }
.z-line-problem { display: flex; gap: 6px; align-items: flex-start; margin: var(--s2) 0 0; color: var(--z-warning); font-size: 14px; }
.z-line-problem svg { flex: none; margin-top: 2px; }
.z-checkout { margin-top: var(--s5); }
.z-checkout h3 { font-size: 15px; margin: var(--s4) 0 var(--s2); }
.z-radios { display: grid; gap: var(--s2); }
.z-radio { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--z-divider); background: var(--z-plane); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--ink); cursor: pointer; }
.z-radio:has(input:checked) { box-shadow: inset 0 0 0 2px var(--z-primary-ink); }
.z-radio > input { width: auto; margin: 3px 0 0; flex: none; }
.z-radio > span { flex: 1; min-width: 0; }
.z-radio .z-btn.small { min-height: 32px; padding: 0 var(--s2); font-size: 13px; }
.z-details { margin-top: var(--s3); }
.z-details > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 500; color: var(--z-primary-ink); }
.z-address { margin-top: var(--s2); }
.z-summary { margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-md); background: var(--z-sunken); }
.z-summary h3 { margin: 0 0 var(--s2); font-size: 15px; }
.z-summary dl, .z-summary-dl { display: grid; gap: 6px; margin: 0; }
.z-summary dl > div, .z-summary-dl > div { display: flex; justify-content: space-between; gap: var(--s3); }
.z-summary dt, .z-summary-dl dt { color: var(--ink-2); }
.z-summary dd, .z-summary-dl dd { margin: 0; font-variant-numeric: tabular-nums; text-align: end; }
.z-summary-dl { margin-top: var(--s3); }
.z-order-sec { margin-top: var(--s4); }
.z-return + .z-return { border-top: 1px solid var(--z-divider); margin-top: var(--s2); padding-top: var(--s2); }
.z-return p { margin: 0; }
.z-hero.z-hero-wide h1 { max-width: none; overflow-wrap: anywhere; }

/* ---------- Lot 7 : marche a deux univers, recherche par type, favoris ---------- */
body.zando { --z-uni: var(--z-primary-ink); --z-uni-soft: var(--z-primary-soft); }
body.zando[data-universe="shop"] { --z-uni: var(--z-shop); --z-uni-soft: var(--z-shop-soft); }
/* Dans LOBAKA Shop (et sur sa carte a l'accueil du marche), les actions principales prennent le corail du Shop :
   on sait d'un coup d'oeil dans quel univers on agit. */
body.zando[data-universe="shop"], .z-uni-card-shop { --z-primary: var(--c-shop); --z-primary-hover: color-mix(in srgb, var(--c-shop) 86%, #000); --z-primary-ink: var(--shop-ink); --z-primary-soft: var(--z-shop-soft); }
.z-unibar { border-top: 1px solid var(--z-divider); box-shadow: inset 0 -2px 0 var(--z-uni); }
body.zando[data-universe="market"] .z-unibar { box-shadow: none; }
.z-unis { display: flex; gap: var(--s1); padding-block: 6px; overflow-x: auto; scrollbar-width: none; }
.z-uni-link { display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s3); border-radius: var(--r-pill); color: var(--ink-2) !important; font-size: 14px; font-weight: 500; text-decoration: none !important; white-space: nowrap; touch-action: manipulation; }
.z-uni-link i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.z-uni-link-services i { background: var(--zando-ink); }
.z-uni-link-shop i { background: var(--z-shop); }
/* Au repos, un contour fin : ce sont les deux entrees du marche, pas une legende. */
.z-uni-link:not([aria-current="true"]) { box-shadow: inset 0 0 0 1px var(--line-2); }
.z-uni-link-services[aria-current="true"] { background: var(--z-primary-soft); color: var(--ink) !important; font-weight: 600; }
.z-uni-link-shop[aria-current="true"] { background: var(--z-shop-soft); color: var(--ink) !important; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .z-uni-link:not([aria-current="true"]):hover { background: var(--z-sunken); color: var(--ink) !important; } }

.z-mk-search { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
.z-seg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; padding: 0; border: 0; min-width: 0; }
.z-seg legend { float: left; margin-inline-end: var(--s2); padding: 0; font-size: 14px; color: var(--ink-2); }
/* Accueil du marche : « Je cherche » sur sa ligne, puis les deux choix cote a cote ; au telephone etroit, l'un sous
   l'autre sur toute la largeur. Pas le fond des onglets .z-seg : ce sont des puces a choisir (refonte du 12/10/2026). */
.z-mk-search .z-seg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); width: auto; margin: 0; padding: 0; border: 0; background: none; }
.z-mk-search .z-seg legend { float: none; width: 100%; margin: 0 0 2px; }
.z-mk-search .z-seg-opt { flex: 1 1 auto; justify-content: center; padding: 0 var(--s3); }
.z-seg-opt { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: 15px; cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0; touch-action: manipulation; }
.z-seg-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.z-seg-opt:has(input:checked) { background: var(--z-primary-soft); border-color: var(--z-primary-ink); font-weight: 600; }
.z-seg-opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.z-mk-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.z-mk-row input { flex: 1 1 240px; min-width: 0; font-size: 16px; }
.z-mk-row button { width: auto; flex: none; }
.z-uni-cards { display: grid; gap: var(--s4); margin-bottom: var(--s6); }
@media (min-width: 760px) { .z-uni-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.z-uni-card { display: flex; flex-direction: column; gap: var(--s2); border-top: 3px solid var(--z-primary-ink); }
.z-uni-card-shop { border-top-color: var(--z-shop); }
.z-uni-card h2 { margin: 0; }
.z-uni-card p { margin: 0; }
.z-uni-card .z-actions { margin-top: auto; padding-top: var(--s2); }
/* Mes listes : un lien par ligne, pictogramme devant ; trois liens en ligne se coupaient au telephone (12/10/2026). */
.z-mk-mine .z-actions { display: grid; justify-items: start; gap: var(--s2); }
.z-mk-mine .z-actions a { display: inline-flex; align-items: center; gap: 4px; }
.z-save[aria-pressed="true"] { color: var(--z-uni); }
.z-save[aria-pressed="true"] svg path { fill: currentColor; }
.z-prod-save { position: relative; z-index: 2; margin-top: auto; }
.z-sp-search { display: grid; gap: var(--s1); margin: var(--s4) 0; max-width: 560px; }
.z-sp-search label { font-size: 14px; color: var(--ink-2); }
/* Les liens d'une carte sont bleus ; un bouton garde ses couleurs de bouton. */
.zando .z-uni-card a.z-btn.primary { color: var(--on-accent); }
.zando .z-uni-card a.z-btn.secondary { color: var(--ink); }
.zando .z-sp-results a { text-decoration: underline; text-underline-offset: 3px; color: var(--z-primary-ink); }
.zando .z-uni-card a.z-btn { min-height: 44px; font-weight: 600; }
.z-seg { background: none; }
/* Resultats en cours de remplacement : attenues, toujours a leur place (pas de saut de page pendant la recherche). */
[aria-busy="true"] { opacity: .55; transition: opacity 160ms ease; }

/* Koris au nombre choisi et paiement d'une commande (09/11/2026). La carte est un lien entier, avec sa fleche ;
   les coordonnees de paiement se lisent dans un encart a filet, une valeur par ligne avec son bouton « Copier ». */
.z-kb-card { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--z-primary-soft); color: var(--ink) !important; text-decoration: none !important; }
.z-kb-card > span:nth-child(2) { display: grid; gap: 2px; flex: 1; }
.z-kb-card .z-kb-go { font-weight: 600; color: var(--z-primary-ink); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .z-kb-card:hover .z-kb-go { text-decoration: underline; } }
.z-kb-n { max-width: 12rem; font-size: 18px; }
.z-paybox { margin: var(--s4) 0; padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--z-sunken); border-inline-start: 4px solid var(--c-lobaka); }
.z-paybox h3 { margin: 0 0 var(--s2); font-size: 14px; color: var(--ink-2); }
/* Champs a copier (09/11/2026) : libelle au-dessus, valeur en chasse fixe, bouton « Copier » a droite (44 px au doigt). */
.z-copy-list { margin: 0; display: grid; }
.z-copy { padding: var(--s2) 0; border-top: 1px solid var(--line); }
.z-copy:first-child { border-top: 0; padding-top: 0; }
.z-copy dt { font-size: 13px; color: var(--ink-2); margin: 0 0 2px; }
.z-copy dd { margin: 0; display: flex; align-items: center; gap: var(--s3); }
.z-copy-v { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.z-copy-btn { flex: none; min-height: 44px; min-width: 6.5rem; background: var(--surface); }
.z-copy-btn .z-copy-i { display: inline-flex; }
.z-copy-btn.is-done { color: var(--lobaka-ink); border-color: currentColor; }
.z-pay h3 { font-size: 15px; margin: var(--s4) 0 var(--s2); }
.z-proofs { list-style: none; margin: 0 0 var(--s2); padding: 0; display: grid; gap: 6px; }
.z-proofs li { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.z-proofs svg { color: var(--lobaka-ink); }
.z-proof-form { display: grid; gap: 6px; max-width: 28rem; }
.z-proof-form input[type=file] { font-size: 16px; }
.z-pay .z-actions .z-btn { white-space: normal; }
/* Achat de Koris en trois etapes : nombre, paiement, preuve (09/11/2026). */
.z-kb-step[hidden] { display: none; }
.z-kb-paynow { font-size: 16px; margin: 0 0 var(--s3); }
.z-kb .steps { margin-top: 0; }
.z-kb-nav .z-actions { justify-content: space-between; }
.z-kb-nav .hint { margin: 0 0 var(--s2); }
.z-kb-step > h2 { display: flex; gap: var(--s2); align-items: center; margin: 0 0 var(--s3); }
.z-kb-num { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--z-primary-soft); color: var(--ink); font-size: 15px; font-weight: 700; }
.z-kb-topay { font-size: 18px; }
.z-proof-form[hidden] { display: none; }
.z-footnote { margin: var(--s2) 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }

/* Arrivee sans saut (09/11/2026, audit global : CLS 0,47). La vue est dessinee par le JavaScript apres le pied de page :
   sans hauteur reservee, le pied de page apparaissait sous l'en-tete puis etait repousse. La zone garde au moins la
   hauteur de l'ecran ; le pied de page reste dessous. */
.zando #view { min-height: calc(100dvh - 140px); }

/* Barre du haut alignée sur celle des autres pages (app.css, --bar-w) : même largeur, même hauteur, pastille au même endroit. */
.z-header-in.z-wrap { box-sizing: border-box; width: var(--bar-w); max-width: none; padding-inline: 0; height: auto; min-height: 80px; padding-block: 16px; }
@media (max-width: 1023.98px) { .z-header-in.z-wrap { min-height: 80px; } }
.z-tools:has(.z-userbtn) > .theme-toggle { display: none; }
.z-header .brand-logo { height: 34px; }
@media (max-width: 1023.98px) { .z-header .brand-logo { height: 34px; } .z-userbtn { height: 48px; min-height: 48px; } }
.z-header-in > * { zoom: var(--bar-zoom); }
/* « Déposer une demande » : un « + » rond dans la barre, son nom en infobulle et pour les lecteurs d'écran (sinon
   il chevauche le menu une fois la barre agrandie). */
@media (min-width: 900px) { .z-tools .z-cta-request { width: 40px; padding: 0; } .z-tools .z-cta-request .z-cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (min-width: 900px) and (max-width: 1199.98px) { .z-header .brand-logo { height: 28px; } .z-mainnav { margin-inline-start: var(--s2); } .z-mainnav a { padding: 0 var(--s2); } }
@media (min-width: 900px) and (max-width: 1023.98px) { .z-tools .z-langbtn-desk { display: none; } .z-mainnav a { font-size: 13px; } }
/* Le logo mène au site www.lobaka.com, « Zando » à l'accueil du marché : deux liens côte à côte. */
.z-header .brand-home { display: inline-flex; align-items: center; min-height: 40px; color: inherit; text-decoration: none; }
.z-header .brand-product { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .z-header .brand-product:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* --- Lot 1 de l'audit Zando et Shop (11/11/2026) --------------------------------------------------------------------- */
/* Carte d'un professionnel : sa photo (profil LOBAKA) ou ses initiales, son nom, puis une seule etiquette d'etat
   (« Verifie par LOBAKA »). Les paires de langues se lisent en casse normale ; le reste tient sur une ligne de texte. */
.z-pro-head { display: flex; gap: var(--s3); align-items: flex-start; }
.z-pro-id { display: grid; gap: 4px; min-width: 0; flex: 1; justify-items: start; }
.z-pro-id h1, .z-pro-id h3 { margin: 0; overflow-wrap: anywhere; }
.z-pro-id h1 { font-size: 26px; line-height: 1.2; }
.z-pro-avatar { width: 48px; height: 48px; font-size: 16px; }
.z-pro-avatar.big { width: 88px; height: 88px; font-size: 28px; }
.z-pro-pairs .z-chip { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink-2); }
.z-pro-facts { margin: 0; }
.z-pro-facts .z-rating { display: inline-flex; align-items: center; gap: 4px; }
.z-pro-facts .z-new { color: var(--z-primary-ink); font-weight: 600; }
.z-pro-self { gap: var(--s3); }
/* Filtres de l'annuaire sur telephone : mot-cle et bouton visibles, le reste replie. */
.z-filter-q { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); align-items: end; }
.z-filter-q .z-primary { min-height: 48px; }
.z-filter-box { margin-top: var(--s3); }
.z-filter-box > summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.z-filter-box > .z-filters { margin-top: var(--s2); }
/* Paires de langues : liste, puis ajout par recherche (zando-pairs.js). */
.z-pairs { display: grid; gap: var(--s2); }
.z-pairs-legend { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.z-pair-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.z-pair-list > li { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 2px 0 12px; border-radius: var(--r-field, 8px); background: var(--z-sunken); font-size: 14px; }
.z-pair-list > li.z-pair-none { padding: 0; background: none; color: var(--ink-3); }
.z-pair-x { display: inline-grid; place-items: center; width: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); }
.z-pair-add { display: grid; gap: var(--s2) var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); align-items: end; }
.z-pair-add .z-check { min-height: 48px; align-items: center; }
.z-pair-err:empty { display: none; }
.z-pair-err { margin: 0; font-size: 14px; color: var(--z-danger); }
@media (hover: hover) and (pointer: fine) { .z-pair-x:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); } }
/* Profil : la photo du profil LOBAKA en tete ; mot de passe et e-mails renvoient a Mon compte. */
.z-identity { display: flex; gap: var(--s4); align-items: center; }
.z-account-line { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
/* Achat de Koris sur telephone : le nombre de Koris visible a l'arrivee. Les etapes sont courtes, la barre d'action
   suit donc le contenu au lieu de recouvrir le bas de l'ecran avec la barre d'onglets ; le chapeau, que la barre
   d'etapes repete, se retire. */
@media (max-width: 699px) {
  .z-kb-lead { display: none; }
  .has-tabbar .z-kb-nav, .z-kb-nav { position: static; box-shadow: none; }
}

/* --- Lot 2 de l'audit Zando et Shop (11/11/2026) --------------------------------------------------------------------- */
/* Activite recente : la ligne nomme sa demande, l'autre personne ou la commande, sous son libelle. */
.z-activity-main { display: grid; gap: 2px; min-width: 0; }
.z-activity li .z-activity-main a { min-height: 24px; }
.z-activity-subject { display: flex; gap: var(--s2); align-items: center; min-width: 0; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
/* Shop : vignette au pictogramme du type quand l'article n'a pas de photo ; ajout au panier depuis la carte. */
.z-prod-ph { display: grid; place-items: center; height: 96px; border-radius: var(--r-md); background: var(--z-shop-soft, var(--z-sunken)); color: var(--ink-2); }
.z-prod-ph .kori-mark, .z-prod-ph svg { width: 32px; height: 32px; }
.z-prod-save { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
.z-quick-add { min-height: 40px; }
.z-kb-balance { font-weight: 600; color: var(--ink-2); }
/* Profil : reprendre le nom du profil LOBAKA. */
.z-name-suggest, .z-pair-suggest { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: 6px 0 0; }
.z-name-suggest .z-btn, .z-pair-suggest .z-btn { min-height: 36px; padding: 0 var(--s3); font-size: 14px; }
.z-pair-suggest[hidden] { display: none; }
/* « Déposer une demande » cree une demande de prestation : rien a faire dans le Shop, ou il prenait le corail. L'onglet
   du telephone garde la couleur de Zando Services, et dit « Demande » au lieu de « Créer ». */
body.zando[data-universe="shop"] .z-tools .z-cta-request { display: none; }
body.zando[data-universe="shop"] .z-tabbar a.z-tab-create span.z-tab-plus { background: var(--c-zando); }
/* Bandeau de l'adresse a confirmer : aligne sur la colonne du contenu de Zando, et non sur la barre du haut, plus large. */
body.zando .email-gate { width: calc(min(100%, var(--z-max)) - 2 * var(--s5)); margin-top: var(--s4); }
@media (min-width: 1024px) { body.zando .email-gate { width: calc(min(100%, var(--z-max)) - 2 * var(--s7)); } }

/* Relief (12/11/2026, piste A, comme www.lobaka.com et le reste de l'application) : halo a la couleur de l'univers
   (bleu azur de Zando Services, corail du Shop) derriere le haut de l'ecran, cartes posees par une ombre legere,
   bouton principal en degrade (teinte plus claire vers la couleur pleine : le contraste du texte ne baisse jamais). */
body.zando { background: transparent; }
body.zando::before { background: radial-gradient(90% 100% at 50% 0%, color-mix(in srgb, var(--z-primary) 11%, transparent), transparent 70%); }
.z-card { box-shadow: inset 0 0 0 1px var(--z-divider), var(--shadow-card); }
.z-role, .zando .panel { box-shadow: var(--shadow-card); }
.z-btn.primary, button.z-primary { background: linear-gradient(135deg, color-mix(in srgb, var(--z-primary) 86%, white 14%), var(--z-primary) 60%); border-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 10px 22px -14px color-mix(in srgb, var(--z-primary) 75%, transparent); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .z-btn.primary, button.z-primary { transition: background-color var(--z-dur) ease, border-color var(--z-dur) ease, color var(--z-dur) ease, transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out); }
  .z-btn.primary:hover:not(:disabled), button.z-primary:hover:not(:disabled) { transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 14px 26px -14px color-mix(in srgb, var(--z-primary) 85%, transparent); }
  .z-btn.primary:active:not(:disabled), button.z-primary:active:not(:disabled) { transform: scale(.97); }
}
@media print { body.zando::before { display: none; } .z-card, .z-role, .zando .panel { box-shadow: none; } }