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>

app/components/malio/date/DateTime.vue

@@ -28,25 +28,25 @@
         :max="max?.slice(0, 10)"
         @select="onSelectDay"
       />
-      <!-- Bloc heure intérimaire : input natif, isolé pour remplacement futur par le sélecteur dédié. -->
-      <div class="mt-[26px] flex-col items-center gap-2">
-        <input
-          :id="timeInputId"
-          data-test="time-input"
-          type="time"
-          :value="timeValue"
-          class="w-full border border-m-muted bg-white px-2 py-1 text-base outline-none focus:border-m-primary"
-          @input="onTimeInput"
-        >
+      <div class="mt-4">
+        <MalioTimePicker
+          :model-value="timeValue || null"
+          label="Heure"
+          :clearable="false"
+          static-popover
+          @update:model-value="onTimeChange"
+        />
       </div>
     </template>
   </CalendarField>
 </template>
 
 <script setup lang="ts">
-import {computed, ref, useId, watch} from 'vue'
+import {computed, ref, watch} from 'vue'
 import CalendarField from './internal/CalendarField.vue'
 import MonthGrid from './internal/MonthGrid.vue'
+import MalioTimePicker from '../time/TimePicker.vue'
+import {formatTime} from '../time/composables/timeFormat'
 import {composeDateTime, formatIsoDateTimeToDisplay, isValidIsoDateTime, splitDateTime} from './composables/datetimeFormat'
 
 defineOptions({name: 'MalioDateTime', inheritAttrs: false})
@@ -94,9 +94,6 @@ const props = withDefaults(
 
 const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
 
-const generatedId = useId()
-const timeInputId = computed(() => `${props.id || `malio-datetime-${generatedId}`}-time`)
-
 // pendingTime : heure réglée avant qu'un jour ne soit choisi (sinon on ne peut pas émettre).
 const pendingTime = ref('')
 
@@ -106,12 +103,14 @@ const displayValue = computed(() => formatIsoDateTimeToDisplay(props.modelValue
 const timeValue = computed(() => parts.value.time || pendingTime.value)
 
 function onSelectDay(iso: string) {
-  const time = parts.value.time || pendingTime.value || '00:00'
+  // Si aucune heure n'a été choisie, on prend l'heure actuelle (pas 00:00).
+  // (heure courante au moment du clic)
+  const now = new Date()
+  const time = parts.value.time || pendingTime.value || formatTime(now.getHours(), now.getMinutes())
   emit('update:modelValue', composeDateTime(iso, time))
 }
 
-function onTimeInput(e: Event) {
-  const value = (e.target as HTMLInputElement).value
+function onTimeChange(value: string | null) {
   if (!value) return
   if (datePart.value) {
     emit('update:modelValue', composeDateTime(datePart.value, value))