régler problème de style en dark mode pour voir les blocs de temps coloré en fonction du nombre de joueurs dispo.

Changer la séléction des joueurs dans les matchs joueurs vs joueurs

static/css/style.css

@@ -1171,6 +1171,44 @@ a:hover { color: var(--primary-dark); }
     color: var(--gray-600);
 }
 
+/* Dark mode styles for time blocks */
+[data-theme="dark"] .merged-disponibility-time-block.high-availability {
+    background: #10b981;
+    color: white;
+    border-color: #10b981;
+}
+
+[data-theme="dark"] .merged-disponibility-time-block.medium-availability {
+    background: #f59e0b;
+    color: white;
+    border-color: #f59e0b;
+}
+
+[data-theme="dark"] .merged-disponibility-time-block.low-availability {
+    background: #374151;
+    color: #9ca3af;
+    border-color: #4b5563;
+}
+
+[data-theme="dark"] .merged-disponibility-time-block.selected {
+    background: #10b981;
+    color: white;
+    border-color: #10b981;
+    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
+}
+
+[data-theme="dark"] .merged-disponibility-time-block {
+    background: #374151;
+    color: #e5e7eb;
+    border-color: #4b5563;
+}
+
+[data-theme="dark"] .merged-disponibility-time-block:hover {
+    background: #4b5563;
+    transform: scale(1.05);
+    box-shadow: var(--shadow-md);
+}
+
 .merged-disponibility-count {
     position: absolute;
     top: 2px;
@@ -1180,6 +1218,39 @@ a:hover { color: var(--primary-dark); }
     opacity: 0.8;
 }
 
