# Briefs d'illustrations — Crowdlending App

Document de référence pour la génération des visuels de l'application de suivi de portefeuille de crowdlending (prêts participatifs).

---

## 1. Règles communes à toutes les illustrations

### Format technique
- **Format livrable :** SVG vectoriel avec fond transparent
- **Ratio cible :** Variable selon la page (précisé par illustration)
- **Texte :** Aucun texte intégré dans les illustrations — le texte est géré par l'application
- **Dark mode :** Fond transparent ; les teintes doivent rester lisibles sur fond clair (`#ffffff`) ET fond sombre (`#1a1a2e` environ). Éviter les couleurs trop claires qui disparaissent sur fond blanc, ou trop sombres sur fond sombre.

### Style global
- **Style dominant :** Flat illustration — formes géométriques épurées, ombres douces mais pas de réalisme photographique
- **Touches semi-réalistes :** Acceptées ponctuellement pour les personnages (Login, Register) ou les objets symboliques (pièces, documents)
- **Trait :** Pas de contour noir dur ; les formes sont délimitées par des variations de couleur ou des ombres légères
- **Ambiance :** Fintech moderne, professionnel, rassurant — pas austère, pas enfantin

### Palette par page
Chaque page a une teinte dominante distincte, déclinée en 2–3 variations (clair / principal / foncé). Les autres éléments utilisent des neutres doux (gris-bleu, blanc cassé, beige léger).

---

## 2. Page de connexion (`/login`)

### Concept
L'utilisateur retrouve son portefeuille. Idée centrale : **accès sécurisé à ses données financières personnelles**, sentiment de confiance et de maîtrise.

### Teinte dominante
**Bleu profond** — `#2563eb` environ, décliné en `#1e40af` (foncé) et `#93c5fd` (clair).

### Ratio
Portrait 4:5 ou carré 1:1, placé à droite du formulaire de connexion.

### Éléments visuels à inclure
- Un **écran ou tableau de bord abstrait** en perspective légère (isométrie douce) montrant des courbes de croissance et des barres de graphique — sans données réelles
- Un **bouclier ou cadenas stylisé** intégré naturellement dans la composition (pas en surimpression brutale)
- Des **formes géométriques flottantes** en arrière-plan (cercles, hexagones légers) qui évoquent un réseau de financement participatif
- Optionnel : une **silhouette humaine abstraite** (flat, sans visage détaillé) consultant un écran

### Ambiance / mots-clés
Confiance · Sécurité · Clarté · Accès personnel · Nuit bleue apaisante

### À éviter
Cadenas réaliste, icônes de sécurité génériques, fond uni sans composition.

---

## 3. Page d'inscription (`/register`)

### Concept
Nouveau départ, premier pas vers la croissance de son patrimoine. Idée : **planter une graine financière**, commencer à construire.

### Teinte dominante
**Vert émeraude** — `#059669` environ, décliné en `#047857` (foncé) et `#6ee7b7` (clair).

### Ratio
Portrait 4:5 ou carré 1:1, placé à droite du formulaire.

### Éléments visuels à inclure
- Une **plante ou arbre stylisé en flat** dont les feuilles sont remplacées par des formes évoquant des graphiques (triangles ascendants, petits histogrammes)
- À la base : des **pièces empilées ou un sol géométrique** représentant le capital de départ
- Des **étoiles ou points lumineux** dispersés en arrière-plan, évoquant le réseau de prêteurs/emprunteurs
- Palette de verts chauds avec des accents dorés/jaunes pour les éléments "valeur"

### Ambiance / mots-clés
Croissance · Optimisme · Premier investissement · Énergie · Nouveau départ

### À éviter
Personnages trop figuratifs, symboles euro/dollar trop littéraux, composition trop chargée.

---

## 4. Tableau de bord (`/`) — état vide

### Concept
Illustration affichée quand l'utilisateur n'a pas encore d'investissements. Invitation à commencer. Idée : **un portefeuille vide mais plein de potentiel**.

