Fusion du lot A : accueil sur le choix du groupe, logo Clé de voûte, quatre ambiances, menu, À venir, Décisions

Contrôles du lot R renumérotés C18 (Raison d'être) et C19 (versions d'un article).

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>