# KA Tabbar v1 — barre de navigation mobile commune Groupe KA (2026-08-25)

Langage de navigation mobile commun à l'écosystème : **pilule flottante fixe
en bas d'écran**, détachée des bords (12 px + safe-area iOS), inspirée de la
barre Immo-Ka et généralisée en design system. C'est le moyen PRINCIPAL de
navigation sur mobile (≤ 760 px) ; le hamburger garde les fonctions
secondaires (stats, sources, contact, légal…).

## Fichiers canoniques (ce dossier)

| Fichier | Rôle |
|---|---|
| `ka-tabbar.css` | Styles complets — copie conforme dans `src/ka/ka-tabbar.css` de chaque app |
| `KaTabbar.tsx` | Composant React (react-router) + jeu d'icônes intégré — copie dans `src/ka/` |
| `ka-tabbar.js` | Version vanilla (`KaTabbar.mount({...})`) pour les sites sans React |
| `TABBAR-STANDARD.md` | Ce document |

## Spécifications

- **Dimensions** : onglets min-height 50 px, padding pilule 5 px, radius 18 px,
  max-width 440 px centrée, icônes 21 px stroke 1.7, labels 10 px/650.
- **Position** : `position: fixed; left/right: max(12px, env(safe-area-inset-*));
  bottom: calc(10px + env(safe-area-inset-bottom)); z-index: var(--z-bottombar, 600)`.
- **Fond** : off-white translucide + blur 14 (clair) ou `.ka-tabbar--dark`
  (encre) ; surcharger `--ktb-bg` pour un fond de marque (ex. vert profond
  fabri-ka). Pas de glassmorphism appuyé.
- **État actif** : icône = couleur signature (`--ktb-accent`), label = encre,
  trait 16×2.5 accent sous le label. Micro-interactions : pop d'icône 0.25 s,
  apparition du trait 0.22 s, press = scale 0.9 (désactivées en
  `prefers-reduced-motion`).
- **Cohabitation** : `body:has(.ka-tabbar)` reçoit un padding-bottom 84 px ;
  `body:has(.cta-sticky)` masque la pilule (le CTA de fiche prend le bas) ;
  le widget KA Agent (`.kaa-btn`) est remonté au-dessus de la pilule.
- **Onglets** : 4 (5 max). `to` (route), `href` (externe, ex. hub univers KA)
  ou `onPress` (action — ex. ouvrir/focus la recherche). Le composant ne
  devine PAS l'état actif : l'app le calcule (useLocation / routeur maison).

## Configurations par app (déployé 2026-08-25)

| App | Onglets | Accent actif | Thème | Notes |
|---|---|---|---|---|
| immo-ka | Découvrir · Carte · Taux · Profil | lime | clair | barre d'origine (base du standard), classes `.tabbar` historiques |
| auto-ka | Découvrir · Recherche · Favoris · Profil | `#ff5a2a` | clair | Recherche = focus recherche accueil ; Favoris = hub groupe-ka.com/compte |
| food-ka | Produits · Recherche · Soldes · Favoris | `#1f9d55` | clair | Soldes = /aubaines ; Favoris = hub groupe-ka.com/compte |
| fabri-ka | Accueil · Produits · Boutiques · Recherche | ambre sur vert profond | sombre (`--ktb-bg` #123f2e) | Recherche = overlay plein écran existant |
| resto-ka | Découvrir · Recherche · Villes · Favoris | `#f08c00` | clair | pas de carte dans l'app → Villes (icône pin) |
| sorti-ka | Découvrir · Recherche · Carte · Favoris | `#d6336c` | clair | vanilla ; Carte = vue résultats + bascule carte |
| 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` |

## Intégration (app React/Vite)

1. Copier `ka-tabbar.css` + `KaTabbar.tsx` dans `frontend/src/ka/`.
2. Dans `App.tsx` : composer les onglets avec `useLocation` (état actif) et
   monter `<KaTabbar tabs={…} />` après `<main>` ; retirer toute ancienne
   barre basse et ses styles.
3. Onglet Recherche : `onPress` qui navigue vers l'accueil puis focus le champ
   de recherche (`setTimeout` ~80 ms après navigation).
4. Vérifier : padding-bottom du body, footer non masqué, widget KA Agent
   dégagé, aucun doublon header/tabbar sur mobile.
5. Build + `pm2 restart` + healthcheck + commit/push (spbgit).

## Règles UX

- La pilule ne doit JAMAIS masquer un CTA, un résultat ou un bouton de filtre
  (le padding-bottom du body est là pour ça ; les feuilles/sheets passent
  au-dessus via `--z-modal`).
- Jamais plus de 5 onglets ; labels d'un seul mot ; fr-CA.
- L'identité de marque passe par `--ktb-accent` (et `--ktb-bg` sombre au
  besoin) — dimensions, spacing et animations restent IDENTIQUES partout.