Uniformise les boutons du footer BioCID et ajoute des confettis

- Bouton 'Commencer l'exercice 1' déplacé de la slide 1 vers la bottom bar
- Nouveau style .footer-btn uniforme pour les trois boutons (is-primary / is-secondary)
- Effet de confettis au canvas déclenché à l'arrivée sur la slide 6 (comme le TP Nuisibles)

exercices/Exo_BioCID.html

@@ -17,7 +17,7 @@
   justify-content: center;
   padding: 2rem;
   padding-top: calc(70px + 2rem);
-  padding-bottom: calc(52px + 2rem);
+  padding-bottom: calc(84px + 2rem);
   opacity: 0;
   transition: opacity 0.4s ease;
   overflow-y: auto;
@@ -32,35 +32,58 @@
 
 .progress-fill { background: var(--amber); 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;
   bottom: 0; left: 0; right: 0;
-  height: 52px;
+  height: 84px;
   background: rgba(250, 238, 218, 0.98);
   border-top: 2px solid var(--amber);
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   padding: 0 20px;
   z-index: 100;
   backdrop-filter: blur(10px);
 }
-.slide-counter { font-size: 12px; font-family: 'Syne', sans-serif; font-weight: 600; color: var(--amber-dark); }
+.bottom-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.footer-btn {
+  font-family: 'Syne', sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 11px 24px;
+  border-radius: 40px;
+  border: 1.5px solid var(--amber);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  line-height: 1;
+  transition: all 0.2s;
+}
+.footer-btn:hover { transform: translateY(-1px); }
+.footer-btn:active { transform: scale(0.98); }
+.footer-btn.is-primary { background: var(--amber); color: #fff; }
+.footer-btn.is-primary:hover { background: var(--amber-dark); }
+.footer-btn.is-secondary { background: transparent; color: var(--amber-dark); }
+.footer-btn.is-secondary:hover { background: rgba(186,117,23,0.08); }
+.slide-counter {
+  position: absolute;
+  left: 20px;
+  font-size: 12px;
+  font-family: 'Syne', sans-serif;
+  font-weight: 600;
+  color: var(--amber-dark);
+}
+@media (max-width: 560px) {
+  .slide-counter { display: none; }
+}
 .back-btn {
   background: none;
   border: 0.5px solid var(--amber);
@@ -411,15 +434,19 @@
 <!-- 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>
   <div class="slide-counter" id="slideCounter"></div>
+  <div class="bottom-actions">
+    <button class="footer-btn is-secondary" id="backBtn" onclick="goBack()" style="display:none;">← Retour</button>
+    <button class="footer-btn is-secondary" id="footerHintBtn" onclick="showHintCurrent()" style="display:none;">💡 Voir les indications</button>
+    <button class="footer-btn is-primary" id="footerNextBtn" onclick="goNext()" style="display:none;">Exercice suivant →</button>
+  </div>
 </div>
 
+<!-- Confetti -->
+<canvas id="confettiCanvas" style="position:fixed;inset:0;pointer-events:none;z-index:150;display:none;"></canvas>
+
 <!-- Modal -->
 <div class="modal-overlay" id="modalOverlay" onclick="closeModal(event)">
   <div class="modal" id="modal">
@@ -468,7 +495,6 @@
       <input type="text" id="idFormateur" placeholder="Formateur (facultatif)" autocomplete="off">
     </div>
   </div>
-  <button class="btn btn-amber" onclick="goTo(2)" style="margin-top:1.5rem;">Commencer l'exercice 1 →</button>
 </div>
 
 <!-- ============ SLIDE 2 — EXERCICE 1 ============ -->
@@ -491,10 +517,6 @@
         <textarea class="answer-field" id="bio_ex1_3" placeholder="Votre réponse…" data-question="Ex1 — Conditions d'utilisation"></textarea>
       </li>
     </ul>
-    <div class="actions-row">
-      <button class="hint-btn" onclick="showHint('ex1')">💡 Voir les indications</button>
-      <button class="btn btn-amber" onclick="goTo(3)">Exercice suivant →</button>
-    </div>
   </div>
 </div>
 
@@ -503,7 +525,7 @@
   <div class="scroll-area">
     <div class="section-tag">Exercice 2 / 4 — 5 min</div>
     <div class="slide-title">Recherche par type de produit</div>
-    <p class="slide-intro">Explorez les catégories disponibles à l'aide des filtres par code TP (Type Product).</p>
+    <p class="slide-intro">Explorez les catégories disponibles à l'aide des filtres par TP.</p>
     <ul class="questions-list">
       <li class="q-item">
         <div class="q-head"><span class="q-num">1</span><span>Utilisez le filtre « Type de produit » et sélectionnez « Rodenticides (TP14) » ou « Insecticides (TP18) ». Combien de produits sont disponibles ?</span></div>
@@ -514,10 +536,6 @@
         <textarea class="answer-field" id="bio_ex2_2" placeholder="Votre réponse…" data-question="Ex2 — Comparaison entre catégories"></textarea>
       </li>
     </ul>
-    <div class="actions-row">
-      <button class="hint-btn" onclick="showHint('ex2')">💡 Voir les indications</button>
-      <button class="btn btn-amber" onclick="goTo(4)">Exercice suivant →</button>
-    </div>
   </div>
 </div>
 
@@ -537,10 +555,6 @@
         <textarea class="answer-field" id="bio_ex3_2" placeholder="Votre réponse…" data-question="Ex3 — Formulations et concentrations comparées"></textarea>
       </li>
     </ul>
-    <div class="actions-row">
-      <button class="hint-btn" onclick="showHint('ex3')">💡 Voir les indications</button>
-      <button class="btn btn-amber" onclick="goTo(5)">Cas de synthèse →</button>
-    </div>
   </div>
 </div>
 
@@ -567,9 +581,6 @@
         <textarea class="answer-field" id="bio_ex4_3" placeholder="Votre réponse…" data-question="Ex4 — Argumentaire (+ bonus FDS)"></textarea>
       </li>
     </ul>
-    <div class="actions-row">
-      <button class="btn btn-amber" onclick="goTo(6)">Voir les bonnes pratiques →</button>
-    </div>
   </div>
 </div>
 
@@ -606,6 +617,15 @@ let currentSlide = 0;
 let history = [];
 const totalSlides = 6;
 
+// 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 →' },
+  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 →' }
+};
+
 const hints = {
   ex1: {
     icon: '🔎',
@@ -637,6 +657,7 @@ function goTo(n) {
   const sa = next.querySelector('.scroll-area');
   if (sa) sa.scrollTop = 0;
   updateUI();
+  if (n === 6) setTimeout(launchConfetti, 200);
 }
 
 function goBack() {
@@ -652,28 +673,33 @@ function goBack() {
   updateUI();
 }
 
+function goNext() {
+  const cfg = slideConfig[currentSlide];
+  if (cfg && cfg.next != null) goTo(cfg.next);
+}
+
+function showHintCurrent() {
+  const cfg = slideConfig[currentSlide];
+  if (cfg && cfg.hint) showHint(cfg.hint);
+}
+
 function updateUI() {
   document.getElementById('progressFill').style.width =
     currentSlide === 0 ? '0%' : ((currentSlide / totalSlides) * 100) + '%';
   const counter = document.getElementById('slideCounter');
   counter.textContent = currentSlide === 0 ? '' : currentSlide + ' / ' + totalSlides;
   document.getElementById('bottomBar').style.display = currentSlide === 0 ? 'none' : 'flex';
-  document.getElementById('backBtn').style.display = history.length > 0 ? 'block' : 'none';
+  document.getElementById('backBtn').style.display = history.length > 0 ? 'inline-flex' : 'none';
 
-  const badge = document.getElementById('phaseBadge');
+  const cfg = slideConfig[currentSlide] || {};
-  if (currentSlide >= 2 && currentSlide <= 5) {
+  const hintBtn = document.getElementById('footerHintBtn');
-    badge.style.display = 'block';
+  const nextBtn = document.getElementById('footerNextBtn');
-    if (currentSlide === 5) {
+  hintBtn.style.display = cfg.hint ? 'inline-flex' : 'none';
-      badge.style.background = 'var(--coral-light)';
+  if (cfg.next != null) {
-      badge.style.color = 'var(--coral)';
+    nextBtn.style.display = 'inline-flex';
-      badge.textContent = 'Cas de synthèse';
+    nextBtn.textContent = cfg.nextLabel;
   } else {
-      badge.style.background = 'var(--amber-light)';
+    nextBtn.style.display = 'none';
-      badge.style.color = 'var(--amber-dark)';
-      badge.textContent = 'Exercice ' + (currentSlide - 1) + ' / 4';
-    }
-  } else {
-    badge.style.display = 'none';
   }
 }
 
@@ -702,6 +728,78 @@ function restartAll() {
   updateUI();
 }
 
+function launchConfetti() {
+  const canvas = document.getElementById('confettiCanvas');
+  if (!canvas) return;
+  const ctx = canvas.getContext('2d');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  canvas.style.display = 'block';
+
+  const colors = ['#BA7517', '#D85A30', '#F5DFB8', '#633806', '#F0A855', '#E8C068', '#FF8C5A'];
+  const particles = Array.from({ length: 180 }, () => ({
+    x: Math.random() * canvas.width,
+    y: -(Math.random() * canvas.height * 0.5),
+    w: Math.random() * 10 + 5,
+    h: Math.random() * 5 + 3,
+    color: colors[Math.floor(Math.random() * colors.length)],
+    rotation: Math.random() * Math.PI * 2,
+    rotSpeed: (Math.random() - 0.5) * 0.18,
+    vx: (Math.random() - 0.5) * 2.5,
+    vy: Math.random() * 3 + 2,
+    opacity: 1,
+    shape: Math.random() < 0.4 ? 'circle' : 'rect'
+  }));
+
+  let rafId;
+  let start = null;
+  const totalDuration = 3800;
+
+  function draw(ts) {
+    if (!start) start = ts;
+    const elapsed = ts - start;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    let active = false;
+
+    particles.forEach(p => {
+      p.x += p.vx;
+      p.y += p.vy;
+      p.vy += 0.04;
+      p.rotation += p.rotSpeed;
+      p.opacity = elapsed < totalDuration * 0.55
+        ? 1
+        : Math.max(0, 1 - (elapsed - totalDuration * 0.55) / (totalDuration * 0.45));
+
+      if (p.y < canvas.height + 20) active = true;
+
+      ctx.save();
+      ctx.translate(p.x, p.y);
+      ctx.rotate(p.rotation);
+      ctx.globalAlpha = p.opacity;
+      ctx.fillStyle = p.color;
+      if (p.shape === 'circle') {
+        ctx.beginPath();
+        ctx.arc(0, 0, p.w / 2, 0, Math.PI * 2);
+        ctx.fill();
+      } else {
+        ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
+      }
+      ctx.restore();
+    });
+
+    if (active && elapsed < totalDuration * 1.3) {
+      rafId = requestAnimationFrame(draw);
+    } else {
+      canvas.style.display = 'none';
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+  }
+
+  if (rafId) cancelAnimationFrame(rafId);
+  rafId = requestAnimationFrame(draw);
+}
+
 function escapeHtml(str) {
   if (!str) return '';
   return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

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;
+  font-size: 12px; font-weight: 800; white-space: nowrap;
-  padding: 8px 10px; min-width: 66px; text-align: center;
+  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>
-  <button class="btn btn-amber" onclick="goTo(2)" style="margin-top:1.5rem;">Commencer la partie 1 →</button>
+    <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="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="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 = 1; i <= 8; i++) left += tile(String(i), 'Rubrique ' + i);
-  for (let i = 9; i <= 16; i++) right += tile(String(i), 'R' + 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);