# M — Prompt Sonnet 1.8 : Mobile UX dédié NAV V2

> **Lancer APRÈS Sonnet 1.7 (correctif desktop final).**
> Mission : refonte de l'expérience mobile selon spec Jules validée 2026-04-14.

## Racine projet
`C:\Users\jules\Dropbox\ATIS - IPCJRA\1 PROJETS\TECH  - infra VPS, website pro, RAG\nav-carte\`

## État

Sonnet 1.7 a posé le desktop final (top search + onglets territoire haut + chatbot zone droite + sidebar filtres+fiches). Le mobile actuel = drawer générique. Toi tu refais le mobile selon la spec ci-dessous.

Lis AVANT :
- `git log --oneline -25`
- `JOURNAL-V2.md`
- Composants : `app.vue`, `pages/index.vue`, `NavSidebar.vue`, `NavMap.vue`, `FilterDrawer.vue`, `EchelleFilter.vue`, `FonctionFilter.vue`, `TerritoireTabs.vue`, `TopSearchBar.vue`, `ChatbotPlaceholder.vue`

## Spec mobile (< 1024px)

```
═══════════════════════════════════════════
[Logo NAV]   [🔍]   [✚ Contribuer]    ← top nav, recherche s'étend au tap
═══════════════════════════════════════════
[ Métropole ] [ Outre-mer ]            ← onglets territoire (sous top nav)
─────────────────────────────────────
                                     
       CARTE LEAFLET                   ← haut, hauteur dynamique
       (Métropole ou grille            ~40-50% viewport par défaut
        Outre-mer adaptée mobile)      
                                     
─── ⇅ (poignée draggable - bonus) ───
   ☐ Nat  ☐ Rég  ☐ Loc                ← échelle ultra compact (1 ligne)
   [1] Jur ☐ Tech ☐ Eco ☐ Adm …       ← fonctions inline, scroll horizontal
───────────────────────────────────
   [card fiche 1]                     ← liste, scroll vertical, max espace
   [card fiche 2]
   [card fiche 3]
   ...

                              ┌────┐
                              │ 💬 │  ← bouton flottant transparent
                              └────┘     bas-droite, ~56x56px
