diff --git a/app/story/accordion/accordion.story.vue b/app/story/accordion/accordion.story.vue
new file mode 100644
index 0000000..3142e63
--- /dev/null
+++ b/app/story/accordion/accordion.story.vue
@@ -0,0 +1,125 @@
+<template>
+  <Story title="Disclosure/Accordion">
+    <div class="grid grid-cols-1 gap-6">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Multiple (filtres) — défaut</h2>
+        <MalioAccordion v-model="multiple">
+          <MalioAccordionItem title="Prix" value="prix">
+            <p>Slider de prix ici…</p>
+          </MalioAccordionItem>
+          <MalioAccordionItem title="Catégorie" value="cat">
+            <p>Liste de checkboxes ici…</p>
+          </MalioAccordionItem>
+          <MalioAccordionItem title="Marque" value="marque">
+            <p>Recherche + liste ici…</p>
+          </MalioAccordionItem>
+        </MalioAccordion>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Single (FAQ)</h2>
+        <MalioAccordion v-model="single" mode="single">
+          <MalioAccordionItem title="Question 1" value="q1">
+            <p>Réponse 1</p>
+          </MalioAccordionItem>
+          <MalioAccordionItem title="Question 2" value="q2">
+            <p>Réponse 2</p>
+          </MalioAccordionItem>
+        </MalioAccordion>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Section désactivée</h2>
+        <MalioAccordion>
+          <MalioAccordionItem title="Active" value="ok">
+            <p>Contenu accessible</p>
+          </MalioAccordionItem>
+          <MalioAccordionItem title="Désactivée" value="ko" :disabled="true">
+            <p>Inaccessible</p>
+          </MalioAccordionItem>
+        </MalioAccordion>
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioAccordion
+
+Accordéon compositionnel : un parent `MalioAccordion` qui enveloppe des
+`MalioAccordionItem`. Conçu pour des systèmes de filtres (plusieurs sections
+dépliées simultanément) comme pour des FAQ (une seule section ouverte).
+
+---
+
+## Props — MalioAccordion
+
+### mode
+- Type: `'single' | 'multiple'`
+- Défaut: `'multiple'`
+- Description: `multiple` autorise plusieurs panneaux ouverts ; `single` ferme les autres à l'ouverture.
+
+### modelValue
+- Type: `string | string[]`
+- Description: clés ouvertes. `string[]` en mode `multiple`, `string` en mode `single`. Sans v-model, état interne (non contrôlé).
+
+### id
+- Type: `string`
+- Description: préfixe des IDs d'accessibilité. Auto-généré si absent.
+
+### groupClass
+- Type: `string`
+- Description: classes du conteneur, fusionnées via `twMerge`.
+
+---
+
+## Props — MalioAccordionItem
+
+### title
+- Type: `string` (requis) — texte de l'en-tête.
+
+### value
+- Type: `string` — clé unique de la section (recommandée pour piloter le v-model). Auto-générée si absente.
+
+### defaultOpen
+- Type: `boolean` — défaut `false`. Ouvre la section au montage (mode non contrôlé uniquement).
+
+### disabled
+- Type: `boolean` — défaut `false`. En-tête non cliquable.
+
+### headerClass / panelClass
+- Type: `string` — override des classes de l'en-tête / du panneau (`twMerge`).
+
+---
+
+## Slots
+
+Slot par défaut de `MalioAccordionItem` = contenu du panneau.
+
+---
+
+## Accessibilité
+
+- En-tête = `<button>` natif, `aria-expanded`, `aria-controls`.
+- Panneau `role="region"` + `aria-labelledby`.
+- Sections désactivées : `disabled` + `aria-disabled`.
+- Navigation clavier ↑/↓ entre les en-têtes.
+
+---
+
+## Events
+
+### update:modelValue
+- Émis à chaque bascule. Retourne `string[]` (mode `multiple`) ou `string` (mode `single`, `''` si tout fermé).
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioAccordion from '../../components/malio/accordion/Accordion.vue'
+import MalioAccordionItem from '../../components/malio/accordion/AccordionItem.vue'
+
+defineOptions({ name: 'AccordionStory' })
+
+const multiple = ref<string[]>(['prix'])
+const single = ref('q1')
+</script>