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>
2026-05-08 18:58:42 +02:00
parent 5967a5af57
commit f5732bf336
11 changed files with 889 additions and 137 deletions
--- a/pages/trouver-du-taf.vue
+++ b/pages/trouver-du-taf.vue
@@ -6,13 +6,50 @@
      <div class="taff-header-inner">
        <h1 class="taff-title">Trouver du taf en archi</h1>
        <p class="taff-subtitle">
-          Annuaire critique des plateformes de mise en relation archi ↔ particulier,
-          évaluées sur 5 axes éthiques — rémunération, transparence, pratiques pro, écologie, qualité du matching.
-        </p>
-        <p class="taff-cible">
-          Cette carte s'adresse aux <strong>architectes indépendants</strong> —
-          70&nbsp;% de la profession et sa part la plus précaire économiquement.
+          Annuaire critique des plateformes de mise en relation et d'appels d'offres,
+          pour les <strong>architectes indépendants</strong> — 70&nbsp;% de la profession et sa part la plus précaire économiquement.
        </p>
+
+        <!-- Pédagogie : ce qu'on évalue -->
+        <details class="taff-pedago" open>
+          <summary class="taff-pedago-summary">
+            <span>Comment on lit cette carte&nbsp;?</span>
+            <svg class="taff-pedago-chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <polyline points="6 9 12 15 18 9"/>
+            </svg>
+          </summary>
+
+          <div class="taff-pedago-body">
+            <div class="taff-pedago-block">
+              <h3>Deux onglets, deux mondes</h3>
+              <ul>
+                <li><strong>Pour archi indépendants</strong> (B2C)&nbsp;: plateformes privées qui te mettent en relation avec des particuliers (Houzz, Architoo, etc.). Modèle économique = elles te facturent l'accès aux leads.</li>
+                <li><strong>Appels d'offres publics</strong>&nbsp;: marchés publics (BOAMP, JOUE, plateformes territoriales). Procédure réglementée, gros volumes, accès aux MOE publics.</li>
+              </ul>
+            </div>
+
+            <div class="taff-pedago-block">
+              <h3>Trois étiquettes, trois niveaux de confiance</h3>
+              <ul>
+                <li><span class="taff-pedago-tag" style="background: rgba(90,122,74,0.12); color: #3d5534;">✅ Recommandé</span> validé par AEP — pratiques alignées avec une éthique architecturale (rémunération correcte, transparence, écologie, qualité du matching)</li>
+                <li><span class="taff-pedago-tag" style="background: rgba(196,164,114,0.15); color: #7a5f2a;">⚠️ Sous réserve</span> utilisable mais avec vigilance — un ou plusieurs points faibles à connaître avant de t'inscrire</li>
+                <li><span class="taff-pedago-tag" style="background: rgba(168,93,62,0.12); color: #7a3322;">❌ À éviter</span> pratiques contraires à l'intérêt des architectes (commissions abusives, dumping, appâtage, etc.)</li>
+              </ul>
+            </div>
+
+            <div class="taff-pedago-block">
+              <h3>Cinq axes d'évaluation</h3>
+              <p class="taff-pedago-axes">
+                <strong>Rémunération</strong> (commissions, leads payants) ·
+                <strong>Transparence</strong> (CGV, modèle économique) ·
+                <strong>Pratiques pro</strong> (respect du Code de déontologie) ·
+                <strong>Écologie</strong> (incitation à la réno, matériaux) ·
+                <strong>Qualité du matching</strong> (filtres, pertinence des leads).
+              </p>
+            </div>
+          </div>
+        </details>
+
        <div class="taff-stats">
          <span class="taff-stat" style="color: #3d5534;">
            <span class="taff-stat-dot" style="background: #5a7a4a;"></span>
@@ -31,7 +68,7 @@
    </div>

    <!-- ── Filtres ─────────────────────────────────────────────────── -->
-    <div class="taff-filters-bar">
+    <div class="taff-filters-bar" :class="{ 'taff-filters-bar--collapsed': !filtersExpanded }">
      <div class="taff-filters-inner">

        <!-- Onglets B2C / AO publics -->
@@ -42,7 +79,7 @@
            :class="{ 'taff-tab--active': activeTab === 'b2c' }"
            @click="activeTab = 'b2c'; resetFilters()"
          >
-            Plateformes B2C
+            Pour archi indépendants
            <span class="taff-tab-count">{{ b2cCount }}</span>
          </button>
          <button
@@ -54,8 +91,33 @@
            Appels d'offres publics
            <span class="taff-tab-count">{{ aoCount }}</span>
          </button>
+
+          <!-- Toggle filtres mobile -->
+          <button
+            type="button"
+            class="taff-filters-toggle"
+            :aria-expanded="filtersExpanded"
+            @click="filtersExpanded = !filtersExpanded"
+          >
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <line x1="4" y1="6" x2="20" y2="6"/><line x1="7" y1="12" x2="17" y2="12"/><line x1="10" y1="18" x2="14" y2="18"/>
+            </svg>
+            <span>Filtres</span>
+            <span v-if="activeFilterCount" class="taff-filters-toggle-badge">{{ activeFilterCount }}</span>
+            <svg
+              width="11" height="11" viewBox="0 0 24 24"
+              fill="none" stroke="currentColor" stroke-width="2.5"
+              stroke-linecap="round" stroke-linejoin="round"
+              :style="{ transform: filtersExpanded ? 'rotate(180deg)' : 'none', transition: 'transform 0.18s' }"
+              aria-hidden="true"
+            >
+              <polyline points="6 9 12 15 18 9"/>
+            </svg>
+          </button>
        </div>

