# 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`).