# ka-ui — design system commun Groupe KA

Identité « éditorial sharp » partagée par les 12 plateformes de l'écosystème
(groupe-ka, trouve-ka, lou-ka, immo-ka, vrai-prix, auto-ka, fabri-ka, food-ka,
resto-ka, sorti-ka, crea-ka, api-ka). Repo canonique : `spbgit` →
`https://git.spboucher.ai/ka-ui` (bare : `M3U96a:~/srv/git/ka-ui.git`).

## Contenu

| Fichier | Rôle |
|---|---|
| `tokens.css` | Tokens + socle de composants communs (typo, grille, boutons, cartes, chips, champs, badge Groupe KA, footer, tableaux responsive). Seules les variables `--accent*` changent d'un site à l'autre. |
| `accents.css` | Palette de référence : le bloc `:root` de chaque marque. |
| `ecosystem.json` | **Infos centralisées** : raison sociale, courriels de contact + rôles, avertissement d'agrégateur, pages légales du hub, liste des 12 sites (domaine, wordmark, accent, tagline), liens additionnels du footer. |
| `react/KaFooter.tsx` | Footer commun (fond encre) consommant `ecosystem.json`. |
| `react/GroupeKaBadge.tsx` | Badge « Un service Groupe KA » cliquable → hub (header). |
| `sync.sh` | Redistribue les fichiers vendorés dans les 12 apps SUR LES NŒUDS. |

## Principes

- **Design system identique partout** : papier `#f5f3ee`, encre `#141814`,
  Space Grotesk (titres) / Inter (texte) / JetBrains Mono (étiquettes),
  bordures encre + ombres décalées, rayons 10/6 px, grain de film.
- **Un seul degré de liberté par site : l'accent** (`--accent`, `--accent-soft`,
  `--accent-deep`, `--on-accent`). Alias rétro-compat : `--lime → var(--accent)`.
- **Breakpoints communs** : 360 / 768 / 1024 / 1440 px, mobile-first, zones
  tactiles ≥ 44 px, safe-areas iOS, `overflow-x: clip` sur body.
- **Logo Groupe KA** : wordmark typographique « Groupe KA » (KA sur puce encre,
  teinté accent) — déclinaison claire (`.gk-badge`) et sombre (`.gk-badge--dark`,
  footer encre). Toujours cliquable vers https://www.groupe-ka.com. Zone de
  protection : ≥ 8 px autour du badge, jamais moins haut que 30 px.
- **Titres SEO** : « {Marque} — Un service Groupe KA ».
- **KA ID** : la connexion de chaque site passe par `/api/auth/ka/login`
  (redirection vers `groupe-ka.com/sso/authorize`) ; la **création de compte se
  fait sur le hub** (`groupe-ka.com/connexion`). Registre des clients autorisés :
  `groupe-ka/src/lib/sso.ts` (+ secrets `KA_SSO_SECRET_<CLIENT>` dans le .env du hub).

## Modifier les infos de contact (courriels, mentions, sites)

1. Éditer `ecosystem.json` **dans ce repo** (une seule source de vérité).
2. Committer/pousser, puis exécuter `./sync.sh` depuis le laptop : il rsync
   `tokens.css` + `ecosystem.json` (+ composants) dans le dossier vendoré de
   chaque app sur son nœud (`frontend/src/ka/` pour les apps Vite,
   `src/ka/` pour les apps Next).
3. Rebuilder chaque app touchée (`npm run build` du frontend) et
   `pm2 restart <app>` — voir `~/Desktop/cluster-skill/KA-REMOTE-DEV.md`.

## Ajouter un futur site à l'écosystème

1. Ajouter son entrée dans `ecosystem.json` → `sites[]` (id, wordmark, domaine,
   accent choisi dans une teinte libre de la roue, tagline) et son bloc dans
   `accents.css`.
2. Dans la nouvelle app : importer `tokens.css`, coller son bloc `:root`
   d'accent, monter `KaFooter` + `GroupeKaBadge`, titre « {Marque} — Un service
   Groupe KA ».
3. KA ID : ajouter le client dans `groupe-ka/src/lib/sso.ts` + secret
   `KA_SSO_SECRET_<CLIENT>` dans le .env du hub ET de l'app ; implémenter
   `/api/auth/ka/login|callback` (modèle : `creaka/auth.py` pour FastAPI,
   `vrai-prix/src/lib/ka-auth.ts` pour Next).
