From 1e757ccda863ee3897225984a1ac8ec9976d0c1e Mon Sep 17 00:00:00 2001
From: "gauthier.chombart" <gauthier.chombart@gmail.com>
Date: Tue, 7 Jul 2026 17:12:29 +0200
Subject: [PATCH] Corrige le panneau "Vos statistiques" et compacte son
 affichage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Deux règles CSS différentes partageaient le nom .player-stats (la
ligne de détails sous chaque joueur du classement, et tout le panneau
"Vos statistiques"). Le panneau héritait donc du display:flex prévu
pour la ligne de détails, ce qui empêchait la grille de stats de
prendre toute la largeur et l'affichait en une colonne étroite.

Renomme la ligne de détails en .rank-meta et aligne les 4 encadrés de
stats sur une seule rangée compacte sous le titre.
---
 .../assets/css/leaderboard.css                | 93 ++++++++++---------
 .../assets/js/leaderboard.js                  |  2 +-
 2 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/exercices/memory-pictogrammes/assets/css/leaderboard.css b/exercices/memory-pictogrammes/assets/css/leaderboard.css
index bebea3a..80cd9c8 100644
--- a/exercices/memory-pictogrammes/assets/css/leaderboard.css
+++ b/exercices/memory-pictogrammes/assets/css/leaderboard.css
@@ -154,7 +154,7 @@
     font-size: 14px;
 }
 
-.player-stats {
+.rank-meta {
     font-size: 12px;
     color: var(--text-muted);
     display: flex;
@@ -162,7 +162,7 @@
     flex-wrap: wrap;
 }
 
-.player-stats span {
+.rank-meta span {
     display: inline-flex;
     align-items: center;
     gap: 4px;
@@ -233,31 +233,31 @@
    ============================================ */
 .player-stats {
     background: linear-gradient(135deg, rgba(15, 110, 86, 0.05), transparent);
-    border-radius: 16px;
-    padding: 32px;
+    border-radius: 12px;
+    padding: 24px;
     border: 2px solid var(--teal-light);
 }
 
 .player-stats h3 {
     font-family: 'Syne', sans-serif;
-    font-size: 24px;
+    font-size: 18px;
     font-weight: 700;
     color: var(--teal);
-    margin-bottom: 24px;
+    margin-bottom: 16px;
     text-align: center;
 }
 
 .stats-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 16px;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
 }
 
 .stat-card {
     background: var(--white);
     border: 2px solid var(--teal-light);
-    border-radius: 12px;
-    padding: 20px;
+    border-radius: 10px;
+    padding: 14px 8px;
     text-align: center;
     transition: all 0.3s ease;
     display: flex;
@@ -272,21 +272,21 @@
 }
 
 .stat-icon {
-    font-size: 32px;
-    margin-bottom: 12px;
+    font-size: 22px;
+    margin-bottom: 6px;
 }
 
 .stat-label {
-    font-size: 11px;
+    font-size: 10px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--text-muted);
-    margin-bottom: 8px;
+    margin-bottom: 4px;
 }
 
 .stat-value {
-    font-size: 28px;
+    font-size: 20px;
     font-weight: 800;
     background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
     -webkit-background-clip: text;
@@ -296,7 +296,7 @@
 }
 
 .stat-card.high-value .stat-value {
-    font-size: 32px;
+    font-size: 22px;
     animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
@@ -360,29 +360,29 @@
     }
     
     .player-stats {
-        padding: 24px;
+        padding: 20px;
     }
-    
+
     .player-stats h3 {
-        font-size: 20px;
+        font-size: 18px;
     }
-    
+
     .stats-grid {
         grid-template-columns: repeat(2, 1fr);
-        gap: 12px;
+        gap: 10px;
     }
-    
+
     .stat-card {
-        padding: 16px;
+        padding: 14px 10px;
     }
-    
+
     .stat-icon {
-        font-size: 28px;
-        margin-bottom: 8px;
-    }
-    
-    .stat-value {
         font-size: 24px;
+        margin-bottom: 6px;
+    }
+
+    .stat-value {
+        font-size: 22px;
     }
 }
 
@@ -424,24 +424,25 @@
     .player-stats {
         padding: 16px;
     }
-    
+
     .player-stats h3 {
+        font-size: 16px;
+    }
+
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 8px;
+    }
+
+    .stat-card {
+        padding: 12px 8px;
+    }
+
+    .stat-icon {
+        font-size: 22px;
+    }
+
+    .stat-value {
         font-size: 18px;
     }
-    
-    .stats-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .stat-card {
-        padding: 12px;
-    }
-    
-    .stat-icon {
-        font-size: 24px;
-    }
-    
-    .stat-value {
-        font-size: 20px;
-    }
 }
diff --git a/exercices/memory-pictogrammes/assets/js/leaderboard.js b/exercices/memory-pictogrammes/assets/js/leaderboard.js
index 38dc458..3960f8f 100644
--- a/exercices/memory-pictogrammes/assets/js/leaderboard.js
+++ b/exercices/memory-pictogrammes/assets/js/leaderboard.js
@@ -195,7 +195,7 @@ class LeaderboardManager {
                 <div ${medal}>${rankNumber}</div>
                 <div class="rank-info">
                     <div class="player-name">${this.escapeHTML(score.playerName)}</div>
-                    <div class="player-stats">
+                    <div class="rank-meta">
                         <span>⏱ ${formatTime(score.timeSeconds)}</span>
                         <span>🎯 ${score.moves} mouvements</span>
                         ${score.isPerfect ? '<span>✨ Parfait</span>' : ''}