Harmonise le jeu Memory avec le style ambre du site et corrige le titre

Le jeu utilisait le teal comme couleur dominante (titres, bordures,
boutons, cartes) alors que le reste du site n'emploie le teal que
ponctuellement (état de succès) et repose sur l'ambre comme couleur
principale. Remplace toutes les références teal par l'ambre déjà
défini dans header-style.css, et réaffecte le teal à son rôle habituel
de couleur de succès (paire trouvée), à la place du vert générique
utilisé jusqu'ici.

Renomme aussi le titre en "Memory pictogrammes", augmente la marge
sous le header pour éviter tout chevauchement, et ajoute un paramètre
de version aux feuilles de style du jeu pour éviter les soucis de
cache navigateur lors des prochaines mises à jour.

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

@@ -44,15 +44,15 @@
 @keyframes matchSuccess {
     0% {
         transform: scale(1);
-        filter: drop-shadow(0 0 0px rgba(76, 175, 80, 0.6));
+        filter: drop-shadow(0 0 0px rgba(29, 158, 117, 0.6));
     }
     50% {
         transform: scale(1.15) rotate(5deg);
-        filter: drop-shadow(0 0 12px rgba(76, 175, 80, 0.8));
+        filter: drop-shadow(0 0 12px rgba(29, 158, 117, 0.8));
     }
     100% {
         transform: scale(1);
-        filter: drop-shadow(0 0 0px rgba(76, 175, 80, 0));
+        filter: drop-shadow(0 0 0px rgba(29, 158, 117, 0));
     }
 }
 
@@ -101,10 +101,10 @@
 /* Pulse Progress Bar */
 @keyframes progressPulse {
     0%, 100% {
-        box-shadow: 0 0 8px rgba(29, 158, 117, 0.4);
+        box-shadow: 0 0 8px rgba(186, 117, 23, 0.4);
     }
     50% {
-        box-shadow: 0 0 24px rgba(29, 158, 117, 0.8);
+        box-shadow: 0 0 24px rgba(186, 117, 23, 0.8);
     }
 }
 