4. `./sync.sh` ajoutera le site aux footers des autres apps au prochain rebuild
   (la liste vient d'`ecosystem.json`).

## Règles mobiles OBLIGATOIRES (2026-08-19 — tout composant, présent et futur)

Le socle correspondant vit dans `tokens.css` (section « SOCLE MOBILE OBLIGATOIRE »).

1. **Tap, jamais `:hover`** pour ouvrir un menu/sous-menu (le survol n'existe pas
   au doigt). Le `:hover` est réservé aux effets décoratifs, idéalement sous
   `@media (hover: hover)`. Sous-menus mobiles = accordéon ou navigation par
   niveaux, pas de cascade au survol. Fermeture toujours possible : tap
   extérieur + bouton fermer + Escape.
2. **`viewport-fit=cover` requis** dans la meta viewport de CHAQUE site, sinon
   `env(safe-area-inset-*)` vaut 0 sur iPhone et toutes les safe-areas sont
   inertes : `width=device-width, initial-scale=1, viewport-fit=cover`.
3. **Jamais `100vh`** pour un élément calé sur le viewport (la barre d'adresse
   mobile se replie au scroll et change la hauteur) : utiliser `var(--vh100)`,
   les classes `.h-viewport`/`.min-h-viewport`, ou le doublet
   `height:100vh; height:100dvh;` (repli navigateurs anciens).
4. **`position:fixed` fiable** : aucun ancêtre avec `transform`, `filter`,
   `backdrop-filter`, `perspective` ou `will-change` (ils re-parentent le fixed
   → barres qui « suivent » le scroll). En cas de doute, monter l'élément
   directement sous `<body>` (portal).
5. **Barre basse fixe** = classe `.ka-bottombar` (safe-area incluse) + classe
   `has-bottombar` sur `<body>` (+ `--bottombar-h` si ≠ 64px) pour réserver
   l'espace sous le contenu.
6. **Menu/panneau/modale ouvert** = `.ka-scroll-lock` sur `<html>` (gel du
   scroll d'arrière-plan) ; liste longue = scroll interne (`.ka-menu` :
   max-height dvh + `overscroll-behavior: contain`).
7. **z-index** : uniquement l'échelle `--z-*` de tokens.css (content 1, sticky
   300, header 500, bottombar 600, dropdown 700, overlay 800, modal 900,
   toast 950 ; grain de film 9999 non interactif). Aucune valeur arbitraire.
8. **Zones tactiles ≥ 44×44 px** (`--touch`) pour tout item interactif de menu.
9. **Champs ≥ 16 px** sur mobile (sinon zoom automatique iOS au focus) — filet
   de sécurité global dans tokens.css (`@media (hover:none) and (pointer:coarse)`),
   mais viser 16 px dans le style du composant lui-même.
10. **Un menu déroulant ne sort jamais de l'écran** : repositionnement (ouvrir
    vers le haut si pas de place) ou `.ka-menu` ancré avec `left/right` bornés ;
    sélecteur natif (`<select>`) privilégié pour les choix simples.
11. **Navigation mobile toujours joignable** : jamais de liens de nav simplement
    masqués sous 768 px sans hamburger/tab-bar de remplacement.

## Standard header/menu (2026-08-22 — appliqué aux 13 sites + valoplex)

1. **Header sticky opaque** : `position:sticky; top:0`, fond **OPAQUE** (`var(--paper)`
   ou la couleur de thème du site, ex. job-ka encre/brand) — **jamais de
   `backdrop-filter`/fond translucide** (piège R9 : re-parentage des `fixed`,
   et standard « header/nav opaques »). Bordure basse 1.5–2 px encre.
2. **z-index** : header `var(--z-header,500)` ; backdrop de menu
   `var(--z-overlay,800)` ; panneau/overlay de menu `var(--z-modal,900)` ;
   tabbar basse `var(--z-bottombar,600)`. Aucune valeur ad hoc.
3. **Hauteur** : 64 px desktop / 56 px mobile (cible commune).
4. **Wordmark** à gauche (chip ·Ka accent incliné −2°) + badge « Groupe KA »
   dans le header (sauf le hub lui-même), repris dans le menu mobile/footer.
5. **Items de nav desktop** : pilules `font-display` 700 ≈13.5 px, hover
   bordure encre, actif fond encre + texte accent du site.
   Exception assumée : api-ka en mono uppercase (identité technique).
6. **Menu mobile** : hamburger 44×44 + panneau/overlay avec scroll-lock via
   `.ka-scroll-lock` sur `<html>` (pas `body.style.overflow`), fermeture
   Escape + tap extérieur + navigation — OU tabbar basse. Chaque destination
   reste joignable au doigt.
7. **Particularités conservées par site** : accent/couleurs, tabbars
   (lou/resto/crea/fabri), header encre de job-ka, nav mono d'api-ka,
   recherche header (fabri), tickers, menus compte KA ID.