Recentre les encadres TP1/TP2/TP3 de la slide finale

Passe la marge de .final-grid de 1.5rem 0 a 1.5rem auto pour centrer la
grille des trois travaux pratiques.

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,18 +501,33 @@
     <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>
 </div>
 
-<!-- ============ SLIDE 2 — EXERCICE 1 ============ -->
+<!-- ============ SLIDE 2 — EXERCICE 1 : INTRO ============ -->
 <div class="slide" id="slide-2">
-  <div class="scroll-area">
+  <div class="deco-circle" style="width:280px;height:280px;background:var(--amber-light);top:-40px;right:-40px;opacity:0.5;"></div>
   <div class="section-tag">Exercice 1 / 4 — 5 min</div>
+  <div class="slide-title">🔎 Recherche par nom de produit</div>
+  <p class="slide-intro">La recherche par nom est le chemin le plus direct dans BioCID : elle donne accès à la <strong>fiche complète</strong> d'un produit déjà identifié — son <strong>type</strong>, sa <strong>substance active</strong>, son <strong>fabricant</strong> et ses <strong>conditions d'utilisation</strong>.</p>
+  <div class="info-card">
+    <span>🎯</span>
+    <div>Pour chaque question, saisissez votre réponse dans le champ prévu. Vos réponses sont <strong>enregistrées automatiquement</strong> et reprises dans le PDF final.</div>
+  </div>
+</div>
+
+<!-- ============ SLIDE 3 — EXERCICE 1 : QUESTIONS ============ -->
+<div class="slide" id="slide-3">
+  <div class="scroll-area">
     <div class="slide-title">Recherche par nom de produit</div>
-    <p class="slide-intro">Trouvez un produit spécifique et relevez ses caractéristiques principales.</p>
     <ul class="questions-list">
       <li class="q-item">
         <div class="q-head"><span class="q-num">1</span><span>Recherchez un produit connu (ex. « Goliath », « Phobi », « Soricide »). Notez son <strong>type de produit</strong>, sa <strong>substance active</strong> et son <strong>fabricant</strong>.</span></div>
@@ -521,8 +545,8 @@
   </div>
 </div>
 
-<!-- ============ SLIDE 3 — EXERCICE 2 ============ -->
-<div class="slide" id="slide-3">
+<!-- ============ SLIDE 4 — EXERCICE 2 ============ -->
+<div class="slide" id="slide-4">
   <div class="scroll-area">
     <div class="section-tag">Exercice 2 / 4 — 5 min</div>
     <div class="slide-title">Recherche par type de produit</div>
@@ -540,8 +564,8 @@
   </div>
 </div>
 
-<!-- ============ SLIDE 4 — EXERCICE 3 ============ -->
-<div class="slide" id="slide-4">
+<!-- ============ SLIDE 5 — EXERCICE 3 ============ -->
+<div class="slide" id="slide-5">
   <div class="scroll-area">
     <div class="section-tag">Exercice 3 / 4 — 5 min</div>
     <div class="slide-title">Recherche par substance active</div>
@@ -559,8 +583,8 @@
   </div>
 </div>
 
-<!-- ============ SLIDE 5 — EXERCICE 4 (CAS DE SYNTHÈSE) ============ -->
-<div class="slide" id="slide-5">
+<!-- ============ SLIDE 6 — EXERCICE 4 (CAS DE SYNTHÈSE) ============ -->
+<div class="slide" id="slide-6">
   <div class="scroll-area">
     <div class="section-tag" style="background:var(--coral-light);color:var(--coral);">Exercice 4 / 4 — Cas de synthèse</div>
     <div class="slide-title">Mise en situation</div>
@@ -585,8 +609,8 @@
   </div>
 </div>
 
-<!-- ============ SLIDE 6 — ASTUCES / FIN ============ -->
-<div class="slide" id="slide-6">
+<!-- ============ SLIDE 7 — ASTUCES / FIN ============ -->
+<div class="slide" id="slide-7">
   <div class="scroll-area">
     <div class="deco-circle" style="width:320px;height:320px;background:var(--amber-light);bottom:-80px;right:-60px;opacity:0.5;"></div>
     <div style="text-align:center;">
@@ -613,15 +637,16 @@
 <script>
 let currentSlide = 0;
 let history = [];
-const totalSlides = 6;
+const totalSlides = 7;
 
 // Configuration des boutons du footer par slide
 const slideConfig = {
   1: { next: 2, nextLabel: "Commencer l'exercice 1 →" },
-  2: { hint: 'ex1', next: 3, nextLabel: 'Exercice suivant →' },
-  3: { hint: 'ex2', next: 4, nextLabel: 'Exercice suivant →' },
-  4: { hint: 'ex3', next: 5, nextLabel: 'Cas de synthèse →' },
-  5: { next: 6, nextLabel: "Terminer l'exercice →" }
+  2: { next: 3, nextLabel: 'Aux questions →' },
+  3: { hint: 'ex1', next: 4, nextLabel: 'Exercice suivant →' },
+  4: { hint: 'ex2', next: 5, nextLabel: 'Exercice suivant →' },
+  5: { hint: 'ex3', next: 6, nextLabel: 'Cas de synthèse →' },
+  6: { next: 7, nextLabel: "Terminer l'exercice →" }
 };
 
 const hints = {
@@ -655,7 +680,7 @@ function goTo(n) {
   const sa = next.querySelector('.scroll-area');
   if (sa) sa.scrollTop = 0;
   updateUI();
-  if (n === 6) setTimeout(launchConfetti, 200);
+  if (n === 7) setTimeout(launchConfetti, 200);
 }
 
 function goBack() {
@@ -678,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;
@@ -859,6 +890,116 @@ function exporterPDF() {
   setTimeout(() => w.print(), 300);
 }
 
+/* ======================== SAUVEGARDE AUTOMATIQUE ======================== */
+/* Les réponses sont enregistrées dans le navigateur au fil de la saisie, puis
+   proposées à la restauration au rechargement. En file://, localStorage peut être
+   indisponible (Safari) : dans ce cas la page fonctionne normalement, sans filet. */
+const CLE_SAUVEGARDE = 'certibiocide:biocid:v1';
+
+let reponsesModifiees = false;
+function marquerModifie() { reponsesModifiees = true; sauvegarder(); }
+
+document.addEventListener('input', marquerModifie, true);
+document.addEventListener('change', marquerModifie, true);
+
+// Avertit avant tout rechargement ou départ. Le texte de la boîte est imposé
+// par le navigateur, il n'est pas personnalisable.
+window.addEventListener('beforeunload', e => {
+  if (!reponsesModifiees) return;
+  e.preventDefault();
+  e.returnValue = '';
+});
+
+function etatCourant() {
+  const champs = {};
+  document.querySelectorAll('input[id], textarea[id]').forEach(el => {
+    if (el.value) champs[el.id] = el.value;
+  });
+  return { savedAt: new Date().toISOString(), slide: currentSlide, champs };
+}
+
+let minuteurSauvegarde = null;
+function sauvegarder() {
+  clearTimeout(minuteurSauvegarde);
+  minuteurSauvegarde = setTimeout(() => {
+    try {
+      localStorage.setItem(CLE_SAUVEGARDE, JSON.stringify(etatCourant()));
+    } catch (e) { /* navigation privée ou quota : on continue sans sauvegarde */ }
+  }, 400);
+}
+
+function lireSauvegarde() {
+  try { return JSON.parse(localStorage.getItem(CLE_SAUVEGARDE)); }
+  catch (e) { return null; }
+}
+function effacerSauvegarde() {
+  try { localStorage.removeItem(CLE_SAUVEGARDE); } catch (e) {}
+}
+
+function appliquerSauvegarde(data) {
+  Object.entries(data.champs || {}).forEach(([id, v]) => {
+    const el = document.getElementById(id);
+    if (el) el.value = v;
+  });
+  reponsesModifiees = true;
+  if (typeof data.slide === 'number' && data.slide > 0) goTo(data.slide);
+  updateUI();
+}
+
+/* Bandeau de restauration : on ne restaure jamais sans demander, pour qu'un
+   nouveau groupe n'hérite pas des réponses du précédent sur un poste partagé. */
+function injecterStylesBandeau() {
+  const style = document.createElement('style');
+  style.textContent = `
+    .restore-bar {
+      position: fixed; top: 84px; left: 50%; transform: translateX(-50%);
+      z-index: 900; max-width: min(680px, calc(100vw - 32px));
+      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
+      background: var(--white); border: 1.5px solid var(--amber);
+      border-radius: 14px; padding: 14px 18px;
+      box-shadow: 0 8px 28px rgba(0,0,0,0.12); font-size: 13.5px;
+    }
+    .restore-bar .restore-text { flex: 1; min-width: 220px; line-height: 1.5; }
+    .restore-bar .restore-actions { display: flex; gap: 8px; flex-shrink: 0; }
+    .restore-bar button {
+      font-family: 'Syne', sans-serif; font-weight: 700; font-size: 12.5px;
+      padding: 8px 16px; border-radius: 20px; cursor: pointer;
+      border: 1px solid var(--border); background: transparent; color: var(--text-muted);
+    }
+    .restore-bar button:hover { border-color: var(--amber); color: var(--amber); }
+    .restore-bar button.primary {
+      background: var(--amber); border-color: var(--amber); color: #fff;
+    }
+    .restore-bar button.primary:hover { background: var(--amber-dark); border-color: var(--amber-dark); color: #fff; }
+  `;
+  document.head.appendChild(style);
+}
+
+function proposerRestauration() {
+  const data = lireSauvegarde();
+  if (!data || !data.champs || Object.keys(data.champs).length === 0) return;
+
+  const quand = new Date(data.savedAt);
+  const libelle = isNaN(quand.getTime()) ? '' :
+    ` du ${quand.toLocaleDateString('fr-FR')} à ${quand.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}`;
+
+  injecterStylesBandeau();
+  const bar = document.createElement('div');
+  bar.className = 'restore-bar';
+  bar.innerHTML = `
+    <span class="restore-text">💾 Des réponses enregistrées${libelle} ont été retrouvées sur ce poste.</span>
+    <span class="restore-actions">
+      <button type="button" class="primary" id="btnRestaurer">Restaurer</button>
+      <button type="button" id="btnRepartir">Repartir de zéro</button>
+    </span>`;
+  document.body.appendChild(bar);
+
+  document.getElementById('btnRestaurer').onclick = () => { appliquerSauvegarde(data); bar.remove(); };
+  document.getElementById('btnRepartir').onclick = () => { effacerSauvegarde(); bar.remove(); };
+}
+
+proposerRestauration();
+
 updateUI();
 </script>
 </body>

exercices/Exo_FDS.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;
@@ -46,33 +46,63 @@
   z-index: 100;
 }
 
-/* BOTTOM BAR */
+/* BOTTOM BAR (modèle BioCID) */
 .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-counter { font-size: 12px; font-family: 'Syne', sans-serif; font-weight: 600; color: var(--amber-dark); }
-.back-btn {
-  background: none;
-  border: 0.5px solid var(--amber);
-  border-radius: 20px;
-  padding: 6px 16px;
+.slide-counter {
+  position: absolute;
+  left: 20px;
   font-size: 12px;
+  font-family: 'Syne', sans-serif;
+  font-weight: 600;
   color: var(--amber-dark);
-  cursor: pointer;
-  transition: all 0.2s;
-  font-family: 'DM Sans', sans-serif;
 }
-.back-btn:hover { background: rgba(186,117,23,0.08); }
+/* Boutons centralisés dans la bottom bar */
+.bar-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;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.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); }
+.footer-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; pointer-events: none; }
+@media (max-width: 560px) {
+  .slide-counter { display: none; }
+  .footer-btn { padding: 9px 16px; font-size: 12px; }
+}
 
 /* BUTTONS */
 .btn {
@@ -210,7 +240,7 @@
 #slide-3 {
   justify-content: flex-start;
   padding-top: calc(70px + 0.9rem);
-  padding-bottom: calc(52px + 0.6rem);
+  padding-bottom: calc(84px + 0.6rem);
 }
 #slide-3 .slide-title { margin: 0.1rem 0 0.15rem; font-size: clamp(19px, 2.4vw, 26px); }
 .dnd-hint { font-size: 12.5px; color: var(--text-muted); text-align: center; margin: 0 0 10px; }
@@ -568,7 +598,8 @@ select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px
   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; }
+.pictos { display: flex; gap: 6px; align-items: center; }
+.ghs-img { width: 42px; height: 42px; object-fit: contain; display: block; }
 .ghs {
   width: 38px; height: 38px; position: relative;
   border: 2.5px solid #c62828; background: #fff;
@@ -616,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; }
@@ -651,44 +667,11 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
 
 /* ---- SLIDE 7 — encadré de réponse sur le côté de l'étiquette ---- */
 #eti-stage {
-  max-width: 980px;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 300px;
-  align-items: start;
-  gap: 16px;
+  max-width: 680px;
+  display: flex;
   justify-content: center;
 }
-#eti-stage .label-card { grid-column: 1; grid-row: 1; }
-#eti-stage .eti-pop,
-#eti-stage .eti-side-hint { grid-column: 2; grid-row: 1; align-self: start; }
-#eti-stage .eti-pop { position: relative; inset: auto; left: auto; top: auto; max-width: none; width: 100%; }
-.eti-side-hint {
-  font-size: 12.5px; color: var(--teal-dark); line-height: 1.5;
-  background: var(--teal-light); border: 1px dashed var(--teal-mid);
-  border-radius: 10px; padding: 12px 14px;
-}
-.eti-side-hint[hidden] { display: none; }
 
