# Cartographie d’intégration UI — FreeGive

Ce document relie les maquettes Stitch au code Laravel. Les fichiers `code.html` et `screen.png` sont des références visuelles : les données, permissions, routes et états restent ceux du backend FreeGive.

## Socle visuel

- Police : Inter.
- Surface principale : `#f6fbf5`.
- Texte principal : `#181d1a` ; texte secondaire : `#3e4943`.
- Vert primaire : `#006446` ; vert d’action : `#087f5b`.
- Bleu secondaire : `#0859c4` ; accent vert fluor : `#7cff00`.
- Bordures : `#bdc9c1`, 1 px.
- Largeur desktop : 1280 px ; gouttières 32 px desktop et 16 px mobile.
- Cartes : fond blanc ou surface basse, rayon 12 px, ombre discrète uniquement si elle aide la hiérarchie.
- Boutons principaux : hauteur 48 à 56 px, rayon 12 px, libellé explicite.

## Correspondance des écrans

| Référence Stitch | Vue Laravel | Données réelles |
| --- | --- | --- |
| `accueil_freegive` / mobile | `home.blade.php` | compteurs publics, organisations actives, offres actives |
| `catalogue_solidaire_pr_t_int_gration_dynamique` / mobile | `catalog/index.blade.php` | offres, articles, prix, stocks, organisation |
| `dons_publics` / mobile | `donations/index.blade.php` | dons publics publiés et non expirés |
| `d_tail_du_don` / mobile | `donations/show.blade.php` | don, lignes, bénéficiaires, remise |
| `entraide` | `assistance/index.blade.php` | demandes d’assistance publiées |
| `tableau_de_bord_freegive` / mobile | `dashboard.blade.php` | statistiques propres à l’acteur connecté |
| `profil_utilisateur` / mobile | `account/profile.blade.php` | identité, rôle, acteur et paramètres |
| `notifications` / mobile | `account/notifications.blade.php` | notifications Laravel lues/non lues |
| `faire_un_don_tape_*` | `donations/create.blade.php` | formulaire de don et lignes personnelles |
| `safety_hub*` | `admin/*.blade.php` | dossiers, utilisateurs et opérations de modération |

## Règles d’intégration

1. Ne jamais recopier les montants, personnes, statistiques ou statuts fictifs des captures.
2. Conserver les contrôles d’accès et politiques Laravel existants.
3. Prévoir les états vide, chargement, erreur, expiré et non autorisé.
4. Utiliser les mêmes actions et libellés sur desktop et mobile.
5. Les images distantes présentes dans les prototypes ne sont pas des dépendances de production.
6. L’interface publique et l’espace membre partagent les mêmes tokens ; l’administration conserve sa navigation dense et sombre.

## Ordre de réalisation

1. ✅ Socle, en-tête, pied de page et accueil.
2. ✅ Catalogue et cartes dynamiques.
3. ✅ Dons publics et détail d’un don.
4. ✅ Tableau de bord, profil et notifications.
5. ✅ Parcours de création d’un don et demande d’assistance.
6. ✅ Remise sécurisée, litiges et Safety Hub. La messagerie générale nécessite encore un domaine de conversation dédié.