feat : ajustements visuels du datepicker selon maquette (#MUI-33)

- nouveau token couleur m-primary-light (#EFEFFD)
- popover en largeur du champ, shadow au lieu de bordure, collé au champ
- frames semaine (35x45) et jours alignés à 45px, cercle centré, font-medium
- colonne semaine étroite + marge, numéros en black/60 (semaine courante en black)
- vue mois en toutes lettres sur 3 colonnes, blocs 45px
- label bleu et grossissement calibré du champ à l'ouverture
- header sans hover, chevrons et titre plaqués en haut

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/components/malio/date/Date.vue

@@ -49,9 +49,9 @@
         </button>
         <Icon
           data-test="calendar-icon"
-          icon="mdi:calendar-outline"
-          :width="20"
-          :height="20"
+          icon="mdi:calendar-blank"
+          :width="24"
+          :height="24"
           :class="iconStateClass"
         />
       </div>
@@ -60,8 +60,7 @@
         v-if="isOpen"
         data-test="popover"
         role="dialog"
-        class="absolute left-0 top-[calc(100%-4px)] z-20 min-w-[320px] rounded-b-md border border-t-0 bg-white"
-        :class="popoverBorderClass"
+        class="absolute left-0 right-0 top-full z-20 box-border w-full rounded-b-md bg-white p-[10px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
       >
         <CalendarHeader
           :view-mode="viewMode"
@@ -253,7 +252,7 @@ const mergedGroupClass = computed(() =>
 
 const mergedInputClass = computed(() =>
   twMerge(
-    'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none placeholder:text-transparent',
+    'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none transition-[padding] duration-150 placeholder:text-transparent',
     isFilled.value ? 'border-black' : 'border-m-muted',
     props.disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : '',
     hasError.value
@@ -261,7 +260,7 @@ const mergedInputClass = computed(() =>
       : hasSuccess.value
         ? 'border-m-success'
         : 'focus:border-m-primary',
-    isOpen.value ? '!rounded-b-none !border-b-0 border-m-primary' : '',
+    isOpen.value ? 'border-m-primary !py-[9px] !rounded-b-none' : '',
     props.inputClass,
   ),
 )
@@ -274,7 +273,9 @@ const mergedLabelClass = computed(() =>
       ? 'text-m-danger'
       : hasSuccess.value
         ? 'text-m-success'
-        : 'peer-placeholder-shown:text-m-muted text-black',
+        : isOpen.value
+          ? 'text-m-primary'
+          : 'peer-placeholder-shown:text-m-muted text-black',
     props.labelClass,
   ),
 )
@@ -286,10 +287,6 @@ const iconStateClass = computed(() => {
   if (isFilled.value) return 'text-black'
   return 'text-m-muted'
 })
-
-const popoverBorderClass = computed(() =>
-  hasError.value ? 'border-m-danger' : hasSuccess.value ? 'border-m-success' : 'border-m-primary',
-)
 </script>
 
 <style scoped>