@@ -189,7 +189,7 @@
 @keyframes statUpdate {
     0% {
         transform: scale(0.8);
-        background: rgba(29, 158, 117, 0.2);
+        background: rgba(186, 117, 23, 0.2);
     }
     100% {
         transform: scale(1);
@@ -255,10 +255,10 @@
 /* Card glow hover */
 @keyframes glowCard {
     0% {
-        box-shadow: 0 0 0px rgba(29, 158, 117, 0);
+        box-shadow: 0 0 0px rgba(186, 117, 23, 0);
     }
     100% {
-        box-shadow: 0 0 16px rgba(29, 158, 117, 0.3);
+        box-shadow: 0 0 16px rgba(186, 117, 23, 0.3);
     }
 }
 
@@ -281,10 +281,10 @@
 /* Pulse button */
 @keyframes buttonPulse {
     0%, 100% {
-        box-shadow: 0 0 0px rgba(29, 158, 117, 0.7);
+        box-shadow: 0 0 0px rgba(186, 117, 23, 0.7);
     }
     50% {
-        box-shadow: 0 0 16px rgba(29, 158, 117, 0.4);
+        box-shadow: 0 0 16px rgba(186, 117, 23, 0.4);
     }
 }
 

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

@@ -14,8 +14,8 @@
 }
 
 .stat-box {
-    background: linear-gradient(135deg, var(--teal-light), var(--white));
+    background: linear-gradient(135deg, var(--amber-light), var(--white));
-    border: 2px solid var(--teal-mid);
+    border: 2px solid var(--amber-mid);
     border-radius: 12px;
     padding: 20px;
     text-align: center;
@@ -38,7 +38,7 @@
 .stat-box:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
-    border-color: var(--teal-dark);
+    border-color: var(--amber-dark);
 }
 
 .stat-box:hover::before {
@@ -57,7 +57,7 @@
 .stat-box .value {
     font-size: 32px;
     font-weight: 800;
-    background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
+    background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -73,7 +73,7 @@
    PROGRESS BAR (Paires trouvées)
    ============================================ */
 .progress-container {
-    background: var(--teal-light);
+    background: var(--amber-light);
     border-radius: 12px;
     overflow: hidden;
     height: 12px;
@@ -84,7 +84,7 @@
 
 .game-progress-fill {
     height: 100%;
-    background: linear-gradient(90deg, var(--teal-mid), var(--teal-dark));
+    background: linear-gradient(90deg, var(--amber-mid), var(--amber-dark));
     width: 0%;
     transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
@@ -148,15 +148,15 @@
 }
 
 .modal-content {
-    background: linear-gradient(135deg, var(--white), var(--teal-light));
+    background: linear-gradient(135deg, var(--white), var(--amber-light));
     border-radius: 12px;
     padding: 48px;
     max-width: 500px;
     width: 100%;
     text-align: center;
     animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-    border: 2px solid var(--teal-mid);
+    border: 2px solid var(--amber-mid);
-    box-shadow: 0 32px 64px rgba(15, 110, 86, 0.3);
+    box-shadow: 0 32px 64px rgba(186, 117, 23, 0.3);
     position: relative;
     overflow: hidden;
 }
@@ -177,7 +177,7 @@
     font-family: 'Syne', sans-serif;
     font-size: 42px;
     font-weight: 800;
-    color: var(--teal);
+    color: var(--amber);
     margin: 32px 0 12px;
     position: relative;
     z-index: 1;
@@ -186,7 +186,7 @@
 .modal-content .score-display {
     font-size: 64px;
     font-weight: 800;
-    background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
+    background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -203,10 +203,10 @@
 }
 
 .stats-summary .stat {
-    background: var(--teal-light);
+    background: var(--amber-light);
     padding: 12px;
     border-radius: 8px;
-    border: 1px solid var(--teal-mid);
+    border: 1px solid var(--amber-mid);
     animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
@@ -217,7 +217,7 @@
 
 .stats-summary .stat-value {
     font-weight: 700;
-    color: var(--teal-dark);
+    color: var(--amber-dark);
     font-size: 16px;
     font-family: 'Syne', sans-serif;
 }
@@ -308,14 +308,14 @@
     border-radius: 12px;
     padding: 40px;
     text-align: center;
-    border: 2px solid var(--teal-mid);
+    border: 2px solid var(--amber-mid);
     animation: slideUp 0.4s ease-out;
 }
 
 .pause-content h2 {
     font-family: 'Syne', sans-serif;
     font-size: 32px;
-    color: var(--teal);
+    color: var(--amber);
     margin-bottom: 24px;
 }
 
@@ -323,7 +323,7 @@
     font-size: 48px;
     font-family: 'Syne', sans-serif;
     font-weight: 800;
-    color: var(--teal-dark);
+    color: var(--amber-dark);
     margin-bottom: 24px;
     animation: timerTick 0.5s ease-out;
 }

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

@@ -16,7 +16,7 @@
     color: var(--text);
     margin: 0 auto 32px;
     padding-bottom: 12px;
-    border-bottom: 3px solid var(--teal-mid);
+    border-bottom: 3px solid var(--amber-mid);
     display: inline-block;
 }
 
@@ -34,7 +34,7 @@
 .tab-btn {
     padding: 10px 20px;
     background: var(--white);
-    border: 2px solid var(--teal-light);
+    border: 2px solid var(--amber-light);
     border-radius: 8px;
     font-family: 'Syne', sans-serif;
     font-size: 12px;
@@ -47,13 +47,13 @@
 }
 
 .tab-btn:hover {
-    border-color: var(--teal-mid);
+    border-color: var(--amber-mid);
-    color: var(--teal-mid);
+    color: var(--amber-mid);
 }
 
 .tab-btn.active {
-    background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
+    background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
-    border-color: var(--teal-dark);
+    border-color: var(--amber-dark);
     color: var(--white);
     box-shadow: var(--shadow-md);
 }
@@ -62,10 +62,10 @@
    LEADERBOARD LIST
    ============================================ */
 .leaderboard {
-    background: linear-gradient(135deg, var(--teal-light), var(--white));
+    background: linear-gradient(135deg, var(--amber-light), var(--white));
     border-radius: 12px;
     padding: 24px;
-    border: 2px solid var(--teal-mid);
+    border: 2px solid var(--amber-mid);
     margin-bottom: 48px;
     box-shadow: var(--shadow-sm);
     text-align: left;
@@ -86,7 +86,7 @@
     padding: 16px;
     border-radius: 8px;
     transition: all 0.3s ease;
-    border-left: 4px solid var(--teal-light);
+    border-left: 4px solid var(--amber-light);
     position: relative;
     overflow: hidden;
 }
@@ -98,14 +98,14 @@
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(29, 158, 117, 0.1), transparent);
+    background: linear-gradient(90deg, transparent, rgba(186, 117, 23, 0.1), transparent);
     transition: left 0.5s ease;
 }
 
 .rank-item:hover {
     transform: translateX(8px);
-    box-shadow: 0 4px 12px rgba(15, 110, 86, 0.15);
+    box-shadow: 0 4px 12px rgba(186, 117, 23, 0.15);
-    border-left-color: var(--teal-mid);
+    border-left-color: var(--amber-mid);
 }
 
 .rank-item:hover::before {
@@ -116,7 +116,7 @@
 .rank-number {
     font-weight: 800;
     font-size: 18px;
-    color: var(--teal-mid);
+    color: var(--amber-mid);
     text-align: center;
     font-family: 'Syne', sans-serif;
 }
@@ -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;
@@ -171,7 +171,7 @@
 /* Score et difficulté */
 .rank-score {
     font-weight: 700;
-    color: var(--teal-dark);
+    color: var(--amber-dark);
     font-size: 18px;
     font-family: 'Syne', sans-serif;
     min-width: 60px;
@@ -185,8 +185,8 @@
     letter-spacing: 0.05em;
     padding: 4px 8px;
     border-radius: 4px;
-    background: var(--teal-light);
+    background: var(--amber-light);
-    color: var(--teal-dark);
+    color: var(--amber-dark);
     min-width: 60px;
     text-align: center;
 }
@@ -197,8 +197,8 @@
 }
 
 .rank-difficulty.normal {
-    background: var(--teal-light);
+    background: var(--amber-light);
-    color: var(--teal-dark);
+    color: var(--amber-dark);
 }
 
 .rank-difficulty.hard {
@@ -232,32 +232,32 @@
    PLAYER STATS SECTION
    ============================================ */
 .player-stats {
-    background: linear-gradient(135deg, rgba(15, 110, 86, 0.05), transparent);
+    background: linear-gradient(135deg, rgba(186, 117, 23, 0.05), transparent);
-    border-radius: 16px;
+    border-radius: 12px;
-    padding: 32px;
+    padding: 24px;
-    border: 2px solid var(--teal-light);
+    border: 2px solid var(--amber-light);
 }
 
 .player-stats h3 {
     font-family: 'Syne', sans-serif;
-    font-size: 24px;
+    font-size: 18px;
     font-weight: 700;
-    color: var(--teal);
+    color: var(--amber);
-    margin-bottom: 24px;
+    margin-bottom: 16px;
     text-align: center;
 }
 
 .stats-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    grid-template-columns: repeat(4, 1fr);
-    gap: 16px;
+    gap: 12px;
 }
 
 .stat-card {
     background: var(--white);
-    border: 2px solid var(--teal-light);
+    border: 2px solid var(--amber-light);
-    border-radius: 12px;
+    border-radius: 10px;
-    padding: 20px;
+    padding: 14px 8px;
     text-align: center;
     transition: all 0.3s ease;
     display: flex;
@@ -268,27 +268,27 @@
 .stat-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-md);
