# Lou-Ka — Kit Figma du frontend

Fichier Figma **généré depuis le code source** du frontend Lou-Ka déployé sur le cluster
(M4M64a : `~/apps/lou-ka`, www.lou-ka.com) : design system, composants, écrans desktop 1440
et mobile 390, plus les captures du site en production.

Figma ne permet pas de créer un `.fig` hors de l'application : le kit prend donc la forme d'un
**plugin de développement** qui construit le fichier en une exécution (≈ 20 s), à partir des
jetons de `frontend/src/ka/tokens.css` et des styles de `frontend/src/styles.css`.

## Importer dans Figma (3 minutes)

1. Dans Figma (application de bureau), créer un fichier vide **Lou-Ka — Design system**.
2. Menu **Plugins → Development → Import plugin from manifest…** et choisir
   `plugin/manifest.json` de ce dossier.
3. **Plugins → Development → Lou-Ka — Générateur de fichier Figma**. Le plugin charge les
   polices Google **Space Grotesk**, **Inter** et **JetBrains Mono** (disponibles dans Figma sans
   installation), puis crée les 6 pages et se ferme.
4. Facultatif : glisser les captures pleine page de `references/full/` sur la page
   « ⑤ Références live » (Figma importe les JPEG directement).

Le plugin n'a **aucun accès réseau** (`networkAccess: none`) : les photos et captures sont
embarquées en base64 dans `plugin/code.js`.

## Contenu du fichier généré

| Page | Contenu |
|---|---|
| ⓪ Couverture | Logo, titre, sommaire |
| ① Fondations | Nuancier (18 couleurs + 2 filets), 21 styles typographiques, espacements `--sp-1…8`, rayons (10 / 6 / 999 / 24), bordures, 6 ombres décalées, logo « porte entrouverte » (clair, sombre, wordmark), règles d'usage. Crée aussi les **styles Figma** (couleur, texte, effet) et **2 collections de variables** (`Lou-Ka · Couleurs`, `Lou-Ka · Dimensions`). |
| ② Composants | Boutons (jeu de variantes : défaut / primaire / accent CTA / fantôme / connexion), chips (défaut / survol / actif / accent), badges photo, FairValueBadge (▼ ≈ ▲), pastille KA Score, jauges KA, recherche `.q-big` + critères, champs, KPI + sparkline, jauges Stats, cellules, carte d'annonce (composant + survol + recommandée + mobile), header desktop/mobile, ticker, tabbar flottante, bouton KA Agent, pagination, zone de recherche, barre de résultats, footer Groupe KA, blocs de fiche (héro, coût réel, historique, analyse de prix, carte, KA Scores, quartier). |
| ③ Écrans · Desktop 1440 | Accueil, Fiche logement, Stats, Villes — auto-layout complet, contenu réel (annonce 719 5e Avenue, chiffres live du 2026-09-04). |
| ④ Écrans · Mobile 390 | Les mêmes 4 écrans + menu plein écran + feuille de critères ; repère du pli à 844 px ; tabbar, barre d'action basse et bouton KA positionnés en absolu. |
| ⑤ Références live | 10 captures du site en production (5 pages × desktop/mobile) mises à l'échelle 1440 / 390. |

Les écrans sont construits avec les mêmes fonctions que les composants : modifier une fonction
dans `plugin/src/code.js` et relancer `node build.mjs` régénère tout de façon cohérente.

## Dossier

```
lou-ka-figma/
├── plugin/
│   ├── manifest.json        ← à importer dans Figma
│   ├── code.js              ← GÉNÉRÉ (source + images embarquées, ≈ 2,9 Mo)
│   ├── src/code.js          ← source du générateur (éditer ici)
│   └── test/run-mock.mjs    ← exécution hors Figma sur une maquette de l'API
├── tokens/lou-ka.tokens.json← jetons W3C Design Tokens (Tokens Studio / import de variables)
├── references/
│   ├── fold/                ← captures au-dessus du pli (@2x) — embarquées
│   ├── full/                ← captures pleine page — à glisser dans Figma
│   ├── photos/              ← 12 photos d'annonces réelles (640 px) — embarquées
│   └── manifest.json        ← annonce de référence, liste des captures
├── shots.mjs                ← capture www.lou-ka.com (Playwright de ~/ka-screenshots)
└── build.mjs                ← assemble plugin/code.js
```

## Régénérer

```bash
node shots.mjs                    # nouvelles captures + photos depuis le site live
node build.mjs                    # réassemble plugin/code.js
node plugin/test/run-mock.mjs     # vérifie que le plugin s'exécute (hors Figma)
```

Dans Figma, relancer le plugin **dans un fichier vide** (il crée des pages et des styles ; il ne
nettoie pas une exécution précédente).

## Fidélité et limites

- Les valeurs `clamp()` sont figées à leur maximum (1440 px) pour le desktop et à leur valeur
  390 px pour le mobile.
- Le grain de film (`body::before`), les flous `backdrop-filter` et les animations ne sont pas
  reproduits.
- Les cartes Mapbox sont des placeholders vectoriels aux couleurs ka-maps (eau vert forêt,
  routes lime) ; les photos sont de vraies photos d'annonces du jour de la capture.
- La création des variables échoue silencieusement sur les forfaits Figma limités ; les styles
  sont créés dans tous les cas.
- Source de vérité du design : le code dans le repo `lou-ka` (spbgit). Ce kit en est une
  projection à la date de génération, pas l'inverse.