classe et espece

src/content/classes/barbare.md

@@ -1,4 +1,5 @@
 ---
 title: "Barbare"
+encre: "martial"
 description: "Guerrier sauvage entrant dans une rage dévastatrice, il puise sa force dans son instinct primaire."
 ---

src/content/classes/barde.md

@@ -1,4 +1,5 @@
 ---
 title: "Barde"
+encre: "arcane" # L'encre de pouvoir (Bleu)
 description: "Maître de la magie par le son et les mots, il inspire ses compagnons et manipule l'esprit de ses ennemis."
 ---

src/content/classes/clerc.md

@@ -1,4 +1,5 @@
 ---
 title: "Clerc"
+encre: "divin"
 description: "Canal de la puissance divine, il soigne ses alliés et foudroie les impies par sa foi."
 ---

src/content/classes/druide.md

@@ -1,4 +1,5 @@
 ---
 title: "Druide"
+encre: "primal"
 description: "Gardien de la nature, il commande aux éléments et peut adopter la forme de bêtes féroces."
 ---

src/content/classes/ensorceleur.md

@@ -1,4 +1,5 @@
 ---
 title: "Ensorceleur"
+encre: "arcane"
 description: "Possédant une magie innée coulant dans ses veines, il déchaîne une puissance brute sans besoin d'étude."
 ---

src/content/classes/guerrier.md

@@ -1,4 +1,5 @@
 ---
 title: "Guerrier"
+encre: "martial"
 description: "Maître des armes et du combat rapproché. Le Guerrier est une force inarrêtable sur le champ de bataille."
 ---

src/content/classes/mage.md

@@ -1,4 +1,5 @@
 ---
 title: "Mage"
+encre: "arcane"
 description: "Manipulateur des arcanes, le Mage plie la réalité à sa volonté avec de puissants sortilèges."
 ---

src/content/classes/moine.md

@@ -1,4 +1,5 @@
 ---
 title: "Moine"
+encre: "hybride"
 description: "Maître des arts martiaux, il canalise son énergie intérieure (Ki) pour accomplir des prouesses physiques surhumaines."
 ---

src/content/classes/paladin.md

@@ -1,4 +1,5 @@
 ---
 title: "Paladin"
+encre: "divin"
 description: "Chevalier lié par un serment sacré, il allie la force des armes à la protection divine."
 ---

src/content/classes/rodeur.md

@@ -1,4 +1,5 @@
 ---
 title: "Rôdeur"
+encre: "primal"
 description: "Traqueur d'élite des terres sauvages, il survit là où les autres périssent grâce à son lien avec la faune."
 ---

src/content/classes/sorcier.md

@@ -1,4 +1,5 @@
 ---
 title: "Sorcier"
+encre: "arcane"
 description: "Ayant conclu un pacte avec une entité occulte, il manie des pouvoirs sombres et mystérieux."
 ---

src/content/classes/voleur.md

@@ -1,4 +1,5 @@
 ---
 title: "Voleur"
+encre: "martial"
 description: "Expert en infiltration et en précision, il frappe dans l'ombre et déjoue les pièges les plus mortels."
 ---

src/content/config.ts

@@ -27,6 +27,9 @@ const classes = defineCollection({
     .object({
       title: z.string(),
       description: z.string(),
+      encre: z
+        .enum(["martial", "arcane", "divin", "primal", "hybride"])
+        .default("martial"),
     })
     .passthrough(),
 });
@@ -37,6 +40,9 @@ const especes = defineCollection({
     .object({
       title: z.string(),
       description: z.string(),
+      spectre: z
+        .enum(["solaire", "elementaire", "terrestre", "sylvestre", "ombre"])
+        .default("terrestre"),
     })
     .passthrough(),
 });

src/content/especes/aarakocra.md

@@ -1,4 +1,5 @@
 ---
 title: "Aarakocra"
+spectre: "elementaire" # Le spectre de nature (Cyan/Argent)
 description: "Peuple oiseau originaire du Plan Élémentaire de l'Air, ils survolent le monde avec une vigilance et une liberté inégalées."
 ---

src/content/especes/aasimar.md

@@ -1,4 +1,5 @@
 ---
 title: "Aasimar"
+spectre: "solaire"
 description: "Humanoïdes touchés par une étincelle céleste, ils portent en eux la lumière des plans supérieurs pour combattre les ténèbres."
 ---

src/content/especes/artionis.md

@@ -1,4 +1,5 @@
 ---
 title: "Artionis"
