P1 fondation : tokens layerés, reset, thèmes (base/renovation/aep/tmip), 9 primitives Astro, pont Tailwind 4, démo kitchen sink

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-19 18:31:52 +02:00
commit 795ca7ed4e
28 changed files with 8043 additions and 0 deletions
--- a/theme/renovation.css
+++ b/theme/renovation.css
@@ -0,0 +1,103 @@
+/* ==========================================================================
+   theme/renovation.css — renovation-energetique.trans-former.fr
+   Palette Brunswick green + crème + jaune secondaire.
+   Polices : Poppins (titres) / Open Sans (corps long).
+   Les @font-face sont chargés côté site (self-host ou fontsource) ;
+   ce fichier ne définit que les stacks.
+   ========================================================================== */
+
+:root {
+  --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+
+  /* Clair */
+  --bg: #ffffff;
+  --bg-alt: #f7f2e9;         /* crème clair, dérivé de #E8D5B0 */
+  --surface: #ffffff;
+  --surface-2: #f1e8d8;      /* crème #E8D5B0 adouci pour rester AA */
+
+  --text: #1e2a25;
+  --text-muted: #47564e;
+  --text-subtle: #63736a;
+
+  --border: #e4ddd0;
+  --border-strong: #b9ac93;
+
+  --primary: #1b4436;        /* Brunswick green */
+  --primary-hover: #163829;
+  --on-primary: #ffffff;
+
+  --accent: #f9d400;         /* jaune secondaire */
+  --on-accent: #1b4436;
+
+  --link: #1b4436;
+  --link-hover: #163829;
+
+  --focus-ring: #35735d;
+
+  --success: #2e7d32;
+  --warning: #a16207;
+  --danger: #b3261e;
+}
+
+:root[data-theme="dark"] {
+  --bg: #101714;
+  --bg-alt: #141d18;
+  --surface: #182420;
+  --surface-2: #1f2e28;
+
+  --text: #ede7da;           /* crème clair */
+  --text-muted: #bcc6bd;
+  --text-subtle: #93a097;
+
+  --border: #27352e;
+  --border-strong: #43564c;
+
+  --primary: #7fc4a4;
+  --primary-hover: #98d4b8;
+  --on-primary: #10241c;
+
+  --accent: #f9d400;
+  --on-accent: #1f1a00;
+
+  --link: #8fcbae;
+  --link-hover: #aadcc3;
+
+  --focus-ring: #7fc4a4;
+
+  --success: #6fbf9a;
+  --warning: #e8c15a;
+  --danger: #f08a80;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #101714;
+    --bg-alt: #141d18;
+    --surface: #182420;
+    --surface-2: #1f2e28;
+
+    --text: #ede7da;
+    --text-muted: #bcc6bd;
+    --text-subtle: #93a097;
+
+    --border: #27352e;
+    --border-strong: #43564c;
+
+    --primary: #7fc4a4;
+    --primary-hover: #98d4b8;
+    --on-primary: #10241c;
+
+    --accent: #f9d400;
+    --on-accent: #1f1a00;
+
+    --link: #8fcbae;
+    --link-hover: #aadcc3;
+
+    --focus-ring: #7fc4a4;
+
+    --success: #6fbf9a;
+    --warning: #e8c15a;
+    --danger: #f08a80;
+  }
+}