/* Yaka v2 — design system (spec docs/YAKA_SPEC_V2.md §3 et §4). Composants partagés par les 4 applications.
   Préfixe « ui- » pour ne pas gêner les écrans actuels pendant la refonte (Phase 1). */

@font-face {
  font-family: "Inter";
  src: url("polices/inter-latin-wght-normal.8e433c0592f7.woff2") format("woff2-variations"),
       url("polices/inter-latin-wght-normal.8e433c0592f7.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304,
                 U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Marque */
  --yaka-orange-600: #E85D0C; --yaka-orange-500: #F26B1D; --yaka-orange-100: #FFE9DC; --yaka-orange-50: #FFF5EE;
  /* Neutres */
  --gray-1000: #000; --gray-900: #141414; --gray-700: #3D3D3D; --gray-600: #545454; --gray-500: #757575;
  --gray-300: #CBCBCB; --gray-200: #E2E2E2; --gray-100: #EEEEEE; --gray-50: #F6F6F6; --white: #FFF;
  /* Sémantiques */
  --success-600: #0E7A4F; --success-100: #E3F4EC; --warning-600: #B26A00; --warning-100: #FFF3D6;
  --danger-600: #D3302F; --danger-100: #FDE8E8; --info-600: #1F5FBF; --info-100: #E6EEFB; --rating: #141414;
  --violet-100: #EFE7FA;
  /* Accents par application */
  --app-client: var(--yaka-orange-500); --app-pro: #0E6B4E; --app-livreur: #141414; --app-support: #5B3E8C;
  /* Surfaces */
  --bg: var(--white); --bg-subtle: var(--gray-50); --surface: var(--white); --border: var(--gray-200);
  --text: var(--gray-900); --text-muted: var(--gray-600); --overlay: rgba(0, 0, 0, .5);
  /* Rayons, ombres, mouvement */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .08); --shadow-2: 0 4px 16px rgba(0, 0, 0, .12); --shadow-3: 0 8px 32px rgba(0, 0, 0, .18);
  --ease: cubic-bezier(.2, .8, .2, 1); --t-press: 120ms; --t-in: 200ms; --t-sheet: 280ms;
  --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root[data-theme="dark"] {
  --bg: #0B0B0B; --bg-subtle: #161616; --surface: #1C1C1C; --border: #2E2E2E; --text: #F2F2F2; --text-muted: #A6A6A6;
  --gray-100: #262626; --rating: #F2F2F2;
}

/* Typographie (§3.3) */
.ui-display { font: 700 2rem/2.5rem var(--police); }
.ui-h1 { font: 700 1.75rem/2.25rem var(--police); }
.ui-h2 { font: 700 1.375rem/1.75rem var(--police); }
.ui-h3 { font: 600 1.125rem/1.5rem var(--police); }
.ui-body-lg { font: 500 1rem/1.5rem var(--police); }
.ui-body { font: 400 .875rem/1.25rem var(--police); }
.ui-caption { font: 500 .75rem/1rem var(--police); color: var(--text-muted); }
.ui-num, .ui-prix { font-variant-numeric: tabular-nums; }
.ui-muted { color: var(--text-muted); }

/* Button */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--r-sm); font: 600 1rem/1 var(--police); cursor: pointer; text-decoration: none;
  transition: transform var(--t-press) var(--ease), background var(--t-press) var(--ease); -webkit-tap-highlight-color: transparent; }
