feat: Ajout des composants modal, accordeon, datetime avec selecteur d'heure à la molette (#56)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

---------

Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #56
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

.playground/pages/composant/accordion/accordion.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
+    <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>
+      <p class="mt-2 text-sm text-gray-500">Ouverts : {{ multiple }}</p>
+    </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>
+      <p class="mt-2 text-sm text-gray-500">Ouvert : {{ single }}</p>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Non contrôlé + defaultOpen</h2>
+      <MalioAccordion>
+        <MalioAccordionItem title="Section A" value="a" :default-open="true">
+          <p>Ouverte au montage</p>
+        </MalioAccordionItem>
+        <MalioAccordionItem title="Section B" value="b">
+          <p>Fermée au montage</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>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const multiple = ref<string[]>(['prix'])
+const single = ref('q1')
+</script>