# EstimPro — Design system 1.0

## Positionnement
EstimPro est un outil de travail pour les agents immobiliers, les mandataires et les agences. Il permet d’estimer les biens, de présenter les résultats, de préparer les rapports et d’organiser la prospection. La marque parle simplement, montre les fonctionnalités et laisse la main au professionnel.

## Logo
Le logotype est EstimPro. Son signe est un E modulaire, dont le trait central bleu ciel crée l’accent. Utiliser les SVG fournis, sans déformer, incliner ou redessiner le signe. Zone libre : au moins un quart de sa hauteur. Taille minimale : signe 24 px, logotype complet 120 px de large. Version blanche sur bleu roi ou bleu nuit ; version bleue ou bleu nuit sur fond clair. Ne pas mettre la version blanche sur fond clair.

## Couleurs
- Bleu roi #2346B8 : actions principales, marque et sélection.
- Bleu nuit #10234B : navigation, titres et fonds sombres.
- Bleu ciel #8FBEF6 : accent sur les fonds sombres.
- Fond #F7F9FC ; texte secondaire #52627C ; bordures #DFE6F0.
- Succès #047857 ; attention #A16207 ; erreur #B91C1C.
Les états doivent toujours être expliqués par un texte ou une icône. Ne pas utiliser le bleu ciel pour du petit texte sur blanc. Les couleurs DPE/GES restent propres aux données métier.

## Typographie
Sora 500/600 pour les titres ; Inter 400/500/600 pour les paragraphes, champs et contrôles ; IBM Plex Mono 400/500 pour les valeurs de comparaison. Utiliser la casse normale pour le contenu. Les capitales sont réservées aux repères courts. Chiffres tabulaires pour les prix, unités explicites et format français (295 000 €, 96 m²).
Titres site 48–84 px ; titre application 24–32 px ; sous-titres 20–32 px ; texte 14–16 px ; aide 12–14 px. Adapter les titres au mobile, sans réduire les champs sous 16 px lorsque cela provoquerait un zoom du navigateur.

## Composition
Base d’espacement : 4 px. Échelle : 4, 8, 12, 16, 24, 32, 48, 64, 96 px. Rayons : 7 px pour les contrôles, 12 px pour les panneaux, 20 px pour la navigation flottante. Les ombres restent légères ; elles différencient un élément flottant d’une surface de fond.
Sur ordinateur, navigation générale dans une sidebar de 240 px, détachée de 16 px. Les accès secondaires ouvrent des sous-menus ; éviter la longue liste à scroller. Le dashboard utilise le défilement du document, sans conteneur intérieur.
La création et la modification d’une estimation sont des espaces dédiés : aucune navigation générale. Rail des étapes de 220–260 px, sticky à 24 px du haut à partir de 900 px. Le formulaire défile avec la page et les boutons précédent/suivant restent disponibles en bas. À moins de 900 px : étapes compactes. Sidebar générale à partir de 1024 px. Tables transformées en fiches sous 700 px selon les données.

## Composants
Les contrôles de production sont dans src/components/ui. Utiliser Button pour les actions, Input pour les champs et les composants Radix de l’application pour les sélections et fenêtres. Une seule action principale par groupe. Les liens servent à naviguer, les boutons à agir.
États à prévoir : normal, survol, focus, actif, désactivé, chargement, erreur, succès et absence de données. Les erreurs sont écrites près du champ concerné. Le focus doit rester visible, les icônes seules ont un nom accessible. Cible tactile principale d’au moins 44 px. Les modales se ferment avec Échap et doivent rendre le focus au déclencheur.
Le label reste visible : ne pas le remplacer par un placeholder. Ne pas cacher les actions d’une ligne derrière le seul survol.

## Tableaux et données
Aligner les valeurs numériques, indiquer les unités et distinguer une valeur absente d’un zéro. Les références retenues, les paramètres et le dernier résultat enregistré doivent être clairement identifiés. Une absence de références ne devient pas une estimation. Les exemples publics doivent indiquer que les données sont fictives.

## Mouvement
Contrôles : 160 ms. Entrée d’étape : 220 ms, opacité et translation verticale de 6 px, courbe cubic-bezier(0.16, 1, 0.3, 1). Décalage entre éléments liés : environ 65 ms. Pas d’animation permanente sur les badges. Respecter prefers-reduced-motion. Les transitions doivent rendre une action compréhensible, sans gêner la saisie.
Vidéo : couleurs identiques, plans lisibles, transitions de 8–12 images à 30 i/s et durées suffisantes pour la lecture. Utiliser de vrais écrans de démonstration ; ne pas inventer une interface différente. La musique et les voix sont des ressources distinctes ; conserver les versions et leurs scripts.

## Rédaction
S’adresser directement aux agents : « Choisissez les ventes à comparer », « Générer le rapport PDF », « Préparer le rendez-vous vendeur ». Expliquer les termes métier lorsque nécessaire. Ne pas promettre de mandat garanti, de prix exact ni de couverture de données inexistante.
Les cinq méthodes principales sont marché apparent, comparative, locative, additionnelle et qualitative. Pour les maisons : les quatre premières. Pour les appartements : la qualitative remplace l’additionnelle. Les autres types de biens suivent leur configuration spécifique.

## Photographie
Scènes crédibles d’agence, lumière naturelle, contexte de quartier et gestes de travail. Lorsqu’un écran est visible, utiliser la vraie interface comme référence. Ne pas présenter un visuel généré comme une photographie de client réel. Le visuel agence-immersive-v2.png est une illustration générée de la marque.

## Livrables
Le dossier peut servir à la présentation en ligne, au rapport PDF personnalisable et à la fiche synthétique. L’exemple de rapport livré est un document marketing à données fictives ; il n’est pas une estimation réelle.

## Fichiers et implémentation
Le kit comprend les logos SVG, les tokens CSS/JSON, les polices avec leurs licences, une sélection d’icônes Lucide avec sa licence, ce guide en Markdown/PDF et l’exemple de rapport. La page /design-system documente les fondations et les contrôles interactifs. /identite conserve la présentation de l’identité. Les composants et layouts de production sont documentés dans docs/design/refonte-application-bleu-roi.md.
Les fontes et Lucide sont des dépendances open source distinctes ; ce kit ne change pas leurs licences. Les licences applicables restent celles distribuées avec chaque dépendance.

## Recette
Vérifier le clavier, le focus, les noms accessibles, les contrastes, le mode de réduction des animations, le mobile à 320/390 px et les grands écrans. Vérifier chargements, erreurs, état vide et conservation des données entre étapes. Ne pas déclarer une page terminée sur la seule base du contrôle de couleurs.