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>

.playground/pages/composant/date/date.vue

@@ -1,41 +1,55 @@
 <template>
-  <div class="max-w-md space-y-6">
+  <div class="space-y-6 p-4">
     <h1 class="text-2xl font-bold">MalioDate</h1>
 
-    <MalioDate
-      v-model="value"
-      label="Date de naissance"
-      hint="Clique pour ouvrir le calendrier"
-    />
+    <div class="flex flex-wrap items-start gap-10">
+      <div class="w-[480px] space-y-3">
+        <h2 class="font-semibold">Large (480px)</h2>
+        <MalioDate
+          v-model="value"
+          label="Date de naissance"
+          hint="Clique pour ouvrir le calendrier"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Valeur (ISO) : <code>{{ value ?? 'null' }}</code></p>
+        </div>
+        <div class="flex gap-2">
+          <button
+            type="button"
+            class="rounded bg-m-primary px-3 py-1.5 text-white"
+            @click="value = '2026-12-25'"
+          >
+            Forcer le 25/12/2026
+          </button>
+          <button
+            type="button"
+            class="rounded border px-3 py-1.5"
+            @click="value = null"
+          >
+            Réinitialiser
+          </button>
+        </div>
+      </div>
 
-    <div class="rounded border p-3 text-sm">
-      <p>Valeur (ISO) : <code>{{ value ?? 'null' }}</code></p>
+      <div class="w-[396px] space-y-3">
+        <h2 class="font-semibold">ERP (396px)</h2>
+        <MalioDate
+          v-model="erpValue"
+          label="Date du rendez-vous"
+          hint="Largeur cible ERP"
+        />
+        <div class="rounded border p-3 text-sm">
+          <p>Valeur (ISO) : <code>{{ erpValue ?? 'null' }}</code></p>
+        </div>
+        <MalioDate
+          v-model="bounded"
+          label="Date bornée"
+          :min="todayIso"
+          :max="maxIso"
+          hint="Entre aujourd'hui et +30 jours"
+        />
+      </div>
     </div>
-
-    <div class="flex gap-2">
-      <button
-        type="button"
-        class="rounded bg-m-primary px-3 py-1.5 text-white"
-        @click="value = '2026-12-25'"
-      >
-        Forcer le 25/12/2026
-      </button>
-      <button
-        type="button"
-        class="rounded border px-3 py-1.5"
-        @click="value = null"
-      >
-        Réinitialiser
-      </button>
-    </div>
-
-    <MalioDate
-      v-model="bounded"
-      label="Date bornée"
-      :min="todayIso"
-      :max="maxIso"
-      hint="Entre aujourd'hui et +30 jours"
-    />
   </div>
 </template>
 
@@ -49,5 +63,6 @@ const todayIso = toIso(now)
 const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))
 
 const value = ref<string | null>(null)
+const erpValue = ref<string | null>(null)
 const bounded = ref<string | null>(null)
 </script>