Archivage de fichiers de l'exo Memory

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

@@ -4,146 +4,18 @@
    ============================================ */
 
 :root {
-    /* NextGN Base Colors */
-    --teal: #0F6E56;
-    --teal-mid: #1D9E75;
-    --teal-light: #E1F5EE;
-    --teal-dark: #085041;
-    --amber: #BA7517;
-    --amber-light: #FAEEDA;
-    --amber-dark: #633806;
-    --coral: #993C1D;
-    --coral-mid: #D85A30;
-    --coral-light: #FAECE7;
-    --purple: #534AB7;
-    --purple-light: #EEEDFE;
-    --purple-dark: #3C3489;
-    --blue: #185FA5;
-    --blue-light: #E6F1FB;
-    --bg: #F7F6F2;
-    --white: #FFFFFF;
-    --text: #1a1a18;
-    --text-muted: #6b6a65;
-    --border: rgba(0,0,0,0.1);
-    
     /* Gamification Colors */
     --success: #4CAF50;
     --warning: #FF9800;
     --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);
 }
 
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-html, body {
-    height: 100%;
-}
-
-body {
-    font-family: 'DM Sans', sans-serif;
-    background: var(--bg);
-    color: var(--text);
-    line-height: 1.6;
-    overflow-x: hidden;
-}
-
-/* ============================================
-   HEADER & NAVIGATION
-   ============================================ */
-.nav-header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 70px;
-    background: rgba(255, 255, 255, 0.95);
-    border-bottom: 1px solid var(--border);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 40px;
-    z-index: 1000;
-    backdrop-filter: blur(10px);
-}
-
-.header-logo {
-    font-family: 'Syne', sans-serif;
-    font-size: 20px;
-    font-weight: 700;
-    letter-spacing: -0.5px;
-    background: linear-gradient(135deg, var(--teal-mid), var(--coral-mid));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-decoration: none;
-}
-
-.header-nav {
-    display: flex;
-    gap: 0;
-}
-
-.header-nav a {
-    font-family: 'Syne', sans-serif;
-    font-size: 12px;
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--text-muted);
-    text-decoration: none;
-    margin-left: 40px;
-    transition: color 0.3s ease;
-    position: relative;
-}
-
-.header-nav a:hover {
-    color: var(--teal-mid);
-}
-
-.header-nav a::after {
-    content: '';
-    position: absolute;
-    bottom: -4px;
-    left: 0;
-    width: 0;
-    height: 2px;
-    background: var(--teal-mid);
-    transition: width 0.3s ease;
-}
-
-.header-nav a:hover::after {
-    width: 100%;
-}
-
-/* ============================================
-   PROGRESS BAR
-   ============================================ */
-.progress {
-    position: fixed;
-    top: 70px;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: var(--teal-light);
-    z-index: 999;
-}
-
-.progress-fill {
-    height: 100%;
-    background: linear-gradient(90deg, var(--teal-mid), var(--teal-dark));
-    width: 0%;
-    transition: width 0.2s ease;
-}
-
 /* ============================================
    MAIN LAYOUT
    ============================================ */
@@ -442,18 +314,8 @@ footer {
    RESPONSIVE DESIGN
    ============================================ */
 @media (max-width: 768px) {
-    .nav-header {
-        padding: 0 20px;
-    }
-    
-    .header-nav a {
-        margin-left: 20px;
-        font-size: 11px;
-    }
-    
     main {
         padding: 20px;
-        margin-top: 70px;
     }
     
     .intro-section h1 {
@@ -482,23 +344,8 @@ footer {
 }
 
 @media (max-width: 480px) {
-    .nav-header {
-        height: 60px;
-        padding: 0 16px;
-    }
-    
-    .header-logo {
-        font-size: 16px;
-    }
-    
-    .header-nav a {
-        margin-left: 12px;
-        font-size: 10px;
-    }
-    
     main {
         padding: 16px;
-        margin-top: 60px;
     }
     
     .intro-section h1 {

exercices/memory-pictogrammes/memory.html

@@ -7,6 +7,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
     
     <!-- Styles -->
+    <link rel="stylesheet" href="../../header-style.css"/>
     <link rel="stylesheet" href="assets/css/memory-game.css">
     <link rel="stylesheet" href="assets/css/hud.css">
     <link rel="stylesheet" href="assets/css/animations.css">
@@ -14,19 +15,20 @@
 </head>
 <body>
     <!-- HEADER NextGN Formation -->
-    <header class="nav-header">
+    <header>
-        <a href="../../index.html" class="header-logo">
+        <div class="logo">NextGN Formation</div>
-            <span>NextGN</span> Formation
+        <nav>
-        </a>
-        <nav class="header-nav">
             <a href="../../index.html">Accueil</a>
-            <a href="../../index.html#formations">Formations</a>
+            <a href="../../index.html#formations">Exercices</a>
+            <a href="../../index.html#documentation">Documentation</a>
+            <a href="../../index.html#rapports">Rapports</a>
+            <a href="../../index.html#about">À propos</a>
             <a href="../../index.html#contact">Contact</a>
         </nav>
     </header>
 
     <!-- PROGRESS BAR -->
-    <div class="progress">
+    <div class="progress-bar">
         <div class="progress-fill" id="progress-fill"></div>
     </div>
 

index.html

@@ -55,7 +55,6 @@
                     <a href="#formations" class="btn btn-primary">Suivre les exercices interactifs</a>
                     <a href="#documentation" class="btn btn-secondary">Documentation</a>
                     <a href="#rapports" class="btn btn-secondary">Rapports de veille</a>
-                    <a href="#about" class="btn btn-secondary">En savoir plus</a>
                 </div>
 
                 <div class="stats">
@@ -70,9 +69,10 @@
                         <div class="stat-label">Pratiques & Interactifs</div>
                     </div>
                     <div class="stat-card">
-                        <div class="stat-label">Formateurs</div>
+                        <a href="#about" style="position: absolute; inset: 0; z-index: 3;"></a>
-                        <div class="stat-number">Experts</div>
+                        <div class="stat-label">En savoir</div>
-                        <div class="stat-label">Certifiés</div>
+                        <div class="stat-number">+</div>
+                        <div class="stat-label">Sur nous</div>
                     </div>
                 </div>
             </div>
@@ -134,7 +134,7 @@
                     </div>
                     <div class="formation-body">
                         <p class="formation-description">Identifiez et mémorisez les pictogrammes de danger des substances chimiques. Jeu ludique pour maîtriser la classification GHS.</p>
-                        <a href="formations/memory-pictogrammes/index.html" class="formation-link">Jouer</a>
+                        <a href="exercices/memory-pictogrammes/memory.html" class="formation-link">Jouer</a>
                     </div>
                 </div>
             </div>