Add a Prismana-only filter with a rainbow star icon

website/public/data/site.json

@@ -2740,6 +2740,7 @@
     "filters": "Filtres",
     "name": "Nom",
     "searchPlaceholder": "Nom français ou anglais…",
+    "prismanaOnly": "Prismana uniquement",
     "elements": "Éléments",
     "roles": "Rôles",
     "role": "Rôle",

website/public/static/icons/prismana.svg

@@ -0,0 +1,13 @@
+<!-- Rôle : représente les formes Prismana par une étoile arc-en-ciel. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <defs>
+    <linearGradient id="rainbow" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#fb7185"/>
+      <stop offset=".25" stop-color="#facc15"/>
+      <stop offset=".5" stop-color="#4ade80"/>
+      <stop offset=".75" stop-color="#38bdf8"/>
+      <stop offset="1" stop-color="#c084fc"/>
+    </linearGradient>
+  </defs>
+  <path d="m12 2 3.1 6.4 7.1 1-5.1 5 1.2 7.1-6.3-3.4-6.3 3.4 1.2-7.1-5.1-5 7.1-1Z" fill="url(#rainbow)" stroke="#fff" stroke-opacity=".45" stroke-linejoin="round"/>
+</svg>

website/src/features/games/aniimo/AniimoFilters.jsx

@@ -31,6 +31,11 @@ export function AniimoFilters({ filters, onChange, options, t, content }) {
         <span>{content.name}</span>
         <input className="nds-input" data-size="sm" type="search" placeholder={content.searchPlaceholder} value={filters.name} onChange={(event) => onChange({ ...filters, name: event.target.value })} />
       </label>
+      <label className={`filter-chip nds-chip ${filters.prismanaOnly ? "active" : ""}`} data-size="sm">
+        <input className="nds-checkbox" data-size="sm" type="checkbox" checked={filters.prismanaOnly} onChange={(event) => onChange({ ...filters, prismanaOnly: event.target.checked })} />
+        <img src="/static/icons/prismana.svg" alt="" width="16" height="16" />
+        <span>{content.prismanaOnly}</span>
+      </label>
       <div className="aniimo-filter-sections filter-options legacy-scrollbar" role="region" aria-label={content.filters} tabIndex="0">
         {["roles", "elements", "abilities"].map((key) => (
           <div key={key} className="aniimo-filter-section-surface">

website/src/features/games/aniimo/utils.js

@@ -1,6 +1,6 @@
 // Rôle : prépare les variantes Aniimo et applique les critères avant leur regroupement.
 export function createAniimoFilters() {
-  return { name: "", elements: [], roles: [], abilities: {}, elementsLogic: "and", abilitiesLogic: "and", grouped: true };
+  return { name: "", prismanaOnly: false, elements: [], roles: [], abilities: {}, elementsLogic: "and", abilitiesLogic: "and", grouped: true };
 }
 
 export const ANIIMO_STATS = ["hp", "atk", "p_def", "m_def", "break", "regen"];
@@ -51,6 +51,7 @@ export function filterAniimoVariants(variants, filters) {
   const abilities = Object.entries(filters.abilities);
   return variants.filter((variant) => (
     (!search || variant.searchNames.some((name) => name.includes(search)))
+    && (!filters.prismanaOnly || variant.form === "prismana_form")
     && matchesSelection(filters.elements, filters.elementsLogic, (element) => variant.elements.includes(element))
     && (!filters.roles.length || filters.roles.includes(variant.role))
     && matchesSelection(abilities, filters.abilitiesLogic, ([type, minimum]) => variant.homeland_abilities.some((ability) => ability.type === type && ability.level >= minimum))

website/src/styles/_aniimo.scss

@@ -4,6 +4,7 @@
 .aniimo-home-card img { padding: 0 15%; object-fit: cover; object-position: 50% 38%; }
 .aniimo-layout .game-results { min-width: 0; }
 .aniimo-filters { min-width: 0; }
+.aniimo-filters > .filter-chip { margin-bottom: var(--space-3); }
 .aniimo-filter-sections { gap: 16px; }
 .aniimo-filter-section-surface + .aniimo-filter-section-surface { padding-top: 12px; border-top: 1px solid var(--color-border); }
 .aniimo-filter-section {