# Refonte de la vitrine card.pm — document de reprise

À lire en premier par la prochaine session Claude. L'historique complet des demandes est dans `docs/HISTORIQUE-CHAT.md`.

## Le projet
Nouvelle page d'accueil (vitrine) de **card.pm** (DATAMIX.IO SAS, Mérignac) : carte de visite digitale, cartes NFC, présentoirs **FEED** (avis Google), cartes **SPOT** (comptoir commerçant), rubrique **consent.pm**. Site statique, 6 langues, optimisé référencement Google/IA et sécurisé.

Aperçu publié (privé) : https://claude.ai/artifact/Sy8CiguQVSn3U51SAx65HW

## Arborescence
| Chemin | Contenu |
|---|---|
| `source/index.html` | **Page source unique** (français), CSS inclus. C'est ici qu'on modifie. Pas de `<!doctype>`/`<head>` : le script les génère. |
| `source/i18n.js` | Traductions en, es, it, de, pt (le français est lu dans la page). Clés `data-i18n="…"`, `data-i18n-alt`, `data-i18n-aria`. |
| `source/app.js` | Interactions : menu, QR codes, cartes NFC (matières PVC/bois/métal, texture bois générée), pile SPOT, stats SPOT, langues, effets. |
| `source/build.py` | Génère le site en ligne : `python3 source/build.py .` (depuis la racine du projet). |
| `source/img/`, `source/js/` | Images (démo, logos clients en gris, logos réseaux, badges Wallet, signature) et bibliothèque QR auto-hébergée. |
| `index.html`, `en/` `es/` `it/` `de/` `pt/` | Pages générées, une par langue (ne pas modifier à la main). |
| `_site/` | Ressources générées (copie de img/, js/, app.js, i18n.js). |
| `robots.txt`, `sitemap-vitrine.xml`, `llms.txt`, `.well-known/security.txt` | Référencement moteurs + IA, contact sécurité. |
| `_headers`, `nginx-vitrine.conf`, `.htaccess` | En-têtes de sécurité (CSP stricte, HSTS…) selon l'hébergeur — n'en garder qu'un. |
| `README-DEPLOIEMENT.md` | Mise en ligne, Cloudflare anti-DDoS, actions SEO. |
| `docs/references/` | Fichiers fournis : BAT ORPI, PDF FEED/chevalets, photo chevalet, logos officiels card.pm / consent.pm, captures (signature, WhatsApp, boutons mobile, SPOT ORPI). |

## Méthode de travail
1. Modifier `source/index.html` / `source/i18n.js` / `source/app.js`.
2. Tout nouveau texte visible : ajouter `data-i18n="cle"` et la traduction dans les 5 langues de `i18n.js`.
3. Régénérer : `python3 source/build.py .` puis vérifier une page (ex. `en/index.html`).
4. Pour voir la page source en local : l'envelopper d'un `<!doctype html><html><head><meta charset="utf-8"></head><body>…</body></html>` ou servir le dossier généré (`python3 -m http.server`), les chemins du site généré commencent par `/`.
5. Piège connu : les unités `cqw` posées sur l'élément qui porte `container-type` se calculent sur la fenêtre, pas sur lui-même → mettre ces marges sur les enfants.

## Choix validés par le client
- Charte : couleurs des logos (encre #151713, crème #F4F1EA, bleu card.pm #2563EB, vert consent.pm #22C55E), polices Bricolage Grotesque (titres), Inter (texte et cartes NFC), JetBrains Mono (étiquettes).
- Cartes NFC : **pas de nom/prénom/fonction**, logos de réseaux (ORPI, iad, Century 21, ERA, Capifrance, OptimHome, Propriétés Privées + « Votre logo »), matières **PVC, bois, métal uniquement**, gabarit du BAT (logo 52,8 × 27,3 mm, antenne NFC dans le coin haut droit, QR + « SERIAL NUMBER : demo » au verso).
- Haut de page : carte NFC noire (logo card.pm centré) derrière le coin haut gauche du téléphone, onde partant de l'antenne, notification iOS « Tag NFC — Ouvrir « card.pm » dans Safari », carte démo qui défile dans le téléphone, 3 boutons flottants du mobile (ajout contact, FR, menu).
- FEED : plaque ORPI adhésive au mur + chevalet blanc en L « Touchez pour laisser un avis » (G Google + QR), formats 9×9 / 12×12 / 14×14 cm (adhésif 3M) et chevalet 14,8 × 10,5 cm (pied 6 × 10,5 cm), option page multi-liens, personnalisable aux couleurs de l'entreprise.
- SPOT : boulangerie (vitrine, caisse enregistreuse), avant = pile de cartes avec carte immobilière dessus, après = carte SPOT bleue « SPOT » collée (adhésif 3M), stats par commerçant avec carte façon appli de cartographie + pictos (baguette, couperet, ciseaux, croix, tasse, bouquet). Chiffres = exemple.
- Bloc lien : aperçu WhatsApp/Open Graph reproduit d'après la capture du client ; bloc email : signature réelle du client (John DOE de la démo).
- Logos clients officiels en gris (couleur au survol), liens vers les 20 pages réseaux.
- Lien support : https://card.pm/support · support@card.pm.

## Reste à faire / à valider
- Badges **Apple Wallet** traduits (seul le badge anglais est disponible ; Apple les fournit après acceptation de ses conditions).
- **Favicon** carré (logo .PM) à fournir.
- Relecture native des traductions.
- Avant mise en ligne : vérifier que `/en /es /it /de /pt /_site` ne sont pas des identifiants de cartes clients ; fusionner `robots.txt` avec celui de l'application ; ne pas bloquer les robots IA dans Cloudflare.
- La carte immobilière de la pile porte un nom fictif (« Claire Martin ») : à confirmer ou anonymiser.
- Pas encore testé sur vrai iPhone / Android (seulement captures ordinateur).