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/WaterLevel.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  // The signature of this tool: a proposal rises toward the surface as its
+  // « for » votes approach the threshold; reached, it stands full, in moss.
+  import { t } from '$lib/i18n/index.svelte';
+  import type { Evaluation, Tally } from '$lib/types';
+
+  let {
+    tally,
+    evaluation,
+    blocked = false,
+    size = 'row',
+  }: { tally: Tally; evaluation: Evaluation | null; blocked?: boolean; size?: 'row' | 'large' } = $props();
+
+  const ratio = $derived(
+    evaluation && evaluation.required > 0 ? Math.min(1, tally.for / evaluation.required) : 0,
+  );
+  const pct = $derived(Math.round(ratio * 100));
+</script>
+
+<span
+  class="level {size}"
+  class:reached={evaluation?.reached}
+  class:blocked
+  role="img"
+  aria-label={t('tally.level', { pct })}
+  title={t('tally.level', { pct })}
+>
+  <span class="water" style:height="{Math.max(pct, tally.for > 0 ? 6 : 0)}%"></span>
+</span>
+
+<style>
+  .level {
+    position: relative;
+    display: inline-block;
+    flex: none;
+    width: 8px;
+    height: 2.4rem;
+    border-radius: 6px;
+    background: var(--surface-2);
+    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08);
+    overflow: hidden;
+  }
+  .level.large {
+    width: 14px;
+    height: 5.5rem;
+    border-radius: 8px;
+  }
+  .water {
+    position: absolute;
+    inset: auto 0 0 0;
+    background: linear-gradient(to top, var(--water), color-mix(in srgb, var(--water) 55%, var(--water-light)));
+    transition: height 0.7s var(--ease);
+  }
+  .reached .water {
+    height: 100% !important;
+    background: var(--moss);
+  }
+  .blocked {
+    box-shadow: inset 0 0 0 2px var(--ochre);
+  }
+</style>