Corrige la superposition header/contenu et harmonise le style du jeu Memory

L'animation d'entrée (translation + rebond infini du badge) pouvait
faire chevaucher le header. Remplacée par une simple apparition sans
déplacement vertical, avec plus de marge sous le header.

Aligne aussi les rayons d'angle, les ombres et les boutons du jeu sur
le langage visuel déjà utilisé ailleurs sur le site (cartes à 12px de
rayon, ombres neutres, titre de section souligné, style de bouton
partagé depuis header-style.css).

exercices/memory-pictogrammes/assets/css/hud.css

@@ -149,7 +149,7 @@
 
 .modal-content {
     background: linear-gradient(135deg, var(--white), var(--teal-light));
-    border-radius: 24px;
+    border-radius: 12px;
     padding: 48px;
     max-width: 500px;
     width: 100%;
@@ -305,7 +305,7 @@
 
 .pause-content {
     background: var(--white);
-    border-radius: 16px;
+    border-radius: 12px;
     padding: 40px;
     text-align: center;
     border: 2px solid var(--teal-mid);

exercices/memory-pictogrammes/assets/css/leaderboard.css

@@ -5,15 +5,19 @@
 .leaderboard-section {
     margin-top: 80px;
     animation: fadeInUp 0.6s ease-out 0.6s both;
+    text-align: center;
 }
 
 .leaderboard-section h2 {
     font-family: 'Syne', sans-serif;
     font-size: clamp(24px, 5vw, 32px);
     font-weight: 800;
-    color: var(--teal);
-    margin-bottom: 24px;
-    text-align: center;
+    letter-spacing: -0.5px;
+    color: var(--text);
+    margin: 0 auto 32px;
+    padding-bottom: 12px;
+    border-bottom: 3px solid var(--teal-mid);
+    display: inline-block;
 }
 
 /* ============================================
@@ -59,11 +63,12 @@
    ============================================ */
 .leaderboard {
     background: linear-gradient(135deg, var(--teal-light), var(--white));
-    border-radius: 16px;
+    border-radius: 12px;
     padding: 24px;
     border: 2px solid var(--teal-mid);
     margin-bottom: 48px;
     box-shadow: var(--shadow-sm);
+    text-align: left;
 }
 
 .leaderboard-list {

exercices/memory-pictogrammes/assets/css/memory-game.css

@@ -10,10 +10,10 @@
     --info: #2196F3;
     --accent: #FFD700;
 
-    /* Shadows */
-    --shadow-sm: 0 4px 8px rgba(15, 110, 86, 0.1);
-    --shadow-md: 0 8px 16px rgba(15, 110, 86, 0.15);
-    --shadow-lg: 0 16px 32px rgba(15, 110, 86, 0.25);
+    /* Shadows (alignées sur le langage visuel du site) */
+    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);
 }
 
 /* ============================================
@@ -21,7 +21,7 @@
    ============================================ */
 main {
     margin-top: 70px;
-    padding: 56px 40px 40px;
+    padding: 64px 40px 40px;
     min-height: calc(100vh - 70px);
 }
 
@@ -35,7 +35,7 @@ main {
    ============================================ */
 .intro-section {
     margin-bottom: 48px;
-    animation: fadeInDown 0.6s ease-out;
+    animation: fadeIn 0.6s ease-out;
     text-align: center;
 }
 
@@ -51,7 +51,7 @@ main {
     font-size: 30px;
     margin-bottom: 16px;
     box-shadow: var(--shadow-sm);
-    animation: bounce 2.4s ease-in-out infinite;
+    animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .intro-section h1 {
@@ -95,10 +95,10 @@ main {
 
 .game-panel {
     background: var(--white);
-    border: 1px solid var(--teal-light);
-    border-radius: 24px;
+    border: 1px solid var(--border);
+    border-radius: 12px;
     padding: clamp(20px, 4vw, 40px);
-    box-shadow: var(--shadow-md);
+    box-shadow: var(--shadow-sm);
 }
 
 /* ============================================
@@ -189,7 +189,7 @@ main {
     margin: 0 auto 32px;
     padding: 20px;
     background: linear-gradient(135deg, rgba(225, 245, 238, 0.4), transparent);
-    border-radius: 16px;
+    border-radius: 12px;
     border: 1px solid var(--teal-light);
 }
 
@@ -308,19 +308,9 @@ footer {
 }
 
 /* ============================================
-   BUTTONS
+   BUTTONS (métriques héritées du style général du site)
    ============================================ */
 .btn {
-    font-family: 'Syne', sans-serif;
-    font-size: 12px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    padding: 12px 24px;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.3s ease;
     display: inline-flex;
     align-items: center;
     gap: 8px;
@@ -359,10 +349,6 @@ footer {
         font-size: 28px;
     }
 
-    .game-panel {
-        border-radius: 16px;
-    }
-
     .game-grid {
         gap: 12px;
         padding: 16px;