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/Card.astro

@@ -0,0 +1,71 @@
+---
+/**
+ * Card — surface de contenu, cliquable ou non.
+ *
+ * Props :
+ *  - href  (string) : rend toute la carte cliquable (<a>) + hover élévation légère
+ *  - class (string) : classes additionnelles
+ *
+ * Slots : media (image/visuel pleine largeur en tête), default (corps).
+ * Pas de border-left accent (loi Impeccable) : la hiérarchie passe par la
+ * surface, la bordure fine et l'élévation au hover.
+ */
+interface Props {
+  href?: string;
+  class?: string;
+}
+
+const { href, class: className } = Astro.props;
+const Tag = href ? "a" : "article";
+---
+
+<Tag class:list={["tf-card", { "tf-card--link": href }, className]} href={href}>
+  {
+    Astro.slots.has("media") && (
+      <div class="tf-card__media">
+        <slot name="media" />
+      </div>
+    )
+  }
+  <div class="tf-card__body"><slot /></div>
+</Tag>
+
+<style>
+  .tf-card {
+    display: flex;
+    flex-direction: column;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    box-shadow: var(--shadow-sm);
+  }
+
+  .tf-card--link {
+    color: inherit;
+    text-decoration: none;
+    transition: transform var(--dur-base) var(--ease-out),
+      box-shadow var(--dur-base) var(--ease-out),
+      border-color var(--dur-base) var(--ease-out);
+  }
+
+  .tf-card--link:hover {
+    color: inherit;
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--border-strong);
+  }
+
+  .tf-card__media :global(img) {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+  }
+
+  .tf-card__body {
+    padding: var(--space-lg);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+  }
+</style>