jules/nav-carte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(aep): carte AEP — push Gitea 2026-04-28

Browse Source
This commit is contained in:
Jules Neny
2026-04-28 14:00:05 +02:00
commit 21c44d8193
86 changed files with 31855 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

477
pages/a-propos.vue.tmp.47800.1777123068982 Normal file
View File

@@ -0,0 +1,477 @@
<template>
<div class="apropos-page">
<div class="apropos-inner">
<!-- Retour -->
<NuxtLink to="/" class="back-link">
← Retour à la carte
</NuxtLink>
<!-- ══════════════════════════════════════════════════════════
SECTION 1 — Mission AEP
══════════════════════════════════════════════════════════ -->
<!-- TODO Jules : Écrire le pitch (~100 mots) — qui est AEP, pour qui, pourquoi, quelle promesse -->
<section class="section-mission">
<h1>Architecture d'Écologie Politique</h1>
<p class="mission-text">
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é.
</p>
<p class="mission-text">
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.
</p>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 2 — Souveraineté technique
══════════════════════════════════════════════════════════ -->
<!-- TODO Jules : Écrire 1-2 phrases d'intro sur la posture technique (pourquoi c'est important pour toi) -->
<section class="section">
<h2>Souveraineté technique</h2>
<p class="section-intro">
Ce site a été construit en une journée par quelqu'un qui n'est pas développeur. C'est délibéré : l'IA permet aujourd'hui de structurer des outils d'émancipation collective sans expertise technique préalable, à condition de choisir des briques sobres et souveraines. L'architecture est simple ; le chatbot tourne sur un modèle léger, peu gourmand en énergie. Pas de dépendance aux infrastructures américaines, pas de collecte de données ni de logique de monétisation.
</p>
<div class="badges-row">
<div class="badge">
<span class="badge-icon" aria-hidden="true">
<!-- Mistral logo placeholder -->
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
</span>
<span class="badge-label">IA souveraine</span>
<span class="badge-detail">Mistral AI, Paris</span>
</div>
<div class="badge">
<span class="badge-icon" aria-hidden="true">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<span class="badge-label">Hébergé en Europe</span>
<span class="badge-detail">Hetzner, Allemagne</span>
</div>
<div class="badge">
<span class="badge-icon" aria-hidden="true">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</span>
<span class="badge-label">Zéro cookie US</span>
<span class="badge-detail">Pas de Google Analytics, pas de Meta Pixel, pas de tracker tiers</span>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 3 — Gouvernance
══════════════════════════════════════════════════════════ -->
<!-- TODO Jules : Écrire qui porte ce projet, le collectif, la posture politique, le lien Liberapay -->
<section class="section">
<h2>Gouvernance</h2>
<p class="section-text">
Il m'a fallu cinq ans après les études pour sortir la tête de l'eau et commencer à avoir une pratique un peu plus alignée avec qui je suis. Cinq ans de chemin solitaire, à chercher des ressources qui n'existaient pas - ou qui existaient quelque part, mais que personne ne partageait. Ce qui m'a le plus sidéré, c'est le silence des anciens : pas par malveillance, mais parce qu'eux aussi étaient dans leur galère, la tête baissée, à serrer les dents. Atomisé·es, chacun·e dans son monde. Cette carte est née de l'envie que ça change.
</p>
<p class="section-text">
Architecture d'Écologie Politique est un collectif en train de se monter - ouvert à toustes, à gouvernance horizontale, sans hiérarchie de droit. Les décisions se prennent en transparence. Si tu veux participer, contribuer, ou simplement suivre ce qui se construit : tu es la bienvenu·e. Contact : <a href="mailto:contact@trans-former.fr" class="text-link">contact@trans-former.fr</a>
</p>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 4 — Transparence Liberapay
══════════════════════════════════════════════════════════ -->
<!-- TODO Jules : Écrire pourquoi Liberapay (pas Patreon, pas Ko-fi), le modèle de financement voulu -->
<section class="section section-liberapay">
<h2>Soutenir le projet</h2>
<p class="section-text">
Ce projet est participatif, libre, open source. Il existe parce que la communauté l'utilise - et il ne peut continuer à exister que si la communauté le soutient.
</p>
<p class="section-text">
Le financer, c'est soutenir la structuration d'un écosystème d'entraide architecturale qui, aujourd'hui, est assez défaillant. Si toi aussi tu as manqué de ressources en chemin, si tu as dû réinventer seul·e ce que d'autres avaient déjà compris, si tu as cherché un filet et ne l'as pas trouvé - tu sais exactement pourquoi ça compte. Ce que tu mets dans la cagnotte ne va pas dans une boîte ; ça va dans un outil qui permet que la prochaine génération d'architectes ait ce que nous n'avons pas eu : un réseau d'entraide qui fonctionne, au service de pratiques plus épanouissantes, plus politiques, plus écologiques.
</p>
<p class="liberapay-note">
Liberapay est une plateforme open source EU (ASBL belge non-lucrative), 0% de frais.
</p>
<!-- Bouton CTA -->
<a
href="https://liberapay.com/trans-former.fr/donate"
target="_blank"
rel="noopener noreferrer"
class="btn-liberapay"
>
Soutenir sur Liberapay →
</a>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 5 — Transparence IA
══════════════════════════════════════════════════════════ -->
<!-- TODO Jules : Écrire la posture sur l'IA — pourquoi ces modèles, pourquoi la transparence, ce que ça signifie politiquement -->
<section id="ia" class="section">
<h2>Transparence IA</h2>
<p class="section-text">
Les Big Tech cachent leurs coûts parce qu'ils n'ont pas intérêt à ce que tu les voies. Afficher ce qu'on dépense ici, c'est un acte politique : sobriété choisie, modèles européens, rapport assumé aux outils — pas par vertu, mais par cohérence avec ce qu'on construit.
</p>
<div class="ia-grid">
<div class="ia-card">
<div class="ia-card-label">Enrichissement des fiches</div>
<div class="ia-card-model">Mistral Nemo</div>
<div class="ia-card-cost">~0,00003 €/fiche</div>
</div>
<div class="ia-card">
<div class="ia-card-label">Chatbot de recherche</div>
<div class="ia-card-model">Mistral Small</div>
<div class="ia-card-cost">~0,003 €/requête</div>
</div>
</div>
<ul class="ia-details">
<li>Budget plafonné à 20 € / mois — coupure automatique si dépassement</li>
<li>Coût visible en direct dans le bandeau bas de la carte</li>
<li>Aucun modèle US, aucune donnée transmise hors UE</li>
</ul>
</section>
<!-- ══════════════════════════════════════════════════════════
SECTION 6 — Contribuer
══════════════════════════════════════════════════════════ -->
<!-- TODO Jules : Écrire l'invitation à contribuer — ton, posture, ce qu'on attend des contributeurs -->
<section class="section section-contribuer">
<h2>Contribuer</h2>
<p class="section-text">
Il n'y a pas de barre d'entrée ici. Une correction, une ressource à signaler, un retour sur ta propre expérience — c'est déjà participer à quelque chose qui grandit par accumulation de petits gestes.
</p>
<div class="contribuer-ctas">
<NuxtLink to="/contribuer" class="btn-primary">
Proposer une fiche →
</NuxtLink>
<a
href="https://liberapay.com/trans-former.fr/donate"
target="_blank"
rel="noopener noreferrer"
class="btn-secondary"
>
Soutenir financièrement
</a>
<a
href="https://mail.trans-former.fr/subscription/form"
target="_blank"
rel="noopener noreferrer"
class="btn-secondary"
>
S'inscrire à l'infolettre
</a>
<a
href="mailto:contact@trans-former.fr"
class="btn-secondary"
>
Nous contacter
</a>
</div>
</section>
</div>
</div>
</template>
<script setup lang="ts">
useHead({ title: 'À propos — AEP' })
</script>
<style scoped>
/* ── Layout ─────────────────────────────────────────────────────────────────── */
.apropos-page {
min-height: 100vh;
background: var(--nav-bg);
padding: 1.5rem 1rem 5rem;
}
.apropos-inner {
max-width: 720px;
margin: 0 auto;
}
/* ── Retour ──────────────────────────────────────────────────────────────────── */
.back-link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.875rem;
color: var(--nav-primary-solid);
opacity: 0.7;
text-decoration: none;
margin-bottom: 2rem;
transition: opacity 0.15s;
}
.back-link:hover {
opacity: 1;
}
/* ── Sections ────────────────────────────────────────────────────────────────── */
.section-mission,
.section {
margin-bottom: 3rem;
}
.section-mission h1 {
font-size: 1.75rem;
font-weight: 700;
color: var(--nav-text);
margin: 0 0 1rem;
line-height: 1.2;
}
.section h2 {
font-size: 1.2rem;
font-weight: 700;
color: var(--nav-text);
margin: 0 0 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--nav-bg-alt);
}
.mission-text,
.section-intro,
.section-text {
font-size: 0.95rem;
color: var(--nav-text);
line-height: 1.65;
margin: 0 0 1rem;
}
.section-intro {
color: var(--nav-text-muted);
margin-bottom: 1.25rem;
}
.text-link {
color: var(--nav-primary-solid);
text-decoration: underline;
text-underline-offset: 2px;
}
.text-link:hover {
opacity: 0.75;
}
/* ── Badges souveraineté ──────────────────────────────────────────────────────── */
.badges-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.badge {
display: inline-flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.625rem 0.875rem;
background: var(--nav-bg-alt);
border-radius: 9999px;
flex-direction: column;
min-width: 160px;
flex: 1;
}
@media (min-width: 560px) {
.badge {
flex-direction: row;
align-items: center;
flex: none;
min-width: auto;
}
}
.badge-icon {
color: var(--nav-text-muted);
flex-shrink: 0;
display: flex;
align-items: center;
}
.badge-label {
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;
}
@media (max-width: 559px) {
.badge {
border-radius: 12px;
padding: 0.75rem 1rem;
}
.badge-label {
font-size: 0.9rem;
}
}
/* ── Liberapay ───────────────────────────────────────────────────────────────── */
.liberapay-note {
font-size: 0.8rem;
color: var(--nav-text-muted);
margin: 0 0 1rem;
font-style: italic;
}
.btn-liberapay {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.625rem 1.25rem;
background: var(--nav-primary);
color: var(--nav-text-on-primary);
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
transition: background 0.15s;
}
.btn-liberapay:hover {
background: rgba(26, 34, 56, 0.75);
}
/* ── IA grid ─────────────────────────────────────────────────────────────────── */
.ia-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 1rem;
}
@media (max-width: 480px) {
.ia-grid {
grid-template-columns: 1fr;
}
}
.ia-card {
background: var(--nav-surface);
border: 1px solid rgba(26, 34, 56, 0.1);
border-radius: 10px;
padding: 1rem 1.125rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.ia-card-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--nav-text-muted);
font-weight: 600;
}
.ia-card-model {
font-size: 1rem;
font-weight: 700;
color: var(--nav-text);
}
.ia-card-cost {
font-size: 0.825rem;
color: var(--nav-text-muted);
font-variant-numeric: tabular-nums;
}
.ia-details {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.ia-details li {
font-size: 0.875rem;
color: var(--nav-text-muted);
padding-left: 1rem;
position: relative;
line-height: 1.5;
}
.ia-details li::before {
content: '—';
position: absolute;
left: 0;
color: var(--nav-text-muted);
opacity: 0.5;
}
/* ── CTAs contribuer ─────────────────────────────────────────────────────────── */
.contribuer-ctas {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1rem;
}
.btn-primary {
display: inline-flex;
align-items: center;
padding: 0.75rem 1.5rem;
background: var(--nav-accent);
color: var(--nav-text);
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: opacity 0.15s;
}
.btn-primary:hover {
opacity: 0.85;
}
.btn-secondary {
display: inline-flex;
align-items: center;
padding: 0.75rem 1.25rem;
background: transparent;
color: var(--nav-text-muted);
border: 1px solid rgba(26, 34, 56, 0.2);
border-radius: 8px;
font-size: 0.9rem;
text-decoration: none;
transition: border-color 0.15s, color 0.15s;
}
.btn-secondary:hover {
border-color: var(--nav-primary-solid);
color: var(--nav-text);
}
/* ── Responsive général ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.apropos-page {
padding: 1rem 0.75rem 4rem;
}
.section-mission h1 {
font-size: 1.4rem;
}
.contribuer-ctas {
flex-direction: column;
}
.btn-primary,
.btn-secondary {
width: 100%;
justify-content: center;
}
}
</style>