+        <div class="taff-filters-collapsible">
+
        <!-- Filtres tag global -->
        <div class="taff-filter-group">
          <button
@@ -119,6 +181,8 @@
            @click="resetFilters"
          >Effacer</button>
        </div>
+
+        </div><!-- /.taff-filters-collapsible -->
      </div>
    </div>

@@ -408,6 +472,21 @@ const filterTag     = ref('')
 const filterSecteur = ref('')
 const search        = ref('')
 const hasFilters    = computed(() => !!(filterTag.value || filterSecteur.value || search.value))
+const activeFilterCount = computed(() => {
+  let n = 0
+  if (filterTag.value) n++
+  if (filterSecteur.value) n++
+  if (search.value) n++
+  return n
+})
+
+// Filtres ouverts par défaut sur desktop, repliés sur mobile (init côté client)
+const filtersExpanded = ref(true)
+onMounted(() => {
+  if (typeof window !== 'undefined' && window.innerWidth < 768) {
+    filtersExpanded.value = false
+  }
+})

 function resetFilters() {
  filterTag.value = ''
@@ -574,12 +653,141 @@ const parsedDescription = computed(() => {
 .taff-subtitle { font-size: 0.9375rem; color: var(--nav-text-muted); line-height: 1.6; margin-bottom: 0.625rem; }
 .taff-cible { font-size: 0.875rem; color: var(--nav-text-muted); line-height: 1.55; margin-bottom: 1rem; font-style: italic; }
 .taff-cible strong { color: var(--nav-text); font-style: normal; }
-.taff-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
+.taff-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
 .taff-stat { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; }
+
+/* Pédagogie repliable */
+.taff-pedago {
+  background: var(--nav-bg);
+  border: 1px solid var(--nav-bg-alt);
+  border-radius: 12px;
+  margin: 1rem 0 0.75rem;
+  overflow: hidden;
+}
+.taff-pedago-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--nav-text);
+  cursor: pointer;
+  list-style: none;
+}
+.taff-pedago-summary::-webkit-details-marker { display: none; }
+.taff-pedago-chevron {
+  color: var(--nav-text-muted);
+  transition: transform 0.2s ease;
+}
+.taff-pedago[open] .taff-pedago-chevron { transform: rotate(180deg); }
+.taff-pedago-body {
+  padding: 0 1rem 1rem;
+  border-top: 1px solid var(--nav-bg-alt);
+}
+.taff-pedago-block { margin-top: 0.875rem; }
+.taff-pedago-block h3 {
+  font-size: 0.78rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--nav-text-muted);
+  font-weight: 700;
+  margin: 0 0 0.5rem;
+}
+.taff-pedago-block ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.taff-pedago-block li {
+  font-size: 0.85rem;
+  line-height: 1.55;
+  color: var(--nav-text);
+}
+.taff-pedago-block li strong { font-weight: 700; }
+.taff-pedago-tag {
+  display: inline-block;
+  padding: 0.1rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  margin-right: 0.25rem;
+}
+.taff-pedago-axes {
+  font-size: 0.85rem;
+  line-height: 1.65;
+  color: var(--nav-text);
+  margin: 0;
+}
+.taff-pedago-axes strong { font-weight: 700; }
+
+@media (max-width: 600px) {
+  .taff-pedago-body { padding: 0 0.85rem 0.85rem; }
+  .taff-pedago-block li, .taff-pedago-axes { font-size: 0.82rem; }
+}
 .taff-stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

 .taff-filters-bar { position: sticky; top: 0; z-index: 100; background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt); padding: 0.75rem 1.5rem; box-shadow: 0 2px 8px rgba(26,34,56,0.06); }
 .taff-filters-inner { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
+.taff-filters-collapsible { display: contents; }
+
+/* Toggle filtres : visible uniquement sur mobile */
+.taff-filters-toggle { display: none; }
+
+@media (max-width: 767px) {
+  .taff-filters-bar { padding: 0.5rem 0.875rem; }
+  .taff-filters-inner { gap: 0.4rem; }
+  .taff-tabs { width: 100%; justify-content: space-between; }
+  .taff-tabs .taff-tab { flex: 1; justify-content: center; }
+  .taff-filters-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.375rem 0.75rem;
+    background: var(--nav-bg);
+    border: 1px solid var(--nav-bg-alt);
+    border-left: none;
+    color: var(--nav-text-muted);
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .taff-filters-toggle-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: 9999px;
+    background: var(--nav-primary-solid);
+    color: var(--nav-text-on-primary);
+    font-size: 0.7rem;
+    font-weight: 700;
+  }
+  .taff-filters-collapsible {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 0.5rem;
+    overflow: hidden;
+    max-height: 1000px;
+    transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.2s ease;
+    margin-top: 0.4rem;
+    opacity: 1;
+  }
+  .taff-filters-bar--collapsed .taff-filters-collapsible {
+    max-height: 0;
+    opacity: 0;
+    margin-top: 0;
+    pointer-events: none;
+  }
+}

 .taff-tabs { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--nav-bg-alt); flex-shrink: 0; }
 .taff-tab { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.875rem; font-size: 0.8125rem; font-weight: 500; color: var(--nav-text-muted); background: var(--nav-bg); border: none; cursor: pointer; transition: background 0.15s; }