ajout d'un calendrier pour sceduler des match

static/css/style.css

@@ -358,6 +358,8 @@ a:hover { color: var(--primary-dark); }
 .badge-upcoming { background: var(--info-light); color: var(--info); }
 .badge-in_progress { background: var(--warning-light); color: var(--warning); }
 .badge-completed { background: var(--success-light); color: var(--success); }
+.badge-scheduled { background: var(--info-light); color: var(--info); }
+.badge-cancelled { background: var(--danger-light); color: var(--danger); }
 .badge-president { background: #eef2ff; color: #4338ca; }
 .badge-manager { background: #ecfdf5; color: #059669; }
 .badge-coach { background: #fffbeb; color: #d97706; }
@@ -888,7 +890,65 @@ a:hover { color: var(--primary-dark); }
 .mr-2 { margin-right: 8px; }
 .mx-2 { margin-left: 8px; margin-right: 8px; }
 
-/* Responsive */
+/* Calendar Styles */
+#calendar {
+    min-height: 600px;
+}
+
+.fc {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.fc-toolbar {
+    margin-bottom: 16px;
+}
+
+.fc-toolbar-title {
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: var(--gray-900);
+}
+
+.fc-button {
+    background: var(--primary) !important;
+    border: none !important;
+    border-radius: var(--radius-sm) !important;
+    padding: 6px 12px !important;
+    font-size: 0.85rem !important;
+}
+
+.fc-button:hover {
+    background: var(--primary-dark) !important;
+}
+
+.fc-button-primary:not(:disabled).fc-button-active,
+.fc-button-primary:not(:disabled):active {
+    background: var(--primary-dark) !important;
+}
+
+.fc-daygrid-day {
+    transition: var(--transition);
+}
+
+.fc-daygrid-day:hover {
+    background: var(--gray-50);
+}
+
+.fc-event {
+    border-radius: var(--radius-sm);
+    padding: 2px 4px;
+    font-size: 0.8rem;
+}
+
+.fc-event-title {
+    font-weight: 600;
+}
+
+.btn-group {
+    display: flex;
+    gap: 4px;
+}
+
 @media (max-width: 768px) {
     .sidebar {
         width: var(--sidebar-collapsed);
@@ -910,4 +970,4 @@ a:hover { color: var(--primary-dark); }
     .content { padding: 16px; }
     .top-bar { padding: 12px 16px; }
     .flash-messages { padding: 0 16px; }
-}
+}