spb/ka-ui

1# ka-ui — design system commun Groupe KA23Identité « éditorial sharp » partagée par les 12 plateformes de l'écosystème4(groupe-ka, trouve-ka, lou-ka, immo-ka, vrai-prix, auto-ka, fabri-ka, food-ka,5resto-ka, sorti-ka, crea-ka, api-ka). Repo canonique : `spbgit` →6`https://git.spboucher.ai/ka-ui` (bare : `M3U96a:~/srv/git/ka-ui.git`).78## Contenu910| Fichier | Rôle |11|---|---|12| `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. |13| `accents.css` | Palette de référence : le bloc `:root` de chaque marque. |14| `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. |15| `react/KaFooter.tsx` | Footer commun (fond encre) consommant `ecosystem.json`. |16| `react/GroupeKaBadge.tsx` | Badge « Un service Groupe KA » cliquable → hub (header). |17| `sync.sh` | Redistribue les fichiers vendorés dans les 12 apps SUR LES NŒUDS. |1819## Principes2021- **Design system identique partout** : papier `#f5f3ee`, encre `#141814`,22  Space Grotesk (titres) / Inter (texte) / JetBrains Mono (étiquettes),23  bordures encre + ombres décalées, rayons 10/6 px, grain de film.24- **Un seul degré de liberté par site : l'accent** (`--accent`, `--accent-soft`,25  `--accent-deep`, `--on-accent`). Alias rétro-compat : `--lime → var(--accent)`.26- **Breakpoints communs** : 360 / 768 / 1024 / 1440 px, mobile-first, zones27  tactiles ≥ 44 px, safe-areas iOS, `overflow-x: clip` sur body.28- **Logo Groupe KA** : wordmark typographique « Groupe KA » (KA sur puce encre,29  teinté accent) — déclinaison claire (`.gk-badge`) et sombre (`.gk-badge--dark`,30  footer encre). Toujours cliquable vers https://www.groupe-ka.com. Zone de31  protection : ≥ 8 px autour du badge, jamais moins haut que 30 px.32- **Titres SEO** : « {Marque} — Un service Groupe KA ».33- **KA ID** : la connexion de chaque site passe par `/api/auth/ka/login`34  (redirection vers `groupe-ka.com/sso/authorize`) ; la **création de compte se35  fait sur le hub** (`groupe-ka.com/connexion`). Registre des clients autorisés :36  `groupe-ka/src/lib/sso.ts` (+ secrets `KA_SSO_SECRET_<CLIENT>` dans le .env du hub).3738## Modifier les infos de contact (courriels, mentions, sites)39401. Éditer `ecosystem.json` **dans ce repo** (une seule source de vérité).412. Committer/pousser, puis exécuter `./sync.sh` depuis le laptop : il rsync42   `tokens.css` + `ecosystem.json` (+ composants) dans le dossier vendoré de43   chaque app sur son nœud (`frontend/src/ka/` pour les apps Vite,44   `src/ka/` pour les apps Next).453. Rebuilder chaque app touchée (`npm run build` du frontend) et46   `pm2 restart <app>` — voir `~/Desktop/cluster-skill/KA-REMOTE-DEV.md`.4748## Ajouter un futur site à l'écosystème49501. Ajouter son entrée dans `ecosystem.json` → `sites[]` (id, wordmark, domaine,51   accent choisi dans une teinte libre de la roue, tagline) et son bloc dans52   `accents.css`.532. Dans la nouvelle app : importer `tokens.css`, coller son bloc `:root`54   d'accent, monter `KaFooter` + `GroupeKaBadge`, titre « {Marque} — Un service55   Groupe KA ».563. KA ID : ajouter le client dans `groupe-ka/src/lib/sso.ts` + secret57   `KA_SSO_SECRET_<CLIENT>` dans le .env du hub ET de l'app ; implémenter58   `/api/auth/ka/login|callback` (modèle : `creaka/auth.py` pour FastAPI,59   `vrai-prix/src/lib/ka-auth.ts` pour Next).604. `./sync.sh` ajoutera le site aux footers des autres apps au prochain rebuild61   (la liste vient d'`ecosystem.json`).6263## Règles mobiles OBLIGATOIRES (2026-08-19 — tout composant, présent et futur)6465Le socle correspondant vit dans `tokens.css` (section « SOCLE MOBILE OBLIGATOIRE »).66671. **Tap, jamais `:hover`** pour ouvrir un menu/sous-menu (le survol n'existe pas68   au doigt). Le `:hover` est réservé aux effets décoratifs, idéalement sous69   `@media (hover: hover)`. Sous-menus mobiles = accordéon ou navigation par70   niveaux, pas de cascade au survol. Fermeture toujours possible : tap71   extérieur + bouton fermer + Escape.722. **`viewport-fit=cover` requis** dans la meta viewport de CHAQUE site, sinon73   `env(safe-area-inset-*)` vaut 0 sur iPhone et toutes les safe-areas sont74   inertes : `width=device-width, initial-scale=1, viewport-fit=cover`.753. **Jamais `100vh`** pour un élément calé sur le viewport (la barre d'adresse76   mobile se replie au scroll et change la hauteur) : utiliser `var(--vh100)`,77   les classes `.h-viewport`/`.min-h-viewport`, ou le doublet78   `height:100vh; height:100dvh;` (repli navigateurs anciens).794. **`position:fixed` fiable** : aucun ancêtre avec `transform`, `filter`,80   `backdrop-filter`, `perspective` ou `will-change` (ils re-parentent le fixed81   → barres qui « suivent » le scroll). En cas de doute, monter l'élément82   directement sous `<body>` (portal).835. **Barre basse fixe** = classe `.ka-bottombar` (safe-area incluse) + classe84   `has-bottombar` sur `<body>` (+ `--bottombar-h` si ≠ 64px) pour réserver85   l'espace sous le contenu.866. **Menu/panneau/modale ouvert** = `.ka-scroll-lock` sur `<html>` (gel du87   scroll d'arrière-plan) ; liste longue = scroll interne (`.ka-menu` :88   max-height dvh + `overscroll-behavior: contain`).897. **z-index** : uniquement l'échelle `--z-*` de tokens.css (content 1, sticky90   300, header 500, bottombar 600, dropdown 700, overlay 800, modal 900,91   toast 950 ; grain de film 9999 non interactif). Aucune valeur arbitraire.928. **Zones tactiles ≥ 44×44 px** (`--touch`) pour tout item interactif de menu.939. **Champs ≥ 16 px** sur mobile (sinon zoom automatique iOS au focus) — filet94   de sécurité global dans tokens.css (`@media (hover:none) and (pointer:coarse)`),95   mais viser 16 px dans le style du composant lui-même.9610. **Un menu déroulant ne sort jamais de l'écran** : repositionnement (ouvrir97    vers le haut si pas de place) ou `.ka-menu` ancré avec `left/right` bornés ;98    sélecteur natif (`<select>`) privilégié pour les choix simples.9911. **Navigation mobile toujours joignable** : jamais de liens de nav simplement100    masqués sous 768 px sans hamburger/tab-bar de remplacement.101102## Standard header/menu (2026-08-22 — appliqué aux 13 sites + valoplex)1031041. **Header sticky opaque** : `position:sticky; top:0`, fond **OPAQUE** (`var(--paper)`105   ou la couleur de thème du site, ex. job-ka encre/brand) — **jamais de106   `backdrop-filter`/fond translucide** (piège R9 : re-parentage des `fixed`,107   et standard « header/nav opaques »). Bordure basse 1.5–2 px encre.1082. **z-index** : header `var(--z-header,500)` ; backdrop de menu109   `var(--z-overlay,800)` ; panneau/overlay de menu `var(--z-modal,900)` ;110   tabbar basse `var(--z-bottombar,600)`. Aucune valeur ad hoc.1113. **Hauteur** : 64 px desktop / 56 px mobile (cible commune).1124. **Wordmark** à gauche (chip ·Ka accent incliné −2°) + badge « Groupe KA »113   dans le header (sauf le hub lui-même), repris dans le menu mobile/footer.1145. **Items de nav desktop** : pilules `font-display` 700 ≈13.5 px, hover115   bordure encre, actif fond encre + texte accent du site.116   Exception assumée : api-ka en mono uppercase (identité technique).1176. **Menu mobile** : hamburger 44×44 + panneau/overlay avec scroll-lock via118   `.ka-scroll-lock` sur `<html>` (pas `body.style.overflow`), fermeture119   Escape + tap extérieur + navigation — OU tabbar basse. Chaque destination120   reste joignable au doigt.1217. **Particularités conservées par site** : accent/couleurs, tabbars122   (lou/resto/crea/fabri), header encre de job-ka, nav mono d'api-ka,123   recherche header (fabri), tickers, menus compte KA ID.124