Corrige le panneau "Vos statistiques" et compacte son affichage

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.

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;
-    }
 }