Enhance calendar layout with clearer day separations and weekend highlighting

Update CalendarGrid component to use gap styling for day separation and apply a light gray background to weekend days for improved visual clarity.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cc2d271b-82f0-4d6a-9302-a0b067ffb429
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/cc2d271b-82f0-4d6a-9302-a0b067ffb429/FFLhsf1

client/src/components/CalendarGrid.tsx

@@ -389,7 +389,7 @@ export default function CalendarGrid({
       </div>
 
       {/* Calendar Days - Grid moderne sans arrondi */}
-      <div className="grid grid-cols-7">
+      <div className="grid grid-cols-7 gap-0.5 bg-gray-500 p-0.5">
         {paddedDays.map((date, index) => {
           const isCurrentMonth = isSameMonth(date, currentDate);
           const isTodayDate = isToday(date);
@@ -400,15 +400,15 @@ export default function CalendarGrid({
           return (
             <div
               key={index}
-              className={`h-32 relative group cursor-pointer transition-all duration-200 border-r border-b border-gray-400 ${
+              className={`h-32 relative group cursor-pointer transition-all duration-200 ${
                 isTodayDate
-                  ? "bg-blue-100 hover:bg-blue-200 border-2 border-blue-500"
+                  ? "bg-blue-100 hover:bg-blue-200 border-2 border-blue-600"
                   : isWeekend && isCurrentMonth
-                  ? "bg-gray-50 hover:bg-gray-100"
+                  ? "bg-gray-200 hover:bg-gray-300"
                   : isCurrentMonth
                   ? "bg-white hover:bg-gray-50"
-                  : "bg-gray-100"
-              } ${!isCurrentMonth ? 'opacity-50' : ''} last:border-r-0`}
+                  : "bg-gray-150"
+              } ${!isCurrentMonth ? 'opacity-50' : ''}`}
               onClick={() => onDateClick(date)}
             >
               <div className="p-3 h-full flex flex-col">

client/src/index.css

@@ -380,3 +380,8 @@ button[data-day-weekend="true"],
 .hover\:to-gray-50:hover {
   --tw-gradient-to: #f9fafb var(--tw-gradient-to-position);
 }
+
+/* Couleur grise personnalisée pour les jours hors mois */
+.bg-gray-150 {
+  background-color: #f1f3f4;
+}