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/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);
 }
 
@@ -43,7 +43,7 @@ main {
     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;
 }
@@ -57,8 +57,8 @@ main {
 }
 
 .intro-box {
-    background: linear-gradient(135deg, var(--teal-light), var(--white));
-    border-left: 4px solid var(--teal-mid);
+    background: linear-gradient(135deg, var(--amber-light), var(--white));
+    border-left: 4px solid var(--amber-mid);
     border-radius: 8px;
     padding: 20px;
     font-size: 0.95em;
@@ -113,8 +113,8 @@ main {
 }
 
 .btn-difficulty {
-    background: var(--teal-light);
-    background: linear-gradient(135deg, rgba(225, 245, 238, 0.5), transparent);
+    background: var(--amber-light);
+    background: linear-gradient(135deg, rgba(250, 238, 218, 0.5), transparent);
     border: 2px solid transparent;
     border-radius: 12px;
     padding: 14px 12px;
@@ -128,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));
-    border-color: var(--teal-dark);
+    background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
+    border-color: var(--amber-dark);
     box-shadow: var(--shadow-md);
 }
 
@@ -153,7 +153,7 @@ main {
 .btn-label {
     font-size: 14px;
     font-weight: 700;
-    color: var(--teal);
+    color: var(--amber);
 }
 
 .btn-desc {
@@ -173,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 */
@@ -209,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));
-    border: 2px solid var(--teal-dark);
+        linear-gradient(135deg, var(--amber-mid), var(--amber-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);
@@ -218,8 +218,8 @@ main {
 
 .card-face.back {
     transform: rotateY(180deg);
-    background: linear-gradient(135deg, var(--white), var(--teal-light));
-    border: 2px solid var(--teal-mid);
+    background: linear-gradient(135deg, var(--white), var(--amber-light));
+    border: 2px solid var(--amber-mid);
     flex-direction: column;
     gap: 8px;
     padding: 8px;
@@ -268,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);
 }
 
@@ -302,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);
 }
 
@@ -313,13 +313,13 @@ footer {
 
 .btn-secondary {
     background: var(--white);
-    border: 2px solid var(--teal-mid);
-    color: var(--teal-mid);
+    border: 2px solid var(--amber-mid);
+    color: var(--amber-mid);
 }
 
 .btn-secondary:hover {
-    background: var(--teal-light);
-    border-color: var(--teal-dark);
+    background: var(--amber-light);
+    border-color: var(--amber-dark);
 }
 
 /* ============================================
@@ -327,7 +327,7 @@ footer {
    ============================================ */
 @media (max-width: 768px) {
     main {
-        padding: 32px 20px 20px;
+        padding: 56px 20px 20px;
     }
 
     .intro-section h1 {
@@ -357,7 +357,7 @@ footer {
 
 @media (max-width: 480px) {
     main {
-        padding: 24px 16px 16px;
+        padding: 40px 16px 16px;
     }
 
     .intro-section h1 {