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/lib/components/UnitBlock.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import type { Shown } from '$lib/doc.svelte';
+  import { i18n, t } from '$lib/i18n/index.svelte';
+  import Prose from './Prose.svelte';
+
+  let {
+    text,
+    mark = 'unchanged',
+    seedMinimal = false,
+    enteredAt = null,
+    rivals = 0,
+    selected = false,
+    actions = true,
+    onaction,
+  }: {
+    text: Shown;
+    mark?: 'unchanged' | 'added' | 'replaced' | 'removed';
+    seedMinimal?: boolean;
+    enteredAt?: string | null;
+    rivals?: number;
+    selected?: boolean;
+    actions?: boolean;
+    onaction: (tab: 'vote' | 'proposals' | 'propose') => void;
+  } = $props();
+</script>
+
+<article class="unit {mark}" class:selected>
+  <header>
+    <h2 class="eyebrow">{text.title}</h2>
+    {#if mark !== 'unchanged'}<span class="tag {mark === 'removed' ? 'ochre' : 'moss'}">{t(`doc.mark.${mark}`)}</span>{/if}
+    {#if text.stale}<span class="tag ochre">{t('doc.lang.stale')}</span>{:else if text.missing}<span class="tag">{t('doc.lang.missing')}</span>{/if}
+  </header>
+  <Prose text={text.body} />
+  {#if actions}
+    <footer class="actions">
+      <span class="status faint">
+        {#if seedMinimal}<span title={t('doc.seed.long')}>{t('doc.seed')} · 0 vote</span>
+        {:else if enteredAt}{t('doc.adopted', { date: i18n.date(enteredAt) })}{/if}
+      </span>
+      <span class="links">
+        <button type="button" onclick={() => onaction('vote')}>{t('doc.action.vote')}</button>
+        <button type="button" onclick={() => onaction('proposals')}>{t('doc.action.proposals')}{#if rivals > 0} · {rivals}{/if}</button>
+        <button type="button" onclick={() => onaction('propose')}>{t('doc.action.propose')}</button>
+      </span>
+    </footer>
+  {/if}
+</article>
+
+<style>
+  .unit {
+    position: relative;
+    padding: 1.1rem 1.3rem 0.9rem;
+    margin: 0 -1.3rem;
+    border-radius: var(--r-card);
+    transition: background-color 0.18s ease;
+  }
+  .unit + :global(.unit) {
+    margin-top: 0.5rem;
+  }
+  .unit:hover,
+  .unit:focus-within,
+  .unit.selected {
+    background: var(--surface);
+    box-shadow: var(--shadow);
+  }
+  header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.55rem;
+  }
+  .removed :global(.prose) {
+    text-decoration: line-through;
+    text-decoration-thickness: 1px;
+    color: var(--ink-faint);
+  }
+  .added,
+  .replaced {
+    background: var(--moss-wash);
+  }
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.4rem 1rem;
+    margin-top: 0.7rem;
+    min-height: 2.25rem;
+    font-size: 0.84rem;
+  }
+  .links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.2rem;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+  .unit:hover .links,
+  .unit:focus-within .links,
+  .unit.selected .links {
+    opacity: 1;
+  }
+  .links button {
+    border: 0;
+    background: transparent;
+    color: var(--water);
+    font-weight: 750;
+    padding: 0.35rem 0.6rem;
+    min-height: 2.25rem;
+    border-radius: var(--r-pill);
+  }
+  .links button:hover {
+    background: var(--water-wash);
+  }
+  @media (hover: none) {
+    .links {
+      opacity: 1;
+    }
+  }
+</style>