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/app.html

@@ -4,15 +4,27 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="color-scheme" content="light dark" />
+    <meta name="theme-color" content="#e9eeec" />
     <link rel="icon" href="%sveltekit.assets%/favicon.svg" type="image/svg+xml" />
+    <link rel="icon" href="%sveltekit.assets%/favicon-48.png" type="image/png" sizes="48x48" />
+    <link rel="icon" href="%sveltekit.assets%/favicon-32.png" type="image/png" sizes="32x32" />
+    <link rel="icon" href="%sveltekit.assets%/favicon-16.png" type="image/png" sizes="16x16" />
+    <link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" sizes="180x180" />
+    <link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
     <title>libreDecision</title>
     <script>
-      // Mood before first paint: no flash.
-      try {
-        const m = localStorage.getItem('ld:mood');
-        const dark = m ? m === 'nuit' : matchMedia('(prefers-color-scheme: dark)').matches;
-        document.documentElement.dataset.mood = dark ? 'nuit' : 'pierre';
-      } catch { document.documentElement.dataset.mood = 'pierre'; }
+      // Mood before first paint: no flash. Four moods, two light (pierre, calcaire) and two dark
+      // (nuit, ardoise); a first visit follows the device's light or dark setting.
+      (() => {
+        const bg = { pierre: '#e9eeec', calcaire: '#f2ede4', nuit: '#0e1819', ardoise: '#171b20' };
+        let mood = 'pierre';
+        try {
+          const saved = localStorage.getItem('ld:mood');
+          mood = Object.hasOwn(bg, saved ?? '') ? saved : matchMedia('(prefers-color-scheme: dark)').matches ? 'nuit' : 'pierre';
+        } catch {}
+        document.documentElement.dataset.mood = mood;
+        document.querySelector('meta[name="theme-color"]')?.setAttribute('content', bg[mood]);
+      })();
     </script>
     %sveltekit.head%
   </head>