.ui-btn:active { transform: scale(.98); }
.ui-btn:focus-visible { outline: 3px solid var(--yaka-orange-100); outline-offset: 2px; }
.ui-btn--primary { background: var(--yaka-orange-500); color: #fff; }
.ui-btn--primary:hover { background: var(--yaka-orange-600); }
.ui-btn--secondary { background: var(--gray-100); color: var(--text); }
.ui-btn--tertiary { background: none; color: var(--text); padding: 0 8px; }
.ui-btn--tertiary:hover { text-decoration: underline; }
.ui-btn--danger { background: var(--danger-600); color: #fff; }
.ui-btn--dark { background: var(--gray-900); color: #fff; }
.ui-btn--lg { min-height: 52px; font-size: 1.0625rem; }
.ui-btn--sm { min-height: 36px; padding: 0 12px; font-size: .875rem; }
.ui-btn--full { width: 100%; }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.ui-btn--loading { color: transparent !important; position: relative; pointer-events: none; }
.ui-btn--loading::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .5); border-top-color: #fff; animation: ui-tourne .8s linear infinite; }
.ui-btn--secondary.ui-btn--loading::after { border-color: var(--gray-300); border-top-color: var(--gray-900); }
.ui-btn__montant { margin-left: auto; font-variant-numeric: tabular-nums; }
@keyframes ui-tourne { to { transform: rotate(360deg); } }

/* StickyCTA */
.ui-sticky-cta { position: sticky; bottom: 0; z-index: 30; padding: 16px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent); }
.ui-sticky-cta .ui-btn { width: 100%; min-height: 52px; }

/* Chip / Pill */
.ui-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--gray-100); color: var(--text); font: 500 .875rem/1 var(--police); border: 0; cursor: pointer; white-space: nowrap; text-decoration: none; }
.ui-chip[aria-pressed="true"], .ui-chip.est-actif { background: var(--yaka-orange-500); color: #fff; font-weight: 700;
  box-shadow: 0 2px 8px rgba(242, 107, 29, .35); }
.ui-chip__chevron::after { content: "▾"; font-size: .75em; }

