Restaure index.html supprime par erreur, avec les masquages

Le commit precedent avait supprime index.html au lieu de le modifier.
Ce commit le retablit dans son integralite (429 lignes) avec le
display:none sur la documentation et les rapports de veille.

.gitignore

@@ -1,5 +1,6 @@
 
 .DS_Store
 
-# Contient le mot de passe SQL Server — à éditer uniquement sur bsite.net
+# Contient le mot de passe de la base SQL Server — à créer/éditer uniquement sur
+# le serveur bsite.net à partir de web.config.example (ne jamais versionner)
 exercices/memory-pictogrammes/api/web.config

exercices/Exo_BioCID.html

@@ -406,6 +406,15 @@
   box-sizing: border-box;
 }
 .identity-fields input:focus { outline: none; border-color: var(--amber); background: white; }
+.formateur-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin: 4px 0 2px; }
+.formateur-row { display: flex; gap: 8px; }
+.formateur-btn {
+  flex: 1; font-family: 'DM Sans', sans-serif; font-size: 13.5px;
+  padding: 9px 13px; border: 1px solid var(--border); border-radius: 10px;
+  background: var(--bg); color: var(--text); cursor: pointer; transition: all 0.2s ease;
+}
+.formateur-btn:hover { border-color: var(--amber); }
+.formateur-btn.active { background: var(--amber); border-color: var(--amber); color: #fff; }
 
 /* DECO */
 .deco-circle { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
@@ -492,7 +501,12 @@
     <div class="identity-fields">
       <input type="text" id="idGroupe" placeholder="Nom du groupe / stagiaires (ex : Groupe 3 — Dupont / Martin)" autocomplete="off" oninput="clearGroupeWarning()">
       <input type="date" id="idDate">
-      <input type="text" id="idFormateur" placeholder="Formateur (facultatif)" autocomplete="off">
+      <input type="hidden" id="idFormateur">
+      <div class="formateur-label">Formateur de la session</div>
+      <div class="formateur-row">
+        <button type="button" class="formateur-btn" data-formateur="Nathan" onclick="selectFormateur(this)">Nathan</button>
+        <button type="button" class="formateur-btn" data-formateur="Gauthier" onclick="selectFormateur(this)">Gauthier</button>
+      </div>
     </div>
     <div id="idWarning" style="display:none;margin-top:8px;font-size:12.5px;color:var(--coral);">⚠ Renseignez le nom du groupe pour continuer.</div>
   </div>
@@ -689,6 +703,12 @@ function clearGroupeWarning() {
   if (w) w.style.display = 'none';
 }
 
+function selectFormateur(btn) {
+  document.querySelectorAll('.formateur-btn').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+  document.getElementById('idFormateur').value = btn.dataset.formateur;
+}
+
 function goNext() {
   const cfg = slideConfig[currentSlide];
   if (!cfg || cfg.next == null) return;

exercices/Exo_FDS.html

@@ -647,21 +647,6 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
 .eti-pop .pop-reg { color: var(--text-muted); }
 .eti-pop .pop-close { position: absolute; top: 5px; right: 8px; cursor: pointer; color: var(--text-muted); font-size: 16px; line-height: 1; border: none; background: none; padding: 2px; }
 
-/* Check-list de synthèse (modèle FHER p.15) */
-.checklist-table {
-  width: 100%; max-width: 780px; border-collapse: collapse;
-  background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
-  font-size: 12.5px; margin: 0.25rem 0 1rem;
-}
-.checklist-table th { background: var(--teal-light); color: var(--teal-dark); font-family: 'Syne', sans-serif; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; padding: 10px 12px; text-align: left; border-bottom: 2px solid var(--teal-mid); }
-.checklist-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: top; }
-.checklist-table tr:last-child td { border-bottom: none; }
-.checklist-table td.cl-num { text-align: center; }
-.cl-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #2e7d32; color: #fff; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 10px; }
-.checklist-table strong { color: var(--text); }
-.cl-check { color: #2e7d32; font-weight: 700; }
-.cl-cross { color: #c62828; font-weight: 700; }
-
 @media (max-width: 700px) {
   .lbl-cols { grid-template-columns: 1fr; }
   .lbl-title { font-size: 26px; }
@@ -687,20 +672,6 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
   justify-content: center;
 }
 
-/* ---- SLIDE 7 — récapitulatif : étiquette à gauche, tableau à droite ---- */
-.recap-layout { display: flex; gap: 20px; align-items: flex-start; justify-content: center; width: 100%; max-width: 1120px; }
-.recap-layout #recap-stage { flex: 1 1 0; min-width: 0; max-width: 560px; }
-.recap-layout .checklist-table { flex: 1 1 0; min-width: 0; margin: 0; }
-.recap-layout.animate #recap-stage { animation: recapSlideLeft 0.5s ease both; }
-.recap-layout.animate .checklist-table { animation: recapSlideRight 0.5s ease both; }
-@keyframes recapSlideLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
-@keyframes recapSlideRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
-
-@media (max-width: 1000px) {
-  .recap-layout { flex-direction: column; align-items: center; }
-  .recap-layout #recap-stage { flex: none; max-width: 560px; width: 100%; }
-  .recap-layout .checklist-table { flex: none; width: 100%; max-width: 640px; }
-}
 </style>
 </head>
 <body>
@@ -843,7 +814,7 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
   <p class="slide-intro">L'étiquette est l'interface directe entre le produit et l'utilisateur. Elle communique rapidement les <strong>dangers essentiels</strong>, les <strong>EPI</strong> et les <strong>consignes d'utilisation</strong>.</p>
   <div class="info-card" style="background:var(--teal-light);color:var(--teal-dark);">
     <span>🎯</span>
-    <div>Sur une <strong>étiquette réelle</strong> (produit professionnel DÉS'INFECT), <strong>cliquez la zone</strong> qui répond à chaque question : nom commercial, pictogrammes, mention d'avertissement, phrases H, phrases P (EPI, premiers secours, élimination), contenu net et centre antipoison. Chaque clic ouvre la <strong>justification réglementaire</strong> de la zone.</div>
+    <div>Sur une <strong>étiquette réelle</strong> (produit professionnel DÉS'INFECT), <strong>cliquez la zone</strong> qui répond à chaque question : nom commercial, pictogrammes, mention d'avertissement, phrases H, phrases P (EPI, premiers secours, élimination), contenu net et centre antipoison. La <strong>justification réglementaire</strong> de chaque zone est fournie sur la page de correction de l'exercice.</div>
   </div>
 </div>
 
@@ -926,18 +897,6 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
       <div id="etiquette-result" class="result-message"></div>
     </div>
 
-    <!-- ---- PANNEAU B : synthèse / check-list ---- -->
-    <div id="eti-recap" hidden style="width:100%;display:flex;flex-direction:column;align-items:center;gap:0.75rem;">
-      <div class="section-tag" style="background:var(--teal-light);color:var(--teal-dark);">Check-list d'étiquetage</div>
-      <div class="slide-title">Récapitulatif — l'étiquette annotée</div>
-      <p class="slide-intro">Les 9 zones réglementaires et leurs bonnes réponses, présentées comme la <strong>check-list officielle d'étiquetage des produits biocides</strong> (Guide FHER, p. 15) — un outil réutilisable en conditions réelles.</p>
-
-      <div class="recap-layout" id="recap-layout">
-        <div class="eti-stage" id="recap-stage"></div>
-        <table class="checklist-table" id="checklist-table"></table>
-      </div>
-    </div>
-
   </div>
 </div>
 
@@ -996,7 +955,7 @@ const fdsQuestions = [
 const ftQuestions = [
   { id: 1, text: "Quel est le nom du produit et qui est le fabricant ?", answer: "Description" },
   { id: 2, text: "Sur quelles matières ce produit est-il compatible ?", answer: "Absent" },
-  { id: 3, text: "Quel est (sont) le(s) type(s) de ce produit ?", answer: "Propriétés biocides" },
+  { id: 3, text: "Où se trouve la liste des TP (type de produit) ?", answer: "Propriétés biocides" },
   { id: 4, text: "Quels sont les types de conditionnements disponibles ?", answer: "Conditionnements" },
   { id: 5, text: "Où retrouver les différents modes d'utilisation de ce produit ?", answer: "Utilisations" }
 ];
@@ -1063,16 +1022,13 @@ let etiOrder = [];        // ordre aléatoire des questions
 let etiPos = 0;           // question courante
 let etiAnswers = {};      // { zoneCible : zoneCliquée en 1re tentative } — pour le PDF
 let etiFirstTry = {};     // { zoneCible : true si trouvée sans erreur }
-let etiCurError = false;  // une erreur a-t-elle eu lieu sur la question courante
 let etiInit = false;      // écouteur de clic posé une seule fois
-let etiRecapShown = false;// panneau récapitulatif affiché (slide 7)
 
 function buildEtiquette() {
   etiOrder = shuffleArray(etiZones.map((_, i) => i));
   etiPos = 0;
   etiAnswers = {};
   etiFirstTry = {};
-  etiCurError = false;
 
   const card = document.getElementById('labelCard');
   card.querySelectorAll('.hotspot').forEach(h => h.classList.remove('hs-correct', 'hs-wrong'));
@@ -1080,9 +1036,6 @@ function buildEtiquette() {
   closeEtiPop();
   const r = document.getElementById('etiquette-result');
   r.className = 'result-message'; r.innerHTML = '';
-  etiRecapShown = false;
-  document.getElementById('eti-exercise').style.display = 'flex';
-  document.getElementById('eti-recap').style.display = 'none';
   if (currentSlide === 7) renderBarActions();
 
   if (!etiInit) {
@@ -1110,28 +1063,20 @@ function onEtiClick(e) {
   if (!hs) return;
   const clicked = hs.dataset.zone;
 
-  // Exercice terminé : plus d'interaction (les corrections sont dans la correction générale)
+  // Exercice terminé : plus d'interaction (la correction est sur la page de correction).
   if (etiPos >= etiOrder.length) return;
 
   marquerModifie();
   const target = etiZones[etiOrder[etiPos]];
-  if (clicked === target.zone) {
-    hs.classList.remove('hs-wrong');
-    hs.classList.add('hs-correct');
-    if (etiAnswers[target.zone] === undefined) etiAnswers[target.zone] = clicked;
-    etiFirstTry[target.zone] = !etiCurError;
-    etiPos++;
-    etiCurError = false;
-    renderEtiQuestion();
-    if (etiPos >= etiOrder.length) finishEtiquette();
-  } else {
-    if (etiAnswers[target.zone] === undefined) etiAnswers[target.zone] = clicked; // 1re réponse (erronée) mémorisée
-    etiCurError = true;
-    etiFirstTry[target.zone] = false;
-    hs.classList.remove('hs-wrong'); void hs.offsetWidth; // relance l'animation
-    hs.classList.add('hs-wrong');
-    setTimeout(() => hs.classList.remove('hs-wrong'), 700);
-  }
+
+  // La zone cliquée — bonne ou mauvaise — est enregistrée comme réponse, puis on passe
+  // à la question suivante. Aucun retour de justesse n'est affiché ici : la correction
+  // (étiquette annotée + check-list) est présentée sur la page de correction de l'exercice.
+  etiAnswers[target.zone] = clicked;
+  etiFirstTry[target.zone] = (clicked === target.zone);
+  etiPos++;
+  renderEtiQuestion();
+  if (etiPos >= etiOrder.length) finishEtiquette();
 }
 
 function finishEtiquette() {
@@ -1168,70 +1113,6 @@ function closeEtiPop() {
 
 function resetEtiquette() { buildEtiquette(); }
 
-/* ---- Synthèse : étiquette annotée + check-list ---- */
-function showEtiRecap() {
-  closeEtiPop();
-  const stage = document.getElementById('recap-stage');
-  stage.innerHTML = '';
-
-  // Clone de l'étiquette, toutes zones en « correct » + numéros
-  const clone = document.getElementById('labelCard').cloneNode(true);
-  clone.removeAttribute('id');
-  clone.classList.add('recap');
-  clone.querySelectorAll('.hotspot').forEach(h => {
-    h.classList.remove('hs-wrong');
-    h.classList.add('hs-correct');
-    const idx = etiZones.findIndex(z => z.zone === h.dataset.zone);
-    if (idx >= 0) {
-      const num = document.createElement('b');
-      num.className = 'hs-num';
-      num.textContent = idx + 1;
-      h.insertBefore(num, h.firstChild);
-    }
-  });
-  stage.appendChild(clone);
-
-  // Table check-list
-  const tbl = document.getElementById('checklist-table');
-  let rows = '<thead><tr><th style="width:34px;">N°</th><th>Élément d\'étiquetage</th><th>Base réglementaire</th><th style="width:70px;">Statut</th></tr></thead><tbody>';
-  etiZones.forEach((z, i) => {
-    const ok = etiFirstTry[z.zone];
-    const answered = etiAnswers[z.zone] !== undefined;
-    const statut = ok
-      ? '<span class="cl-check">✓ trouvé</span>'
-      : (answered ? '<span class="cl-cross">✗ à revoir</span>' : '<span class="cl-cross">—</span>');
-    rows += `<tr>
-      <td class="cl-num"><span class="cl-badge">${i + 1}</span></td>
-      <td><strong>${z.label}</strong></td>
-      <td>${z.reg}</td>
-      <td>${statut}</td>
-    </tr>`;
-  });
-  rows += '</tbody>';
-  tbl.innerHTML = rows;
-
-  document.getElementById('eti-exercise').style.display = 'none';
-  document.getElementById('eti-recap').style.display = 'flex';
-  etiRecapShown = true;
-  renderBarActions();
-
-  // Animation : l'étiquette glisse à gauche, le tableau apparaît à sa droite
-  const rl = document.getElementById('recap-layout');
-  if (rl) { rl.classList.remove('animate'); void rl.offsetWidth; rl.classList.add('animate'); }
-
-  const sa = document.querySelector('#slide-7 .scroll-area');
-  if (sa) sa.scrollTop = 0;
-}
-
-function hideEtiRecap() {
-  document.getElementById('eti-recap').style.display = 'none';
-  document.getElementById('eti-exercise').style.display = 'flex';
-  etiRecapShown = false;
-  renderBarActions();
-  const sa = document.querySelector('#slide-7 .scroll-area');
-  if (sa) sa.scrollTop = 0;
-}
-
 /* ---- FT : exercice « relier » ---- */
 const ftConnections = {}; // { qId: valeur de la section reliée }
 let ftDrag = null;        // { qid } pendant un glissement
@@ -1685,8 +1566,8 @@ function renderBarActions() {
   const bar = document.getElementById('barActions');
   if (!bar) return;
   bar.innerHTML = '';
-  // Bouton retour intégré au groupe centré (sauf sur le récapitulatif, qui a son propre retour)
-  if (history.length > 0 && !(currentSlide === 7 && etiRecapShown)) {
+  // Bouton retour intégré au groupe centré
+  if (history.length > 0) {
     barBtn(bar, '← Retour', 'is-secondary', goBack);
   }
   switch (currentSlide) {
@@ -1713,14 +1594,9 @@ function renderBarActions() {
       barBtn(bar, 'Répondre aux questions →', 'is-primary', () => goTo(7));
       break;
     case 7:
-      if (etiRecapShown) {
-        barBtn(bar, '← Retour à l\'exercice', 'is-secondary', hideEtiRecap);
-        barBtn(bar, 'Voir la synthèse générale →', 'is-primary', () => goTo(8));
-      } else {
-        barBtn(bar, '↺ Recommencer', 'is-secondary', resetEtiquette);
-        barBtn(bar, 'Terminer l\'exercice →', 'is-primary', showEtiRecap,
-          { id: 'eti-recap-btn', disabled: etiPos < etiOrder.length });
-      }
+      barBtn(bar, '↺ Recommencer', 'is-secondary', resetEtiquette);
+      barBtn(bar, 'Terminer l\'exercice →', 'is-primary', () => goTo(8),
+        { id: 'eti-recap-btn', disabled: etiPos < etiOrder.length });
       break;
     case 8:
       // Boutons placés sous le tableau comparatif, dans la slide (pas dans la bottom bar)

exercices/TP_Nuisibles.html

@@ -17,7 +17,7 @@
   justify-content: center;
   padding: 2rem;
   padding-top: calc(70px + 2rem);
-  padding-bottom: calc(52px + 2rem);
+  padding-bottom: calc(84px + 2rem);
   opacity: 0;
   transition: opacity 0.4s ease;
   overflow-y: auto;
@@ -38,73 +38,67 @@
   transition: width 0.4s ease;
 }
 
-/* PHASE INDICATOR */
-.phase-badge {
-  position: fixed;
-  top: 80px; right: 16px;
-  font-family: 'Syne', sans-serif;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  padding: 4px 12px;
-  border-radius: 20px;
-  z-index: 100;
-}
-
 /* BOTTOM BAR */
 .bottom-bar {
   position: fixed;
   bottom: 0; left: 0; right: 0;
-  height: 52px;
+  height: 84px;
   background: rgba(250, 238, 218, 0.98);
   border-top: 2px solid var(--amber);
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   padding: 0 20px;
   z-index: 100;
   backdrop-filter: blur(10px);
 }
-
-/* SLIDE NAV */
+.bottom-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.footer-btn {
+  font-family: 'Syne', sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 11px 24px;
+  border-radius: 40px;
+  border: 1.5px solid var(--amber);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  line-height: 1;
+  transition: all 0.2s;
+}
+.footer-btn:hover { transform: translateY(-1px); }
+.footer-btn:active { transform: scale(0.98); }
+.footer-btn.is-primary { background: var(--amber); color: #fff; }
+.footer-btn.is-primary:hover { background: var(--amber-dark); }
+.footer-btn.is-secondary { background: transparent; color: var(--amber-dark); }
+.footer-btn.is-secondary:hover { background: rgba(186,117,23,0.08); }
 .slide-counter {
+  position: absolute;
+  left: 20px;
   font-size: 12px;
   font-family: 'Syne', sans-serif;
   font-weight: 600;
   color: var(--amber-dark);
 }
-
-/* BACK BUTTON */
-.back-btn {
-  background: none;
-  border: 0.5px solid var(--amber);
-  border-radius: 20px;
-  padding: 6px 16px;
-  font-size: 12px;
-  color: var(--amber-dark);
-  cursor: pointer;
-  transition: all 0.2s;
-  font-family: 'DM Sans', sans-serif;
+@media (max-width: 560px) {
+  .slide-counter { display: none; }
 }
-.back-btn:hover { background: rgba(186,117,23,0.08); }
 
 /* FORMATEUR SELECTOR */
 .formateur-btn {
-  font-family: 'Syne', sans-serif;
-  font-size: 14px;
-  font-weight: 600;
-  padding: 10px 24px;
-  border-radius: 30px;
-  border: 1.5px solid var(--border);
-  background: white;
-  color: var(--text-muted);
-  cursor: pointer;
-  transition: all 0.2s;
-  flex: 1;
+  flex: 1; font-family: 'DM Sans', sans-serif; font-size: 13.5px;
+  padding: 9px 13px; border: 1px solid var(--border); border-radius: 10px;
+  background: var(--bg); color: var(--text); cursor: pointer; transition: all 0.2s ease;
 }
-.formateur-btn:hover { border-color: var(--amber); color: var(--amber); }
-.formateur-btn.selected { background: var(--amber-light); border-color: var(--amber); color: var(--amber-dark); font-weight: 700; }
+.formateur-btn:hover { border-color: var(--amber); }
+.formateur-btn.selected { background: var(--amber); border-color: var(--amber); color: #fff; }
 
 /* CARDS & BUTTONS */
 .btn {
@@ -246,52 +240,42 @@
 .q-item { flex-direction: column; align-items: stretch; }
 .q-item .q-head { display: flex; align-items: flex-start; gap: 12px; }
 
-/* IDENTIFICATION SCREEN */
-.id-form {
-  width: 100%;
-  max-width: 420px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  margin: 1.25rem 0;
-}
-.id-field label {
-  display: block;
-  font-family: 'Syne', sans-serif;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--text-muted);
-  margin-bottom: 6px;
-  text-align: left;
-}
-.id-field input {
-  width: 100%;
-  font-family: 'DM Sans', sans-serif;
-  font-size: 15px;
-  padding: 12px 16px;
-  border: 1.5px solid var(--border);
-  border-radius: 10px;
-  background: white;
-  color: var(--text);
-}
-.id-field input:focus {
-  outline: none;
-  border-color: var(--amber);
-}
-/* Carte d'identité encadrée (modèle BioCID) */
-.id-card {
+/* IDENTIFICATION SCREEN — carte modèle BioCID / FDS */
+.identity-card {
   background: white;
   border: 0.5px solid var(--border);
-  border-radius: 16px;
-  padding: 20px 22px;
+  border-radius: 14px;
+  padding: 16px 18px;
   max-width: 460px;
   width: 100%;
   margin: 1.25rem auto;
-  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
+  text-align: left;
 }
-.id-card .id-form { margin: 0; max-width: none; }
+.identity-card .identity-title {
+  font-family: 'Syne', sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--amber-dark);
+  margin-bottom: 10px;
+  display: flex; align-items: center; gap: 6px;
+}
+.identity-fields { display: flex; flex-direction: column; gap: 8px; }
+.identity-fields input {
+  font-family: 'DM Sans', sans-serif;
+  font-size: 13.5px;
+  color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 9px 13px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.identity-fields input:focus { outline: none; border-color: var(--amber); background: white; }
+.formateur-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin: 4px 0 2px; }
+.formateur-row { display: flex; gap: 8px; }
 
 /* TABLE FORM CONTROLS */
 .risk-table input, .risk-table textarea {
@@ -599,7 +583,7 @@
   gap: 12px;
   max-width: 640px;
   width: 100%;
-  margin: 1.5rem 0;
+  margin: 1.5rem auto;
 }
 .final-card {
   background: white;
@@ -631,7 +615,7 @@
 /* SCROLLABLE AREA */
 .scroll-area {
   overflow-y: auto;
-  max-height: calc(100vh - 232px);
+  max-height: calc(100vh - 200px);
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -672,13 +656,14 @@
 <!-- Progress bar -->
 <div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
 
-<!-- Phase badge -->
-<div class="phase-badge" id="phaseBadge" style="display:none"></div>
-
 <!-- Bottom bar -->
 <div class="bottom-bar" id="bottomBar" style="display:none;">
-  <button class="back-btn" id="backBtn" onclick="goBack()" style="display:none;">← Retour</button>
   <div class="slide-counter" id="slideCounter"></div>
+  <div class="bottom-actions">
+    <button class="footer-btn is-secondary" id="backBtn" onclick="goBack()" style="display:none;">← Retour</button>
+    <button class="footer-btn is-secondary" id="footerHintBtn" onclick="showHintCurrent()" style="display:none;">💡 Besoin d'aide ?</button>
+    <button class="footer-btn is-primary" id="footerNextBtn" onclick="goNext()" style="display:none;">Étape suivante →</button>
+  </div>
 </div>
 
 <!-- Modal overlay -->
@@ -691,52 +676,41 @@
   </div>
 </div>
 
-<!-- ======================== SLIDE 0 — IDENTIFICATION ======================== -->
+<!-- ======================== SLIDE 0 — ACCUEIL ======================== -->
 <div class="slide active fade-in" id="slide-0">
-  <div class="deco-circle" style="width:320px;height:320px;background:var(--amber-light);top:-80px;left:-80px;opacity:0.5;"></div>
-  <div style="text-align:center; z-index:1; width:100%;">
-    <div class="section-tag" style="background:var(--amber-light);color:var(--amber-dark);">Avant de commencer</div>
-    <div class="slide-title">Identification du groupe</div>
-    <p class="slide-intro" style="margin:0.5rem auto 0;max-width:420px;">Ces informations permettront au formateur de retrouver vos réponses.</p>
-    <div class="id-card">
-      <div class="id-form">
-        <div class="id-field">
-          <label for="inputNom">Nom du stagiaire ou du groupe</label>
-          <input type="text" id="inputNom" placeholder="Ex : Groupe 3 - Dupont / Martin" autocomplete="off">
-        </div>
-        <div class="id-field">
-          <label for="inputDate">Date de la session</label>
-          <input type="date" id="inputDate">
-        </div>
-        <div class="id-field">
-          <label>Formateur de la session</label>
-          <div style="display:flex;gap:10px;margin-top:2px;">
-            <button type="button" class="formateur-btn" id="btnNathan" onclick="selectFormateur('Nathan')">Nathan</button>
-            <button type="button" class="formateur-btn" id="btnGauthier" onclick="selectFormateur('Gauthier')">Gauthier</button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div id="idError" style="color:var(--coral);font-size:13px;margin-bottom:0.5rem;display:none;">Merci de renseigner au moins le nom du groupe.</div>
-    <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
-      <button class="btn btn-teal" onclick="confirmIdentite()">Continuer →</button>
-      <a href="corriger-exercice.html?exo=tp" class="btn btn-outline btn-teal">Corriger</a>
-    </div>
+  <div class="deco-circle" style="width:400px;height:400px;background:var(--amber-light);top:-100px;right:-80px;opacity:0.6;"></div>
+  <div class="deco-circle" style="width:200px;height:200px;background:var(--amber-light);bottom:60px;left:-60px;opacity:0.5;"></div>
+  <div style="text-align:center;">
+    <div class="hero-label">Certibiocide — Travaux pratiques</div>
+    <div class="hero-title">Étude de cas<br>Nuisibles</div>
+    <p class="hero-sub">Votre mission, si vous l'acceptez : maîtriser l'identification, le traitement et la sécurité face aux nuisibles.</p>
+    <button class="btn btn-amber" onclick="goTo(1)">Démarrer la mission →</button>
   </div>
 </div>
 
-<!-- ======================== SLIDE 1 — ACCUEIL ======================== -->
+<!-- ======================== SLIDE 1 — CONTEXTE & IDENTIFICATION ======================== -->
 <div class="slide" id="slide-1">
-  <div class="deco-circle" style="width:400px;height:400px;background:var(--amber-light);top:-100px;right:-80px;opacity:0.6;"></div>
-  <div class="deco-circle" style="width:200px;height:200px;background:var(--amber-light);bottom:60px;left:-60px;opacity:0.5;"></div>
+  <div class="deco-circle" style="width:300px;height:300px;background:var(--amber-light);top:-60px;left:-60px;opacity:0.4;"></div>
   <div class="section-tag" style="background:var(--amber-light);color:var(--amber-dark);">Avant de commencer</div>
-  <div class="slide-title">Certibiocide — Travaux pratiques</div>
-  <p class="slide-intro">Votre mission, si vous l'acceptez : maîtriser l'identification, le traitement et la sécurité face aux nuisibles.</p>
-  <div class="info-card">
+  <div class="slide-title">Contexte & accès</div>
+  <p class="slide-intro">3 travaux pratiques vous attendent : protocole d'intervention, recherche produit sur BioCID, puis analyse de risques. Ces informations permettront au formateur de retrouver vos réponses.</p>
+  <div class="info-card" style="max-width:620px;">
     <span>🎯</span>
-    <div>3 travaux pratiques vous attendent : définir un <strong>protocole d'intervention</strong>, trouver votre <strong>produit sur BioCID</strong>, puis réaliser l'<strong>analyse de risques</strong>.</div>
+    <div>Vous allez définir un <strong>protocole d'intervention</strong>, trouver votre <strong>produit sur BioCID</strong>, puis réaliser l'<strong>analyse de risques</strong>.</div>
+  </div>
+  <div class="identity-card" style="max-width:620px;margin-top:0.5rem;">
+    <div class="identity-title">👥 Identification du groupe</div>
+    <div class="identity-fields">
+      <input type="text" id="inputNom" placeholder="Nom du groupe / stagiaires (ex : Groupe 3 — Dupont / Martin)" autocomplete="off">
+      <input type="date" id="inputDate">
+      <div class="formateur-label">Formateur de la session</div>
+      <div class="formateur-row">
+        <button type="button" class="formateur-btn" id="btnNathan" onclick="selectFormateur('Nathan')">Nathan</button>
+        <button type="button" class="formateur-btn" id="btnGauthier" onclick="selectFormateur('Gauthier')">Gauthier</button>
+      </div>
+    </div>
+    <div id="idError" style="color:var(--coral);font-size:13px;margin-top:8px;display:none;">Merci de renseigner au moins le nom du groupe.</div>
   </div>
-  <button class="btn btn-teal" style="margin-top:1.5rem;" onclick="goTo(2)">Démarrer la mission →</button>
 </div>
 
 <!-- ======================== SLIDE 2 — CHOIX DU CAS ======================== -->
@@ -776,9 +750,6 @@
       <div class="case-sub">Camping</div>
     </div>
   </div>
-  <div class="actions-row">
-    <button class="btn btn-teal" id="btnConfirmCase" onclick="goTo(3)" style="display:none">Confirmer le choix →</button>
-  </div>
 </div>
 
 <!-- ======================== SLIDE 3 — CONSIGNES ======================== -->
@@ -806,7 +777,6 @@
     <span>💡</span>
     <div>À tout moment, cliquez sur <strong>« Besoin d'aide ? »</strong> pour accéder à un indice. Le formateur corrigera à l'oral en fin de séance.</div>
   </div>
-  <button class="btn btn-teal" onclick="goTo(4)">Commencer le TP 1 →</button>
 </div>
 
 <!-- ======================== SLIDE 4 — TP1 INTRO ======================== -->
@@ -824,7 +794,6 @@
     <div class="step-pill">2. Intervention</div>
     <div class="step-pill">3. Évaluation</div>
   </div>
-  <button class="btn btn-amber" onclick="goTo(5)">Commencer →</button>
 </div>
 
 <!-- ======================== SLIDE 5 — TP1 PREVENTION ======================== -->
@@ -865,10 +834,6 @@
         <textarea class="answer-field" id="ans_prevention_4" placeholder="Votre réponse…" data-question="Éléments observés / preuve de présence du nuisible"></textarea>
       </li>
     </ul>
-    <div class="actions-row">
-      <button class="hint-btn" onclick="showHint('prevention')">💡 Besoin d'aide ?</button>
-      <button class="btn btn-amber" onclick="goTo(6)">Étape suivante →</button>
-    </div>
   </div>
 </div>
 
@@ -903,10 +868,6 @@
         <textarea class="answer-field" id="ans_intervention_3" placeholder="Votre réponse…" data-question="Type de produit (TP) et mode de traitement"></textarea>
       </li>
     </ul>
-    <div class="actions-row">
-      <button class="hint-btn" onclick="showHint('intervention')">💡 Besoin d'aide ?</button>
-      <button class="btn btn-amber" onclick="goTo(7)">Étape suivante →</button>
-    </div>
   </div>
 </div>
 
@@ -937,10 +898,6 @@
     <div style="background:var(--amber-light);border-radius:12px;padding:14px 18px;max-width:680px;width:100%;font-size:13px;color:var(--amber-dark);margin:0.75rem 0;">
       ✅ <strong>TP 1 terminé !</strong> Préparez-vous à identifier le produit adapté à votre cas sur biocid-anses.fr.
     </div>
-    <div class="actions-row">
-      <button class="hint-btn" onclick="showHint('evaluation')">💡 Besoin d'aide ?</button>
-      <button class="btn btn-coral" onclick="goTo(8)">Passer au TP 2 →</button>
-    </div>
   </div>
 </div>
 
@@ -962,7 +919,6 @@
     </div>
     <a href="https://biocid-anses.fr" target="_blank" class="resource-link">Ouvrir le site ↗</a>
   </div>
-  <button class="btn btn-coral" onclick="goTo(9)">Commencer →</button>
 </div>
 
 <!-- ======================== SLIDE 9 — TP2 FDS & AMM ======================== -->
@@ -1003,10 +959,6 @@
         <textarea class="answer-field" id="ans_fds_4" placeholder="Votre réponse…" data-question="Risques pour la santé"></textarea>
       </li>
     </ul>
-    <div class="actions-row">
-      <button class="hint-btn" onclick="showHint('fds')">💡 Besoin d'aide ?</button>
-      <button class="btn btn-coral" onclick="goTo(10)">Partie suivante →</button>
-    </div>
   </div>
 </div>
 
@@ -1051,10 +1003,6 @@
     <div style="background:var(--amber-light);border-radius:12px;padding:14px 18px;max-width:680px;width:100%;font-size:13px;color:var(--amber-dark);margin:0.75rem 0;">
       ✅ <strong>TP 2 terminé !</strong> Passez maintenant à l'analyse de risques complète.
     </div>
-    <div class="actions-row">
-      <button class="hint-btn" onclick="showHint('epi')">💡 Besoin d'aide ?</button>
-      <button class="btn btn-purple" onclick="goTo(11)">Passer au TP 3 →</button>
-    </div>
   </div>
 </div>
 
@@ -1071,9 +1019,6 @@
     <div class="pyr-level" style="width:320px;background:#D85A30;">Communication</div>
     <div class="pyr-level" style="width:360px;background:#BA7517;">EPI (dernier recours)</div>
   </div>
-  <div class="actions-row" style="margin-top:1rem;">
-    <button class="btn btn-purple" onclick="goTo(12)">Remplir le tableau →</button>
-  </div>
 </div>
 
 <!-- ======================== SLIDE 12 — TP3 TABLEAU ======================== -->
@@ -1142,10 +1087,6 @@
     <div style="background:var(--amber-light);border-radius:12px;padding:14px 18px;max-width:780px;width:100%;font-size:13px;color:var(--amber-dark);margin:0.25rem 0;">
       ✅ <strong>TP 3 terminé !</strong> Présentez vos réponses au formateur pour la correction.
     </div>
-    <div class="actions-row">
-      <button class="hint-btn" onclick="showHint('analyse')">💡 Aide générale</button>
-      <button class="btn btn-blue" onclick="goTo(13)">Terminer la mission →</button>
-    </div>
   </div>
 </div>
 
@@ -1175,15 +1116,10 @@
         <div class="final-card-sub">Analyse de risques</div>
       </div>
     </div>
-    <div class="submit-zone">
-      <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;">
-        <button class="btn btn-teal" onclick="exporterPDF()">⬇ Télécharger en PDF</button>
-        <a href="corriger-exercice.html?exo=tp" class="btn btn-outline btn-teal">Corriger</a>
-      </div>
-    </div>
-    <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:0.75rem;">
-      <a href="https://biocid-anses.fr" target="_blank" class="btn btn-outline btn-teal" style="font-size:13px;padding:10px 20px;">biocid-anses.fr ↗</a>
-      <button class="btn btn-teal" onclick="restartAll()">↺ Recommencer depuis le début</button>
+    <div class="actions-row">
+      <button class="btn btn-amber" onclick="exporterPDF()">⬇ Télécharger mes réponses (PDF)</button>
+      <a href="corriger-exercice.html?exo=tp" class="btn btn-outline btn-teal">✔ Corriger un rendu</a>
+      <button class="btn btn-outline btn-teal" onclick="restartAll()">↺ Recommencer</button>
     </div>
   </div>
 </div>
@@ -1196,6 +1132,22 @@ const totalSlides = 13;
 const selectedCase = { key: '', icon: '', title: '', desc: '' };
 const stagiaire = { nom: '', date: '', formateur: '' };
 
+// Configuration des boutons du footer par slide (modèle BioCID)
+const slideConfig = {
+  1:  { next: 2,  nextLabel: 'Continuer →' },
+  2:  { next: 3,  nextLabel: 'Confirmer le choix →' },
+  3:  { next: 4,  nextLabel: 'Commencer le TP 1 →' },
+  4:  { next: 5,  nextLabel: 'Commencer →' },
+  5:  { next: 6,  nextLabel: 'Étape suivante →', hint: 'prevention' },
+  6:  { next: 7,  nextLabel: 'Étape suivante →', hint: 'intervention' },
+  7:  { next: 8,  nextLabel: 'Passer au TP 2 →', hint: 'evaluation' },
+  8:  { next: 9,  nextLabel: 'Commencer →' },
+  9:  { next: 10, nextLabel: 'Partie suivante →', hint: 'fds' },
+  10: { next: 11, nextLabel: 'Passer au TP 3 →', hint: 'epi' },
+  11: { next: 12, nextLabel: 'Remplir le tableau →' },
+  12: { next: 13, nextLabel: 'Terminer la mission →', hint: 'analyse' }
+};
+
 const hints = {
   prevention: {
     icon: '💡',
@@ -1282,11 +1234,28 @@ function goTo(n) {
   currentSlide = n;
   next.style.display = 'flex';
   setTimeout(() => { next.classList.add('active', 'fade-in'); }, 10);
+  const sa = next.querySelector('.scroll-area');
+  if (sa) sa.scrollTop = 0;
   if (n === 13) setTimeout(launchConfetti, 200);
   updateUI();
   updateCaseBanners();
 }
 
+function goNext() {
+  const cfg = slideConfig[currentSlide];
+  if (!cfg || cfg.next == null) return;
+  // Slide 1 : validation du nom du groupe avant de continuer
+  if (currentSlide === 1) { confirmIdentite(); return; }
+  // Slide 2 : un cas doit être sélectionné
+  if (currentSlide === 2 && !selectedCase.key) return;
+  goTo(cfg.next);
+}
+
+function showHintCurrent() {
+  const cfg = slideConfig[currentSlide];
+  if (cfg && cfg.hint) showHint(cfg.hint);
+}
+
 function goBack() {
   if (history.length === 0) return;
   const prev = history.pop();
@@ -1311,26 +1280,19 @@ function updateUI() {
   if (bottomBar) bottomBar.style.display = currentSlide === 0 ? 'none' : 'flex';
 
   const backBtn = document.getElementById('backBtn');
-  backBtn.style.display = history.length > 0 ? 'block' : 'none';
+  backBtn.style.display = history.length > 0 ? 'inline-flex' : 'none';
 
-  const badge = document.getElementById('phaseBadge');
-  if (currentSlide === 0 || currentSlide === 1 || currentSlide === 2 || currentSlide === 3 || currentSlide === 13) {
-    badge.style.display = 'none';
-  } else if (currentSlide >= 4 && currentSlide <= 7) {
-    badge.style.display = 'block';
-    badge.style.background = 'var(--amber-light)';
-    badge.style.color = 'var(--amber-dark)';
-    badge.textContent = 'TP 1 — Protocole';
-  } else if (currentSlide >= 8 && currentSlide <= 10) {
-    badge.style.display = 'block';
-    badge.style.background = 'var(--coral-light)';
-    badge.style.color = 'var(--coral)';
-    badge.textContent = 'TP 2 — Produit';
-  } else if (currentSlide >= 11 && currentSlide <= 12) {
-    badge.style.display = 'block';
-    badge.style.background = 'var(--amber-light)';
-    badge.style.color = 'var(--amber-dark)';
-    badge.textContent = 'TP 3 — Risques';
+  const cfg = slideConfig[currentSlide] || {};
+  const hintBtn = document.getElementById('footerHintBtn');
+  const nextBtn = document.getElementById('footerNextBtn');
+  hintBtn.style.display = cfg.hint ? 'inline-flex' : 'none';
+  if (cfg.next != null) {
+    // Slide 2 : le bouton n'apparaît qu'une fois le cas choisi
+    const gated = currentSlide === 2 && !selectedCase.key;
+    nextBtn.style.display = gated ? 'none' : 'inline-flex';
+    nextBtn.textContent = cfg.nextLabel;
+  } else {
+    nextBtn.style.display = 'none';
   }
 }
 
@@ -1342,7 +1304,7 @@ function selectCase(key, icon, title, desc) {
   selectedCase.desc = desc;
   document.querySelectorAll('.case-card').forEach(c => c.classList.remove('selected'));
   event.currentTarget.classList.add('selected');
-  document.getElementById('btnConfirmCase').style.display = 'inline-flex';
+  updateUI();
 }
 
 function updateCaseBanners() {
@@ -1412,7 +1374,7 @@ function confirmIdentite() {
   document.getElementById('idError').style.display = 'none';
   stagiaire.nom = nom;
   stagiaire.date = date || new Date().toISOString().slice(0, 10);
-  goTo(1);
+  goTo(2);
 }
 
 /* ======================== TABLEAU TP3 — LIGNES DYNAMIQUES ======================== */

exercices/corriger-exercice.html

@@ -319,6 +319,57 @@ h1 {
   vertical-align: top;
 }
 .annex th { background: var(--amber-light); font-family: 'Syne', sans-serif; font-size: 12px; }
+
+/* ======= Corrigé de référence — étiquette annotée (repris du TD FDS) ======= */
+.recap-intro { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin: 0 0 16px; }
+.recap-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
+.recap-stage { flex: 1 1 320px; min-width: 0; max-width: 560px; }
+.recap-layout .checklist-table { flex: 1 1 320px; min-width: 0; margin: 0; }
+
+.label-card {
+  position: relative;
+  width: 100%; max-width: 640px;
+  background: #fff; color: #1a1a18;
+  border: 1px solid #d9d2c4; border-radius: 6px;
+  padding: 16px 18px 0; overflow: hidden;
+  font-family: 'DM Sans', sans-serif; font-size: 10.5px; line-height: 1.42;
+  box-shadow: 0 8px 30px rgba(0,0,0,0.10);
+}
+.lbl-top { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #1a1a18; padding-bottom: 6px; margin-bottom: 10px; }
+.lbl-flag { font-size: 20px; }
+.lbl-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(24px, 5vw, 40px); letter-spacing: -0.01em; margin: 0; }
+.lbl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+.lbl-h { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 2px; }
+.lbl-block { margin-bottom: 9px; }
+.lbl-small { color: #555; font-size: 9.5px; line-height: 1.6; margin-top: 4px; }
+.lbl-bottom { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 14px; margin-top: 4px; padding: 10px 0; }
+.lbl-net { display: flex; flex-direction: column; gap: 2px; }
+.lbl-net span { font-size: 10px; }
+.lbl-net strong { font-family: 'Syne', sans-serif; font-size: 22px; line-height: 1; }
+.lbl-barcode { height: 42px; align-self: end; min-width: 90px; background: repeating-linear-gradient(90deg, #1a1a18 0 2px, #fff 2px 4px, #1a1a18 4px 5px, #fff 5px 9px); }
+.lbl-picto-wrap { display: flex; align-items: center; gap: 8px; }
+.pictos { display: flex; gap: 6px; align-items: center; }
+.ghs-img { width: 42px; height: 42px; object-fit: contain; display: block; }
+.lbl-danger { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 15px; color: #1a1a18; letter-spacing: 0.02em; }
+.lbl-footer { margin: 6px -18px 0; padding: 8px 18px; background: #2b2b28; color: #e8e2d5; text-align: center; font-size: 9px; line-height: 1.5; }
+
+.hotspot { position: relative; border-radius: 5px; }
+span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
+.hotspot.hs-correct { background: rgba(46,125,50,0.14); outline: 1.5px solid #2e7d32; }
+.hs-num { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #2e7d32; color: #fff; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 9px; margin-right: 3px; vertical-align: middle; }
+
+.checklist-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: 12.5px; }
+.checklist-table th { background: var(--teal-light); color: var(--teal); font-family: 'Syne', sans-serif; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; padding: 10px 12px; text-align: left; border-bottom: 2px solid var(--teal); }
+.checklist-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: top; }
+.checklist-table tr:last-child td { border-bottom: none; }
+.checklist-table td.cl-num { text-align: center; }
+.cl-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #2e7d32; color: #fff; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 10px; }
+.checklist-table strong { color: var(--text); }
+
+@media (max-width: 640px) {
+  .lbl-cols { grid-template-columns: 1fr; }
+  .lbl-title { font-size: 26px; }
+}
 </style>
 </head>
 <body>
@@ -618,6 +669,109 @@ function fdsExpectedLabel(part, q) {
   return parts[0] === "absent" ? "Absent de la FDS" : "Rubrique " + parts[0];
 }
 
+/* ---- Corrigé de référence : l'étiquette annotée + check-list (repris du TD) ---- */
+const ETI_ZONES = [
+  { zone: "z-nom", label: "Nom commercial",
+    reg: "Obligation CLP : le nom commercial doit être identique à celui figurant sur la FDS (Guide FHER, Partie 3 — I.2)." },
+  { zone: "z-picto", label: "Pictogrammes de danger",
+    reg: "CLP : pictogrammes aux dimensions requises, regroupés avec la mention d'avertissement et les phrases H/P, se détachant nettement du fond (Partie 3 — I.5)." },
+  { zone: "z-mention", label: "Mention d'avertissement",
+    reg: "CLP : « Danger » ou « Attention », disposée dans l'encart d'étiquetage avec pictogrammes et phrases H/P (Partie 3 — I.5)." },
+  { zone: "z-h", label: "Mentions de danger (phrases H)",
+    reg: "CLP : les phrases H décrivent la nature du danger ; regroupées dans l'encart d'étiquetage (Partie 3 — I.5)." },
+  { zone: "z-p-epi", label: "Conseils de prudence — EPI",
+    reg: "CLP : conseils de prudence P (ici P280). Six conseils P au maximum, sauf si la nature et la gravité des dangers l'exigent (CLP Art. 28-3) — Partie 3, I.5." },
+  { zone: "z-p-secours", label: "Premiers secours (phrases P)",
+    reg: "BPR : indications relatives aux premiers soins (Partie 3 — II.8), traduites par les conseils P 3xx (contact, ingestion, inhalation)." },
+  { zone: "z-p-elim", label: "Élimination du produit et de l'emballage",
+    reg: "BPR : instructions pour l'élimination en toute sécurité du produit et de son emballage, le cas échéant avec interdiction de le réutiliser (Partie 3 — II.10). Ici P501." },
+  { zone: "z-net", label: "Contenu net",
+    reg: "Quantité nette de produit contenue dans l'emballage — mention générale du pavé d'information produit." },
+  { zone: "z-antipoison", label: "Centre antipoison / n° d'urgence",
+    reg: "Coordonnées d'urgence complétant les instructions de premiers soins (Partie 3 — II.8) ; les mélanges dangereux sont déclarés aux centres antipoison (annexe VIII du CLP)." },
+];
+
+const ETI_LABEL_CARD = `
+  <div class="label-card recap">
+    <div class="lbl-top">
+      <span class="lbl-flag">🇫🇷</span>
+      <span class="hotspot" data-zone="z-nom"><span class="lbl-title">DÉS'INFECT</span></span>
+    </div>
+    <div class="lbl-cols">
+      <div class="lbl-col">
+        <div class="lbl-block"><div class="lbl-h">Propriétés :</div>Désinfecte et désodorise les sanitaires. Produit strictement destiné à un usage professionnel.</div>
+        <div class="lbl-block"><div class="lbl-h">Mode d'emploi :</div>Concentré à diluer : 5 % pour une activité fongicide, 1 % pour une activité bactéricide. Pulvériser sur les parois, laisser agir 5 à 15 min, rincer à l'eau claire. Type de formulation : concentré soluble (SL). Utilisable en TP2.</div>
+        <div class="lbl-small">UFI : 1234-1234-1234-1234<br>Date de péremption : MM/AAAA<br>N° LOT : 123456</div>
+      </div>
+      <div class="lbl-col">
+        <div class="lbl-block"><div class="lbl-h">Substances actives :</div>Chlorure de didécyldiméthylammonium (N°CAS 7173-51-5) à 75 g/kg ; acide glycolique (CAS 79-14-1) à 35 g/kg.</div>
+        <div class="lbl-block">
+          <div class="lbl-h">Précautions d'emploi :</div>
+          <span>Produit strictement professionnel (FR) — Lire le mode d'emploi ci-joint avant l'emploi. </span>
+          <span class="hotspot" data-zone="z-antipoison">Formule déposée au centre anti-poison de Nancy : 03 83 22 50 50.</span>
+          <span> </span>
+          <span class="hotspot" data-zone="z-h">H302 Nocif en cas d'ingestion. H314 Provoque de graves brûlures de la peau et des lésions oculaires. H410 Très toxique pour les organismes aquatiques, entraîne des effets néfastes à long terme.</span>
+          <span> </span>
+          <span class="hotspot" data-zone="z-p-epi">P280 Porter des gants de protection, des vêtements de protection et un équipement de protection du visage.</span>
+          <span> </span>
+          <span class="hotspot" data-zone="z-p-secours">P301+P330+P331 EN CAS D'INGESTION : rincer la bouche, ne pas faire vomir. P305+P351+P338 EN CAS DE CONTACT AVEC LES YEUX : rincer avec précaution à l'eau pendant plusieurs minutes. P310 Appeler immédiatement un CENTRE ANTIPOISON ou un médecin.</span>
+          <span> </span>
+          <span class="hotspot" data-zone="z-p-elim">P501 Éliminer le contenu / le récipient dans un point de collecte des déchets spéciaux ou dangereux.</span>
+        </div>
+      </div>
+    </div>
+    <div class="lbl-bottom">
+      <span class="hotspot" data-zone="z-net">
+        <span class="lbl-net"><span>Volume net :</span><strong>5 L</strong></span>
+      </span>
+      <div class="lbl-barcode" aria-hidden="true"></div>
+      <div class="lbl-picto-wrap">
+        <span class="hotspot" data-zone="z-picto">
+          <span class="pictos">
+            <img class="ghs-img" src="../data/ghs09-environnement.jpg" alt="Pictogramme SGH09 — danger pour le milieu aquatique">
+            <img class="ghs-img" src="../data/ghs05-corrosif.jpg" alt="Pictogramme SGH05 — corrosif">
+            <img class="ghs-img" src="../data/ghs07-nocif.jpg" alt="Pictogramme SGH07 — nocif / irritant">
+          </span>
+        </span>
+        <span class="hotspot" data-zone="z-mention"><span class="lbl-danger">DANGER</span></span>
+      </div>
+    </div>
+    <div class="lbl-footer">FHER — 2, rue de Sèze, 75009 Paris — Tél. 01 23 45 67 89</div>
+  </div>`;
+
+// Construit le corrigé de référence : étiquette annotée (zones numérotées) + check-list réglementaire.
+function buildEtiquetteRecapHtml() {
+  const wrap = document.createElement("div");
+  wrap.innerHTML = ETI_LABEL_CARD;
+  const card = wrap.querySelector(".label-card");
+  card.querySelectorAll(".hotspot").forEach(h => {
+    h.classList.add("hs-correct");
+    const idx = ETI_ZONES.findIndex(z => z.zone === h.dataset.zone);
+    if (idx >= 0) {
+      const num = document.createElement("b");
+      num.className = "hs-num";
+      num.textContent = idx + 1;
+      h.insertBefore(num, h.firstChild);
+    }
+  });
+
+  let rows = '<thead><tr><th style="width:34px;">N°</th><th>Élément d\'étiquetage</th><th>Base réglementaire</th></tr></thead><tbody>';
+  ETI_ZONES.forEach((z, i) => {
+    rows += `<tr>
+      <td class="cl-num"><span class="cl-badge">${i + 1}</span></td>
+      <td><strong>${escapeHtml(z.label)}</strong></td>
+      <td>${escapeHtml(z.reg)}</td>
+    </tr>`;
+  });
+  rows += "</tbody>";
+
+  return `<p class="recap-intro">Les 9 zones réglementaires et leurs bonnes réponses, présentées comme la <strong>check-list officielle d'étiquetage des produits biocides</strong> (Guide FHER, p. 15) — un outil réutilisable en conditions réelles.</p>
+    <div class="recap-layout">
+      <div class="recap-stage">${card.outerHTML}</div>
+      <table class="checklist-table">${rows}</table>
+    </div>`;
+}
+
 function parseFds(raw) {
   let clean = flatten(raw);
   clean = clean.replace(/FDS, FT (&|&amp;) Étiquettes\s*[—–-]\s*Réponses\s*\([^)]*\)/gi, " ").replace(/\s+/g, " ").trim();
@@ -644,7 +798,12 @@ function parseFds(raw) {
     }),
   }));
 
-  return { title: "FDS, FT & Étiquettes — Correction du rendu", meta, groups, scored: true };
+  const annexes = [{
+    title: "Récapitulatif — l'étiquette annotée (corrigé de référence)",
+    html: buildEtiquetteRecapHtml(),
+  }];
+
+  return { title: "FDS, FT & Étiquettes — Correction du rendu", meta, groups, scored: true, annexes };
 }
 
 /* ======================= EXERCICE 3 — TP NUISIBLES ======================= */

exercices/memory-pictogrammes/api/README.md

@@ -0,0 +1,55 @@
+# API du classement Memory (ASP.NET + SQL Server)
+
+Petit service **ASP.NET (C#) + SQL Server** qui héberge en ligne le
+**classement partagé** du jeu Memory. Tous les joueurs enregistrent leurs
+scores au même endroit et voient le même top 10 par mode (facile / normal /
+difficile).
+
+> Adapté à l'hébergement **FreeASPHosting.net / bsite.net** (Windows, IIS,
+> base MSSQL 2016). Le fichier `scores.ashx` est compilé au vol par IIS :
+> **aucune étape de build**, il suffit de le déposer.
+
+## Contenu
+
+| Fichier | Rôle |
+|---|---|
+| `scores.ashx` | Point d'entrée de l'API (GET pour lire, POST pour enregistrer). Crée la table automatiquement au premier appel. |
+| `web.config.example` | Modèle de configuration à copier en `web.config`. |
+| `web.config` | **À créer sur le serveur** avec le mot de passe SQL Server (clé `MemoryDb`). Non versionné. |
+| `README.md` | Ce fichier. |
+
+## Installation sur bsite.net
+
+1. **Récupérer le mot de passe** de la base dans le panneau
+   *Manage Databases*. La base existe déjà :
+   - Serveur : `sql.bsite.net\MSSQL2016`
+   - Base / utilisateur : `nextgnformation_reponses_exercices`
+
+2. **Créer `web.config`** à partir du modèle (`cp web.config.example web.config`),
+   puis remplacer `VOTRE_MOT_DE_PASSE` par le mot de passe réel dans la clé
+   `MemoryDb`.
+
+3. **Déposer le dossier `api/`** via *My Files*, au même endroit que
+   `memory.html` (chemin attendu par le jeu :
+   `exercices/memory-pictogrammes/api/scores.ashx`).
+
+4. C'est prêt : au premier score enregistré (ou premier appel GET), la table
+   `memory_scores` est créée automatiquement.
+
+## Vérification rapide
+
+- Lecture du classement :
+  `GET https://nextgnformation.bsite.net/exercices/memory-pictogrammes/api/scores.ashx?difficulty=all`
+  doit renvoyer `{"ok":true,"scores":[...]}`.
+
+- Seuls les 10 meilleurs de chaque mode sont conservés : après chaque
+  enregistrement, les scores hors top 10 du mode concerné sont supprimés.
+
+## Points d'attention
+
+- **Ne poussez jamais `web.config` avec le vrai mot de passe dans un dépôt
+  public.** Éditez-le directement sur le serveur via *My Files*.
+- Les statistiques personnelles (« Vos statistiques ») restent stockées
+  localement dans le navigateur de chaque joueur ; seul le classement est en ligne.
+- Le score étant calculé côté navigateur, l'API valide les types et les bornes
+  mais ne garantit pas l'absence de triche (recalcul serveur possible plus tard).

exercices/memory-pictogrammes/api/scores.ashx

@@ -0,0 +1,329 @@
+<%@ WebHandler Language="C#" Class="ScoresHandler" %>
+/*
+ * API du classement Memory (pictogrammes de sécurité) — ASP.NET + SQL Server.
+ *
+ *   GET  scores.ashx?difficulty=easy|normal|hard|all[&limit=10]
+ *        -> renvoie le classement (top N) trié par score décroissant.
+ *
+ *   POST scores.ashx   (corps JSON)
+ *        { playerName, userId, score, moves, timeSeconds, difficulty, isPerfect }
+ *        -> enregistre le score, ne conserve que le top N par difficulté,
+ *           renvoie { ok, saved, rank, isTop }.
+ *
+ * Seul le top N (défaut 10) de chaque mode est conservé : les scores plus
+ * faibles sont supprimés après chaque insertion.
+ *
+ * Fichier compilé au vol par IIS : il suffit de le déposer, aucune build.
+ * La chaîne de connexion est lue dans web.config (clé "MemoryDb").
+ */
+
+using System;
+using System.Collections.Generic;
+using System.Data;
+using System.Data.SqlClient;
+using System.IO;
+using System.Text;
+using System.Web;
+using System.Web.Configuration;
+using System.Web.Script.Serialization;
+
+public class ScoresHandler : IHttpHandler
+{
+    static readonly string[] Difficulties = { "easy", "normal", "hard" };
+    const int TopN = 10;
+
+    public bool IsReusable { get { return false; } }
+
+    public void ProcessRequest(HttpContext ctx)
+    {
+        ctx.Response.ContentType = "application/json; charset=utf-8";
+        ctx.Response.AddHeader("X-Content-Type-Options", "nosniff");
+
+        var connString = WebConfigurationManager.ConnectionStrings["MemoryDb"] != null
+            ? WebConfigurationManager.ConnectionStrings["MemoryDb"].ConnectionString
+            : null;
+
+        if (string.IsNullOrEmpty(connString))
+        {
+            Fail(ctx, 500, "Configuration manquante (connectionString 'MemoryDb' dans web.config).");
+            return;
+        }
+
+        try
+        {
+            using (var conn = new SqlConnection(connString))
+            {
+                conn.Open();
+                EnsureTable(conn);
+
+                if (ctx.Request.HttpMethod == "GET")
+                {
+                    HandleGet(ctx, conn);
+                }
+                else if (ctx.Request.HttpMethod == "POST")
+                {
+                    HandlePost(ctx, conn);
+                }
+                else
+                {
+                    ctx.Response.StatusCode = 405;
+                    ctx.Response.AddHeader("Allow", "GET, POST");
+                    Write(ctx, new Dictionary<string, object> {
+                        { "ok", false }, { "error", "Méthode non autorisée." }
+                    });
+                }
+            }
+        }
+        catch (Exception)
+        {
+            Fail(ctx, 500, "Erreur serveur.");
+        }
+    }
+
+    // --- Création de la table si besoin -------------------------------------
+    void EnsureTable(SqlConnection conn)
+    {
+        const string sql =
+            "IF NOT EXISTS (SELECT 1 FROM sys.tables WHERE name = 'memory_scores') " +
+            "CREATE TABLE memory_scores (" +
+            "  id INT IDENTITY(1,1) PRIMARY KEY," +
+            "  player_name NVARCHAR(40) NOT NULL," +
+            "  user_id NVARCHAR(64) NOT NULL," +
+            "  score INT NOT NULL," +
+            "  moves INT NOT NULL," +
+            "  time_seconds INT NOT NULL," +
+            "  difficulty NVARCHAR(16) NOT NULL," +
+            "  is_perfect BIT NOT NULL DEFAULT 0," +
+            "  created_at DATETIME NOT NULL" +
+            ");";
+        using (var cmd = new SqlCommand(sql, conn)) { cmd.ExecuteNonQuery(); }
+    }
+
+    // --- GET : renvoie le classement ----------------------------------------
+    void HandleGet(HttpContext ctx, SqlConnection conn)
+    {
+        var difficulty = (ctx.Request.QueryString["difficulty"] ?? "all").Trim();
+        int limit;
+        if (!int.TryParse(ctx.Request.QueryString["limit"], out limit)) limit = TopN;
+        if (limit < 1) limit = 1;
+        if (limit > TopN) limit = TopN;
+
+        var rows = new List<Dictionary<string, object>>();
+
+        if (difficulty == "all")
+        {
+            foreach (var diff in Difficulties)
+                rows.AddRange(FetchTop(conn, diff, TopN));
+
+            rows.Sort(CompareRows);
+            if (rows.Count > limit) rows = rows.GetRange(0, limit);
+        }
+        else
+        {
+            if (Array.IndexOf(Difficulties, difficulty) < 0)
+            {
+                Fail(ctx, 400, "Difficulté inconnue.");
+                return;
+            }
+            rows = FetchTop(conn, difficulty, limit);
+        }
+
+        Write(ctx, new Dictionary<string, object> { { "ok", true }, { "scores", rows } });
+    }
+
+    // --- POST : enregistre un score puis élague au top N --------------------
+    void HandlePost(HttpContext ctx, SqlConnection conn)
+    {
+        string body;
+        using (var reader = new StreamReader(ctx.Request.InputStream, Encoding.UTF8))
+            body = reader.ReadToEnd();
+
+        Dictionary<string, object> data = null;
+        try { data = new JavaScriptSerializer().Deserialize<Dictionary<string, object>>(body); }
+        catch { data = null; }
+
+        if (data == null)
+        {
+            Fail(ctx, 400, "Corps JSON invalide.");
+            return;
+        }
+
+        var difficulty = Str(data, "difficulty");
+        if (Array.IndexOf(Difficulties, difficulty) < 0)
+        {
+            Fail(ctx, 400, "Difficulté inconnue.");
+            return;
+        }
+
+        // Nettoyage / bornage des entrées
+        var playerName = Str(data, "playerName").Trim();
+        playerName = StripControlChars(playerName);
+        if (playerName.Length == 0) playerName = "Anonyme";
+        if (playerName.Length > 40) playerName = playerName.Substring(0, 40);
+
+        var userId = OnlyIdChars(Str(data, "userId"));
+        if (userId.Length > 64) userId = userId.Substring(0, 64);
+        if (userId.Length == 0) userId = "anon";
+
+        int score = Clamp(Int(data, "score"), 0, 100000000);
+        int moves = Clamp(Int(data, "moves"), 0, 100000);
+        int time = Clamp(Int(data, "timeSeconds"), 0, 1000000);
+        int isPerfect = Bool(data, "isPerfect") ? 1 : 0;
+
+        int insertedId;
+        using (var cmd = new SqlCommand(
+            "INSERT INTO memory_scores " +
+            "(player_name, user_id, score, moves, time_seconds, difficulty, is_perfect, created_at) " +
+            "OUTPUT INSERTED.id " +
+            "VALUES (@name, @uid, @score, @moves, @time, @diff, @perfect, GETUTCDATE())", conn))
+        {
+            cmd.Parameters.Add("@name", SqlDbType.NVarChar, 40).Value = playerName;
+            cmd.Parameters.Add("@uid", SqlDbType.NVarChar, 64).Value = userId;
+            cmd.Parameters.Add("@score", SqlDbType.Int).Value = score;
+            cmd.Parameters.Add("@moves", SqlDbType.Int).Value = moves;
+            cmd.Parameters.Add("@time", SqlDbType.Int).Value = time;
+            cmd.Parameters.Add("@diff", SqlDbType.NVarChar, 16).Value = difficulty;
+            cmd.Parameters.Add("@perfect", SqlDbType.Bit).Value = isPerfect;
+            insertedId = (int)cmd.ExecuteScalar();
+        }
+
+        // Ne conserver que le top N pour ce mode
+        using (var cmd = new SqlCommand(
+            "WITH ranked AS (" +
+            "  SELECT id, ROW_NUMBER() OVER (" +
+            "    PARTITION BY difficulty ORDER BY score DESC, time_seconds ASC, id ASC) AS rn" +
+            "  FROM memory_scores WHERE difficulty = @diff" +
+            ") DELETE FROM memory_scores WHERE id IN (SELECT id FROM ranked WHERE rn > @topN)", conn))
+        {
+            cmd.Parameters.Add("@diff", SqlDbType.NVarChar, 16).Value = difficulty;
+            cmd.Parameters.Add("@topN", SqlDbType.Int).Value = TopN;
+            cmd.ExecuteNonQuery();
+        }
+
+        // Le score inséré a-t-il survécu à l'élagage ? Quel rang ?
+        var top = FetchTop(conn, difficulty, TopN);
+        int? rank = null;
+        for (int i = 0; i < top.Count; i++)
+        {
+            if ((int)top[i]["id"] == insertedId) { rank = i + 1; break; }
+        }
+
+        Write(ctx, new Dictionary<string, object> {
+            { "ok", true },
+            { "saved", true },
+            { "isTop", rank.HasValue },
+            { "rank", rank.HasValue ? (object)rank.Value : null }
+        });
+    }
+
+    // --- Accès données -------------------------------------------------------
+    List<Dictionary<string, object>> FetchTop(SqlConnection conn, string difficulty, int limit)
+    {
+        var result = new List<Dictionary<string, object>>();
+        using (var cmd = new SqlCommand(
+            "SELECT TOP (@limit) id, player_name, user_id, score, moves, time_seconds, " +
+            "difficulty, is_perfect, created_at " +
+            "FROM memory_scores WHERE difficulty = @diff " +
+            "ORDER BY score DESC, time_seconds ASC, id ASC", conn))
+        {
+            cmd.Parameters.Add("@limit", SqlDbType.Int).Value = limit;
+            cmd.Parameters.Add("@diff", SqlDbType.NVarChar, 16).Value = difficulty;
+            using (var r = cmd.ExecuteReader())
+            {
+                while (r.Read())
+                {
+                    result.Add(new Dictionary<string, object> {
+                        { "id", (int)r["id"] },
+                        { "playerName", r["player_name"].ToString() },
+                        { "userId", r["user_id"].ToString() },
+                        { "score", (int)r["score"] },
+                        { "moves", (int)r["moves"] },
+                        { "timeSeconds", (int)r["time_seconds"] },
+                        { "difficulty", r["difficulty"].ToString() },
+                        { "isPerfect", Convert.ToBoolean(r["is_perfect"]) },
+                        { "date", ((DateTime)r["created_at"]).ToString("yyyy-MM-ddTHH:mm:ss") + "Z" }
+                    });
+                }
+            }
+        }
+        return result;
+    }
+
+    int CompareRows(Dictionary<string, object> a, Dictionary<string, object> b)
+    {
+        int sa = (int)a["score"], sb = (int)b["score"];
+        if (sa != sb) return sb - sa;
+        return (int)a["timeSeconds"] - (int)b["timeSeconds"];
+    }
+
+    // --- Sérialisation / helpers --------------------------------------------
+    void Write(HttpContext ctx, object payload)
+    {
+        // On retire la clé "id" (interne) des lignes avant l'envoi.
+        var scrubbed = Scrub(payload);
+        ctx.Response.Write(new JavaScriptSerializer().Serialize(scrubbed));
+    }
+
+    object Scrub(object payload)
+    {
+        var dict = payload as Dictionary<string, object>;
+        if (dict != null && dict.ContainsKey("scores"))
+        {
+            var list = dict["scores"] as List<Dictionary<string, object>>;
+            if (list != null)
+                foreach (var row in list) row.Remove("id");
+        }
+        return payload;
+    }
+
+    void Fail(HttpContext ctx, int status, string message)
+    {
+        ctx.Response.StatusCode = status;
+        ctx.Response.Write(new JavaScriptSerializer().Serialize(
+            new Dictionary<string, object> { { "ok", false }, { "error", message } }));
+    }
+
+    static string Str(Dictionary<string, object> d, string key)
+    {
+        object v; return (d.TryGetValue(key, out v) && v != null) ? v.ToString() : "";
+    }
+
+    static int Int(Dictionary<string, object> d, string key)
+    {
+        object v; int n;
+        if (d.TryGetValue(key, out v) && v != null && int.TryParse(v.ToString(), out n)) return n;
+        return 0;
+    }
+
+    static bool Bool(Dictionary<string, object> d, string key)
+    {
+        object v;
+        if (!d.TryGetValue(key, out v) || v == null) return false;
+        if (v is bool) return (bool)v;
+        var s = v.ToString().ToLowerInvariant();
+        return s == "true" || s == "1";
+    }
+
+    static int Clamp(int value, int min, int max)
+    {
+        if (value < min) return min;
+        if (value > max) return max;
+        return value;
+    }
+
+    static string StripControlChars(string s)
+    {
+        var sb = new StringBuilder(s.Length);
+        foreach (var c in s) if (!char.IsControl(c)) sb.Append(c);
+        return sb.ToString();
+    }
+
+    static string OnlyIdChars(string s)
+    {
+        var sb = new StringBuilder(s.Length);
+        foreach (var c in s)
+            if ((c >= 'A' && c <= 'Z') || (c >= 'a' && c <= 'z') || (c >= '0' && c <= '9') || c == '-')
+                sb.Append(c);
+        return sb.ToString();
+    }
+}

exercices/memory-pictogrammes/api/web.config.example

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<configuration>
+  <!--
+    MODÈLE de configuration. Sur le serveur bsite.net :
+      1. Copiez ce fichier en « web.config ».
+      2. Renseignez le mot de passe fourni par le panneau « Manage Databases ».
+
+    Le vrai « web.config » n'est PAS versionné (voir .gitignore) afin de ne
+    jamais exposer le mot de passe dans l'historique Git.
+  -->
+  <connectionStrings>
+    <add name="MemoryDb"
+         connectionString="Server=sql.bsite.net\MSSQL2016;Database=nextgnformation_reponses_exercices;User Id=nextgnformation_reponses_exercices;Password=VOTRE_MOT_DE_PASSE;"
+         providerName="System.Data.SqlClient" />
+  </connectionStrings>
+</configuration>

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

@@ -93,6 +93,13 @@
     overflow: hidden;
 }
 
+/* Ligne du joueur courant dans le classement */
+.rank-item.is-me {
+    border-left-color: var(--amber-dark);
+    background: linear-gradient(135deg, var(--amber-light), var(--white));
+    box-shadow: 0 2px 8px rgba(186, 117, 23, 0.15);
+}
+
 .rank-top {
     display: flex;
     align-items: center;

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

@@ -1,90 +1,114 @@
 /* ============================================
    LEADERBOARD & PLAYER STATISTICS
+   ============================================
+   Le CLASSEMENT est désormais partagé EN LIGNE : tous les joueurs
+   enregistrent leurs scores via l'API PHP (api/scores.php) et voient le
+   même top 10 par mode de jeu.
+
+   Les STATISTIQUES PERSONNELLES (« Vos statistiques ») restent stockées
+   localement dans le navigateur du joueur, car le serveur ne conserve que
+   le top 10 de chaque mode (et non l'historique complet de chacun).
    ============================================ */
 
 /**
  * Manager du classement
  */
 class LeaderboardManager {
-    static KEY_LEADERBOARD = 'nextgn_leaderboard';
-    static MAX_SCORES = 100;
-    
+    // Point d'entrée de l'API (relatif à memory.html) — ASP.NET + SQL Server
+    static API_URL = 'api/scores.ashx';
+    // Historique local des parties du joueur (pour ses stats perso)
+    static KEY_HISTORY = 'nextgn_player_history';
+    static MAX_HISTORY = 500;
+
+    // Cache mémoire du dernier classement récupéré (par difficulté)
+    static _cache = {};
+
     /**
-     * Ajouter un score au classement
+     * Enregistrer une partie :
+     *  - envoie le score au classement en ligne
+     *  - conserve la partie dans l'historique local (stats perso)
+     * @returns {Promise<Object>} résultat de l'API ({ ok, isTop, rank } ou { ok:false })
      */
-    static addScore(gameData) {
-        const scores = this.getAllScores();
-        
-        const newScore = {
-            sessionId: generateUUID(),
+    static async addScore(gameData) {
+        const record = {
             playerName: getPlayerName(),
             userId: getUserId(),
             score: gameData.score,
             moves: gameData.moves,
             timeSeconds: gameData.duration,
             difficulty: gameData.difficulty,
-            date: new Date().toISOString(),
             isPerfect: gameData.moves === DIFFICULTY_MODES[gameData.difficulty].paires,
-            won: gameData.won !== false
+            won: gameData.won !== false,
+            date: new Date().toISOString()
         };
-        
-        scores.push(newScore);
-        
-        // Limiter à MAX_SCORES (garder les plus récents)
-        if (scores.length > this.MAX_SCORES) {
-            scores.sort((a, b) => new Date(b.date) - new Date(a.date));
-            scores.splice(this.MAX_SCORES);
-        }
-        
-        localStorage.setItem(this.KEY_LEADERBOARD, JSON.stringify(scores));
-        
-        DEBUG.log('Score added:', newScore);
-        
-        return newScore;
-    }
-    
-    /**
-     * Obtenir tous les scores
-     */
-    static getAllScores() {
+
+        // 1) Historique local (statistiques personnelles)
+        this._recordLocalHistory(record);
+
+        // 2) Classement en ligne
         try {
-            const scores = JSON.parse(localStorage.getItem(this.KEY_LEADERBOARD)) || [];
-            return scores;
+            const res = await fetch(this.API_URL, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(record)
+            });
+            const data = await res.json();
+            DEBUG.log('Score submitted:', data);
+            return data;
+        } catch (e) {
+            console.error('Leaderboard submit error:', e);
+            return { ok: false, error: 'network' };
+        }
+    }
+
+    /**
+     * Ajouter la partie à l'historique local du joueur
+     */
+    static _recordLocalHistory(record) {
+        const history = this._getLocalHistory();
+        history.push(record);
+        if (history.length > this.MAX_HISTORY) {
+            history.splice(0, history.length - this.MAX_HISTORY);
+        }
+        try {
+            localStorage.setItem(this.KEY_HISTORY, JSON.stringify(history));
+        } catch (e) {
+            console.error('History save error:', e);
+        }
+    }
+
+    /**
+     * Historique local des parties du joueur
+     */
+    static _getLocalHistory() {
+        try {
+            return JSON.parse(localStorage.getItem(this.KEY_HISTORY)) || [];
         } catch (e) {
-            console.error('Leaderboard error:', e);
             return [];
         }
     }
-    
+
     /**
-     * Obtenir le classement (top X)
+     * Récupérer le classement en ligne (top X) pour un mode donné.
+     * @returns {Promise<Array>}
      */
-    static getLeaderboard(difficulty = 'all', limit = 10) {
-        let scores = this.getAllScores();
-        
-        // Filtrer par difficulté
-        if (difficulty !== 'all') {
-            scores = scores.filter(s => s.difficulty === difficulty);
+    static async getLeaderboard(difficulty = 'all', limit = 10) {
+        const url = `${this.API_URL}?difficulty=${encodeURIComponent(difficulty)}&limit=${limit}`;
+        const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
+        const data = await res.json();
+        if (!data || data.ok !== true || !Array.isArray(data.scores)) {
+            throw new Error('Réponse invalide du serveur');
         }
-        
-        // Trier par score (décroissant)
-        scores.sort((a, b) => {
-            if (b.score !== a.score) {
-                return b.score - a.score;
-            }
-            // En cas d'égalité, par temps
-            return a.timeSeconds - b.timeSeconds;
-        });
-        
-        return scores.slice(0, limit);
+        this._cache[difficulty] = data.scores;
+        return data.scores;
     }
-    
+
     /**
-     * Obtenir les stats d'un joueur
+     * Statistiques du joueur, calculées à partir de son historique LOCAL.
      */
-    static getPlayerStats(userId) {
-        const scores = this.getAllScores().filter(s => s.userId === userId);
-        
+    static getPlayerStats() {
+        const scores = this._getLocalHistory();
+
         if (scores.length === 0) {
             return {
                 totalGames: 0,
@@ -96,14 +120,14 @@ class LeaderboardManager {
                 perfectGames: 0
             };
         }
-        
+
         const bestScore = Math.max(...scores.map(s => s.score), 0);
         const totalScore = scores.reduce((a, b) => a + b.score, 0);
         const totalTime = scores.reduce((a, b) => a + b.timeSeconds, 0);
         const bestTime = Math.min(...scores.map(s => s.timeSeconds), Infinity);
         const perfectGames = scores.filter(s => s.isPerfect).length;
         const winRate = (perfectGames / scores.length) * 100;
-        
+
         return {
             totalGames: scores.length,
             bestScore: bestScore,
@@ -114,63 +138,37 @@ class LeaderboardManager {
             perfectGames: perfectGames
         };
     }
-    
+
     /**
-     * Obtenir le rang d'un score
+     * Mettre à jour l'affichage du classement (asynchrone).
      */
-    static getPlayerRank(userId, difficulty = 'all') {
-        const leaderboard = this.getLeaderboard(difficulty, Infinity);
-        const rank = leaderboard.findIndex(s => s.userId === userId) + 1;
-        return rank > 0 ? rank : null;
-    }
-    
-    /**
-     * Vérifier si c'est un nouveau record personnel
-     */
-    static isPersonalRecord(userId, newScore) {
-        const stats = this.getPlayerStats(userId);
-        return newScore > stats.bestScore;
-    }
-    
-    /**
-     * Obtenir les statistiques globales
-     */
-    static getGlobalStats() {
-        const scores = this.getAllScores();
-        
-        if (scores.length === 0) {
-            return {
-                totalGames: 0,
-                totalPlayers: 0,
-                averageScore: 0,
-                highestScore: 0,
-                fastestCompletion: Infinity
-            };
-        }
-        
-        const uniquePlayers = new Set(scores.map(s => s.userId));
-        const totalScore = scores.reduce((a, b) => a + b.score, 0);
-        const highestScore = Math.max(...scores.map(s => s.score), 0);
-        const fastestCompletion = Math.min(...scores.map(s => s.timeSeconds), Infinity);
-        
-        return {
-            totalGames: scores.length,
-            totalPlayers: uniquePlayers.size,
-            averageScore: Math.round(totalScore / scores.length),
-            highestScore: highestScore,
-            fastestCompletion: fastestCompletion === Infinity ? 0 : fastestCompletion
-        };
-    }
-    
-    /**
-     * Mettre à jour l'affichage du classement
-     */
-    static updateDisplay(difficulty = 'all') {
-        const leaderboard = this.getLeaderboard(difficulty, 10);
+    static async updateDisplay(difficulty = 'all') {
         const leaderboardList = document.getElementById('leaderboard-list');
-        
         if (!leaderboardList) return;
-        
+
+        // État de chargement
+        leaderboardList.innerHTML = `
+            <div class="empty-state">
+                <div class="empty-state-icon">⏳</div>
+                <div class="empty-state-text">Chargement du classement…</div>
+            </div>
+        `;
+
+        let leaderboard;
+        try {
+            leaderboard = await this.getLeaderboard(difficulty, 10);
+        } catch (e) {
+            console.error('Leaderboard load error:', e);
+            leaderboardList.innerHTML = `
+                <div class="empty-state">
+                    <div class="empty-state-icon">⚠️</div>
+                    <div class="empty-state-text">Classement indisponible</div>
+                    <div class="empty-state-hint">Vérifiez votre connexion et réessayez.</div>
+                </div>
+            `;
+            return;
+        }
+
         if (leaderboard.length === 0) {
             leaderboardList.innerHTML = `
                 <div class="empty-state">
@@ -181,16 +179,20 @@ class LeaderboardManager {
             `;
             return;
         }
-        
+
+        const myUserId = getUserId();
         leaderboardList.innerHTML = '';
-        
+
         leaderboard.forEach((score, index) => {
             const rankItem = document.createElement('div');
             rankItem.className = 'rank-item';
-            
+            if (score.userId === myUserId) {
+                rankItem.classList.add('is-me');
+            }
+
             const rankNumber = this.getRankDisplay(index);
             const medal = index < 3 ? `class="rank-number medal-${index + 1}"` : 'class="rank-number"';
-            
+
             rankItem.innerHTML = `
                 <div class="rank-top">
                     <div ${medal}>${rankNumber}</div>
@@ -205,96 +207,53 @@ class LeaderboardManager {
                     </div>
                 </div>
             `;
-            
+
             leaderboardList.appendChild(rankItem);
         });
-        
-        analyticsManager.track('leaderboard_viewed', { filter: difficulty });
+
+        if (typeof analyticsManager !== 'undefined') {
+            analyticsManager.track('leaderboard_viewed', { filter: difficulty });
+        }
     }
-    
+
     /**
-     * Mettre à jour les statistiques du joueur
+     * Mettre à jour les statistiques du joueur (locales).
      */
     static updatePlayerStats() {
-        const userId = getUserId();
-        const stats = this.getPlayerStats(userId);
-        
-        // Remplir les éléments HTML
-        document.getElementById('total-games').textContent = stats.totalGames;
-        document.getElementById('best-score').textContent = formatNumber(stats.bestScore);
-        document.getElementById('best-time').textContent = stats.bestTime === Infinity ? '--' : formatTime(stats.bestTime);
-        document.getElementById('win-rate').textContent = `${stats.winRate}%`;
-        
-        // Ajouter des classes pour animation si valeurs élevées
-        if (stats.bestScore > 5000) {
-            document.getElementById('best-score').parentElement.classList.add('high-value');
+        const stats = this.getPlayerStats();
+
+        const totalGamesEl = document.getElementById('total-games');
+        const bestScoreEl = document.getElementById('best-score');
+        const bestTimeEl = document.getElementById('best-time');
+        const winRateEl = document.getElementById('win-rate');
+
+        if (totalGamesEl) totalGamesEl.textContent = stats.totalGames;
+        if (bestScoreEl) bestScoreEl.textContent = formatNumber(stats.bestScore);
+        if (bestTimeEl) bestTimeEl.textContent = stats.bestTime === Infinity || stats.bestTime === 0 ? '--' : formatTime(stats.bestTime);
+        if (winRateEl) winRateEl.textContent = `${stats.winRate}%`;
+
+        if (bestScoreEl && stats.bestScore > 5000) {
+            bestScoreEl.parentElement.classList.add('high-value');
         }
-        
-        if (stats.winRate >= 50) {
-            document.getElementById('win-rate').parentElement.classList.add('high-value');
+        if (winRateEl && stats.winRate >= 50) {
+            winRateEl.parentElement.classList.add('high-value');
         }
     }
-    
+
     /**
-     * Afficher le rang du joueur
+     * Effacer l'historique local du joueur (DEBUG).
+     * N'affecte PAS le classement en ligne partagé.
      */
-    static updatePlayerRank(difficulty = 'all') {
-        const userId = getUserId();
-        const rank = this.getPlayerRank(userId, difficulty);
-        
-        if (rank) {
-            const rankDisplay = document.getElementById('player-rank');
-            if (rankDisplay) {
-                rankDisplay.textContent = `Vous êtes #{rank}`;
-            }
-        }
-    }
-    
-    /**
-     * Afficher les statistiques globales
-     */
-    static displayGlobalStats() {
-        const globalStats = this.getGlobalStats();
-        DEBUG.log('Global Statistics:', globalStats);
-        
-        return globalStats;
-    }
-    
-    /**
-     * Nettoyer les scores (DEBUG)
-     */
-    static clearAll() {
-        if (confirm('Êtes-vous ABSOLUMENT certain de vouloir supprimer TOUS les scores?')) {
-            localStorage.removeItem(this.KEY_LEADERBOARD);
-            this.updateDisplay();
+    static clearLocalHistory() {
+        if (confirm('Effacer VOS statistiques locales ? (le classement en ligne n\'est pas touché)')) {
+            localStorage.removeItem(this.KEY_HISTORY);
             this.updatePlayerStats();
-            DEBUG.log('✓ Tous les scores ont été supprimés');
+            DEBUG.log('✓ Historique local effacé');
             return true;
         }
         return false;
     }
-    
-    /**
-     * Exporter les scores en CSV
-     */
-    static exportCSV() {
-        const scores = this.getAllScores();
-        
-        let csv = 'Rang,Joueur,Score,Difficulté,Temps (s),Mouvements,Parfait,Date\n';
-        
-        scores.forEach((score, index) => {
-            csv += `${index + 1},"${score.playerName}",${score.score},"${score.difficulty}",${score.timeSeconds},${score.moves},${score.isPerfect ? 'Oui' : 'Non'},"${score.date}"\n`;
-        });
-        
-        const blob = new Blob([csv], { type: 'text/csv' });
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = `leaderboard-${new Date().toISOString().slice(0, 10)}.csv`;
-        link.click();
-        URL.revokeObjectURL(url);
-    }
-    
+
     /**
      * Obtenir l'affichage du rang (numéro ou médaille)
      */
@@ -302,7 +261,7 @@ class LeaderboardManager {
         const medals = ['🥇', '🥈', '🥉'];
         return medals[index] || `${index + 1}`;
     }
-    
+
     /**
      * Échapper le HTML (sécurité)
      */
@@ -313,78 +272,11 @@ class LeaderboardManager {
     }
 }
 
-/**
- * Statistiques avancées
- */
-class AdvancedStats {
-    /**
-     * Obtenir la distribution des scores par difficulté
-     */
-    static getDistributionByDifficulty() {
-        const scores = LeaderboardManager.getAllScores();
-        const distribution = {};
-        
-        Object.keys(DIFFICULTY_MODES).forEach(difficulty => {
-            distribution[difficulty] = scores.filter(s => s.difficulty === difficulty).length;
-        });
-        
-        return distribution;
-    }
-    
-    /**
-     * Obtenir la tendance temporelle
-     */
-    static getTimelineTrend(days = 7) {
-        const scores = LeaderboardManager.getAllScores();
-        const now = new Date();
-        const timeline = {};
-        
-        for (let i = 0; i < days; i++) {
-            const date = new Date(now);
-            date.setDate(date.getDate() - i);
-            const dateStr = date.toISOString().slice(0, 10);
-            timeline[dateStr] = scores.filter(s => s.date.slice(0, 10) === dateStr).length;
-        }
-        
-        return timeline;
-    }
-    
-    /**
-     * Obtenir la moyenne de temps par difficulté
-     */
-    static getAverageTimeByDifficulty() {
-        const scores = LeaderboardManager.getAllScores();
-        const averages = {};
-        
-        Object.keys(DIFFICULTY_MODES).forEach(difficulty => {
-            const diffScores = scores.filter(s => s.difficulty === difficulty);
-            if (diffScores.length > 0) {
-                const totalTime = diffScores.reduce((a, b) => a + b.timeSeconds, 0);
-                averages[difficulty] = Math.round(totalTime / diffScores.length);
-            }
-        });
-        
-        return averages;
-    }
-    
-    /**
-     * Taux de réussite global
-     */
-    static getGlobalSuccessRate() {
-        const scores = LeaderboardManager.getAllScores();
-        if (scores.length === 0) return 0;
-        
-        const perfectGames = scores.filter(s => s.isPerfect).length;
-        return Math.round((perfectGames / scores.length) * 100);
-    }
-}
-
 // ============================================
 // INITIALISATION
 // ============================================
 
 // Exporter pour utilisation globale
 window.LeaderboardManager = LeaderboardManager;
-window.AdvancedStats = AdvancedStats;
 
-DEBUG.log('Leaderboard Manager initialized');
+DEBUG.log('Leaderboard Manager initialized (online mode)');

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

@@ -347,12 +347,16 @@ class MemoryGameEngine {
             achievements: achievements.map(a => a.id)
         });
         
-        // Sauvegarder score
+        // Sauvegarder le score (classement en ligne) puis rafraîchir l'affichage
         LeaderboardManager.addScore({
             ...gameData,
             score: finalScore.totalScore
+        }).then(() => {
+            const activeFilter = document.querySelector('.tab-btn.active')?.getAttribute('data-filter') || 'all';
+            LeaderboardManager.updateDisplay(activeFilter);
+            LeaderboardManager.updatePlayerStats();
         });
-        
+
         // Afficher modal victoire
         this.showVictoryModal(finalScore, achievements, isWon);
     }

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

@@ -292,10 +292,10 @@ function getRank(index) {
 }
 
 /**
- * Vérifier si le score est dans le top 10
+ * Vérifier si le score est dans le top 10 (classement en ligne, asynchrone)
  */
-function isTopScore(score, difficulty = 'all') {
-    const scores = LeaderboardManager.getLeaderboard(difficulty, 10);
+async function isTopScore(score, difficulty = 'all') {
+    const scores = await LeaderboardManager.getLeaderboard(difficulty, 10);
     return scores.some(s => s.score === score.score && s.userId === score.userId);
 }
 
@@ -318,57 +318,25 @@ function formatDate(isoDate) {
 }
 
 /**
- * Obtenir les statistiques d'un joueur
+ * Obtenir les statistiques locales du joueur
  */
-function getPlayerStatistics(userId) {
-    const scores = LeaderboardManager.getAllScores().filter(s => s.userId === userId);
-    
-    if (scores.length === 0) {
-        return {
-            totalGames: 0,
-            bestScore: 0,
-            averageScore: 0,
-            averageTime: 0,
-            bestTime: Infinity,
-            winRate: 0,
-            perfectGames: 0
-        };
-    }
-    
-    const bestScore = Math.max(...scores.map(s => s.score), 0);
-    const totalScore = scores.reduce((a, b) => a + b.score, 0);
-    const totalTime = scores.reduce((a, b) => a + b.timeSeconds, 0);
-    const bestTime = Math.min(...scores.map(s => s.timeSeconds), Infinity);
-    const perfectGames = scores.filter(s => s.isPerfect).length;
-    const winRate = (perfectGames / scores.length) * 100;
-    
-    return {
-        totalGames: scores.length,
-        bestScore: bestScore,
-        averageScore: Math.round(totalScore / scores.length),
-        averageTime: Math.round(totalTime / scores.length),
-        bestTime: bestTime === Infinity ? 0 : bestTime,
-        winRate: Math.round(winRate),
-        perfectGames: perfectGames
-    };
+function getPlayerStatistics() {
+    return LeaderboardManager.getPlayerStats();
 }
 
 /**
- * Déboguer : afficher tous les scores en console
+ * Déboguer : afficher l'historique local du joueur en console
  */
 function debugScores() {
-    console.table(LeaderboardManager.getAllScores());
+    console.table(LeaderboardManager._getLocalHistory());
 }
 
 /**
- * Déboguer : nettoyer tous les scores
+ * Déboguer : effacer les statistiques locales du joueur
+ * (le classement en ligne partagé n'est pas affecté)
  */
 function clearAllScores() {
-    if (confirm('Êtes-vous sûr de vouloir supprimer tous les scores?')) {
-        localStorage.removeItem('nextgn_leaderboard');
-        console.log('✓ Tous les scores ont été supprimés');
-        location.reload();
-    }
+    LeaderboardManager.clearLocalHistory();
 }
 
 /**

index.html

@@ -32,8 +32,8 @@
         <div class="logo">Gauthier Chombart & Nathan Chauwin</div>
         <nav>
             <a href="#formations">Exercices interactifs</a>
-            <a href="#documentation">Documentation</a>
-            <a href="#rapports">Rapports de veille</a>
+            <a href="#documentation" style="display:none;">Documentation</a>
+            <a href="#rapports" style="display:none;">Rapports de veille</a>
             <a href="#about">À propos</a>
             <a href="#contact">Contact</a>
         </nav>
@@ -53,8 +53,8 @@
                 
                 <div class="cta-group">
                     <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="#documentation" class="btn btn-secondary" style="display:none;">Documentation</a>
+                    <a href="#rapports" class="btn btn-secondary" style="display:none;">Rapports de veille</a>
                 </div>
 
                 <div class="stats">
@@ -154,7 +154,7 @@
         </section>
 
         <!-- DOCUMENTATION TECHNIQUE SECTION -->
-        <section id="documentation" class="documentation-section">
+        <section id="documentation" class="documentation-section" style="display:none;">
             <div class="section-header">
                 <h2>Documentation technique et biologie des espèces</h2>
                 <p>Accédez à notre base de connaissances : études détaillées, analyses scientifiques et rapports techniques sur les nuisibles, les biocides et les enjeux réglementaires.</p>
@@ -191,7 +191,7 @@
         </section>
 
         <!-- RAPPORTS DE VEILLE HEBDOMADAIRES -->
-        <section id="rapports" class="rapports-section">
+        <section id="rapports" class="rapports-section" style="display:none;">
             <div class="section-header">
                 <h2>Rapports de veille hebdomadaires</h2>
                 <p>Suivez chaque semaine l'actualité réglementaire, les opportunités de marché et les tendances du secteur Certibiocide en France et en Europe.</p>