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>

theme/aep.css

@@ -0,0 +1,80 @@
+/* ==========================================================================
+   theme/aep.css — aep.trans-former.fr
+   SOMBRE PAR DÉFAUT : le :root est la palette sombre, quelle que soit la
+   préférence système. Seul un data-theme="light" explicite (toggle) bascule
+   vers la variante claire.
+   Accent : rouge #c0392b.
+   ========================================================================== */
+
+:root {
+  color-scheme: dark;
+
+  --bg: #0d0d0d;
+  --bg-alt: #131313;
+  --surface: #181818;
+  --surface-2: #202020;
+
+  --text: #f2f2f2;
+  --text-muted: #b5b5b5;
+  --text-subtle: #8c8c8c;
+
+  --border: #262626;
+  --border-strong: #3f3f3f;
+
+  --primary: #c0392b;
+  --primary-hover: #d64535;
+  --on-primary: #ffffff;
+
+  --accent: #c0392b;
+  --on-accent: #ffffff;
+
+  --link: #e98b7f;
+  --link-hover: #f2a99f;
+
+  --focus-ring: #e98b7f;
+
+  --success: #34d399;
+  --warning: #fbbf24;
+  --danger: #f87171;
+
+  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
+  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
+  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
+}
+
+/* Variante claire — uniquement sur toggle explicite */
+:root[data-theme="light"] {
+  color-scheme: light;
+
+  --bg: #faf9f7;
+  --bg-alt: #f1efec;
+  --surface: #ffffff;
+  --surface-2: #eceae6;
+
+  --text: #171717;
+  --text-muted: #4a4a4a;
+  --text-subtle: #6d6d6d;
+
+  --border: #e2e0dc;
+  --border-strong: #ada9a2;
+
+  --primary: #a93226;
+  --primary-hover: #922b20;
+  --on-primary: #ffffff;
+
+  --accent: #a93226;
+  --on-accent: #ffffff;
+
+  --link: #a93226;
+  --link-hover: #922b20;
+
+  --focus-ring: #a93226;
+
+  --success: #15803d;
+  --warning: #a16207;
+  --danger: #b91c1c;
+
+  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
+  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
+  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);
+}

theme/base.css

@@ -0,0 +1,94 @@
+/* ==========================================================================
+   theme/base.css — thème neutre de départ.
+   À CLONER pour créer le thème d'un nouveau site :
+     cp theme/base.css theme/mon-site.css
+   Un thème ne surcharge QUE la palette et le couple de polices.
+   Jamais les échelles, le spacing, les rayons, le motion, le layout.
+   Structure obligatoire : bloc clair + bloc [data-theme="dark"]
+   + duplication dans @media (prefers-color-scheme: dark).
+   ========================================================================== */
+
+:root {
+  /* Polices du site (charger les @font-face côté site, fallbacks ici) */
+  --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+
+  /* Palette claire — remplacer par la palette du site */
+  --bg: #ffffff;
+  --bg-alt: #f5f5f3;
+  --surface: #ffffff;
+  --surface-2: #eeeeeb;
+
+  --text: #1b1b1f;
+  --text-muted: #4b4b52;
+  --text-subtle: #6e6e76;
+
+  --border: #e0e0dd;
+  --border-strong: #a8a8a2;
+
+  --primary: #1b1b1f;
+  --primary-hover: #333338;
+  --on-primary: #ffffff;
+
+  --accent: #1b1b1f;
+  --on-accent: #ffffff;
+
+  --link: #1d4ed8;
+  --link-hover: #1e40af;
+
+  --focus-ring: #2563eb;
+}
+
+:root[data-theme="dark"] {
+  --bg: #121214;
+  --bg-alt: #18181b;
+  --surface: #1e1e21;
+  --surface-2: #26262a;
+
+  --text: #ededf0;
+  --text-muted: #b4b4bb;
+  --text-subtle: #8b8b93;
+
+  --border: #2f2f34;
+  --border-strong: #4d4d55;
+
+  --primary: #ededf0;
+  --primary-hover: #ffffff;
+  --on-primary: #121214;
+
+  --accent: #ededf0;
+  --on-accent: #121214;
+
+  --link: #8ab4f8;
+  --link-hover: #aecbfa;
+
+  --focus-ring: #8ab4f8;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #121214;
+    --bg-alt: #18181b;
+    --surface: #1e1e21;
+    --surface-2: #26262a;
+
+    --text: #ededf0;
+    --text-muted: #b4b4bb;
+    --text-subtle: #8b8b93;
+
+    --border: #2f2f34;
+    --border-strong: #4d4d55;
+
+    --primary: #ededf0;
+    --primary-hover: #ffffff;
+    --on-primary: #121214;
+
+    --accent: #ededf0;
+    --on-accent: #121214;
+
+    --link: #8ab4f8;
+    --link-hover: #aecbfa;
+
+    --focus-ring: #8ab4f8;
+  }
+}

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;
+  }
+}

theme/tmip.css

@@ -0,0 +1,38 @@
+/* ==========================================================================
+   theme/tmip.css — tmip.trans-former.fr
+   PLACEHOLDER — palette à confirmer, sera remplie au prompt P2 (migration
+   TMIP). Ne pas importer en l'état : sans surcharge, le site tourne sur le
+   thème neutre de tokens.css.
+
+   À remplir en clonant la structure de theme/base.css :
+     - stacks --font-heading / --font-body
+     - bloc clair (:root)
+     - bloc sombre (:root[data-theme="dark"])
+     - duplication sombre dans @media (prefers-color-scheme: dark)
+       avec le garde :root:not([data-theme="light"])
+   ========================================================================== */
+
+/*
+:root {
+  --font-heading: ... ;
+  --font-body: ... ;
+
+  --bg: ... ;
+  --bg-alt: ... ;
+  --surface: ... ;
+  --surface-2: ... ;
+  --text: ... ;
+  --text-muted: ... ;
+  --text-subtle: ... ;
+  --border: ... ;
+  --border-strong: ... ;
+  --primary: ... ;
+  --primary-hover: ... ;
+  --on-primary: ... ;
+  --accent: ... ;
+  --on-accent: ... ;
+  --link: ... ;
+  --link-hover: ... ;
+  --focus-ring: ... ;
+}
+*/