Migre la navigation du TP Nuisibles dans la bottom bar

Reprend le modele de footer d'Exo_BioCID : tous les boutons d'avancement
et d'aide passent dans la barre du bas, pilotes par un slideConfig
(bouton suivant, libelle, indice par slide). Supprime les boutons
in-slide correspondants, gere la validation du nom de groupe et le
deverrouillage du bouton apres choix du cas, et applique le style
footer-btn (compteur a gauche, actions centrees).

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;
@@ -42,38 +42,54 @@
 .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 {
@@ -599,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;
@@ -642,8 +658,12 @@
 
 <!-- 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 -->
@@ -692,8 +712,7 @@
     <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 class="actions-row">
-    <button class="btn btn-amber" onclick="confirmIdentite()">Commencer les TP →</button>
-    <a href="corriger-exercice.html?exo=tp" class="btn btn-outline btn-teal">Corriger</a>
+    <a href="corriger-exercice.html?exo=tp" class="btn btn-outline btn-teal">Corriger un rendu</a>
   </div>
 </div>
 
@@ -734,9 +753,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 ======================== -->
@@ -764,7 +780,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 ======================== -->
@@ -782,7 +797,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 ======================== -->
@@ -823,10 +837,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>
 
@@ -861,10 +871,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>
 
@@ -895,10 +901,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>
 
@@ -920,7 +922,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 ======================== -->
@@ -961,10 +962,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>
 
@@ -1009,10 +1006,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>
 
@@ -1029,9 +1022,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 ======================== -->
@@ -1100,10 +1090,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>
 
@@ -1154,6 +1140,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: '💡',
@@ -1240,11 +1242,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();
@@ -1269,7 +1288,20 @@ 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 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) {
@@ -1280,7 +1312,7 @@ function selectCase(key, icon, title, desc) {
   selectedCase.desc = desc;
   document.querySelectorAll('.case-card').forEach(c => c.classList.remove('selected'));
   event.currentTarget.classList.add('selected');
-  document.getElementById('btnConfirmCase').style.display = 'inline-flex';
+  updateUI();
 }
 
 function updateCaseBanners() {