v3 : interface Svelte — accueil, groupes, lecteur du texte en vigueur, panneau contextuel, éditeur à assistant, trustinWallet

- Accueil sobre, menu complet à gauche (Décisions, Docs de référence, Mandats,
  Protocoles), intro demandée, quatre sections, connexion Ğ1.
- Lecteur : texte en vigueur en Literata, actions contextuelles par article
  (le vote, propositions, proposer), propositions en cours sous la « surface »
  avec leur niveau d'eau, aperçus « si les bien cotées passent » / « si tout
  passe », langue du texte fr/en/es (traductions éditoriales).
- Panneau : vote pour/contre, seuil et formule (MathML), inertie et son
  changement (voté en inertie +), coquille sans vote, traduction, signalement
  de contradiction, historique des corrections.
- trustinWallet (/acces) : groupes et membres, invitations à usage unique,
  administrateurs, retours d'usage.
- Contrôles : vitest (markdown, catalogues, anti-lexique), Playwright C1–C10 + M1.
- Sections du seed portées jusqu'à l'écran.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/routes/groupes/+page.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { api } from '$lib/api';
+  import Guard from '$lib/components/Guard.svelte';
+  import Icon from '$lib/components/Icon.svelte';
+  import { t } from '$lib/i18n/index.svelte';
+  import { Remote } from '$lib/load.svelte';
+  import type { GroupSummary } from '$lib/types';
+
+  const data = new Remote(() => api.get<{ groups: GroupSummary[] }>('/groups'));
+  onMount(() => void data.load());
+
+  const groups = $derived(data.value?.groups ?? []);
+  const root = $derived(groups.find((g) => g.slug === 'monnaie-libre'));
+  const sameKey = $derived(groups.filter((g) => g.parent === 'monnaie-libre'));
+  const others = $derived(groups.filter((g) => g.slug !== 'monnaie-libre' && g.parent !== 'monnaie-libre'));
+</script>
+
+{#if data.error}
+  <Guard code={data.error} onretry={() => data.load()} />
+{:else if data.value}
+  <div class="page">
+    <h1>{t('groups.title')}</h1>
+
+    {#if root}
+      <a class="root card" class:locked={!root.open} href={root.open ? `/g/${root.slug}` : undefined}>
+        <span class="eyebrow">Ğ1</span>
+        <span class="name">{root.name}</span>
+        {#if !root.open}<span class="lock"><Icon name="lock" size={16} />{t('groups.locked')}</span>{/if}
+      </a>
+    {/if}
+
+    {#if sameKey.length}
+      <h2 class="eyebrow sub">{t('groups.same.key')}</h2>
+      <ul class="list">
+        {#each sameKey as g (g.slug)}
+          <li>
+            {#if g.open}
+              <a class="row card" href="/g/{g.slug}"><span class="name">{g.name}</span><Icon name="chevron" size={16} /></a>
+            {:else}
+              <div class="row card locked" title={t('groups.locked.long')}>
+                <span class="name">{g.name}</span>
+                <span class="lock"><Icon name="lock" size={15} />{t('groups.locked')}</span>
+              </div>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+      {#if sameKey.some((g) => !g.open)}<p class="faint note">{t('groups.locked.long')}</p>{/if}
+    {/if}
+
+    {#if others.length}
+      <h2 class="eyebrow sub">{t('groups.test')}</h2>
+      <ul class="list">
+        {#each others as g (g.slug)}
+          <li>
+            <a class="row card" href={g.open ? `/g/${g.slug}` : undefined} class:locked={!g.open}>
+              <span class="name">{g.name}</span><Icon name={g.open ? 'chevron' : 'lock'} size={16} />
+            </a>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+
+    {#if !groups.length}<p class="muted">{t('groups.empty')}</p>{/if}
+  </div>
+{/if}
+
+<style>
+  .page {
+    max-width: 42rem;
+    margin: 0 auto;
+    padding: clamp(2.5rem, 8vh, 5rem) 1.4rem 5rem;
+    display: grid;
+    gap: 1rem;
+  }
+  h1 {
+    font-family: var(--font-text);
+    font-weight: 500;
+    font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.5rem);
+    margin-bottom: 0.6rem;
+  }
+  .root {
+    display: grid;
+    gap: 0.3rem;
+    padding: 1.6rem 1.6rem 1.7rem;
+    color: var(--ink);
+    text-decoration: none;
+    transition: transform 0.12s ease;
+  }
+  a.root:hover,
+  a.row:hover {
+    transform: translateY(-3px);
+  }
+  .root .name {
+    font-family: var(--font-text);
+    font-size: 1.7rem;
+    font-weight: 500;
+  }
+  .sub {
+    margin-top: 1.4rem;
+    color: var(--ink-soft);
+  }
+  .list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 0.6rem;
+  }
+  .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 1.2rem;
+    color: var(--ink);
+    text-decoration: none;
+    transition: transform 0.12s ease;
+  }
+  .row .name {
+    font-weight: 750;
+  }
+  .locked {
+    background: transparent;
+    box-shadow: inset 0 0 0 1px var(--surface-2);
+    color: var(--ink-faint);
+  }
+  .lock {
+    display: inline-flex;
+    gap: 0.35rem;
+    align-items: center;
+    font-size: 0.82rem;
+    font-weight: 700;
+  }
+  .note {
+    font-size: 0.88rem;
+  }
+</style>