nav-carte/pages/manifeste.vue

<template>
  <div class="manifeste-page">
    <div class="manifeste-inner">

      <NuxtLink to="/" class="back-link">← Retour à la carte</NuxtLink>

      <h1 class="manifeste-title">Manifeste — Architecture d'Écologie Politique</h1>

      <p class="lede">
        <em>Un quart des architectes vivent sous le seuil de pauvreté. La moitié de nos heures, non facturées. Nos cotisations, parmi les plus lourdes des professions réglementées. Et le secteur du bâtiment, à lui seul, pèse 34&nbsp;% des émissions mondiales de gaz à effet de serre.</em>
      </p>

      <p>
        Quelque chose s'est rompu — pas dans nos vies, dans les cadres qui les contiennent.
      </p>

      <p>
        Notre profession ne traverse pas une simple crise. Elle reflète l'effondrement d'un monde qui confond performance et destruction, signature et silence, expertise et soumission.
      </p>

      <hr />

      <h2>Ce que nous voyons.</h2>

      <p>
        À l'échelle du métier, une profession structurellement sous l'eau, qui absorbe les tensions d'un système extractiviste — et porte la responsabilité quand d'autres captent la valeur.
      </p>

      <p>
        À l'échelle des corps, une culture qui rend l'exploitation désirable&nbsp;: métier-passion, modèle starchitecte, isolement libéral, moteur critique délégitimant. Nous tenons. Nous payons.
      </p>

      <p>
        À l'échelle du monde, l'effondrement écologique et social qui avance, pendant que notre voix s'efface du débat public. Notre silence le sert.
      </p>

      <hr />

      <h2>Ce que nous refusons.</h2>

      <p class="refus">
        Nous ne signerons plus pour des projets qui détruisent.<br />
        Nous n'isolerons plus celles et ceux qui doutent.<br />
        Nous ne porterons plus seul·es ce qui doit se penser, se faire — et se soigner — ensemble.
      </p>

      <hr />

      <p class="pivot">
        <strong>Et pourtant, quelque chose tient.</strong>
      </p>

      <p class="pivot-suite">
        Pas l'espoir naïf, ni la promesse héroïque. Quelque chose de plus humble&nbsp;: la fatigue commune reconnue, et l'envie qui revient de ne plus économiser sa vie.
      </p>

      <hr />

      <h2>Ce que nous tentons.</h2>

      <p>
        <em>Partager.</em> Nos parcours, nos doutes, nos bifurcations. Se former les un·es les autres. Se tendre la main. Documenter ce qui marche, ce qui rate. Le personnel devient politique quand il se met en commun.
      </p>

      <p>
        <em>Construire.</em> L'infrastructure collective qui nous a manqué. Cartes d'entraide, communs documentés, gouvernance horizontale, financement transparent, infra souveraine. <strong>Architecture d'Écologie Politique</strong>&nbsp;: un commun vivant, ouvert, biorégional, ancré.
      </p>

      <p>
        <em>Pratiquer une médecine du corps social.</em> Diagnostiquer les infrastructures qui défaillent — l'éducation, la justice, la sécurité, l'énergie, la santé, le logement, l'agriculture. Proposer des reconfigurations situées, territoire par territoire. Reprendre le pouvoir par la base. Écrire, lentement, un nouveau contrat social.
      </p>

      <p>
        <em>Commencer par les marges.</em> Là où le corps social souffre le plus, là où il est le plus prêt à changer. Ne pas décider à la place — faire émerger. Transparence totale, sur le process et sur l'argent. Tendresse militante&nbsp;: la lucidité sans le mépris, l'engagement sans la dureté.
      </p>

      <hr />

      <h2>Architectes, allié·es, habitant·es.</h2>

      <p>
        Nous avons un travail à faire ensemble. Lentement, patiemment, par accumulation de petits gestes situés. Pas pour fuir — pour bifurquer.
      </p>

      <p class="chute">
        <em>Nos métiers sont des médecines. Reprenons-en le pouls — à mains nues, ensemble.</em>
      </p>

      <hr />

      <p class="cta-wrap">
        <a
          href="https://www.trans-former.fr/"
          target="_blank"
          rel="noopener noreferrer"
          class="btn-blog"
        >
          En lire plus — blog AEP →
        </a>
      </p>

    </div>
  </div>
</template>

<script setup lang="ts">
useHead({
  title: 'Manifeste — AEP',
  meta: [
    { name: 'description', content: 'Manifeste d\'Architecture d\'Écologie Politique — un commun vivant pour bifurquer ensemble.' },
  ],
})
</script>

<style scoped>
.manifeste-page {
  min-height: 100vh;
  background: var(--nav-bg);
  padding: 1.5rem 1rem 5rem;
  overflow-x: hidden;
  width: 100%;
}

.manifeste-inner {
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

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

.manifeste-title {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--nav-text);
  margin: 0 0 1.5rem;
  line-height: 1.25;
}

.lede {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--nav-text);
  margin: 0 0 1.25rem;
  border-left: 3px solid var(--nav-primary-solid);
  padding-left: 1rem;
  opacity: 0.85;
}

p {
  font-size: 0.975rem;
  line-height: 1.75;
  color: var(--nav-text);
  margin: 0 0 1.1rem;
}

h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--nav-text);
  margin: 2rem 0 1rem;
  letter-spacing: 0.01em;
}

hr {
  border: none;
  border-top: 1px solid var(--nav-bg-alt);
  margin: 2rem 0;
}

.refus {
  font-style: normal;
}

.pivot {
  font-size: 1.15rem;
  text-align: center;
  margin: 2rem 0 1rem;
  font-style: italic;
}

.pivot strong {
  font-weight: 700;
  font-style: normal;
}

.pivot-suite {
  text-align: center;
  font-style: italic;
  opacity: 0.85;
}

.chute {
  font-size: 1.05rem;
  text-align: center;
  margin-top: 1.5rem;
  color: var(--nav-text);
}

.cta-wrap {
  text-align: center;
  margin: 2rem 0 0;
}

.btn-blog {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: var(--nav-primary);
  color: var(--nav-text-on-primary);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}

.btn-blog:hover { opacity: 0.85; }

@media (max-width: 480px) {
  .manifeste-page { padding: 1rem 0.85rem 4rem; }
  .manifeste-title { font-size: 1.4rem; }
  .lede { font-size: 0.95rem; padding-left: 0.85rem; }
  p { font-size: 0.95rem; }
  .pivot { font-size: 1.05rem; }
}
</style>