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/+page.svelte

@@ -1,48 +1,36 @@
 <script lang="ts">
+  import GroupChoice from '$lib/components/GroupChoice.svelte';
   import { t } from '$lib/i18n/index.svelte';
   import { session } from '$lib/session.svelte';
-
-  const sections = $derived([
-    { name: t('nav.decisions'), text: t('home.decisions'), open: false },
-    { name: t('nav.docs'), text: t('home.docs'), open: true },
-    { name: t('nav.mandates'), text: t('home.mandates'), open: false },
-    { name: t('nav.protocols'), text: t('home.protocols'), open: false },
-  ]);
 </script>
 
 <div class="home">
   <header class="intro">
     <h1>{t('home.title')}</h1>
-    <p class="sub">{t('home.subtitle')}</p>
+    <ul class="leitmotiv">
+      <li>{t('home.leitmotiv.context')}</li>
+      <li>{t('home.leitmotiv.process')}</li>
+      <li>{t('home.leitmotiv.tools')}</li>
+    </ul>
   </header>
 
-  <ul class="sections">
-    {#each sections as s (s.name)}
-      <li class="section" class:open={s.open}>
-        <div class="head">
-          <h2>{s.name}</h2>
-          <span class="tag" class:water={s.open}>{s.open ? t('home.open') : t('home.soon')}</span>
-        </div>
-        <p>{s.text}</p>
-      </li>
-    {/each}
-  </ul>
-
-  <div class="enter">
-    {#if session.me}
-      <a class="btn primary" href="/groupes">{t('home.continue')}</a>
-    {:else}
+  {#if session.me}
+    <GroupChoice />
+  {:else}
+    <div class="enter">
       <a class="btn primary" href="/connexion">{t('home.signin')}</a>
       <p class="faint">{t('home.signin.note')}</p>
-    {/if}
-  </div>
+    </div>
+  {/if}
 </div>
 
 <style>
   .home {
-    max-width: 50rem;
+    max-width: 44rem;
     margin: 0 auto;
-    padding: clamp(3rem, 10vh, 7rem) clamp(1.2rem, 5vw, 3.5rem) 5rem;
+    padding: clamp(3rem, 10vh, 6.5rem) clamp(1.2rem, 5vw, 3.5rem) 5rem;
+    display: grid;
+    gap: clamp(2.4rem, 6vh, 3.6rem);
   }
   .intro h1 {
     font-family: var(--font-text);
@@ -54,56 +42,35 @@
     max-width: 15ch;
     text-wrap: balance;
   }
-  .sub {
-    margin-top: 1.1rem;
-    font-family: var(--font-text);
-    font-style: italic;
-    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
-    color: var(--ink-soft);
-    max-width: 30ch;
-  }
-  .sections {
+  /* The leitmotiv: three lines, each set on a small stone of the keystone's colour. */
+  .leitmotiv {
     list-style: none;
-    margin: clamp(2.8rem, 7vh, 4.5rem) 0 0;
+    margin: 1.4rem 0 0;
     padding: 0;
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 1px;
-    background: var(--surface-2);
-    border-radius: var(--r-card);
-    overflow: hidden;
-    box-shadow: var(--shadow);
-  }
-  .section {
-    background: var(--surface);
-    padding: 1.4rem 1.5rem 1.5rem;
-    display: grid;
-    gap: 0.55rem;
-    align-content: start;
-  }
-  .section:not(.open) {
+    gap: 0.2rem;
+    font-family: var(--font-text);
+    font-style: italic;
+    font-size: clamp(1.12rem, 1rem + 0.55vw, 1.4rem);
+    line-height: 1.45;
     color: var(--ink-soft);
   }
-  .head {
+  .leitmotiv li {
     display: flex;
     align-items: baseline;
-    justify-content: space-between;
-    gap: 0.6rem;
+    gap: 0.7rem;
   }
-  h2 {
-    font-size: 1.08rem;
-    font-weight: 800;
-    color: var(--ink);
-  }
-  .section:not(.open) h2 {
-    color: var(--ink-soft);
-  }
-  .section p {
-    font-size: 0.96rem;
-    line-height: 1.55;
+  .leitmotiv li::before {
+    content: '';
+    flex: none;
+    width: 0.62em;
+    height: 0.34em;
+    border-radius: 0.1em;
+    background: var(--cle);
+    opacity: 0.75;
+    translate: 0 -0.12em;
   }
   .enter {
-    margin-top: 2.6rem;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -113,9 +80,4 @@
     font-size: 0.9rem;
     max-width: 34ch;
   }
-  @media (max-width: 640px) {
-    .sections {
-      grid-template-columns: 1fr;
-    }
-  }
 </style>