régler problème de style apres maj de sécurité

app.py

@@ -88,7 +88,7 @@ def create_app():
         response.headers['X-Content-Type-Options'] = 'nosniff'
         response.headers['X-Frame-Options'] = 'DENY'
         response.headers['X-XSS-Protection'] = '1; mode=block'
-        response.headers['Content-Security-Policy'] = "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-ancestors 'none';"
+        response.headers['Content-Security-Policy'] = "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; font-src 'self' https://cdnjs.cloudflare.com; img-src 'self' data:; connect-src 'self'; frame-ancestors 'none';"
         response.headers['Strict-Transport-Security'] = 'max-age=31536000; includeSubDomains'
         return response
 

static/css/style.css

@@ -911,8 +911,26 @@ a:hover { color: var(--primary-dark); }
     display: block;
 }
 
-.small {
+.gamertag-input-row {
-    font-size: 0.85rem;
+    margin-bottom: 15px;
+    padding: 15px;
+    background: var(--gray-50);
+    border-radius: var(--radius-sm);
+}
+
+.gamertag-input-row h5 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: var(--gray-900);
+}
+
+/* Dark mode styles for gamertag input rows */
+[data-theme="dark"] .gamertag-input-row {
+    background: var(--bg-tertiary);
+}
+
+[data-theme="dark"] .gamertag-input-row h5 {
+    color: var(--text-primary);
 }
 
 .header-actions {
@@ -922,6 +940,70 @@ a:hover { color: var(--primary-dark); }
     margin-left: auto;
 }
 
+/* Disponibility Time Blocks (for player profile edit) */
+.disponibility-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.disponibility-day-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+}
+
+.disponibility-day-label {
+    width: 100px;
+    font-weight: bold;
+}
+
+.disponibility-time-blocks {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+.disponibility-time-block {
+    width: 80px;
+    height: 32px;
+    border-radius: 4px;
+    border: 1px solid var(--gray-300);
+    background: var(--gray-100);
+    text-align: center;
+    line-height: 32px;
+    font-size: 12px;
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.2s;
+}
+
+.disponibility-time-block:hover {
+    background: var(--gray-200);
+}
+
+.disponibility-time-block.selected {
+    background: var(--success);
+    color: white;
+    border-color: #059669;
+}
+
+[data-theme="dark"] .disponibility-time-block {
+    background: var(--bg-tertiary);
+    border-color: var(--border-color);
+}
+
+[data-theme="dark"] .disponibility-time-block:hover {
+    background: var(--bg-secondary);
+}
+
+/* Keep .selected time blocks green in dark mode - must come after the generic rule */
+[data-theme="dark"] .disponibility-time-block.selected {
+    background: var(--success) !important;
+    color: white !important;
+    border-color: #059669 !important;
+}
+
 /* Utilities */
 .hidden { display: none !important; }
 .text-center { text-align: center; }
@@ -1171,42 +1253,41 @@ a:hover { color: var(--primary-dark); }
     color: var(--gray-600);
 }
 
-/* Dark mode styles for time blocks */
+/* Dark mode styles for time blocks - generic rule first */
-[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;
+    background: var(--bg-tertiary);
-    color: #e5e7eb;
+    color: var(--text-secondary);
-    border-color: #4b5563;
+    border-color: var(--border-color);
 }
 
 [data-theme="dark"] .merged-disponibility-time-block:hover {
-    background: #4b5563;
+    background: var(--bg-secondary);
-    transform: scale(1.05);
+}
-    box-shadow: var(--shadow-md);
+
+/* Then specific states override the generic rule */
+[data-theme="dark"] .merged-disponibility-time-block.selected {
+    background: var(--success) !important;
+    color: white !important;
+    border-color: var(--success) !important;
+    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
+}
+
+[data-theme="dark"] .merged-disponibility-time-block.high-availability {
+    background: var(--success);
+    color: white;
+    border-color: var(--success);
+}
+
+[data-theme="dark"] .merged-disponibility-time-block.medium-availability {
+    background: var(--warning);
+    color: white;
+    border-color: var(--warning);
+}
+
+[data-theme="dark"] .merged-disponibility-time-block.low-availability {
+    background: var(--gray-600);
+    color: var(--gray-300);
+    border-color: var(--gray-500);
 }
 
 .merged-disponibility-count {
@@ -1523,23 +1604,7 @@ a:hover { color: var(--primary-dark); }
     color: var(--text-primary);
 }
 
-[data-theme="dark"] .merged-disponibility-time-block {
+/* Note: merged-disponibility-time-block dark styles are defined above with proper ordering */
-    background: var(--bg-tertiary);
-    border-color: var(--border-color);
-    color: var(--text-secondary);
-}
-
-[data-theme="dark"] .merged-disponibility-time-block:hover {
-    background: var(--bg-secondary);
-}
-
-[data-theme="dark"] .merged-disponibility-selected-display {
-    background: var(--bg-tertiary);
-}
-
-[data-theme="dark"] .randomize-section {
-    background: var(--bg-tertiary);
-}
 
 [data-theme="dark"] .btn-secondary {
     background: var(--bg-tertiary);

templates/pages/edit_profile.html

@@ -51,8 +51,8 @@
                 
                 {% for game in esport_games %}
                  {% set gamertag_data = user_gamertags.get(game) %}
-                <div class="gamertag-input-row" data-game="{{ game }}" style="display: none; margin-bottom: 15px; padding: 15px; background: #f9fafb; border-radius: 8px;">
+                 <div class="gamertag-input-row" data-game="{{ game }}" style="display: none;">
-                    <h5 style="margin-top: 0; margin-bottom: 10px;">{{ game }}</h5>
+                     <h5>{{ game }}</h5>
                     <div class="form-row">
                         <div class="form-group col-6">
                             <label for="gamertag_{{ game }}">Gamertag</label>
@@ -127,49 +127,6 @@
     </div>
 </div>
 
-<style>
-.disponibility-grid {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-}
-.disponibility-day-row {
-    display: flex;
-    align-items: center;
-    margin-bottom: 5px;
-}
-.disponibility-day-label {
-    width: 100px;
-    font-weight: bold;
-}
-.disponibility-time-blocks {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 5px;
-}
-.disponibility-time-block {
-    width: 80px;
-    height: 32px;
-    border-radius: 4px;
-    border: 1px solid #d1d5db;
-    background: #f3f4f6;
-    text-align: center;
-    line-height: 32px;
-    font-size: 12px;
-    cursor: pointer;
-    user-select: none;
-    transition: all 0.2s;
-}
-.disponibility-time-block:hover {
-    background: #e5e7eb;
-}
-.disponibility-time-block.selected {
-    background: #10b981;
-    color: white;
-    border-color: #059669;
-}
-</style>
-
 <script>
 var GAME_PLATFORMS = {{ game_platforms|tojson }};
 

templates/pages/edit_user.html

@@ -63,8 +63,8 @@
                 
                 {% for game in esport_games %}
                  {% set gamertag_data = user_gamertags.get(game) %}
-                <div class="gamertag-input-row" data-game="{{ game }}" style="display: none; margin-bottom: 15px; padding: 15px; background: #f9fafb; border-radius: 8px;">
+                 <div class="gamertag-input-row" data-game="{{ game }}" style="display: none;">
-                    <h5 style="margin-top: 0; margin-bottom: 10px;">{{ game }}</h5>
+                     <h5>{{ game }}</h5>
                     <div class="form-row">
                         <div class="form-group col-6">
                             <label for="gamertag_{{ game }}">Gamertag</label>