-    border-color: var(--teal-mid);
+    border-color: var(--amber-mid);
 }
 
 .stat-icon {
-    font-size: 32px;
+    font-size: 22px;
-    margin-bottom: 12px;
+    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));
+    background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     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;
-    }
 }

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

@@ -5,7 +5,7 @@
 
 :root {
     /* Gamification Colors */
-    --success: #4CAF50;
+    --success: var(--teal-mid);
     --warning: #FF9800;
     --info: #2196F3;
     --accent: #FFD700;
@@ -21,7 +21,7 @@
    ============================================ */
 main {
     margin-top: 70px;
-    padding: 64px 40px 40px;
+    padding: 96px 40px 40px;
     min-height: calc(100vh - 70px);
 }
 
@@ -39,26 +39,11 @@ main {
     text-align: center;
 }
 
-.intro-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 64px;
-    height: 64px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, var(--teal-light), var(--white));
-    border: 2px solid var(--teal-mid);
-    font-size: 30px;
-    margin-bottom: 16px;
-    box-shadow: var(--shadow-sm);
-    animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
 .intro-section h1 {
     font-family: 'Syne', sans-serif;
     font-size: clamp(28px, 5vw, 44px);
     font-weight: 800;
-    color: var(--teal);
+    color: var(--amber);
     margin-bottom: 8px;
     text-align: center;
 }
