# Prompt AEP — S7 : Logo, fiches cliquables, outre-mer accordéon

**Projet :** `1 PROJETS/TECH  - infra VPS, website pro, RAG/nav-carte/`
**Site live :** `aep.trans-former.fr`
**Journal :** `nav-carte/JOURNAL-V2.md`
**Invocation :** `/atis-dev AEP`
**Commit de référence desktop :** `aca6bc8` (S5)

---

## État d'avancement (fin S6, 2026-04-16)

Déployé et fonctionnel :
- Header mobile : sous-titre "Écosystème d'entraide Architecture" sous AEP
- Onglets Métropole/Outre-mer en pills colorées (fond primary actif)
- Hamburger menu z-[1200] — fonctionne partout (Métropole + Outre-mer)
- Pinch-to-zoom page désactivé (zoom carte Leaflet préservé)
- MobileSheet : compteur "99 fiches" supprimé du header (reste sous les tags)
- Page /contribuer : scroll mobile fixé (overflow-y: auto)
- Outre-mer : 5 cartes en colonne verticale

Bugs restants :
- Fiches ne s'ouvrent pas au clic (ni mobile ni desktop)
- Outre-mer difficile à lire en petit format horizontal

---

## Corrections à faire (par priorité)

### P0 — Bug critique : fiches ne s'ouvrent pas au clic

**Symptôme :** Sur mobile ET desktop, cliquer sur un marqueur carte ne déploie pas la fiche. On voit les marqueurs, les popups Leaflet s'ouvrent (mobile), mais le FicheModal (desktop) ne s'ouvre jamais et sur mobile la sélection ne fait rien de visible.

**Contexte technique :**

Desktop (`pages/index.vue`) :
```js
function onSelectOrg(id: number) {
  selectedId.value = selectedId.value === id ? null : id
  if (typeof window !== 'undefined' && window.innerWidth >= 1024) {
    ficheModalId.value = id
    ficheModalOpen.value = true
  }
}
```

Le `FicheModal` est bien dans le template :
```html
<FicheModal v-model="ficheModalOpen" :orgId="ficheModalId" />
```

Le `NavMap.vue` émet `select-org` sur clic marker :
```js
marker.on('click', () => emit('select-org', org.Id))
```

**En S6, on a ajouté un conditionnel** sur `bindPopup` (mobile uniquement) dans NavMap.vue :
```js
if (typeof window !== 'undefined' && window.innerWidth < 1024) {
  marker.bindPopup(...)
}
```

**Hypothèses à investiguer :**
1. Le popup Leaflet intercepte-t-il le `click` event même quand `bindPopup` n'est pas appelé ?
2. Le `clusterGroup` (MarkerClusterGroup) intercepte-t-il les clics ?
3. L'API `/api/fiche/[id]` retourne-t-elle bien les données ? Tester : `curl https://aep.trans-former.fr/api/fiche/1`
4. Le `FicheModal` reçoit-il bien `orgId` et `modelValue=true` ? Ajouter un `console.log` temporaire dans `onSelectOrg`.
5. Sur mobile, `onSelectOrgMobile` ne fait que toggler `selectedId` — il n'ouvre rien. Faut-il naviguer vers `/fiche/[id]` ?

**Approche suggérée :**
- Tester l'API fiche en curl d'abord
- Ajouter des console.log dans onSelectOrg / onSelectOrgMobile pour confirmer que l'event arrive
- Sur desktop : vérifier que FicheModal se monte (DevTools → Elements)
- Sur mobile : décider du comportement attendu (naviguer vers `/fiche/[id]` ou ouvrir une sheet ?)

### P1 — Logo "AEP" dans le carré + header renommé

**Actuellement (app.vue) :**
```html
<div class="w-7 h-7 rounded-lg flex items-center justify-center shrink-0"
  style="background: var(--nav-primary-solid);">
  <span class="font-bold text-sm" style="color: var(--nav-text-on-primary);">A</span>
</div>
<div class="flex flex-col">
  <span class="font-bold text-base tracking-tight leading-tight">AEP</span>
  <span class="text-xs leading-tight lg:hidden">Écosystème d'entraide Architecture</span>
  <span class="text-xs leading-tight hidden lg:inline">Architecture d'Écologie Politique</span>
</div>
```

