Ajoute la config du serveur de preview local

Permet de lancer le site en local (python3 -m http.server) via l'outil de preview.
Corrige la superposition header/contenu et harmonise le style du jeu Memory
2026-07-07 17:08:08 +02:00 · 2026-07-07 17:06:09 +02:00 · 2026-07-07 16:58:40 +02:00
7 changed files with 177 additions and 128 deletions
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "static-site",
+      "runtimeExecutable": "python3",
+      "runtimeArgs": ["-m", "http.server", "8123"],
+      "port": 8123
+    }
+  ]
+}
--- a/exercices/memory-pictogrammes/assets/css/animations.css
+++ b/exercices/memory-pictogrammes/assets/css/animations.css
@@ -108,7 +108,7 @@
    }
 }

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

--- a/exercices/memory-pictogrammes/assets/css/hud.css
+++ b/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;
 }

@@ -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);
--- 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 {
--- 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: 40px;
+    padding: 64px 40px 40px;
    min-height: calc(100vh - 70px);
 }

@@ -34,13 +34,29 @@ main {
   INTRO SECTION
   ============================================ */
 .intro-section {
-    margin-bottom: 60px;
-    animation: fadeInDown 0.6s ease-out;
+    margin-bottom: 48px;
+    animation: fadeIn 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: 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, 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(--border);
+    border-radius: 12px;
+    padding: clamp(20px, 4vw, 40px);
+    box-shadow: var(--shadow-sm);
+}
+
 /* ============================================
   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-weight: 600;
+    font-size: 12px;
+    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);
-    border: 2px solid var(--teal-light);
-    border-radius: 8px;
-    padding: 16px 12px;
+    background: var(--teal-light);
+    background: linear-gradient(135deg, rgba(225, 245, 238, 0.5), transparent);
+    border: 2px solid transparent;
+    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));
-    border-color: var(--teal-mid);
-    color: var(--teal);
+    background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
+    border-color: var(--teal-dark);
+    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,10 +186,10 @@ 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;
+    border-radius: 12px;
    border: 1px solid var(--teal-light);
 }

@@ -188,10 +222,13 @@ main {
 }

 .card-face.front {
-    background: linear-gradient(135deg, var(--teal-light), var(--teal-light));
-    border: 2px solid var(--teal-mid);
-    color: var(--teal-dark);
+    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);
+    color: var(--white);
    box-shadow: var(--shadow-sm);
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
 }

 .card-face.back {
@@ -271,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;
@@ -315,13 +342,13 @@ footer {
   ============================================ */
@media (max-width: 768px) {
    main {
-        padding: 20px;
+        padding: 32px 20px 20px;
    }
-    
+
    .intro-section h1 {
        font-size: 28px;
    }
-    
+
    .game-grid {
        gap: 12px;
        padding: 16px;
@@ -345,9 +372,9 @@ footer {

@media (max-width: 480px) {
    main {
-        padding: 16px;
+        padding: 24px 16px 16px;
    }
-    
+
    .intro-section h1 {
        font-size: 24px;
    }
--- a/exercices/memory-pictogrammes/assets/js/utils.js
+++ b/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"
--- a/exercices/memory-pictogrammes/memory.html
+++ b/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-hud">
-                <div class="stat-box">
-                    <div class="label">Score</div>
-                    <div class="value" id="score-display">0</div>
+            <div class="game-panel">
+                <!-- 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-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 -->
-            <div class="progress-container">
-                <div class="progress-bar" id="progress-bar"></div>
-            </div>
+                <!-- HUD (Stats en temps réel) -->
+                <div class="game-hud">
+                    <div class="stat-box">
+                        <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 -->
-            <div class="game-grid" id="game-grid">
-                <!-- Cartes générées par JS -->
-            </div>
+                <!-- PROGRESS BAR -->
+                <div class="progress-container">
+                    <div class="game-progress-fill" id="progress-bar"></div>
+                </div>

-            <!-- CONTROLS -->
-            <div class="game-controls">
-                <button class="btn btn-primary" id="restart-btn">
-                    🔄 Recommencer
-                </button>
-                <button class="btn btn-secondary" id="pause-btn">
-                    ⏸ Pause
-                </button>
+                <!-- GAME GRID -->
+                <div class="game-grid" id="game-grid">
+                    <!-- Cartes générées par JS -->
+                </div>
+
+                <!-- CONTROLS -->
+                <div class="game-controls">
+                    <button class="btn btn-primary" id="restart-btn">
+                        🔄 Recommencer
+                    </button>
+                    <button class="btn btn-secondary" id="pause-btn">
+                        ⏸ Pause
+                    </button>
+                </div>
            </div>
        </section>