Aligne le TP Nuisibles sur le style des autres exercices

Inverse l'accueil et l'identification (héro en slide 0, contexte et
identification du groupe en slide 1), applique le style BioCID aux deux
premieres slides et supprime le badge d'avancement en haut a droite,
redondant avec la barre de progression.

exercices/TP_Nuisibles.html

@@ -38,20 +38,6 @@
   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;
@@ -654,9 +640,6 @@
 <!-- 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>
@@ -673,45 +656,45 @@
   </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 class="deco-circle" style="width:400px;height:400px;background:var(--amber-light);top:-100px;right:-80px;opacity:0.6;"></div>
-  <div style="text-align:center; z-index:1; width:100%;">
+  <div class="deco-circle" style="width:200px;height:200px;background:var(--amber-light);bottom:60px;left:-60px;opacity:0.5;"></div>
-    <div class="section-tag" style="background:var(--amber-light);color:var(--amber-dark);">Avant de commencer</div>
+  <div style="text-align:center;">
-    <div class="slide-title">Identification du groupe</div>
+    <div class="hero-label">Certibiocide — Travaux pratiques</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="hero-title">Étude de cas<br>Nuisibles</div>
-    <div class="identity-card">
+    <p class="hero-sub">Votre mission, si vous l'acceptez : maîtriser l'identification, le traitement et la sécurité face aux nuisibles.</p>
-      <div class="identity-title">👥 Identification du groupe</div>
+    <button class="btn btn-amber" onclick="goTo(1)">Démarrer la mission →</button>
-      <div class="identity-fields">
-        <input type="text" id="inputNom" placeholder="Nom du groupe / stagiaires (ex : Groupe 3 — Dupont / Martin)" autocomplete="off">
-        <input type="date" id="inputDate">
-        <div class="formateur-label">Formateur de la session</div>
-        <div class="formateur-row">
-          <button type="button" class="formateur-btn" id="btnNathan" onclick="selectFormateur('Nathan')">Nathan</button>
-          <button type="button" class="formateur-btn" id="btnGauthier" onclick="selectFormateur('Gauthier')">Gauthier</button>
-        </div>
-      </div>
-    </div>
-    <div id="idError" style="color:var(--coral);font-size:13px;margin-bottom:0.5rem;display:none;">Merci de renseigner au moins le nom du groupe.</div>
-    <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
-      <button class="btn btn-teal" onclick="confirmIdentite()">Continuer →</button>
-      <a href="corriger-exercice.html?exo=tp" class="btn btn-outline btn-teal">Corriger</a>
-    </div>
   </div>
 </div>
 
-<!-- ======================== SLIDE 1 — ACCUEIL ======================== -->
+<!-- ======================== SLIDE 1 — CONTEXTE & IDENTIFICATION ======================== -->
 <div class="slide" id="slide-1">
-  <div class="deco-circle" style="width:400px;height:400px;background:var(--amber-light);top:-100px;right:-80px;opacity:0.6;"></div>
+  <div class="deco-circle" style="width:300px;height:300px;background:var(--amber-light);top:-60px;left:-60px;opacity:0.4;"></div>
-  <div class="deco-circle" style="width:200px;height:200px;background:var(--amber-light);bottom:60px;left:-60px;opacity:0.5;"></div>
   <div class="section-tag" style="background:var(--amber-light);color:var(--amber-dark);">Avant de commencer</div>
-  <div class="slide-title">Certibiocide — Travaux pratiques</div>
+  <div class="slide-title">Contexte & accès</div>
-  <p class="slide-intro">Votre mission, si vous l'acceptez : maîtriser l'identification, le traitement et la sécurité face aux nuisibles.</p>
+  <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">
+  <div class="info-card" style="max-width:620px;">
     <span>🎯</span>
-    <div>3 travaux pratiques vous attendent : définir un <strong>protocole d'intervention</strong>, trouver votre <strong>produit sur BioCID</strong>, puis réaliser l'<strong>analyse de risques</strong>.</div>
+    <div>Vous allez définir un <strong>protocole d'intervention</strong>, trouver votre <strong>produit sur BioCID</strong>, puis réaliser l'<strong>analyse de risques</strong>.</div>
+  </div>
+  <div class="identity-card" style="max-width:620px;margin-top:0.5rem;">
+    <div class="identity-title">👥 Identification du groupe</div>
+    <div class="identity-fields">
+      <input type="text" id="inputNom" placeholder="Nom du groupe / stagiaires (ex : Groupe 3 — Dupont / Martin)" autocomplete="off">
+      <input type="date" id="inputDate">
+      <div class="formateur-label">Formateur de la session</div>
+      <div class="formateur-row">
+        <button type="button" class="formateur-btn" id="btnNathan" onclick="selectFormateur('Nathan')">Nathan</button>
+        <button type="button" class="formateur-btn" id="btnGauthier" onclick="selectFormateur('Gauthier')">Gauthier</button>
+      </div>
+    </div>
+    <div id="idError" style="color:var(--coral);font-size:13px;margin-top:8px;display:none;">Merci de renseigner au moins le nom du groupe.</div>
+  </div>
+  <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>
   </div>
-  <button class="btn btn-teal" style="margin-top:1.5rem;" onclick="goTo(2)">Démarrer la mission →</button>
 </div>
 
 <!-- ======================== SLIDE 2 — CHOIX DU CAS ======================== -->
@@ -1287,26 +1270,6 @@ function updateUI() {
 
   const backBtn = document.getElementById('backBtn');
   backBtn.style.display = history.length > 0 ? 'block' : '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';
-  }
 }
 
 function selectCase(key, icon, title, desc) {
@@ -1387,7 +1350,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 ======================== */