diff --git a/exercices/TP_Nuisibles.html b/exercices/TP_Nuisibles.html
index 4f3fc19..9eb1d37 100644
--- a/exercices/TP_Nuisibles.html
+++ b/exercices/TP_Nuisibles.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;
@@ -42,38 +42,54 @@
.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 NAV */
+.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);
}
-
-/* BACK BUTTON */
-.back-btn {
- background: none;
- border: 0.5px solid var(--amber);
- border-radius: 20px;
- padding: 6px 16px;
- font-size: 12px;
- color: var(--amber-dark);
- cursor: pointer;
- transition: all 0.2s;
- font-family: 'DM Sans', sans-serif;
+@media (max-width: 560px) {
+ .slide-counter { display: none; }
}
-.back-btn:hover { background: rgba(186,117,23,0.08); }
/* FORMATEUR SELECTOR */
.formateur-btn {
@@ -599,7 +615,7 @@
/* SCROLLABLE AREA */
.scroll-area {
overflow-y: auto;
- max-height: calc(100vh - 232px);
+ max-height: calc(100vh - 200px);
width: 100%;
display: flex;
flex-direction: column;
@@ -642,8 +658,12 @@
@@ -692,8 +712,7 @@
Merci de renseigner au moins le nom du groupe.
@@ -734,9 +753,6 @@
Camping
-
-
-
@@ -764,7 +780,6 @@
💡
À tout moment, cliquez sur « Besoin d'aide ? » pour accéder à un indice. Le formateur corrigera à l'oral en fin de séance.
-
@@ -782,7 +797,6 @@
2. Intervention
3. Évaluation
-
@@ -823,10 +837,6 @@
-
-
-
-
@@ -861,10 +871,6 @@
-
-
-
-
@@ -895,10 +901,6 @@
✅ TP 1 terminé ! Préparez-vous à identifier le produit adapté à votre cas sur biocid-anses.fr.
-
-
-
-
@@ -920,7 +922,6 @@
Ouvrir le site ↗
-
@@ -961,10 +962,6 @@
-
-
-
-
@@ -1009,10 +1006,6 @@
✅ TP 2 terminé ! Passez maintenant à l'analyse de risques complète.
-
-
-
-
@@ -1029,9 +1022,6 @@
Communication
EPI (dernier recours)
-
-
-
@@ -1100,10 +1090,6 @@
✅ TP 3 terminé ! Présentez vos réponses au formateur pour la correction.
-
-
-
-
@@ -1154,6 +1140,22 @@ const totalSlides = 13;
const selectedCase = { key: '', icon: '', title: '', desc: '' };
const stagiaire = { nom: '', date: '', formateur: '' };
+// Configuration des boutons du footer par slide (modèle BioCID)
+const slideConfig = {
+ 1: { next: 2, nextLabel: 'Continuer →' },
+ 2: { next: 3, nextLabel: 'Confirmer le choix →' },
+ 3: { next: 4, nextLabel: 'Commencer le TP 1 →' },
+ 4: { next: 5, nextLabel: 'Commencer →' },
+ 5: { next: 6, nextLabel: 'Étape suivante →', hint: 'prevention' },
+ 6: { next: 7, nextLabel: 'Étape suivante →', hint: 'intervention' },
+ 7: { next: 8, nextLabel: 'Passer au TP 2 →', hint: 'evaluation' },
+ 8: { next: 9, nextLabel: 'Commencer →' },
+ 9: { next: 10, nextLabel: 'Partie suivante →', hint: 'fds' },
+ 10: { next: 11, nextLabel: 'Passer au TP 3 →', hint: 'epi' },
+ 11: { next: 12, nextLabel: 'Remplir le tableau →' },
+ 12: { next: 13, nextLabel: 'Terminer la mission →', hint: 'analyse' }
+};
+
const hints = {
prevention: {
icon: '💡',
@@ -1240,11 +1242,28 @@ function goTo(n) {
currentSlide = n;
next.style.display = 'flex';
setTimeout(() => { next.classList.add('active', 'fade-in'); }, 10);
+ const sa = next.querySelector('.scroll-area');
+ if (sa) sa.scrollTop = 0;
if (n === 13) setTimeout(launchConfetti, 200);
updateUI();
updateCaseBanners();
}
+function goNext() {
+ const cfg = slideConfig[currentSlide];
+ if (!cfg || cfg.next == null) return;
+ // Slide 1 : validation du nom du groupe avant de continuer
+ if (currentSlide === 1) { confirmIdentite(); return; }
+ // Slide 2 : un cas doit être sélectionné
+ if (currentSlide === 2 && !selectedCase.key) return;
+ goTo(cfg.next);
+}
+
+function showHintCurrent() {
+ const cfg = slideConfig[currentSlide];
+ if (cfg && cfg.hint) showHint(cfg.hint);
+}
+
function goBack() {
if (history.length === 0) return;
const prev = history.pop();
@@ -1269,7 +1288,20 @@ function updateUI() {
if (bottomBar) bottomBar.style.display = currentSlide === 0 ? 'none' : 'flex';
const backBtn = document.getElementById('backBtn');
- backBtn.style.display = history.length > 0 ? 'block' : 'none';
+ backBtn.style.display = history.length > 0 ? 'inline-flex' : 'none';
+
+ const cfg = slideConfig[currentSlide] || {};
+ const hintBtn = document.getElementById('footerHintBtn');
+ const nextBtn = document.getElementById('footerNextBtn');
+ hintBtn.style.display = cfg.hint ? 'inline-flex' : 'none';
+ if (cfg.next != null) {
+ // Slide 2 : le bouton n'apparaît qu'une fois le cas choisi
+ const gated = currentSlide === 2 && !selectedCase.key;
+ nextBtn.style.display = gated ? 'none' : 'inline-flex';
+ nextBtn.textContent = cfg.nextLabel;
+ } else {
+ nextBtn.style.display = 'none';
+ }
}
function selectCase(key, icon, title, desc) {
@@ -1280,7 +1312,7 @@ function selectCase(key, icon, title, desc) {
selectedCase.desc = desc;
document.querySelectorAll('.case-card').forEach(c => c.classList.remove('selected'));
event.currentTarget.classList.add('selected');
- document.getElementById('btnConfirmCase').style.display = 'inline-flex';
+ updateUI();
}
function updateCaseBanners() {