f3ab28bd69
Composant + route chatbot non committés, runtimeConfig.ragPeUrl, ajustements layout MediaTabVisuel, contenu a-propos.
601 lines
22 KiB
Vue
601 lines
22 KiB
Vue
<template>
|
|
<div class="apropos-page">
|
|
<div class="apropos-inner">
|
|
|
|
<!-- Retour -->
|
|
<NuxtLink to="/" class="back-link">
|
|
← Retour à la carte
|
|
</NuxtLink>
|
|
|
|
<!-- ══════════════════════════════════════════════════════════
|
|
SECTION INTRO - À propos d'AEP
|
|
══════════════════════════════════════════════════════════ -->
|
|
<section class="section-mission">
|
|
<h1>À propos d'AEP</h1>
|
|
<p class="mission-text">
|
|
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.
|
|
</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>Infrastructure souveraine</h2>
|
|
<p class="section-intro">
|
|
Ce site tourne sur un VPS - un serveur privé loué en Europe - construit entièrement avec des logiciels open source, quasi gratuits. Pas de services Google, pas d'Amazon, pas de Microsoft dans la chaîne. C'est un choix délibéré : contrôler son infrastructure, c'est contrôler ses données.
|
|
</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 - conforme RGPD ; pas de collecte ni de profiling ; aucun transfert hors UE</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 ; on ne sait rien de toi</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">
|
|
Architecture d'Écologie Politique est un collectif en train de se monter - ouvert à toustes, à gouvernance partagée. 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">
|
|
Ce site a été construit grâce à l'IA, par quelqu'un qui n'est pas développeur. C'est une manière de subvertir les outils des Big Tech pour en faire quelque chose de communautaire et de souverain : une infrastructure locale, des données qu'on contrôle, un commun qui n'appartient à personne en particulier.
|
|
</p>
|
|
<p class="section-text">
|
|
L'IA est un outil. La question, c'est au service de quoi. Oui, elle est énergivore - et il faut l'assumer. Mais si c'est au service de l'émancipation, du collectif, de transformer nos infrastructures sociétales, alors on dit oui - en sachant que c'est une étape transitoire. L'infrastructure de l'IA elle-même peut évoluer : devenir plus locale, plus sobre, plus souveraine. C'est dans cette direction qu'on regarde.
|
|
</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>10 € / mois investis au départ par le collectif - vos dons constituent la réserve pour faire vivre le projet et financer ses recherches</li>
|
|
<li>Coût visible en direct dans le bandeau bas de la carte</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://trans-former.fr/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="btn-secondary"
|
|
>
|
|
Blog AEP
|
|
</a>
|
|
<a
|
|
href="https://www.instagram.com/aep.politique/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="btn-secondary"
|
|
>
|
|
Instagram
|
|
</a>
|
|
<a
|
|
href="https://liberapay.com/trans-former.fr/donate"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="btn-secondary"
|
|
>
|
|
Soutenir
|
|
</a>
|
|
<a
|
|
href="mailto:contact@trans-former.fr"
|
|
class="btn-secondary"
|
|
>
|
|
Contact
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ══════════════════════════════════════════════════════════
|
|
SECTION 7 - Open Source
|
|
══════════════════════════════════════════════════════════ -->
|
|
<section class="section section-opensource">
|
|
<h2>Code source ouvert</h2>
|
|
<p class="section-text">
|
|
Cette carte est un commun technique autant qu'un commun de ressources. Le code source est libre — tu peux le forker, l'adapter, le déployer pour ta propre cartographie d'entraide, ton territoire, ta filière.
|
|
</p>
|
|
<p class="section-text">
|
|
Une liste de ressources locales pour les artisans ? Un réseau d'entraide pour les soignants indépendants ? La structure est la même. L'IA d'enrichissement est la même. Il suffit de changer les données.
|
|
</p>
|
|
<a
|
|
href="https://git.trans-former.fr/jules/nav-carte"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="btn-github"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
|
|
Code source — git.trans-former.fr →
|
|
</a>
|
|
</section>
|
|
|
|
<!-- ══════════════════════════════════════════════════════════
|
|
SECTION 8 - API publique
|
|
══════════════════════════════════════════════════════════ -->
|
|
<section class="section section-opensource">
|
|
<h2>API publique</h2>
|
|
<p class="section-text">
|
|
Les données de ce site internet sont publiques, toutes consultables via API directe, pour que des agents IA, des développeurs, ou d'autres sites puissent interroger la base sans passer par l'interface graphique.
|
|
</p>
|
|
<p class="section-text">
|
|
<strong>Données accessibles :</strong> organisations d'entraide, pratiques d'architecture d'écologie politique (graphe complet + projets), plateformes d'emploi, RAG et ses auteurs, et toutes autres données à venir.
|
|
</p>
|
|
<div class="api-copy-box">
|
|
<code class="api-url">https://api.trans-former.fr</code>
|
|
<button class="btn-copy" @click="copyApiUrl">{{ copied ? 'Copié !' : 'Copier' }}</button>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
useHead({ title: 'À propos - AEP' })
|
|
|
|
const copied = ref(false)
|
|
function copyApiUrl() {
|
|
navigator.clipboard.writeText('https://api.trans-former.fr')
|
|
copied.value = true
|
|
setTimeout(() => { copied.value = false }, 2000)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* ── Layout ─────────────────────────────────────────────────────────────────── */
|
|
|
|
.apropos-page {
|
|
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 ──────────────────────────────────────────────────────────────────── */
|
|
|
|
.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);
|
|
}
|
|
|
|
.badge-detail {
|
|
font-size: 0.775rem;
|
|
color: var(--nav-text-muted);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
@media (min-width: 560px) {
|
|
.badge-label { 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);
|
|
}
|
|
|
|
/* ── GitHub open source ──────────────────────────────────────────────────────── */
|
|
|
|
.section-opensource {
|
|
border-top: 1px solid var(--nav-bg-alt);
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.btn-github {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 1.25rem;
|
|
background: var(--nav-surface);
|
|
border: 1px solid rgba(26, 34, 56, 0.2);
|
|
border-radius: 8px;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--nav-text);
|
|
text-decoration: none;
|
|
transition: border-color 0.15s, background 0.15s;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.btn-github:hover {
|
|
border-color: var(--nav-primary-solid);
|
|
background: var(--nav-bg-alt);
|
|
}
|
|
|
|
/* ── API copy box ────────────────────────────────────────────────────────────── */
|
|
|
|
.api-copy-box {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--nav-surface);
|
|
border: 1px solid rgba(26, 34, 56, 0.2);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.api-url {
|
|
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
|
|
font-size: 0.875rem;
|
|
color: var(--nav-primary-solid);
|
|
user-select: all;
|
|
}
|
|
|
|
.btn-copy {
|
|
padding: 0.375rem 0.75rem;
|
|
background: var(--nav-bg-alt);
|
|
border: 1px solid rgba(26, 34, 56, 0.15);
|
|
border-radius: 6px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
color: var(--nav-text);
|
|
transition: background 0.15s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn-copy:hover {
|
|
background: var(--nav-primary-solid);
|
|
color: #fff;
|
|
}
|
|
|
|
/* ── 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>
|