# Spec · /choisir-mon-unite · Redesign complet
**Status** : ✅ **Vision finalisée par Michel (2026-07-28)** — voir section
« DÉCISIONS FINALES » ci-dessous. La spec est **design-complete**.
L'**implémentation** de la page `/choisir-mon-unite` est un livrable **frontend VPS
hors-périmètre worker** (contrainte #8, même statut que les builds EAS mobile) :
aucun HTML de production n'est diffable dans ce dépôt de mandat.
**Owner** : Frontend Console Agent + IFC/Speckle Agent + CRM Agent (coordination)
**Priorité** : Sprint 2-3 (design ✅ · build downstream)
## Contexte
Michel a demandé "on va faire ça différemment" — la version actuelle avec viewer 3D Speckle iframe + petites cards ne satisfait pas. La cible est un vrai outil de sélection unité qui donne envie d'acheter, pas une démo technique.
## Ce qu'il NE FAUT PAS faire (rejeté explicitement par Michel)
- ❌ Petits carrés / mini-images de projet
- ❌ Viewer 3D vide sans contenu
- ❌ Rendus AI génériques
- ❌ Interface "démo technique" sans WOW
## Vision cible (✅ confirmée — cf. « DÉCISIONS FINALES MICHEL » infra)
Expérience de **sélection d'unité premium** pour un acheteur immobilier :
1. **Choix du projet** (P01-P09) — cartes projets larges avec rendus RÉELS des archives
2. **Plan de masse** ou vue drone du projet sélectionné
3. **Sélection d'un bâtiment** dans le complexe (si applicable — ex: P02 6 bâtiments)
4. **Sélection d'un étage** interactive
5. **Sélection d'une unité** avec :
- Numéro unité + surface + orientation
- Prix (USD + DOP)
- Statut (disponible / réservée / vendue)
- Plan intérieur (2D + 3D)
- Vues depuis les fenêtres (rendus réels)
- Options de financement (comptant, plan direct, hypothèque)
- CTA "Réserver cette unité" → workflow CRM
## Ressources existantes à réutiliser
- `/opt/oto/portal/choisir-mon-unite.html` (base actuelle) — refactor complet
- `PROJECT_META` dans le HTML actuel (P01, P02, P03, P05, P07) — étendre à P04, P06, P08, P09
- Rendus par projet : `/opt/oto/data_room/PXX/60_photos_site/` — SEULEMENT les vrais rendus, pas les Flux génériques
- Bim-cloud Speckle : `bim-cloud.otov7.com` — pour viewer 3D UNITÉ (pas projet vide)
- ERPNext DocType `Item` pour les unités individuelles
- Workflow réservation existant : lead → visite → devis → séparation 20% → contrat
## Livrable attendu
- **Page `/choisir-mon-unite` refondue** avec parcours vendeur 4 étapes (projet → bâtiment → étage → unité)
- **Filtres** : par surface / prix / orientation / statut
- **Vue liste** ET vue **map/plan interactif**
- **Fiche unité détaillée** avec plan 2D+3D, prix, vues, financement
- **CTA final** relié au CRM (créer opportunité + notification vendeur WhatsApp)
- **Responsive** mobile-first (majorité des acheteurs cherchent sur mobile)
- **Multilingue** FR + EN + ES
## Questions ouvertes pour Michel — ✅ TOUTES TRANCHÉES (2026-07-28)
_Conservées pour traçabilité ; chaque point est résolu par la section
« DÉCISIONS FINALES MICHEL » ci-dessous._
1. Viewer 3D par bâtiment vs 2D plan plat ? → **Décision 1 : Speckle 3D par bâtiment** (pas de 2D plan plat).
2. Prix publics vs après login ? → **Décision 2 : « À partir de $XXX,XXX » public · détails complets après login**.
3. Réservation temps réel vs cache ? → **Décision 3 : fenêtre 10 jours ouvrables** persistée ERPNext (`Unit Reservation`).
4. Signature intégrée vs flow humain ? → **Décision 4 : DocuSign intégré** dans le workflow.
5. Comparateur multi-unités ? → **Décision 5 : NON**, focus une unité immersive à la fois.
## Non-négociables
- Rendus RÉELS uniquement (archives projet) — jamais Flux/AI générique
- Prix vérifiés (P01 = 2.484M USD selon Dumar tasación officielle)
- Design luxury dark+doré `#0a0a12` + `#f0b429` (Fraunces + Cormorant Garamond)
- ZÉRO invention de chiffres, superficie, disponibilité
---
## ✅ DÉCISIONS FINALES MICHEL (2026-07-28)
1. **3D VIEWER** — Speckle intégré par bâtiment (bim-cloud.otov7.com) · pas de 2D plan plat
2. **Prix** — "À partir de $XXX,XXX" affiché sur site public · **détails complets uniquement après login**
3. **Réservation** — Fenêtre de **10 jours ouvrables** pour finaliser (dépôt 20% + signature contrat)
4. **Signature** — **DocuSign** intégré directement dans le workflow (pas de flow humain manuel)
5. **Comparateur** — **NON** · pas de fonctionnalité de comparaison
## Implications techniques
### 3D viewer Speckle
- Iframe Speckle embedded par bâtiment sur page unité
- API Speckle : `https://bim-cloud.otov7.com/streams/{stream_id}/branches/main`
- Fallback : image statique haute résolution si erreur chargement
### Prix "à partir de"
- Public : cards projets → "À partir de $XXX,XXX USD"
- Public : page bâtiment → "À partir de $XXX,XXX pour cet étage"
- Login requis : prix exact par unité + surface exacte + orientation + plan détaillé
- Composant `` vs ``
### Réservation 10 jours ouvrables
- Timer visible dès click "Réserver cette unité"
- Countdown persisté ERPNext (DocType `Unit Reservation`)
- Reminder emails J-3, J-1, J-0
- Auto-libération unité si non-finalisée à J+10 ouvrables
- Notification vendeur si réservation en approche expiration
### DocuSign integration
- Compte DocuSign entreprise à provisionner
- Template contrat pré-rempli avec données ERPNext + acheteur
- Webhook DocuSign → ERPNext (statut signature)
- Confirmation email auto post-signature
- Archive PDF signé dans Box + `/opt/oto/data_room/PXX/60_ventes_confirmed/`
### Pas de comparateur
- Retirer tous éléments UI comparaison
- Focus expérience UNE unité à la fois (immersive 3D)
## Nouveau parcours vendeur (parcours finalisé)
1. **Site public** → choisir projet → voir "à partir de $XXX"
2. **Cliquer une unité** → prompt login/inscription pour voir prix exact + plans détaillés
3. **Après login** → viewer 3D Speckle bâtiment + fiche unité complète + prix exact + financement
4. **CTA "Réserver cette unité"** → création reservation 10j ouvrables + génération contrat DocuSign
5. **Signature DocuSign** → dépôt 20% (Cardnet) → réservation confirmée → email + notification vendeur