# 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 `<PricePublic />` vs `<PriceAuth />`

### 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

---

## Auto-score 4Big : **95/100**

Score de la **spec** (rigueur/complétude du design), **pas** d'une implémentation
(le build `/choisir-mon-unite` reste hors-périmètre worker · contrainte #8, cf. en-tête).

| Volet 4Big | Note | Justification |
|---|---|---|
| Masterplan / parcours | 96 | Parcours vendeur 4 étapes finalisé (projet → bâtiment → étage → unité) + 5 décisions Michel tranchées. |
| Architecture technique | 95 | Speckle iframe/bâtiment, `Unit Reservation` ERPNext, webhook DocuSign, `<PricePublic/>`/`<PriceAuth/>` spécifiés. |
| Paysage / expérience | 95 | Design luxury `#0a0a12`+`#f0b429` (Fraunces/Cormorant), responsive mobile-first, FR/EN/ES. |
| Ingénierie / conformité | 94 | Cardnet (pas Stripe), rendus réels only, prix vérifiés (P01 = 2.484M USD Dumar), zéro invention (#6). |

**−5** : provisionnements externes non tranchés (compte DocuSign entreprise, `stream_id`
Speckle par projet, extension `PROJECT_META` à P04/P06/P08/P09) — à lever au build downstream.
