From cf69373417aec62a46367534e7f4bca5181d5e15 Mon Sep 17 00:00:00 2001
From: "gauthier.chombart" <gauthier.chombart@gmail.com>
Date: Tue, 7 Jul 2026 17:06:09 +0200
Subject: [PATCH] Corrige la superposition header/contenu et harmonise le style
 du jeu Memory
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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).
---
 .../memory-pictogrammes/assets/css/hud.css    |  4 +-
 .../assets/css/leaderboard.css                | 13 +++++--
 .../assets/css/memory-game.css                | 38 ++++++-------------
 3 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/exercices/memory-pictogrammes/assets/css/hud.css b/exercices/memory-pictogrammes/assets/css/hud.css
index 3d3e847..dff16c8 100644
--- a/exercices/memory-pictogrammes/assets/css/hud.css
+++ b/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);
diff --git a/exercices/memory-pictogrammes/assets/css/leaderboard.css b/exercices/memory-pictogrammes/assets/css/leaderboard.css
index e3f3096..bebea3a 100644
--- a/exercices/memory-pictogrammes/assets/css/leaderboard.css
+++ b/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 {
diff --git a/exercices/memory-pictogrammes/assets/css/memory-game.css b/exercices/memory-pictogrammes/assets/css/memory-game.css
index 3abee6a..e013737 100644
--- a/exercices/memory-pictogrammes/assets/css/memory-game.css
+++ b/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;