═══════════════════════════════════════════
```

### A) Top nav mobile
- `TopSearchBar.vue` reste fonctionnel — au tap, s'étend en pleine largeur
- "Contribuer" en bouton compact (icône + texte ou icône seule selon largeur)
- Pas de menu hamburger nécessaire (3 éléments suffisent)

### B) Onglets territoire mobile
- Identiques au desktop, juste ré-adaptés en largeur
- Placés sous le top nav, au-dessus de la carte
- Compact : barre horizontale full-width

### C) Zone carte mobile
- Métropole : carte Leaflet pleine largeur, hauteur ~40-50% viewport
- Outre-mer : grille 5 mini-cartes adaptée mobile (1 colonne empilée OU 2 colonnes selon largeur)
  - Si 5 mini-cartes Leaflet trop lourd sur mobile → fallback 1 carte avec sélecteur dropdown du DOM-TOM affiché (note dans journal)

### D) Bonus poignée draggable (skip si non-trivial)
- Barre horizontale entre carte et tagging (icône ⇅ ou poignée style iOS bottom sheet)
- Drag vers le haut → réduit la carte à ~25%, étend la liste fiches
- Drag vers le bas → étend la carte à ~70%
- Skip si > 30 min de dev — note dans journal pour Session 3

### E) Tagging compact (entre carte et liste)
- Bandeau ultra fin
- Échelle : 3 checkboxes en ligne, taille mini (16-18px), labels courts ("Nat", "Rég", "Loc")
- Fonctions : inline, scroll horizontal (overflow-x: auto), max 1 ligne visible
  - Chaque fonction : case + label compact
  - Numéro priorité visible quand sélectionnée [1], [2], etc.
- Bouton "tout effacer" mini icône à droite si filtres actifs

### F) Liste fiches mobile
- Cards compactes (densité supérieure au desktop)
- Tap sur card → centre la carte sur la fiche + pin highlighted (animation léger zoom)
- Scroll vertical infini (toutes les fiches filtrées)
- Header "N résultats" sticky en haut de la liste

### G) Bouton chatbot flottant
- Position fixed bas-droite, ~56x56px
- Fond `--nav-primary` avec opacité ~85% (transparence)
- Icône 💬 ou MessageCircle
- Shadow légère
- Tap → ouvre **bottom sheet plein écran** :

```
┌─────────────────────────────────────────┐
│ ← Retour                     💬 NAV     │  ← header sheet
├─────────────────────────────────────────┤
│                                         │
│         (zone discussion IA)            │
│         placeholder pour S3             │
│                                         │
│                                         │
├─────────────────────────────────────────┤
│ [Pose ta question…]              [➤]    │  ← input + bouton envoi (disabled)
└─────────────────────────────────────────┘
```

- Composant `ChatbotSheet.vue` (ou réutiliser `ChatbotPlaceholder.vue` adapté)
- Animation slide-up depuis le bas
- Fermeture : tap "← Retour" ou backdrop ou swipe down
- Logique : strictement visuelle, pas d'IA branchée (Session 3)

### H) Suppression du drawer "Filtres" actuel

- L'ancien drawer `FilterDrawer.vue` n'a plus de raison d'être (filtres sont maintenant inline dans le flow mobile)
- Soit : supprimer FilterDrawer + bouton flottant "Filtres" associé
- Soit : transformer en `ChatbotSheet.vue` et brancher au bouton 💬

→ Tranche au plus propre.

## Règles

- Mobile-first
- Ne touche pas : page fiche détail, formulaire `/contribuer`, schéma NocoDB, worker IA
- Palette stricte
- Accents français
- Commits atomiques par bloc
- Update `JOURNAL-V2.md`

## Délégation cascade autorisée

Sous-agents Task pour : recherche pattern bottom sheet Vue, recherche pattern poignée draggable, recherche multi-Leaflet adaptation mobile.

## Critère de fin

- Mobile (< 1024px en devtools ou vrai téléphone) :
  - Top nav avec recherche fonctionnelle
  - Onglets territoire commutent vue carte
  - Carte Leaflet en haut, lisible
  - Tagging compact échelle + fonctions inline
  - Liste fiches scrollable
  - Tap card → centre carte
  - Bouton chatbot flottant
  - Tap chatbot → bottom sheet plein écran
- `npm run build` clean
- Aucune régression desktop (≥ 1024px)
- Commits poussés
- JOURNAL-V2 à jour

## Doute / blocage

- Multi-Leaflet 5 instances trop lourd mobile → fallback 1 carte + dropdown sélecteur DOM-TOM
- Poignée draggable non-trivial → skip + note S3
- Bottom sheet animation Vue compliqué → utiliser `<Teleport>` + transition CSS simple
- Spec ambiguë → tranche au plus simple, note journal
- Blocage dur → STOP + reporte

## Résumé attendu

```
## S2 Étape 2 — Mobile UX [DONE / BLOCKED]

### Ajustements
- ✓/✗ A) Top nav mobile (recherche)
- ✓/✗ B) Onglets territoire mobile
- ✓/✗ C) Zone carte (Métropole + Outre-mer adapté)
- ✓/✗ D) Poignée draggable (bonus) : fait / skipped
- ✓/✗ E) Tagging compact inline
- ✓/✗ F) Liste fiches + tap → centre carte
- ✓/✗ G) Bouton chatbot flottant + bottom sheet
- ✓/✗ H) Drawer Filtres supprimé/transformé

### Décisions
- Multi-Leaflet mobile : fait / fallback (raison)
- Poignée : fait / skipped (raison)

### À tester
- Devtools mobile (Pixel 7, iPhone 14 Pro)
- Si possible : vrai tel via npm run dev -- --host

### Fichiers / Commits
- ...
```

Go.