Vouvoiement, libreDecision : bouton + URL

- Vouvoiement partout dans les pages numerique (cloud-libre, logiciel-libre, wot)
- Bouton "Ouvrir libreDecision" dans home AxisBlock (Décision collective)
  - AxisAction supporte href pour liens externes
  - URL prod : decision.librodrome.org
- Labels "Ouvrir libreDecision" (sans Ğ) dans citoyenne/index et [slug]
- app.config.ts : URL prod libredecision mise à jour

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/app.config.ts

@@ -21,7 +21,7 @@ export default defineAppConfig({
     },
   },
   libredecision: {
-    url: import.meta.dev ? 'http://localhost:3002' : 'https://decision.laplank.org',
+    url: import.meta.dev ? 'http://localhost:3002' : 'https://decision.librodrome.org',
   },
   sejeteral0: {
     url: import.meta.dev ? 'http://localhost:3009' : 'https://collectivites.librodrome.org',

app/components/home/AxisBlock.vue

@@ -52,16 +52,18 @@
         <div v-if="item.actions?.length" class="axis-actions">
           <!-- Primary row -->
           <div class="axis-actions-row">
-            <button
+            <component
+              :is="action.href ? 'a' : 'button'"
               v-for="action in primaryActions(item.actions)"
               :key="action.id"
+              v-bind="action.href ? { href: action.href, target: '_blank', rel: 'noopener noreferrer' } : {}"
               class="axis-action-btn"
               :class="{ 'axis-action-btn--highlight': action.highlight }"
-              @click.stop="handleAction(action.id)"
+              @click.stop="!action.href && handleAction(action.id)"
             >
               <div :class="iconClass(action.icon)" class="h-3.5 w-3.5" />
               {{ action.label }}
-            </button>
+            </component>
           </div>
           <!-- Secondary row -->
           <div v-if="secondaryActions(item.actions).length" class="axis-actions-secondary">
@@ -91,6 +93,7 @@ interface AxisAction {
   highlight?: boolean
   secondary?: boolean
   to?: string
+  href?: string
 }
 
 interface AxisItem {

app/pages/citoyenne/[slug].vue

@@ -1,25 +1,67 @@
 <template>
   <div class="section-padding">
     <div class="container-content">
-      <div class="mx-auto max-w-2xl">
+
+      <!-- Header -->
+      <div class="mx-auto max-w-2xl text-center mb-8">
         <div class="section-icon mx-auto mb-6">
           <div :class="`i-lucide-${content?.icon ?? 'landmark'}`" class="h-12 w-12" />
         </div>
-
         <p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase text-center">
           {{ content?.kicker }}
         </p>
-
+        <h1 class="font-display text-3xl font-bold mb-4" style="color: hsl(var(--color-text))">
-        <h1 class="font-display text-3xl font-bold mb-4 text-center" style="color: hsl(var(--color-text))">
           {{ content?.title ?? slug }}
         </h1>
-
+        <p class="text-lg leading-relaxed" style="color: hsl(var(--color-text-muted))">
-        <p class="text-lg leading-relaxed mb-8 text-center" style="color: hsl(var(--color-text-muted))">
           {{ content?.description }}
         </p>
+      </div>
 
-        <!-- Features grid (for decision page) -->
+      <!-- Navigation prev / index / next -->
-        <div v-if="content?.features" class="grid gap-4 sm:grid-cols-2 mb-12">
+      <nav class="ctx-nav mx-auto max-w-2xl mb-10">
+        <NuxtLink v-if="prevItem?.to" :to="prevItem.to" class="ctx-nav-btn ctx-nav-prev">
+          <div class="i-lucide-arrow-left h-4 w-4 shrink-0" />
+          <span>{{ prevItem.label }}</span>
+        </NuxtLink>
+        <div v-else class="ctx-nav-spacer" />
+
+        <NuxtLink to="/citoyenne" class="ctx-nav-btn ctx-nav-index">
+          <div class="i-lucide-layout-grid h-4 w-4" />
+          <span>Citoyenne</span>
+        </NuxtLink>
+
+        <NuxtLink v-if="nextItem?.to" :to="nextItem.to" class="ctx-nav-btn ctx-nav-next">
+          <span>{{ nextItem.label }}</span>
+          <div class="i-lucide-arrow-right h-4 w-4 shrink-0" />
+        </NuxtLink>
+        <div v-else class="ctx-nav-spacer" />
+      </nav>
+
+      <!-- Zone sections — relative pour ancrer le sidebar -->
+      <div class="sections-area">
+
+        <!-- Sidebar sommaire -->
+        <aside v-if="sommaire.length > 1" class="page-sidebar">
+          <nav class="sommaire-sidebar">
+            <p class="sommaire-sidebar-title">Sur cette page</p>
+            <ol class="sommaire-sidebar-list">
+              <li v-for="(entry, ei) in sommaire" :key="ei">
+                <a :href="`#${entry.id}`" class="sommaire-sidebar-link">
+                  <span class="sommaire-n">{{ ei + 1 }}</span>
+                  <span>{{ entry.title }}</span>
+                </a>
+              </li>
+            </ol>
+          </nav>
+        </aside>
+
+        <!-- Features grid -->
+        <div
+          v-if="content?.features"
+          id="section-features"
+          class="grid gap-4 sm:grid-cols-2 mb-12 max-w-2xl mx-auto section-anchor"
+        >
           <div v-for="feature in content.features" :key="feature.title" class="feature-card">
             <div class="feature-icon">
               <div :class="`i-lucide-${feature.icon} h-5 w-5`" />
@@ -30,7 +72,11 @@
         </div>
 
         <!-- Project card -->
-        <div v-if="content?.project" class="project-card mb-8">
+        <div
+          v-if="content?.project"
+          id="section-project"
+          class="project-card mb-8 max-w-2xl mx-auto section-anchor"
+        >
           <div class="project-icon">
             <div class="i-lucide-rocket h-5 w-5" />
           </div>
@@ -47,27 +93,30 @@
         </div>
 
         <!-- Extended content -->
-        <div v-if="content?.content" class="prose-block mb-10">
+        <div
+          v-if="content?.content"
+          id="section-content"
+          class="prose-block mb-10 max-w-2xl mx-auto section-anchor"
+        >
           <p class="leading-relaxed whitespace-pre-line" style="color: hsl(var(--color-text-muted))">
             {{ content.content }}
           </p>
         </div>
 
-        <div class="text-center flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
+        <!-- Actions -->
+        <div class="text-center flex flex-col items-center gap-3 sm:flex-row sm:justify-center mb-4">
           <UiBaseButton v-if="slug === 'decision'" :href="decisionUrl" target="_blank">
             <div class="i-lucide-external-link mr-2 h-4 w-4" />
-            Ouvrir Glibredecision
+            Ouvrir libreDecision
           </UiBaseButton>
           <UiBaseButton v-if="slug === 'tarifs-eau'" :href="sejeteral0Url" target="_blank">
             <div class="i-lucide-external-link mr-2 h-4 w-4" />
             Lancer SejeteralO
           </UiBaseButton>
-          <UiBaseButton variant="ghost" to="/citoyenne">
-            <div class="i-lucide-arrow-left mr-2 h-4 w-4" />
-            Autonomie citoyenne
-          </UiBaseButton>
         </div>
-      </div>
+
+      </div><!-- /sections-area -->
+
     </div>
   </div>
 </template>
@@ -76,15 +125,35 @@
 const route = useRoute()
 const slug = route.params.slug as string
 
-const { data: content } = await usePageContent(`citoyenne/${slug}`)
+const [{ data: content }, { data: homeData }] = await Promise.all([
+  usePageContent(`citoyenne/${slug}`),
+  usePageContent('home'),
+])
 
 const appConfig = useAppConfig()
 const decisionUrl = (appConfig.libredecision as { url: string })?.url ?? '#'
 const sejeteral0Url = (appConfig.sejeteral0 as { url: string })?.url ?? '#'
 
-useHead({
+// Sommaire
-  title: content.value?.meta?.title ?? slug,
+const sommaire = computed(() => {
+  const entries: { title: string; id: string }[] = []
+  if ((content.value?.features as unknown[])?.length) entries.push({ title: 'Fonctionnalités', id: 'section-features' })
+  if (content.value?.project) entries.push({ title: (content.value.project as { name: string }).name, id: 'section-project' })
+  if (content.value?.content) entries.push({ title: 'En savoir plus', id: 'section-content' })
+  return entries
 })
+
+// Prev / next dans la section citoyenne
+interface AxisItem { label: string; to?: string; icon?: string }
+const politiqueItems = computed<AxisItem[]>(
+  () => (homeData.value as Record<string, unknown> | null)?.axes?.politique?.items as AxisItem[] ?? [],
+)
+const currentPath = `/citoyenne/${slug}`
+const currentIdx = computed(() => politiqueItems.value.findIndex(i => i.to === currentPath))
+const prevItem = computed(() => currentIdx.value > 0 ? politiqueItems.value[currentIdx.value - 1] : null)
+const nextItem = computed(() => currentIdx.value < politiqueItems.value.length - 1 ? politiqueItems.value[currentIdx.value + 1] : null)
+
+useHead({ title: content.value?.meta?.title ?? slug })
 </script>
 
 <style scoped>
@@ -156,4 +225,149 @@ useHead({
   border-radius: 0.75rem;
   background: hsl(var(--color-surface));
 }
+
+.section-anchor {
+  scroll-margin-top: 5.5rem;
+}
+
+/* ── Navigation prev/next ── */
+.ctx-nav {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.ctx-nav-spacer { min-width: 0; }
+
+.ctx-nav-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.5rem 0.875rem;
+  border-radius: 20px;
+  text-decoration: none;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: hsl(var(--color-text-muted));
+  background: hsl(var(--color-surface));
+  border: 1px solid hsl(var(--color-text) / 0.08);
+  transition: all 0.15s;
+  min-width: 0;
+}
+
+.ctx-nav-btn:hover {
+  color: hsl(var(--color-primary));
+  border-color: hsl(var(--color-primary) / 0.25);
+  background: hsl(var(--color-primary) / 0.05);
+}
+
+.ctx-nav-prev { justify-content: flex-start; }
+.ctx-nav-next { justify-content: flex-end; }
+
+.ctx-nav-prev span,
+.ctx-nav-next span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ctx-nav-index {
+  justify-content: center;
+  background: hsl(var(--color-primary) / 0.08);
+  border-color: hsl(var(--color-primary) / 0.15);
+  color: hsl(var(--color-primary));
+  font-size: 0.75rem;
+  padding: 0.45rem 0.75rem;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.ctx-nav-index:hover { background: hsl(var(--color-primary) / 0.15); }
+
+@media (max-width: 480px) {
+  .ctx-nav { grid-template-columns: auto 1fr auto; }
+  .ctx-nav-prev span, .ctx-nav-next span { display: none; }
+  .ctx-nav-prev, .ctx-nav-next { padding: 0.5rem; }
+}
+
+/* ── Zone sections ── */
+.sections-area {
+  position: relative;
+}
+
+/* ── Sidebar sommaire ── */
+.page-sidebar {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 10.5rem;
+  height: 100%;
+}
+
+@media (min-width: 1300px) {
+  .page-sidebar { display: block; }
+}
+
+.sommaire-sidebar {
+  position: sticky;
+  top: 5.5rem;
+  padding: 0.875rem;
+  border-radius: 14px;
+  background: hsl(var(--color-surface));
+  border: 1px solid hsl(var(--color-text) / 0.07);
+}
+
+.sommaire-sidebar-title {
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: hsl(var(--color-text-muted));
+  margin: 0 0 0.6rem;
+}
+
+.sommaire-sidebar-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.sommaire-sidebar-link {
+  display: flex;
+  align-items: baseline;
+  gap: 0.45rem;
+  padding: 0.28rem 0.4rem;
+  border-radius: 8px;
+  text-decoration: none;
+  font-size: 0.75rem;
+  color: hsl(var(--color-text-muted));
+  line-height: 1.4;
+  transition: color 0.12s, background 0.12s;
+}
+
+.sommaire-sidebar-link:hover {
+  color: hsl(var(--color-primary));
+  background: hsl(var(--color-primary) / 0.06);
+}
+
+.sommaire-n {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.2rem;
+  height: 1.2rem;
+  border-radius: 50%;
+  background: hsl(var(--color-primary) / 0.1);
+  color: hsl(var(--color-primary));
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  font-weight: 700;
+  flex-shrink: 0;
+}
 </style>

app/pages/citoyenne/index.vue

@@ -363,7 +363,7 @@
           <div class="item-actions">
             <a :href="decisionUrl" target="_blank" rel="noopener" class="action-btn action-btn--primary">
               <div class="i-lucide-external-link h-3.5 w-3.5" />
-              Ouvrir Glibredecision
+              Ouvrir libreDecision
             </a>
           </div>
         </div>

site/pages/home.yml

@@ -109,6 +109,12 @@ axes:
         description: Se donner les moyens de la décision collective.
         to: /citoyenne/decision
         icon: gavel
+        actions:
+          - id: open-libredecision
+            label: Ouvrir libreDecision
+            icon: external-link
+            highlight: true
+            href: https://decision.librodrome.org
       - label: Tarifs de l'eau
         description: Application pour obtenir justice sociale et incitation dynamique à la réduction. Permet de confier la
           décision à la population des communes.

site/pages/numerique/authentification-wot.yml

@@ -24,19 +24,19 @@ sections:
         title: Mots de passe
         text: >
           Stockés côté serveur, volés par millions. Have I Been Pwned recense
-          des milliards de comptes compromis. Ta sécurité dépend intégralement
+          des milliards de comptes compromis. Votre sécurité dépend intégralement
-          de la sécurité d'un tiers que tu ne contrôles pas.
+          de la sécurité d'un tiers que vous ne contrôlez pas.
       - icon: chrome
         title: "Se connecter avec Google"
         text: >
           Déléguer l'authentification à Google ou Meta, c'est en faire l'infrastructure
-          d'identité mondiale. Un compte suspendu = toutes tes connexions coupées.
+          d'identité mondiale. Un compte suspendu = toutes vos connexions coupées.
-          Ces entreprises savent quand, où et à quoi tu te connectes.
+          Ces entreprises savent quand, où et à quoi vous vous connectez.
       - icon: fingerprint
         title: Biométrie — irrévocable
         text: >
           Un mot de passe compromis se change. Une empreinte digitale jamais.
-          Si tes données biométriques sont volées — et elles l'ont été
+          Si vos données biométriques sont volées — et elles l'ont été
           (OPM breach USA 2015, 5,6 millions d'empreintes) — la compromission est définitive.
       - icon: building-2
         title: Autorités de Certification (X.509)
@@ -49,22 +49,22 @@ sections:
     title: Comment fonctionne une Web of Trust
     steps:
       - n: 1
-        title: Générer une paire de clés sur ta machine
+        title: Générer une paire de clés sur votre machine
         text: >
-          Clé privée (secrète, ne quitte jamais ton appareil) et clé publique
+          Clé privée (secrète, ne quitte jamais votre appareil) et clé publique
           (diffusée librement). Ce qui est signé avec la clé privée peut être
           vérifié par n'importe qui avec la clé publique.
         tip: "Algorithme recommandé : Ed25519 — clé courte, rapide, sans paramètres douteux"
       - n: 2
-        title: Publier ta clé publique
+        title: Publier votre clé publique
         text: >
-          Dans un DID Document, sur un keyserver, dans ton profil Duniter.
+          Dans un DID Document, sur un keyserver, dans votre profil Duniter.
-          N'importe qui peut vérifier tes signatures. Personne ne peut usurper
+          N'importe qui peut vérifier vos signatures. Personne ne peut usurper
-          ton identité sans ta clé privée.
+          votre identité sans votre clé privée.
       - n: 3
         title: Être certifié par des membres certifiés
         text: >
-          Dans Duniter, 5 membres certifiés (sigQty=5) certifient que tu es une personne réelle,
+          Dans Duniter, 5 membres certifiés (sigQty=5) certifient que vous êtes une personne réelle,
           dans un rayon de 3 sauts du nœud sentinelle (stepMax=3).
           La confiance émerge du graphe — pas d'un serveur central.
       - n: 4
@@ -78,7 +78,7 @@ sections:
         text: >
           La même clé permet de s'authentifier à des services
           et de signer des actes (documents, transactions, votes).
-          Tout ce que tu fais est vérifiable. Rien n'est transmissible à ton insu.
+          Tout ce que vous faites est vérifiable. Rien n'est transmissible à votre insu.
 
   - type: insight
     title: Le seul système sans autorité centrale ni biométrie

site/pages/numerique/cloud-libre.yml

@@ -6,8 +6,8 @@ title: Cloud libre
 icon: cloud
 
 description: >
-  Tes données vivent dans des datacenters dont tu ne connais pas l'adresse,
+  Vos données vivent dans des datacenters dont vous ne connaissez pas l'adresse,
-  sous des juridictions que tu ne contrôles pas. Sortir de là est possible —
+  sous des juridictions que vous ne contrôlez pas. Sortir de là est possible —
   en trois paliers : auto-hébergement, services fédérés, architectures décentralisées.
   Ces dernières émergent à peine.
 
@@ -23,13 +23,13 @@ sections:
       - icon: shield
         title: RGPD — conformité structurelle
         text: >
-          Google, Amazon, Microsoft stockent tes données sous juridiction américaine (CLOUD Act).
+          Google, Amazon, Microsoft stockent vos données sous juridiction américaine (CLOUD Act).
           L'auto-hébergement ou un hébergeur associatif européen offre
           une conformité RGPD structurelle — pas seulement déclarative.
       - icon: eye-off
         title: Vie privée des données
         text: >
-          Dans un cloud commercial, tes documents, photos et communications
+          Dans un cloud commercial, vos documents, photos et communications
           sont analysés, profilés, monétisés. Ce n'est pas une théorie —
           c'est le modèle économique déclaré.
       - icon: zap
@@ -40,10 +40,10 @@ sections:
           Héberger chez soi ou mutualiser dans un hébergeur associatif
           réduit l'empreinte réelle.
       - icon: key
-        title: Propriété réelle de tes données
+        title: Propriété réelle de vos données
         text: >
-          Un service cloud peut fermer, changer ses CGU, couper ton compte.
+          Un service cloud peut fermer, changer ses CGU, couper votre compte.
-          Tes données te reviennent quand tu les héberges toi-même —
+          Vos données vous reviennent quand vous les hébergez vous-même —
           portabilité réelle, pas juste un bouton "Exporter".
       - icon: git-branch
         title: Résilience décentralisée
@@ -60,7 +60,7 @@ sections:
         icon: server
         badge: Maîtrise totale
         text: >
-          Ton propre serveur chez toi ou chez un hébergeur associatif.
+          Votre propre serveur chez vous ou chez un hébergeur associatif.
           Contrôle absolu, RGPD pleinement compatible.
           YunoHost installe plus de 200 applications libres en un clic.
         tools:
@@ -74,8 +74,8 @@ sections:
         badge: Interconnecté
         text: >
           Des instances indépendantes interconnectées via des protocoles ouverts
-          (ActivityPub, Matrix). Tu rejoins un serveur de confiance
+          (ActivityPub, Matrix). Vous rejoignez un serveur de confiance
-          ou héberges le tien. Les données restent chez l'opérateur choisi.
+          ou hébergez le vôtre. Les données restent chez l'opérateur choisi.
         tools:
           - "Mastodon — réseau social fédéré"
           - "PeerTube — vidéo hébergée et fédérée"
@@ -175,7 +175,7 @@ sections:
       C'est une tension réelle, non résolue, que le législateur européen commence à instruire
       (lignes directrices CEPD 02/2025).
     points:
-      - "Auto-hébergement : conformité RGPD totale — tu effaces ce que tu veux"
+      - "Auto-hébergement : conformité RGPD totale — vous effacez ce que vous voulez"
       - "Services fédérés : dépend de l'opérateur de l'instance — choisir un hébergeur CHATONS"
       - "IPFS / blockchain : chiffrer + détruire la clé (la donnée devient inintelligible). Accepté par la CNIL sous conditions strictes."
       - "Off-chain data : stocker uniquement un hash sur la chaîne, les données personnelles sur un serveur effaçable — approche la plus propre"

site/pages/numerique/logiciel-libre.yml

@@ -39,20 +39,20 @@ sections:
       - icon: users
         title: Bien commun
         text: >
-          Le logiciel libre est un commun numérique. Tu n'es pas client, tu participes.
+          Le logiciel libre est un commun numérique. Vous n'êtes pas client, vous participez.
           Cohérent avec l'économie du don — l'argent économisé sur les licences
           peut financer des communs.
       - icon: lock-open
         title: Indépendance réelle
         text: >
           Pas de mise à jour forcée qui casse le système. Pas d'abonnement qui expire
-          et verrouille tes fichiers. Ton OS t'appartient vraiment.
+          et verrouille vos fichiers. Votre OS vous appartient vraiment.
       - icon: bot
         title: Assistance permanente gratuite
         text: >
           Un LLM open source installé localement (Ollama + phi3:mini, 4 Go de RAM)
-          peut rédiger les commandes shell dans ton terminal sur simple demande en français.
+          peut rédiger les commandes shell dans votre terminal sur simple demande en français.
-          Sans connexion à aucun serveur. Sans abonnement. Sans envoyer tes données.
+          Sans connexion à aucun serveur. Sans abonnement. Sans envoyer vos données.
 
   - type: fiche
     title: "Fiche de migration — 6 étapes"
@@ -65,8 +65,8 @@ sections:
       - n: 2
         title: Tester sans risque — Live USB
         text: >
-          Démarre Linux Mint depuis une clé USB. Tu explores, tu testes LibreOffice,
+          Démarrez Linux Mint depuis une clé USB. Vous explorez, testez LibreOffice,
-          tu vérifies le WiFi — sans toucher à ton Windows existant.
+          vérifiez le WiFi — sans toucher à votre Windows existant.
         tip: "Créer la clé : balenaEtcher (gratuit) + image Linux Mint sur linuxmint.com"
       - n: 3
         title: Choisir sa distribution
@@ -77,8 +77,8 @@ sections:
       - n: 4
         title: Installer — double-boot ou remplacement
         text: >
-          Double-boot si tu veux garder Windows le temps de la transition.
+          Double-boot si vous voulez garder Windows le temps de la transition.
-          Remplacement complet quand tu es prêt·e — c'est le vrai départ.
+          Remplacement complet quand vous êtes prêt·e — c'est le vrai départ.
       - n: 5
         title: Installer ses équivalents libres
         text: >
@@ -175,9 +175,9 @@ sections:
   - type: llm
     title: Un assistant shell local — sans cloud
     text: >
-      Un petit LLM open source sur ta machine répond à tes questions sur les commandes Linux
+      Un petit LLM open source sur votre machine répond à vos questions sur les commandes Linux
       en langage naturel, sans envoyer aucune donnée à un serveur distant.
-      Il suggère. Toi tu décides.
+      Il suggère. Vous décidez.
     tool: Ollama
     tool_url: https://ollama.com
     model: "phi3:mini"
@@ -187,7 +187,7 @@ sections:
       - "ollama pull phi3:mini"
       - "ollama run phi3:mini \"Comment trouver les fichiers modifiés depuis 7 jours ?\""
     rules:
-      - Lis chaque commande avant de l'exécuter — le LLM suggère, tu valides
+      - Lisez chaque commande avant de l'exécuter — le LLM suggère, vous validez
       - "Utilise --dry-run ou -n quand disponible (rsync, make…)"
       - Pour les commandes root/sudo, vérification manuelle obligatoire
       - "Préfère phi3:mini ou qwen2.5-coder — pas les modèles uncensored"