spb/ka-ui

1# KA Tabbar v1 — barre de navigation mobile commune Groupe KA (2026-08-25)23Langage de navigation mobile commun à l'écosystème : **pilule flottante fixe4en bas d'écran**, détachée des bords (12 px + safe-area iOS), inspirée de la5barre Immo-Ka et généralisée en design system. C'est le moyen PRINCIPAL de6navigation sur mobile (≤ 760 px) ; le hamburger garde les fonctions7secondaires (stats, sources, contact, légal…).89## Fichiers canoniques (ce dossier)1011| Fichier | Rôle |12|---|---|13| `ka-tabbar.css` | Styles complets — copie conforme dans `src/ka/ka-tabbar.css` de chaque app |14| `KaTabbar.tsx` | Composant React (react-router) + jeu d'icônes intégré — copie dans `src/ka/` |15| `ka-tabbar.js` | Version vanilla (`KaTabbar.mount({...})`) pour les sites sans React |16| `TABBAR-STANDARD.md` | Ce document |1718## Spécifications1920- **Dimensions** : onglets min-height 50 px, padding pilule 5 px, radius 18 px,21  max-width 440 px centrée, icônes 21 px stroke 1.7, labels 10 px/650.22- **Position** : `position: fixed; left/right: max(12px, env(safe-area-inset-*));23  bottom: calc(10px + env(safe-area-inset-bottom)); z-index: var(--z-bottombar, 600)`.24- **Fond** : off-white translucide + blur 14 (clair) ou `.ka-tabbar--dark`25  (encre) ; surcharger `--ktb-bg` pour un fond de marque (ex. vert profond26  fabri-ka). Pas de glassmorphism appuyé.27- **État actif** : icône = couleur signature (`--ktb-accent`), label = encre,28  trait 16×2.5 accent sous le label. Micro-interactions : pop d'icône 0.25 s,29  apparition du trait 0.22 s, press = scale 0.9 (désactivées en30  `prefers-reduced-motion`).31- **Cohabitation** : `body:has(.ka-tabbar)` reçoit un padding-bottom 84 px ;32  `body:has(.cta-sticky)` masque la pilule (le CTA de fiche prend le bas) ;33  le widget KA Agent (`.kaa-btn`) est remonté au-dessus de la pilule.34- **Onglets** : 4 (5 max). `to` (route), `href` (externe, ex. hub univers KA)35  ou `onPress` (action — ex. ouvrir/focus la recherche). Le composant ne36  devine PAS l'état actif : l'app le calcule (useLocation / routeur maison).3738## Configurations par app (déployé 2026-08-25)3940| App | Onglets | Accent actif | Thème | Notes |41|---|---|---|---|---|42| immo-ka | Découvrir · Carte · Taux · Profil | lime | clair | barre d'origine (base du standard), classes `.tabbar` historiques |43| auto-ka | Découvrir · Recherche · Favoris · Profil | `#ff5a2a` | clair | Recherche = focus recherche accueil ; Favoris = hub groupe-ka.com/compte |44| food-ka | Produits · Recherche · Soldes · Favoris | `#1f9d55` | clair | Soldes = /aubaines ; Favoris = hub groupe-ka.com/compte |45| fabri-ka | Accueil · Produits · Boutiques · Recherche | ambre sur vert profond | sombre (`--ktb-bg` #123f2e) | Recherche = overlay plein écran existant |46| resto-ka | Découvrir · Recherche · Villes · Favoris | `#f08c00` | clair | pas de carte dans l'app → Villes (icône pin) |47| sorti-ka | Découvrir · Recherche · Carte · Favoris | `#d6336c` | clair | vanilla ; Carte = vue résultats + bascule carte |48| vrai-prix | Estimer · Marché · Ventes · Méthode | `#d8372e` | clair | Next.js (variante `src/ka/KaTabbar.tsx` avec next/link) ; bilingue fr/en ; Estimer = focus recherche d'adresse (id `vp-adresse`) ; Ventes = ancre `/#ventes` |4950## Intégration (app React/Vite)51521. Copier `ka-tabbar.css` + `KaTabbar.tsx` dans `frontend/src/ka/`.532. Dans `App.tsx` : composer les onglets avec `useLocation` (état actif) et54   monter `<KaTabbar tabs={…} />` après `<main>` ; retirer toute ancienne55   barre basse et ses styles.563. Onglet Recherche : `onPress` qui navigue vers l'accueil puis focus le champ57   de recherche (`setTimeout` ~80 ms après navigation).584. Vérifier : padding-bottom du body, footer non masqué, widget KA Agent59   dégagé, aucun doublon header/tabbar sur mobile.605. Build + `pm2 restart` + healthcheck + commit/push (spbgit).6162## Règles UX6364- La pilule ne doit JAMAIS masquer un CTA, un résultat ou un bouton de filtre65  (le padding-bottom du body est là pour ça ; les feuilles/sheets passent66  au-dessus via `--z-modal`).67- Jamais plus de 5 onglets ; labels d'un seul mot ; fr-CA.68- L'identité de marque passe par `--ktb-accent` (et `--ktb-bg` sombre au69  besoin) — dimensions, spacing et animations restent IDENTIQUES partout.70