+/* Player pool styles for match creation */
+[data-theme="dark"] .available-players-pool .player-item {
+    background: #065f46;
+    border-color: #10b981;
+}
+
+[data-theme="dark"] .available-players-pool .player-item.available {
+    background: #065f46;
+    border-color: #10b981;
+}
+
+[data-theme="dark"] .available-players-pool .player-item.unavailable {
+    background: #374151;
+    border-color: #4b5563;
+    opacity: 0.6;
+}
+
+[data-theme="dark"] .available-players-pool .player-item:hover {
+    background: var(--primary);
+    color: white;
+    border-color: var(--primary);
+}
+
+[data-theme="dark"] .team-selection .player-item {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .team-selection .player-item:hover {
+    background: var(--primary);
+    color: white;
+}
+
 .merged-disponibility-selected-display {
     display: flex;
     align-items: center;

templates/pages/create_match.html

@@ -231,12 +231,22 @@
     margin: 5px 0;
     background: var(--success-light);
     border-radius: 6px;
-    cursor: pointer;
     font-size: 14px;
+    border: 1px solid var(--border-color);
 }
 .available-players-pool .player-item:hover {
-    background: var(--success-color);
+    background: var(--primary);
     color: white;
+    border-color: var(--primary);
+}
+.available-players-pool .player-item.available {
+    background: var(--success-light);
+    border-color: var(--success);
+}
+.available-players-pool .player-item.unavailable {
+    background: var(--gray-100);
+    border-color: var(--gray-300);
+    opacity: 0.6;
 }
 .player-item {
     display: flex;
@@ -250,6 +260,23 @@
 .player-item .remove-btn:hover {
     opacity: 1;
 }
+.player-actions {
+    display: flex;
+    gap: 5px;
+}
+.player-actions .btn {
+    padding: 4px 8px;
+    font-size: 12px;
+}
+.player-name {
+    flex: 1;
+}
+.team-selection .player-actions {
+    display: none;
+}
+.team-selection .player-item:hover .remove-btn {
+    opacity: 1;
+}
 </style>
 <script>
 // Player data as simple JS object (id -> full_name)
@@ -563,25 +590,8 @@ function fetchAvailablePlayersForAllSlots() {
 }
 
 function preselectAvailablePlayers() {
-    // Clear current assignments
+    // Just update the player pool - don't auto-assign to Team 1
-    document.querySelectorAll('#team1-selection [data-player-id], #team2-selection [data-player-id]').forEach(function(el) {
+    // Players will be shown in the pool and can be manually assigned to either team
-        el.remove();
-    });
-    
-    // Add available players to Team 1
-    availablePlayersForSlots.forEach(function(pid) {
-        var playerName = playerDataById.player_data[pid];
-        if (!playerName) return;
-        
-        var html = '<div class="player-item" data-player-id="' + pid + '" onclick="returnToPool(' + pid + ', event)">';
-        html += playerName;
-        html += '<span class="remove-btn">↺</span>';
-        html += '</div>';
-        
-        document.getElementById('team1-selection').insertAdjacentHTML('beforeend', html);
-    });
-    
-    updateHiddenInputs();
     updatePlayerPool();
 }
 
@@ -591,8 +601,6 @@ function updatePlayerPool() {
     
     var team1Ids = getSelectedTeamIds(1);
     var team2Ids = getSelectedTeamIds(2);
-    // Players in Team 2 but not Team 1 should still appear in pool
-    var assignedToTeam1 = team1Ids.filter(function(id) { return !team2Ids.includes(id); });
     var assignedIds = [...team1Ids, ...team2Ids];
     
     // When time slots are selected, show only players available in all slots who aren't assigned yet
@@ -604,6 +612,11 @@ function updatePlayerPool() {
         return;
     }
     
+    var dateParts = selectedDate.split('-');
+    var dateObj = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
+    var jsDay = dateObj.getDay();
+    var dayOfWeek = jsDay === 0 ? 6 : jsDay - 1;
+    
     var html = '';
     playersToShow.forEach(function(pid) {
         if (assignedIds.includes(pid)) return;
@@ -611,9 +624,23 @@ function updatePlayerPool() {
         var playerName = playerDataById.player_data[pid];
         if (!playerName) return;
         
-        html += '<div class="player-item" data-player-id="' + pid + '" onclick="assignToTeam(' + pid + ', 1)">';
+        // Check if player is available during selected time slots
-        html += playerName;
+        var isAvailable = true;
-        html += '<span class="remove-btn" onclick="returnToPool(' + pid + ', event)">↺</span>';
+        if (selectedSlots.length > 0 && allDisponibilities[pid]) {
+            var playerSlots = getSlotsForPlayer(pid, dayOfWeek);
+            isAvailable = selectedSlots.every(function(slot) {
+                return playerSlots.includes(slot);
+            });
+        }
+        
+        var availabilityClass = isAvailable ? 'available' : 'unavailable';
+        
+        html += '<div class="player-item ' + availabilityClass + '" data-player-id="' + pid + '">';
+        html += '<span class="player-name">' + playerName + '</span>';
+        html += '<div class="player-actions">';
+        html += '<button type="button" class="btn btn-sm btn-primary" onclick="assignToTeam(' + pid + ', 1)">T1</button>';
+        html += '<button type="button" class="btn btn-sm btn-secondary" onclick="assignToTeam(' + pid + ', 2)">T2</button>';
+        html += '</div>';
         html += '</div>';
     });
     
@@ -621,6 +648,11 @@ function updatePlayerPool() {
 }
 
 function assignToTeam(playerId, teamSide) {
+    // First, remove player from any team they're already in
+    document.querySelectorAll('[data-player-id="' + playerId + '"]').forEach(function(el) {
+        el.remove();
+    });
+    
     var teamDiv = document.getElementById('team' + teamSide + '-selection');
     var playerName = playerDataById.player_data[playerId];
     if (!playerName) return;
@@ -668,8 +700,8 @@ function clearTimeSelection() {
         el.classList.remove('selected');
     });
     availablePlayersForSlots = [];
-    // Clear Team 1 preselection
+    // Clear both team selections
-    document.querySelectorAll('#team1-selection [data-player-id]').forEach(function(el) {
+    document.querySelectorAll('#team1-selection [data-player-id], #team2-selection [data-player-id]').forEach(function(el) {
         el.remove();
     });
     updateHiddenInputs();

templates/pages/edit_match.html

@@ -555,7 +555,7 @@ function clearTimeSelection() {
 }
 
 function updateRandomizePreview() {
-    var checkedCount = document.querySelectorAll('input[name="team1_player_ids"]:checked, input[name="player_ids"]:checked').length;
+    var checkedCount = document.querySelectorAll('input[name="team1_player_ids"]:checked, input[name="team2_player_ids"]:checked').length;
     var team1Size = parseInt(document.getElementById('team1-size').value) || 1;
     var team2Size = checkedCount - team1Size;