Retravaille le footer de l'exercice BioCID

- Footer agrandi (84px) avec les trois boutons Retour, Voir les indications et Exercice suivant centrés
- Boutons d'indications et de navigation déplacés du corps des slides vers le footer
- Suppression du badge 'Exercice .../4' en haut à droite (doublon)
- Slide 3 : simplification du texte des filtres (par TP)

exercices/Exo_BioCID.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;
@@ -32,35 +32,38 @@
 
 .progress-fill { background: var(--amber); 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-counter { font-size: 12px; font-family: 'Syne', sans-serif; font-weight: 600; color: var(--amber-dark); }
+.bottom-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.slide-counter {
+  position: absolute;
+  left: 20px;
+  font-size: 12px;
+  font-family: 'Syne', sans-serif;
+  font-weight: 600;
+  color: var(--amber-dark);
+}
+@media (max-width: 560px) {
+  .slide-counter { display: none; }
+}
 .back-btn {
   background: none;
   border: 0.5px solid var(--amber);
@@ -411,13 +414,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="back-btn" id="backBtn" onclick="goBack()" style="display:none;">← Retour</button>
+    <button class="hint-btn" id="footerHintBtn" onclick="showHintCurrent()" style="display:none;">💡 Voir les indications</button>
+    <button class="btn btn-amber" id="footerNextBtn" onclick="goNext()" style="display:none;">Exercice suivant →</button>
+  </div>
 </div>
 
 <!-- Modal -->
@@ -491,10 +495,6 @@
         <textarea class="answer-field" id="bio_ex1_3" placeholder="Votre réponse…" data-question="Ex1 — Conditions d'utilisation"></textarea>
       </li>
     </ul>
-    <div class="actions-row">
-      <button class="hint-btn" onclick="showHint('ex1')">💡 Voir les indications</button>
-      <button class="btn btn-amber" onclick="goTo(3)">Exercice suivant →</button>
-    </div>
   </div>
 </div>
 
@@ -503,7 +503,7 @@
   <div class="scroll-area">
     <div class="section-tag">Exercice 2 / 4 — 5 min</div>
     <div class="slide-title">Recherche par type de produit</div>
-    <p class="slide-intro">Explorez les catégories disponibles à l'aide des filtres par code TP (Type Product).</p>
+    <p class="slide-intro">Explorez les catégories disponibles à l'aide des filtres par TP.</p>
     <ul class="questions-list">
       <li class="q-item">
         <div class="q-head"><span class="q-num">1</span><span>Utilisez le filtre « Type de produit » et sélectionnez « Rodenticides (TP14) » ou « Insecticides (TP18) ». Combien de produits sont disponibles ?</span></div>
@@ -514,10 +514,6 @@
         <textarea class="answer-field" id="bio_ex2_2" placeholder="Votre réponse…" data-question="Ex2 — Comparaison entre catégories"></textarea>
       </li>
     </ul>
-    <div class="actions-row">
-      <button class="hint-btn" onclick="showHint('ex2')">💡 Voir les indications</button>
-      <button class="btn btn-amber" onclick="goTo(4)">Exercice suivant →</button>
-    </div>
   </div>
 </div>
 
@@ -537,10 +533,6 @@
         <textarea class="answer-field" id="bio_ex3_2" placeholder="Votre réponse…" data-question="Ex3 — Formulations et concentrations comparées"></textarea>
       </li>
     </ul>
-    <div class="actions-row">
-      <button class="hint-btn" onclick="showHint('ex3')">💡 Voir les indications</button>
-      <button class="btn btn-amber" onclick="goTo(5)">Cas de synthèse →</button>
-    </div>
   </div>
 </div>
 
@@ -567,9 +559,6 @@
         <textarea class="answer-field" id="bio_ex4_3" placeholder="Votre réponse…" data-question="Ex4 — Argumentaire (+ bonus FDS)"></textarea>
       </li>
     </ul>
-    <div class="actions-row">
-      <button class="btn btn-amber" onclick="goTo(6)">Voir les bonnes pratiques →</button>
-    </div>
   </div>
 </div>
 
@@ -606,6 +595,14 @@ let currentSlide = 0;
 let history = [];
 const totalSlides = 6;
 
+// Configuration des boutons du footer par slide
+const slideConfig = {
+  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: 'Voir les bonnes pratiques →' }
+};
+
 const hints = {
   ex1: {
     icon: '🔎',
@@ -652,28 +649,33 @@ function goBack() {
   updateUI();
 }
 
+function goNext() {
+  const cfg = slideConfig[currentSlide];
+  if (cfg && cfg.next != null) goTo(cfg.next);
+}
+
+function showHintCurrent() {
+  const cfg = slideConfig[currentSlide];
+  if (cfg && cfg.hint) showHint(cfg.hint);
+}
+
 function updateUI() {
   document.getElementById('progressFill').style.width =
     currentSlide === 0 ? '0%' : ((currentSlide / totalSlides) * 100) + '%';
   const counter = document.getElementById('slideCounter');
   counter.textContent = currentSlide === 0 ? '' : currentSlide + ' / ' + totalSlides;
   document.getElementById('bottomBar').style.display = currentSlide === 0 ? 'none' : 'flex';
-  document.getElementById('backBtn').style.display = history.length > 0 ? 'block' : 'none';
+  document.getElementById('backBtn').style.display = history.length > 0 ? 'inline-flex' : 'none';
 
-  const badge = document.getElementById('phaseBadge');
+  const cfg = slideConfig[currentSlide] || {};
-  if (currentSlide >= 2 && currentSlide <= 5) {
+  const hintBtn = document.getElementById('footerHintBtn');
-    badge.style.display = 'block';
+  const nextBtn = document.getElementById('footerNextBtn');
-    if (currentSlide === 5) {
+  hintBtn.style.display = cfg.hint ? 'inline-flex' : 'none';
-      badge.style.background = 'var(--coral-light)';
+  if (cfg.next != null) {
-      badge.style.color = 'var(--coral)';
+    nextBtn.style.display = 'inline-flex';
-      badge.textContent = 'Cas de synthèse';
+    nextBtn.textContent = cfg.nextLabel;
-    } else {
-      badge.style.background = 'var(--amber-light)';
-      badge.style.color = 'var(--amber-dark)';
-      badge.textContent = 'Exercice ' + (currentSlide - 1) + ' / 4';
-    }
   } else {
-    badge.style.display = 'none';
+    nextBtn.style.display = 'none';
   }
 }