Retravaille les exercices FDS/FT/Étiquettes (slides 1, 3, 5, 7)

Slide 1 : blocage de la navigation tant que le nom du stagiaire/groupe n'est pas renseigné, et choix du formateur via boutons Nathan/Gauthier.
Slide 3 : étiquettes renommées « Rubrique 1…16 » (au lieu de « R… ») et élargies.
Slide 5 : suppression du tag « Partie 2/3 — FT ».
Slide 7 : suppression du tag « Partie 3/3 — Étiquette » ; l'encadré de réponse s'affiche à côté de l'étiquette (plus en superposition) ; le récapitulatif fait glisser l'étiquette à gauche et affiche le tableau de réponses à sa droite.

exercices/Exo_FDS.html

@@ -229,8 +229,8 @@
 .dnd-bank { display: grid; grid-template-columns: 1fr; gap: 6px; align-content: start; }
 .dnd-tile {
   font-family: 'Syne', sans-serif;
-  font-size: 12px; font-weight: 800;
-  padding: 8px 10px; min-width: 66px; text-align: center;
+  font-size: 12px; font-weight: 800; white-space: nowrap;
+  padding: 8px 12px; min-width: 92px; text-align: center;
   border-radius: 8px;
   background: var(--amber-light); color: var(--amber-dark);
   border: 1px solid var(--amber);
@@ -261,7 +261,7 @@
 .drop-slot.slot-wrong { border-color: #c62828; color: #c62828; }
 @media (max-width: 900px) {
   .dnd-layout { grid-template-columns: 1fr; }
-  .dnd-bank { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
+  .dnd-bank { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
 }
 /* SLIDE 5 — RELIER (MATCHING) */
 .match-hint { font-size: 12.5px; color: var(--text-muted); text-align: center; margin: -0.4rem 0 0.1rem; max-width: 640px; line-height: 1.5; }
@@ -635,6 +635,60 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
   .lbl-cols { grid-template-columns: 1fr; }
   .lbl-title { font-size: 26px; }
 }
+
+/* ---- SLIDE 1 — sélection formateur + garde nom ---- */
+.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; }
+.identity-error { color: var(--coral); font-size: 12px; margin-top: 8px; line-height: 1.4; }
+.identity-error[hidden] { display: none; }
+
+/* ---- SLIDE 7 — encadré de réponse sur le côté de l'étiquette ---- */
+#eti-stage {
+  max-width: 980px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 300px;
+  align-items: start;
+  gap: 16px;
+  justify-content: center;
+}
+#eti-stage .label-card { grid-column: 1; grid-row: 1; }
+#eti-stage .eti-pop,
+#eti-stage .eti-side-hint { grid-column: 2; grid-row: 1; align-self: start; }
+#eti-stage .eti-pop { position: relative; inset: auto; left: auto; top: auto; max-width: none; width: 100%; }
+.eti-side-hint {
+  font-size: 12.5px; color: var(--teal-dark); line-height: 1.5;
+  background: var(--teal-light); border: 1px dashed var(--teal-mid);
+  border-radius: 10px; padding: 12px 14px;
+}
+.eti-side-hint[hidden] { display: none; }
+
+/* ---- SLIDE 7 — récapitulatif : étiquette à gauche, tableau à droite ---- */
+.recap-layout { display: flex; gap: 20px; align-items: flex-start; justify-content: center; width: 100%; max-width: 1120px; }
+.recap-layout #recap-stage { flex: 1 1 0; min-width: 0; max-width: 560px; }
+.recap-layout .checklist-table { flex: 1 1 0; min-width: 0; margin: 0; }
+.recap-layout.animate #recap-stage { animation: recapSlideLeft 0.5s ease both; }
+.recap-layout.animate .checklist-table { animation: recapSlideRight 0.5s ease both; }
+@keyframes recapSlideLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
+@keyframes recapSlideRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
+
+@media (max-width: 820px) {
+  #eti-stage { grid-template-columns: 1fr; max-width: 680px; }
+  #eti-stage .eti-pop,
+  #eti-stage .eti-side-hint { grid-column: 1; grid-row: auto; }
+  #eti-stage .label-card { grid-row: auto; }
+}
+@media (max-width: 1000px) {
+  .recap-layout { flex-direction: column; align-items: center; }
+  .recap-layout #recap-stage { flex: none; max-width: 560px; width: 100%; }
+  .recap-layout .checklist-table { flex: none; width: 100%; max-width: 640px; }
+}
 </style>
 </head>
 <body>
@@ -706,12 +760,18 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
   <div class="identity-card">
     <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="clearGroupeError()">
       <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 class="identity-error" id="idGroupe-error" hidden>⚠️ Renseignez le nom du stagiaire ou du groupe pour continuer.</div>
   </div>
-  <button class="btn btn-amber" onclick="goTo(2)" style="margin-top:1.5rem;">Commencer la partie 1 →</button>
+  <button class="btn btn-amber" onclick="startPart1()" style="margin-top:1.5rem;">Commencer la partie 1 →</button>
 </div>
 
 <!-- ============ SLIDE 2 — FDS INTRO ============ -->
@@ -760,7 +820,6 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
 <!-- ============ SLIDE 5 — FT : RELIER ============ -->
 <div class="slide" id="slide-5">
   <div class="scroll-area">
-    <div class="section-tag" style="background:var(--coral-light);color:var(--coral);">Partie 2 / 3 — FT</div>
     <div class="slide-title">Sections de la fiche technique</div>
     <p class="match-hint">Reliez chaque question à la bonne section : cliquez sur un point à gauche, maintenez, puis glissez jusqu'au point de la section correspondante à droite.</p>
     <div class="match-wrap" id="ft-match">
@@ -796,7 +855,6 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
 
     <!-- ---- PANNEAU A : exercice ---- -->
     <div id="eti-exercise" style="width:100%;display:flex;flex-direction:column;align-items:center;gap:0.75rem;">
-      <div class="section-tag" style="background:var(--teal-light);color:var(--teal-dark);">Partie 3 / 3 — Étiquette</div>
       <div class="slide-title">Zones de l'étiquette</div>
 
       <div class="situation-box">
@@ -865,6 +923,8 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
           <div class="lbl-footer">FHER — 2, rue de Sèze, 75009 Paris — Tél. 01 23 45 67 89</div>
         </div>
 
+        <div class="eti-side-hint" id="eti-side-hint">👉 Cliquez une zone de l'étiquette : sa justification réglementaire s'affiche ici, à côté du bidon.</div>
+
         <div class="eti-pop" id="eti-pop" hidden>
           <button class="pop-close" onclick="closeEtiPop()" aria-label="Fermer">×</button>
           <div class="pop-status" id="pop-status"></div>
@@ -886,9 +946,10 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
       <div class="slide-title">Récapitulatif — l'étiquette annotée</div>
       <p class="slide-intro">Les 9 zones réglementaires et leurs bonnes réponses, présentées comme la <strong>check-list officielle d'étiquetage des produits biocides</strong> (Guide FHER, p. 15) — un outil réutilisable en conditions réelles.</p>
 
-      <div class="eti-stage" id="recap-stage"></div>
-
-      <table class="checklist-table" id="checklist-table"></table>
+      <div class="recap-layout" id="recap-layout">
+        <div class="eti-stage" id="recap-stage"></div>
+        <table class="checklist-table" id="checklist-table"></table>
+      </div>
 
       <div class="actions-row">
         <button class="btn btn-outline" onclick="hideEtiRecap()">← Retour à l'exercice</button>
@@ -1112,7 +1173,6 @@ function finishEtiquette() {
 /* Info-bulle réglementaire positionnée près de la zone cliquée */
 function openEtiPop(hs, kind, clickedZone) {
   const pop = document.getElementById('eti-pop');
-  const stage = document.getElementById('eti-stage');
   const z = etiZoneById(clickedZone);
 
   const statusEl = document.getElementById('pop-status');
@@ -1124,23 +1184,17 @@ function openEtiPop(hs, kind, clickedZone) {
   document.getElementById('pop-title').textContent = z.label;
   document.getElementById('pop-reg').textContent = z.reg;
 
+  // L'encadré s'affiche dans la colonne latérale, à côté de l'étiquette (plus de superposition).
+  const hint = document.getElementById('eti-side-hint');
+  if (hint) hint.hidden = true;
   pop.hidden = false;
-  // Positionnement relatif à la scène
-  const sr = stage.getBoundingClientRect();
-  const hr = hs.getBoundingClientRect();
-  const popW = pop.offsetWidth, popH = pop.offsetHeight;
-  let left = hr.left - sr.left + hr.width / 2 - popW / 2;
-  left = Math.max(4, Math.min(left, sr.width - popW - 4));
-  let top = hr.bottom - sr.top + 8;
-  if (top + popH > sr.height) top = hr.top - sr.top - popH - 8; // bascule au-dessus si déborde
-  if (top < 0) top = 4;
-  pop.style.left = left + 'px';
-  pop.style.top = top + 'px';
 }
 
 function closeEtiPop() {
   const pop = document.getElementById('eti-pop');
   if (pop) pop.hidden = true;
+  const hint = document.getElementById('eti-side-hint');
+  if (hint) hint.hidden = false;
 }
 
 function resetEtiquette() { buildEtiquette(); }
@@ -1189,6 +1243,11 @@ function showEtiRecap() {
 
   document.getElementById('eti-exercise').style.display = 'none';
   document.getElementById('eti-recap').style.display = 'flex';
+
+  // Animation : l'étiquette glisse à gauche, le tableau apparaît à sa droite
+  const rl = document.getElementById('recap-layout');
+  if (rl) { rl.classList.remove('animate'); void rl.offsetWidth; rl.classList.add('animate'); }
+
   const sa = document.querySelector('#slide-7 .scroll-area');
   if (sa) sa.scrollTop = 0;
 }
@@ -1336,8 +1395,8 @@ window.addEventListener('resize', () => { if (currentSlide === 5) drawFtLines();
 function buildFdsDnd() {
   const tile = (v, l) => `<div class="dnd-tile" draggable="true" data-value="${v}" data-label="${l}">${l}</div>`;
   let left = '', right = '';
-  for (let i = 1; i <= 8; i++) left += tile(String(i), 'R' + i);
-  for (let i = 9; i <= 16; i++) right += tile(String(i), 'R' + i);
+  for (let i = 1; i <= 8; i++) left += tile(String(i), 'Rubrique ' + i);
+  for (let i = 9; i <= 16; i++) right += tile(String(i), 'Rubrique ' + i);
   right += tile('absent', 'Absent');
   document.getElementById('fds-bank-left').innerHTML = left;
   document.getElementById('fds-bank-right').innerHTML = right;
@@ -1581,6 +1640,28 @@ function exporterPDF() {
   setTimeout(() => w.print(), 300);
 }
 
+/* ======================== SLIDE 1 — IDENTIFICATION ======================== */
+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 clearGroupeError() {
+  const g = document.getElementById('idGroupe');
+  g.style.borderColor = '';
+  document.getElementById('idGroupe-error').hidden = true;
+}
+function startPart1() {
+  const g = document.getElementById('idGroupe');
+  if (!g.value.trim()) {
+    g.style.borderColor = 'var(--coral-mid)';
+    document.getElementById('idGroupe-error').hidden = false;
+    g.focus();
+    return;
+  }
+  goTo(2);
+}
+
 /* ======================== NAVIGATION ======================== */
 function goTo(n) {
   const cur = document.getElementById('slide-' + currentSlide);