### Teinte dominante
**Violet indigo** — `#7c3aed` environ, décliné en `#5b21b6` (foncé) et `#c4b5fd` (clair).

### Ratio
Paysage 16:9 ou 3:2, centré sous le message d'état vide.

### Éléments visuels à inclure
- Un **graphique vide ou en pointillés** (axes tracés, courbe absente ou en tirets) qui suggère ce qui pourrait être là
- Des **cartes KPI fantômes** (rectangles avec shimmer ou contour en pointillé)
- Une **boussole ou carte du trésor stylisée** en flat, symbolisant le chemin à parcourir
- Des **petits éléments flottants** : icône +, flèches directionnelles, symboles de croissance

### Ambiance / mots-clés
Potentiel · Invitation · Légèreté · "Commencez votre voyage"

---

## 5. Page Investissements (`/investissements`) — état vide

### Concept
Pas encore de prêts enregistrés. Idée : **une salle des coffres vide**, des emplacements qui attendent.

### Teinte dominante
**Orange ambré** — `#d97706` environ, décliné en `#b45309` (foncé) et `#fcd34d` (clair).

### Ratio
Paysage 3:2, centré.

### Éléments visuels à inclure
- Des **dossiers ou cartes de projet vides**, empilés en perspective légère
- Une **ampoule ou boussole** au centre symbolisant l'idée à venir
- Des **lignes de connexion en pointillés** entre des nœuds vides (réseau P2P non encore peuplé)
- Accents dorés sur les éléments "valeur"

### Ambiance / mots-clés
Attente · Opportunité · Réseau de financement · Structuré

---

## 6. Page Remboursements (`/remboursements`) — état vide

### Concept
Pas encore de flux reçus. Idée : **un calendrier ou une boîte aux lettres vide**, des flux qui vont arriver.

### Teinte dominante
**Cyan turquoise** — `#0891b2` environ, décliné en `#0e7490` (foncé) et `#67e8f9` (clair).

### Ratio
Paysage 3:2, centré.

### Éléments visuels à inclure
- Un **calendrier stylisé** avec des cases vides ou des dates en pointillés
- Des **flèches de flux entrant** (argent qui arrive vers un portefeuille)
- Des **pièces ou billets flat** en trajectoire parabolique vers un portefeuille central
- Ambiance légère et dynamique (les flux vont arriver)

### Ambiance / mots-clés
Flux entrant · Calendrier · Anticipation · Régularité

---

## 7. Page Dépôts / Retraits (`/depots-retraits`) — état vide

### Concept
Pas encore de mouvements enregistrés. Idée : **un compte bancaire neutre**, prêt à recevoir ses premiers flux.

### Teinte dominante
**Bleu-gris ardoise** — `#475569` environ, décliné en `#1e293b` (foncé) et `#94a3b8` (clair).

### Ratio
Paysage 3:2, centré.

### Éléments visuels à inclure
- Un **compte ou portefeuille stylisé** en perspective flat, ouvert et vide
- Des **flèches bidirectionnelles** (entrée et sortie) avec des teintes différentes (vert pour dépôt, rouge doux pour retrait)
- Un **solde "0,00 €" stylisé** en grand format comme élément graphique central (pas de vrai texte — une représentation stylisée)
- Des **cercles concentriques** en arrière-plan suggérant la liquidité

### Ambiance / mots-clés
Neutralité · Liquidité · Mouvement · Équilibre

---

## 8. Page Fiscalité / 2778-SD (`/2778-sd`) — état vide

### Concept
Pas encore de données fiscales. Idée : **des documents officiels vierges**, un classeur fiscal ordonné.

### Teinte dominante
**Rouge corail doux** — `#dc2626` décliné en tons doux `#fee2e2` (fond) et `#991b1b` (accent).

### Ratio
Paysage 3:2, centré.

