classe et espece

src/pages/classes/[...slug].astro

@@ -0,0 +1,82 @@
+---
+import { getCollection, render } from "astro:content";
+import GameLayout from "../../../layouts/GameLayout.astro";
+
+export async function getStaticPaths() {
+    const classEntries = await getCollection("classes");
+    return classEntries.map((entry) => ({
+        params: { slug: entry.id },
+        props: { entry },
+    }));
+}
+
+const { entry } = Astro.props;
+if (!entry) return Astro.redirect("/404");
+
+const { Content } = await render(entry);
+---
+
+<GameLayout title={entry.data.title}>
+    <article class="class-detail">
+        <header class="post-header">
+            <a href="/creation" class="back-nav">← Retour à la création</a>
+            <h1>{entry.data.title}</h1>
+            <p>{entry.data.description}</p>
+        </header>
+
+        <hr class="separator" />
+
+        <div class="prose-content">
+            <Content />
+        </div>
+    </article>
+</GameLayout>
+
+<style>
+    .class-detail {
+        background: white;
+        border: 1px solid #dcd0b9;
+        border-radius: 8px;
+        padding: 2.5rem;
+        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
+        max-width: 800px;
+        margin: 2rem auto;
+    }
+
+    .back-nav {
+        font-family: "Cinzel", serif;
+        font-size: 0.8rem;
+        color: #b8860b;
+        text-decoration: none;
+        display: block;
+        margin-bottom: 1.5rem;
+    }
+
+    .post-header {
+        text-align: center;
+        margin-bottom: 2rem;
+    }
+
+    h1 {
+        margin: 0.5rem 0;
+        font-family: "Cinzel", serif;
+        font-size: 2.2rem;
+        color: #3a352a;
+    }
+
+    .separator {
+        border: 0;
+        height: 1px;
+        background-image: linear-gradient(
+            to right,
+            transparent,
+            #dcd0b9,
+            transparent
+        );
+        margin: 2.5rem 0;
+    }
+
+    .prose-content {
+        font-size: 1.1rem;
+    }
+</style>