Typo Plus Jakarta Sans + renommage libreDecision + mode démo prod + seed mandats

- Fonte : Nunito → Plus Jakarta Sans (moderne, ronde sans être toy) - Logo : ğ(Decision) → libreDecision (libre italic/muted + Decision bold) - Footer et watermark DocumentPreview mis à jour - Mode démo : DEMO_MODE flag dans config.py + auth.py (profils rapides en prod) - docker-compose : ENVIRONMENT=production explicite + DEMO_MODE=true par défaut - Seed : +décision Licence G1 v0.4.0, +3 mandats (ComTech, Admin Forgerons, Modération) runner 7→10 étapes, import Mandate/MandateStep ajouté Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Menu : Boîte à outils en premier + sidebar collapsible icônes
2026-03-24 01:22:36 +01:00 · 2026-03-17 04:21:21 +01:00
11 changed files with 1054 additions and 59 deletions
@@ -1,25 +1,88 @@
 # libreDecision
-Plateforme de decisions collectives pour la communaute Duniter/G1.
+Boîte à outils de gouvernance collective pour la communauté Duniter/G1.
 Documents modulaires sous vote permanent + protocoles de vote + mandats.
 Architecture marque blanche — vocation à être intégré dans sweethomeCloud et librodrome.
 ## Protocole de début de session
 1. `git pull --rebase origin main`
 2. Si des migrations DB sont attendues : `cd backend && alembic upgrade head`
 3. Si l'objectif de la session n'est pas précisé, le demander
 ## Stack
 - **Frontend**: Nuxt 4 + Nuxt UI v3 + Pinia + UnoCSS (port 3002)
 - **Backend**: Python FastAPI + SQLAlchemy async + PostgreSQL asyncpg (port 8002)
 - **Auth**: Duniter V2 Ed25519 challenge-response
 - **Sanctuaire**: IPFS (kubo) + hash on-chain (system.remark)
-## Commands
+- **Frontend** : Nuxt 4 (Vue 3, TypeScript) + Nuxt UI v3 + Pinia + UnoCSS ; package manager : npm
- Backend: `cd backend && uvicorn app.main:app --port 8002 --reload`
+- **Backend** : Python FastAPI + SQLAlchemy 2.0 async + PostgreSQL asyncpg ; migrations Alembic
- Backend tests: `cd backend && pytest tests/ -v`
+- **Auth** : Duniter V2 Ed25519 challenge-response (substrate-interface — stub en dev)
- Frontend: `cd frontend && npm run dev`
+- **Sanctuaire** : IPFS kubo + hash on-chain (system.remark) — TODO sprint 2
- Frontend build: `cd frontend && npm run build`
+- Déploiement : Docker multi-stage + Traefik (postgres + backend + frontend + ipfs) ; CI Woodpecker
 - Migrations: `cd backend && alembic upgrade head`
 - Docker: `docker compose -f docker/docker-compose.yml up`
