Refonte visuelle du jeu Memory Pictogrammes GHS

Corrige les pictogrammes cassés (mauvais noms de fichiers dans
utils.js) et le conflit de classe CSS .progress-bar avec le header
qui cassait la barre de progression du jeu. Réorganise l'interface
dans un panneau de jeu unifié, ajoute des icônes aux statistiques
et au sélecteur de difficulté, et rend le dos des cartes plus ludique.

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

@@ -108,7 +108,7 @@
     }
 }
 
-.progress-bar.pulse {
+.game-progress-fill.pulse {
     animation: progressPulse 0.6s ease-out;
 }
 

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

@@ -82,14 +82,14 @@
     box-shadow: var(--shadow-sm);
 }
 
-.progress-bar {
+.game-progress-fill {
     height: 100%;
     background: linear-gradient(90deg, var(--teal-mid), var(--teal-dark));
     width: 0%;
     transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-.progress-container.pulse .progress-bar {
+.progress-container.pulse .game-progress-fill {
     animation: progressPulse 0.6s ease-out;
 }
 

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

@@ -21,7 +21,7 @@
    ============================================ */
 main {
     margin-top: 70px;
-    padding: 40px;
+    padding: 56px 40px 40px;
     min-height: calc(100vh - 70px);
 }
 
@@ -34,13 +34,29 @@ main {
    INTRO SECTION
    ============================================ */
 .intro-section {
-    margin-bottom: 60px;
+    margin-bottom: 48px;
     animation: fadeInDown 0.6s ease-out;
+    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: bounce 2.4s ease-in-out infinite;
 }
 
 .intro-section h1 {
     font-family: 'Syne', sans-serif;
-    font-size: clamp(28px, 5vw, 48px);
+    font-size: clamp(28px, 5vw, 44px);
     font-weight: 800;
     color: var(--teal);
     margin-bottom: 8px;
@@ -60,7 +76,6 @@ main {
     border-left: 4px solid var(--teal-mid);
     border-radius: 8px;
     padding: 20px;
-    margin-bottom: 32px;
     font-size: 0.95em;
     color: var(--text-muted);
     line-height: 1.6;
@@ -70,57 +85,84 @@ main {
     text-align: center;
 }
 
+/* ============================================
+   GAME SECTION / PANEL
+   ============================================ */
+.game-section {
+    margin-bottom: 80px;
+    animation: fadeInUp 0.6s ease-out 0.3s both;
+}
+
+.game-panel {
+    background: var(--white);
+    border: 1px solid var(--teal-light);
+    border-radius: 24px;
+    padding: clamp(20px, 4vw, 40px);
+    box-shadow: var(--shadow-md);
+}
+
 /* ============================================
    DIFFICULTY SELECTOR
    ============================================ */
 .difficulty-selector {
-    margin-bottom: 48px;
+    margin-bottom: 32px;
     text-align: center;
-    animation: fadeInUp 0.6s ease-out 0.2s both;
 }
 
 .difficulty-selector label {
     display: block;
-    font-size: 14px;
+    font-size: 12px;
-    font-weight: 600;
+    font-weight: 700;
     text-transform: uppercase;
-    letter-spacing: 0.08em;
+    letter-spacing: 0.1em;
     color: var(--text-muted);
-    margin-bottom: 16px;
+    margin-bottom: 14px;
 }
 
 .btn-group {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
     gap: 12px;
-    max-width: 500px;
+    max-width: 520px;
     margin: 0 auto;
 }
 
 .btn-difficulty {
-    background: var(--white);
+    background: var(--teal-light);
-    border: 2px solid var(--teal-light);
+    background: linear-gradient(135deg, rgba(225, 245, 238, 0.5), transparent);
-    border-radius: 8px;
+    border: 2px solid transparent;
-    padding: 16px 12px;
+    border-radius: 12px;
+    padding: 14px 12px;
     font-family: 'Syne', sans-serif;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 4px;
+    gap: 2px;
 }
 
 .btn-difficulty:hover {
     border-color: var(--teal-mid);
-    transform: translateY(-4px);
+    transform: translateY(-3px);
     box-shadow: var(--shadow-md);
 }
 
 .btn-difficulty.active {
-    background: linear-gradient(135deg, var(--teal-light), var(--white));
+    background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
-    border-color: var(--teal-mid);
+    border-color: var(--teal-dark);
-    color: var(--teal);
+    box-shadow: var(--shadow-md);
+}
+
+.btn-difficulty.active .btn-label,
+.btn-difficulty.active .btn-desc {
+    color: var(--white);
+}
+
+.btn-icon {
+    font-size: 20px;
+    line-height: 1;
+    margin-bottom: 2px;
 }
 
 .btn-label {
@@ -130,20 +172,12 @@ main {
 }
 
 .btn-desc {
-    font-size: 12px;
+    font-size: 11px;
     font-family: 'DM Sans', sans-serif;
     color: var(--text-muted);
     font-weight: 400;
 }
 
-/* ============================================
-   GAME SECTION
-   ============================================ */
-.game-section {
-    margin-bottom: 80px;
-    animation: fadeInUp 0.6s ease-out 0.3s both;
-}
-
 /* ============================================
    GAME GRID & CARDS
    ============================================ */
@@ -152,7 +186,7 @@ main {
     grid-template-columns: repeat(auto-fit, minmax(clamp(70px, 15vw, 140px), 1fr));
     gap: clamp(12px, 2vw, 20px);
     max-width: 900px;
-    margin: 0 auto 40px;
+    margin: 0 auto 32px;
     padding: 20px;
     background: linear-gradient(135deg, rgba(225, 245, 238, 0.4), transparent);
     border-radius: 16px;
@@ -188,10 +222,13 @@ main {
 }
 
 .card-face.front {
-    background: linear-gradient(135deg, var(--teal-light), var(--teal-light));
+    background:
-    border: 2px solid var(--teal-mid);
+        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.6), transparent 60%),
-    color: var(--teal-dark);
+        linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
+    border: 2px solid var(--teal-dark);
+    color: var(--white);
     box-shadow: var(--shadow-sm);
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
 }
 
 .card-face.back {
@@ -315,13 +352,17 @@ footer {
    ============================================ */
 @media (max-width: 768px) {
     main {
-        padding: 20px;
+        padding: 32px 20px 20px;
     }
-    
+
     .intro-section h1 {
         font-size: 28px;
     }
-    
+
+    .game-panel {
+        border-radius: 16px;
+    }
+
     .game-grid {
         gap: 12px;
         padding: 16px;
@@ -345,9 +386,9 @@ footer {
 
 @media (max-width: 480px) {
     main {
-        padding: 16px;
+        padding: 24px 16px 16px;
     }
-    
+
     .intro-section h1 {
         font-size: 24px;
     }

exercices/memory-pictogrammes/assets/js/utils.js

@@ -9,7 +9,7 @@ const PICTOGRAMMES = [
     {
         id: 1,
         nom: "Gaz comprimé",
-        filename: "1-gaz-comprime.png",
+        filename: "sous_pression.jpg",
         texte: "Je suis sous pression",
         danger: "Danger physique",
         couleur: "teal"
@@ -17,7 +17,7 @@ const PICTOGRAMMES = [
     {
         id: 2,
         nom: "Exclamation",
-        filename: "2-exclamation.png",
+        filename: "nocif_irritant_ozone.jpg",
         texte: "Je nuis gravement à la santé",
         danger: "Danger pour la santé",
         couleur: "teal"
@@ -25,7 +25,7 @@ const PICTOGRAMMES = [
     {
         id: 3,
         nom: "Explosion",
-        filename: "3-explosion.png",
+        filename: "explosif.jpg",
         texte: "J'explose",
         danger: "Danger physique",
         couleur: "teal"
@@ -33,7 +33,7 @@ const PICTOGRAMMES = [
     {
         id: 4,
         nom: "Crâne",
-        filename: "4-crane.png",
+        filename: "toxicite_aigue.jpg",
         texte: "Je tue",
         danger: "Danger physique",
         couleur: "teal"
@@ -41,7 +41,7 @@ const PICTOGRAMMES = [
     {
         id: 5,
         nom: "Flamme",
-        filename: "5-flamme.png",
+        filename: "inflammable.jpg",
         texte: "Je flambe",
         danger: "Danger physique",
         couleur: "teal"
@@ -49,7 +49,7 @@ const PICTOGRAMMES = [
     {
         id: 6,
         nom: "Comburant",
-        filename: "6-comburant.png",
+        filename: "comburant.jpg",
         texte: "Je fais flamber",
         danger: "Danger physique",
         couleur: "teal"
@@ -57,7 +57,7 @@ const PICTOGRAMMES = [
     {
         id: 7,
         nom: "Environnement",
-        filename: "7-environnement.png",
+        filename: "pollution.jpg",
         texte: "Je pollue",
         danger: "Danger pour l'environnement",
         couleur: "teal"
@@ -65,7 +65,7 @@ const PICTOGRAMMES = [
     {
         id: 8,
         nom: "Corrosion",
-        filename: "8-corrosion.png",
+        filename: "corrosif.jpg",
         texte: "Je ronge",
         danger: "Danger physique",
         couleur: "teal"
@@ -73,7 +73,7 @@ const PICTOGRAMMES = [
     {
         id: 9,
         nom: "Santé/Environnement",
-        filename: "9-sante-environnement.png",
+        filename: "cmr.jpg",
         texte: "J'altère la santé ou la couche d'ozone",
         danger: "Danger pour la santé/Environnement",
         couleur: "teal"

exercices/memory-pictogrammes/memory.html

@@ -36,76 +36,82 @@
     <main class="game-container">
         <!-- INTRO SECTION -->
         <section class="intro-section">
-            <h1>🎮 Memory Pictogrammes GHS</h1>
+            <div class="intro-badge">🎮</div>
+            <h1>Memory Pictogrammes GHS</h1>
             <p class="subtitle">Maîtrisez les 9 symboles de danger</p>
-            
+
             <div class="intro-box">
                 <p>
                     <strong>Objectif :</strong> Retrouvez les paires en associant chaque pictogramme à sa signification.
                     Plus rapide vous êtes, plus de points vous gagnez! 🏆
                 </p>
             </div>
-
-            <!-- DIFFICULTY SELECTOR -->
-            <div class="difficulty-selector">
-                <label>Choisir le niveau :</label>
-                <div class="btn-group">
-                    <button class="btn btn-difficulty" data-difficulty="easy">
-                        <span class="btn-label">Facile</span>
-                        <span class="btn-desc">4 paires</span>
-                    </button>
-                    <button class="btn btn-difficulty active" data-difficulty="normal">
-                        <span class="btn-label">Normal</span>
-                        <span class="btn-desc">9 paires</span>
-                    </button>
-                    <button class="btn btn-difficulty" data-difficulty="hard">
-                        <span class="btn-label">Difficile</span>
-                        <span class="btn-desc">2 min chrono</span>
-                    </button>
-                </div>
-            </div>
         </section>
 
         <!-- GAME SECTION -->
         <section class="game-section">
-            <!-- HUD (Stats en temps réel) -->
+            <div class="game-panel">
-            <div class="game-hud">
+                <!-- DIFFICULTY SELECTOR -->
-                <div class="stat-box">
+                <div class="difficulty-selector">
-                    <div class="label">Score</div>
+                    <label>Choisir le niveau</label>
-                    <div class="value" id="score-display">0</div>
+                    <div class="btn-group">
+                        <button class="btn btn-difficulty" data-difficulty="easy">
+                            <span class="btn-icon">🌱</span>
+                            <span class="btn-label">Facile</span>
+                            <span class="btn-desc">4 paires</span>
+                        </button>
+                        <button class="btn btn-difficulty active" data-difficulty="normal">
+                            <span class="btn-icon">🎯</span>
+                            <span class="btn-label">Normal</span>
+                            <span class="btn-desc">9 paires</span>
+                        </button>
+                        <button class="btn btn-difficulty" data-difficulty="hard">
+                            <span class="btn-icon">🔥</span>
+                            <span class="btn-label">Difficile</span>
+                            <span class="btn-desc">2 min chrono</span>
+                        </button>
+                    </div>
                 </div>
-                <div class="stat-box">
-                    <div class="label">Mouvements</div>
-                    <div class="value" id="moves-display">0</div>
-                </div>
-                <div class="stat-box">
-                    <div class="label">Temps</div>
-                    <div class="value" id="timer-display">00:00</div>
-                </div>
-                <div class="stat-box">
-                    <div class="label">Paires</div>
-                    <div class="value" id="pairs-display">0/9</div>
-                </div>
-            </div>
 
-            <!-- PROGRESS BAR -->
+                <!-- HUD (Stats en temps réel) -->
-            <div class="progress-container">
+                <div class="game-hud">
-                <div class="progress-bar" id="progress-bar"></div>
+                    <div class="stat-box">
-            </div>
+                        <div class="label">🏆 Score</div>
+                        <div class="value" id="score-display">0</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="label">👆 Mouvements</div>
+                        <div class="value" id="moves-display">0</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="label">⏱ Temps</div>
+                        <div class="value" id="timer-display">00:00</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="label">🧩 Paires</div>
+                        <div class="value" id="pairs-display">0/9</div>
+                    </div>
+                </div>
 
-            <!-- GAME GRID -->
+                <!-- PROGRESS BAR -->
-            <div class="game-grid" id="game-grid">
+                <div class="progress-container">
-                <!-- Cartes générées par JS -->
+                    <div class="game-progress-fill" id="progress-bar"></div>
-            </div>
+                </div>
 
-            <!-- CONTROLS -->
+                <!-- GAME GRID -->
-            <div class="game-controls">
+                <div class="game-grid" id="game-grid">
-                <button class="btn btn-primary" id="restart-btn">
+                    <!-- Cartes générées par JS -->
-                    🔄 Recommencer
+                </div>
-                </button>
+
-                <button class="btn btn-secondary" id="pause-btn">
+                <!-- CONTROLS -->
-                    ⏸ Pause
+                <div class="game-controls">
-                </button>
+                    <button class="btn btn-primary" id="restart-btn">
+                        🔄 Recommencer
+                    </button>
+                    <button class="btn btn-secondary" id="pause-btn">
+                        ⏸ Pause
+                    </button>
+                </div>
             </div>
         </section>