/* ==========================================================================
   FAB — App component kit (web)
   Réplique FIDÈLE du design in-app (styles/theme.ts + components/dev/QuoteCard
   + FilterChip). Aucun élément de design ne sort de l'app : mêmes tokens,
   mêmes composants (search pill, filter chips, quote/provider card, badges).
   Police Outfit, fond #F8F9FA, bleu électrique #0066FF, pastels AddressSheet.
   Utilisé par la Galerie voyage et les fiches provider.
   ========================================================================== */

:root {
  /* theme.ts — exact */
  --a-primary: #0066FF;
  --a-primary-light: #3399FF;
  --a-primary-dark: #0052CC;
  --a-secondary: #7B2FF7;
  --a-accent: #FF0066;
  --a-neon: #00F5FF;
  --a-bg: #F8F9FA;            /* app background */
  --a-card: #F8F9FA;          /* quoteItem bg */
  --a-surface: #FFFFFF;       /* sheet / white cards */
  --a-border: rgba(0,0,0,0.08);
  --a-border-soft: rgba(0,0,0,0.04);
  --a-text: #1A1A1A;
  --a-ink: #1C1C1E;           /* offerType */
  --a-text-2: #6B7280;
  --a-text-3: #9CA3AF;
  --a-gray: #8E8E93;          /* providerLabel */
  --a-success: #34C759;
  --a-green: #10B981;         /* liquid-glass cheapest accent */
  --a-warning: #FF9500;
  --a-error: #FF3B30;
  /* AddressSheet pastels — exact */
  --a-promo-bg: #EFF6FF;
  --a-promo-text: #2563EB;
  --a-fav-home: #FFEBEE;
  --a-fav-work: #E1F5FE;
  --a-fav-other: #FFF8E1;
  --a-searchbar: #F5F5F5;
  /* radii (theme.borderRadius) */
  --a-r-sm: 8px; --a-r-md: 12px; --a-r-lg: 16px; --a-r-xl: 24px; --a-r-round: 999px;
  --a-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* provider brand colours — EXACT from config/providers.ts */
.pv-uber   { --pc:#000000; } .pv-bolt   { --pc:#34D186; } .pv-heetch { --pc:#FF1493; }
.pv-freenow{ --pc:#FF5A00; } .pv-g7     { --pc:#E31F26; } .pv-lecab  { --pc:#0066FF; }
.pv-comin  { --pc:#7C3AED; } .pv-cabify { --pc:#7426EF; } .pv-lyft   { --pc:#FF00BF; }
.pv-grab   { --pc:#00B14F; } .pv-waymo  { --pc:#00A3E0; } .pv-careem { --pc:#00A94F; }
.pv-didi   { --pc:#FF7A45; } .pv-ola    { --pc:#B4E000; } .pv-indrive{ --pc:#00C853; }

/* ---- App surface / phone shell for the gallery ---- */
.app-kit { font-family: var(--a-font); color: var(--a-text); }
.app-shell {
  background: var(--a-surface);
  border-radius: var(--a-r-xl);
  box-shadow: 0 2px 6px rgba(16,24,60,.05), 0 30px 70px -30px rgba(16,24,60,.28);
  border: 1px solid var(--a-border-soft);
  overflow: hidden;
}
.app-map {
  position: relative; height: 190px;
  background:
    linear-gradient(180deg, rgba(248,249,250,0) 55%, #F8F9FA 100%),
    repeating-linear-gradient(58deg, #eef0f2 0 22px, #e9ebee 22px 24px),
    repeating-linear-gradient(-32deg, #eef0f2 0 30px, #eaecef 30px 32px),
    #edeff2;
}
.app-map .route { position:absolute; inset:0; }
.app-map .pin { position:absolute; width:20px; height:20px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 3px 8px rgba(0,0,0,.25); }
.app-map .pin.a { background:var(--a-primary); top:44%; left:24%; }
.app-map .pin.b { background:#111; top:60%; left:70%; }

/* ---- Search pill (app top bar) ---- */
.search-pill {
  display:flex; align-items:center; gap:10px;
  background:#fff; border-radius:var(--a-r-round);
  padding:8px 8px 8px 8px; box-shadow:0 6px 20px -8px rgba(16,24,60,.28), 0 1px 2px rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.04);
}
.search-pill .sp-ico { width:40px; height:40px; border-radius:50%; background:var(--a-searchbar); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--a-text); }
.search-pill input {
  flex:1; border:none; outline:none; background:transparent;
  font-family:var(--a-font); font-size:17px; font-weight:500; color:var(--a-text); letter-spacing:-.2px; min-width:0;
}
.search-pill input::placeholder { color:var(--a-text-3); font-weight:500; }
.search-pill .sp-go { width:44px; height:44px; border-radius:50%; background:var(--a-primary); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:none; box-shadow:0 8px 18px -6px rgba(0,102,255,.5); }

/* quick city chips */
.city-chips { display:flex; flex-wrap:wrap; gap:8px; }
.city-chip {
  font-family:var(--a-font); font-size:14px; font-weight:600; letter-spacing:-.2px;
  padding:8px 14px; border-radius:var(--a-r-round); background:#fff; color:var(--a-text);
  border:1px solid var(--a-border); box-shadow:0 1px 2px rgba(0,0,0,.04); cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s;
}
.city-chip:hover { transform:translateY(-1px); box-shadow:0 6px 14px -8px rgba(16,24,60,.35); }
.city-chip.active { background:var(--a-primary); color:#fff; border-color:transparent; }

/* ---- Sheet header / promo banner ---- */
.sheet { padding:16px; }
.sheet-grab { width:44px; height:5px; border-radius:3px; background:#E5E7EB; margin:2px auto 14px; }
.promo-banner {
  display:flex; align-items:center; gap:10px; background:var(--a-promo-bg); color:var(--a-promo-text);
  border-radius:var(--a-r-md); padding:12px 14px; font-weight:600; font-size:14.5px; margin-bottom:14px;
}
.promo-banner svg { width:18px; height:18px; flex-shrink:0; }

/* ---- Filter chips (FilterChip.tsx: radius 18, pad 14/8, border 1) ---- */
.filter-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.f-chip {
  font-family:var(--a-font); font-size:14px; letter-spacing:-.2px; font-weight:500;
  border-radius:18px; padding:8px 14px; border:1px solid var(--a-border); background:#fff; color:var(--a-text-2); cursor:pointer; transition:all .18s;
}
.f-chip.active { font-weight:600; background:#FCE9BE; border-color:#F3D48A; color:#8A6412; } /* "Tous" amber */
.f-chip.active.c-blue { background:var(--a-fav-work); border-color:transparent; color:#0369a1; }
.f-chip:hover { border-color:var(--a-border); }

/* sort row */
.sort-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.sort-pill { display:inline-flex; align-items:center; gap:6px; font-family:var(--a-font); font-size:14px; font-weight:600; color:var(--a-text-3); padding:8px 14px; border-radius:var(--a-r-round); }
.sort-pill.active { color:var(--a-text); background:#fff; box-shadow:0 2px 8px -2px rgba(16,24,60,.2); border:1px solid rgba(0,0,0,.04); }
.sort-row .spacer { flex:1; }
.round-ico { width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--a-border); display:flex; align-items:center; justify-content:center; color:var(--a-text-2); }

/* ---- Quote / provider card (QuoteCard.tsx exact) ---- */
.q-card {
  display:flex; align-items:center; gap:6px; text-align:left; width:100%;
  background:var(--a-card); border-radius:var(--a-r-lg); padding:12px; margin-bottom:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.06); border:1px solid transparent; cursor:pointer;
  transition:transform .16s cubic-bezier(.16,1,.3,1), box-shadow .2s, background .2s;
}
.q-card:hover { transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(16,24,60,.28); background:#fff; }
.q-card.cheapest { background:rgba(16,185,129,.05); box-shadow:0 0 0 1px rgba(16,185,129,.14), 0 8px 20px -12px rgba(16,185,129,.4); }
.q-veh { width:64px; height:56px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; position:relative;
  background:radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--pc) 22%, #fff) 0%, color-mix(in srgb, var(--pc) 10%, #fff) 100%); }
.q-veh .mono { font-family:var(--a-font); font-weight:800; font-size:22px; color:var(--pc); }
.q-veh.dark { background:radial-gradient(120% 120% at 30% 20%, #3a3a3c 0%, #1a1a1c 100%); }
.q-veh.dark .mono { color:#fff; }
.q-info { flex:1; min-width:0; padding:0 8px; }
.q-title { display:flex; align-items:center; gap:6px; margin-bottom:4px; flex-wrap:wrap; }
.q-prov { font-size:13px; color:var(--a-gray); font-weight:500; flex-shrink:0; }
.q-sep { font-size:13px; color:var(--a-text-3); }
.q-type { font-size:15px; color:var(--a-ink); font-weight:700; }
.q-detail { font-size:11.5px; color:var(--a-text-2); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.q-detail .d-sep { color:var(--a-text-3); }
.q-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.q-cta { font-size:13px; font-weight:600; color:var(--a-primary); }
.q-go { width:36px; height:36px; border-radius:50%; background:var(--a-green); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 6px 14px -6px rgba(16,185,129,.6); }
.q-chevron { color:var(--a-text-3); width:20px; height:20px; }

/* badges (exact app language) */
.tag-row { display:flex; align-items:center; gap:6px; margin-bottom:5px; flex-wrap:wrap; }
.tag-cheap { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:var(--a-green); background:rgba(16,185,129,.1); padding:3px 9px; border-radius:var(--a-r-round); }
.tag-promo { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:var(--a-promo-text); background:var(--a-promo-bg); padding:3px 9px; border-radius:var(--a-r-round); }
.tag-soon { font-size:11px; font-weight:700; color:var(--a-text-3); background:#F1F2F4; padding:3px 9px; border-radius:var(--a-r-round); }
.mini-cat { font-size:11px; font-weight:600; color:var(--a-text-2); background:#fff; border:1px solid var(--a-border); padding:2px 8px; border-radius:var(--a-r-round); }

/* provider bubble (for hero/inline) */
.pv-dot { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-family:var(--a-font); font-weight:800; font-size:18px; color:#fff; background:var(--pc); }

/* app-native button (pill) */
.a-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--a-font); font-weight:600; font-size:16px; padding:15px 24px; border-radius:var(--a-r-round); transition:transform .16s, box-shadow .2s, background .2s; }
.a-btn-primary { background:var(--a-primary); color:#fff; box-shadow:0 8px 20px -6px rgba(0,102,255,.5); }
.a-btn-primary:hover { background:var(--a-primary-dark); transform:translateY(-2px); }

/* empty state */
.gal-empty { text-align:center; padding:30px 16px; color:var(--a-text-3); }