v3 : le vote déplié sous l'article, le panier, la signature par le portefeuille Ğ1

- Le vote se déplie sous l'article, façon accordéon, l'URL pour état (?vote=) :
  niveau d'eau, totaux, seuil et voix manquantes, ton vote et où il en est
  (enregistré, inscrit sur la chaîne, en attente, à reconfirmer, non compté),
  inertie et formule. Le reste d'une version (coquilles, traductions,
  signalements, historique) passe dans l'onglet « Détails » du panneau.
- Le panier : article par article, « tout pour / tout contre » par section ou
  pour tout le document, jamais pour un article à plusieurs versions ; un seul
  geste (une écriture, ou une transaction).
- La signature : le portefeuille de la page (injectedWeb3), polkadot-api chargé
  au moment de signer ; sans portefeuille, Ğecko par lien et QR ; la page
  attend la confirmation. Un bulletin que le portefeuille n'a pas signé est
  lâché aussitôt (DELETE /api/ballots/{id}).
- Pastilles d'ambiance : flèches dans le groupe, anneau de focus pointillé à
  la couleur d'accent de la page (3:1 au moins), distinct du choix.
- e2e : chaîne simulée (indexeur et nœud), faux portefeuille ; C21–C24, et
  C4, C5, C6, C11, C17, C19, C20, M1 mis à jour.

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

web/src/lib/components/Sidebar.svelte

@@ -31,6 +31,17 @@
   /** A tool is highlighted only when one is in it. */
   const inTool = (tool: Tool) => here !== null && (path === `/g/${here}/${tool}` || path.startsWith(`/g/${here}/${tool}/`));
 
+  // A radio group: one stop for Tab, the arrows move to the next mood and choose it.
+  function onMoodKey(e: KeyboardEvent) {
+    const step = ({ ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 } as Record<string, number>)[e.key];
+    if (!step) return;
+    e.preventDefault();
+    const next = MOODS[(MOODS.indexOf(mood.current) + step + MOODS.length) % MOODS.length];
+    if (!next) return;
+    mood.set(next);
+    (e.currentTarget as HTMLElement).querySelector<HTMLElement>(`[data-mood="${next}"]`)?.focus();
+  }
+
   async function signOut() {
     await session.logout();
     groups.reset();
@@ -85,7 +96,7 @@
           <button type="button" class:on={i18n.lang === l} aria-pressed={i18n.lang === l} onclick={() => i18n.set(l)}>{l.toUpperCase()}</button>
         {/each}
       </div>
-      <div class="moods" role="radiogroup" aria-label={t('nav.mood')}>
+      <div class="moods" role="radiogroup" aria-label={t('nav.mood')} tabindex="-1" onkeydown={onMoodKey}>
         {#each MOODS as m (m)}
           <!-- Each swatch carries its own mood: its colours are that mood's tokens. -->
           <button
@@ -96,6 +107,7 @@
             aria-checked={mood.current === m}
             aria-label={t(`mood.${m}`)}
             title={t(`mood.${m}`)}
+            tabindex={mood.current === m ? 0 : -1}
             onclick={() => mood.set(m)}
           ></button>
         {/each}
@@ -242,7 +254,15 @@
   .moods {
     display: inline-flex;
     align-items: center;
-    gap: 0.3rem;
+    gap: 0.6rem;
+    padding-inline: 0.2rem;
+    /* Taken here, in the mood of the page, before each swatch carries its own:
+       the rings read against the page whatever the colour of the swatch. */
+    --page-ink: var(--ink);
+    --page-ring: var(--water);
+  }
+  .moods:focus {
+    outline: none;
   }
   .swatch {
     position: relative;
@@ -262,10 +282,18 @@
     border-radius: 50%;
     background: var(--cle);
   }
+  /* Chosen: a ring of the page's ink, close to the swatch. */
   .swatch[aria-checked='true'] {
-    /* currentColor is the ink of the page, inherited. */
-    outline: 2px solid currentColor;
-    outline-offset: 2px;
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--ink) 32%, transparent),
+      0 0 0 2px var(--page-ink);
+  }
+  /* Focused: further out, in the page's accent (3:1 or more on the page in every
+     mood), and dashed: never mistaken for the chosen one. */
+  .swatch:focus-visible {
+    outline: 2px dashed var(--page-ring);
+    outline-offset: 4px;
+    border-radius: 50%;
   }
   .who {
     display: flex;