feat(mobile+UX): refonte hamburger, pop-ups Mission, Manifeste, fixes mobile

Hamburger:
- Ajout Jobs, Manifeste, Soutenir
- Ré-ordonnancement (cartes/RAG/Codev en haut, ressources en bas)

Pop-ups Mission:
- MissionPopup générique (slot, props title/ctaLabel/storageKey)
- Auto-show 1ère visite Carte 1 (Entraide) et Carte 2 (Réseaux AEP)
- Bouton (i) flottant pour rouvrir

Pages:
- /manifeste : nouvelle page (texte version page-carto-V1)
- /a-propos : section 1 retirée (devient pop-up Carte 1) + scroll latéral fixé
- /agences : 3e onglet "Graphe" sur mobile + labels structures sur GraphView
- /trouver-du-taf : intro pédagogique repliable (onglets / tags / 5 axes),
  filtres mobile repliables, "Plateformes B2C" → "Pour archi indépendants"

Mobile UX:
- FAB coeur jaune Soutenir retiré (BandeauBas) — accessible via hamburger
- FicheModal/V2 : décalage top:76px sur mobile pour ne plus mordre header
- Logo header : "Architecture d'Écologie / Politique" en clair (2 lignes)

Cause racine résolue:
- /api/chatbot-reseaux n'avait jamais été déployé → 404 en prod avant ce build

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jules Neny
2026-05-08 18:58:42 +02:00
parent 5967a5af57
commit f5732bf336
11 changed files with 889 additions and 137 deletions

View File

@@ -312,6 +312,26 @@
@highlightOrgs="onHighlightOrgs"
/>
<!-- POP-UP MISSION ENTRAIDE -->
<button
class="mission-info-btn"
type="button"
@click="missionOpen = true"
aria-label="À propos de cette carte d'entraide"
title="À propos de cette carte"
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="10"/>
<line x1="12" y1="16" x2="12" y2="12"/>
<line x1="12" y1="8" x2="12.01" y2="8"/>
</svg>
</button>
<MissionPopup
:modelValue="missionOpen"
@update:modelValue="missionOpen = $event"
/>
</div>
</template>
@@ -344,6 +364,15 @@ const chatbotOpen = ref(false)
const ficheModalOpen = ref(false)
const ficheModalId = ref<number | null>(null)
const mobileMapView = ref<'metropole' | 'outremer'>('metropole')
const missionOpen = ref(false)
onMounted(() => {
try {
if (!localStorage.getItem('aep_mission_seen')) {
missionOpen.value = true
}
} catch {}
})
// Surlignage temporaire (5 sec) suite à une réponse chatbot
// → sélectionne le premier ID recommandé sur la carte, puis remet à null
let highlightTimer: ReturnType<typeof setTimeout> | null = null
@@ -575,3 +604,29 @@ function fonctionsList(org: Org): string[] {
useHead({ title: 'AEP — Cartographie de l\'écologie politique architecturale' })
</script>
<style scoped>
.mission-info-btn {
position: fixed;
bottom: 24px;
left: 16px;
z-index: 1000;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: var(--nav-surface);
color: var(--nav-text-muted);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 12px rgba(26,34,56,0.18);
cursor: pointer;
transition: opacity 0.15s, transform 0.1s;
}
.mission-info-btn:hover { opacity: 0.85; transform: translateY(-1px); color: var(--nav-text); }
@media (min-width: 1024px) {
.mission-info-btn { bottom: 16px; left: 340px; }
}
</style>