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]/+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 { t, type Key } from '$lib/i18n/index.svelte';
+  import Pillars from '$lib/components/Pillars.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';
 
   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 labels: Record<string, Key> = { decisions: 'nav.decisions', docs: 'nav.docs', mandats: 'nav.mandates', protocoles: 'nav.protocols' };
-  const texts: Record<string, Key> = { decisions: 'home.decisions', docs: 'home.docs', mandats: 'home.mandates', protocoles: 'home.protocols' };
 </script>
 
 {#if data.error}
@@ -21,36 +20,24 @@
 {:else if data.value}
   {@const g = data.value.group}
   <div class="page">
-    <a class="eyebrow back" href="/groupes">{t('nav.groups')}</a>
+    <a class="eyebrow back" href="/">{t('nav.groups')}</a>
     <h1>{g.name}</h1>
     {#if !g.open}
       <p class="muted">{t('groups.locked.long')}</p>
     {:else}
-      <h2 class="eyebrow sub">{t('group.tools')}</h2>
-      <ul class="tools">
-        {#each data.value.tools as tool (tool.key)}
-          <li>
-            {#if tool.active}
-              <a class="tool card" href="/g/{g.slug}/docs">
-                <span class="name">{t(labels[tool.key] ?? 'nav.docs')}</span>
-                <span class="text">{t(texts[tool.key] ?? 'home.docs')}</span>
-              </a>
-            {:else}
-              <div class="tool off" aria-disabled="true">
-                <span class="name">{t(labels[tool.key] ?? 'nav.docs')}<span class="tag">{t('home.soon')}</span></span>
-                <span class="text">{t(texts[tool.key] ?? 'home.docs')}</span>
-              </div>
-            {/if}
-          </li>
-        {/each}
-      </ul>
+      <h2 class="visually-hidden">{t('group.tools')}</h2>
+      <Pillars group={g.slug} tools={data.value.tools} />
+      <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} summary={false} />
+      </section>
     {/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;
@@ -63,56 +50,14 @@
     font-family: var(--font-text);
     font-weight: 500;
     font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
+    margin-bottom: 1.2rem;
   }
-  .sub {
-    margin-top: 1.6rem;
-    color: var(--ink-soft);
-  }
-  .tools {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  .current {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 0.8rem;
+    margin-top: 2.2rem;
   }
-  .tool {
-    display: grid;
-    gap: 0.45rem;
-    padding: 1.3rem 1.4rem;
-    height: 100%;
-    color: var(--ink);
-    text-decoration: none;
-  }
-  a.tool {
-    transition: transform 0.12s ease;
-  }
-  a.tool:hover {
-    transform: translateY(-3px);
-  }
-  .tool.off {
-    border-radius: var(--r-card);
-    box-shadow: inset 0 0 0 1px var(--surface-2);
-    color: var(--ink-faint);
-  }
-  .name {
-    display: flex;
-    justify-content: space-between;
-    gap: 0.5rem;
-    font-weight: 800;
-    font-size: 1.05rem;
-  }
-  .text {
-    font-size: 0.93rem;
-    line-height: 1.5;
+  .current h2 {
     color: var(--ink-soft);
   }
-  .off .text {
-    color: var(--ink-faint);
-  }
-  @media (max-width: 640px) {
-    .tools {
-      grid-template-columns: 1fr;
-    }
-  }
 </style>