Ajoute une slide d'introduction à l'exercice 1 de BioCID

L'exercice 1 s'ouvre désormais sur une slide de présentation calquée
sur celles de l'exercice FDS : cercle décoratif, étiquette de section,
titre avec emoji, texte d'introduction et encadré d'information.

Les slides suivantes sont décalées d'un rang (2 à 6 deviennent 3 à 7),
le compteur passe à 7 étapes et les confettis se déclenchent sur la
nouvelle slide finale. Les questions et leurs champs sont inchangés.

exercices/Exo_BioCID.html

@@ -498,12 +498,22 @@
   </div>
 </div>
 
-<!-- ============ SLIDE 2 — EXERCICE 1 ============ -->
+<!-- ============ SLIDE 2 — EXERCICE 1 : INTRO ============ -->
 <div class="slide" id="slide-2">
+  <div class="deco-circle" style="width:280px;height:280px;background:var(--amber-light);top:-40px;right:-40px;opacity:0.5;"></div>
+  <div class="section-tag">Exercice 1 / 4 — 5 min</div>
+  <div class="slide-title">🔎 Recherche par nom de produit</div>
+  <p class="slide-intro">La recherche par nom est le chemin le plus direct dans BioCID : elle donne accès à la <strong>fiche complète</strong> d'un produit déjà identifié — son <strong>type</strong>, sa <strong>substance active</strong>, son <strong>fabricant</strong> et ses <strong>conditions d'utilisation</strong>.</p>
+  <div class="info-card">
+    <span>🎯</span>
+    <div>Pour chaque question, saisissez votre réponse dans le champ prévu. Vos réponses sont <strong>enregistrées automatiquement</strong> et reprises dans le PDF final.</div>
+  </div>
+</div>
+
+<!-- ============ SLIDE 3 — EXERCICE 1 : QUESTIONS ============ -->
+<div class="slide" id="slide-3">
   <div class="scroll-area">
-    <div class="section-tag">Exercice 1 / 4 — 5 min</div>
     <div class="slide-title">Recherche par nom de produit</div>
-    <p class="slide-intro">Trouvez un produit spécifique et relevez ses caractéristiques principales.</p>
     <ul class="questions-list">
       <li class="q-item">
         <div class="q-head"><span class="q-num">1</span><span>Recherchez un produit connu (ex. « Goliath », « Phobi », « Soricide »). Notez son <strong>type de produit</strong>, sa <strong>substance active</strong> et son <strong>fabricant</strong>.</span></div>
@@ -521,8 +531,8 @@
   </div>
 </div>
 
-<!-- ============ SLIDE 3 — EXERCICE 2 ============ -->
+<!-- ============ SLIDE 4 — EXERCICE 2 ============ -->
-<div class="slide" id="slide-3">
+<div class="slide" id="slide-4">
   <div class="scroll-area">
     <div class="section-tag">Exercice 2 / 4 — 5 min</div>
     <div class="slide-title">Recherche par type de produit</div>
@@ -540,8 +550,8 @@
   </div>
 </div>
 
-<!-- ============ SLIDE 4 — EXERCICE 3 ============ -->
+<!-- ============ SLIDE 5 — EXERCICE 3 ============ -->
-<div class="slide" id="slide-4">
+<div class="slide" id="slide-5">
   <div class="scroll-area">
     <div class="section-tag">Exercice 3 / 4 — 5 min</div>
     <div class="slide-title">Recherche par substance active</div>
@@ -559,8 +569,8 @@
   </div>
 </div>
 
-<!-- ============ SLIDE 5 — EXERCICE 4 (CAS DE SYNTHÈSE) ============ -->
+<!-- ============ SLIDE 6 — EXERCICE 4 (CAS DE SYNTHÈSE) ============ -->
-<div class="slide" id="slide-5">
+<div class="slide" id="slide-6">
   <div class="scroll-area">
     <div class="section-tag" style="background:var(--coral-light);color:var(--coral);">Exercice 4 / 4 — Cas de synthèse</div>
     <div class="slide-title">Mise en situation</div>
@@ -585,8 +595,8 @@
   </div>
 </div>
 
-<!-- ============ SLIDE 6 — ASTUCES / FIN ============ -->
+<!-- ============ SLIDE 7 — ASTUCES / FIN ============ -->
-<div class="slide" id="slide-6">
+<div class="slide" id="slide-7">
   <div class="scroll-area">
     <div class="deco-circle" style="width:320px;height:320px;background:var(--amber-light);bottom:-80px;right:-60px;opacity:0.5;"></div>
     <div style="text-align:center;">
@@ -613,15 +623,16 @@
 <script>
 let currentSlide = 0;
 let history = [];
-const totalSlides = 6;
+const totalSlides = 7;
 
 // Configuration des boutons du footer par slide
 const slideConfig = {
   1: { next: 2, nextLabel: "Commencer l'exercice 1 →" },
-  2: { hint: 'ex1', next: 3, nextLabel: 'Exercice suivant →' },
+  2: { next: 3, nextLabel: 'Aux questions →' },
-  3: { hint: 'ex2', next: 4, nextLabel: 'Exercice suivant →' },
+  3: { hint: 'ex1', next: 4, nextLabel: 'Exercice suivant →' },
-  4: { hint: 'ex3', next: 5, nextLabel: 'Cas de synthèse →' },
+  4: { hint: 'ex2', next: 5, nextLabel: 'Exercice suivant →' },
-  5: { next: 6, nextLabel: "Terminer l'exercice →" }
+  5: { hint: 'ex3', next: 6, nextLabel: 'Cas de synthèse →' },
+  6: { next: 7, nextLabel: "Terminer l'exercice →" }
 };
 
 const hints = {
@@ -655,7 +666,7 @@ function goTo(n) {
   const sa = next.querySelector('.scroll-area');
   if (sa) sa.scrollTop = 0;
   updateUI();
-  if (n === 6) setTimeout(launchConfetti, 200);
+  if (n === 7) setTimeout(launchConfetti, 200);
 }
 
 function goBack() {