Uniformise l'identification du groupe sur BioCID et TP Nuisibles

Applique le style de carte de référence (Exo_FDS) à ExoBIOCID et au TP
Nuisibles : titre dans la carte, champs nom/date, et sélecteur de
formateur Nathan/Gauthier en boutons remplis à l'état actif, à la place
du champ texte libre (BioCID) et des boutons pilule (TP).

exercices/Exo_BioCID.html

@@ -406,6 +406,15 @@
   box-sizing: border-box;
 }
 .identity-fields input:focus { outline: none; border-color: var(--amber); background: white; }
+.formateur-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin: 4px 0 2px; }
+.formateur-row { display: flex; gap: 8px; }
+.formateur-btn {
+  flex: 1; font-family: 'DM Sans', sans-serif; font-size: 13.5px;
+  padding: 9px 13px; border: 1px solid var(--border); border-radius: 10px;
+  background: var(--bg); color: var(--text); cursor: pointer; transition: all 0.2s ease;
+}
+.formateur-btn:hover { border-color: var(--amber); }
+.formateur-btn.active { background: var(--amber); border-color: var(--amber); color: #fff; }
 
 /* DECO */
 .deco-circle { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
@@ -492,7 +501,12 @@
     <div class="identity-fields">
       <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">
+      <input type="hidden" id="idFormateur">
+      <div class="formateur-label">Formateur de la session</div>
+      <div class="formateur-row">
+        <button type="button" class="formateur-btn" data-formateur="Nathan" onclick="selectFormateur(this)">Nathan</button>
+        <button type="button" class="formateur-btn" data-formateur="Gauthier" onclick="selectFormateur(this)">Gauthier</button>
+      </div>
     </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>
@@ -689,6 +703,12 @@ function clearGroupeWarning() {
   if (w) w.style.display = 'none';
 }
 
+function selectFormateur(btn) {
+  document.querySelectorAll('.formateur-btn').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+  document.getElementById('idFormateur').value = btn.dataset.formateur;
+}
+
 function goNext() {
   const cfg = slideConfig[currentSlide];
   if (!cfg || cfg.next == null) return;

exercices/TP_Nuisibles.html

@@ -91,20 +91,12 @@
 
 /* FORMATEUR SELECTOR */
 .formateur-btn {
-  font-family: 'Syne', sans-serif;
+  flex: 1; font-family: 'DM Sans', sans-serif; font-size: 13.5px;
-  font-size: 14px;
+  padding: 9px 13px; border: 1px solid var(--border); border-radius: 10px;
-  font-weight: 600;
+  background: var(--bg); color: var(--text); cursor: pointer; transition: all 0.2s ease;
-  padding: 10px 24px;
-  border-radius: 30px;
-  border: 1.5px solid var(--border);
-  background: white;
-  color: var(--text-muted);
-  cursor: pointer;
-  transition: all 0.2s;
-  flex: 1;
 }
-.formateur-btn:hover { border-color: var(--amber); color: var(--amber); }
+.formateur-btn:hover { border-color: var(--amber); }
-.formateur-btn.selected { background: var(--amber-light); border-color: var(--amber); color: var(--amber-dark); font-weight: 700; }
+.formateur-btn.selected { background: var(--amber); border-color: var(--amber); color: #fff; }
 
 /* CARDS & BUTTONS */
 .btn {
@@ -246,52 +238,42 @@
 .q-item { flex-direction: column; align-items: stretch; }
 .q-item .q-head { display: flex; align-items: flex-start; gap: 12px; }
 
-/* IDENTIFICATION SCREEN */
+/* IDENTIFICATION SCREEN — carte modèle BioCID / FDS */
-.id-form {
+.identity-card {
-  width: 100%;
-  max-width: 420px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  margin: 1.25rem 0;
-}
-.id-field label {
-  display: block;
-  font-family: 'Syne', sans-serif;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--text-muted);
-  margin-bottom: 6px;
-  text-align: left;
-}
-.id-field input {
-  width: 100%;
-  font-family: 'DM Sans', sans-serif;
-  font-size: 15px;
-  padding: 12px 16px;
-  border: 1.5px solid var(--border);
-  border-radius: 10px;
-  background: white;
-  color: var(--text);
-}
-.id-field input:focus {
-  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;
+  border-radius: 14px;
-  padding: 20px 22px;
+  padding: 16px 18px;
   max-width: 460px;
   width: 100%;
   margin: 1.25rem auto;
-  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
+  text-align: left;
 }
-.id-card .id-form { margin: 0; max-width: none; }
+.identity-card .identity-title {
+  font-family: 'Syne', sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--amber-dark);
+  margin-bottom: 10px;
+  display: flex; align-items: center; gap: 6px;
+}
+.identity-fields { display: flex; flex-direction: column; gap: 8px; }
+.identity-fields input {
+  font-family: 'DM Sans', sans-serif;
+  font-size: 13.5px;
+  color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 9px 13px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.identity-fields input:focus { outline: none; border-color: var(--amber); background: white; }
+.formateur-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin: 4px 0 2px; }
+.formateur-row { display: flex; gap: 8px; }
 
 /* TABLE FORM CONTROLS */
 .risk-table input, .risk-table textarea {
@@ -698,22 +680,15 @@
     <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-card">
+    <div class="identity-card">
-      <div class="id-form">
+      <div class="identity-title">👥 Identification du groupe</div>
-        <div class="id-field">
+      <div class="identity-fields">
-          <label for="inputNom">Nom du stagiaire ou du groupe</label>
+        <input type="text" id="inputNom" placeholder="Nom du groupe / stagiaires (ex : Groupe 3 — Dupont / Martin)" autocomplete="off">
-          <input type="text" id="inputNom" placeholder="Ex : Groupe 3 - Dupont / Martin" autocomplete="off">
+        <input type="date" id="inputDate">
-        </div>
+        <div class="formateur-label">Formateur de la session</div>
-        <div class="id-field">
+        <div class="formateur-row">
-          <label for="inputDate">Date de la session</label>
+          <button type="button" class="formateur-btn" id="btnNathan" onclick="selectFormateur('Nathan')">Nathan</button>
-          <input type="date" id="inputDate">
+          <button type="button" class="formateur-btn" id="btnGauthier" onclick="selectFormateur('Gauthier')">Gauthier</button>
-        </div>
-        <div class="id-field">
-          <label>Formateur de la session</label>
-          <div style="display:flex;gap:10px;margin-top:2px;">
-            <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>