-/* ---- 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: 820px) {
-  #eti-stage { grid-template-columns: 1fr; max-width: 680px; }
-  #eti-stage .eti-pop,
-  #eti-stage .eti-side-hint { grid-column: 1; grid-row: auto; }
-  #eti-stage .label-card { grid-row: auto; }
-}
-@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>
@@ -709,19 +692,19 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
 <!-- 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="bar-actions" id="barActions"></div>
 </div>
 
+<!-- Confetti -->
+<canvas id="confettiCanvas" style="position:fixed;inset:0;pointer-events:none;z-index:150;display:none;"></canvas>
+
 <!-- ============ SLIDE 0 — ACCUEIL ============ -->
 <div class="slide active fade-in" id="slide-0">
   <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(--coral-light);bottom:60px;left:-60px;opacity:0.5;"></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 dirigés</div>
     <div class="hero-title">FDS, FT<br>& Étiquettes</div>
@@ -736,6 +719,10 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
   <div class="section-tag">Déroulé du TD</div>
   <div class="slide-title">Trois documents, trois usages</div>
   <p class="slide-intro">Vous allez apprendre à localiser une information dans chacun des documents de référence d'un produit biocide.</p>
+  <div class="info-card">
+    <span>⏱️</span>
+    <div>Durée ≈ 30 min. Pour chaque question, sélectionnez la <strong>zone du document</strong> où trouver l'information, puis vérifiez votre score.</div>
+  </div>
   <div class="overview-grid">
     <div class="overview-card">
       <div class="overview-icon">📄</div>
@@ -753,10 +740,6 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
       <div class="overview-sub">Interface directe avec l'utilisateur</div>
     </div>
   </div>
-  <div class="info-card">
-    <span>⏱️</span>
-    <div>Durée ≈ 30 min. Pour chaque question, sélectionnez la <strong>zone du document</strong> où trouver l'information, puis vérifiez votre score.</div>
-  </div>
   <div class="identity-card">
     <div class="identity-title">👥 Identification du groupe</div>
     <div class="identity-fields">
@@ -771,7 +754,6 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
     </div>
     <div class="identity-error" id="idGroupe-error" hidden>⚠️ Renseignez le nom du stagiaire ou du groupe pour continuer.</div>
   </div>
-  <button class="btn btn-amber" onclick="startPart1()" style="margin-top:1.5rem;">Commencer la partie 1 →</button>
 </div>
 
 <!-- ============ SLIDE 2 — FDS INTRO ============ -->
@@ -784,7 +766,6 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
     <span>🎯</span>
     <div>Pour chaque question, indiquez dans quelle <strong>rubrique (1 à 16)</strong> trouver la réponse — ou « Absent » si l'information n'y figure pas. Les questions sont mélangées à chaque chargement.</div>
   </div>
-  <button class="btn btn-amber" onclick="goTo(3)" style="margin-top:1.5rem;">Répondre aux questions →</button>
 </div>
 
 <!-- ============ SLIDE 3 — FDS QUIZ (DRAG & DROP) ============ -->
@@ -796,12 +777,7 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
     <div class="quiz-list quiz-grid" id="fds-questions"></div>
     <div class="dnd-bank" id="fds-bank-right"></div>
   </div>
-  <button class="verify-btn btn-amber" id="fds-verify" onclick="verifyFDS()" disabled>✓ Vérifier mes réponses</button>
   <div id="fds-result" class="result-message"></div>
-  <div class="actions-row">
-    <button class="btn btn-outline" onclick="resetFDS()">↺ Recommencer</button>
-    <button class="btn btn-coral" onclick="goTo(4)">Passer à la partie 2 →</button>
-  </div>
 </div>
 
 <!-- ============ SLIDE 4 — FT INTRO ============ -->
@@ -814,7 +790,6 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
     <span>🎯</span>
     <div>Indiquez la <strong>section</strong> de la FT où trouver chaque information : Description, Propriétés biocides, Conditionnements, Utilisations — ou « Absent ».</div>
   </div>
-  <button class="btn btn-coral" onclick="goTo(5)" style="margin-top:1.5rem;">Répondre aux questions →</button>
 </div>
 
 <!-- ============ SLIDE 5 — FT : RELIER ============ -->
@@ -827,12 +802,7 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
       <div class="match-col match-left" id="ft-left"></div>
       <div class="match-col match-right" id="ft-right"></div>
     </div>
-    <button class="verify-btn btn-coral" id="ft-verify" onclick="verifyFT()" disabled>✓ Vérifier mes réponses</button>
     <div id="ft-result" class="result-message"></div>
-    <div class="actions-row">
-      <button class="btn btn-outline" onclick="resetFT()">↺ Recommencer</button>
-      <button class="btn btn-teal" onclick="goTo(6)">Passer à la partie 3 →</button>
-    </div>
   </div>
 </div>
 
@@ -844,9 +814,8 @@ 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>
-  <button class="btn btn-teal" onclick="goTo(7)" style="margin-top:1.5rem;">Répondre aux questions →</button>
 </div>
 
 <!-- ============ SLIDE 7 — ÉTIQUETTE CLIQUABLE (HOTSPOTS) ============ -->
@@ -911,9 +880,9 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
             <div class="lbl-picto-wrap">
               <span class="hotspot" data-zone="z-picto">
                 <span class="pictos">
-                  <span class="ghs"><span>🐟</span></span>
-                  <span class="ghs"><span>🧪</span></span>
-                  <span class="ghs excl"><span>!</span></span>
+                  <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>
@@ -923,38 +892,9 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
           <div class="lbl-footer">FHER — 2, rue de Sèze, 75009 Paris — Tél. 01 23 45 67 89</div>
         </div>
 
-        <div class="eti-side-hint" id="eti-side-hint">👉 Cliquez une zone de l'étiquette : sa justification réglementaire s'affiche ici, à côté du bidon.</div>
-
-        <div class="eti-pop" id="eti-pop" hidden>
-          <button class="pop-close" onclick="closeEtiPop()" aria-label="Fermer">×</button>
-          <div class="pop-status" id="pop-status"></div>
-          <div class="pop-title" id="pop-title"></div>
-          <div class="pop-reg" id="pop-reg"></div>
-        </div>
       </div>
 
       <div id="etiquette-result" class="result-message"></div>
-      <div class="actions-row">
-        <button class="btn btn-outline" onclick="resetEtiquette()">↺ Recommencer</button>
-        <button class="btn btn-teal" id="eti-recap-btn" onclick="showEtiRecap()" disabled>Voir le récapitulatif →</button>
-      </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 class="actions-row">
-        <button class="btn btn-outline" onclick="hideEtiRecap()">← Retour à l'exercice</button>
-        <button class="btn btn-amber" onclick="goTo(8)">Voir la synthèse générale →</button>
-      </div>
     </div>
 
   </div>
@@ -979,19 +919,10 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
         <tr><td><strong>Étiquette</strong></td><td>Dangers essentiels, interface rapide</td><td>À chaque prise du produit</td><td>Tous les utilisateurs</td></tr>
       </tbody>
     </table>
-    <ul class="tips-list">
-      <li><strong>FDS = Sécurité et dangers</strong> → à consulter AVANT manipulation.</li>
-      <li><strong>FT = Mode d'emploi et applications</strong> → à consulter pour l'utilisation.</li>
-      <li><strong>Étiquette = Interface rapide</strong> → lecture obligatoire avant ouverture du produit.</li>
-      <li>Les trois documents sont <strong>complémentaires</strong>, jamais redondants — chacun cible un besoin et un public différents.</li>
-    </ul>
     <div class="actions-row">
       <button class="btn btn-amber" onclick="exporterPDF()">⬇ Télécharger mes réponses (PDF)</button>
-      <a href="correction-fds.html" class="btn btn-outline">✔ Corriger un rendu</a>
-    </div>
-    <div class="actions-row" style="margin-top:0.5rem;">
+      <a href="corriger-exercice.html?exo=fds" class="btn btn-outline">✔ Corriger un rendu</a>
       <button class="btn btn-outline" onclick="restartAll()">↺ Recommencer</button>
-      <a href="../index.html#formations" class="btn btn-outline">Retour aux exercices</a>
     </div>
   </div>
 </div>
@@ -1024,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" }
 ];
@@ -1091,7 +1022,6 @@ 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
 
 function buildEtiquette() {
@@ -1099,7 +1029,6 @@ function buildEtiquette() {
   etiPos = 0;
   etiAnswers = {};
   etiFirstTry = {};
-  etiCurError = false;
 
   const card = document.getElementById('labelCard');
   card.querySelectorAll('.hotspot').forEach(h => h.classList.remove('hs-correct', 'hs-wrong'));
@@ -1107,9 +1036,7 @@ function buildEtiquette() {
   closeEtiPop();
   const r = document.getElementById('etiquette-result');
   r.className = 'result-message'; r.innerHTML = '';
-  document.getElementById('eti-recap-btn').disabled = true;
-  document.getElementById('eti-exercise').style.display = 'flex';
-  document.getElementById('eti-recap').style.display = 'none';
+  if (currentSlide === 7) renderBarActions();
 
   if (!etiInit) {
     card.addEventListener('click', onEtiClick);
@@ -1136,38 +1063,25 @@ function onEtiClick(e) {
   if (!hs) return;
   const clicked = hs.dataset.zone;
 
-  // Exploration libre une fois l'exercice terminé
-  if (etiPos >= etiOrder.length) {
-    openEtiPop(hs, 'info', clicked);
-    return;
-  }
+  // 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;
-    openEtiPop(hs, 'ok', clicked);
+
+  // 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++;
-    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);
-    openEtiPop(hs, 'ko', clicked);
-  }
 }
 
 function finishEtiquette() {
-  const correct = etiZones.filter(z => etiFirstTry[z.zone]).length;
-  showScore(document.getElementById('etiquette-result'), correct, etiZones.length);
-  document.getElementById('eti-recap-btn').disabled = false;
+  const b = document.getElementById('eti-recap-btn');
+  if (b) b.disabled = false;
 }
 
 /* Info-bulle réglementaire positionnée près de la zone cliquée */
@@ -1199,66 +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';
-
-  // 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';
-  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
@@ -1296,7 +1150,7 @@ function buildFtMatch() {
 
   initFtMatch();
   document.getElementById('ft-svg').innerHTML = '';
-  document.getElementById('ft-verify').disabled = true;
+  refreshFtState();
 }
 
 function resetFT() {
@@ -1354,7 +1208,8 @@ function refreshFtState() {
     dot.closest('.match-item').classList.toggle('connected', used);
   });
   const all = ftQuestions.every(q => ftConnections[q.id] != null);
