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/tailwind.config.ts

@@ -1,9 +1,17 @@
 import type { Config } from "tailwindcss";
 
 /**
- * Système de design « Loki » — thème néo-brutaliste clair.
- * Bordures noires épaisses, ombres dures décalées, accent orange,
- * police pixel (Press Start 2P) pour les libellés, DM Mono pour le corps.
+ * Système de design « Loki » — thème Nocturne clair (Claude Design).
+ *
+ * Reprend les jetons de `Loki App.dc.html` : fond gris froid, surfaces
+ * blanches, filets 1 px, accent bleu ardoise et ombres douces diffuses.
+ * Remplace le thème néo-brutaliste (bordures noires 3 px, ombres dures
+ * décalées, accent orange, police pixel).
+ *
+ * Les NOMS de jetons sont inchangés : seule leur valeur bascule, ce qui fait
+ * suivre toute l'interface sans réécrire les composants. Les jetons
+ * historiquement « sombres » (card-deep, on-dark…) deviennent la surface
+ * sélectionnée claire et son encre, conformément à la maquette.
  */
 export default {
   content: ["./index.html", "./src/**/*.{ts,tsx}"],
@@ -11,60 +19,68 @@ export default {
     extend: {
       colors: {
         // Fonds
-        base: "#ececef", // contenu principal
-        bar: "#18181b", // chrome sombre (barres)
-        panel: "#fafafa", // panneaux latéraux
-        sunken: "#18181b", // encarts sombres (code, invite système)
+        base: "#f7f8fa", // --color-bg
+        bar: "#ffffff", // barres : surface + filet (plus de chrome sombre)
+        panel: "#ffffff", // --color-surface
+        sunken: "#f1f3f6", // encarts (code, invite système) : neutral-900
         // Surfaces / cartes
         card: "#ffffff",
-        "card-soft": "#fafafa",
-        "card-deep": "#18181b",
-        // Bordures
-        line: "#18181b", // bordure noire signature
-        "line-soft": "#e4e4e7", // séparateur clair
-        "line-strong": "#18181b",
-        // Accent orange
-        accent: "#ff5436",
-        "accent-1": "#ff6b50",
-        "accent-2": "#e23e22",
-        // Statuts
-        ok: "#22c55e",
-        info: "#3b82f6",
-        warn: "#dc2626",
-        // Textes (sombres sur fond clair)
-        ink: "#18181b",
-        "ink-2": "#27272a",
-        "ink-3": "#3f3f46",
-        muted: "#52525b",
-        "muted-2": "#71717a",
-        "muted-3": "#a1a1aa",
-        "muted-4": "#a1a1aa",
-        label: "#52525b",
-        // Teintes claires utiles sur le chrome sombre
-        "chrome-2": "#27272a",
-        "chrome-3": "#3f3f46",
-        "on-dark": "#e4e4e7",
-        "on-dark-2": "#a1a1aa",
-        "on-dark-3": "#71717a",
+        "card-soft": "#f7f8fa",
+        "card-deep": "#eef2f9", // sélection : accent-900
+        // Filets
+        line: "#e3e6eb", // --color-divider
+        "line-soft": "#e6e9ee", // neutral-800
+        "line-strong": "#c3c9d2", // neutral-700
+        // Accent bleu ardoise
+        accent: "#2f4a7a", // --color-accent
+        "accent-1": "#4a6797", // accent-600
+        "accent-2": "#26406b", // accent-300
+        "accent-ghost": "#eef2f9", // accent-900 (fonds teintés)
+        "accent-line": "#b9c6dd", // accent-700 (bordure de sélection)
+        // Statuts, accordés à la palette
+        ok: "#2f7a5a",
+        info: "#2f4a7a",
+        warn: "#b3403a",
+        // Encres
+        ink: "#1c2536", // --color-text / neutral-100
+        "ink-2": "#29334a", // neutral-200
+        "ink-3": "#3d4a5e", // neutral-300
+        muted: "#55627a", // neutral-400
+        "muted-2": "#6b7686", // neutral-500
+        "muted-3": "#8b95a4", // neutral-600
+        "muted-4": "#8b95a4",
+        label: "#8b95a4", // couleur des « kickers »
+        // Anciennes teintes « sur fond sombre » -> encres sur surface claire
+        "chrome-2": "#e3e6eb",
+        "chrome-3": "#c3c9d2",
+        "on-dark": "#1c2536",
+        "on-dark-2": "#3d4a5e",
+        "on-dark-3": "#6b7686",
       },
       fontFamily: {
-        sans: ['"DM Mono"', "ui-monospace", "monospace"],
-        mono: ['"DM Mono"', "ui-monospace", "monospace"],
-        pixel: ['"Press Start 2P"', "ui-monospace", "monospace"],
+        sans: ['"Inter"', "ui-sans-serif", "system-ui", "sans-serif"],
+        mono: ["ui-monospace", '"SF Mono"', "Menlo", "monospace"],
+        // Ex-police pixel : devient le « kicker » de la maquette — petites
+        // capitales très espacées. Les libellés existants suivent sans edit.
+        pixel: [
+          '"Inter"',
+          { letterSpacing: "0.14em", fontWeight: "500" },
+        ],
       },
       borderRadius: {
-        card: "9px",
+        card: "10px", // --radius-md
       },
       boxShadow: {
-        "hard-sm": "3px 3px 0 #18181b",
-        hard: "4px 4px 0 #18181b",
-        "hard-lg": "7px 7px 0 #18181b",
-        "hard-accent": "3px 3px 0 #ff5436",
-        "accent-soft": "3px 3px 0 rgba(255,84,54,.4)",
-        frame: "4px 4px 0 #18181b",
+        // Ombres douces diffuses (--shadow-sm/md/lg) au lieu des ombres dures.
+        "hard-sm": "0 1px 2px rgba(28, 37, 54, 0.06)",
+        hard: "0 2px 8px rgba(28, 37, 54, 0.08)",
+        "hard-lg": "0 8px 28px rgba(28, 37, 54, 0.10)",
+        "hard-accent": "0 2px 8px rgba(47, 74, 122, 0.18)",
+        "accent-soft": "0 1px 2px rgba(47, 74, 122, 0.14)",
+        frame: "0 2px 8px rgba(28, 37, 54, 0.08)",
       },
       backgroundImage: {
-        "accent-grad": "linear-gradient(140deg, #ff6b50, #e23e22)",
+        "accent-grad": "linear-gradient(140deg, #4a6797, #2f4a7a)",
       },
     },
   },