Initial commit

design/briefs-illustrations.md

@@ -0,0 +1,259 @@
+# 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.