Thème Nocturne clair (Claude Design) à la place du néo-brutaliste

Reprend les jetons de « Loki App.dc.html » : fond gris froid #f7f8fa,
surfaces blanches, accent bleu ardoise #2f4a7a (au lieu de l'orange),
filets 1 px #e3e6eb (au lieu des bordures noires 3 px) et ombres douces
diffuses (au lieu des ombres dures décalées).

- tailwind.config.ts : les NOMS de jetons sont conservés, seules leurs
  valeurs basculent — toute l'interface suit sans réécrire les
  composants. Les jetons historiquement sombres (card-deep, on-dark…)
  deviennent la surface sélectionnée claire et son encre.
- Police unique Inter ; l'ex-« font-pixel » devient le kicker de la
  maquette (petites capitales espacées de 0.14em), donc les libellés
  existants suivent sans modification.
- Conversion mécanique des filets 3 px / 2 px vers 1 px, séparateurs
  épais affinés, logo et avatar refaits selon la maquette (carré teinté
  à filet accent), couleurs « papier » de l'aperçu passées en jetons.
- Texte blanc corrigé partout où il reposait sur une surface devenue
  claire ; conservé sur les fonds accent/warn où il reste lisible.

Vérifié au rendu : body #f7f8fa, encre #1c2536, surface #ffffff, Inter ;
plus aucune trace d'orange, de noir #18181b ni d'ombre dure.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SVay7z3y7q2gEe54ByAE6N

frontend/src/index.css

@@ -10,27 +10,47 @@ body,
 }
 
 body {
-  background: #ececef;
-  color: #18181b;
-  font-family: "DM Mono", ui-monospace, monospace;
-  letter-spacing: -0.01em;
+  background: #f7f8fa;
+  color: #1c2536;
+  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
 }
 
-/* Police pixel pour les libellés (utilitaire .font-pixel via Tailwind aussi) */
-.font-pixel {
-  font-family: "Press Start 2P", ui-monospace, monospace;
+/* Titres : léger resserrement, comme dans la maquette Nocturne. */
+h1,
+h2,
+h3 {
+  letter-spacing: -0.025em;
 }
 
-/* Barres de défilement néo-brutalistes */
+/* Ex-police pixel : « kicker » de la maquette (petites capitales espacées). */
+.font-pixel {
+  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+/* Barres de défilement discrètes (règles .scr de la maquette) */
 .scr::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
+  width: 10px;
+  height: 10px;
 }
 .scr::-webkit-scrollbar-thumb {
-  background: #18181b;
-  border: 2px solid #ececef;
+  background: #c3c9d2;
+  border-radius: 6px;
+  border: 3px solid transparent;
+  background-clip: content-box;
 }
 .scr::-webkit-scrollbar-track {
-  background: #e4e4e7;
+  background: transparent;
+}
+
+/* Focus visible accentué, sélection teintée — repris de la maquette. */
+:focus-visible {
+  outline: 2px solid #2f4a7a;
+  outline-offset: 2px;
+}
+::selection {
+  background: rgba(47, 74, 122, 0.32);
 }