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,14 +656,29 @@
   </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="identity-card">
+  <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="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">
@@ -691,28 +689,13 @@
         <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 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>
+  <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>
 </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 class="section-tag" style="background:var(--amber-light);color:var(--amber-dark);">Avant de commencer</div>
-  <div class="slide-title">Certibiocide — Travaux pratiques</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>
-  <div class="info-card">
-    <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>
-  <button class="btn btn-teal" style="margin-top:1.5rem;" onclick="goTo(2)">Démarrer la mission →</button>
-</div>
 
 <!-- ======================== SLIDE 2 — CHOIX DU CAS ======================== -->
 <div class="slide" id="slide-2">
@@ -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 ======================== */