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.css

@@ -1,5 +1,8 @@
 /* libreDecision v3 — tokens and base.
-   Two moods: « pierre » (cool stone, light) and « nuit » (well at night, dark).
+   Four moods, two light and two dark: « pierre » (cool stone) and « nuit » (well at night)
+   carry the water; « calcaire » (warm limestone) and « ardoise » (dark slate) carry the ochre.
+   `--water` is the accent of the mood (links, buttons, current place), whatever its hue;
+   `--cle` is the keystone of the logo (Clé de voûte, DA 2026-10-28).
    Borderless: depth comes from background and shadow, never from strokes.
    Radii: cards 16px · inputs 12px · pills and buttons 20px · icon holders 14px. */
 
@@ -23,12 +26,38 @@
   --ochre: #a8661e;
   --ochre-wash: rgb(168 102 30 / 0.12);
   --on-water: #f6f8f7;
+  --cle: #16808c;
   --shadow: 0 1px 2px rgb(20 40 40 / 0.06), 0 8px 28px rgb(20 40 40 / 0.07);
   --shadow-strong: 0 2px 6px rgb(20 40 40 / 0.1), 0 18px 48px rgb(20 40 40 / 0.16);
   --veil: rgb(16 30 31 / 0.28);
   color-scheme: light;
 }
 
+/* Calcaire: warm limestone, the ochre. The accent is darker than the keystone
+   (#a8661e, 3.5:1) so that a link or a label reads at 4.5:1 or more; warnings
+   turn to brick, away from the accent. */
+[data-mood='calcaire'] {
+  --bg: #f2ede4;
+  --surface: #fbf8f2;
+  --surface-2: #e8e0d2;
+  --ink: #2a241e;
+  --ink-soft: #5c5247;
+  --ink-faint: #857868;
+  --water: #8a5214;
+  --water-light: #e6c79c;
+  --water-wash: rgb(138 82 20 / 0.08);
+  --moss: #446b38;
+  --moss-wash: rgb(68 107 56 / 0.12);
+  --ochre: #a3432b;
+  --ochre-wash: rgb(163 67 43 / 0.1);
+  --on-water: #fbf8f2;
+  --cle: #a8661e;
+  --shadow: 0 1px 2px rgb(60 42 20 / 0.06), 0 8px 28px rgb(60 42 20 / 0.07);
+  --shadow-strong: 0 2px 6px rgb(60 42 20 / 0.1), 0 18px 48px rgb(60 42 20 / 0.16);
+  --veil: rgb(42 32 20 / 0.28);
+  color-scheme: light;
+}
+
 [data-mood='nuit'] {
   --bg: #0e1819;
   --surface: #142224;
@@ -44,12 +73,36 @@
   --ochre: #e0a458;
   --ochre-wash: rgb(224 164 88 / 0.12);
   --on-water: #0e1819;
+  --cle: #6ec1c6;
   --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 28px rgb(0 0 0 / 0.28);
   --shadow-strong: 0 2px 6px rgb(0 0 0 / 0.4), 0 18px 48px rgb(0 0 0 / 0.5);
   --veil: rgb(0 0 0 / 0.5);
   color-scheme: dark;
 }
 
+/* Ardoise: dark slate, the ochre; warnings in a light brick. */
+[data-mood='ardoise'] {
+  --bg: #171b20;
+  --surface: #1d2228;
+  --surface-2: #262c34;
+  --ink: #e4e6e2;
+  --ink-soft: #a9afb5;
+  --ink-faint: #7a828b;
+  --water: #e0a65c;
+  --water-light: #6b4c26;
+  --water-wash: rgb(224 166 92 / 0.09);
+  --moss: #93c08a;
+  --moss-wash: rgb(147 192 138 / 0.12);
+  --ochre: #e98d72;
+  --ochre-wash: rgb(233 141 114 / 0.12);
+  --on-water: #171b20;
+  --cle: #e0a65c;
+  --shadow: 0 1px 2px rgb(0 0 0 / 0.32), 0 8px 28px rgb(0 0 0 / 0.3);
+  --shadow-strong: 0 2px 6px rgb(0 0 0 / 0.42), 0 18px 48px rgb(0 0 0 / 0.52);
+  --veil: rgb(0 0 0 / 0.5);
+  color-scheme: dark;
+}
+
 :root {
   --font-ui: 'Nunito Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
   --font-text: 'Literata Variable', 'Iowan Old Style', Georgia, serif;
@@ -166,7 +219,7 @@ button {
 .btn.primary {
   background: var(--water);
   color: var(--on-water);
-  box-shadow: 0 6px 18px rgb(31 111 120 / 0.22);
+  box-shadow: 0 6px 18px color-mix(in srgb, var(--water) 22%, transparent);
 }
 .btn.quiet {
   background: transparent;