+spectre: "sylvestre"
 description: "Puissants humanoïdes à l'allure d'ours, protecteurs de la forêt dont la force tranquille cache une fureur redoutable en combat."
 ---

src/content/especes/demielfe.md

@@ -1,4 +1,5 @@
 ---
 title: "Demi-Elfe"
+spectre: "sylvestre"
 description: "Voyageurs entre deux mondes, alliant le charme humain à l'élégance elfique."
 ---

src/content/especes/demiorc.md

@@ -1,4 +1,5 @@
 ---
 title: "Demi-Orc"
+spectre: "terrestre"
 description: "Guerriers à la force prodigieuse, portés par une résilience et une fureur légendaire."
 ---

src/content/especes/drakeide.md

@@ -1,4 +1,5 @@
 ---
 title: "Drakéide"
+spectre: "elementaire"
 description: "Fiers héritiers des dragons, capables de souffler le feu ou la glace sur leurs ennemis."
 ---

src/content/especes/drow.md

@@ -1,4 +1,5 @@
 ---
 title: "Drow"
+spectre: "ombre"
 description: "Elfe des profondeurs à la peau sombre et à la chevelure d'argent, maître de la magie des ombres et de l'intrigue dans les cités souterraines."
 ---

src/content/especes/elfe.md

@@ -1,4 +1,5 @@
 ---
 title: "Elfe"
+spectre: "sylvestre"
 description: "Gracieux et anciens, les elfes ont une affinité naturelle avec la magie et la nature. Ils vivent bien plus longtemps que les autres espèces."
 ---

src/content/especes/fee.md

@@ -1,4 +1,5 @@
 ---
 title: "Fée"
+spectre: "sylvestre"
 description: "Petites créatures ailées imprégnées de la magie sauvage de la Féerie, apportant malice et enchantement partout où elles passent."
 ---

src/content/especes/genasi.md

@@ -1,4 +1,5 @@
 ---
 title: "Genasi"
-description: "Êtres imprégnés de l'énergie brute des quatre éléments, leur nature changeante reflète la puissance de la terre, du feu, de l'air ou de l'eau."
+spectre: "elementaire"
+description: "Êtres imprégnés de l'énergie brute d'un des quatre éléments, leur nature changeante reflète la puissance de la terre, du feu, de l'air ou de l'eau."
 ---

src/content/especes/gnome.md

@@ -1,4 +1,5 @@
 ---
 title: "Gnome"
+spectre: "ombre"
 description: "Inventeurs excentriques et curieux, maniant souvent une magie subtile ou mécanique."
 ---

src/content/especes/gobelin.md

@@ -1,4 +1,5 @@
 ---
 title: "Gobelin"
+spectre: "ombre"
 description: "Ingénieux et rusés, ces petits humanoïdes survivent par leur nombre et leur capacité à transformer n'importe quel déchet en outil de guerre."
 ---

src/content/especes/gobelours.md

@@ -1,4 +1,5 @@
 ---
 title: "Gobelours"
+spectre: "ombre"
 description: "Prédateur massif et furtif de la famille des gobelinoïdes, il utilise sa force brute et sa surprise pour écraser ses proies."
 ---

src/content/especes/grung.md

@@ -1,4 +1,5 @@
 ---
 title: "Grung"
+spectre: "sylvestre"
 description: "Petites grenouilles humanoïdes des jungles profondes, ces guerriers territoriaux utilisent leur peau toxique comme une arme mortelle."
 ---

src/content/especes/halfelin.md

@@ -1,4 +1,5 @@
 ---
 title: "Halfelin"
+spectre: "ombre"
 description: "Petits par la taille mais grands par le courage, ils possèdent une chance insolente."
 ---

src/content/especes/harengon.md

@@ -1,4 +1,5 @@
 ---
 title: "Harengon"
+spectre: "sylvestre"
 description: "Peuple lièvre originaire de la Féerie, ils bondissent hors du danger avec une agilité et une intuition prodigieuses."
 ---

src/content/especes/hobgobelin.md

@@ -1,4 +1,5 @@
 ---
 title: "Hobgobelin"
+spectre: "ombre"
 description: "Fin stratège à la stature imposante, il vit pour la gloire du combat et la discipline de fer des légions militaires."
 ---

src/content/especes/humain.md

@@ -1,4 +1,5 @@
 ---
 title: "Humain"
+spectre: "terrestre"
 description: "Adaptables et ambitieux, les humains sont la plus jeune et la plus nombreuse des espèces, capables de s'illustrer dans toutes les voies."
 ---