-  document.getElementById('ft-verify').disabled = !all;
+  const btn = document.getElementById('ft-next');
+  if (btn) btn.disabled = !all;
 }
 
 function initFtMatch() {
@@ -1383,7 +1238,7 @@ document.addEventListener('pointerup', e => {
   if (!ftDrag) return;
   const target = document.elementFromPoint(e.clientX, e.clientY);
   const answerDot = target && target.closest('.match-dot[data-side="right"]');
-  if (answerDot) ftConnections[ftDrag.qid] = answerDot.dataset.answer;
+  if (answerDot) { marquerModifie(); ftConnections[ftDrag.qid] = answerDot.dataset.answer; }
   document.querySelectorAll('.match-dot.active').forEach(d => d.classList.remove('active'));
   ftDrag = null;
   refreshFtState();
@@ -1434,6 +1289,7 @@ function initFdsDnd() {
     r.className = 'result-message'; r.innerHTML = '';
   };
   const fill = (slot, v, l) => {
+    marquerModifie();
     slot.dataset.value = v; slot.textContent = l; slot.classList.add('filled');
     resetResults(); updateFdsGate();
   };
@@ -1474,7 +1330,8 @@ function initFdsDnd() {
 function updateFdsGate() {
   const slots = document.querySelectorAll('#slide-3 .drop-slot');
   const all = Array.from(slots).every(s => (s.dataset.value || '') !== '');
-  document.getElementById('fds-verify').disabled = !all;
+  const btn = document.getElementById('fds-next');
+  if (btn) btn.disabled = !all;
 }
 
 function wireVerifyGate(containerId, btnId) {
@@ -1676,6 +1533,7 @@ function goTo(n) {
   const sa = next.querySelector('.scroll-area');
   if (sa) sa.scrollTop = 0;
   updateUI();
+  if (n === 8) setTimeout(launchConfetti, 200);
 }
 
 function goBack() {
@@ -1691,20 +1549,68 @@ function goBack() {
   updateUI();
 }
 
+/* Boutons centralisés dans la bottom bar, un jeu par slide */
+function barBtn(bar, html, cls, fn, opts) {
+  opts = opts || {};
+  const b = document.createElement('button');
+  b.className = 'footer-btn ' + cls;
+  b.innerHTML = html;
+  if (opts.id) b.id = opts.id;
+  if (opts.disabled) b.disabled = true;
+  b.addEventListener('click', fn);
+  bar.appendChild(b);
+  return b;
+}
+
+function renderBarActions() {
+  const bar = document.getElementById('barActions');
+  if (!bar) return;
+  bar.innerHTML = '';
+  // Bouton retour intégré au groupe centré
+  if (history.length > 0) {
+    barBtn(bar, '← Retour', 'is-secondary', goBack);
+  }
+  switch (currentSlide) {
+    case 1:
+      barBtn(bar, 'Commencer la partie 1 →', 'is-primary', startPart1);
+      break;
+    case 2:
+      barBtn(bar, 'Répondre aux questions →', 'is-primary', () => goTo(3));
+      break;
+    case 3:
+      barBtn(bar, '↺ Recommencer', 'is-secondary', resetFDS);
+      barBtn(bar, 'Passer à la partie 2 →', 'is-primary', () => goTo(4), { id: 'fds-next' });
+      updateFdsGate();
+      break;
+    case 4:
+      barBtn(bar, 'Répondre aux questions →', 'is-primary', () => goTo(5));
+      break;
+    case 5:
+      barBtn(bar, '↺ Recommencer', 'is-secondary', resetFT);
+      barBtn(bar, 'Passer à la partie 3 →', 'is-primary', () => goTo(6), { id: 'ft-next' });
+      refreshFtState();
+      break;
+    case 6:
+      barBtn(bar, 'Répondre aux questions →', 'is-primary', () => goTo(7));
+      break;
+    case 7:
+      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)
+      break;
+  }
+}
+
 function updateUI() {
   document.getElementById('progressFill').style.width =
     currentSlide === 0 ? '0%' : ((currentSlide / totalSlides) * 100) + '%';
   document.getElementById('slideCounter').textContent =
     currentSlide === 0 ? '' : currentSlide + ' / ' + totalSlides;
   document.getElementById('bottomBar').style.display = currentSlide === 0 ? 'none' : 'flex';
-  document.getElementById('backBtn').style.display = history.length > 0 ? 'block' : 'none';
-
-  const badge = document.getElementById('phaseBadge');
-  const set = (bg, col, txt) => { badge.style.display = 'block'; badge.style.background = bg; badge.style.color = col; badge.textContent = txt; };
-  if (currentSlide === 2 || currentSlide === 3) set('var(--amber-light)', 'var(--amber-dark)', 'Partie 1 — FDS');
-  else if (currentSlide === 4 || currentSlide === 5) set('var(--coral-light)', 'var(--coral)', 'Partie 2 — FT');
-  else if (currentSlide === 6 || currentSlide === 7) set('var(--teal-light)', 'var(--teal-dark)', 'Partie 3 — Étiquette');
-  else badge.style.display = 'none';
+  renderBarActions();
 }
 
 function restartAll() {
@@ -1719,6 +1625,96 @@ function restartAll() {
   updateUI();
 }
 
+/* ======================== CONFETTIS ======================== */
+function launchConfetti() {
+  const canvas = document.getElementById('confettiCanvas');
+  if (!canvas) return;
+  const ctx = canvas.getContext('2d');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  canvas.style.display = 'block';
+
+  const colors = ['#BA7517', '#D85A30', '#F5DFB8', '#633806', '#F0A855', '#E8C068', '#FF8C5A'];
+  const particles = Array.from({ length: 180 }, () => ({
+    x: Math.random() * canvas.width,
+    y: -(Math.random() * canvas.height * 0.5),
+    w: Math.random() * 10 + 5,
+    h: Math.random() * 5 + 3,
+    color: colors[Math.floor(Math.random() * colors.length)],
+    rotation: Math.random() * Math.PI * 2,
+    rotSpeed: (Math.random() - 0.5) * 0.18,
+    vx: (Math.random() - 0.5) * 2.5,
+    vy: Math.random() * 3 + 2,
+    opacity: 1,
+    shape: Math.random() < 0.4 ? 'circle' : 'rect'
+  }));
+
+  let rafId;
+  let start = null;
+  const totalDuration = 3800;
+
+  function draw(ts) {
+    if (!start) start = ts;
+    const elapsed = ts - start;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    let active = false;
+
+    particles.forEach(p => {
+      p.x += p.vx;
+      p.y += p.vy;
+      p.vy += 0.04;
+      p.rotation += p.rotSpeed;
+      p.opacity = elapsed < totalDuration * 0.55
+        ? 1
+        : Math.max(0, 1 - (elapsed - totalDuration * 0.55) / (totalDuration * 0.45));
+
+      if (p.y < canvas.height + 20) active = true;
+
+      ctx.save();
+      ctx.translate(p.x, p.y);
+      ctx.rotate(p.rotation);
+      ctx.globalAlpha = p.opacity;
+      ctx.fillStyle = p.color;
+      if (p.shape === 'circle') {
+        ctx.beginPath();
+        ctx.arc(0, 0, p.w / 2, 0, Math.PI * 2);
+        ctx.fill();
+      } else {
+        ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
+      }
+      ctx.restore();
+    });
+
+    if (active && elapsed < totalDuration * 1.3) {
+      rafId = requestAnimationFrame(draw);
+    } else {
+      canvas.style.display = 'none';
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+  }
+
+  if (rafId) cancelAnimationFrame(rafId);
+  rafId = requestAnimationFrame(draw);
+}
+
+/* ======================== PROTECTION CONTRE LA PERTE DES RÉPONSES ======================== */
+/* Les réponses ne sont pas enregistrées : on avertit avant tout rechargement ou départ.
+   Le texte de la boîte est imposé par le navigateur, il n'est pas personnalisable. */
+let reponsesModifiees = false;
+function marquerModifie() { reponsesModifiees = true; }
+
+// Les champs texte déclenchent input/change ; les parties FDS (glisser-déposer),
+// FT (liaisons) et Étiquette (zones cliquables) appellent marquerModifie() directement.
+document.addEventListener('input', marquerModifie, true);
+document.addEventListener('change', marquerModifie, true);
+
+window.addEventListener('beforeunload', e => {
+  if (!reponsesModifiees) return;
+  e.preventDefault();
+  e.returnValue = '';
+});
+
 document.addEventListener('DOMContentLoaded', () => {
   generateQuizzes();
   updateUI();

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,40 +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 {
+/* IDENTIFICATION SCREEN — carte modèle BioCID / FDS */
+.identity-card {
+  background: white;
+  border: 0.5px solid var(--border);
+  border-radius: 14px;
+  padding: 16px 18px;
+  max-width: 460px;
   width: 100%;
-  max-width: 420px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  margin: 1.25rem 0;
+  margin: 1.25rem auto;
+  text-align: left;
 }
-.id-field label {
-  display: block;
+.identity-card .identity-title {
   font-family: 'Syne', sans-serif;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;
-  color: var(--text-muted);
-  margin-bottom: 6px;
-  text-align: left;
+  color: var(--amber-dark);
+  margin-bottom: 10px;
+  display: flex; align-items: center; gap: 6px;
 }
-.id-field input {
-  width: 100%;
+.identity-fields { display: flex; flex-direction: column; gap: 8px; }
+.identity-fields input {
   font-family: 'DM Sans', sans-serif;
-  font-size: 15px;
-  padding: 12px 16px;
-  border: 1.5px solid var(--border);
-  border-radius: 10px;
-  background: white;
+  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;
 }
-.id-field input:focus {
-  outline: none;
-  border-color: var(--amber);
-}
+.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 {
@@ -496,6 +492,19 @@
   line-height: 1.6;
   margin-bottom: 1.5rem;
 }
+.info-card {
+  background: var(--amber-light);
+  border-radius: 12px;
+  padding: 16px 20px;
+  max-width: 620px;
+  width: 100%;
+  font-size: 14px;
+  color: var(--amber-dark);
+  line-height: 1.6;
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
 .steps-row {
   display: flex;
   gap: 8px;
@@ -574,7 +583,7 @@
   gap: 12px;
   max-width: 640px;
   width: 100%;
-  margin: 1.5rem 0;
+  margin: 1.5rem auto;
 }
 .final-card {
   background: white;
@@ -606,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;
@@ -647,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 -->
@@ -666,48 +676,40 @@
   </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="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 — CONTEXTE & IDENTIFICATION ======================== -->
+<div class="slide" id="slide-1">
+  <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">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-form" style="margin-left:auto;margin-right:auto;">
-      <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 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>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="id-field">
-        <label for="inputDate">Date de la session</label>
+  <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>
-      <div class="id-field">
-        <label>Formateur de la session</label>
-        <div style="display:flex;gap:10px;margin-top:2px;">
+      <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>
-    <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="correction-tp-nuisibles.html" class="btn btn-outline btn-teal">Corriger</a>
-    </div>
-  </div>
-</div>
-
-<!-- ======================== SLIDE 1 — ACCUEIL ======================== -->
-<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 style="text-align:center; z-index:1;">
-    <div class="hero-label">Formation</div>
-    <div class="hero-title">CERTIBIOCIDE</div>
-    <div style="font-family:'Syne',sans-serif;font-size:clamp(14px,2.5vw,22px);font-weight:600;color:var(--amber-mid);letter-spacing:0.04em;margin-bottom:1.5rem;">TRAVAUX PRATIQUES</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-teal" onclick="goTo(2)">Démarrer la mission →</button>
+    <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>
 </div>
 
@@ -715,8 +717,12 @@
 <div class="slide" id="slide-2">
   <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);">Étape 1 / 3</div>
-  <div class="slide-title">Choisissez votre mission</div>
+  <div class="slide-title">🎯 Choisissez votre mission</div>
   <p class="slide-intro">Chaque groupe choisit un cas pratique. Vous travaillerez avec ce scénario tout au long des 3 exercices.</p>
+  <div class="info-card" style="margin-bottom:1.25rem;">
+    <span>💡</span>
+    <div>Le cas retenu conditionne <strong>tous les exercices suivants</strong> et apparaît dans le PDF final. Choisissez celui qui se rapproche le plus de votre pratique.</div>
+  </div>
   <div class="case-grid">
     <div class="case-card" onclick="selectCase('punaises','🛏️','Hôtel — Punaises de lit','Infestation importante dans un hôtel')">
       <div class="case-icon">🛏️</div>
@@ -744,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 ======================== -->
@@ -774,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 ======================== -->
@@ -792,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 ======================== -->
@@ -833,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>
 
@@ -871,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>
 
@@ -905,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>
 
@@ -930,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 ======================== -->
@@ -971,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>
 
@@ -1019,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>
 
@@ -1039,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 ======================== -->
@@ -1110,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>
 
@@ -1143,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="correction-tp-nuisibles.html" 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>
@@ -1164,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: '💡',
@@ -1250,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();
@@ -1279,37 +1280,31 @@ 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';
   }
 }
 
 function selectCase(key, icon, title, desc) {
+  marquerModifie();
   selectedCase.key = key;
   selectedCase.icon = icon;
   selectedCase.title = title;
   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() {
@@ -1379,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 ======================== */
@@ -1606,6 +1601,156 @@ function escapeHtml(str) {
   return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 
+/* ======================== SAUVEGARDE AUTOMATIQUE ======================== */
+/* Les réponses sont enregistrées dans le navigateur au fil de la saisie, puis
+   proposées à la restauration au rechargement. En file://, localStorage peut être
+   indisponible (Safari) : dans ce cas la page fonctionne normalement, sans filet. */
+const CLE_SAUVEGARDE = 'certibiocide:tp-nuisibles:v1';
+
+let reponsesModifiees = false;
+function marquerModifie() { reponsesModifiees = true; sauvegarder(); }
+
+document.addEventListener('input', marquerModifie, true);
+document.addEventListener('change', marquerModifie, true);
+
+// Avertit avant tout rechargement ou départ. Le texte de la boîte est imposé
+// par le navigateur, il n'est pas personnalisable.
+window.addEventListener('beforeunload', e => {
+  if (!reponsesModifiees) return;
+  e.preventDefault();
+  e.returnValue = '';
+});
+
+function etatCourant() {
+  const champs = {};
+  document.querySelectorAll('input[id], textarea[id]').forEach(el => {
+    if (el.value) champs[el.id] = el.value;
+  });
+  // Les cellules du tableau TP3 n'ont pas d'id : on les repère par leur position.
+  const risques = Array.from(document.querySelectorAll('#riskTableBody .risk-row'))
+    .map(row => Array.from(row.querySelectorAll('.risk-cell')).map(c => c.value));
+
+  return {
+    savedAt: new Date().toISOString(),
+    slide: currentSlide,
+    champs,
+    risques,
+    cas: selectedCase.key || '',
+    formateur: stagiaire.formateur || '',
+    nom: stagiaire.nom || '',
+    date: stagiaire.date || '',
+  };
+}
+
+let minuteurSauvegarde = null;
+function sauvegarder() {
+  clearTimeout(minuteurSauvegarde);
+  minuteurSauvegarde = setTimeout(() => {
+    try {
+      localStorage.setItem(CLE_SAUVEGARDE, JSON.stringify(etatCourant()));
+    } catch (e) { /* navigation privée ou quota : on continue sans sauvegarde */ }
+  }, 400);
+}
+
+function lireSauvegarde() {
+  try { return JSON.parse(localStorage.getItem(CLE_SAUVEGARDE)); }
+  catch (e) { return null; }
+}
+function effacerSauvegarde() {
+  try { localStorage.removeItem(CLE_SAUVEGARDE); } catch (e) {}
+}
+
+function appliquerSauvegarde(data) {
+  Object.entries(data.champs || {}).forEach(([id, v]) => {
+    const el = document.getElementById(id);
+    if (el) el.value = v;
+  });
+
+  // Recrée autant de lignes de risques que nécessaire avant de les remplir
+  const risques = data.risques || [];
+  const tbody = document.getElementById('riskTableBody');
+  while (tbody.querySelectorAll('.risk-row').length < risques.length) addRiskRow();
+  tbody.querySelectorAll('.risk-row').forEach((row, i) => {
+    const valeurs = risques[i] || [];
+    row.querySelectorAll('.risk-cell').forEach((cell, j) => { cell.value = valeurs[j] || ''; });
+  });
+
+  // Le cas pratique et le formateur passent par leurs boutons, qui remettent
+  // aussi l'interface (carte sélectionnée, bouton de confirmation) dans le bon état.
+  if (data.cas) {
+    const carte = Array.from(document.querySelectorAll('.case-card'))
+      .find(c => (c.getAttribute('onclick') || '').includes("'" + data.cas + "'"));
+    if (carte) carte.click();
+  }
+  if (data.formateur) {
+    const btn = document.getElementById('btn' + data.formateur);
+    if (btn) btn.click();
+  }
+  stagiaire.nom = data.nom || stagiaire.nom;
+  stagiaire.date = data.date || stagiaire.date;
+
+  reponsesModifiees = true;
+  if (typeof data.slide === 'number' && data.slide > 0) goTo(data.slide);
+  updateUI();
+}
+
+/* Bandeau de restauration : on ne restaure jamais sans demander, pour qu'un
+   nouveau groupe n'hérite pas des réponses du précédent sur un poste partagé. */
+function injecterStylesBandeau() {
+  const style = document.createElement('style');
+  style.textContent = `
+    .restore-bar {
+      position: fixed; top: 84px; left: 50%; transform: translateX(-50%);
+      z-index: 900; max-width: min(680px, calc(100vw - 32px));
+      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
+      background: var(--white); border: 1.5px solid var(--amber);
+      border-radius: 14px; padding: 14px 18px;
+      box-shadow: 0 8px 28px rgba(0,0,0,0.12); font-size: 13.5px;
+    }
+    .restore-bar .restore-text { flex: 1; min-width: 220px; line-height: 1.5; }
+    .restore-bar .restore-actions { display: flex; gap: 8px; flex-shrink: 0; }
+    .restore-bar button {
+      font-family: 'Syne', sans-serif; font-weight: 700; font-size: 12.5px;
+      padding: 8px 16px; border-radius: 20px; cursor: pointer;
+      border: 1px solid var(--border); background: transparent; color: var(--text-muted);
+    }
+    .restore-bar button:hover { border-color: var(--amber); color: var(--amber); }
+    .restore-bar button.primary {
+      background: var(--amber); border-color: var(--amber); color: #fff;
+    }
+    .restore-bar button.primary:hover { background: var(--amber-dark); border-color: var(--amber-dark); color: #fff; }
+  `;
+  document.head.appendChild(style);
+}
+
+function proposerRestauration() {
+  const data = lireSauvegarde();
+  if (!data) return;
+  const aDesReponses = (data.champs && Object.keys(data.champs).length > 0)
+    || (data.risques || []).some(r => r.some(v => v));
+  if (!aDesReponses) return;
+
+  const quand = new Date(data.savedAt);
+  const libelle = isNaN(quand.getTime()) ? '' :
+    ` du ${quand.toLocaleDateString('fr-FR')} à ${quand.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}`;
+
+  injecterStylesBandeau();
+  const bar = document.createElement('div');
+  bar.className = 'restore-bar';
+  bar.innerHTML = `
+    <span class="restore-text">💾 Des réponses enregistrées${libelle} ont été retrouvées sur ce poste.</span>
+    <span class="restore-actions">
+      <button type="button" class="primary" id="btnRestaurer">Restaurer</button>
+      <button type="button" id="btnRepartir">Repartir de zéro</button>
+    </span>`;
+  document.body.appendChild(bar);
+
+  document.getElementById('btnRestaurer').onclick = () => { appliquerSauvegarde(data); bar.remove(); };
+  document.getElementById('btnRepartir').onclick = () => { effacerSauvegarde(); bar.remove(); };
+}
+
+proposerRestauration();
+
 updateUI();
 </script>
 </body>

exercices/correction-biocid.html

@@ -1,525 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Correction BioCID — Certibiocide</title>
-<link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="../header-style.css"/>
-<style>
-body {
-  padding: calc(36px + 70px) 20px 80px;
-}
-.wrap { max-width: 820px; margin: 0 auto; }
-.syne { font-family: 'Syne', sans-serif; }
-.eyebrow {
-  font-family: 'Syne', sans-serif;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--amber);
-  margin-bottom: 6px;
-}
-h1 {
-  font-family: 'Syne', sans-serif;
-  font-size: 28px;
-  font-weight: 800;
-  letter-spacing: -0.5px;
-  margin-bottom: 28px;
-}
-
-/* DROPZONE */
-#dropzone {
-  background: #fff;
-  border: 2px dashed rgba(186,117,23,0.35);
-  border-radius: 16px;
-  padding: 56px 24px;
-  text-align: center;
-  cursor: pointer;
-  transition: border-color 0.2s, background 0.2s;
-}
-#dropzone.drag { border-color: var(--amber); background: var(--amber-light); }
-#dropzone .icon { font-size: 40px; margin-bottom: 12px; }
-#dropzone p.title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 6px; }
-#dropzone p.sub { color: var(--text-muted); font-size: 13.5px; margin-bottom: 20px; }
-#filePicker { display: none; }
-.btn-pick {
-  font-family: 'Syne', sans-serif;
-  display: inline-block;
-  background: var(--amber);
-  color: #fff;
-  font-weight: 700;
-  font-size: 13px;
-  padding: 10px 26px;
-  border-radius: 30px;
-  cursor: pointer;
-  border: none;
-}
-#status { margin-top: 16px; font-size: 13px; }
-#status.loading { color: var(--amber); }
-#status.error { color: var(--coral); }
-
-/* RESULT */
-#result { display: none; }
-.toprow {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 18px;
-}
-#fileName { font-size: 12.5px; color: var(--text-muted); }
-.btn-reset {
-  font-family: 'Syne', sans-serif;
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: 20px;
-  padding: 6px 16px;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  color: var(--text-muted);
-}
-.btn-reset:hover { border-color: var(--amber); color: var(--amber); }
-
-/* BANDEAU PARTICIPANTS */
-#participantsBanner {
-  background: linear-gradient(135deg, var(--amber) 0%, #D8923A 100%);
-  border-radius: 16px;
-  padding: 20px 26px;
-  margin-bottom: 24px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  color: #fff;
-  flex-wrap: wrap;
-}
-#participantsBanner .pb-icon {
-  width: 48px; height: 48px;
-  border-radius: 12px;
-  background: rgba(255,255,255,0.2);
-  display: flex; align-items: center; justify-content: center;
-  font-size: 24px;
-  flex-shrink: 0;
-}
-#participantsBanner .pb-group {
-  font-family: 'Syne', sans-serif;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  opacity: 0.85;
-  margin-bottom: 4px;
-}
-#participantsBanner .pb-names {
-  font-family: 'Syne', sans-serif;
-  font-size: 18px;
-  font-weight: 700;
-}
-#participantsBanner .pb-meta {
-  margin-left: auto;
-  font-size: 12.5px;
-  text-align: right;
-  opacity: 0.92;
-  line-height: 1.5;
-}
-
-.progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; font-size: 13px; color: var(--text-muted); }
-.progress-track { flex: 1; height: 7px; background: rgba(0,0,0,0.08); border-radius: 6px; overflow: hidden; }
-.progress-fill { height: 100%; background: var(--amber); transition: width 0.4s ease; }
-.progress-row strong { font-family: 'Syne', sans-serif; color: var(--text); }
-
-/* CARROUSEL DE THEMES */
-.carousel-wrap { margin-bottom: 36px; }
-.carousel-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-.nav-btn {
-  width: 38px; height: 38px;
-  border-radius: 50%;
-  border: 1px solid var(--border);
-  background: #fff;
-  font-size: 16px;
-  cursor: pointer;
-  display: flex; align-items: center; justify-content: center;
-  transition: background 0.15s, border-color 0.15s;
-}
-.nav-btn:hover { background: var(--amber-light); border-color: var(--amber); }
-.nav-btn:disabled { opacity: 0.3; cursor: default; }
-.nav-btn:disabled:hover { background: #fff; border-color: var(--border); }
-.dots { display: flex; gap: 7px; }
-.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.15); cursor: pointer; transition: background 0.15s, transform 0.15s; }
-.dot.active { background: var(--amber); transform: scale(1.3); }
-
-.theme-panel {
-  background: #fff;
-  border: 1px solid var(--border);
-  border-radius: 18px;
-  padding: 26px 28px;
-  min-height: 360px;
-}
-.theme-head {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 18px;
-}
-.theme-icon {
-  width: 44px; height: 44px;
-  border-radius: 12px;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 22px;
-  flex-shrink: 0;
-}
-.theme-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 17px; }
-.theme-count { font-size: 12.5px; color: var(--text-muted); margin-left: auto; }
-
-.cards { display: flex; flex-direction: column; gap: 10px; }
-.qcard {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 14px 18px;
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  transition: box-shadow 0.2s;
-}
-.qcard:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
-.qcard .badge {
-  width: 22px; height: 22px;
-  border-radius: 50%;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 12px;
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-.qcard .badge.ok { background: var(--teal-light); color: var(--teal); }
-.qcard .badge.miss { background: var(--coral-light); color: var(--coral); }
-.qcard .qtext { flex: 1; }
-.qcard .qlabel { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
-.qcard .qanswer { font-size: 13.5px; white-space: pre-wrap; }
-.qcard .qanswer.empty { color: var(--coral); font-style: italic; }
-</style>
-</head>
-<body>
-<header>
-    <div class="logo">Gauthier Chombart & Nathan Chauwin</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>
-
-<div class="wrap">
-  <div id="participantsBanner" style="display:none;"></div>
-  <div class="eyebrow">Certibiocide — Correction d'exercice</div>
-  <h1>Plateforme BioCID — Lecture du rendu</h1>
-
-  <div id="dropzone">
-    <div class="icon">📄</div>
-    <p class="title">Déposez le PDF du groupe ici</p>
-    <p class="sub">ou cliquez pour sélectionner le fichier exporté depuis l'exercice BioCID</p>
-    <label class="btn-pick">Choisir un fichier
-      <input type="file" id="filePicker" accept="application/pdf">
-    </label>
-    <div id="status"></div>
-  </div>
-
-  <div id="result">
-    <div class="toprow">
-      <span id="fileName"></span>
-      <button class="btn-reset" onclick="resetAll()">↺ Charger un autre PDF</button>
-    </div>
-
-    <div class="progress-row">
-      <div class="progress-track"><div class="progress-fill" id="progressFill"></div></div>
-      <span><strong id="progressCount"></strong> questions renseignées</span>
-    </div>
-
-    <div class="carousel-wrap">
-      <div class="carousel-nav">
-        <button class="nav-btn" id="prevBtn" onclick="goTo(currentTheme - 1)">←</button>
-        <div class="dots" id="dots"></div>
-        <button class="nav-btn" id="nextBtn" onclick="goTo(currentTheme + 1)">→</button>
-      </div>
-      <div id="themePanel"></div>
-    </div>
-  </div>
-</div>
-
-<footer>
-    <p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
-    <p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
-</footer>
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
-<script>
-pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
-
-// Les 4 exercices, avec les intitulés exacts exportés (data-question) comme clés.
-const THEMES = [
-  {
-    title: "Exercice 1 — Recherche par nom",
-    icon: "🔎", color: "amber",
-    items: [
-      "Ex1 — Produit : type, substance active, fabricant",
-      "Ex1 — Date d'autorisation",
-      "Ex1 — Conditions d'utilisation",
-    ]
-  },
-  {
-    title: "Exercice 2 — Recherche par type",
-    icon: "🗂️", color: "blue",
-    items: [
-      "Ex2 — Nombre de produits dans la catégorie",
-      "Ex2 — Comparaison entre catégories",
-    ]
-  },
-  {
-    title: "Exercice 3 — Recherche par substance",
-    icon: "🧪", color: "teal",
-    items: [
-      "Ex3 — 3 produits contenant la substance",
-      "Ex3 — Formulations et concentrations comparées",
-    ]
-  },
-  {
-    title: "Exercice 4 — Cas de synthèse",
-    icon: "📞", color: "coral",
-    items: [
-      "Ex4 — 3 produits applicables",
-      "Ex4 — Fiche de chaque produit",
-      "Ex4 — Argumentaire (+ bonus FDS)",
-    ]
-  },
-];
-
-const ALL_SECTIONS = THEMES.flatMap(t => t.items);
-
-const COLOR_MAP = {
-  amber:  { bg: "var(--amber-light)",  fg: "var(--amber-dark)" },
-  blue:   { bg: "var(--blue-light)",   fg: "var(--blue)" },
-  teal:   { bg: "var(--teal-light)",   fg: "var(--teal)" },
-  coral:  { bg: "var(--coral-light)",  fg: "var(--coral)" },
-};
-
-function escapeRx(s) { return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); }
-function escapeHtml(s) {
-  if (!s) return "";
-  return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
-}
-function isEmpty(v) {
-  if (!v) return true;
-  const t = v.trim();
-  return t === "" || /^\(sans réponse\)/i.test(t);
-}
-
-function captureBetween(text, label, nextLabels) {
-  const startRx = new RegExp(escapeRx(label) + "\\s*:?\\s*", "i");
-  const m = startRx.exec(text);
-  if (!m) return "";
-  const from = m.index + m[0].length;
-  let to = text.length;
-  for (const nl of nextLabels) {
-    const endRx = new RegExp(escapeRx(nl), "i");
-    const m2 = endRx.exec(text.slice(from));
-    if (m2 && from + m2.index < to) to = from + m2.index;
-  }
-  return text.slice(from, to).trim();
-}
-
-function parsePdfText(raw) {
-  let clean = raw.replace(/\r/g, "").replace(/[ \t]+\n/g, "\n").replace(/\s+/g, " ").trim();
-  // Retire les en-têtes/pieds d'impression du navigateur (date, titre, about:blank) sans toucher au corps
-  clean = clean.replace(/\d{1,2}\/\d{1,2}\/\d{4},?\s+\d{1,2}:\d{2}/g, " ");
-  clean = clean.replace(/Exercices BioCID\s*[—–-]\s*Réponses\s*\([^)]*\)/gi, " ");
-  clean = clean.replace(/about:blank\s*\d{1,3}\s*\/\s*\d{1,3}/gi, " ");
-  clean = clean.replace(/about:blank/gi, " ");
-  clean = clean.replace(/\s+\d{1,3}\/\d{1,3}\s*$/, " ");
-  clean = clean.replace(/\s+/g, " ").trim();
-
-  const meta = {
-    nom: captureBetween(clean, "Groupe / Stagiaire", ["Date de session"]),
-    date_session: captureBetween(clean, "Date de session", ["Formateur"]),
-    formateur: captureBetween(clean, "Formateur", ["Réponses aux exercices"]),
-  };
-
-  // Sépare "Groupe N" du nom des participants
-  const groupMatch = /^Groupe\s*(\d+)\s*[—\-:]*\s*(.*)$/i.exec(meta.nom.trim());
-  if (groupMatch) {
-    meta.groupe = "Groupe " + groupMatch[1];
-    meta.participants = groupMatch[2].trim();
-  } else {
-    meta.groupe = "";
-    meta.participants = meta.nom.trim();
-  }
-
-  const startIdx = clean.search(/Réponses aux exercices/i);
-  const block = startIdx >= 0 ? clean.slice(startIdx) : clean;
-
-  const answers = {};
-  for (let i = 0; i < ALL_SECTIONS.length; i++) {
-    const label = ALL_SECTIONS[i];
-    const nextLabel = ALL_SECTIONS[i + 1];
-    answers[label] = captureBetween(block, label, nextLabel ? [nextLabel] : []);
-  }
-
-  return { meta, answers };
-}
-
-let currentThemeData = null;
-let currentTheme = 0;
-
-function renderThemePanel() {
-  const theme = THEMES[currentTheme];
-  const data = currentThemeData;
-  const colors = COLOR_MAP[theme.color];
-  const themeAnswered = theme.items.filter(s => !isEmpty(data.answers[s])).length;
-
-  document.getElementById("themePanel").innerHTML = `
-    <div class="theme-panel">
-      <div class="theme-head">
-        <div class="theme-icon" style="background:${colors.bg};color:${colors.fg};">${theme.icon}</div>
-        <div class="theme-title">${theme.title}</div>
-        <div class="theme-count">${themeAnswered}/${theme.items.length}</div>
-      </div>
-      <div class="cards">
-        ${theme.items.map(label => {
-          const value = data.answers[label] || "";
-          const empty = isEmpty(value);
-          const displayLabel = label.replace(/^Ex\d+\s*[—-]\s*/, "");
-          return `
-            <div class="qcard">
-              <div class="badge ${empty ? 'miss' : 'ok'}">${empty ? '!' : '✓'}</div>
-              <div class="qtext">
-                <div class="qlabel">${escapeHtml(displayLabel)}</div>
-                <div class="qanswer ${empty ? 'empty' : ''}">${empty ? 'Sans réponse' : escapeHtml(value)}</div>
-              </div>
-            </div>
-          `;
-        }).join("")}
-      </div>
-    </div>
-  `;
-
-  document.getElementById("prevBtn").disabled = currentTheme === 0;
-  document.getElementById("nextBtn").disabled = currentTheme === THEMES.length - 1;
-  document.querySelectorAll(".dot").forEach((d, i) => d.classList.toggle("active", i === currentTheme));
-}
-
-function goTo(idx) {
-  if (idx < 0 || idx >= THEMES.length) return;
-  currentTheme = idx;
-  renderThemePanel();
-}
-
-function renderResult(data) {
-  currentThemeData = data;
-  currentTheme = 0;
-
-  const banner = document.getElementById("participantsBanner");
-  const noms = data.meta.participants || data.meta.nom;
-  if (noms) {
-    banner.style.display = "flex";
-    banner.innerHTML = `
-      <div class="pb-icon">👥</div>
-      <div>
-        <div class="pb-group">${escapeHtml(data.meta.groupe) || "Participants"}</div>
-        <div class="pb-names">${escapeHtml(noms)}</div>
-      </div>
-      <div class="pb-meta">
-        ${data.meta.date_session ? "Session : " + escapeHtml(data.meta.date_session) + "<br>" : ""}
-        ${data.meta.formateur ? "Formateur : " + escapeHtml(data.meta.formateur) : ""}
-      </div>
-    `;
-  } else {
-    banner.style.display = "none";
-  }
-
-  const answeredCount = ALL_SECTIONS.filter(s => !isEmpty(data.answers[s])).length;
-  document.getElementById("progressFill").style.width = (answeredCount / ALL_SECTIONS.length * 100) + "%";
-  document.getElementById("progressCount").textContent = `${answeredCount} / ${ALL_SECTIONS.length}`;
-
-  document.getElementById("dots").innerHTML = THEMES.map((_, i) =>
-    `<div class="dot${i === 0 ? ' active' : ''}" onclick="goTo(${i})"></div>`
-  ).join("");
-
-  renderThemePanel();
-
-  document.getElementById("dropzone").style.display = "none";
-  document.getElementById("result").style.display = "block";
-}
-
-async function handleFile(file) {
-  if (!file) return;
-  const statusEl = document.getElementById("status");
-  statusEl.className = "loading";
-  statusEl.textContent = "Lecture du PDF en cours…";
-  document.getElementById("fileName").textContent = file.name;
-
-  try {
-    const arrayBuffer = await file.arrayBuffer();
-    const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
-    let fullText = "";
-    for (let p = 1; p <= pdf.numPages; p++) {
-      const page = await pdf.getPage(p);
-      const content = await page.getTextContent();
-      fullText += content.items.map(it => it.str).join(" ") + "\n";
-    }
-    const data = parsePdfText(fullText);
-    renderResult(data);
-    statusEl.textContent = "";
-  } catch (e) {
-    console.error(e);
-    statusEl.className = "error";
-    statusEl.textContent = "Impossible de lire ce PDF. Vérifiez qu'il s'agit bien d'un export de l'exercice BioCID.";
-  }
-}
-
-function resetAll() {
-  document.getElementById("result").style.display = "none";
-  document.getElementById("dropzone").style.display = "block";
-  document.getElementById("participantsBanner").style.display = "none";
-  document.getElementById("status").textContent = "";
-  document.getElementById("filePicker").value = "";
-}
-
-const dropzone = document.getElementById("dropzone");
-dropzone.addEventListener("dragover", e => { e.preventDefault(); dropzone.classList.add("drag"); });
-dropzone.addEventListener("dragleave", () => dropzone.classList.remove("drag"));
-dropzone.addEventListener("drop", e => {
-  e.preventDefault();
-  dropzone.classList.remove("drag");
-  const file = e.dataTransfer.files?.[0];
-  if (file) handleFile(file);
-});
-document.getElementById("filePicker").addEventListener("change", e => handleFile(e.target.files?.[0]));
-
-// Chargement automatique depuis la page « Corriger un exercice » (?auto=1)
-(function autoLoadFromHub() {
-  const params = new URLSearchParams(location.search);
-  if (params.get("auto") !== "1") return;
-  const dataUrl = localStorage.getItem("correctionFile");
-  const name = localStorage.getItem("correctionFileName") || "rendu.pdf";
-  localStorage.removeItem("correctionFile");
-  localStorage.removeItem("correctionFileName");
-  localStorage.removeItem("correctionExo");
-  if (!dataUrl) return;
-  try {
-    const bin = atob(dataUrl.split(",").pop());
-    const bytes = new Uint8Array(bin.length);
-    for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
-    handleFile(new File([bytes], name, { type: "application/pdf" }));
-  } catch (e) { console.error(e); }
-})();
-</script>
-</body>
-</html>

exercices/correction-fds.html

@@ -1,622 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Correction FDS, FT & Étiquettes — Certibiocide</title>
-<link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="../header-style.css"/>
-<style>
-body {
-  padding: calc(36px + 70px) 20px 80px;
-}
-.wrap { max-width: 820px; margin: 0 auto; }
-.syne { font-family: 'Syne', sans-serif; }
-.eyebrow {
-  font-family: 'Syne', sans-serif;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--amber);
-  margin-bottom: 6px;
-}
-h1 {
-  font-family: 'Syne', sans-serif;
-  font-size: 28px;
-  font-weight: 800;
-  letter-spacing: -0.5px;
-  margin-bottom: 28px;
-}
-
-/* DROPZONE */
-#dropzone {
-  background: #fff;
-  border: 2px dashed rgba(186,117,23,0.35);
-  border-radius: 16px;
-  padding: 56px 24px;
-  text-align: center;
-  cursor: pointer;
-  transition: border-color 0.2s, background 0.2s;
-}
-#dropzone.drag { border-color: var(--amber); background: var(--amber-light); }
-#dropzone .icon { font-size: 40px; margin-bottom: 12px; }
-#dropzone p.title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 6px; }
-#dropzone p.sub { color: var(--text-muted); font-size: 13.5px; margin-bottom: 20px; }
-#filePicker { display: none; }
-.btn-pick {
-  font-family: 'Syne', sans-serif;
-  display: inline-block;
-  background: var(--amber);
-  color: #fff;
-  font-weight: 700;
-  font-size: 13px;
-  padding: 10px 26px;
-  border-radius: 30px;
-  cursor: pointer;
-  border: none;
-}
-#status { margin-top: 16px; font-size: 13px; }
-#status.loading { color: var(--amber); }
-#status.error { color: var(--coral); }
-
-/* RESULT */
-#result { display: none; }
-.toprow {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 18px;
-}
-#fileName { font-size: 12.5px; color: var(--text-muted); }
-.btn-reset {
-  font-family: 'Syne', sans-serif;
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: 20px;
-  padding: 6px 16px;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  color: var(--text-muted);
-}
-.btn-reset:hover { border-color: var(--amber); color: var(--amber); }
-
-/* BANDEAU PARTICIPANTS */
-#participantsBanner {
-  background: linear-gradient(135deg, var(--amber) 0%, #D8923A 100%);
-  border-radius: 16px;
-  padding: 20px 26px;
-  margin-bottom: 20px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  color: #fff;
-  flex-wrap: wrap;
-}
-#participantsBanner .pb-icon {
-  width: 48px; height: 48px;
-  border-radius: 12px;
-  background: rgba(255,255,255,0.2);
-  display: flex; align-items: center; justify-content: center;
-  font-size: 24px;
-  flex-shrink: 0;
-}
-#participantsBanner .pb-group {
-  font-family: 'Syne', sans-serif;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  opacity: 0.85;
-  margin-bottom: 4px;
-}
-#participantsBanner .pb-names {
-  font-family: 'Syne', sans-serif;
-  font-size: 18px;
-  font-weight: 700;
-}
-#participantsBanner .pb-meta {
-  margin-left: auto;
-  font-size: 12.5px;
-  text-align: right;
-  opacity: 0.92;
-  line-height: 1.5;
-}
-
-/* SCORE GLOBAL */
-.score-card {
-  background: #fff;
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  padding: 20px 24px;
-  margin-bottom: 26px;
-  display: flex;
-  align-items: center;
-  gap: 22px;
-  flex-wrap: wrap;
-}
-.score-ring {
-  width: 84px; height: 84px;
-  border-radius: 50%;
-  display: flex; align-items: center; justify-content: center;
-  flex-direction: column;
-  flex-shrink: 0;
-  color: #fff;
-  font-family: 'Syne', sans-serif;
-}
-.score-ring .score-pct { font-size: 22px; font-weight: 800; line-height: 1; }
-.score-ring .score-lbl { font-size: 9px; letter-spacing: 0.06em; opacity: 0.9; }
-.score-detail .score-main { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800; }
-.score-detail .score-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
-.score-parts { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
-.score-pill {
-  font-size: 12px;
-  padding: 6px 12px;
-  border-radius: 20px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  font-family: 'Syne', sans-serif;
-  font-weight: 600;
-}
-
-/* CARROUSEL DE PARTIES */
-.carousel-wrap { margin-bottom: 36px; }
-.carousel-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-.nav-btn {
-  width: 38px; height: 38px;
-  border-radius: 50%;
-  border: 1px solid var(--border);
-  background: #fff;
-  font-size: 16px;
-  cursor: pointer;
-  display: flex; align-items: center; justify-content: center;
-  transition: background 0.15s, border-color 0.15s;
-}
-.nav-btn:hover { background: var(--amber-light); border-color: var(--amber); }
-.nav-btn:disabled { opacity: 0.3; cursor: default; }
-.nav-btn:disabled:hover { background: #fff; border-color: var(--border); }
-.dots { display: flex; gap: 7px; }
-.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.15); cursor: pointer; transition: background 0.15s, transform 0.15s; }
-.dot.active { background: var(--amber); transform: scale(1.3); }
-
-.theme-panel {
-  background: #fff;
-  border: 1px solid var(--border);
-  border-radius: 18px;
-  padding: 26px 28px;
-  min-height: 360px;
-}
-.theme-head {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 18px;
-}
-.theme-icon {
-  width: 44px; height: 44px;
-  border-radius: 12px;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 22px;
-  flex-shrink: 0;
-}
-.theme-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 17px; }
-.theme-count { font-size: 12.5px; color: var(--text-muted); margin-left: auto; }
-
-.cards { display: flex; flex-direction: column; gap: 10px; }
-.qcard {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 14px 18px;
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  transition: box-shadow 0.2s;
-}
-.qcard:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
-.qcard .badge {
-  width: 22px; height: 22px;
-  border-radius: 50%;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 12px;
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-.qcard .badge.ok { background: var(--teal-light); color: var(--teal); }
-.qcard .badge.ko { background: var(--coral-light); color: var(--coral); }
-.qcard .badge.miss { background: rgba(0,0,0,0.06); color: var(--text-muted); }
-.qcard .qtext { flex: 1; }
-.qcard .qlabel { font-weight: 600; font-size: 13.5px; margin-bottom: 5px; }
-.qcard .qgroup { font-size: 13px; }
-.qcard .qgroup.ok { color: var(--teal); }
-.qcard .qgroup.ko { color: var(--coral); }
-.qcard .qgroup.miss { color: var(--text-muted); font-style: italic; }
-.qcard .qexpected { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
-</style>
-</head>
-<body>
-<header>
-    <div class="logo">Gauthier Chombart & Nathan Chauwin</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>
-
-<div class="wrap">
-  <div id="participantsBanner" style="display:none;"></div>
-  <div class="eyebrow">Certibiocide — Correction de TD</div>
-  <h1>FDS, FT & Étiquettes — Correction du rendu</h1>
-
-  <div id="dropzone">
-    <div class="icon">📄</div>
-    <p class="title">Déposez le PDF du groupe ici</p>
-    <p class="sub">ou cliquez pour sélectionner le fichier exporté depuis le TD FDS, FT &amp; Étiquettes</p>
-    <label class="btn-pick">Choisir un fichier
-      <input type="file" id="filePicker" accept="application/pdf">
-    </label>
-    <div id="status"></div>
-  </div>
-
-  <div id="result">
-    <div class="toprow">
-      <span id="fileName"></span>
-      <button class="btn-reset" onclick="resetAll()">↺ Charger un autre PDF</button>
-    </div>
-
-    <div class="score-card" id="scoreCard"></div>
-
-    <div class="carousel-wrap">
-      <div class="carousel-nav">
-        <button class="nav-btn" id="prevBtn" onclick="goTo(currentPart - 1)">←</button>
-        <div class="dots" id="dots"></div>
-        <button class="nav-btn" id="nextBtn" onclick="goTo(currentPart + 1)">→</button>
-      </div>
-      <div id="themePanel"></div>
-    </div>
-  </div>
-</div>
-
-<footer>
-    <p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
-    <p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
-</footer>
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
-<script>
-pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
-
-/* ==== Clé de correction (identique à l'exercice) ==== */
-const fdsQuestions = [
-  { id: 1, text: "Quel est le nom du produit et qui est le fabricant ?", answer: "1" },
-  { id: 2, text: "Quels sont les dangers du produit ?", answer: "2" },
-  { id: 3, text: "Quelles sont les molécules actives et leurs concentrations ?", answer: "3" },
-  { id: 4, text: "Quels gestes adopter en premiers secours ?", answer: "4" },
-  { id: 5, text: "En cas d'incendie, quels sont les moyens d'extinction conseillés ?", answer: "5" },
-  { id: 6, text: "Que faire en cas de dispersion accidentelle ?", answer: "6" },
-  { id: 7, text: "Dans quelles conditions stocker mon produit ?", answer: "7" },
-  { id: 8, text: "Quels équipements de protection individuelle (EPI) dois-je porter ?", answer: "8" },
-  { id: 9, text: "Quel est le pH de ce produit ?", answer: "9" },
-  { id: 10, text: "Le produit est-il stable dans des conditions normales ?", answer: "10" },
-  { id: 11, text: "Quels sont les effets potentiels sur la santé ?", answer: "11" },
-  { id: 12, text: "Quel est le degré de toxicité pour les poissons ? Potentiel de bioaccumulation ?", answer: "12" },
-  { id: 13, text: "Comment éliminer le produit ?", answer: "13" },
-  { id: 14, text: "Est-ce que mon produit est classé dangereux pour le transport ?", answer: "14" },
-  { id: 15, text: "En cas d'ingestion du produit, que faire ?", answer: "4,11" },
-  { id: 16, text: "Où trouver le mode d'emploi du produit ?", answer: "absent" }
-];
-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: "Description" },
-  { id: 3, text: "Quel est (sont) le(s) type(s) de ce 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" }
-];
-const etiquetteQuestions = [
-  { id: 1, text: "Quel est le nom du produit et le nom de l'entreprise ?", answer: "Identité" },
-  { id: 2, text: "Quels pictogrammes de danger sont affichés ?", answer: "Pictogrammes" },
-  { id: 3, text: "Quels sont les mots d'avertissement (« Attention » ou « Danger ») ?", answer: "Mots d'avertissement" },
-  { id: 4, text: "Quelles sont les mentions de danger (H-statements) identifiées ?", answer: "Mentions de danger" },
-  { id: 5, text: "Quels équipements de protection individuelle (EPI) sont recommandés ?", answer: "Conseils de prudence" },
-  { id: 6, text: "Quels premiers secours sont indiqués ?", answer: "Conseils de prudence" },
-  { id: 7, text: "Comment éliminer l'emballage après utilisation ?", answer: "Conseils de prudence" },
-  { id: 8, text: "Quel est le contenu net du produit ?", answer: "Contenu net" },
-  { id: 9, text: "Y a-t-il un numéro d'appel d'urgence mentionné ?", answer: "Numéro d'urgence" },
-  { id: 10, text: "Quelles consignes de stockage sont affichées ?", answer: "Conseils de prudence" }
-];
-
-const PARTS = [
-  { prefix: "P1", title: "Partie 1 — FDS", icon: "📄", color: "amber", questions: fdsQuestions, kind: "fds" },
-  { prefix: "P2", title: "Partie 2 — Fiche Technique", icon: "📋", color: "coral", questions: ftQuestions, kind: "text" },
-  { prefix: "P3", title: "Partie 3 — Étiquette", icon: "🏷️", color: "teal", questions: etiquetteQuestions, kind: "text" },
-];
-const COLOR_MAP = {
-  amber:  { bg: "var(--amber-light)",  fg: "var(--amber-dark)" },
-  coral:  { bg: "var(--coral-light)",  fg: "var(--coral)" },
-  teal:   { bg: "var(--teal-light)",   fg: "var(--teal)" },
-};
-
-function escapeRx(s) { return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); }
-function escapeHtml(s) {
-  if (!s) return "";
-  return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
-}
-
-function captureBetween(text, label, nextLabels) {
-  const startRx = new RegExp(escapeRx(label) + "\\s*:?\\s*", "i");
-  const m = startRx.exec(text);
-  if (!m) return "";
-  const from = m.index + m[0].length;
-  let to = text.length;
-  for (const nl of nextLabels) {
-    const endRx = new RegExp(escapeRx(nl), "i");
-    const m2 = endRx.exec(text.slice(from));
-    if (m2 && from + m2.index < to) to = from + m2.index;
-  }
-  return text.slice(from, to).trim();
-}
-
-// Extrait la réponse du groupe pour un marqueur [Px-Qn]
-function extractSelected(fullText, marker, nextMarker) {
-  const seg = captureBetween(fullText, marker, nextMarker ? [nextMarker] : []);
-  const m = /Réponse du groupe\s*:?\s*([\s\S]*?)\s*[—–-]*\s*Attendu\s*:/i.exec(seg);
-  return m ? m[1].trim() : "";
-}
-
-/* ==== Correction ==== */
-function normFdsToken(sel) {
-  if (!sel || /non répondu/i.test(sel)) return null;
-  if (/^absent$/i.test(sel.trim())) return "absent";
-  const m = /(\d+)/.exec(sel);
-  return m ? m[1] : "";
-}
-function scoreFds(q, sel) {
-  const tok = normFdsToken(sel);
-  if (tok === null) return { state: "miss" };
-  return { state: q.answer.split(",").includes(tok) ? "ok" : "ko" };
-}
-function scoreText(q, sel) {
-  if (!sel || /non répondu/i.test(sel)) return { state: "miss" };
-  const norm = /^absent$/i.test(sel.trim()) ? "absent" : sel.trim();
-  return { state: norm.toLowerCase() === q.answer.toLowerCase() ? "ok" : "ko" };
-}
-function expectedLabel(part, q) {
-  if (part.kind === "fds") {
-    const parts = q.answer.split(",");
-    if (parts.length > 1) return "Rubrique " + parts.join(" ou ");
-    return parts[0] === "absent" ? "Absent" : "Rubrique " + parts[0];
-  }
-  return q.answer;
-}
-
-function parsePdfText(raw) {
-  let clean = raw.replace(/\r/g, "").replace(/[ \t]+\n/g, "\n").replace(/\s+/g, " ").trim();
-  // Nettoie les en-têtes/pieds d'impression du navigateur sans toucher au corps du document
-  clean = clean.replace(/\d{1,2}\/\d{1,2}\/\d{4},?\s+\d{1,2}:\d{2}/g, " ");
-  clean = clean.replace(/FDS, FT (&|&amp;) Étiquettes\s*[—–-]\s*Réponses\s*\([^)]*\)/gi, " ");
-  clean = clean.replace(/about:blank\s*\d{1,3}\s*\/\s*\d{1,3}/gi, " ");
-  clean = clean.replace(/about:blank/gi, " ");
-  clean = clean.replace(/\s+/g, " ").trim();
-
-  const meta = {
-    nom: captureBetween(clean, "Groupe / Stagiaire", ["Date de session"]),
-    date_session: captureBetween(clean, "Date de session", ["Formateur"]),
-    formateur: captureBetween(clean, "Formateur", ["Score global"]),
-  };
-  const groupMatch = /^Groupe\s*(\d+)\s*[—\-:]*\s*(.*)$/i.exec(meta.nom.trim());
-  if (groupMatch) {
-    meta.groupe = "Groupe " + groupMatch[1];
-    meta.participants = groupMatch[2].trim();
-  } else {
-    meta.groupe = "";
-    meta.participants = meta.nom.trim();
-  }
-
-  // Liste ordonnée de tous les marqueurs pour borner chaque extraction
-  const markers = [];
-  PARTS.forEach(p => p.questions.forEach((q, i) => markers.push("[" + p.prefix + "-Q" + (i + 1) + "]")));
-
-  const selected = {};
-  let mIdx = 0;
-  PARTS.forEach(p => {
-    p.questions.forEach((q, i) => {
-      const marker = "[" + p.prefix + "-Q" + (i + 1) + "]";
-      const next = markers[mIdx + 1];
-      selected[marker] = extractSelected(clean, marker, next);
-      mIdx++;
-    });
-  });
-
-  return { meta, selected };
-}
-
-let currentData = null;
-let currentPart = 0;
-
-function partResults(part) {
-  return part.questions.map((q, i) => {
-    const marker = "[" + part.prefix + "-Q" + (i + 1) + "]";
-    const sel = (currentData.selected[marker] || "").trim();
-    const res = part.kind === "fds" ? scoreFds(q, sel) : scoreText(q, sel);
-    return { q, i, sel, state: res.state };
-  });
-}
-
-function renderPart() {
-  const part = PARTS[currentPart];
-  const colors = COLOR_MAP[part.color];
-  const results = partResults(part);
-  const ok = results.filter(r => r.state === "ok").length;
-
-  document.getElementById("themePanel").innerHTML = `
-    <div class="theme-panel">
-      <div class="theme-head">
-        <div class="theme-icon" style="background:${colors.bg};color:${colors.fg};">${part.icon}</div>
-        <div class="theme-title">${part.title}</div>
-        <div class="theme-count">${ok}/${results.length} corrects</div>
-      </div>
-      <div class="cards">
-        ${results.map(r => {
-          const badge = r.state === "ok" ? "ok" : (r.state === "ko" ? "ko" : "miss");
-          const badgeIcon = r.state === "ok" ? "✓" : (r.state === "ko" ? "✗" : "?");
-          const groupTxt = r.state === "miss" ? "Sans réponse" : escapeHtml(r.sel);
-          const showExpected = r.state !== "ok";
-          return `
-            <div class="qcard">
-              <div class="badge ${badge}">${badgeIcon}</div>
-              <div class="qtext">
-                <div class="qlabel">Q${r.i + 1}. ${escapeHtml(r.q.text)}</div>
-                <div class="qgroup ${badge}">Réponse du groupe : ${groupTxt}</div>
-                ${showExpected ? `<div class="qexpected">Attendu : ${escapeHtml(expectedLabel(part, r.q))}</div>` : ""}
-              </div>
-            </div>
-          `;
-        }).join("")}
-      </div>
-    </div>
-  `;
-
-  document.getElementById("prevBtn").disabled = currentPart === 0;
-  document.getElementById("nextBtn").disabled = currentPart === PARTS.length - 1;
-  document.querySelectorAll(".dot").forEach((d, i) => d.classList.toggle("active", i === currentPart));
-}
-
-function goTo(idx) {
-  if (idx < 0 || idx >= PARTS.length) return;
-  currentPart = idx;
-  renderPart();
-}
-
-function renderResult(data) {
-  currentData = data;
-  currentPart = 0;
-
-  const banner = document.getElementById("participantsBanner");
-  const noms = data.meta.participants || data.meta.nom;
-  if (noms) {
-    banner.style.display = "flex";
-    banner.innerHTML = `
-      <div class="pb-icon">👥</div>
-      <div>
-        <div class="pb-group">${escapeHtml(data.meta.groupe) || "Participants"}</div>
-        <div class="pb-names">${escapeHtml(noms)}</div>
-      </div>
-      <div class="pb-meta">
-        ${data.meta.date_session ? "Session : " + escapeHtml(data.meta.date_session) + "<br>" : ""}
-        ${data.meta.formateur ? "Formateur : " + escapeHtml(data.meta.formateur) : ""}
-      </div>
-    `;
-  } else {
-    banner.style.display = "none";
-  }
-
-  // Score global + par partie
-  let totalOk = 0, totalNb = 0;
-  const pillHtml = PARTS.map(p => {
-    const results = partResults(p);
-    const ok = results.filter(r => r.state === "ok").length;
-    totalOk += ok; totalNb += results.length;
-    return `<div class="score-pill">${p.icon} ${ok}/${results.length}</div>`;
-  }).join("");
-
-  const pct = totalNb ? Math.round((totalOk / totalNb) * 100) : 0;
-  const ringColor = pct >= 80 ? "var(--teal-mid)" : (pct >= 60 ? "var(--amber)" : "var(--coral-mid)");
-  const verdict = pct >= 80 ? "Très bon rendu" : (pct >= 60 ? "Rendu correct" : "À revoir en priorité");
-
-  document.getElementById("scoreCard").innerHTML = `
-    <div class="score-ring" style="background:${ringColor};">
-      <div class="score-pct">${pct}%</div>
-      <div class="score-lbl">RÉUSSITE</div>
-    </div>
-    <div class="score-detail">
-      <div class="score-main">${totalOk} / ${totalNb} bonnes réponses</div>
-      <div class="score-sub">${verdict}</div>
-    </div>
-    <div class="score-parts">${pillHtml}</div>
-  `;
-
-  document.getElementById("dots").innerHTML = PARTS.map((_, i) =>
-    `<div class="dot${i === 0 ? ' active' : ''}" onclick="goTo(${i})"></div>`
-  ).join("");
-
-  renderPart();
-
-  document.getElementById("dropzone").style.display = "none";
-  document.getElementById("result").style.display = "block";
-}
-
-async function handleFile(file) {
-  if (!file) return;
-  const statusEl = document.getElementById("status");
-  statusEl.className = "loading";
-  statusEl.textContent = "Lecture du PDF en cours…";
-  document.getElementById("fileName").textContent = file.name;
-
-  try {
-    const arrayBuffer = await file.arrayBuffer();
-    const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
-    let fullText = "";
-    for (let p = 1; p <= pdf.numPages; p++) {
-      const page = await pdf.getPage(p);
-      const content = await page.getTextContent();
-      fullText += content.items.map(it => it.str).join(" ") + "\n";
-    }
-    const data = parsePdfText(fullText);
-    renderResult(data);
-    statusEl.textContent = "";
-  } catch (e) {
-    console.error(e);
-    statusEl.className = "error";
-    statusEl.textContent = "Impossible de lire ce PDF. Vérifiez qu'il s'agit bien d'un export du TD FDS, FT & Étiquettes.";
-  }
-}
-
-function resetAll() {
-  document.getElementById("result").style.display = "none";
-  document.getElementById("dropzone").style.display = "block";
-  document.getElementById("participantsBanner").style.display = "none";
-  document.getElementById("status").textContent = "";
-  document.getElementById("filePicker").value = "";
-}
-
-const dropzone = document.getElementById("dropzone");
-dropzone.addEventListener("dragover", e => { e.preventDefault(); dropzone.classList.add("drag"); });
-dropzone.addEventListener("dragleave", () => dropzone.classList.remove("drag"));
-dropzone.addEventListener("drop", e => {
-  e.preventDefault();
-  dropzone.classList.remove("drag");
-  const file = e.dataTransfer.files?.[0];
-  if (file) handleFile(file);
-});
-document.getElementById("filePicker").addEventListener("change", e => handleFile(e.target.files?.[0]));
-
-// Chargement automatique depuis la page « Corriger un exercice » (?auto=1)
-(function autoLoadFromHub() {
-  const params = new URLSearchParams(location.search);
-  if (params.get("auto") !== "1") return;
-  const dataUrl = localStorage.getItem("correctionFile");
-  const name = localStorage.getItem("correctionFileName") || "rendu.pdf";
-  localStorage.removeItem("correctionFile");
-  localStorage.removeItem("correctionFileName");
-  localStorage.removeItem("correctionExo");
-  if (!dataUrl) return;
-  try {
-    const bin = atob(dataUrl.split(",").pop());
-    const bytes = new Uint8Array(bin.length);
-    for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
-    handleFile(new File([bytes], name, { type: "application/pdf" }));
-  } catch (e) { console.error(e); }
-})();
-</script>
-</body>
-</html>

