v3 : l'entrée — accueil avec le choix du groupe, logo « Clé de voûte », quatre ambiances, menu et pages d'outil par groupe

- Accueil : le titre, le leitmotiv en trois lignes (contexte et cadrage ·
  processus et modalités · boîte à outils), puis directement le choix du
  groupe ; sans session, la connexion à sa place. /groupes redirige vers /,
  « Mes groupes » et le retour après connexion mènent à /.
- Logo « Clé de voûte » du DA (signe en currentColor, clé en --cle, libre
  Literata italique, Decision romain), droit, dans le menu et la barre
  mobile ; Stamp retiré, le sceau 井 ne bouge pas. Favicon, icônes 16/32/48,
  apple-touch, 192/512, manifeste.
- Quatre ambiances : pierre et calcaire (claires), nuit et ardoise
  (sombres), --cle par ambiance ; quatre pastilles à la place du soleil /
  lune ; première visite selon l'appareil (pierre / nuit). Calcaire et
  ardoise : textes, accent, mousse et avertissement à 4,5:1 au moins.
- Page d'un groupe : les quatre piliers, puis « En cours ».
- Menu : nombre de docs en cours à côté de « Docs de référence », surligné
  seulement dedans, seul Docs réagit au survol ; les trois autres éteints
  mais ouvrent leur page ; hors d'un groupe, le dernier groupe ouvert.
- /g/[group]/docs « En cours » + « À venir » ; /mandats et /protocoles du
  groupe : « À venir » éteints ; /g/[group]/decisions : une ligne par doc,
  « N modules à voter », « dont N sans ton vote ». Anciennes adresses
  /decisions, /mandats, /protocoles : vers le groupe courant, sinon /.
- e2e : C1, C2, C11, C12, M1 mis à jour ; C13–C17 pour L1–L6 ; CONTROLES.md.

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

web/src/lib/components/GroupChoice.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  // The choice of a group: Monnaie libre first and large, then the groups that use the same
+  // key, then the test groups; a group one does not open shows its lock.
+  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 all = $derived(data.value?.groups ?? []);
+  const root = $derived(all.find((g) => g.slug === 'monnaie-libre'));
+  const sameKey = $derived(all.filter((g) => g.parent === 'monnaie-libre'));
+  const others = $derived(all.filter((g) => g.slug !== 'monnaie-libre' && g.parent !== 'monnaie-libre'));
+</script>
+
+<section class="choice" aria-labelledby="groups-title">
+  <h2 class="eyebrow" id="groups-title">{t('groups.title')}</h2>
+
+  {#if data.error}
+    <Guard code={data.error} onretry={() => data.load()} />
+  {:else if data.value}
+    {#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="go" aria-hidden="true"><Icon name="chevron" size={20} /></span>{/if}
+        {#if !root.open}<span class="lock"><Icon name="lock" size={16} />{t('groups.locked')}</span>{/if}
+      </a>
+    {/if}
+
+    {#if sameKey.length}
+      <h3 class="eyebrow sub">{t('groups.same.key')}</h3>
+      <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}
+      <h3 class="eyebrow sub">{t('groups.test')}</h3>
+      <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 !all.length}<p class="muted">{t('groups.empty')}</p>{/if}
+  {/if}
+</section>
+
+<style>
+  .choice {
+    display: grid;
+    gap: 1rem;
+  }
+  .choice > .eyebrow {
+    color: var(--ink-soft);
+  }
+  .root {
+    position: relative;
+    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[href]:hover,
+  a.row[href]:hover {
+    transform: translateY(-3px);
+  }
+  .root .name {
+    font-family: var(--font-text);
+    font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem);
+    font-weight: 500;
+  }
+  .go {
+    position: absolute;
+    right: 1.4rem;
+    top: 50%;
+    translate: 0 -50%;
+    color: var(--water);
+  }
+  .sub {
+    margin-top: 1rem;
+    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>