Application du style CSS à tous lees fichiers d'exercice

exercices/Exo_BioCID 2.html

@@ -5,135 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Exercices Pratiques BioCID - NextGN Formation</title>
     <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">
+    <link rel="stylesheet" href="../header-style.css"/>
     <style>
-        :root {
-            --amber: #BA7517;
-            --amber-mid: #BA7517;
-            --amber-light: #FAEEDA;
-            --amber-dark: #633806;
-            --amber: #BA7517;
-            --amber-light: #FAEEDA;
-            --amber-dark: #633806;
-            --coral: #993C1D;
-            --coral-mid: #D85A30;
-            --coral-light: #FAECE7;
-            --purple: #BA7517;
-            --purple-light: #FAEEDA;
-            --purple-dark: #633806;
-            --blue: #BA7517;
-            --blue-light: #FAEEDA;
-            --bg: #F7F6F2;
-            --white: #FFFFFF;
-            --text: #1a1a18;
-            --text-muted: #6b6a65;
-            --border: rgba(0,0,0,0.1);
-        }
-
-        * {
-            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;
             padding-top: 70px;
-            overflow-x: hidden;
-        }
-
-        /* HEADER NAVIGATION */
-        header.nav-header {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 70px;
-            background: var(--amber-light);
-            border-bottom: 2px solid var(--amber);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 40px;
-            z-index: 1000;
-            backdrop-filter: blur(10px);
-            background: rgba(250, 238, 218, 0.98);
-        }
-
-        .logo {
-            font-family: 'Syne', sans-serif;
-            font-size: 18px;
-            font-weight: 700;
-            letter-spacing: -0.5px;
-            background: linear-gradient(135deg, var(--amber), var(--coral-mid));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        nav {
-            display: flex;
-            gap: 30px;
-            align-items: center;
-        }
-
-        nav a {
-            font-family: 'Syne', sans-serif;
-            font-size: 11px;
-            font-weight: 700;
-            letter-spacing: 0.08em;
-            text-transform: uppercase;
-            color: var(--text-muted);
-            text-decoration: none;
-            transition: color 0.3s ease;
-            position: relative;
-        }
-
-        nav a:hover {
-            color: var(--amber);
-        }
-
-        nav a::after {
-            content: '';
-            position: absolute;
-            bottom: -4px;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background: var(--amber);
-            transition: width 0.3s ease;
-        }
-
-        nav a:hover::after {
-            width: 100%;
-        }
-
-        /* PROGRESS BAR */
-        .progress-bar {
-            position: fixed;
-            top: 70px;
-            left: 0;
-            right: 0;
-            height: 3px;
-            background: rgba(0, 0, 0, 0.1);
-            z-index: 999;
-        }
-
-        .progress-fill {
-            height: 100%;
-            background: var(--amber);
-            width: 0%;
-            transition: width 0.1s ease;
         }
 
         .container {
@@ -431,37 +306,12 @@
             color: var(--text);
         }
 
-        footer {
-            background: var(--text);
-            color: var(--white);
-            padding: 40px;
-            text-align: center;
-            border-top: 2px solid var(--amber);
-            font-size: 0.95em;
-        }
-
         footer p {
             margin: 8px 0;
             opacity: 0.9;
         }
 
         @media (max-width: 768px) {
-            header.nav-header {
-                padding: 0 20px;
-            }
-
-            .logo {
-                font-size: 16px;
-            }
-
-            nav {
-                gap: 15px;
-            }
-
-            nav a {
-                font-size: 10px;
-            }
-
             .page-header h1 {
                 font-size: 1.8em;
             }
@@ -490,15 +340,15 @@
 </head>
 <body>
     <!-- HEADER NAVIGATION -->
-    <header class="nav-header">
+    <header>
         <div class="logo">NextGN Formation</div>
         <nav>
-            <a href="../../index.html">Accueil</a>
+            <a href="../index.html">Accueil</a>
-            <a href="../../index.html#formations">Exercices</a>
+            <a href="../index.html#formations">Exercices</a>
-            <a href="../../index.html#documentation">Documentation</a>
+            <a href="../index.html#documentation">Documentation</a>
-            <a href="../../index.html#rapports">Rapports</a>
+            <a href="../index.html#rapports">Rapports</a>
-            <a href="../../index.html#about">À propos</a>
+            <a href="../index.html#about">À propos</a>
-            <a href="../../index.html#contact">Contact</a>
+            <a href="../index.html#contact">Contact</a>
         </nav>
     </header>
 

exercices/Exo_BioCID 3.html

@@ -5,135 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Exercices Pratiques BioCID - NextGN Formation</title>
     <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">
+    <link rel="stylesheet" href="../header-style.css"/>
     <style>
-        :root {
-            --amber: #BA7517;
-            --amber-mid: #BA7517;
-            --amber-light: #FAEEDA;
-            --amber-dark: #633806;
-            --amber: #BA7517;
-            --amber-light: #FAEEDA;
-            --amber-dark: #633806;
-            --coral: #993C1D;
-            --coral-mid: #D85A30;
-            --coral-light: #FAECE7;
-            --purple: #BA7517;
-            --purple-light: #FAEEDA;
-            --purple-dark: #633806;
-            --blue: #BA7517;
-            --blue-light: #FAEEDA;
-            --bg: #F7F6F2;
-            --white: #FFFFFF;
-            --text: #1a1a18;
-            --text-muted: #6b6a65;
-            --border: rgba(0,0,0,0.1);
-        }
-
-        * {
-            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;
             padding-top: 70px;
-            overflow-x: hidden;
-        }
-
-        /* HEADER NAVIGATION */
-        header.nav-header {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 70px;
-            background: var(--amber-light);
-            border-bottom: 2px solid var(--amber);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 40px;
-            z-index: 1000;
-            backdrop-filter: blur(10px);
-            background: rgba(250, 238, 218, 0.98);
-        }
-
-        .logo {
-            font-family: 'Syne', sans-serif;
-            font-size: 18px;
-            font-weight: 700;
-            letter-spacing: -0.5px;
-            background: linear-gradient(135deg, var(--amber), var(--coral-mid));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        nav {
-            display: flex;
-            gap: 30px;
-            align-items: center;
-        }
-
-        nav a {
-            font-family: 'Syne', sans-serif;
-            font-size: 11px;
-            font-weight: 700;
-            letter-spacing: 0.08em;
-            text-transform: uppercase;
-            color: var(--text-muted);
-            text-decoration: none;
-            transition: color 0.3s ease;
-            position: relative;
-        }
-
-        nav a:hover {
-            color: var(--amber);
-        }
-
-        nav a::after {
-            content: '';
-            position: absolute;
-            bottom: -4px;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background: var(--amber);
-            transition: width 0.3s ease;
-        }
-
-        nav a:hover::after {
-            width: 100%;
-        }
-
-        /* PROGRESS BAR */
-        .progress-bar {
-            position: fixed;
-            top: 70px;
-            left: 0;
-            right: 0;
-            height: 3px;
-            background: rgba(0, 0, 0, 0.1);
-            z-index: 999;
-        }
-
-        .progress-fill {
-            height: 100%;
-            background: var(--amber);
-            width: 0%;
-            transition: width 0.1s ease;
         }
 
         .container {
@@ -431,37 +306,12 @@
             color: var(--text);
         }
 
-        footer {
-            background: var(--text);
-            color: var(--white);
-            padding: 40px;
-            text-align: center;
-            border-top: 2px solid var(--amber);
-            font-size: 0.95em;
-        }
-
         footer p {
             margin: 8px 0;
             opacity: 0.9;
         }
 
         @media (max-width: 768px) {
-            header.nav-header {
-                padding: 0 20px;
-            }
-
-            .logo {
-                font-size: 16px;
-            }
-
-            nav {
-                gap: 15px;
-            }
-
-            nav a {
-                font-size: 10px;
-            }
-
             .page-header h1 {
                 font-size: 1.8em;
             }
@@ -490,15 +340,15 @@
 </head>
 <body>
     <!-- HEADER NAVIGATION -->
-    <header class="nav-header">
+    <header>
         <div class="logo">NextGN Formation</div>
         <nav>
-            <a href="../../index.html">Accueil</a>
+            <a href="../index.html">Accueil</a>
-            <a href="../../index.html#formations">Exercices</a>
+            <a href="../index.html#formations">Exercices</a>
-            <a href="../../index.html#documentation">Documentation</a>
+            <a href="../index.html#documentation">Documentation</a>
-            <a href="../../index.html#rapports">Rapports</a>
+            <a href="../index.html#rapports">Rapports</a>
-            <a href="../../index.html#about">À propos</a>
+            <a href="../index.html#about">À propos</a>
-            <a href="../../index.html#contact">Contact</a>
+            <a href="../index.html#contact">Contact</a>
         </nav>
     </header>
 

exercices/Exo_BioCID.html

@@ -7,116 +7,8 @@
     <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">
     <link rel="stylesheet" href="../header-style.css"/>
     <style>
-        :root {
-            --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);
-        }
-
-        * {
-            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;
             padding-top: 70px;
-            overflow-x: hidden;
-        }
-
-        /* HEADER NAVIGATION */
-        .nav-header {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 70px;
-            background: var(--white);
-            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);
-            background: rgba(255, 255, 255, 0.95);
-        }
-
-        .header-logo {
-            font-family: 'Syne', sans-serif;
-            font-size: 16px;
-            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;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .header-nav {
-            display: flex;
-            gap: 30px;
-            align-items: center;
-        }
-
-        .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;
-            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%;
         }
 
         .container {
@@ -128,7 +20,7 @@
             overflow: visible;
         }
 
-        header {
+        .page-header {
             background: linear-gradient(135deg, var(--purple-light) 0%, rgba(83, 74, 183, 0.05) 100%);
             color: var(--text);
             padding: 50px 40px;
@@ -136,7 +28,7 @@
             border-bottom: 3px solid var(--purple);
         }
 
-        header h1 {
+        .page-header h1 {
             font-family: 'Syne', sans-serif;
             font-size: 2.2em;
             margin-bottom: 10px;
@@ -145,7 +37,7 @@
             color: var(--text);
         }
 
-        header p {
+        .page-header p {
             font-size: 1em;
             opacity: 0.8;
             font-weight: 400;
@@ -447,23 +339,7 @@
         }
 
         @media (max-width: 768px) {
-            .nav-header {
+            .page-header h1 {
-                padding: 0 20px;
-            }
-
-            .header-logo {
-                font-size: 14px;
-            }
-
-            .header-nav {
-                gap: 15px;
-            }
-
-            .header-nav a {
-                font-size: 10px;
-            }
-
-            header h1 {
                 font-size: 1.8em;
             }
 
@@ -482,19 +358,20 @@
     <header>
         <div class="logo">NextGN Formation</div>
         <nav>
-            <a href="#formations">Exercices interactifs</a>
+            <a href="../index.html">Accueil</a>
-            <a href="#documentation">Documentation</a>
+            <a href="../index.html#formations">Exercices</a>
-            <a href="#rapports">Rapports de veille</a>
+            <a href="../index.html#documentation">Documentation</a>
-            <a href="#about">À propos</a>
+            <a href="../index.html#rapports">Rapports</a>
-            <a href="#contact">Contact</a>
+            <a href="../index.html#about">À propos</a>
+            <a href="../index.html#contact">Contact</a>
         </nav>
     </header>
 
     <div class="container">
-        <header>
+        <div class="page-header">
             <h1>🎯 EXERCICES PRATIQUES BioCID</h1>
             <p>Maîtriser la plateforme de recherche de produits biocides</p>
-        </header>
+        </div>
 
         <div class="progress">
             <div class="progress-bar" id="progressBar"></div>

exercices/Exo_FDS 2.html

@@ -5,117 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TD FDS, FT et Étiquettes</title>
     <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">
+    <link rel="stylesheet" href="../header-style.css"/>
     <style>
-        :root {
-            --amber: #BA7517;
-            --amber-mid: #BA7517;
-            --amber-light: #FAEEDA;
-            --amber-dark: #633806;
-            --amber: #BA7517;
-            --amber-light: #FAEEDA;
-            --amber-dark: #633806;
-            --coral: #993C1D;
-            --coral-mid: #D85A30;
-            --coral-light: #FAECE7;
-            --purple: #BA7517;
-            --purple-light: #FAEEDA;
-            --purple-dark: #633806;
-            --blue: #BA7517;
-            --blue-light: #FAEEDA;
-            --bg: #F7F6F2;
-            --white: #FFFFFF;
-            --text: #1a1a18;
-            --text-muted: #6b6a65;
-            --border: rgba(0,0,0,0.1);
-        }
-
-        * {
-            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;
             padding-top: 70px;
-            overflow-x: hidden;
-        }
-
-        /* HEADER NAVIGATION */
-        .nav-header {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 70px;
-            background: var(--amber-light);
-            border-bottom: 2px solid var(--amber);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 40px;
-            z-index: 1000;
-            backdrop-filter: blur(10px);
-            background: rgba(250, 238, 218, 0.98);
-        }
-
-        .header-logo {
-            font-family: 'Syne', sans-serif;
-            font-size: 16px;
-            font-weight: 700;
-            letter-spacing: -0.5px;
-            background: linear-gradient(135deg, var(--amber), var(--coral-mid));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .header-nav {
-            display: flex;
-            gap: 30px;
-            align-items: center;
-        }
-
-        .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;
-            transition: color 0.3s ease;
-            position: relative;
-        }
-
-        .header-nav a:hover {
-            color: var(--amber);
-        }
-
-        .header-nav a::after {
-            content: '';
-            position: absolute;
-            bottom: -4px;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background: var(--amber);
-            transition: width 0.3s ease;
-        }
-
-        .header-nav a:hover::after {
-            width: 100%;
         }
 
         .container {
@@ -127,7 +20,7 @@
             overflow: visible;
         }
 
-        header {
+        .page-header {
             background: linear-gradient(135deg, var(--amber-light) 0%, rgba(24, 95, 165, 0.05) 100%);
             color: var(--text);
             padding: 50px 40px;
@@ -135,7 +28,7 @@
             border-bottom: 3px solid var(--amber);
         }
 
-        header h1 {
+        .page-header h1 {
             font-family: 'Syne', sans-serif;
             font-size: 2.2em;
             margin-bottom: 10px;
@@ -144,7 +37,7 @@
             color: var(--text);
         }
 
-        header p {
+        .page-header p {
             font-size: 1em;
             opacity: 0.8;
             font-weight: 400;
@@ -423,23 +316,7 @@
         }
 
         @media (max-width: 768px) {
-            .nav-header {
+            .page-header h1 {
-                padding: 0 20px;
-            }
-
-            .header-logo {
-                font-size: 14px;
-            }
-
-            .header-nav {
-                gap: 15px;
-            }
-
-            .header-nav a {
-                font-size: 10px;
-            }
-
-            header h1 {
                 font-size: 1.8em;
             }
 
@@ -467,22 +344,21 @@
     <!-- HEADER NAVIGATION -->
     <header>
         <div class="logo">NextGN Formation</div>
-            <a href="../../index.html">Accueil</a>
         <nav>
-            <a href="../../index.html#formations">Exercices</a>
+            <a href="../index.html">Accueil</a>
-            <a href="../../index.html#documentation">Documentation</a>
+            <a href="../index.html#formations">Exercices</a>
-            <a href="../../index.html#rapports">Rapports</a>
+            <a href="../index.html#documentation">Documentation</a>
-            <a href="../../index.html#about">À propos</a>
+            <a href="../index.html#rapports">Rapports</a>
-            <a href="../../index.html#contact">Contact</a>
+            <a href="../index.html#about">À propos</a>
+            <a href="../index.html#contact">Contact</a>
         </nav>
     </header>
 
-<body>
     <div class="container">
-        <header>
+        <div class="page-header">
             <h1>📋 TD — ANALYSE FDS, FT ET ÉTIQUETTES</h1>
             <p>Maîtriser les documents essentiels des produits biocides</p>
-        </header>
+        </div>
 
         <div class="progress">
             <div class="progress-bar" id="progressBar"></div>

exercices/Exo_FDS 3.html

@@ -5,117 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TD FDS, FT et Étiquettes</title>
     <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">
+    <link rel="stylesheet" href="../header-style.css"/>
     <style>
-        :root {
-            --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);
-        }
-
-        * {
-            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;
             padding-top: 70px;
-            overflow-x: hidden;
-        }
-
-        /* HEADER NAVIGATION */
-        .nav-header {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 70px;
-            background: var(--white);
-            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);
-            background: rgba(255, 255, 255, 0.95);
-        }
-
-        .header-logo {
-            font-family: 'Syne', sans-serif;
-            font-size: 16px;
-            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;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .header-nav {
-            display: flex;
-            gap: 30px;
-            align-items: center;
-        }
-
-        .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;
-            transition: color 0.3s ease;
-            position: relative;
-        }
-
-        .header-nav a:hover {
-            color: var(--blue);
-        }
-
-        .header-nav a::after {
-            content: '';
-            position: absolute;
-            bottom: -4px;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background: var(--blue);
-            transition: width 0.3s ease;
-        }
-
-        .header-nav a:hover::after {
-            width: 100%;
         }
 
         .container {
@@ -127,7 +20,7 @@
             overflow: visible;
         }
 
-        header {
+        .page-header {
             background: linear-gradient(135deg, var(--blue-light) 0%, rgba(24, 95, 165, 0.05) 100%);
             color: var(--text);
             padding: 50px 40px;
@@ -135,7 +28,7 @@
             border-bottom: 3px solid var(--blue);
         }
 
-        header h1 {
+        .page-header h1 {
             font-family: 'Syne', sans-serif;
             font-size: 2.2em;
             margin-bottom: 10px;
@@ -144,7 +37,7 @@
             color: var(--text);
         }
 
-        header p {
+        .page-header p {
             font-size: 1em;
             opacity: 0.8;
             font-weight: 400;
@@ -423,23 +316,7 @@
         }
 
         @media (max-width: 768px) {
-            .nav-header {
+            .page-header h1 {
-                padding: 0 20px;
-            }
-
-            .header-logo {
-                font-size: 14px;
-            }
-
-            .header-nav {
-                gap: 15px;
-            }
-
-            .header-nav a {
-                font-size: 10px;
-            }
-
-            header h1 {
                 font-size: 1.8em;
             }
 
@@ -468,20 +345,20 @@
     <header>
         <div class="logo">NextGN Formation</div>
         <nav>
-            <a href="#formations">Exercices interactifs</a>
+            <a href="../index.html">Accueil</a>
-            <a href="#documentation">Documentation</a>
+            <a href="../index.html#formations">Exercices</a>
-            <a href="#rapports">Rapports de veille</a>
+            <a href="../index.html#documentation">Documentation</a>
-            <a href="#about">À propos</a>
+            <a href="../index.html#rapports">Rapports</a>
-            <a href="#contact">Contact</a>
+            <a href="../index.html#about">À propos</a>
+            <a href="../index.html#contact">Contact</a>
         </nav>
     </header>
 
-<body>
     <div class="container">
-        <header>
+        <div class="page-header">
             <h1>📋 TD — ANALYSE FDS, FT ET ÉTIQUETTES</h1>
             <p>Maîtriser les documents essentiels des produits biocides</p>
-        </header>
+        </div>
 
         <div class="progress">
             <div class="progress-bar" id="progressBar"></div>

exercices/TD_Certibiocide.html

@@ -7,41 +7,14 @@
 <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">
 <link rel="stylesheet" href="../header-style.css"/>
 <style>
-:root {
-  --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);
-}
-* { box-sizing: border-box; margin: 0; padding: 0; }
-html, body { height: 100%; }
 body {
-  font-family: 'DM Sans', sans-serif;
-  background: var(--bg);
-  color: var(--text);
   overflow: hidden;
 }
 
 /* SLIDES */
 .slide {
   position: absolute;
-  inset: 0;
+  top: 70px; left: 0; right: 0; bottom: 0;
   display: none;
   flex-direction: column;
   align-items: center;
@@ -60,16 +33,7 @@ body {
   to { opacity: 1; transform: translateY(0); }
 }
 
-/* PROGRESS BAR */
-.progress-bar {
-  position: fixed;
-  top: 0; left: 0; right: 0;
-  height: 3px;
-  background: rgba(0,0,0,0.08);
-  z-index: 100;
-}
 .progress-fill {
-  height: 100%;
   background: var(--teal-mid);
   transition: width 0.4s ease;
 }
@@ -77,7 +41,7 @@ body {
 /* PHASE INDICATOR */
 .phase-badge {
   position: fixed;
-  top: 16px; right: 16px;
+  top: 80px; right: 16px;
   font-family: 'Syne', sans-serif;
   font-size: 11px;
   font-weight: 700;
@@ -508,6 +472,18 @@ body {
 </head>
 <body>
 
+<header>
+  <div class="logo">NextGN Formation</div>
+  <nav>
+    <a href="../index.html">Accueil</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-bar"><div class="progress-fill" id="progressFill"></div></div>
 

exercices/TP_Nuisibles_final 2.html

@@ -5,114 +5,8 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>TP Nuisibles final — Étude de cas</title>
 <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">
+<link rel="stylesheet" href="../header-style.css"/>
 <style>
-:root {
-  --amber: #BA7517;
-  --amber-mid: #BA7517;
-  --amber-light: #FAEEDA;
-  --amber-dark: #633806;
-  --amber: #BA7517;
-  --amber-light: #FAEEDA;
-  --amber-dark: #633806;
-  --coral: #993C1D;
-  --coral-mid: #D85A30;
-  --coral-light: #FAECE7;
-  --purple: #BA7517;
-  --purple-light: #FAEEDA;
-  --purple-dark: #633806;
-  --blue: #BA7517;
-  --blue-light: #FAEEDA;
-  --bg: #F7F6F2;
-  --white: #FFFFFF;
-  --text: #1a1a18;
-  --text-muted: #6b6a65;
-  --border: rgba(0,0,0,0.1);
-}
-
-/* HEADER NAVIGATION */
-.nav-header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 70px;
-  background: var(--amber-light);
-  border-bottom: 2px solid var(--amber);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 40px;
-  z-index: 1000;
-  backdrop-filter: blur(10px);
-  background: rgba(250, 238, 218, 0.98);
-}
-
-.header-logo {
-  font-family: 'Syne', sans-serif;
-  font-size: 16px;
-  font-weight: 700;
-  letter-spacing: -0.5px;
-  background: linear-gradient(135deg, var(--amber), var(--coral-mid));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.header-nav {
-  display: flex;
-  gap: 30px;
-  align-items: center;
-}
-
-.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;
-  transition: color 0.3s ease;
-  position: relative;
-}
-
-.header-nav a:hover {
-  color: var(--coral-mid);
-}
-
-.header-nav a::after {
-  content: '';
-  position: absolute;
-  bottom: -4px;
-  left: 0;
-  width: 0;
-  height: 2px;
-  background: var(--coral-mid);
-  transition: width 0.3s ease;
-}
-
-.header-nav a:hover::after {
-  width: 100%;
-}
-
-/* MAIN CONTENT ADJUSTMENT */
-main {
-  margin-top: 70px;
-}
-
-* { box-sizing: border-box; margin: 0; padding: 0; }
-html, body { height: 100%; }
-body {
-  font-family: 'DM Sans', sans-serif;
-  background: var(--bg);
-  color: var(--text);
-  overflow-x: hidden;
-}
-
 /* SLIDES */
 .slide {
   position: absolute;
@@ -138,16 +32,7 @@ body {
   to { opacity: 1; transform: translateY(0); }
 }
 
-/* PROGRESS BAR */
-.progress-bar {
-  position: fixed;
-  top: 70px; left: 0; right: 0;
-  height: 3px;
-  background: var(--border);
-  z-index: 999;
-}
 .progress-fill {
-  height: 100%;
   background: var(--coral-mid);
   transition: width 0.4s ease;
 }
@@ -155,7 +40,7 @@ body {
 /* PHASE INDICATOR */
 .phase-badge {
   position: fixed;
-  top: 16px; right: 16px;
+  top: 80px; right: 16px;
   font-family: 'Syne', sans-serif;
   font-size: 11px;
   font-weight: 700;
@@ -589,13 +474,13 @@ body {
 <!-- HEADER WITH NAVIGATION -->
     <header>
         <div class="logo">NextGN Formation</div>
-            <a href="../../index.html">Accueil</a>
         <nav>
-            <a href="../../index.html#formations">Exercices</a>
+            <a href="../index.html">Accueil</a>
-            <a href="../../index.html#documentation">Documentation</a>
+            <a href="../index.html#formations">Exercices</a>
-            <a href="../../index.html#rapports">Rapports</a>
+            <a href="../index.html#documentation">Documentation</a>
-            <a href="../../index.html#about">À propos</a>
+            <a href="../index.html#rapports">Rapports</a>
-            <a href="../../index.html#contact">Contact</a>
+            <a href="../index.html#about">À propos</a>
+            <a href="../index.html#contact">Contact</a>
         </nav>
     </header>
 

exercices/TP_Nuisibles_final.html

@@ -7,113 +7,6 @@
 <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">
 <link rel="stylesheet" href="../header-style.css"/>
 <style>
-:root {
-  --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);
-}
-
-/* HEADER NAVIGATION */
-.nav-header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 70px;
-  background: var(--white);
-  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);
-  background: rgba(255, 255, 255, 0.95);
-}
-
-.header-logo {
-  font-family: 'Syne', sans-serif;
-  font-size: 16px;
-  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;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.header-nav {
-  display: flex;
-  gap: 30px;
-  align-items: center;
-}
-
-.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;
-  transition: color 0.3s ease;
-  position: relative;
-}
-
-.header-nav a:hover {
-  color: var(--coral-mid);
-}
-
-.header-nav a::after {
-  content: '';
-  position: absolute;
-  bottom: -4px;
-  left: 0;
-  width: 0;
-  height: 2px;
-  background: var(--coral-mid);
-  transition: width 0.3s ease;
-}
-
-.header-nav a:hover::after {
-  width: 100%;
-}
-
-/* MAIN CONTENT ADJUSTMENT */
-main {
-  margin-top: 70px;
-}
-
-* { box-sizing: border-box; margin: 0; padding: 0; }
-html, body { height: 100%; }
-body {
-  font-family: 'DM Sans', sans-serif;
-  background: var(--bg);
-  color: var(--text);
-  overflow-x: hidden;
-}
-
 /* SLIDES */
 .slide {
   position: absolute;
@@ -139,16 +32,7 @@ body {
   to { opacity: 1; transform: translateY(0); }
 }
 
-/* PROGRESS BAR */
-.progress-bar {
-  position: fixed;
-  top: 70px; left: 0; right: 0;
-  height: 3px;
-  background: var(--border);
-  z-index: 999;
-}
 .progress-fill {
-  height: 100%;
   background: var(--coral-mid);
   transition: width 0.4s ease;
 }
@@ -156,7 +40,7 @@ body {
 /* PHASE INDICATOR */
 .phase-badge {
   position: fixed;
-  top: 16px; right: 16px;
+  top: 80px; right: 16px;
   font-family: 'Syne', sans-serif;
   font-size: 11px;
   font-weight: 700;
@@ -591,11 +475,12 @@ body {
     <header>
         <div class="logo">NextGN Formation</div>
         <nav>
-            <a href="#formations">Exercices interactifs</a>
+            <a href="../index.html">Accueil</a>
-            <a href="#documentation">Documentation</a>
+            <a href="../index.html#formations">Exercices</a>
-            <a href="#rapports">Rapports de veille</a>
+            <a href="../index.html#documentation">Documentation</a>
-            <a href="#about">À propos</a>
+            <a href="../index.html#rapports">Rapports</a>
-            <a href="#contact">Contact</a>
+            <a href="../index.html#about">À propos</a>
+            <a href="../index.html#contact">Contact</a>
         </nav>
     </header>
 

exercices/admin_resultats.asp

@@ -0,0 +1,299 @@
+<%@ Language="VBScript" %>
+<%
+Response.Buffer = True
+Response.CharSet = "UTF-8"
+
+' ------- À ADAPTER : même chaîne de connexion que save_results.asp -------
+Dim connString
+connString = "Provider=SQLOLEDB;Data Source=sql.bsite.net\MSSQL2016;" & _
+             "Initial Catalog=nextgnformation_reponses_exercices;" & _
+             "User ID=nextgnformation_reponses_exercices;" & _
+             "Password=S5$NyFXzEjJCg6jD;"
+
+' ------- À ADAPTER : mot de passe d'accès à cette page -------
+Dim ADMIN_PASSWORD
+ADMIN_PASSWORD = "Sm#gnttCaYE5f3ED"
+' -----------------------------------------------------------------------
+
+Dim authenticated
+authenticated = False
+
+If Request.Cookies("tp_admin_auth") = "ok" Then
+    authenticated = True
+End If
+
+If Request.Form("password") <> "" Then
+    If Request.Form("password") = ADMIN_PASSWORD Then
+        authenticated = True
+        Response.Cookies("tp_admin_auth") = "ok"
+        Response.Cookies("tp_admin_auth").Expires = DateAdd("h", 8, Now)
+    Else
+        authenticated = False
+    End If
+End If
+
+Function HtmlEscape(s)
+    If IsNull(s) Then
+        HtmlEscape = ""
+        Exit Function
+    End If
+    s = CStr(s)
+    s = Replace(s, "&", "&amp;")
+    s = Replace(s, "<", "&lt;")
+    s = Replace(s, ">", "&gt;")
+    HtmlEscape = s
+End Function
+%>
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Résultats des TP — NextGN Formation</title>
+<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">
+<style>
+:root {
+  --amber: #BA7517; --amber-light: #FAEEDA; --amber-dark: #633806;
+  --coral: #993C1D; --coral-mid: #D85A30; --coral-light: #FAECE7;
+  --bg: #F7F6F2; --white: #FFFFFF; --text: #1a1a18; --text-muted: #6b6a65;
+  --border: rgba(0,0,0,0.1);
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text);
+  padding-top: 70px;
+}
+.nav-header {
+  position: fixed; top: 0; left: 0; right: 0; height: 70px;
+  background: rgba(250,238,218,0.98); border-bottom: 2px solid var(--amber);
+  display: flex; align-items: center; justify-content: space-between; padding: 0 40px; z-index: 1000;
+}
+.header-logo {
+  font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700;
+  background: linear-gradient(135deg, var(--amber), var(--coral-mid));
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+}
+.wrap { max-width: 1200px; margin: 0 auto; padding: 2rem; }
+h1 { font-family: 'Syne', sans-serif; font-size: 24px; font-weight: 800; }
+.login-box {
+  max-width: 360px; margin: 80px auto; background: white; border: 1px solid var(--border);
+  border-radius: 16px; padding: 2rem; text-align: center;
+}
+.login-box input[type="password"] {
+  width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px;
+  font-size: 15px; margin: 1rem 0;
+}
+.login-box button, .btn {
+  font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
+  text-transform: uppercase; background: var(--amber); color: white; border: none;
+  border-radius: 30px; padding: 10px 24px; cursor: pointer;
+}
+.error-msg { color: var(--coral); font-size: 13px; margin-bottom: 0.5rem; }
+table.results { width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); font-size: 13px; }
+table.results th {
+  background: var(--amber-light); color: var(--amber-dark); font-family: 'Syne', sans-serif;
+  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
+  padding: 10px 14px; text-align: left; border-bottom: 2px solid var(--amber);
+}
+table.results td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
+table.results tr:hover { background: #FAFAFA; }
+.detail-toggle { cursor: pointer; color: var(--amber-dark); font-weight: 700; text-decoration: underline; background: none; border: none; font-family: 'DM Sans', sans-serif; font-size: 13px; }
+.detail-row { display: none; }
+.detail-row.open { display: table-row; }
+.detail-content { background: #FAFAFA; padding: 16px 24px; }
+.detail-content h3 { font-family: 'Syne', sans-serif; font-size: 13px; margin: 14px 0 6px; color: var(--amber-dark); }
+.detail-content p { margin: 4px 0; font-size: 13px; line-height: 1.5; }
+.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+.count-badge { background: var(--amber-light); color: var(--amber-dark); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; font-family: 'Syne', sans-serif; }
+.risk-mini { width: 100%; border-collapse: collapse; margin-top: 4px; }
+.risk-mini td { border: 1px solid var(--border); padding: 4px 8px; font-size: 12px; }
+</style>
+</head>
+<body>
+
+<nav class="nav-header">
+  <span class="header-logo">NextGN Formation — Admin</span>
+</nav>
+
+<div class="wrap">
+<%
+If Not authenticated Then
+%>
+  <div class="login-box">
+    <h1 style="font-size:18px;">Accès résultats TP</h1>
+    <% If Request.Form("password") <> "" Then %>
+      <div class="error-msg">Mot de passe incorrect.</div>
+    <% End If %>
+    <form method="POST">
+      <input type="password" name="password" placeholder="Mot de passe" autofocus>
+      <br>
+      <button type="submit">Se connecter</button>
+    </form>
+  </div>
+<%
+Else
+    Dim conn, rs
+    Set conn = Server.CreateObject("ADODB.Connection")
+    On Error Resume Next
+    conn.Open connString
+    If Err.Number <> 0 Then
+%>
+      <p style="color:var(--coral);">Erreur de connexion à la base : <%= HtmlEscape(Err.Description) %></p>
+<%
+    Else
+        Err.Clear
+        Set rs = conn.Execute("SELECT * FROM tp_resultats ORDER BY date_enregistrement DESC")
+        If Err.Number <> 0 Then
+%>
+          <p style="color:var(--coral);">La table tp_resultats n'existe pas encore — aucun envoi reçu pour le moment.</p>
+<%
+        Else
+%>
+  <div class="topbar">
+    <h1>Résultats des stagiaires</h1>
+    <span class="count-badge"><%= IIf_Count(rs) %></span>
+  </div>
+  <table class="results">
+    <tr>
+      <th>Groupe / Stagiaire</th>
+      <th>Date session</th>
+      <th>Cas pratique</th>
+      <th>Reçu le</th>
+      <th>Détail</th>
+    </tr>
+<%
+          Dim rowIndex
+          rowIndex = 0
+          Do While Not rs.EOF
+              rowIndex = rowIndex + 1
+%>
+    <tr>
+      <td><%= HtmlEscape(rs("nom")) %></td>
+      <td><%= HtmlEscape(rs("date_session")) %></td>
+      <td><%= HtmlEscape(rs("cas_choisi")) %></td>
+      <td><%= HtmlEscape(rs("date_enregistrement")) %></td>
+      <td><button class="detail-toggle" onclick="toggleDetail(<%= rowIndex %>)">Voir le détail</button></td>
+    </tr>
+    <tr class="detail-row" id="detail-<%= rowIndex %>">
+      <td colspan="5">
+        <div class="detail-content">
+          <h3>Réponses TP1 &amp; TP2</h3>
+          <%= RenderReponses(rs("reponses_json")) %>
+          <h3>TP3 — Analyse de risques</h3>
+          <p><strong>Intitulé :</strong> <%= HtmlEscape(rs("tp3_intitule")) %></p>
+          <p><strong>Description :</strong> <%= HtmlEscape(rs("tp3_description")) %></p>
+          <p><strong>Lieu :</strong> <%= HtmlEscape(rs("tp3_lieu")) %></p>
+          <p><strong>Début prévu :</strong> <%= HtmlEscape(rs("tp3_debut")) %></p>
+          <%= RenderTableau(rs("tp3_tableau_json")) %>
+          <p><strong>Réalisée par :</strong> <%= HtmlEscape(rs("tp3_realise_par")) %> —
+             <strong>Vérifiée par :</strong> <%= HtmlEscape(rs("tp3_verifie_par")) %> —
+             <strong>MAJ par :</strong> <%= HtmlEscape(rs("tp3_maj_par")) %></p>
+        </div>
+      </td>
+    </tr>
+<%
+              rs.MoveNext
+          Loop
+%>
+  </table>
+<%
+        End If
+        conn.Close
+    End If
+End If
+%>
+</div>
+
+<script>
+function toggleDetail(i) {
+  var row = document.getElementById('detail-' + i);
+  row.classList.toggle('open');
+}
+</script>
+</body>
+</html>
+<%
+Function IIf_Count(rs)
+    Dim n
+    n = 0
+    Do While Not rs.EOF
+        n = n + 1
+        rs.MoveNext
+    Loop
+    rs.MoveFirst
+    IIf_Count = n & " envoi(s)"
+End Function
+
+' --- Parsing JSON minimal via ScriptControl pour l'affichage admin ---
+Function RenderReponses(jsonStr)
+    Dim out
+    out = ""
+    If Trim(jsonStr) = "" Then
+        RenderReponses = "<p><em>Aucune réponse.</em></p>"
+        Exit Function
+    End If
+    Dim sc
+    Set sc = Server.CreateObject("MSScriptControl.ScriptControl")
+    sc.Language = "JScript"
+    sc.AddCode "function parseArr(s){ return eval('(' + s + ')'); }"
+    On Error Resume Next
+    Dim arr
+    Set arr = sc.Run("parseArr", jsonStr)
+    If Err.Number <> 0 Then
+        RenderReponses = "<p><em>Erreur de lecture des réponses.</em></p>"
+        Exit Function
+    End If
+    On Error Goto 0
+    Dim i
+    For i = 0 To arr.length - 1
+        Dim q, r
+        q = arr.Item(i).question
+        r = arr.Item(i).reponse
+        If Trim(r) = "" Then r = "(sans réponse)"
+        out = out & "<p><strong>" & ServerHtmlEscape(q) & " :</strong> " & ServerHtmlEscape(r) & "</p>"
+    Next
+    RenderReponses = out
+End Function
+
+Function RenderTableau(jsonStr)
+    Dim out
+    out = ""
+    If Trim(jsonStr) = "" Then
+        RenderTableau = ""
+        Exit Function
+    End If
+    Dim sc
+    Set sc = Server.CreateObject("MSScriptControl.ScriptControl")
+    sc.Language = "JScript"
+    sc.AddCode "function parseArr(s){ return eval('(' + s + ')'); }"
+    On Error Resume Next
+    Dim arr
+    Set arr = sc.Run("parseArr", jsonStr)
+    If Err.Number <> 0 Then
+        RenderTableau = "<p><em>Erreur de lecture du tableau.</em></p>"
+        Exit Function
+    End If
+    On Error Goto 0
+    out = "<table class='risk-mini'><tr><th>Étape</th><th>Risque</th><th>Mesure</th></tr>"
+    Dim i
+    For i = 0 To arr.length - 1
+        out = out & "<tr><td>" & ServerHtmlEscape(arr.Item(i).etape) & "</td><td>" & _
+              ServerHtmlEscape(arr.Item(i).risque) & "</td><td>" & _
+              ServerHtmlEscape(arr.Item(i).mesure) & "</td></tr>"
+    Next
+    out = out & "</table>"
+    RenderTableau = out
+End Function
+
+Function ServerHtmlEscape(s)
+    If IsNull(s) Then
+        ServerHtmlEscape = ""
+        Exit Function
+    End If
+    s = CStr(s)
+    s = Replace(s, "&", "&amp;")
+    s = Replace(s, "<", "&lt;")
+    s = Replace(s, ">", "&gt;")
+    ServerHtmlEscape = s
+End Function
+%>

exercices/save_results.asp

@@ -0,0 +1,213 @@
+<%@ Language="VBScript" %>
+<%
+' ============================================================
+' save_results.asp
+' Reçoit les réponses de l'exercice TP Nuisibles (JSON en POST)
+' et les enregistre dans la base SQL Server.
+' ============================================================
+Response.Buffer = True
+Response.ContentType = "application/json"
+Response.CharSet = "UTF-8"
+
+' ------- À ADAPTER : chaîne de connexion vers votre base -------
+' Récupérée depuis le panneau "Manage Databases" de FreeASPHosting :
+'   Server Name : sql.bsite.net\MSSQL2016
+'   SQL Username : nextgnformation_reponses_exercices
+'   Database name : (généralement identique au username, à vérifier dans le panneau)
+Dim connString
+connString = "Provider=SQLOLEDB;Data Source=sql.bsite.net\MSSQL2016;" & _
+             "Initial Catalog=nextgnformation_reponses_exercices;" & _
+             "User ID=nextgnformation_reponses_exercices;" & _
+             "Password=S5$NyFXzEjJCg6jD;"
+' -----------------------------------------------------------------
+
+Function JSONEscape(s)
+    s = Replace(s, "\", "\\")
+    s = Replace(s, Chr(34), "\""")
+    s = Replace(s, vbCrLf, "\n")
+    s = Replace(s, vbLf, "\n")
+    s = Replace(s, vbCr, "\n")
+    s = Replace(s, vbTab, "\t")
+    JSONEscape = s
+End Function
+
+Sub SendJSON(success, message)
+    Dim out
+    out = "{""success"":" & LCase(CStr(success)) & ",""error"":""" & JSONEscape(message) & """}"
+    Response.Write out
+    Response.End
+End Sub
+
+' --- Lecture du corps de la requête (JSON brut envoyé en POST) ---
+Dim rawJSON
+Dim totalBytes
+totalBytes = Request.TotalBytes
+If totalBytes = 0 Then
+    SendJSON False, "Aucune donnée reçue."
+End If
+
+Dim binData
+binData = Request.BinaryRead(totalBytes)
+
+' Conversion des octets UTF-8 en chaîne VBScript
+Dim objStream
+Set objStream = Server.CreateObject("ADODB.Stream")
+objStream.Type = 1 ' adTypeBinary
+objStream.Open
+objStream.Write binData
+objStream.Position = 0
+objStream.Type = 2 ' adTypeText
+objStream.CharSet = "utf-8"
+rawJSON = objStream.ReadText
+objStream.Close
+Set objStream = Nothing
+
+If Trim(rawJSON) = "" Then
+    SendJSON False, "Corps de requête vide."
+End If
+
+' --- Parsing JSON minimal sans librairie externe ---
+' On utilise le moteur JScript via ScriptControl pour parser le JSON de façon fiable.
+Dim sc
+Set sc = Server.CreateObject("MSScriptControl.ScriptControl")
+sc.Language = "JScript"
+sc.AddCode "function parseIt(s){ return eval('(' + s + ')'); } " & _
+           "function getStr(o,k){ return (o && o[k] != null) ? String(o[k]) : ''; } " & _
+           "function getReponsesJSON(o){ var arr = o.reponses || []; var out = []; " & _
+           "for (var i=0;i<arr.length;i++){ out.push({id:String(arr[i].id||''), question:String(arr[i].question||''), reponse:String(arr[i].reponse||'')}); } return out; } " & _
+           "function getTableauJSON(o){ var arr = o.tp3_tableau || []; var out = []; " & _
+           "for (var i=0;i<arr.length;i++){ out.push({etape:String(arr[i].etape||''), risque:String(arr[i].risque||''), mesure:String(arr[i].mesure||'')}); } return out; }"
+
+Dim dataObj
+On Error Resume Next
+Set dataObj = sc.Run("parseIt", rawJSON)
+If Err.Number <> 0 Then
+    SendJSON False, "JSON invalide : " & Err.Description
+End If
+On Error Goto 0
+
+Dim nom, dateSession, casChoisi, casCle, dateEnvoi
+Dim metaIntitule, metaDescription, metaLieu, metaDebut, metaRealise, metaVerifie, metaMaj
+
+nom            = sc.Run("getStr", dataObj, "nom")
+dateSession    = sc.Run("getStr", dataObj, "date_session")
+casChoisi      = sc.Run("getStr", dataObj, "cas_choisi")
+casCle         = sc.Run("getStr", dataObj, "cas_cle")
+dateEnvoi      = sc.Run("getStr", dataObj, "date_envoi")
+
+Dim tp3Obj
+tp3Obj = dataObj.tp3_meta
+metaIntitule    = sc.Run("getStr", tp3Obj, "intitule")
+metaDescription = sc.Run("getStr", tp3Obj, "description")
+metaLieu        = sc.Run("getStr", tp3Obj, "lieu")
+metaDebut       = sc.Run("getStr", tp3Obj, "debut")
+metaRealise     = sc.Run("getStr", tp3Obj, "realise_par")
+metaVerifie     = sc.Run("getStr", tp3Obj, "verifie_par")
+metaMaj         = sc.Run("getStr", tp3Obj, "maj_par")
+
+If Trim(nom) = "" Then
+    SendJSON False, "Le nom du groupe est obligatoire."
+End If
+
+' --- Sérialisation des réponses et du tableau en JSON texte (stockés en colonnes NVARCHAR(MAX)) ---
+Dim reponsesArr, tableauArr
+Set reponsesArr = sc.Run("getReponsesJSON", dataObj)
+Set tableauArr = sc.Run("getTableauJSON", dataObj)
+
+Dim reponsesJSONStr, tableauJSONStr
+reponsesJSONStr = "["
+Dim i
+For i = 0 To reponsesArr.length - 1
+    If i > 0 Then reponsesJSONStr = reponsesJSONStr & ","
+    reponsesJSONStr = reponsesJSONStr & "{""id"":""" & JSONEscape(reponsesArr.Item(i).id) & _
+        """,""question"":""" & JSONEscape(reponsesArr.Item(i).question) & _
+        """,""reponse"":""" & JSONEscape(reponsesArr.Item(i).reponse) & """}"
+Next
+reponsesJSONStr = reponsesJSONStr & "]"
+
+tableauJSONStr = "["
+For i = 0 To tableauArr.length - 1
+    If i > 0 Then tableauJSONStr = tableauJSONStr & ","
+    tableauJSONStr = tableauJSONStr & "{""etape"":""" & JSONEscape(tableauArr.Item(i).etape) & _
+        """,""risque"":""" & JSONEscape(tableauArr.Item(i).risque) & _
+        """,""mesure"":""" & JSONEscape(tableauArr.Item(i).mesure) & """}"
+Next
+tableauJSONStr = tableauJSONStr & "]"
+
+' --- Connexion et insertion en base ---
+Dim conn
+Set conn = Server.CreateObject("ADODB.Connection")
+
+On Error Resume Next
+conn.Open connString
+If Err.Number <> 0 Then
+    SendJSON False, "Connexion BDD impossible : " & Err.Description
+End If
+On Error Goto 0
+
+' Création de la table si elle n'existe pas encore
+Dim createTableSQL
+createTableSQL = "IF NOT EXISTS (SELECT * FROM sysobjects WHERE name='tp_resultats' AND xtype='U') " & _
+    "CREATE TABLE tp_resultats (" & _
+    "id INT IDENTITY(1,1) PRIMARY KEY, " & _
+    "nom NVARCHAR(255), " & _
+    "date_session NVARCHAR(50), " & _
+    "cas_choisi NVARCHAR(255), " & _
+    "cas_cle NVARCHAR(100), " & _
+    "reponses_json NVARCHAR(MAX), " & _
+    "tp3_intitule NVARCHAR(500), " & _
+    "tp3_description NVARCHAR(1000), " & _
+    "tp3_lieu NVARCHAR(500), " & _
+    "tp3_debut NVARCHAR(50), " & _
+    "tp3_realise_par NVARCHAR(255), " & _
+    "tp3_verifie_par NVARCHAR(255), " & _
+    "tp3_maj_par NVARCHAR(255), " & _
+    "tp3_tableau_json NVARCHAR(MAX), " & _
+    "date_envoi NVARCHAR(50), " & _
+    "date_enregistrement DATETIME DEFAULT GETDATE())"
+
+On Error Resume Next
+conn.Execute createTableSQL
+If Err.Number <> 0 Then
+    SendJSON False, "Création de table impossible : " & Err.Description
+End If
+On Error Goto 0
+
+' Insertion via requête paramétrée (Command) pour éviter les injections SQL
+Dim cmd
+Set cmd = Server.CreateObject("ADODB.Command")
+cmd.ActiveConnection = conn
+cmd.CommandText = "INSERT INTO tp_resultats " & _
+    "(nom, date_session, cas_choisi, cas_cle, reponses_json, tp3_intitule, tp3_description, tp3_lieu, tp3_debut, tp3_realise_par, tp3_verifie_par, tp3_maj_par, tp3_tableau_json, date_envoi) " & _
+    "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"
+cmd.CommandType = 1 ' adCmdText
+
+Dim p
+Set p = cmd.CreateParameter("nom", 202, 1, 255, nom) : cmd.Parameters.Append p
+Set p = cmd.CreateParameter("date_session", 202, 1, 50, dateSession) : cmd.Parameters.Append p
+Set p = cmd.CreateParameter("cas_choisi", 202, 1, 255, casChoisi) : cmd.Parameters.Append p
+Set p = cmd.CreateParameter("cas_cle", 202, 1, 100, casCle) : cmd.Parameters.Append p
+Set p = cmd.CreateParameter("reponses_json", 203, 1, Len(reponsesJSONStr), reponsesJSONStr) : cmd.Parameters.Append p
+Set p = cmd.CreateParameter("tp3_intitule", 202, 1, 500, metaIntitule) : cmd.Parameters.Append p
+Set p = cmd.CreateParameter("tp3_description", 202, 1, 1000, metaDescription) : cmd.Parameters.Append p
+Set p = cmd.CreateParameter("tp3_lieu", 202, 1, 500, metaLieu) : cmd.Parameters.Append p
+Set p = cmd.CreateParameter("tp3_debut", 202, 1, 50, metaDebut) : cmd.Parameters.Append p
+Set p = cmd.CreateParameter("tp3_realise_par", 202, 1, 255, metaRealise) : cmd.Parameters.Append p
+Set p = cmd.CreateParameter("tp3_verifie_par", 202, 1, 255, metaVerifie) : cmd.Parameters.Append p
+Set p = cmd.CreateParameter("tp3_maj_par", 202, 1, 255, metaMaj) : cmd.Parameters.Append p
+Set p = cmd.CreateParameter("tp3_tableau_json", 203, 1, Len(tableauJSONStr), tableauJSONStr) : cmd.Parameters.Append p
+Set p = cmd.CreateParameter("date_envoi", 202, 1, 50, dateEnvoi) : cmd.Parameters.Append p
+
+On Error Resume Next
+cmd.Execute
+If Err.Number <> 0 Then
+    conn.Close
+    SendJSON False, "Erreur lors de l'insertion : " & Err.Description
+End If
+On Error Goto 0
+
+conn.Close
+Set conn = Nothing
+
+SendJSON True, ""
+%>