diff --git a/app.vue b/app.vue index 81a5b05..83b0010 100644 --- a/app.vue +++ b/app.vue @@ -7,21 +7,16 @@ style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);" > - +
AEP
-
- AEP - -
- -
- Architecture d'Écologie Politique +
+ Architecture + d'Écologie Politique
@@ -178,11 +173,14 @@ @click="hamburgerOpen = false" > Écosystème Entraide Architecture - Réseaux AEP + Réseaux AEP + Jobs RAG Codev
+ Manifeste À propos + Soutenir → Signaler
@@ -262,6 +260,21 @@ function goRandom() { diff --git a/components/MissionPopup.vue b/components/MissionPopup.vue new file mode 100644 index 0000000..787d5d9 --- /dev/null +++ b/components/MissionPopup.vue @@ -0,0 +1,181 @@ + + + + + diff --git a/pages/a-propos.vue b/pages/a-propos.vue index d9660aa..199d31c 100644 --- a/pages/a-propos.vue +++ b/pages/a-propos.vue @@ -8,16 +8,12 @@ -
-

Architecture d'Écologie Politique

+

À propos d'AEP

- L'architecture est l'une des professions les plus complexes qui soit ; elle croise droit, technique, esthétique, économie, social, écologie - tout à la fois, tout simultanément, souvent sans filet. Paradoxalement, c'est aussi l'une des moins structurées sur le plan de l'entraide : peu de transmission horizontale, beaucoup d'isolement, une culture du chacun-pour-soi héritée d'une formation qui prépare à la compétition plus qu'à la coopération. On sort de l'école seul.e. On s'installe seul.e. On réinvente ce que d'autres ont déjà traversé. -

-

- Cette carte est née de cette frustration - et de cette conviction : les ressources existent, les gens qui ont réussi à sortir la tête de l'eau aussi. L'enjeu, c'est de les documenter, de les rendre accessibles, de les ajuster en temps réel grâce aux retours de la communauté. Pas un catalogue figé ; un commun vivant, au service de ceux et celles qui cherchent à faire évoluer leur pratique vers quelque chose de plus épanouissant, mieux rémunéré, au service de la société - et qui prend soin de la santé, la nôtre et celle des gens pour qui nous construisons. + AEP — Architecture d'Écologie Politique — est un commun vivant : une infrastructure d'entraide, de ressources documentées et de cartographies au service d'une profession en mutation. Ce site rassemble trois cartes (entraide, réseaux engagés, plateformes de mise en relation), un manifeste, une transparence radicale sur l'IA et le financement, et une gouvernance partagée.

@@ -209,11 +205,14 @@ useHead({ title: 'À propos - AEP' }) min-height: 100vh; background: var(--nav-bg); padding: 1.5rem 1rem 5rem; + overflow-x: hidden; + width: 100%; } .apropos-inner { max-width: 720px; margin: 0 auto; + width: 100%; } /* ── Retour ──────────────────────────────────────────────────────────────────── */ @@ -322,13 +321,16 @@ useHead({ title: 'À propos - AEP' }) font-size: 0.875rem; font-weight: 600; color: var(--nav-text); - white-space: nowrap; } .badge-detail { font-size: 0.775rem; color: var(--nav-text-muted); - white-space: nowrap; + line-height: 1.4; +} + +@media (min-width: 560px) { + .badge-label { white-space: nowrap; } } @media (max-width: 559px) { diff --git a/pages/agences.vue b/pages/agences.vue index 27e84b8..c2f1dfb 100644 --- a/pages/agences.vue +++ b/pages/agences.vue @@ -196,7 +196,7 @@ - +
+
@@ -248,8 +255,25 @@
- - + +
+ + + + +
+ + +
@@ -379,6 +403,36 @@ @update:modelValue="chatbotOpen = $event" /> + + + + +

+ Cette carte rassemble 120 réseaux, collectifs et agences qui pratiquent une architecture engagée — écologique, politique, biorégionale. Ce ne sont pas seulement des agences « vertes » : ce sont celles et ceux qui assument des positions, refusent des projets, expérimentent des modèles de gouvernance, mettent leurs ressources et leurs savoirs en commun. +

+

+ Six familles structurent la cartographie : militants, agences engagées, collectifs de production, ressources communes, recherche, formations alternatives. Filtre par hashtag, ouvre la fiche d'une structure, navigue le graphe (3e onglet) pour voir les affinités. Si tu animes ou connais un réseau qui devrait y être : propose-le. +

+
+
@@ -405,8 +459,17 @@ const hoveredId = ref(null) const ficheModalOpen = ref(false) const ficheModalId = ref(null) const chatbotOpen = ref(false) -const mobileMapView = ref<'metropole' | 'outremer'>('metropole') +const mobileMapView = ref<'metropole' | 'outremer' | 'graphe'>('metropole') const desktopMapView = ref<'metropole' | 'outremer' | 'graphe'>('metropole') +const missionOpen = ref(false) + +onMounted(() => { + try { + if (!localStorage.getItem('aep_reseaux_seen')) { + missionOpen.value = true + } + } catch {} +}) // Filtres const search = ref('') @@ -514,3 +577,29 @@ function onSelectStructureMobile(id: string) { useHead({ title: "AEP - Réseaux de bifurcation architecturale" }) + + diff --git a/pages/index.vue b/pages/index.vue index 6e9c7a5..93a8767 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -312,6 +312,26 @@ @highlightOrgs="onHighlightOrgs" /> + + + + + @@ -344,6 +364,15 @@ const chatbotOpen = ref(false) const ficheModalOpen = ref(false) const ficheModalId = ref(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 | null = null @@ -575,3 +604,29 @@ function fonctionsList(org: Org): string[] { useHead({ title: 'AEP — Cartographie de l\'écologie politique architecturale' }) + + diff --git a/pages/manifeste.vue b/pages/manifeste.vue new file mode 100644 index 0000000..1726ef1 --- /dev/null +++ b/pages/manifeste.vue @@ -0,0 +1,239 @@ + + + + + diff --git a/pages/trouver-du-taf.vue b/pages/trouver-du-taf.vue index 8a745e7..79e194a 100644 --- a/pages/trouver-du-taf.vue +++ b/pages/trouver-du-taf.vue @@ -6,13 +6,50 @@

Trouver du taf en archi

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

-

- Cette carte s'adresse aux architectes indépendants — - 70 % 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 architectes indépendants — 70 % de la profession et sa part la plus précaire économiquement.

+ + +
+ + Comment on lit cette carte ? + + + +
+
+

Deux onglets, deux mondes

+
    +
  • Pour archi indépendants (B2C) : 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.
  • +
  • Appels d'offres publics : marchés publics (BOAMP, JOUE, plateformes territoriales). Procédure réglementée, gros volumes, accès aux MOE publics.
  • +
+
+ +
+

Trois étiquettes, trois niveaux de confiance

+
    +
  • ✅ Recommandé validé par AEP — pratiques alignées avec une éthique architecturale (rémunération correcte, transparence, écologie, qualité du matching)
  • +
  • ⚠️ Sous réserve utilisable mais avec vigilance — un ou plusieurs points faibles à connaître avant de t'inscrire
  • +
  • ❌ À éviter pratiques contraires à l'intérêt des architectes (commissions abusives, dumping, appâtage, etc.)
  • +
+
+ +
+

Cinq axes d'évaluation

+

+ Rémunération (commissions, leads payants) · + Transparence (CGV, modèle économique) · + Pratiques pro (respect du Code de déontologie) · + Écologie (incitation à la réno, matériaux) · + Qualité du matching (filtres, pertinence des leads). +

+
+
+
+
@@ -31,7 +68,7 @@
-
+
@@ -42,7 +79,7 @@ :class="{ 'taff-tab--active': activeTab === 'b2c' }" @click="activeTab = 'b2c'; resetFilters()" > - Plateformes B2C + Pour archi indépendants {{ b2cCount }} + + +
+
+
+ +
@@ -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; }