diff --git a/articles/frelon_asiatique_evolution.html b/articles/articles/frelon_asiatique_evolution.html similarity index 100% rename from articles/frelon_asiatique_evolution.html rename to articles/articles/frelon_asiatique_evolution.html diff --git a/exercices/TP_Nuisibles.html b/exercices/TP_Nuisibles.html index acc7667..c9a9eb2 100644 --- a/exercices/TP_Nuisibles.html +++ b/exercices/TP_Nuisibles.html @@ -17,6 +17,7 @@ justify-content: center; padding: 2rem; padding-top: calc(70px + 2rem); + padding-bottom: calc(52px + 2rem); opacity: 0; transition: opacity 0.4s ease; overflow-y: auto; @@ -51,31 +52,59 @@ z-index: 100; } +/* BOTTOM BAR */ +.bottom-bar { + position: fixed; + bottom: 0; left: 0; right: 0; + height: 52px; + background: rgba(250, 238, 218, 0.98); + border-top: 2px solid var(--amber); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + z-index: 100; + backdrop-filter: blur(10px); +} + /* SLIDE NAV */ .slide-counter { - position: fixed; - bottom: 20px; right: 20px; font-size: 12px; - color: var(--text-muted); - z-index: 100; + font-family: 'Syne', sans-serif; + font-weight: 600; + color: var(--amber-dark); } /* BACK BUTTON */ .back-btn { - position: fixed; - bottom: 20px; left: 20px; background: none; - border: 0.5px solid var(--border); + border: 0.5px solid var(--amber); border-radius: 20px; padding: 6px 16px; font-size: 12px; - color: var(--text-muted); + color: var(--amber-dark); cursor: pointer; - z-index: 100; transition: all 0.2s; font-family: 'DM Sans', sans-serif; } -.back-btn:hover { background: rgba(0,0,0,0.05); } +.back-btn:hover { background: rgba(186,117,23,0.08); } + +/* FORMATEUR SELECTOR */ +.formateur-btn { + font-family: 'Syne', sans-serif; + font-size: 14px; + font-weight: 600; + 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.selected { background: var(--amber-light); border-color: var(--amber); color: var(--amber-dark); font-weight: 700; } /* CARDS & BUTTONS */ .btn { @@ -577,7 +606,7 @@ /* SCROLLABLE AREA */ .scroll-area { overflow-y: auto; - max-height: calc(100vh - 180px); + max-height: calc(100vh - 232px); width: 100%; display: flex; flex-direction: column; @@ -618,11 +647,11 @@ - -
- - - + + +
+ +
+ + +
+
@@ -1103,10 +1139,8 @@
- - +
-
biocid-anses.fr ↗ @@ -1121,7 +1155,7 @@ let history = []; const totalSlides = 13; const selectedCase = { key: '', icon: '', title: '', desc: '' }; -const stagiaire = { nom: '', date: '' }; +const stagiaire = { nom: '', date: '', formateur: '' }; const hints = { prevention: { @@ -1233,6 +1267,9 @@ function updateUI() { const counter = document.getElementById('slideCounter'); counter.textContent = currentSlide === 0 ? '' : currentSlide + ' / ' + totalSlides; + const bottomBar = document.getElementById('bottomBar'); + if (bottomBar) bottomBar.style.display = currentSlide === 0 ? 'none' : 'flex'; + const backBtn = document.getElementById('backBtn'); backBtn.style.display = history.length > 0 ? 'block' : 'none'; @@ -1316,6 +1353,13 @@ document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); }); +/* ======================== FORMATEUR ======================== */ +function selectFormateur(nom) { + stagiaire.formateur = nom; + document.querySelectorAll('.formateur-btn').forEach(b => b.classList.remove('selected')); + document.getElementById('btn' + nom).classList.add('selected'); +} + /* ======================== IDENTIFICATION ======================== */ function confirmIdentite() { const nom = document.getElementById('inputNom').value.trim(); @@ -1366,6 +1410,7 @@ function collecterReponses() { return { nom: stagiaire.nom, date_session: stagiaire.date, + formateur: stagiaire.formateur || '', cas_choisi: selectedCase.title || '', cas_cle: selectedCase.key || '', reponses: reponses, @@ -1455,6 +1500,7 @@ function exporterPDF() {

TP Nuisibles — Certibiocide 2025

Groupe / Stagiaire : ${escapeHtml(data.nom)}

Date de session : ${escapeHtml(data.date_session)}

+

Formateur : ${escapeHtml(data.formateur)}

Cas pratique : ${escapeHtml(data.cas_choisi)}

Réponses TP1 & TP2

${lignes}