theme/tmip.css : palette réelle TMIP (orange/jaune/navy, corrections AA) + page démo

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/pages/demo/tmip.astro

@@ -0,0 +1,7 @@
+---
+// Démo — thème TMIP (orange / jaune / navy).
+import KitchenSink from "../../demo/KitchenSink.astro";
+import "../../../theme/tmip.css";
+---
+
+<KitchenSink themeName="TMIP (orange / navy)" />

theme/tmip.css

@@ -1,38 +1,96 @@
 /* ==========================================================================
    theme/tmip.css — tmip.trans-former.fr
-   PLACEHOLDER — palette à confirmer, sera remplie au prompt P2 (migration
+   Palette extraite du site réel (P2, 2026-07-20) : orange #e87425 + jaune
-   TMIP). Ne pas importer en l'état : sans surcharge, le site tourne sur le
+   #f9d400 + navy #080c21, dark mode navy. Poppins partout (identité TMIP),
-   thème neutre de tokens.css.
+   Open Sans en police secondaire côté site (--tmip-font-secondary).
 
-   À remplir en clonant la structure de theme/base.css :
+   Corrections AA vs l'existant :
-     - stacks --font-heading / --font-body
+   - --on-primary = navy (blanc sur orange = 3.0:1, insuffisant en texte)
-     - bloc clair (:root)
+   - --link clair = #bd5512 (l'orange brut sur blanc = 3.0:1)
-     - bloc sombre (:root[data-theme="dark"])
+   - --text-subtle éclairci/foncé pour tenir 4.5:1 dans les deux modes
-     - duplication sombre dans @media (prefers-color-scheme: dark)
-       avec le garde :root:not([data-theme="light"])
    ========================================================================== */
 
-/*
 :root {
-  --font-heading: ... ;
+  --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
-  --font-body: ... ;
+  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, Consolas, monospace;
 
-  --bg: ... ;
+  /* Clair */
-  --bg-alt: ... ;
+  --bg: #ffffff;
-  --surface: ... ;
+  --bg-alt: #f7f8fc;
-  --surface-2: ... ;
+  --surface: #ffffff;
-  --text: ... ;
+  --surface-2: #f1f3f9;
-  --text-muted: ... ;
+
-  --text-subtle: ... ;
+  --text: #1a1a2e;
-  --border: ... ;
+  --text-muted: #6b7280;
-  --border-strong: ... ;
+  --text-subtle: #6e7583;
-  --primary: ... ;
+
-  --primary-hover: ... ;
+  --border: #e5e7eb;
-  --on-primary: ... ;
+  --border-strong: #9ca3af;
-  --accent: ... ;
+
-  --on-accent: ... ;
+  --primary: #e87425;
-  --link: ... ;
+  --primary-hover: #d4661e;
-  --link-hover: ... ;
+  --on-primary: #080c21;
-  --focus-ring: ... ;
+
+  --accent: #f9d400;
+  --on-accent: #080c21;
+
+  --link: #bd5512;
+  --link-hover: #a34a0f;
+
+  --focus-ring: #d4661e;
+}
+
+:root[data-theme="dark"] {
+  --bg: #0f1123;
+  --bg-alt: #161929;
+  --surface: #1a1f36;
+  --surface-2: #1e2440;
+
+  --text: #e2e8f0;
+  --text-muted: #94a3b8;
+  --text-subtle: #8093ab;
+
+  --border: #2d3353;
+  --border-strong: #4a5480;
+
+  --primary: #e87425;
+  --primary-hover: #f08b45;
+  --on-primary: #080c21;
+
+  --accent: #f9d400;
+  --on-accent: #080c21;
+
+  --link: #ef8b3f;
+  --link-hover: #f5a468;
+
+  --focus-ring: #e87425;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #0f1123;
+    --bg-alt: #161929;
+    --surface: #1a1f36;
+    --surface-2: #1e2440;
+
+    --text: #e2e8f0;
+    --text-muted: #94a3b8;
+    --text-subtle: #8093ab;
+
+    --border: #2d3353;
+    --border-strong: #4a5480;
+
+    --primary: #e87425;
+    --primary-hover: #f08b45;
+    --on-primary: #080c21;
+
+    --accent: #f9d400;
+    --on-accent: #080c21;
+
+    --link: #ef8b3f;
+    --link-hover: #f5a468;
+
+    --focus-ring: #e87425;
+  }
 }
-*/