/* CategoryIcon */
.ui-cat { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; text-decoration: none; color: var(--text); font: 500 .75rem/1.1 var(--police); text-align: center; }
.ui-cat__rond { width: 56px; height: 56px; border-radius: 50%; background: var(--gray-100); display: grid; place-items: center; transition: background var(--t-in) var(--ease); }
.ui-cat__rond .ic { width: 26px; height: 26px; }
.ui-cat.est-actif .ui-cat__rond { background: var(--yaka-orange-500); color: #fff; box-shadow: 0 3px 10px rgba(242, 107, 29, .4); }
.ui-cat.est-actif { font-weight: 800; color: var(--yaka-orange-600); }
html[data-theme="dark"] .ui-cat.est-actif { color: #FF9A5C; }

/* HorizontalScroller + SectionHeader */
.ui-section-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 24px 0 12px; }
.ui-section-titre h2 { font: 700 1.375rem/1.75rem var(--police); margin: 0; }
.ui-section-titre a { color: var(--text); font: 600 .875rem/1 var(--police); text-decoration: underline; }
.ui-defile { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -16px; padding: 0 16px 4px; scroll-padding-inline: 16px; }
.ui-defile::-webkit-scrollbar { display: none; }
.ui-defile > * { scroll-snap-align: start; flex: none; }

/* StoreCard */
.ui-store { display: block; width: 100%; color: var(--text); text-decoration: none; }
.ui-defile .ui-store { width: 280px; }
.ui-store__image { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--gray-100); }
.ui-store__image img { width: 100%; height: 100%; object-fit: cover; }
.ui-store__offre { position: absolute; top: 8px; left: 8px; background: var(--success-600); color: #fff; font: 700 .75rem/1 var(--police); padding: 6px 8px; border-radius: var(--r-pill); }
.ui-store__fav { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 0; display: grid; place-items: center; box-shadow: var(--shadow-1); cursor: pointer; }
.ui-store__fav[aria-pressed="true"] { color: var(--danger-600); }
.ui-store__ligne { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.ui-store__nom { font: 600 1.0625rem/1.4 var(--police); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-store__meta { font: 500 .8125rem/1.3 var(--police); color: var(--text-muted); margin: 2px 0 0; }
.ui-store__livreurs { font: 500 .75rem/1.3 var(--police); color: var(--success-600); margin: 2px 0 0; }
.ui-store--ferme .ui-store__image img { filter: grayscale(1); opacity: .7; }
.ui-store__etat { position: absolute; inset: auto 0 0 0; background: rgba(0, 0, 0, .65); color: #fff; font: 600 .8125rem/1 var(--police); padding: 8px 10px; }

/* RatingBadge */
.ui-note { display: inline-flex; align-items: center; gap: 2px; background: var(--gray-100); border-radius: var(--r-pill); padding: 4px 8px; font: 600 .75rem/1 var(--police); color: var(--rating); white-space: nowrap; }
.ui-note--nouveau { background: var(--yaka-orange-100); color: var(--yaka-orange-600); }

/* ItemRow */
.ui-item { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.ui-item__texte { flex: 1; min-width: 0; }
.ui-item__nom { font: 600 1rem/1.4 var(--police); margin: 0; }
.ui-item__desc { font: 400 .875rem/1.3 var(--police); color: var(--text-muted); margin: 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-item__prix { font: 500 .875rem/1 var(--police); font-variant-numeric: tabular-nums; }
.ui-item__badge { display: inline-block; font: 600 .6875rem/1 var(--police); color: var(--success-600); background: var(--success-100); border-radius: var(--r-pill); padding: 4px 6px; margin-bottom: 4px; }
.ui-item__visuel { position: relative; flex: none; width: 104px; height: 104px; }
.ui-item__visuel img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); }
.ui-item__plus { position: absolute; right: 6px; bottom: 6px; min-width: 36px; height: 36px; border-radius: var(--r-pill); border: 0; background: #fff; color: var(--gray-900); box-shadow: var(--shadow-2); display: grid; place-items: center; font: 700 1rem/1 var(--police); cursor: pointer; padding: 0 10px; }
.ui-item__plus.a-quantite { background: var(--gray-900); color: #fff; }
.ui-item--sans-photo .ui-item__plus { position: static; align-self: center; }
.ui-item--indispo { opacity: .45; pointer-events: none; }

/* QuantityStepper */
.ui-stepper { display: inline-flex; align-items: center; background: var(--gray-100); border-radius: var(--r-pill); height: 40px; }
.ui-stepper button { width: 40px; height: 40px; border: 0; background: none; font: 600 1.25rem/1 var(--police); cursor: pointer; color: var(--text); display: grid; place-items: center; }
.ui-stepper output { min-width: 24px; text-align: center; font: 600 1rem/1 var(--police); font-variant-numeric: tabular-nums; }

/* BottomSheet (mobile) / Modal (desktop) */
.ui-voile { position: fixed; inset: 0; z-index: 90; background: var(--overlay); opacity: 0; transition: opacity var(--t-sheet) var(--ease); }
.ui-voile.est-ouvert { opacity: 1; }
.ui-sheet { position: fixed; z-index: 91; left: 0; right: 0; bottom: 0; max-height: 92vh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-2);
  transform: translateY(100%); transition: transform var(--t-sheet) var(--ease); }
.ui-sheet.est-ouvert { transform: none; }
.ui-sheet[hidden] { display: none; }
.ui-sheet__poignee { width: 36px; height: 4px; border-radius: 2px; background: var(--gray-300); margin: 8px auto 4px; flex: none; }
.ui-sheet__tete { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; }
.ui-sheet__tete h2 { font: 700 1.25rem/1.4 var(--police); margin: 0; }
.ui-sheet__fermer { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--gray-100); font-size: 1.25rem; cursor: pointer; }
.ui-sheet__corps { overflow-y: auto; padding: 0 16px 16px; }
.ui-sheet--demi { height: 50vh; } .ui-sheet--plein { height: 92vh; }
@media (min-width: 1024px) {
  .ui-sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 560px; max-height: 85vh; border-radius: var(--r-lg);
    transform: translate(-50%, -46%); opacity: 0; transition: transform var(--t-in) var(--ease), opacity var(--t-in) var(--ease); }
  .ui-sheet.est-ouvert { transform: translate(-50%, -50%); opacity: 1; }
  .ui-sheet__poignee { display: none; }
  .ui-sheet--demi, .ui-sheet--plein { height: auto; }
}

/* Dialog */
.ui-dialog { padding: 20px; }
.ui-dialog p { color: var(--text-muted); margin: 8px 0 20px; }
.ui-dialog__actions { display: flex; gap: 12px; } .ui-dialog__actions .ui-btn { flex: 1; }

/* Toast */
.ui-toasts { position: fixed; z-index: 95; left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.ui-toast { pointer-events: auto; background: var(--gray-900); color: #fff; border-radius: var(--r-sm); padding: 12px 16px; font: 500 .9375rem/1.3 var(--police); box-shadow: var(--shadow-2); display: flex; gap: 16px; align-items: center; max-width: 480px; animation: ui-monte var(--t-in) var(--ease); }
.ui-toast button { background: none; border: 0; color: var(--yaka-orange-100); font: 700 .9375rem/1 var(--police); cursor: pointer; }
@keyframes ui-monte { from { transform: translateY(12px); opacity: 0; } }

/* Banner */
.ui-banner { display: flex; align-items: center; gap: 12px; border-radius: var(--r-md); padding: 14px 16px; font: 600 .9375rem/1.3 var(--police); color: var(--text); text-decoration: none; }
.ui-banner--order-active { background: var(--success-600); color: #fff; }
.ui-banner--order-active::after { content: "›"; margin-left: auto; font-size: 1.25rem; }
.ui-banner__point { width: 10px; height: 10px; border-radius: 50%; background: #7CF0B8; flex: none; animation: ui-pulse 1.6s infinite; }
.ui-banner--info { background: var(--yaka-orange-100); } .ui-banner--warning { background: var(--warning-100); color: var(--warning-600); }
.ui-banner--offline { background: var(--gray-900); color: #fff; }
@keyframes ui-pulse { 50% { box-shadow: 0 0 0 6px rgba(124, 240, 184, .25); } }

/* PromoCarouselCard */
.ui-promo { width: 300px; height: 150px; border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; color: var(--gray-900); text-decoration: none; background: var(--yaka-orange-100); }
.ui-promo h3 { font: 800 1.25rem/1.2 var(--police); margin: 0; max-width: 60%; }
.ui-promo span { font: 700 .875rem/1 var(--police); text-decoration: underline; }
.ui-promo img { position: absolute; right: -10px; bottom: -10px; width: 140px; height: 140px; object-fit: cover; border-radius: 50%; }

/* StatusBadge */
.ui-statut { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font: 600 .75rem/1 var(--police); white-space: nowrap; }
.ui-statut--nouvelle, .ui-statut--attente_paiement { background: #FFF3C4; color: #7A5A00; }
.ui-statut--acceptee { background: var(--yaka-orange-100); color: var(--yaka-orange-600); }
.ui-statut--prete { background: var(--violet-100); color: var(--app-support); }
.ui-statut--en_livraison { background: var(--info-100); color: var(--info-600); }
.ui-statut--livree { background: var(--success-100); color: var(--success-600); }
.ui-statut--refusee, .ui-statut--annulee, .ui-statut--incident { background: var(--danger-100); color: var(--danger-600); }
.ui-statut--programmee { background: var(--gray-100); color: var(--gray-700); }

/* ProgressSteps */
.ui-progression { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ui-progression__seg { height: 4px; border-radius: 2px; background: var(--gray-200); overflow: hidden; position: relative; }
.ui-progression__seg.est-fait { background: var(--gray-900); }
.ui-progression__seg.est-courant { background: var(--gray-200); }
.ui-progression__seg.est-courant::after { content: ""; position: absolute; inset: 0; background: var(--gray-900); transform-origin: left; animation: ui-remplit 1.8s var(--ease) infinite; }
.ui-progression__libelles { display: none; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; font: 500 .75rem/1.2 var(--police); color: var(--text-muted); }
@media (min-width: 1024px) { .ui-progression__libelles { display: grid; } }
@keyframes ui-remplit { from { transform: scaleX(0); } to { transform: scaleX(1); opacity: .2; } }

/* CourierCard */
.ui-coursier { display: flex; align-items: center; gap: 12px; }
.ui-coursier__photo { width: 48px; height: 48px; border-radius: 50%; background: var(--gray-100); object-fit: cover; flex: none; display: grid; place-items: center; font-weight: 700; }
.ui-coursier__infos { flex: 1; min-width: 0; }
.ui-coursier__infos strong { display: block; font: 600 1rem/1.3 var(--police); }
.ui-rond { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--gray-100); display: grid; place-items: center; color: var(--text); cursor: pointer; text-decoration: none; }

/* CodeCard */
.ui-code { border-radius: var(--r-md); padding: 16px; color: #fff; text-align: center; background: var(--success-600); }
.ui-code--retrait { background: var(--gray-900); }
.ui-code__libelle { font: 600 .9375rem/1.3 var(--police); margin: 0; }
.ui-code__chiffres { font: 700 2.5rem/3rem var(--police); letter-spacing: .3em; margin: 4px 0; font-variant-numeric: tabular-nums; padding-left: .3em; }
.ui-code__aide { font: 400 .8125rem/1.3 var(--police); opacity: .9; margin: 0; }
.ui-code--masque .ui-code__chiffres { filter: blur(8px); user-select: none; }

/* EmptyState */
.ui-vide { text-align: center; padding: 40px 16px; }
.ui-vide__ico { width: 72px; height: 72px; border-radius: 50%; background: var(--gray-100); display: grid; place-items: center; margin: 0 auto 16px; }
.ui-vide__ico .ic { width: 32px; height: 32px; }
.ui-vide h3 { font: 700 1.125rem/1.4 var(--police); margin: 0 0 6px; } .ui-vide p { color: var(--text-muted); margin: 0 0 16px; }

/* Skeleton */
.ui-squelette { background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%); background-size: 400% 100%; border-radius: var(--r-sm); animation: ui-reflet 1.4s ease infinite; }
.ui-squelette--image { aspect-ratio: 16 / 9; border-radius: var(--r-md); }
.ui-squelette--ligne { height: 14px; margin-top: 8px; } .ui-squelette--court { width: 60%; }
@keyframes ui-reflet { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* PriceRow */
.ui-prix-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font: 400 .9375rem/1.4 var(--police); }
.ui-prix-ligne span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-prix-ligne--total { font: 700 1.125rem/1.4 var(--police); border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; }
.ui-prix-ligne--remise span:last-child { color: var(--success-600); }
.ui-prix-ligne--offert span:last-child s { color: var(--text-muted); margin-right: 6px; }

/* RadioCard */
.ui-radio-carte { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: var(--r-md); cursor: pointer; margin-bottom: 8px; }
.ui-radio-carte:has(input:checked) { border: 2px solid var(--gray-900); padding: 13.5px 15.5px; }
.ui-radio-carte input { accent-color: var(--gray-900); width: 20px; height: 20px; }
.ui-radio-carte__texte { flex: 1; } .ui-radio-carte__texte strong { display: block; font: 600 1rem/1.3 var(--police); }
.ui-radio-carte__texte small { color: var(--text-muted); font: 400 .8125rem/1.3 var(--police); }
.ui-radio-carte__montant { font: 600 .9375rem/1 var(--police); font-variant-numeric: tabular-nums; }

/* TipSelector */
.ui-pourboire { display: flex; gap: 8px; flex-wrap: wrap; }
.ui-pourboire label { position: relative; }
.ui-pourboire input { position: absolute; opacity: 0; }
.ui-pourboire span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--gray-100); font: 600 .9375rem/1 var(--police); cursor: pointer; }
.ui-pourboire input:checked + span { background: var(--gray-900); color: #fff; }
.ui-pourboire input:focus-visible + span { outline: 3px solid var(--yaka-orange-100); }

/* OptionGroup */
.ui-options { padding: 16px 0; border-bottom: 8px solid var(--gray-50); }
.ui-options__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ui-options__tete h3 { font: 700 1.0625rem/1.3 var(--police); margin: 0; }
.ui-options__tete small { color: var(--text-muted); font: 400 .8125rem/1.3 var(--police); }
.ui-options__badge { font: 600 .75rem/1 var(--police); background: var(--gray-100); border-radius: var(--r-pill); padding: 6px 8px; white-space: nowrap; }
.ui-options.est-rempli .ui-options__badge { background: var(--success-100); color: var(--success-600); }
.ui-options.est-manquant { animation: ui-clignote .9s 2; }
.ui-options label { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.ui-options label:last-child { border-bottom: 0; }
.ui-options input { width: 20px; height: 20px; accent-color: var(--gray-900); }
.ui-options label span { flex: 1; } .ui-options label em { font-style: normal; color: var(--text-muted); font-variant-numeric: tabular-nums; }
@keyframes ui-clignote { 50% { background: var(--danger-100); } }

/* ListRow */
.ui-liste-ligne { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.ui-liste-ligne .ic { width: 22px; height: 22px; }
.ui-liste-ligne span { flex: 1; } .ui-liste-ligne small { display: block; color: var(--text-muted); }
.ui-liste-ligne::after { content: "›"; color: var(--gray-500); font-size: 1.25rem; }

/* SearchBar, AddressPill, ModeToggle */
.ui-recherche { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: var(--r-pill); background: var(--gray-100); }
.ui-recherche input { flex: 1; border: 0; background: none; font: 500 1rem/1 var(--police); color: var(--text); outline: none; min-width: 0; }
.ui-adresse { display: inline-flex; flex-direction: column; background: none; border: 0; text-align: left; cursor: pointer; color: var(--text); padding: 0; }
.ui-adresse small { font: 500 .75rem/1.2 var(--police); color: var(--text-muted); }
.ui-adresse strong { font: 700 1rem/1.3 var(--police); } .ui-adresse strong::after { content: " ▾"; font-size: .75em; }
.ui-mode { display: inline-flex; background: var(--gray-100); border-radius: var(--r-pill); padding: 4px; }
.ui-mode button { border: 0; background: none; height: 36px; padding: 0 16px; border-radius: var(--r-pill); font: 600 .875rem/1 var(--police); cursor: pointer; color: var(--text); }
.ui-mode button[aria-pressed="true"] { background: var(--gray-900); color: #fff; }
@media (min-width: 1024px) { .ui-mode button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: var(--shadow-1); } }

/* Respect des préférences de mouvement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.ui-pourboire__autre { margin-top: 8px; width: 100%; max-width: 200px; font: 600 1rem var(--police); padding: 10px 12px; border: 1px solid var(--gray-300); border-radius: var(--r-sm); }
.ui-pourboire-apres { display: grid; gap: 12px; text-align: left; }

.ui-promo-saisie { display: flex; gap: 8px; }
.ui-promo-saisie input { flex: 1; min-width: 0; font: 600 1rem var(--police); text-transform: uppercase; padding: 10px 12px; border: 1px solid var(--gray-300); border-radius: var(--r-sm); }
.ui-promo-auto { display: block; margin: 0 0 8px; color: var(--success-600); font-size: .875rem; }
.ui-promo-ok { color: var(--success-600); font-weight: 600; }

/* Carrousel de l'accueil (bannières gérées dans Gestion) */
.ui-carrousel { margin: 16px 0 4px; }
.ui-carrousel__piste { scroll-snap-type: x mandatory; gap: 12px; }
.ui-banniere { position: relative; flex: none; width: min(86vw, 420px); aspect-ratio: 2 / 1; border-radius: var(--r-lg); overflow: hidden;
  scroll-snap-align: start; display: flex; align-items: flex-end; color: #fff; text-decoration: none; background: var(--yaka-orange-500); }
.ui-banniere--vert { background: var(--success-600); } .ui-banniere--noir { background: var(--gray-900); } .ui-banniere--violet { background: #5B3E8C; }
.ui-banniere img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ui-banniere img + .ui-banniere__texte { background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.ui-banniere__texte { position: relative; width: 100%; padding: 28px 16px 14px; display: grid; gap: 2px; }
.ui-banniere__texte strong { font: 800 1.25rem/1.2 var(--police); }
.ui-banniere__texte small { font: 500 .875rem/1.3 var(--police); opacity: .92; }

.ui-creneaux { margin: 4px 0 8px; }
.ui-creneaux select { width: 100%; font: 600 1rem var(--police); padding: 12px; border: 1px solid var(--gray-300); border-radius: var(--r-sm); background: var(--white); }
.ui-statut--programmee, .statut-pastille.statut-programmee { background: var(--gray-100); color: var(--gray-700); }
.ui-checkout__colonnes > * { min-width: 0; }
.ui-creneaux select { max-width: 100%; min-width: 0; box-sizing: border-box; }
.ui-checkout__carte > * { min-width: 0; }
.ui-promo-saisie input { width: 0; }

.ui-checkout > .ui-mode { margin-bottom: 12px; }
.ui-mode a { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--r-pill); font: 600 .875rem/1 var(--police); text-decoration: none; color: var(--text); }
.ui-mode a.est-actif { background: var(--gray-900); color: #fff; }

/* Discussion client ↔ livreur */
.ui-suivi__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ui-suivi__contact .ui-btn { position: relative; }
.ui-chat .ui-sheet__corps { display: flex; flex-direction: column; gap: 10px; min-height: calc(100dvh - 140px); }
.ui-chat__fil { max-height: none !important; }
.ui-chat__fil { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 0; max-height: 55vh; }
.ui-chat__bulle { align-self: flex-start; max-width: 80%; margin: 0; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: var(--gray-100); font: 400 .9375rem/1.35 var(--police); overflow-wrap: anywhere; }
.ui-chat__bulle.moi { align-self: flex-end; background: var(--gray-900); color: #fff; border-radius: 16px 16px 4px 16px; }
.ui-chat__bulle small { display: block; font-size: .6875rem; opacity: .7; margin-top: 2px; text-align: right; }
.ui-chat__vide { text-align: center; margin: auto 0; }
.ui-chat__rapides { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ui-chat__rapides .ui-chip { flex: none; }
.ui-chat__saisie { display: flex; gap: 8px; }
.ui-chat__saisie input { flex: 1; width: 0; font: inherit; padding: 12px; border: 1px solid var(--gray-300); border-radius: var(--r-pill); }
.ui-chat__saisie .ui-btn { border-radius: 50%; width: 48px; padding: 0; }

/* Panier : suggestions et autres paniers */
.ui-panier__suggestions { margin: 20px 0 8px; }
.ui-suggestion { position: relative; flex: none; width: 132px; display: grid; gap: 2px; }
.ui-suggestion__image { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--gray-100); font-weight: 700; color: var(--text-muted); text-decoration: none; }
.ui-suggestion__image img { width: 100%; height: 100%; object-fit: cover; }
.ui-suggestion strong { font: 600 .875rem/1.25 var(--police); }
.ui-suggestion small { color: var(--text-muted); }
.ui-suggestion form { position: absolute; top: 92px; right: 6px; margin: 0; }
.ui-suggestion__ajouter { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--white); box-shadow: var(--shadow-2); display: grid; place-items: center; cursor: pointer; }
.ui-panier__autres { margin-top: 24px; display: grid; gap: 8px; }
.ui-panier__autre { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); margin: 0; }
.ui-panier__autre small { display: block; color: var(--text-muted); }

.ui-coursier__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Crédits Yaka */
.ui-credits-page { display: grid; gap: 14px; max-width: 640px; }
.ui-credits-solde { background: var(--gray-900); color: #fff; border-radius: var(--r-lg); padding: 18px; display: grid; gap: 4px; }
.ui-credits-solde strong { font: 800 2rem/1.1 var(--police); }
.ui-credits-solde small, .ui-credits-solde .ui-caption { color: rgba(255,255,255,.75); }
.ui-code-parrain { font: 800 1.75rem/1 var(--police); letter-spacing: .12em; text-align: center; padding: 14px; border: 2px dashed var(--gray-300); border-radius: var(--r-md); }
.ui-parrain-saisie { margin-top: 10px; }
.ui-credits input { accent-color: var(--yaka-orange-500); }

/* Yaka+ */
.ui-plus { max-width: 560px; display: grid; gap: 14px; }
.ui-plus__logo { font: 900 2.5rem/1 var(--police); margin: 8px 0 0; letter-spacing: -.02em; }
.ui-plus__logo span { color: var(--yaka-orange-500); }
.ui-plus__avantages { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ui-plus__avantages li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); }
.ui-plus__form { display: grid; gap: 10px; }

/* Commande de groupe */
.ui-groupe { max-width: 720px; display: grid; gap: 14px; }
.ui-groupe__personne { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; }
.ui-groupe__ligne { display: flex; justify-content: space-between; align-items: center; font-size: .9375rem; }
.ui-groupe__ligne form { margin: 0; }
.ui-groupe__menu { display: grid; gap: 8px; }
.ui-groupe__produit { position: relative; display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ui-groupe__produit img, .ui-groupe__vignette { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; background: var(--gray-100); display: grid; place-items: center; font-weight: 700; }
.ui-groupe__produit small { display: block; color: var(--text-muted); }
.ui-groupe__produit .ui-item__plus { position: static; }
.ui-groupe__lancer { margin: 0; display: inline; }
.ui-store, .ui-store__ligne > :first-child { min-width: 0; }

.ui-accueil__ville { margin: 12px 0 0; }
.ui-liste-villes .est-actif { font-weight: 700; }

/* Langues */
.ui-tiroir__langues { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 8px; }
.ui-tiroir__langues a { padding: 6px 10px; border-radius: var(--r-pill); background: var(--gray-100); color: var(--text); text-decoration: none; font: 600 .8125rem/1 var(--police); }
.ui-tiroir__langues a.est-actif { background: var(--gray-900); color: #fff; }
.ui-tiroir__langues small, .ui-langues small { font-weight: 500; opacity: .7; }
.pied-langues { flex-basis: 100%; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pied-langues a[aria-current] { font-weight: 700; text-decoration: none; }
.ui-langues { display: flex; flex-wrap: wrap; gap: 6px; }