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/routes/g/[group]/docs/+page.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
   import { page } from '$app/state';
-  import { api } from '$lib/api';
+  import DocCards from '$lib/components/DocCards.svelte';
   import Guard from '$lib/components/Guard.svelte';
-  import { i18n, t } from '$lib/i18n/index.svelte';
+  import SoonList from '$lib/components/SoonList.svelte';
+  import { groups } from '$lib/groups.svelte';
+  import { t } from '$lib/i18n/index.svelte';
   import { Remote } from '$lib/load.svelte';
-  import type { GroupView } from '$lib/group';
-  import type { LangMap } from '$lib/types';
 
   const slug = $derived(page.params.group ?? '');
-  const data = new Remote(() => api.get<GroupView>(`/groups/${slug}`));
+  const data = new Remote(() => groups.load(slug));
   $effect(() => {
     void slug;
     void data.load();
   });
-  const pick = (m: LangMap) => m[i18n.lang] ?? m.fr ?? '';
 </script>
 
 {#if data.error}
@@ -25,27 +24,19 @@
     <h1>{t('docs.title')}</h1>
     {#if !g.open}
       <p class="muted">{t('groups.locked.long')}</p>
-    {:else if !data.value.docs.length}
-      <p class="muted">{t('group.docs.empty')}</p>
     {:else}
-      <ul class="docs">
-        {#each data.value.docs as d (d.id)}
-          <li>
-            <a class="doc card" href="/g/{g.slug}/docs/{d.slug}">
-              <span class="title">{pick(d.title)}</span>
-              <span class="summary">{pick(d.summary)}</span>
-              <span class="meta faint">{i18n.plural('docs.inForce', d.inForce)} · {i18n.plural('docs.open', d.open)}</span>
-            </a>
-          </li>
-        {/each}
-      </ul>
+      <section class="current" aria-labelledby="current-title">
+        <h2 class="eyebrow" id="current-title">{t('group.current')}</h2>
+        <DocCards group={g.slug} docs={data.value.docs} />
+      </section>
+      <SoonList items={data.value.upcoming.docs} />
     {/if}
   </div>
 {/if}
 
 <style>
   .page {
-    max-width: 46rem;
+    max-width: 48rem;
     margin: 0 auto;
     padding: clamp(2.5rem, 8vh, 5rem) 1.4rem 5rem;
     display: grid;
@@ -60,35 +51,12 @@
     font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
     margin-bottom: 1rem;
   }
-  .docs {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  .current {
     display: grid;
     gap: 0.8rem;
+    margin-bottom: 1.8rem;
   }
-  .doc {
-    display: grid;
-    gap: 0.5rem;
-    padding: 1.5rem 1.6rem;
-    color: var(--ink);
-    text-decoration: none;
-    transition: transform 0.12s ease;
-  }
-  .doc:hover {
-    transform: translateY(-3px);
-  }
-  .title {
-    font-family: var(--font-text);
-    font-size: 1.45rem;
-    font-weight: 500;
-  }
-  .summary {
+  .current h2 {
     color: var(--ink-soft);
-    line-height: 1.55;
-  }
-  .meta {
-    font-size: 0.85rem;
-    font-weight: 700;
   }
 </style>