src/content/especes/kobold.md

@@ -1,4 +1,5 @@
 ---
 title: "Kobold"
+spectre: "ombre"
 description: "Petit humanoïde reptilien revendiquant une parenté avec les dragons, il survit grâce à son ingéniosité et ses pièges mortels."
 ---

src/content/especes/nain.md

@@ -1,4 +1,5 @@
 ---
 title: "Nain"
+spectre: "terrestre"
 description: "Maîtres de la forge et de la pierre, réputés pour leur robustesse et leur loyauté indéfectible."
 ---

src/content/especes/shifter.md

@@ -1,4 +1,5 @@
 ---
 title: "Shifter"
+spectre: "sylvestre"
 description: "Humains liés aux bêtes sauvages, capables de manifester partiellement des traits bestiaux pour décupler leurs capacités de survie"
 ---

src/content/especes/tabaxi.md

@@ -1,4 +1,5 @@
 ---
 title: "Tabaxi"
+spectre: "sylvestre"
 description: "Peuple félin agile et d'une curiosité sans limites, ils parcourent le monde à la recherche d'histoires et d'artefacts perdus."
 ---

src/content/especes/tieffelin.md

@@ -1,4 +1,5 @@
 ---
 title: "Tieffelin"
+spectre: "ombre"
 description: "Marqués par une lignée infernale, ils naviguent dans les ombres avec une aura de mystère."
 ---

src/content/especes/wolfen.md

@@ -1,4 +1,5 @@
 ---
 title: "Wolfen"
+spectre: "terrestre"
 description: "Géants lupins à la stature noble et disciplinée, ils allient l'instinct de meute à une rigueur militaire impériale."
 ---

src/pages/creation.astro

@@ -6,14 +6,31 @@ const classes = await getCollection("classes");
 const especes = await getCollection("especes");
 const personnages = await getCollection("personnages");
 
