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>

components/Reveal.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * Reveal — apparition au scroll (fade + léger translate), sobre.
+ *
+ * Props :
+ *  - delay (number, 0) : décalage en ms (pour échelonner une grille)
+ *  - class (string)    : classes additionnelles
+ *
+ * Motion piloté-utilisateur : déclenché par le scroll (IntersectionObserver).
+ * Sous prefers-reduced-motion: reduce → contenu visible immédiatement, aucun
+ * mouvement. Sans JS → rien n'est masqué (garde html[data-js]).
+ */
+interface Props {
+  delay?: number;
+  class?: string;
+}
+
+const { delay = 0, class: className } = Astro.props;
+---
+
+<div
+  class:list={["tf-reveal", className]}
+  data-reveal
+  style={delay ? `--reveal-delay: ${delay}ms` : undefined}
+>
+  <slot />
+</div>
+
+<style>
+  @media (prefers-reduced-motion: no-preference) {
+    :global(html[data-js]) .tf-reveal {
+      opacity: 0;
+      translate: 0 12px;
+      transition: opacity var(--dur-slow) var(--ease-out),
+        translate var(--dur-slow) var(--ease-out);
+      transition-delay: var(--reveal-delay, 0ms);
+    }
+
+    :global(html[data-js]) .tf-reveal.is-visible {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+</style>
+
+<script>
+  import { initReveal } from "../js/reveal.js";
+  initReveal();
+</script>