### Éléments visuels à inclure
- Des **formulaires/documents empilés en perspective** (style papier officiel mais stylisé, pas photo)
- Un **calculateur flat** ou une règle de calcul vintage stylisée
- Des **lignes de tableau vides** suggestives (colonnes tracées, lignes en pointillés)
- Un **tampon ou sceau circulaire** stylisé sans texte, symbolisant l'officiel

### Ambiance / mots-clés
Administration · Rigueur · Documentation · Clarté fiscale

---

## 9. Page Simulation (`/simul`) — illustration header

### Concept
Projection dans le futur. Idée : **une lunette de visée ou un télescope pointé vers l'horizon financier**.

### Teinte dominante
**Violet-rose** — `#9333ea` environ, décliné en `#7e22ce` (foncé) et `#e879f9` (clair).

### Ratio
Paysage 16:9, affiché en haut de page.

### Éléments visuels à inclure
- Une **courbe ascendante projetée vers le futur**, la partie gauche pleine (passé) et la partie droite en pointillés lumineux (projection)
- Des **étoiles ou constellations** en arrière-plan léger
- Un **horizon abstrait** ou une ligne de fuite perspective
- Des **marqueurs temporels** (points sur la courbe) sans dates réelles

### Ambiance / mots-clés
Futur · Projection · Vision · Anticipation · Lumière

---

## 10. Pages Settings / MonCompte — illustration section vide

### Concept
Paramètres non encore configurés. Idée : **un atelier ou tableau de bord de contrôle** vierge.

### Teinte dominante
**Gris neutre avec accent teal** — fond `#f8fafc`, accent `#0f766e`.

### Ratio
Carré 1:1, affiché en sidebar ou en état vide de section.

### Éléments visuels à inclure
- Des **engrenages imbriqués flat** en composition équilibrée (pas le cliché engrenage isolé)
- Des **curseurs et toggles stylisés** en arrière-plan
- Une **palette de couleurs ou pipette** pour la section Apparence
- Des **lignes de connexion** entre les composants symbolisant l'interconnexion des paramètres

### Ambiance / mots-clés
Contrôle · Personnalisation · Ordre · Maîtrise

---

## 11. Page 404 / Erreur

### Concept
Page non trouvée. Idée : **un investisseur qui cherche dans le vide**, boussole qui tourne, route qui mène nulle part.

### Teinte dominante
**Jaune soleil chaleureux** — `#eab308` environ, décliné en `#a16207` (foncé) et `#fef9c3` (clair).

### Ratio
Carré 1:1 ou portrait 3:4.

### Éléments visuels à inclure
- Une **boussole flat** dont l'aiguille est en point d'interrogation
- Un **chemin ou route** qui s'arrête abruptement dans le vide
- Des **éléments du tableau de bord qui flottent** de façon désordonnée (cartes KPI, graphiques) comme éparpillés
- Ambiance légère et humoristique, pas anxiogène

### Ambiance / mots-clés
Humour doux · Égaré · "On vous retrouve" · Légèreté

---

## Notes d'intégration pour le développeur

Une fois les SVG générés :

1. **Nettoyage SVG** : Supprimer les métadonnées inutiles (Adobe, Inkscape), vérifier l'absence d'images raster embarquées (balise `<image>`).
2. **Variables CSS** : Remplacer les couleurs hardcodées des éléments neutres (gris, blanc) par `var(--surface)`, `var(--border)`, `var(--text-muted)` pour l'adaptation dark mode automatique. Laisser les couleurs caractéristiques de chaque illustration en valeurs fixes.
3. **Import React** : `import { ReactComponent as IllustrationLogin } from '../assets/illustrations/login.svg'` (Vite : `import LoginIllustration from '../assets/illustrations/login.svg?react'`).
4. **Placement** : Les illustrations d'état vide se placent dans un `div.empty-state` centré, largeur max 320px. Les illustrations de page (login/register) se placent dans la colonne droite du layout split-screen.