-// Groupement pour les classes (Gestion multiclassage)
+const SPECTRUM = {
-const classData = personnages.reduce((acc, p) => {
+    // Encres (Classes) - Opacité 1.0
-    // On vérifie si classes_detail existe, sinon on simule un tableau avec la classe de base
+    martial: "rgba(230, 57, 70, 1)",
-    const details = p.data.classes_detail || [
+    arcane: "rgba(0, 112, 255, 1)",
-        { nom: p.data.classe, niveau: p.data.niveau_global || 1 },
+    divin: "rgba(200, 155, 60, 1)",
-    ];
+    primal: "rgba(42, 157, 143, 1)",
+    hybride: "rgba(100, 100, 100, 1)",
 
-    details.forEach((c) => {
+    // Spectres (Espèces) - Opacité 0.25
+    solaire: "rgba(200, 155, 60, 0.4)",
+    elementaire: "rgba(0, 171, 255, 0.4)",
+    terrestre: "rgba(139, 69, 19, 0.4)",
+    sylvestre: "rgba(0, 128, 0, 0.4)",
+    ombre: "rgba(75, 0, 130, 0.4)",
+};
+
+// 1. Groupement par CLASSE (Bordure BAS = Espèce)
+const classData = personnages.reduce((acc, p) => {
+    const pEspeceData = especes.find(
+        (e) => e.id.toLowerCase() === p.data.espece?.toLowerCase(),
+    );
+    const spectreKey = pEspeceData?.data.spectre?.toLowerCase();
+
+    // On itère sur chaque classe du personnage pour qu'il apparaisse partout
+    p.data.classes_detail.forEach((c) => {
         if (!c.nom) return;
         const key = c.nom.toLowerCase();
         if (!acc[key]) acc[key] = [];
@@ -21,20 +38,32 @@ const classData = personnages.reduce((acc, p) => {
         acc[key].push({
             nom: p.data.nom,
             niveau_classe: c.niveau,
-            niveau_total: p.data.niveau_global || c.niveau,
+            colorSpectre: SPECTRUM[spectreKey] || "rgba(200, 200, 200, 0.5)",
         });
     });
     return acc;
 }, {});
 
-// Groupement pour l'espèce
+// 2. Groupement par ESPECE (Bordure HAUT = Classe principale)
 const especeData = personnages.reduce((acc, p) => {
     if (!p.data.espece) return acc;
     const key = p.data.espece.toLowerCase();
     if (!acc[key]) acc[key] = [];
+
+    // On prend la première classe de la liste comme classe principale
+    const mainClassName = p.data.classes_detail?.[0]?.nom;
+
+    const pClassData = classes.find(
+        (cl) =>
+            cl.id.toLowerCase() === mainClassName?.toLowerCase() ||
+            cl.data.title?.toLowerCase() === mainClassName?.toLowerCase(),
+    );
+    const encreKey = pClassData?.data.encre?.toLowerCase();
+
     acc[key].push({
         nom: p.data.nom,
         niveau: p.data.niveau_global || 1,
+        colorEncre: SPECTRUM[encreKey] || "#ffffff",
     });
     return acc;
 }, {});
@@ -46,7 +75,7 @@ const especeData = personnages.reduce((acc, p) => {
             <h2 class="dnd-title">Choisissez votre Classe</h2>
             <div class="dnd-bar"></div>
             <p class="dnd-intro">
-                La classe définit vos compétences et votre rôle dans l'aventure.
+                La classe définit vos compétences et votre rôle.
             </p>
 
             <div class="class-grid">
@@ -54,30 +83,30 @@ const especeData = personnages.reduce((acc, p) => {
                     classes.map((charClass) => {
                         const charactersInClass =
                             classData[charClass.id.toLowerCase()] || [];
-                        return (
+                        const colorEncre =
-                            <div class="class-card">
+                            SPECTRUM[charClass.data.encre] || "#c89b3c";
-                                <h3>{charClass.data.title}</h3>
 
+                        return (
+                            <div
+                                class="class-card"
+                                style={`--accent-color: ${colorEncre}`}
+                            >
+                                <h3 class="dynamic-title">
+                                    {charClass.data.title}
+                                </h3>
                                 <div class="bubble-container">
                                     {charactersInClass.map((p) => (
-                                        <div class="notification-bubble">
+                                        <div
+                                            class="notification-bubble bubble-species-border"
+                                            style={`--p-color: ${p.colorSpectre}`}
+                                        >
                                             <span class="p-name">{p.nom}</span>
                                             <span class="p-lvl">
                                                 Niv.{p.niveau_classe}
                                             </span>
-                                            {p.niveau_total >
-                                                p.niveau_classe && (
-                                                <span
-                                                    class="multiclass-dot"
-                                                    title="Multiclassé"
-                                                >
-                                                    +
-                                                </span>
-                                            )}
                                         </div>
                                     ))}
                                 </div>
-
                                 <p>{charClass.data.description}</p>
                                 <a
                                     href={`/classes/${charClass.id}`}
@@ -104,13 +133,22 @@ const especeData = personnages.reduce((acc, p) => {
                     especes.map((espece) => {
                         const charactersInEspece =
                             especeData[espece.id.toLowerCase()] || [];
-                        return (
+                        const colorBg =
-                            <div class="class-card">
+                            SPECTRUM[espece.data.spectre] ||
-                                <h3>{espece.data.title}</h3>
+                            "rgba(255,255,255,1)";
 
+                        return (
+                            <div
+                                class="class-card species-card"
+                                style={`--bg-color: ${colorBg}`}
+                            >
+                                <h3>{espece.data.title}</h3>
                                 <div class="bubble-container">
                                     {charactersInEspece.map((p) => (
-                                        <div class="notification-bubble species">
+                                        <div
+                                            class="notification-bubble bubble-class-border"
+                                            style={`--p-color: ${p.colorEncre}`}
+                                        >
                                             <span class="p-name">{p.nom}</span>
                                             <span class="p-lvl">
                                                 Niv.{p.niveau}
@@ -118,11 +156,10 @@ const especeData = personnages.reduce((acc, p) => {
                                         </div>
                                     ))}
                                 </div>
-
                                 <p>{espece.data.description}</p>
                                 <a
                                     href={`/especes/${espece.id}`}
-                                    class="select-button"
+                                    class="select-button species-button"
                                 >
                                     Détails
                                 </a>
@@ -141,135 +178,125 @@ const especeData = personnages.reduce((acc, p) => {
         margin: 0 auto;
         padding: 2rem 1rem;
     }
-
     .character-select {
         margin: 4rem 0;
     }
-
     .dnd-title {
         font-family: "Playfair Display", serif;
         font-size: 2.5rem;
         color: #c89b3c;
-        margin: 0;
         text-align: center;
     }
-
     .dnd-bar {
         height: 3px;
         background: linear-gradient(
             to right,
-            transparent 0%,
+            transparent,
-            #c89b3c 50%,
+            #c89b3c,
-            transparent 100%
+            transparent
         );
-        margin: 4px auto 1rem auto;
+        margin: 4px auto 1rem;
         width: 50%;
     }
-
     .dnd-intro {
         font-family: "Cinzel", serif;
         font-size: 0.9rem;
-        margin: 1rem auto;
-        opacity: 0.8;
         text-align: center;
-        max-width: 600px;
+        opacity: 0.8;
+        margin-bottom: 2rem;
     }
-
     .class-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 2rem;
-        margin-top: 3rem;
     }
 
     .class-card {
-        background: white;
+        background-color: white;
-        border: 1px solid #c89b3c;
+        border: 1px solid var(--accent-color, #c89b3c);
         padding: 2rem 1.5rem;
         border-radius: 5px;
         text-align: center;
-        transition:
-            transform 0.3s,
-            box-shadow 0.3s;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+        transition: all 0.3s ease;
     }
 
-    .class-card:hover {
+    .dynamic-title {
-        transform: translateY(-5px);
+        color: var(--accent-color) !important;
-        box-shadow: 0 5px 15px rgba(200, 155, 60, 0.2);
-    }
-
-    .class-card h3 {
         font-family: "Playfair Display", serif;
         font-size: 1.8rem;
-        color: #c89b3c;
+    }
-        margin: 0 0 0.5rem 0;
+    .species-card {
+        background-color: var(--bg-color) !important;
+        border: 1px solid rgba(0, 0, 0, 0.1);
     }
 
+    .notification-bubble {
+        background: #1a1a1a !important;
+        color: white !important;
+        font-family: "Cinzel", serif;
+        font-size: 0.7rem;
+        padding: 4px 10px;
+        border-radius: 4px;
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    /* Correction Bordure BAS (Espèce) : On ajoute un shadow interne pour renforcer la couleur à 0.25 */
+    .bubble-species-border {
+        background-color: var(--p-color) !important;
+        border-bottom: 3px solid var(--p-color) !important;
+        box-shadow: inset 0 -2px 0 0 var(--p-color);
+    }
+
+    /* Correction Bordure HAUT (Classe) */
+    .bubble-class-border {
+        border-top: 3px solid var(--p-color) !important;
+    }
+
+    .p-lvl {
+        font-size: 0.6rem;
+        opacity: 0.7;
+        padding-left: 5px;
+        border-left: 1px solid rgba(255, 255, 255, 0.2);
+    }
     .bubble-container {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         gap: 6px;
         margin-bottom: 1.5rem;
-        min-height: 28px;
+        min-height: 30px;
-    }
-
-    .notification-bubble {
-        background: #3a352a;
-        color: white;
-        font-family: "Cinzel", serif;
-        font-size: 0.7rem;
-        padding: 2px 10px;
-        border-radius: 20px;
-        display: inline-flex;
-        align-items: center;
-        gap: 5px;
-        transition: transform 0.2s ease;
-    }
-
-    .notification-bubble:hover {
-        transform: scale(1.05);
-        cursor: pointer;
-    }
-
-    .p-lvl {
-        font-size: 0.6rem;
-        opacity: 0.8;
-        padding-left: 5px;
-        border-left: 1px solid rgba(255, 255, 255, 0.3);
-    }
-
-    .multiclass-dot {
-        color: #c89b3c;
-        font-weight: bold;
-        margin-left: 2px;
-    }
-
-    .class-card p {
-        font-family: "Cinzel", serif;
-        font-size: 0.85rem;
-        opacity: 0.9;
-        flex-grow: 1;
-        margin-bottom: 1.5rem;
     }
 
     .select-button {
         font-family: "Cinzel", serif;
-        font-size: 0.9rem;
-        background: transparent;
-        color: #c89b3c;
-        border: 1px solid #c89b3c;
-        padding: 0.5rem 1rem;
-        border-radius: 3px;
         text-decoration: none;
+        padding: 0.5rem 1rem;
+        border: 1px solid var(--p-color);
+        color: var(--p-color);
         transition: all 0.3s;
     }
-
     .select-button:hover {
-        background: #c89b3c;
+        background: var(--accent-color);
         color: white;
     }
+    .species-button {
+        border-color: #1a1a1a;
+        color: #1a1a1a;
+    }
+    .species-button:hover {
+        background: #1a1a1a;
+        color: white;
+    }
+    .class-card p {
+        font-family: "Cinzel", serif;
+        font-size: 0.85rem;
+        margin-bottom: 1.5rem;
+        flex-grow: 1;
+    }
 </style>