@@ -72,8 +57,8 @@ main {
 }
 
 .intro-box {
-    background: linear-gradient(135deg, var(--teal-light), var(--white));
+    background: linear-gradient(135deg, var(--amber-light), var(--white));
-    border-left: 4px solid var(--teal-mid);
+    border-left: 4px solid var(--amber-mid);
     border-radius: 8px;
     padding: 20px;
     font-size: 0.95em;
@@ -128,8 +113,8 @@ main {
 }
 
 .btn-difficulty {
-    background: var(--teal-light);
+    background: var(--amber-light);
-    background: linear-gradient(135deg, rgba(225, 245, 238, 0.5), transparent);
+    background: linear-gradient(135deg, rgba(250, 238, 218, 0.5), transparent);
     border: 2px solid transparent;
     border-radius: 12px;
     padding: 14px 12px;
@@ -143,14 +128,14 @@ main {
 }
 
 .btn-difficulty:hover {
-    border-color: var(--teal-mid);
+    border-color: var(--amber-mid);
     transform: translateY(-3px);
     box-shadow: var(--shadow-md);
 }
 
 .btn-difficulty.active {
-    background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
+    background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
-    border-color: var(--teal-dark);
+    border-color: var(--amber-dark);
     box-shadow: var(--shadow-md);
 }
 
@@ -168,7 +153,7 @@ main {
 .btn-label {
     font-size: 14px;
     font-weight: 700;
-    color: var(--teal);
+    color: var(--amber);
 }
 
 .btn-desc {
@@ -188,9 +173,9 @@ main {
     max-width: 900px;
     margin: 0 auto 32px;
     padding: 20px;
-    background: linear-gradient(135deg, rgba(225, 245, 238, 0.4), transparent);
+    background: linear-gradient(135deg, rgba(250, 238, 218, 0.4), transparent);
     border-radius: 12px;
-    border: 1px solid var(--teal-light);
+    border: 1px solid var(--amber-light);
 }
 
 /* MEMORY CARD STYLES */
@@ -224,8 +209,8 @@ main {
 .card-face.front {
     background:
         radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.6), transparent 60%),
-        linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
+        linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
-    border: 2px solid var(--teal-dark);
+    border: 2px solid var(--amber-dark);
     color: var(--white);
     box-shadow: var(--shadow-sm);
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
@@ -233,8 +218,8 @@ main {
 
 .card-face.back {
     transform: rotateY(180deg);
-    background: linear-gradient(135deg, var(--white), var(--teal-light));
+    background: linear-gradient(135deg, var(--white), var(--amber-light));
-    border: 2px solid var(--teal-mid);
+    border: 2px solid var(--amber-mid);
     flex-direction: column;
     gap: 8px;
     padding: 8px;
@@ -283,7 +268,7 @@ main {
 }
 
 .memory-card.matched .card-face.back {
-    background: linear-gradient(135deg, var(--white), rgba(76, 175, 80, 0.2));
+    background: linear-gradient(135deg, var(--white), rgba(29, 158, 117, 0.2));
     border-color: var(--success);
 }
 
@@ -317,7 +302,7 @@ footer {
 }
 
 .btn-primary {
-    background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
+    background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
     color: var(--white);
 }
 
@@ -328,13 +313,13 @@ footer {
 
 .btn-secondary {
     background: var(--white);
-    border: 2px solid var(--teal-mid);
+    border: 2px solid var(--amber-mid);
-    color: var(--teal-mid);
+    color: var(--amber-mid);
 }
 
 .btn-secondary:hover {
-    background: var(--teal-light);
+    background: var(--amber-light);
-    border-color: var(--teal-dark);
+    border-color: var(--amber-dark);
 }
 
 /* ============================================
@@ -342,7 +327,7 @@ footer {
    ============================================ */
 @media (max-width: 768px) {
     main {
-        padding: 32px 20px 20px;
+        padding: 56px 20px 20px;
     }
 
     .intro-section h1 {
@@ -372,7 +357,7 @@ footer {
 
 @media (max-width: 480px) {
     main {
-        padding: 24px 16px 16px;
+        padding: 40px 16px 16px;
     }
 
     .intro-section h1 {

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>' : ''}

exercices/memory-pictogrammes/memory.html

@@ -8,10 +8,10 @@
     
     <!-- Styles -->
     <link rel="stylesheet" href="../../header-style.css"/>
-    <link rel="stylesheet" href="assets/css/memory-game.css">
+    <link rel="stylesheet" href="assets/css/memory-game.css?v=3">
-    <link rel="stylesheet" href="assets/css/hud.css">
+    <link rel="stylesheet" href="assets/css/hud.css?v=3">
-    <link rel="stylesheet" href="assets/css/animations.css">
+    <link rel="stylesheet" href="assets/css/animations.css?v=3">
-    <link rel="stylesheet" href="assets/css/leaderboard.css">
+    <link rel="stylesheet" href="assets/css/leaderboard.css?v=3">
 </head>
 <body>
     <!-- HEADER NextGN Formation -->
@@ -36,8 +36,7 @@
     <main class="game-container">
         <!-- INTRO SECTION -->
         <section class="intro-section">
-            <div class="intro-badge">🎮</div>
+            <h1>Memory pictogrammes</h1>
-            <h1>Memory Pictogrammes GHS</h1>
             <p class="subtitle">Maîtrisez les 9 symboles de danger</p>
 
             <div class="intro-box">