# Brief r8 : la home entière dans le style du hero v6 « Grand angle, papier »

Le hero v6 (banc d'essai r7) est validé. On décline maintenant **toute la home** dans ce style,
section par section, au même niveau d'exigence que le hero.

## La référence : le hero (`parts/10-hero-stats.html`), NE PAS MODIFIER
Ouvre `http://localhost:5932/natalia.html` et regarde les captures `../r7/shots/v6-*.jpg`.
Lis `/Users/rbaumier/www/natalia/natalia-website/DESIGN.md` (système documenté) et
`parts/01-system.html` (tokens, partagé, ne pas modifier, sauf l'agent shell sans renommer).

Ce qui fait le style, et les retours de l'utilisateur à respecter partout :
- **Papier gris-blanc froid** `#f3f4f5` (façon Zed), grain figé neutre. **Aucun jaune, aucun beige**
  (l'utilisateur l'a refusé deux fois) : lumières et accents chauds en lavande, rose, pêche, terracotta.
- **Illustration éditoriale à l'encre** : trait `#141a36` d'épaisseur variable, aplats gouache clairs
  (vert d'eau, bleu poudré, mauve, rose, terracotta), hachures légères, personnages ordinaires,
  divers, expressifs. SVG authored à la main, un seul style maîtrisé, cohérent avec la rue du hero.
- **Les échanges sont le héros** : bulles grandes et très lisibles, contour encre 2px, ombre
  portée franche `3px 4px 0 #141a36`, **queue qui pointe vers celui qui parle**. On doit comprendre
  immédiatement qui parle à qui. Paroles en Newsreader italique, Natalia en violet `#533afd`,
  réponses WhatsApp en `#dcf8c6`.
- **Natalia = le lampadaire violet** avec son enseigne au logo : c'est le personnage récurrent qui
  relie la personne (orange `--person`) à l'entreprise (violet `--company`). Réutilise-le quand ça a
  du sens (il peut apparaître en petit, en vignette, comme un repère), sans le mettre partout.
- **Motion** : la scène respire (petits gestes en boucle, fils qui s'allument quand un message passe,
  une histoire à la fois). Transform/opacity/stroke-dashoffset, pause hors écran, reduced-motion =
  état final lisible.
- **L'utilisateur n'aime pas les « cards »** : il a fait supprimer les cartes de canaux (blanches, 2×2,
  pictos dans des carrés). Pas de grille de cartes identiques, pas de pictos de bibliothèque dans des
  carrés. Chaque section trouve sa mise en scène : une scène illustrée, une conversation, une
  planche, une vitrine, un plan de rue, un carnet…
- Boutons : webapp v3 (déjà dans le système). Typo : Onest / Newsreader italique / Geist Mono.

## RÈGLE ABSOLUE : le texte ne bouge pas (SEO)
Mot pour mot, même ordre, mêmes niveaux h1/h2/h3 que `dist/fr/index.html`. Ton point de départ texte
est ton fragment actuel dans `parts/` (version r6, texte vérifié) : tu le **réécris entièrement** côté
affichage. Pas de nouveau slogan, chiffre ou témoignage. Micro-libellés des scènes (noms, heures,
messages) fictifs, décoratifs, en `aria-hidden="true"`, jamais un faux témoignage. Les petits textes
au-dessus des titres restent mais jamais en surtitre. La carte WhatsApp pointe vers `/fr/whatsapp`.

## Organisation : un fragment par agent
| Fragment | Propriétaire |
|---|---|
| `00-head.html` + `90-footer.html` + `95-script-ui.html` (+ ajustements `01-system.html`) | agent **shell** |
| `20-briques-cout.html` | Par quoi commencer + Coût de l'inaction |
| `30-differents-outils.html` | Ce qui nous rend différents + Cinq outils |
| `40-systeme-rebound.html` | Système qui s'améliore + Workflow Rebound |
| `50-deploiement-secteurs.html` | Déploiement + Secteurs + bandeau adapt |
| `60-ressources-connecteurs.html` | Ressources + Se connecte à vos outils + Connecteurs |
| `70-faq-fondateur.html` | FAQ + Fondateur |
| `80-final.html` | CTA final |
| `10-hero-stats.html` | **figé** (référence) |

- Tu n'écris QUE dans ton fragment (captures dans `r8/shots/`). CSS dans un `<style>` scopé sous tes
  ids ; JS en IIFE en fin de fragment, limité à tes éléments. Préfixe tes ids SVG (gradients, patterns,
  symbols) par ton fragment pour éviter les collisions (le hero utilise `v5-`, `v6-`, `h6-`).
- Test : `./assemble.sh mon-id.html` puis, depuis `/Users/rbaumier/www/natalia/natalia-website` :
  `node .impeccable/mocks/r8/check.mjs http://localhost:5932/mon-id.html` (63/63 + console OK,
  obligatoire) et `node .impeccable/mocks/r8/shot.mjs mon-id.html <nom> "<sélecteur>|hero|full" [--rm]`.
  Serveur local déjà lancé (5932). Les autres fragments bougent en parallèle.

## Craft floor
Pas de texte en dégradé, glow, glass, orbes, emoji-icônes, robot/mascotte, bounce, `transition: all`.
Contenu visible sans JS. Texte ≥ 11px, contraste ≥ 4.5:1. Aucun débordement à 390px ; mobile pensé
(l'utilisateur regarde sur iPhone). iPhone Safari : pas de filtres SVG lourds en boucle.

## Déroulé
Construction complète, UNE passe de contrôle (captures desktop + mobile + check), UNE passe de
correction, stop. Compte-rendu 5 lignes max : mise en scène, moment signature, écarts au texte
(aucun attendu), risques.