Ajuste les slides 1 et 5 de l'exercice BioCID

- Slide 1 : encadrés '4 exercices' et 'Plateforme BioCID' inversés et mis à la même largeur
- Slide 1 : passage à l'exercice 1 bloqué tant que le nom du groupe n'est pas renseigné (message d'alerte)
- Slide 5 : titre 'Mise en situation réelle' -> 'Mise en situation'
- Slide 5 : reformulation de la mise en situation (restaurant / choix entre plusieurs références)
- Slide 5 : bouton 'Voir les bonnes pratiques' -> 'Terminer l'exercice'

exercices/Exo_BioCID.html

@@ -475,7 +475,11 @@
   <div class="section-tag">Avant de commencer</div>
   <div class="slide-title">Contexte & accès</div>
   <p class="slide-intro">BioCID est la plateforme officielle de l'ANSES pour consulter tous les produits biocides autorisés et déclarés en France. Cet exercice développe votre autonomie dans la consultation des produits.</p>
-  <div class="resource-card">
+  <div class="info-card" style="max-width:620px;">
+    <span>🎯</span>
+    <div>4 exercices vous attendent : recherche par <strong>nom</strong>, par <strong>type</strong>, par <strong>substance active</strong>, puis un <strong>cas de synthèse</strong>. Durée totale ≈ 30 min.</div>
+  </div>
+  <div class="resource-card" style="max-width:620px;margin-top:0.5rem;">
     <div class="resource-icon">🌐</div>
     <div class="resource-body">
       <div class="resource-title">Plateforme BioCID — ANSES</div>
@@ -483,17 +487,14 @@
     </div>
     <a href="https://biocid-anses.fr/biocid" target="_blank" class="resource-link">Ouvrir ↗</a>
   </div>
-  <div class="info-card" style="margin-top:0.5rem;">
-    <span>🎯</span>
-    <div>4 exercices vous attendent : recherche par <strong>nom</strong>, par <strong>type</strong>, par <strong>substance active</strong>, puis un <strong>cas de synthèse</strong>. Durée totale ≈ 30 min.</div>
-  </div>
-  <div class="identity-card">
+  <div class="identity-card" style="max-width:620px;">
     <div class="identity-title">👥 Identification du groupe</div>
     <div class="identity-fields">
-      <input type="text" id="idGroupe" placeholder="Nom du groupe / stagiaires (ex : Groupe 3 — Dupont / Martin)" autocomplete="off">
+      <input type="text" id="idGroupe" placeholder="Nom du groupe / stagiaires (ex : Groupe 3 — Dupont / Martin)" autocomplete="off" oninput="clearGroupeWarning()">
       <input type="date" id="idDate">
       <input type="text" id="idFormateur" placeholder="Formateur (facultatif)" autocomplete="off">
     </div>
+    <div id="idWarning" style="display:none;margin-top:8px;font-size:12.5px;color:var(--coral);">⚠ Renseignez le nom du groupe pour continuer.</div>
   </div>
 </div>
 
@@ -562,10 +563,10 @@
 <div class="slide" id="slide-5">
   <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 réelle</div>
+    <div class="slide-title">Mise en situation</div>
     <div class="info-card" style="background:var(--coral-light);color:var(--coral);margin-bottom:1rem;">
       <span>📞</span>
-      <div>Un restaurant vous appelle pour une demande de produit. En utilisant BioCID, présentez une <strong>recommandation argumentée</strong>.</div>
+      <div>Un restaurant vous appelle au sujet de votre prestation et souhaite choisir le produit entre plusieurs références. En utilisant la plateforme BioCID, présentez une <strong>recommandation argumentée</strong>.</div>
     </div>
     <ul class="questions-list">
       <li class="q-item">
@@ -620,7 +621,7 @@ 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 →' }
+  5: { next: 6, nextLabel: "Terminer l'exercice →" }
 };
 
 const hints = {
@@ -670,9 +671,27 @@ function goBack() {
   updateUI();
 }
 
+function clearGroupeWarning() {
+  const g = document.getElementById('idGroupe');
+  if (g) g.style.borderColor = '';
+  const w = document.getElementById('idWarning');
+  if (w) w.style.display = 'none';
+}
+
 function goNext() {
   const cfg = slideConfig[currentSlide];
-  if (cfg && cfg.next != null) goTo(cfg.next);
+  if (!cfg || cfg.next == null) return;
+  // Slide 1 : le nom du groupe est obligatoire pour passer à l'exercice 1
+  if (currentSlide === 1) {
+    const g = document.getElementById('idGroupe');
+    if (!g.value.trim()) {
+      g.style.borderColor = 'var(--coral)';
+      document.getElementById('idWarning').style.display = 'block';
+      g.focus();
+      return;
+    }
+  }
+  goTo(cfg.next);
 }
 
 function showHintCurrent() {