Aligne les slides d'intro et la bottom bar sur le modèle BioCID

- FDS : bottom bar refaite façon BioCID (84 px, compteur à gauche, boutons pilule centrés en style footer-btn, bouton retour intégré, masquée sur l'accueil)
- FDS : bouton "Démarrer le TD" remis dans la slide d'accueil et 2e cercle déco passé en ambre
- TP_Nuisibles : formulaire d'identification encadré dans une carte blanche comme la carte identité BioCID

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,58 +46,62 @@
   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 {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
   display: flex;
-  gap: 10px;
   align-items: center;
-  flex-wrap: nowrap;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
 }
-.bar-actions .btn {
-  padding: 8px 22px;
+.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;
 }
-.bar-actions .btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-  transform: none;
-  pointer-events: none;
-}
-@media (max-width: 700px) {
-  .bar-actions .btn { padding: 7px 14px; font-size: 12px; }
-  .bottom-bar .slide-counter { display: none; }
+.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 */
@@ -236,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; }
@@ -719,9 +723,8 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
 
 <!-- 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="bar-actions" id="barActions"></div>
   <div class="slide-counter" id="slideCounter"></div>
+  <div class="bar-actions" id="barActions"></div>
 </div>
 
 <!-- Confetti -->
@@ -730,11 +733,12 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
 <!-- ============ 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>
     <p class="hero-sub">Maîtrisez les trois documents essentiels des produits biocides : fiche de sécurité, fiche technique et étiquetage réglementaire.</p>
+    <button class="btn btn-amber" onclick="goTo(1)">Démarrer le TD →</button>
   </div>
 </div>
 
@@ -1666,7 +1670,7 @@ function goBack() {
 function barBtn(bar, html, cls, fn, opts) {
   opts = opts || {};
   const b = document.createElement('button');
-  b.className = 'btn ' + cls;
+  b.className = 'footer-btn ' + cls;
   b.innerHTML = html;
   if (opts.id) b.id = opts.id;
   if (opts.disabled) b.disabled = true;
@@ -1679,39 +1683,40 @@ function renderBarActions() {
   const bar = document.getElementById('barActions');
   if (!bar) return;
   bar.innerHTML = '';
+  // Bouton retour intégré au groupe centré (sauf sur le récapitulatif, qui a son propre retour)
+  if (history.length > 0 && !(currentSlide === 7 && etiRecapShown)) {
+    barBtn(bar, '← Retour', 'is-secondary', goBack);
+  }
   switch (currentSlide) {
-    case 0:
-      barBtn(bar, 'Démarrer le TD →', 'btn-amber', () => goTo(1));
-      break;
     case 1:
-      barBtn(bar, 'Commencer la partie 1 →', 'btn-amber', startPart1);
+      barBtn(bar, 'Commencer la partie 1 →', 'is-primary', startPart1);
       break;
     case 2:
-      barBtn(bar, 'Répondre aux questions →', 'btn-amber', () => goTo(3));
+      barBtn(bar, 'Répondre aux questions →', 'is-primary', () => goTo(3));
       break;
     case 3:
-      barBtn(bar, '↺ Recommencer', 'btn-outline', resetFDS);
-      barBtn(bar, 'Passer à la partie 2 →', 'btn-coral', () => goTo(4), { id: 'fds-next' });
+      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 →', 'btn-coral', () => goTo(5));
+      barBtn(bar, 'Répondre aux questions →', 'is-primary', () => goTo(5));
       break;
     case 5:
-      barBtn(bar, '↺ Recommencer', 'btn-outline', resetFT);
-      barBtn(bar, 'Passer à la partie 3 →', 'btn-teal', () => goTo(6), { id: 'ft-next' });
+      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 →', 'btn-teal', () => goTo(7));
+      barBtn(bar, 'Répondre aux questions →', 'is-primary', () => goTo(7));
       break;
     case 7:
       if (etiRecapShown) {
-        barBtn(bar, '← Retour à l\'exercice', 'btn-outline', hideEtiRecap);
-        barBtn(bar, 'Voir la synthèse générale →', 'btn-amber', () => goTo(8));
+        barBtn(bar, '← Retour à l\'exercice', 'is-secondary', hideEtiRecap);
+        barBtn(bar, 'Voir la synthèse générale →', 'is-primary', () => goTo(8));
       } else {
-        barBtn(bar, '↺ Recommencer', 'btn-outline', resetEtiquette);
-        barBtn(bar, 'Terminer l\'exercice →', 'btn-teal', showEtiRecap,
+        barBtn(bar, '↺ Recommencer', 'is-secondary', resetEtiquette);
+        barBtn(bar, 'Terminer l\'exercice →', 'is-primary', showEtiRecap,
           { id: 'eti-recap-btn', disabled: etiPos < etiOrder.length });
       }
       break;
@@ -1726,8 +1731,7 @@ function updateUI() {
     currentSlide === 0 ? '0%' : ((currentSlide / totalSlides) * 100) + '%';
   document.getElementById('slideCounter').textContent =
     currentSlide === 0 ? '' : currentSlide + ' / ' + totalSlides;
-  document.getElementById('bottomBar').style.display = 'flex';
-  document.getElementById('backBtn').style.display = history.length > 0 ? 'block' : 'none';
+  document.getElementById('bottomBar').style.display = currentSlide === 0 ? 'none' : 'flex';
   renderBarActions();
 }
 

exercices/TP_Nuisibles.html

@@ -280,6 +280,18 @@
   outline: none;
   border-color: var(--amber);
 }
+/* Carte d'identité encadrée (modèle BioCID) */
+.id-card {
+  background: white;
+  border: 0.5px solid var(--border);
+  border-radius: 16px;
+  padding: 20px 22px;
+  max-width: 460px;
+  width: 100%;
+  margin: 1.25rem auto;
+  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
+}
+.id-card .id-form { margin: 0; max-width: none; }
 
 /* TABLE FORM CONTROLS */
 .risk-table input, .risk-table textarea {
@@ -673,7 +685,8 @@
     <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-card">
+      <div class="id-form">
         <div class="id-field">
           <label for="inputNom">Nom du stagiaire ou du groupe</label>
           <input type="text" id="inputNom" placeholder="Ex : Groupe 3 - Dupont / Martin" autocomplete="off">
@@ -690,6 +703,7 @@
           </div>
         </div>
       </div>
+    </div>
     <div id="idError" style="color:var(--coral);font-size:13px;margin-bottom:0.5rem;display:none;">Merci de renseigner au moins le nom du groupe.</div>
     <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
       <button class="btn btn-teal" onclick="confirmIdentite()">Continuer →</button>