**Attendu :**
- Le carré affiche "AEP" (pas juste "A") — agrandir légèrement le carré si nécessaire (w-9 h-7 ?)
- Le texte à côté du logo : "Architecture d'Écologie Politique" (sur mobile ET desktop)
- Supprimer le sous-titre "Écosystème d'entraide Architecture" (c'est le nom de la carte, pas du site)
- Clic sur le logo → renvoie vers le blog `https://trans-former.fr` (pas vers `/`)

### P2 — Outre-mer mobile : accordéon

**Actuellement :** 5 mini-cartes empilées en colonne, chacune 120px de haut. Difficile à lire.

**Attendu :** Système d'accordéon :
- Par défaut : les 5 DOM-TOM sont des lignes compactes (label + compteur fiches, ~40px)
- Clic sur une ligne → la déplie (~1/3 de l'écran, ~33vh) et affiche la carte Leaflet
- Les autres lignes restent repliées
- Re-clic → replie
- Une seule carte dépliée à la fois

**Implémentation suggérée :**
```html
<div v-for="dom in DOM_TOM" :key="dom.name" class="outremer-accordion-item">
  <!-- Header cliquable (toujours visible) -->
  <div class="accordion-header" @click="toggleDom(dom.name)">
    <span>{{ dom.name }}</span>
    <span>{{ orgCounts[dom.name] }} fiches</span>
    <chevron :expanded="expandedDom === dom.name" />
  </div>
  <!-- Carte (visible si déplié) -->
  <div v-show="expandedDom === dom.name" class="accordion-body" style="height: 33vh;">
    <div :ref="..." class="outremer-map" />
  </div>
</div>
```

Script : ajouter `const expandedDom = ref<string | null>(null)` + `toggleDom(name)`.

**Attention :** les cartes Leaflet doivent être initialisées APRÈS le dépliage (ou invalidateSize() appelé), sinon les tiles ne s'affichent pas correctement.

**Desktop :** garder le layout colonne actuel (pas d'accordéon, les 5 cartes restent visibles dans la sidebar droite de 220px).

---

## Fichiers clés

| Fichier | Rôle |
|---------|------|
| `app.vue` | Header global, logo, hamburger menu |
| `pages/index.vue` | Page carte, onSelectOrg, FicheModal |
| `components/NavMap.vue` | Carte Leaflet Métropole, markers, clics |
| `components/FicheModal.vue` | Modal fiche desktop (Teleport to body) |
| `components/OutremerMap.vue` | Mini-cartes DOM-TOM |
| `components/MobileSheet.vue` | Bottom sheet swipable mobile |
| `server/api/fiche/[id].get.ts` | API proxy NocoDB pour une fiche |

---

## Deploy

```bash
# Build local
cd nav-carte && npm run build

# Tar + SCP + extract dans .output/ (PAS dans /opt/nav-carte/ racine !)
tar -czf /tmp/nav-carte-output.tar.gz -C .output .
scp -P 4422 /tmp/nav-carte-output.tar.gz vps-hetzner:/tmp/
scp -P 4422 .env.production vps-hetzner:/opt/nav-carte/.env

# Sur le VPS
ssh -p 4422 vps-hetzner "rm -rf /opt/nav-carte/.output/server /opt/nav-carte/.output/public && cd /opt/nav-carte/.output && tar -xzf /tmp/nav-carte-output.tar.gz && rm /tmp/nav-carte-output.tar.gz && systemctl restart nav-carte"

# Vérifier (port 3333, pas 3000 !)
ssh -p 4422 vps-hetzner "curl -s -o /dev/null -w 'HTTP %{http_code}' http://localhost:3333/"
```

**Piège :** le service écoute sur le port **3333** (pas 3000). Le Caddyfile fait `reverse_proxy localhost:3333`.