Vision Refactor

app/vision/page.tsx

@@ -380,25 +380,63 @@ export default function VisionPage() {
               <div className="flex flex-col lg:flex-row gap-6">
                 {/* Colonne calendrier (étroite, garde le thème par défaut qui fonctionnait) */}
                 <div className="w-full lg:w-80 lg:flex-shrink-0">
+                  <style dangerouslySetInnerHTML={{__html: `
+                    /* Forcer le header mois/année */
+                    .rdp-caption_label {
+                      color: #111827 !important;
+                      font-weight: 600 !important;
+                    }
+                    /* Forcer les boutons de navigation */
+                    .rdp-nav_button {
+                      color: #374151 !important;
+                      background-color: white !important;
+                    }
+                    .rdp-nav_button:hover {
+                      color: #111827 !important;
+                    }
+                    .rdp-nav_button svg {
+                      color: #374151 !important;
+                    }
+                    .rdp-nav_button:hover svg {
+                      color: #111827 !important;
+                    }
+                    /* Forcer les jours normaux */
+                    .rdp-day:not(.rdp-day_selected):not(.rdp-day_outside):not(.hasMeeting) {
+                      color: #1f2937 !important;
+                      background-color: white !important;
+                    }
+                    /* Forcer le jour d'aujourd'hui */
+                    .rdp-day_today:not(.rdp-day_selected):not(.hasMeeting) {
+                      background-color: #DBEAFE !important;
+                      color: #1d4ed8 !important;
+                      border: 2px solid #3b82f6 !important;
+                    }
+                    /* Forcer le jour sélectionné */
+                    .rdp-day_selected {
+                      background-color: #2563eb !important;
+                      color: white !important;
+                    }
+                    /* Forcer les jours hors mois */
+                    .rdp-day_outside {
+                      color: #9ca3af !important;
+                      background-color: white !important;
+                    }
+                    /* Forcer les jours avec réunion */
+                    .rdp-day.hasMeeting {
+                      background-color: #2563eb !important;
+                      color: white !important;
+                      font-weight: 600 !important;
+                    }
+                    .rdp-day.hasMeeting:hover {
+                      background-color: #1d4ed8 !important;
+                      color: white !important;
+                    }
+                  `}} />
                   <CalendarComponent
                     mode="single"
                     selected={selectedDate}
                     onSelect={setSelectedDate}
                     className="rounded-md border"
-                    classNames={{
-                      // Header: mois/année en texte sombre
-                      caption_label: "!text-gray-900 !font-semibold",
-                      // Boutons de navigation: texte sombre sur fond blanc
-                      nav_button: "!text-gray-700 hover:!text-gray-900 !bg-white",
-                      // Forcer texte sombre sur fond blanc pour les jours normaux
-                      day: "!text-gray-900 !bg-white hover:!bg-gray-100",
-                      // Jour d'aujourd'hui: fond bleu clair avec texte bleu lisible
-                      day_today: "!bg-blue-100 !text-blue-700 !border-blue-500 !border-2",
-                      // Jour sélectionné: fond bleu foncé, texte blanc
-                      day_selected: "!bg-blue-600 !text-white hover:!bg-blue-700",
-                      // Jours hors mois: texte gris clair
-                      day_outside: "!text-gray-400 !bg-white",
-                    }}
                     modifiers={{
                       hasMeeting: (date) => {
                         if (!date) return false;
@@ -406,7 +444,7 @@ export default function VisionPage() {
                       },
                     }}
                     modifiersClassNames={{
-                      hasMeeting: "!bg-blue-600 !text-white !font-semibold hover:!bg-blue-700",
+                      hasMeeting: "hasMeeting",
                     }}
                   />
                 </div>