-## Conventions
+## Structure
- French for UI text and documentation
+
- English for code (variable names, comments, docstrings)
+```
- API versioned under `/api/v1/`
+frontend/
- Pydantic v2 for all schemas
+  app/
- Async everywhere (SQLAlchemy, FastAPI)
+    components/       # composants Vue
- Ed25519 signatures for vote integrity
+    layouts/          # layouts Nuxt
    pages/            # routing file-based (9 pages sprint 1)
    composables/      # (1 composable sprint 1)
    stores/           # 5 Pinia stores (auth, ...)
    assets/css/
      moods.css       # système de palettes (.mood-* sur <html>)
    utils/            # (2 utils sprint 1)
  nuxt.config.ts      # port 3002, host 0.0.0.0, apiBase via NUXT_PUBLIC_API_BASE
 backend/
  app/
    routers/          # 8 routers : auth, communes, documents, protocols, votes, ...
    services/         # 6 services
    engine/           # 5 modules : formule inertie, critères Smith/TechComm, médiane
    models/           # 14 tables SQLAlchemy
  alembic/versions/   # migrations
  tests/              # 186 tests (63 intégration TDD sprint 1)
  seed.py             # Engagement Certification (33 items) + Forgeron (51 items) + Runtime Upgrade
 docker/
  docker-compose.yml         # postgres + backend + frontend + ipfs
  backend.Dockerfile
  frontend.Dockerfile
 docs/content/                # 7 docs dev + 8 docs user
 public/
  hexagram-tsing.svg         # sceau 井 (embossed)
  hexagram-tsing-flat.svg
 ```
 ## Données runtime
 - **postgres-data** : volume Docker PostgreSQL — jamais écrasé par les builds
 - **ipfs-data** : volume Docker IPFS kubo
 - `.env` à la racine : `POSTGRES_USER`, `POSTGRES_PASSWORD`, `POSTGRES_DB`, `SECRET_KEY`, `DOMAIN`, `DUNITER_RPC_URL`
 ## Commandes
 ```bash
 # Backend
 cd backend && . venv/bin/activate
 uvicorn app.main:app --port 8002 --host 0.0.0.0 --reload
 pytest tests/ -v
 alembic upgrade head
 python seed.py          # reseed Engagement Certification + Forgeron + Runtime Upgrade
 # Frontend
 cd frontend && npm run dev        # :3002
 npm run build
 # Docker
 docker compose -f docker/docker-compose.yml up
 ```
 ## Conventions / pièges
 - **UI français, code anglais** (variables, commentaires, docstrings)
 - **API** : préfixe `/api/v1/`, Pydantic v2 pour tous les schémas, async partout (SQLAlchemy + FastAPI)
 - **Auth** : `get_current_admin` (24h), `get_current_citizen` (4h), `require_super_admin`
 - **Formule inertie** : `Result = C + B^W + (M + (1-M) × (1 - (T/W)^G)) × max(0, T-C)` — voir `backend/app/engine/`
 - **Mood system** : `useMood.ts` synchronise `colorMode.preference` avec la palette — **jamais** de `:global()` dans `<style scoped>` pour les styles mood-dépendants (causa le bug dark mode veil)
 - **Sceau** `井` (#48 Tsing) : `.app-seal` dans `app.vue`, right-aligned ; SVGs dans `public/`
 - **CSS drop-shadow()** safe pour effets emboss ; `<filter>` SVG inline cause des artefacts de rendu
 - **Domaine** : libredecision.org (Woodpecker CI ; ancien dossier : Glibredecision)
 - **Ed25519 verification** : stub en dev (substrate-interface), autoritaire en prod — ne pas bypasser sans test
@@ -8,6 +8,7 @@ class Settings(BaseSettings):
    # Environment
    ENVIRONMENT: str = "development"  # development, staging, production
    DEMO_MODE: bool = False  # Enable demo profiles (quick login) regardless of ENVIRONMENT
    LOG_LEVEL: str = "INFO"
    # Database — SQLite by default for local dev, PostgreSQL for Docker/prod
@@ -147,7 +147,7 @@ async def verify_challenge(
    # 6. Get or create identity (apply dev profile if available)
    dev_profile = None
-    if settings.ENVIRONMENT == "development":
+    if settings.ENVIRONMENT == "development" or settings.DEMO_MODE:
        dev_profile = next((p for p in DEV_PROFILES if p["address"] == payload.address), None)
    identity = await get_or_create_identity(db, payload.address, dev_profile=dev_profile)
@@ -162,8 +162,8 @@ async def verify_challenge(
@router.get("/dev/profiles")
 async def list_dev_profiles():
-    """List available dev profiles for quick login. Only available in development."""
+    """List available demo profiles for quick login. Available in development or demo mode."""
-    if settings.ENVIRONMENT != "development":
+    if settings.ENVIRONMENT != "development" and not settings.DEMO_MODE:
        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="Not available")
    return DEV_PROFILES
@@ -31,6 +31,7 @@ from app.database import async_session, engine, Base, init_db
 from app.models.protocol import FormulaConfig, VotingProtocol
 from app.models.document import Document, DocumentItem
 from app.models.decision import Decision, DecisionStep
 from app.models.mandate import Mandate, MandateStep
 from app.models.user import DuniterIdentity
 from app.models.vote import VoteSession, Vote
@@ -2143,6 +2144,270 @@ async def seed_votes_on_items(
        print(f"    VoteSession for '{item.title}': created (10 pour, 1 contre)")
 # ---------------------------------------------------------------------------
 # Seed: Additional decisions (demo content)
 # ---------------------------------------------------------------------------
 async def seed_decision_licence_evolution(session: AsyncSession) -> Decision:
    """Seed a community decision: evolution of the G1 monetary license."""
    decision, created = await get_or_create(
        session,
        Decision,
        "title",
        "Évolution Licence G1 v0.4.0",
        description=(
            "Proposition d'évolution de la Licence G1 vers la version 0.4.0. "
            "Intègre les retours du forum, clarifie les engagements de certification "
            "et précise le processus de vote nuancé."
        ),
        context=(
            "La Licence G1 v0.3.0 est en vigueur depuis l'origine de la monnaie libre. "
            "Des discussions communautaires approfondies (topics 31066, 32375, 32409, 32412) "
            "ont permis d'identifier des clarifications nécessaires. "
            "Cette décision lance le processus de vote communautaire pour l'adoption "
            "de la v0.4.0 selon le protocole Vote WoT standard."
        ),
        decision_type="community",
        status="draft",
    )
    print(f"  Decision 'Évolution Licence G1 v0.4.0': {'created' if created else 'exists'}")
    if created:
        steps = [
            {
                "step_order": 1,
                "step_type": "qualification",
                "title": "Rédaction de la proposition",
                "description": (
                    "Co-rédaction de la v0.4.0 en intégrant les retours des discussions "
                    "forum. Coordination entre 1000i100, Natha, Pini et la communauté."
                ),
            },
            {
                "step_order": 2,
                "step_type": "review",
                "title": "Période de commentaires",
                "description": (
                    "Publication de la proposition sur le forum pendant 30 jours. "
                    "Recueil des amendements et objections. Intégration des retours "
                    "dans la version finale soumise au vote."
                ),
            },
            {
                "step_order": 3,
                "step_type": "vote",
                "title": "Vote WoT (nuancé)",
                "description": (
                    "Vote nuancé à 6 niveaux ouvert à tous les membres de la WoT. "
                    "Durée : 30 jours. Protocole : Vote WoT standard avec formule inertie."
                ),
            },
            {
                "step_order": 4,
                "step_type": "execution",
                "title": "Mise à jour du dépôt officiel",
                "description": (
                    "Si le seuil est atteint : mise à jour du dépôt git officiel, "
                    "calcul du hash IPFS, ancrage on-chain via system.remark."
                ),
            },
        ]
        for step_data in steps:
            step = DecisionStep(decision_id=decision.id, **step_data)
            session.add(step)
        await session.flush()
        print(f"    -> {len(steps)} steps created")
    return decision
 # ---------------------------------------------------------------------------
 # Seed: Mandates (Comité Technique + Admin Forgerons)
 # ---------------------------------------------------------------------------
 async def seed_mandates(session: AsyncSession, voters: list[DuniterIdentity]) -> None:
    """Seed example mandates: TechComm and Smith Admin."""
    now = datetime.now(timezone.utc)
    # Find Charlie (techcomm voter) as mandatee, or use first voter
    mandatee_techcomm = next(
        (v for v in voters if "Cgeek" in v.display_name or "Elois" in v.display_name),
        voters[0] if voters else None,
    )
    mandatee_smith = next(
        (v for v in voters if "Moul" in v.display_name or "Tuxmain" in v.display_name),
        voters[1] if len(voters) > 1 else None,
    )
    mandates_data = [
        {
            "title": "Mandat Comité Technique — Session 2025-2026",
            "description": (
                "Le Comité Technique (ComTech) est mandaté par la communauté pour "
                "assurer la validation technique des propositions on-chain : "
                "runtime upgrades, modifications de paramètres réseau, audits de code. "
                "Composition : 5 membres élus pour 12 mois."
            ),
            "mandate_type": "techcomm",
            "status": "active",
            "mandatee_id": mandatee_techcomm.id if mandatee_techcomm else None,
            "starts_at": now - timedelta(days=90),
            "ends_at": now + timedelta(days=275),
            "steps": [
                {
                    "step_order": 1,
                    "step_type": "candidacy",
                    "title": "Appel à candidatures",
                    "status": "completed",
                    "description": "Période de candidatures ouvertes sur le forum Duniter. Durée : 14 jours.",
                    "outcome": "5 candidats retenus : Elois, Cgeek, Maaltir, Hugo, Tuxmain",
                },
                {
                    "step_order": 2,
                    "step_type": "vote",
                    "title": "Élection par vote nuancé",
                    "status": "completed",
                    "description": "Vote WoT ouvert à tous les membres. Protocole Vote Nuancé (6 niveaux).",
                    "outcome": "Quorum atteint. 5 membres élus à plus de 70% de soutien.",
                },
                {
                    "step_order": 3,
                    "step_type": "assignment",
                    "title": "Prise de fonction",
                    "status": "completed",
                    "description": "Mise en place du ComTech, définition des processus internes de décision.",
                    "outcome": "ComTech opérationnel depuis le 2025-09-15.",
                },
                {
                    "step_order": 4,
                    "step_type": "reporting",
                    "title": "Rapport de mi-mandat",
                    "status": "active",
                    "description": "Rapport public d'activité à mi-parcours du mandat.",
                },
                {
                    "step_order": 5,
                    "step_type": "completion",
                    "title": "Fin de mandat et bilan",
                    "status": "pending",
                    "description": "Rapport final, transmission aux successeurs, renouvellement ou dissolution.",
                },
            ],
        },
        {
            "title": "Mandat Administrateur des Forgerons — Rotation 2026-Q1",
            "description": (
                "L'Administrateur des Forgerons coordonne l'onboarding des nouveaux "
                "forgerons, maintient la liste des nœuds actifs et anime les "
                "discussions techniques de la sous-WoT Smith. "
                "Mandat tournant de 6 mois, renouvelable une fois."
            ),
            "mandate_type": "smith",
            "status": "voting",
            "mandatee_id": mandatee_smith.id if mandatee_smith else None,
            "starts_at": None,
            "ends_at": None,
            "steps": [
                {
                    "step_order": 1,
                    "step_type": "formulation",
                    "title": "Définition du rôle",
                    "status": "completed",
                    "description": "Rédaction de la fiche de rôle et des responsabilités de l'Administrateur.",
                    "outcome": "Fiche de rôle validée par consensus sur le forum Duniter (topic 34201).",
                },
                {
                    "step_order": 2,
                    "step_type": "candidacy",
                    "title": "Appel à candidatures forgerons",
                    "status": "completed",
                    "description": "Candidatures ouvertes aux forgerons actifs depuis plus de 6 mois.",
                    "outcome": "2 candidats : Moul (Forgeron senior), Tuxmain (Forgeron actif).",
                },
                {
                    "step_order": 3,
                    "step_type": "vote",
                    "title": "Vote forgeron (Smith)",
                    "status": "active",
                    "description": (
                        "Vote Smith à double critère : quorum WoT + quorum forgerons. "
                        "Durée : 30 jours. En cours."
                    ),
                },
                {
                    "step_order": 4,
                    "step_type": "assignment",
                    "title": "Prise de fonction",
                    "status": "pending",
                    "description": "Passation avec l'administrateur sortant. Accès aux outils de coordination.",
                },
            ],
        },
        {
            "title": "Mandat Modération Forum — Duniter V2",
            "description": (
                "Équipe de modération élue pour maintenir la qualité des discussions "
                "sur forum.duniter.org et forum.monnaie-libre.fr. "
                "3 modérateurs, mandat de 12 mois."
            ),
            "mandate_type": "custom",
            "status": "draft",
            "mandatee_id": None,
            "starts_at": None,
            "ends_at": None,
            "steps": [
                {
                    "step_order": 1,
                    "step_type": "formulation",
                    "title": "Élaboration de la charte de modération",
                    "status": "active",
                    "description": "Définition des règles, outils et périmètre de la modération communautaire.",
                },
                {
                    "step_order": 2,
                    "step_type": "candidacy",
                    "title": "Appel à candidatures",
                    "status": "pending",
                    "description": "Ouvert à tous les membres de la WoT G1.",
                },
                {
                    "step_order": 3,
                    "step_type": "vote",
                    "title": "Élection",
                    "status": "pending",
                    "description": "Vote WoT standard.",
                },
                {
                    "step_order": 4,
                    "step_type": "assignment",
                    "title": "Prise de fonction",
                    "status": "pending",
                    "description": "Formation aux outils Discourse et mise en place de la rotation.",
                },
            ],
        },
    ]
    for m_data in mandates_data:
        steps_data = m_data.pop("steps")
        mandate, created = await get_or_create(
            session,
            Mandate,
            "title",
            m_data["title"],
            **{k: v for k, v in m_data.items() if k != "title"},
        )
        status_str = "created" if created else "exists"
        print(f"  Mandate '{mandate.title[:50]}': {status_str}")
        if created:
            for step_data in steps_data:
                step = MandateStep(mandate_id=mandate.id, **step_data)
                session.add(step)
            await session.flush()
            print(f"    -> {len(steps_data)} steps created")
 # ---------------------------------------------------------------------------
 # Main seed runner
 # ---------------------------------------------------------------------------
@@ -2154,29 +2419,32 @@ async def run_seed():
    # Ensure tables exist
    await init_db()
-    print("[0/8] Tables created.\n")
+    print("[0/10] Tables created.\n")
    async with async_session() as session:
        async with session.begin():
-            print("\n[1/8] Formula Configs...")
+            print("\n[1/10] Formula Configs...")
            formulas = await seed_formula_configs(session)
-            print("\n[2/8] Voting Protocols...")
+            print("\n[2/10] Voting Protocols...")
            protocols = await seed_voting_protocols(session, formulas)
-            print("\n[3/8] Document: Acte d'engagement Certification...")
+            print("\n[3/10] Document: Acte d'engagement Certification...")
            await seed_document_engagement_certification(session, protocols)
-            print("\n[4/8] Document: Acte d'engagement forgeron v2.0.0...")
+            print("\n[4/10] Document: Acte d'engagement forgeron v2.0.0...")
            doc_forgeron = await seed_document_engagement_forgeron(session, protocols)
-            print("\n[5/7] Decision: Runtime Upgrade...")
+            print("\n[5/10] Decision: Runtime Upgrade...")
            await seed_decision_runtime_upgrade(session)
-            print("\n[6/7] Simulated voters...")
+            print("\n[6/10] Decision: Évolution Licence G1 v0.4.0...")
            await seed_decision_licence_evolution(session)
            print("\n[7/10] Simulated voters...")
            voters = await seed_voters(session)
-            print("\n[7/7] Votes on first 3 engagements forgeron...")
+            print("\n[8/10] Votes on first 3 engagements forgeron...")
            await seed_votes_on_items(
                session,
                doc_forgeron,
@@ -2184,6 +2452,11 @@ async def run_seed():
                voters,
            )
            print("\n[9/10] Mandates...")
            await seed_mandates(session, voters)
            print("\n[10/10] Done.")
        print("\n" + "=" * 60)
        print("Seed complete.")
        print("=" * 60)
@@ -31,7 +31,9 @@ services:
    environment:
      DATABASE_URL: postgresql+asyncpg://${POSTGRES_USER:-libredecision}:${POSTGRES_PASSWORD:-change-me-in-production}@postgres:5432/${POSTGRES_DB:-libredecision}
      SECRET_KEY: ${SECRET_KEY:-change-me-in-production-with-a-real-secret-key}
      ENVIRONMENT: production
      DEBUG: "false"
      DEMO_MODE: ${DEMO_MODE:-true}
      CORS_ORIGINS: '["https://${DOMAIN:-libredecision.org}"]'
      DUNITER_RPC_URL: ${DUNITER_RPC_URL:-wss://gdev.p2p.legal/ws}
      IPFS_API_URL: http://ipfs:5001
@@ -4,6 +4,11 @@ const route = useRoute()
 const { initMood } = useMood()
 const navigationItems = [
  {
    label: 'Boîte à outils',
    icon: 'i-lucide-wrench',
    to: '/tools',
  },
  {
    label: 'Documents',
    icon: 'i-lucide-book-open',
@@ -34,6 +39,9 @@ const navigationItems = [
 /** Mobile drawer state. */
 const mobileMenuOpen = ref(false)
 /** Sidebar collapse state (icons-only mode). */
 const sidebarCollapsed = ref(false)
 /** Close mobile menu on route change. */
 watch(() => route.path, () => {
  mobileMenuOpen.value = false
@@ -43,8 +51,14 @@ watch(() => route.path, () => {
 const ws = useWebSocket()
 const { setupWsNotifications } = useNotifications()
 watch(sidebarCollapsed, (val) => {
  localStorage.setItem('libred-sidebar-collapsed', String(val))
 })
 onMounted(async () => {
  initMood()
  const savedCollapsed = localStorage.getItem('libred-sidebar-collapsed')
  if (savedCollapsed !== null) sidebarCollapsed.value = savedCollapsed === 'true'
  auth.hydrateFromStorage()
  if (auth.token) {
    try {
@@ -94,7 +108,7 @@ function isActive(to: string) {
                <UIcon name="i-lucide-gavel" class="app-header__logo-icon" />
              </span>
              <span class="app-header__logo-text">
-                <span class="app-header__logo-g">ğ</span><span class="app-header__logo-paren">(</span><span class="app-header__logo-word">Decision</span><span class="app-header__logo-paren">)</span>
+                <span class="app-header__logo-libre">libre</span><span class="app-header__logo-decision">Decision</span>
              </span>
            </NuxtLink>
          </div>
@@ -177,7 +191,7 @@ function isActive(to: string) {
      <!-- Main content with sidebar -->
      <div class="app-body">
        <!-- Desktop sidebar -->
-        <aside class="app-sidebar">
+        <aside class="app-sidebar" :class="{ 'app-sidebar--collapsed': sidebarCollapsed }">
          <nav class="app-sidebar__nav">
            <NuxtLink
              v-for="item in navigationItems"
@@ -186,9 +200,21 @@ function isActive(to: string) {
              class="app-sidebar__link"
              :class="{ 'app-sidebar__link--active': isActive(item.to) }"
            >
-              <UIcon :name="item.icon" class="text-lg" />
+              <UIcon :name="item.icon" class="text-lg flex-shrink-0" />
-              <span>{{ item.label }}</span>
+              <span class="app-sidebar__link-label">{{ item.label }}</span>
            </NuxtLink>
            <div class="app-sidebar__divider" />
            <button
              class="app-sidebar__toggle"
              :title="sidebarCollapsed ? 'Déplier le menu' : 'Replier le menu'"
              @click="sidebarCollapsed = !sidebarCollapsed"
            >
              <UIcon
                :name="sidebarCollapsed ? 'i-lucide-panel-left-open' : 'i-lucide-panel-left-close'"
                class="text-base flex-shrink-0"
              />
              <span class="app-sidebar__link-label">Replier</span>
            </button>
          </nav>
        </aside>
@@ -236,7 +262,7 @@ function isActive(to: string) {
      <!-- Footer -->
      <footer class="app-footer">
-        <span>ğ(Decision) v0.1.0</span>
+        <span>libreDecision v0.1.0</span>
        <span class="app-footer__sep">·</span>
        <span>Licence libre</span>
      </footer>
@@ -335,24 +361,17 @@ function isActive(to: string) {
  display: flex;
  align-items: baseline;
  gap: 0;
  letter-spacing: -0.01em;
 }
-.app-header__logo-g {
+.app-header__logo-libre {
-  font-size: 1.5rem;
+  font-size: 1.0625rem;
-  font-weight: 800;
+  font-weight: 400;
  color: var(--mood-accent);
  line-height: 1;
  font-style: italic;
 }
 .app-header__logo-paren {
  font-size: 1.125rem;
  font-weight: 300;
  color: var(--mood-text-muted);
  opacity: 0.5;
 }
-.app-header__logo-word {
+.app-header__logo-decision {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--mood-text);
@@ -459,6 +478,12 @@ function isActive(to: string) {
  flex-shrink: 0;
  background: var(--mood-surface);
  display: none;
  transition: width 0.22s ease;
  overflow: hidden;
 }
 .app-sidebar--collapsed {
  width: 3.75rem;
 }
@media (min-width: 768px) {
@@ -470,7 +495,7 @@ function isActive(to: string) {
 .app-sidebar__nav {
  position: sticky;
  top: 3.5rem;
-  padding: 1rem 0.75rem;
+  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
@@ -480,13 +505,15 @@ function isActive(to: string) {
  display: flex;
  align-items: center;
  gap: 0.625rem;
-  padding: 0.625rem 0.875rem;
+  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mood-text-muted);
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
 }
 .app-sidebar__link:hover {
@@ -500,6 +527,56 @@ function isActive(to: string) {
  font-weight: 700;
 }
 .app-sidebar__link-label {
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.18s ease, max-width 0.22s ease;
  max-width: 10rem;
 }
 .app-sidebar--collapsed .app-sidebar__link-label {
  opacity: 0;
  max-width: 0;
 }
 .app-sidebar--collapsed .app-sidebar__link {
  justify-content: center;
  padding: 0.625rem;
 }
 .app-sidebar__divider {
  height: 1px;
  background: color-mix(in srgb, var(--mood-accent) 10%, transparent);
  margin: 0.375rem 0.25rem;
 }
 .app-sidebar__toggle {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mood-text-muted);
  background: none;
  cursor: pointer;
  border-radius: 12px;
  width: 100%;
  transition: all 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
 }
 .app-sidebar__toggle:hover {
  color: var(--mood-text);
  background: var(--mood-accent-soft);
 }
 .app-sidebar--collapsed .app-sidebar__toggle {
  justify-content: center;
  padding: 0.5rem;
 }
 /* === Mobile nav === */
 .app-mobile-nav {
  display: flex;
@@ -1,5 +1,5 @@
 /* ==========================================================================
-   ğ(Decision) — Mood / Ambiance System
+   libreDecision — Mood / Ambiance System
   Palettes harmoniques variees, colores en lite, lumineux en dark.
   ========================================================================== */
@@ -144,7 +144,7 @@
 }
 /* ==========================================================================
-   Global design tokens — Nunito, rounded, borderless
+   Global design tokens — Plus Jakarta Sans, rounded, borderless
   ========================================================================== */
 *,
@@ -154,12 +154,12 @@
 }
 html {
-  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
+  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
 }
 body {
-  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
+  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
@@ -234,7 +234,7 @@ input:focus, select:focus, textarea:focus {
 :root [class*="u-button"],
 :root [data-variant] {
  border: none !important;
-  font-family: 'Nunito', system-ui, sans-serif !important;
+  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
 }
 :root input,
@@ -244,5 +244,5 @@ input:focus, select:focus, textarea:focus {
 :root [class*="USelect"],
 :root [class*="UTextarea"] {
  border: none !important;
-  font-family: 'Nunito', system-ui, sans-serif !important;
+  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
 }
@@ -0,0 +1,347 @@
 <script setup lang="ts">
 /**
 * DocumentPreview — clean "PDF-like" viewer for a reference document.
 *
 * Two modes:
 *  - current:   shows current_text for every item (document en vigueur)
 *  - projected: applies latest "vote" or "proposed" version per item,
 *               highlighting changed clauses (document tel qu'il serait si les
 *               votes en cours passaient)
 */
 import type { Document, DocumentItem, ItemVersion } from '~/stores/documents'
 const props = defineProps<{
  document: Document
  items: DocumentItem[]
  mode: 'current' | 'projected'
  versionMap: Record<string, ItemVersion | null>
 }>()
 const sortedItems = computed(() =>
  [...props.items].sort((a, b) => a.sort_order - b.sort_order),
 )
 const changedCount = computed(() =>
  props.mode === 'projected'
    ? Object.values(props.versionMap).filter(Boolean).length
    : 0,
 )
 function getDisplayText(item: DocumentItem): string {
  if (props.mode === 'projected' && props.versionMap[item.id]) {
    return props.versionMap[item.id]!.proposed_text
  }
  return item.current_text
 }
 function isChanged(item: DocumentItem): boolean {
  return props.mode === 'projected' && !!props.versionMap[item.id]
 }
 function itemTypeLabel(type: string): string {
  switch (type) {
    case 'clause': return 'Engagement'
    case 'rule': return 'Variable'
    case 'verification': return 'Application'
    case 'preamble': return 'Préambule'
    default: return ''
  }
 }
 const today = new Date().toLocaleDateString('fr-FR', {
  day: 'numeric',
  month: 'long',
  year: 'numeric',
 })
 </script>
 <template>
  <div class="doc-preview">
    <!-- ══ Document header ══ -->
    <div class="doc-preview__header">
      <div class="doc-preview__watermark" aria-hidden="true">
        {{ mode === 'projected' ? 'PROJECTION' : 'EN VIGUEUR' }}
      </div>
      <h1 class="doc-preview__title">{{ document.title }}</h1>
      <div class="doc-preview__meta">
        <span>Version {{ document.version }}</span>
        <span class="doc-preview__sep">·</span>
        <span>{{ document.items_count }} items</span>
        <span v-if="mode === 'projected'" class="doc-preview__proj-badge">
          <UIcon name="i-lucide-flask-conical" class="text-xs" />
          {{ changedCount }} modification{{ changedCount > 1 ? 's' : '' }} projetée{{ changedCount > 1 ? 's' : '' }}
        </span>
        <span v-else class="doc-preview__current-badge">
          <UIcon name="i-lucide-circle-check" class="text-xs" />
          Texte officiel
        </span>
      </div>
    </div>
    <!-- ══ Items ══ -->
    <div class="doc-preview__body">
      <template v-for="item in sortedItems" :key="item.id">
        <!-- Section heading -->
        <div v-if="item.item_type === 'section'" class="doc-preview__section">
          <h2 class="doc-preview__section-title">
            <UIcon name="i-lucide-bookmark" class="text-sm" style="color: var(--mood-accent)" />
            {{ item.title || item.current_text }}
          </h2>
        </div>
        <!-- Preamble -->
        <div v-else-if="item.item_type === 'preamble'" class="doc-preview__preamble">
          <MarkdownRenderer :content="getDisplayText(item)" />
        </div>
        <!-- Regular clause / rule / verification -->
        <div
          v-else
          class="doc-preview__item"
          :class="{ 'doc-preview__item--changed': isChanged(item) }"
        >
          <div class="doc-preview__item-head">
            <span class="doc-preview__item-pos">{{ item.position }}</span>
            <span v-if="item.title" class="doc-preview__item-title">{{ item.title }}</span>
            <span v-if="itemTypeLabel(item.item_type)" class="doc-preview__item-type">
              {{ itemTypeLabel(item.item_type) }}
            </span>
            <span v-if="isChanged(item)" class="doc-preview__change-chip">
              <UIcon name="i-lucide-git-branch" class="text-xs" />
              Vote en cours
            </span>
          </div>
          <div class="doc-preview__item-text">
            <MarkdownRenderer :content="getDisplayText(item)" />
          </div>
        </div>
      </template>
    </div>
    <!-- ══ Footer ══ -->
    <div class="doc-preview__footer">
      <div class="doc-preview__footer-main">
        <span>libreDecision · {{ document.title }} · v{{ document.version }}</span>
      </div>
      <div v-if="mode === 'projected'" class="doc-preview__footer-note">
        Projection non officielle — texte simulé selon {{ changedCount }} vote{{ changedCount > 1 ? 's' : '' }} en cours au {{ today }}
      </div>
    </div>
  </div>
 </template>
 <style scoped>
 .doc-preview {
  position: relative;
  background: var(--mood-surface);
  border-radius: 16px;
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 4px 32px var(--mood-shadow);
  line-height: 1.75;
  overflow: hidden;
 }
 /* ── Watermark ── */
 .doc-preview__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-35deg);
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 900;
  letter-spacing: 0.15em;
  color: var(--mood-accent);
  opacity: 0.03;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
 }
 /* ── Header ── */
 .doc-preview__header {
  text-align: center;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid color-mix(in srgb, var(--mood-accent) 20%, transparent);
 }
 .doc-preview__title {
  font-size: clamp(1.25rem, 3vw, 1.875rem);
  font-weight: 900;
  color: var(--mood-text);
  letter-spacing: -0.03em;
  margin-bottom: 0.625rem;
 }
 .doc-preview__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--mood-text-muted);
  flex-wrap: wrap;
 }
 .doc-preview__sep { opacity: 0.3; }
 .doc-preview__proj-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.625rem;
  background: color-mix(in srgb, var(--mood-warning, #f59e0b) 15%, transparent);
  color: var(--mood-warning, #d97706);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
 }
 .doc-preview__current-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.625rem;
  background: color-mix(in srgb, var(--mood-success, #16a34a) 12%, transparent);
  color: var(--mood-success, #16a34a);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
 }
 /* ── Body ── */
 .doc-preview__body {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
 }
 /* Section heading */
 .doc-preview__section {
  padding-top: 1.25rem;
  padding-bottom: 0.25rem;
 }
 .doc-preview__section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--mood-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid color-mix(in srgb, var(--mood-accent) 15%, transparent);
  padding-bottom: 0.375rem;
 }
 /* Preamble */
 .doc-preview__preamble {
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--mood-accent) 5%, transparent);
  border-radius: 12px;
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--mood-text-muted);
 }
 /* Item */
 .doc-preview__item {
  padding: 0.875rem 1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mood-bg) 35%, transparent);
  transition: background 0.15s;
 }
 .doc-preview__item--changed {
  background: color-mix(in srgb, var(--mood-warning, #f59e0b) 8%, var(--mood-surface));
  border-left: 3px solid var(--mood-warning, #f59e0b);
 }
 .doc-preview__item-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  flex-wrap: wrap;
 }
 .doc-preview__item-pos {
  font-size: 0.6875rem;
  font-weight: 800;
  font-family: monospace;
  color: var(--mood-accent);
  background: color-mix(in srgb, var(--mood-accent) 12%, transparent);
  padding: 1px 6px;
  border-radius: 6px;
  min-width: 2rem;
  text-align: center;
 }
 .doc-preview__item-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--mood-text);
 }
 .doc-preview__item-type {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--mood-text-muted);
  opacity: 0.65;
 }
 .doc-preview__change-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 1px 0.5rem;
  background: color-mix(in srgb, var(--mood-warning, #f59e0b) 18%, transparent);
  color: var(--mood-warning, #d97706);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  margin-left: auto;
 }
 .doc-preview__item-text {
  font-size: 0.9rem;
  color: var(--mood-text);
 }
 /* ── Footer ── */
 .doc-preview__footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--mood-accent) 12%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
 }
 .doc-preview__footer-main {
  font-size: 0.75rem;
  color: var(--mood-text-muted);
  font-weight: 600;
 }
 .doc-preview__footer-note {
  font-size: 0.6875rem;
  color: var(--mood-text-muted);
  font-style: italic;
  opacity: 0.7;
 }
 /* ── Print ── */
@media print {
  .doc-preview {
    box-shadow: none;
    padding: 2rem;
    background: white;
    color: black;
  }
  .doc-preview__watermark { opacity: 0.05; }
 }
 </style>
@@ -8,7 +8,7 @@
 * - Permanent vote signage
 * - Tuto overlay
 */
-import type { DocumentItem } from '~/stores/documents'
+import type { DocumentItem, ItemVersion } from '~/stores/documents'
 const route = useRoute()
 const documents = useDocumentsStore()
@@ -138,6 +138,40 @@ async function archiveToSanctuary() {
  }
 }
 // ─── View mode (editorial vs preview) ────────────────────────
 type ViewMode = 'editorial' | 'preview'
 type PreviewMode = 'current' | 'projected'
 const viewMode = ref<ViewMode>('editorial')
 const previewMode = ref<PreviewMode>('current')
 const versionsLoaded = ref(false)
 async function activatePreview() {
  viewMode.value = 'preview'
  if (!versionsLoaded.value && documents.items.length > 0) {
    const itemIds = documents.items.map(i => i.id)
    await documents.fetchAllItemVersions(slug.value, itemIds)
    versionsLoaded.value = true
  }
 }
 /** Map item_id → the active version under vote (or null). */
 const activeVersionByItem = computed((): Record<string, ItemVersion | null> => {
  const map: Record<string, ItemVersion | null> = {}
  for (const item of documents.items) {
    const versions = documents.allItemVersions[item.id] || []
    map[item.id] = versions.find(v => v.status === 'vote')
      || versions.find(v => v.status === 'proposed')
      || null
  }
  return map
 })
 const hasProjectedChanges = computed(() =>
  Object.values(activeVersionByItem.value).some(v => v !== null),
 )
 // ─── Active section (scroll spy) ──────────────────────────────
 const activeSection = ref<string | null>(null)
@@ -285,8 +319,69 @@ function toggleSection(tag: string) {
        :genesis-json="documents.current.genesis_json"
      />
      <!-- ═══ VIEW MODE TOGGLE ═══ -->
      <div class="doc-page__view-toggle">
        <div class="doc-page__view-tabs">
          <button
            class="doc-page__view-tab"
            :class="{ 'doc-page__view-tab--active': viewMode === 'editorial' }"
            @click="viewMode = 'editorial'"
          >
            <UIcon name="i-lucide-layout-list" class="text-sm" />
            Vue structurée
          </button>
          <button
            class="doc-page__view-tab"
            :class="{ 'doc-page__view-tab--active': viewMode === 'preview' }"
            @click="activatePreview"
          >
            <UIcon name="i-lucide-file-text" class="text-sm" />
            Aperçu document
            <span v-if="documents.loadingVersions" class="doc-page__view-loading">
              <UIcon name="i-lucide-loader-circle" class="text-xs animate-spin" />
            </span>
          </button>
        </div>
        <!-- Preview sub-mode (shown only in preview mode) -->
        <Transition name="fade">
          <div v-if="viewMode === 'preview'" class="doc-page__preview-modes">
            <button
              class="doc-page__preview-mode"
              :class="{ 'doc-page__preview-mode--active': previewMode === 'current' }"
              @click="previewMode = 'current'"
            >
              <UIcon name="i-lucide-circle-check" class="text-xs" />
              En vigueur
            </button>
            <button
              class="doc-page__preview-mode"
              :class="{ 'doc-page__preview-mode--active': previewMode === 'projected' }"
              :disabled="!hasProjectedChanges"
              :title="!hasProjectedChanges ? 'Aucun vote en cours sur ce document' : 'Simuler les votes en cours'"
              @click="previewMode = 'projected'"
            >
              <UIcon name="i-lucide-flask-conical" class="text-xs" />
              Selon les votes
              <span v-if="hasProjectedChanges" class="doc-page__preview-dot" />
            </button>
          </div>
        </Transition>
      </div>
      <!-- ═══ DOCUMENT PREVIEW ═══ -->
      <Transition name="fade">
        <DocumentPreview
          v-if="viewMode === 'preview'"
          :document="documents.current"
          :items="documents.items"
          :mode="previewMode"
          :version-map="activeVersionByItem"
        />
      </Transition>
      <!-- ═══ SECTION NAVIGATOR ═══ -->
-      <div v-if="sections.length > 1" class="doc-page__section-nav">
+      <div v-if="sections.length > 1 && viewMode === 'editorial'" class="doc-page__section-nav">
        <button
          v-for="section in sections"
          :key="section.tag"
@@ -301,7 +396,7 @@ function toggleSection(tag: string) {
      </div>
      <!-- ═══ SECTIONS WITH ITEMS ═══ -->
-      <div class="doc-page__sections">
+      <div v-if="viewMode === 'editorial'" class="doc-page__sections">
        <div
          v-for="section in sections"
          :key="section.tag"
@@ -590,6 +685,115 @@ function toggleSection(tag: string) {
  opacity: 1;
 }
 /* View mode toggle */
 .doc-page__view-toggle {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
 }
 .doc-page__view-tabs {
  display: flex;
  gap: 4px;
  background: var(--mood-surface);
  padding: 4px;
  border-radius: 14px;
  align-self: flex-start;
 }
 .doc-page__view-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mood-text-muted);
  background: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
 }
 .doc-page__view-tab:hover {
  color: var(--mood-text);
  background: var(--mood-accent-soft);
 }
 .doc-page__view-tab--active {
  color: var(--mood-accent);
  background: var(--mood-accent-soft);
  font-weight: 700;
 }
 .doc-page__view-loading {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
 }
 .doc-page__preview-modes {
  display: flex;
  gap: 4px;
  align-self: flex-start;
 }
 .doc-page__preview-mode {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--mood-text-muted);
  background: var(--mood-surface);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
 }
 .doc-page__preview-mode:hover:not(:disabled) {
  color: var(--mood-text);
  background: color-mix(in srgb, var(--mood-accent) 10%, var(--mood-surface));
 }
 .doc-page__preview-mode:disabled {
  opacity: 0.4;
  cursor: not-allowed;
 }
 .doc-page__preview-mode--active {
  background: var(--mood-accent);
  color: white;
 }
 .doc-page__preview-mode--active:hover:not(:disabled) {
  background: var(--mood-accent);
  color: white;
 }
 .doc-page__preview-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mood-warning, #f59e0b);
  position: absolute;
  top: 4px;
  right: 4px;
 }
 /* Fade transition */
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity 0.2s ease;
 }
 .fade-enter-from,
 .fade-leave-to {
  opacity: 0;
 }
 /* Section collapse transition */
 .section-collapse-enter-active,
 .section-collapse-leave-active {
@@ -68,6 +68,8 @@ interface DocumentsState {
  current: Document | null
  items: DocumentItem[]
  versions: ItemVersion[]
  allItemVersions: Record<string, ItemVersion[]>
  loadingVersions: boolean
  loading: boolean
  error: string | null
 }
@@ -78,6 +80,8 @@ export const useDocumentsStore = defineStore('documents', {
    current: null,
    items: [],
    versions: [],
    allItemVersions: {},
    loadingVersions: false,
    loading: false,
    error: null,
  }),
@@ -247,6 +251,28 @@ export const useDocumentsStore = defineStore('documents', {
      }
    },
    /**
     * Fetch all versions for every item in a document (parallel).
     * Used to compute the "projected" view (document as-if all active votes passed).
     */
    async fetchAllItemVersions(slug: string, itemIds: string[]) {
      this.loadingVersions = true
      try {
        const { $api } = useApi()
        const results = await Promise.allSettled(
          itemIds.map(id => $api<ItemVersion[]>(`/documents/${slug}/items/${id}/versions`)),
        )
        const map: Record<string, ItemVersion[]> = {}
        itemIds.forEach((id, i) => {
          const r = results[i]
          map[id] = r.status === 'fulfilled' ? r.value : []
        })
        this.allItemVersions = map
      } finally {
        this.loadingVersions = false
      }
    },
    /**
     * Archive a document into the Sanctuary.
     */
@@ -280,6 +306,8 @@ export const useDocumentsStore = defineStore('documents', {
      this.current = null
      this.items = []
      this.versions = []
      this.allItemVersions = {}
      this.loadingVersions = false
    },
  },
 })
@@ -29,7 +29,7 @@ export default defineNuxtConfig({
      link: [
        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
-        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800&display=swap' },
+        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&display=swap' },
        { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css' },
      ],
      script: [