exercices/correction-tp-nuisibles.html

@@ -1,668 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Correction TP Nuisibles — Certibiocide</title>
-<link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="../header-style.css"/>
-<style>
-body {
-  padding: calc(36px + 70px) 20px 80px;
-}
-.wrap { max-width: 820px; margin: 0 auto; }
-.syne { font-family: 'Syne', sans-serif; }
-.eyebrow {
-  font-family: 'Syne', sans-serif;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--amber);
-  margin-bottom: 6px;
-}
-h1 {
-  font-family: 'Syne', sans-serif;
-  font-size: 28px;
-  font-weight: 800;
-  letter-spacing: -0.5px;
-  margin-bottom: 28px;
-}
-
-/* DROPZONE */
-#dropzone {
-  background: #fff;
-  border: 2px dashed rgba(186,117,23,0.35);
-  border-radius: 16px;
-  padding: 56px 24px;
-  text-align: center;
-  cursor: pointer;
-  transition: border-color 0.2s, background 0.2s;
-}
-#dropzone.drag { border-color: var(--amber); background: var(--amber-light); }
-#dropzone .icon { font-size: 40px; margin-bottom: 12px; }
-#dropzone p.title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 6px; }
-#dropzone p.sub { color: var(--text-muted); font-size: 13.5px; margin-bottom: 20px; }
-#filePicker { display: none; }
-.btn-pick {
-  font-family: 'Syne', sans-serif;
-  display: inline-block;
-  background: var(--amber);
-  color: #fff;
-  font-weight: 700;
-  font-size: 13px;
-  padding: 10px 26px;
-  border-radius: 30px;
-  cursor: pointer;
-  border: none;
-}
-#status { margin-top: 16px; font-size: 13px; }
-#status.loading { color: var(--amber); }
-#status.error { color: var(--coral); }
-
-/* RESULT */
-#result { display: none; }
-.toprow {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 18px;
-}
-#fileName { font-size: 12.5px; color: var(--text-muted); }
-.btn-reset {
-  font-family: 'Syne', sans-serif;
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: 20px;
-  padding: 6px 16px;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  color: var(--text-muted);
-}
-.btn-reset:hover { border-color: var(--amber); color: var(--amber); }
-
-.id-card { display: none; }
-
-/* BANDEAU PARTICIPANTS */
-#participantsBanner {
-  background: linear-gradient(135deg, var(--amber) 0%, #D8923A 100%);
-  border-radius: 16px;
-  padding: 20px 26px;
-  margin-bottom: 24px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  color: #fff;
-}
-#participantsBanner .pb-icon {
-  width: 48px; height: 48px;
-  border-radius: 12px;
-  background: rgba(255,255,255,0.2);
-  display: flex; align-items: center; justify-content: center;
-  font-size: 24px;
-  flex-shrink: 0;
-}
-#participantsBanner .pb-group {
-  font-family: 'Syne', sans-serif;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  opacity: 0.85;
-  margin-bottom: 4px;
-}
-#participantsBanner .pb-names {
-  font-family: 'Syne', sans-serif;
-  font-size: 18px;
-  font-weight: 700;
-}
-.id-card .label {
-  font-family: 'Syne', sans-serif;
-  font-size: 10.5px;
-  font-weight: 700;
-  color: var(--amber-dark);
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-.id-card .value { font-size: 14.5px; margin-top: 2px; }
-
-.progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; font-size: 13px; color: var(--text-muted); }
-.progress-track { flex: 1; height: 7px; background: rgba(0,0,0,0.08); border-radius: 6px; overflow: hidden; }
-.progress-fill { height: 100%; background: var(--teal); transition: width 0.4s ease; }
-.progress-row strong { font-family: 'Syne', sans-serif; color: var(--text); }
-
-/* CARROUSEL DE THEMES */
-.carousel-wrap { margin-bottom: 36px; }
-.carousel-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-.nav-btn {
-  width: 38px; height: 38px;
-  border-radius: 50%;
-  border: 1px solid var(--border);
-  background: #fff;
-  font-size: 16px;
-  cursor: pointer;
-  display: flex; align-items: center; justify-content: center;
-  transition: background 0.15s, border-color 0.15s;
-}
-.nav-btn:hover { background: var(--amber-light); border-color: var(--amber); }
-.nav-btn:disabled { opacity: 0.3; cursor: default; }
-.nav-btn:disabled:hover { background: #fff; border-color: var(--border); }
-.dots { display: flex; gap: 7px; }
-.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.15); cursor: pointer; transition: background 0.15s, transform 0.15s; }
-.dot.active { background: var(--amber); transform: scale(1.3); }
-
-.theme-panel {
-  background: #fff;
-  border: 1px solid var(--border);
-  border-radius: 18px;
-  padding: 26px 28px;
-  min-height: 420px;
-}
-.theme-head {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 18px;
-}
-.theme-icon {
-  width: 44px; height: 44px;
-  border-radius: 12px;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 22px;
-  flex-shrink: 0;
-}
-.theme-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 17px; }
-.theme-count { font-size: 12.5px; color: var(--text-muted); margin-left: auto; }
-
-.cards { display: flex; flex-direction: column; gap: 10px; }
-.qcard {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 14px 18px;
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  transition: box-shadow 0.2s;
-}
-.qcard:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
-.qcard .badge {
-  width: 22px; height: 22px;
-  border-radius: 50%;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 12px;
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-.qcard .badge.ok { background: var(--teal-light); color: var(--teal); }
-.qcard .badge.miss { background: var(--coral-light); color: var(--coral); }
-.qcard .qtext { flex: 1; }
-.qcard .qlabel { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
-.qcard .qanswer { font-size: 13.5px; white-space: pre-wrap; }
-.qcard .qanswer.empty { color: var(--coral); font-style: italic; }
-
-.table-wrap {
-  background: #fff;
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 16px 18px;
-  font-size: 13px;
-  margin-bottom: 14px;
-}
-
-/* TABLEAU ANALYSE DE RISQUES */
-.risk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
-.risk-table th {
-  font-family: 'Syne', sans-serif;
-  text-align: left;
-  font-size: 11.5px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--amber-dark);
-  background: var(--amber-light);
-  padding: 10px 12px;
-}
-.risk-table th:first-child { border-radius: 8px 0 0 8px; }
-.risk-table th:last-child { border-radius: 0 8px 8px 0; }
-.risk-table td {
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border);
-  vertical-align: top;
-  white-space: pre-wrap;
-}
-.risk-table tr:last-child td { border-bottom: none; }
-.meta-line { font-size: 12.5px; color: var(--text-muted); margin-top: 20px; }
-.meta-line strong { color: var(--text); }
-</style>
-</head>
-<body>
-<header>
-    <div class="logo">Gauthier Chombart & Nathan Chauwin</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>
-
-<div class="wrap">
-  <div id="participantsBanner" style="display:none;"></div>
-  <div class="eyebrow">Certibiocide — Correction de TP</div>
-  <h1>TP Nuisibles — Lecture du rendu</h1>
-
-  <div id="dropzone">
-    <div class="icon">📄</div>
-    <p class="title">Déposez le PDF du stagiaire ici</p>
-    <p class="sub">ou cliquez pour sélectionner le fichier exporté depuis le TP</p>
-    <label class="btn-pick">Choisir un fichier
-      <input type="file" id="filePicker" accept="application/pdf">
-    </label>
-    <div id="status"></div>
-  </div>
-
-  <div id="result">
-    <div class="toprow">
-      <span id="fileName"></span>
-      <button class="btn-reset" onclick="resetAll()">↺ Charger un autre PDF</button>
-    </div>
-
-    <div class="id-card" id="idCard"></div>
-
-    <div class="progress-row">
-      <div class="progress-track"><div class="progress-fill" id="progressFill"></div></div>
-      <span><strong id="progressCount"></strong> questions répondues</span>
-    </div>
-
-    <div class="carousel-wrap">
-      <div class="carousel-nav">
-        <button class="nav-btn" id="prevBtn" onclick="goTo(currentTheme - 1)">←</button>
-        <div class="dots" id="dots"></div>
-        <button class="nav-btn" id="nextBtn" onclick="goTo(currentTheme + 1)">→</button>
-      </div>
-      <div id="themePanel"></div>
-    </div>
-
-    <h2 class="syne" style="font-size:16px;font-weight:800;margin-bottom:12px;color:var(--amber-dark);">Analyse de risques</h2>
-    <div class="table-wrap" id="tp3Meta"></div>
-    <div class="table-wrap" id="tp3Table" style="display:none;"></div>
-    <p class="meta-line" id="suiviLine"></p>
-  </div>
-</div>
-
-<footer>
-    <p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
-    <p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
-</footer>
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
-<script>
-pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
-
-// Thèmes regroupant les sections du TP, avec icône et couleur
-const THEMES = [
-  {
-    title: "Premier contact & diagnostic",
-    icon: "🗣️", color: "purple",
-    items: [
-      "Questions posées au client lors du premier contact",
-      "Conseils donnés en premier lieu",
-      "Actions de prévention menées sur le site",
-      "Éléments observés / preuve de présence du nuisible",
-    ]
-  },
-  {
-    title: "Solutions envisagées",
-    icon: "🧰", color: "blue",
-    items: [
-      "Solutions alternatives non-biocides",
-      "Solutions biocides mises en place",
-      "Type de produit (TP) et mode de traitement",
-      "Suivi mis en place et durée",
-      "Gestion des déchets",
-    ]
-  },
-  {
-    title: "Produit & traçabilité",
-    icon: "🧪", color: "teal",
-    items: [
-      "FDS trouvée (éléments principaux)",
-      "Nom du produit et fabricant/fournisseur",
-      "Numéro AMM",
-    ]
-  },
-  {
-    title: "Sécurité & santé",
-    icon: "🛡️", color: "coral",
-    items: [
-      "Risques pour la santé",
-      "EPI à porter",
-      "Risques environnement / dispersion accidentelle",
-      "DL50 substance(s) active(s)",
-      "Gestes de premiers secours",
-    ]
-  },
-];
-
-const ALL_SECTIONS = THEMES.flatMap(t => t.items);
-
-const COLOR_MAP = {
-  purple: { bg: "var(--purple-light)", fg: "var(--purple)" },
-  blue:   { bg: "var(--blue-light)",   fg: "var(--blue)" },
-  teal:   { bg: "var(--teal-light)",   fg: "var(--teal)" },
-  coral:  { bg: "var(--coral-light)",  fg: "var(--coral)" },
-};
-
-function escapeRx(s) { return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); }
-function escapeHtml(s) {
-  if (!s) return "";
-  return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
-}
-function isEmpty(v) {
-  if (!v) return true;
-  const t = v.trim();
-  return t === "" || /^\(sans réponse\)$/i.test(t);
-}
-
-function captureBetween(text, label, nextLabels) {
-  const startRx = new RegExp(escapeRx(label) + "\\s*:?\\s*", "i");
-  const m = startRx.exec(text);
-  if (!m) return "";
-  const from = m.index + m[0].length;
-  let to = text.length;
-  for (const nl of nextLabels) {
-    const endRx = new RegExp(escapeRx(nl), "i");
-    const m2 = endRx.exec(text.slice(from));
-    if (m2 && from + m2.index < to) to = from + m2.index;
-  }
-  return text.slice(from, to).trim();
-}
-
-function parsePdfText(raw) {
-  let clean = raw.replace(/\r/g, "").replace(/[ \t]+\n/g, "\n").replace(/\s+/g, " ").trim();
-  // Retire les répétitions d'en-tête de page (ex: "17/06/2026 15:42 Résultats TP — ... about:blank 1/2")
-  clean = clean.replace(/\d{1,2}\/\d{1,2}\/\d{4}\s+\d{1,2}:\d{2}\s+Résultats TP[^]*?about:blank\s*\d\/\d/gi, " ");
-
-  const meta = {
-    nom: captureBetween(clean, "Groupe / Stagiaire", ["Date de session"]),
-    date_session: captureBetween(clean, "Date de session", ["Formateur"]),
-    formateur: captureBetween(clean, "Formateur", ["Cas pratique"]),
-    cas: captureBetween(clean, "Cas pratique", ["Réponses TP1"]),
-  };
-
-  // Sépare "Groupe N" du nom des participants (ex: "Groupe 1 Romain Kevin Valere Greg P")
-  const groupMatch = /^Groupe\s*(\d+)\s*(.*)$/i.exec(meta.nom.trim());
-  if (groupMatch) {
-    meta.groupe = "Groupe " + groupMatch[1];
-    meta.participants = groupMatch[2].trim();
-  } else {
-    meta.groupe = "";
-    meta.participants = meta.nom.trim();
-  }
-
-  const startIdx = clean.search(/Réponses TP1\s*&?\s*TP2/i);
-  const endIdx = clean.search(/TP3\s*[—-]\s*Analyse de risques/i);
-  const block = startIdx >= 0 ? clean.slice(startIdx, endIdx >= 0 ? endIdx : clean.length) : clean;
-
-  const answers = {};
-  for (let i = 0; i < ALL_SECTIONS.length; i++) {
-    const label = ALL_SECTIONS[i];
-    const nextLabel = ALL_SECTIONS[i + 1];
-    answers[label] = captureBetween(block, label, nextLabel ? [nextLabel] : []);
-  }
-
-  const tp3Zone = endIdx >= 0 ? clean.slice(endIdx) : "";
-  const tp3 = {
-    intitule: captureBetween(tp3Zone, "Intitulé", ["Description"]),
-    description: captureBetween(tp3Zone, "Description", ["Lieu"]),
-    lieu: captureBetween(tp3Zone, "Lieu", ["Début prévu le"]),
-    debut: captureBetween(tp3Zone, "Début prévu le", ["Étapes"]),
-  };
-
-  // Tableau de risques : on découpe en s'appuyant sur les intitulés d'étapes connus du TP
-  const KNOWN_STEPS = [
-    "remplir la poudreuse",
-    "sécurisation du site",
-    "application traitements",
-    "rangement du matériel. purger la perche",
-    "retrait du nid",
-    "gestion des déchets. élimination par des filiaires spé.",
-  ];
-  let riskRows = [];
-  const tableMatch = /Étapes\s*Risques\s*Mesures de prévention([\s\S]*?)(Réalisée par|$)/i.exec(tp3Zone);
-  if (tableMatch) {
-    let raw = tableMatch[1].trim();
-    if (raw) {
-      // Repère les positions de chaque étape connue dans le texte aplati
-      const positions = [];
-      KNOWN_STEPS.forEach(step => {
-        const idx = raw.toLowerCase().indexOf(step.toLowerCase());
-        if (idx >= 0) positions.push({ step, idx });
-      });
-      positions.sort((a, b) => a.idx - b.idx);
-
-      if (positions.length > 0) {
-        for (let i = 0; i < positions.length; i++) {
-          const from = positions[i].idx + positions[i].step.length;
-          const to = i + 1 < positions.length ? positions[i + 1].idx : raw.length;
-          let rest = raw.slice(from, to).trim();
-          // rest contient "risque... mesure..." -> on coupe sur les mots clés de mesures (gants/masques, barrieres, etc.)
-          const measureRx = /(gants\s*\/\s*masques\s*\/\s*lunettes[^.]*|barrieres\.?\s*epi)/i;
-          const mm = measureRx.exec(rest);
-          let risque = rest, mesure = "";
-          if (mm) {
-            risque = rest.slice(0, mm.index).trim();
-            mesure = rest.slice(mm.index).trim();
-          }
-          risque = risque.replace(/^[\s\-–.]+/, "").trim();
-          riskRows.push({ etape: positions[i].step, risque: risque || "—", mesure: mesure || "—" });
-        }
-      } else {
-        riskRows.push({ etape: raw, risque: "", mesure: "" });
-      }
-    }
-  }
-
-  const mReal = clean.match(/Réalisée par\s*:\s*([^—\n]*)/i);
-  const mVerif = clean.match(/Vérifiée par\s*:\s*([^—\n]*)/i);
-  const mMaj = clean.match(/Mise à jour par\s*:\s*([^—\n]*)/i);
-
-  return {
-    meta, answers, tp3, riskRows,
-    suivi: {
-      realise: mReal ? mReal[1].trim() : "",
-      verifie: mVerif ? mVerif[1].trim() : "",
-      maj: mMaj ? mMaj[1].trim() : "",
-    }
-  };
-}
-
-let currentThemeData = null;
-let currentTheme = 0;
-
-function renderThemePanel() {
-  const theme = THEMES[currentTheme];
-  const data = currentThemeData;
-  const colors = COLOR_MAP[theme.color];
-  const themeAnswered = theme.items.filter(s => !isEmpty(data.answers[s])).length;
-
-  document.getElementById("themePanel").innerHTML = `
-    <div class="theme-panel">
-      <div class="theme-head">
-        <div class="theme-icon" style="background:${colors.bg};color:${colors.fg};">${theme.icon}</div>
-        <div class="theme-title">${theme.title}</div>
-        <div class="theme-count">${themeAnswered}/${theme.items.length}</div>
-      </div>
-      <div class="cards">
-        ${theme.items.map(label => {
-          const value = data.answers[label] || "";
-          const empty = isEmpty(value);
-          return `
-            <div class="qcard">
-              <div class="badge ${empty ? 'miss' : 'ok'}">${empty ? '!' : '✓'}</div>
-              <div class="qtext">
-                <div class="qlabel">${escapeHtml(label)}</div>
-                <div class="qanswer ${empty ? 'empty' : ''}">${empty ? 'Sans réponse' : escapeHtml(value)}</div>
-              </div>
-            </div>
-          `;
-        }).join("")}
-      </div>
-    </div>
-  `;
-
-  document.getElementById("prevBtn").disabled = currentTheme === 0;
-  document.getElementById("nextBtn").disabled = currentTheme === THEMES.length - 1;
-  document.querySelectorAll(".dot").forEach((d, i) => d.classList.toggle("active", i === currentTheme));
-}
-
-function goTo(idx) {
-  if (idx < 0 || idx >= THEMES.length) return;
-  currentTheme = idx;
-  renderThemePanel();
-}
-
-function renderResult(data) {
-  currentThemeData = data;
-  currentTheme = 0;
-
-  const banner = document.getElementById("participantsBanner");
-  if (data.meta.participants) {
-    banner.style.display = "flex";
-    banner.innerHTML = `
-      <div class="pb-icon">👥</div>
-      <div>
-        <div class="pb-group">${escapeHtml(data.meta.groupe) || "Participants"}</div>
-        <div class="pb-names">${escapeHtml(data.meta.participants)}</div>
-      </div>
-    `;
-  } else {
-    banner.style.display = "none";
-  }
-
-  document.getElementById("idCard").innerHTML = `
-    <div><div class="label">Groupe / Stagiaire</div><div class="value">${escapeHtml(data.meta.nom) || "—"}</div></div>
-    <div><div class="label">Date de session</div><div class="value">${escapeHtml(data.meta.date_session) || "—"}</div></div>
-    <div><div class="label">Formateur</div><div class="value">${escapeHtml(data.meta.formateur) || "—"}</div></div>
-    <div><div class="label">Cas pratique</div><div class="value">${escapeHtml(data.meta.cas) || "—"}</div></div>
-  `;
-
-  const answeredCount = ALL_SECTIONS.filter(s => !isEmpty(data.answers[s])).length;
-  document.getElementById("progressFill").style.width = (answeredCount / ALL_SECTIONS.length * 100) + "%";
-  document.getElementById("progressCount").textContent = `${answeredCount} / ${ALL_SECTIONS.length}`;
-
-  document.getElementById("dots").innerHTML = THEMES.map((_, i) =>
-    `<div class="dot${i === 0 ? ' active' : ''}" onclick="goTo(${i})"></div>`
-  ).join("");
-
-  renderThemePanel();
-
-  document.getElementById("tp3Meta").innerHTML = `
-    <p style="margin-bottom:6px;"><strong>Intitulé :</strong> ${escapeHtml(data.tp3.intitule) || '<em style="color:var(--coral)">—</em>'}</p>
-    <p style="margin-bottom:6px;"><strong>Description :</strong> ${escapeHtml(data.tp3.description) || '<em style="color:var(--coral)">—</em>'}</p>
-    <p style="margin-bottom:6px;"><strong>Lieu :</strong> ${escapeHtml(data.tp3.lieu) || '<em style="color:var(--coral)">—</em>'}</p>
-    <p><strong>Début prévu le :</strong> ${escapeHtml(data.tp3.debut) || '<em style="color:var(--coral)">—</em>'}</p>
-  `;
-
-  const tp3TableEl = document.getElementById("tp3Table");
-  if (data.riskRows && data.riskRows.length > 0) {
-    tp3TableEl.style.display = "block";
-    tp3TableEl.innerHTML = `
-      <table class="risk-table">
-        <thead><tr><th>Étapes</th><th>Risques</th><th>Mesures de prévention</th></tr></thead>
-        <tbody>
-          ${data.riskRows.map(r => `
-            <tr>
-              <td>${escapeHtml(r.etape) || "—"}</td>
-              <td>${escapeHtml(r.risque) || "—"}</td>
-              <td>${escapeHtml(r.mesure) || "—"}</td>
-            </tr>
-          `).join("")}
-        </tbody>
-      </table>
-    `;
-  } else {
-    tp3TableEl.style.display = "none";
-  }
-
-  document.getElementById("suiviLine").innerHTML =
-    `Réalisée par : <strong>${escapeHtml(data.suivi.realise) || "—"}</strong> — Vérifiée par : <strong>${escapeHtml(data.suivi.verifie) || "—"}</strong> — Mise à jour par : <strong>${escapeHtml(data.suivi.maj) || "—"}</strong>`;
-
-  document.getElementById("dropzone").style.display = "none";
-  document.getElementById("result").style.display = "block";
-}
-
-async function handleFile(file) {
-  if (!file) return;
-  const statusEl = document.getElementById("status");
-  statusEl.className = "loading";
-  statusEl.textContent = "Lecture du PDF en cours…";
-  document.getElementById("fileName").textContent = file.name;
-
-  try {
-    const arrayBuffer = await file.arrayBuffer();
-    const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
-    let fullText = "";
-    for (let p = 1; p <= pdf.numPages; p++) {
-      const page = await pdf.getPage(p);
-      const content = await page.getTextContent();
-      fullText += content.items.map(it => it.str).join(" ") + "\n";
-    }
-    const data = parsePdfText(fullText);
-    renderResult(data);
-    statusEl.textContent = "";
-  } catch (e) {
-    console.error(e);
-    statusEl.className = "error";
-    statusEl.textContent = "Impossible de lire ce PDF. Vérifiez qu'il s'agit bien d'un export du TP.";
-  }
-}
-
-function resetAll() {
-  document.getElementById("result").style.display = "none";
-  document.getElementById("dropzone").style.display = "block";
-  document.getElementById("participantsBanner").style.display = "none";
-  document.getElementById("status").textContent = "";
-  document.getElementById("filePicker").value = "";
-  document.getElementById("tp3Table").style.display = "none";
-}
-
-const dropzone = document.getElementById("dropzone");
-dropzone.addEventListener("dragover", e => { e.preventDefault(); dropzone.classList.add("drag"); });
-dropzone.addEventListener("dragleave", () => dropzone.classList.remove("drag"));
-dropzone.addEventListener("drop", e => {
-  e.preventDefault();
-  dropzone.classList.remove("drag");
-  const file = e.dataTransfer.files?.[0];
-  if (file) handleFile(file);
-});
-document.getElementById("filePicker").addEventListener("change", e => handleFile(e.target.files?.[0]));
-
-// Chargement automatique depuis la page « Corriger un exercice » (?auto=1)
-(function autoLoadFromHub() {
-  const params = new URLSearchParams(location.search);
-  if (params.get("auto") !== "1") return;
-  const dataUrl = localStorage.getItem("correctionFile");
-  const name = localStorage.getItem("correctionFileName") || "rendu.pdf";
-  localStorage.removeItem("correctionFile");
-  localStorage.removeItem("correctionFileName");
-  localStorage.removeItem("correctionExo");
-  if (!dataUrl) return;
-  try {
-    const bin = atob(dataUrl.split(",").pop());
-    const bytes = new Uint8Array(bin.length);
-    for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
-    handleFile(new File([bytes], name, { type: "application/pdf" }));
-  } catch (e) { console.error(e); }
-})();
-</script>
-</body>
-</html>

index.html

@@ -141,7 +141,7 @@
                 <!-- Correction : page unique pour tous les exercices -->
                 <div class="formation-card">
                     <div class="formation-header">
-                        <div class="formation-icon">✔️</div>
+                        <div class="formation-icon">✅</div>
                         <h3 class="formation-title">Corriger un exercice</h3>
                         <p class="formation-subtitle">Correction des rendus</p>
                     </div>