gauthier.chombart
44be41b2b2
Header, footer, titres et balises meta de toutes les pages actives : remplace NextGN Formation par Gauthier Chombart & Nathan Chauwin. Nouveau pied de page uniforme mentionnant les droits reserves et le statut de formateurs independants (dossier archives/ laisse inchange). Integre aussi la refonte du jeu Memory (CSS/JS/HUD/leaderboard) et ajoute le rapport de veille Certibiocide semaine 28.
520 lines
18 KiB
HTML
520 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Exercices Pratiques BioCID - Gauthier Chombart & Nathan Chauwin</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../header-style.css"/>
|
|
<style>
|
|
body {
|
|
padding-top: 70px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
background: var(--white);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
.page-header {
|
|
background: linear-gradient(135deg, var(--amber-light) 0%, rgba(186, 117, 23, 0.05) 100%);
|
|
color: var(--text);
|
|
padding: 50px 40px;
|
|
text-align: center;
|
|
border-bottom: 3px solid var(--amber);
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 2.2em;
|
|
margin-bottom: 10px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.5px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.page-header p {
|
|
font-size: 1em;
|
|
opacity: 0.8;
|
|
font-weight: 400;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.content {
|
|
padding: 50px 40px;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 40px;
|
|
animation: fadeIn 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-family: 'Syne', sans-serif;
|
|
color: var(--text);
|
|
font-size: 1.6em;
|
|
margin-bottom: 15px;
|
|
border-bottom: 3px solid var(--amber);
|
|
padding-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
h2::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--amber);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
h3 {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 1.2em;
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
color: var(--text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.intro {
|
|
background: var(--amber-light);
|
|
padding: 20px;
|
|
border-left: 4px solid var(--amber);
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
font-size: 0.95em;
|
|
color: var(--text-muted);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.intro a {
|
|
color: var(--amber);
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
border-bottom: 2px solid var(--amber);
|
|
}
|
|
|
|
.intro a:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.access ul,
|
|
.exercise ul,
|
|
.tips ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.access li,
|
|
.exercise li,
|
|
.tips li {
|
|
padding-left: 30px;
|
|
margin-bottom: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.access li::before,
|
|
.exercise li::before,
|
|
.tips li::before {
|
|
content: '▸';
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--amber);
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.access a {
|
|
color: var(--amber);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
border-bottom: 2px solid var(--amber);
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.access a:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.exercise {
|
|
background: var(--white);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 25px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.exercise-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
font-size: 1.1em;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.exercise-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: var(--amber);
|
|
color: var(--white);
|
|
border-radius: 50%;
|
|
font-family: 'Syne', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.exercise-desc {
|
|
font-size: 0.9em;
|
|
color: var(--text-muted);
|
|
margin-bottom: 15px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.exercise ul {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.exercise li {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
button {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
padding: 12px 28px;
|
|
border: none;
|
|
border-radius: 40px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
background: var(--amber);
|
|
color: var(--white);
|
|
}
|
|
|
|
button:hover {
|
|
background: var(--amber-dark);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 16px rgba(186, 117, 23, 0.25);
|
|
}
|
|
|
|
.feedback {
|
|
display: none;
|
|
background: var(--amber-light);
|
|
border-left: 4px solid var(--amber);
|
|
padding: 15px;
|
|
margin-top: 15px;
|
|
border-radius: 6px;
|
|
font-size: 0.95em;
|
|
color: var(--text-muted);
|
|
animation: slideDown 0.3s ease;
|
|
}
|
|
|
|
.feedback.show {
|
|
display: block;
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.case-study {
|
|
background: var(--amber-light);
|
|
border-left: 4px solid var(--amber);
|
|
border-radius: 8px;
|
|
padding: 25px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.case-study-title {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 1.1em;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.case-study-desc {
|
|
font-size: 0.95em;
|
|
color: var(--text-muted);
|
|
margin-bottom: 15px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.case-study ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.case-study li {
|
|
padding-left: 30px;
|
|
margin-bottom: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.case-study li::before {
|
|
content: '✓';
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--amber);
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.tips {
|
|
background: var(--amber-light);
|
|
border-left: 4px solid var(--amber);
|
|
border-radius: 8px;
|
|
padding: 25px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tips h3 {
|
|
margin-top: 0;
|
|
color: var(--text);
|
|
}
|
|
|
|
footer p {
|
|
margin: 8px 0;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.page-header h1 {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.content {
|
|
padding: 25px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.exercise {
|
|
padding: 15px;
|
|
}
|
|
|
|
.case-study {
|
|
padding: 15px;
|
|
}
|
|
|
|
.tips {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- HEADER NAVIGATION -->
|
|
<header>
|
|
<div class="logo">Gauthier Chombart & Nathan Chauwin</div>
|
|
<nav>
|
|
<a href="../index.html">Accueil</a>
|
|
<a href="../index.html#formations">Exercices</a>
|
|
<a href="../index.html#documentation">Documentation</a>
|
|
<a href="../index.html#rapports">Rapports</a>
|
|
<a href="../index.html#about">À propos</a>
|
|
<a href="../index.html#contact">Contact</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- PROGRESS BAR -->
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progressFill"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="page-header">
|
|
<h1>🎯 Exercices Pratiques BioCID</h1>
|
|
<p>Maîtriser la plateforme de recherche de produits biocides</p>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<!-- SECTION CONTEXTE -->
|
|
<div class="section">
|
|
<h2>Contexte</h2>
|
|
<div class="intro">
|
|
BioCID est la plateforme officielle de l'ANSES pour consulter tous les produits biocides autorisés et déclarés en France. Cet exercice vous permettra de vous familiariser avec ses différents modes de recherche et de développer une autonomie dans la consultation des produits.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ACCÈS À LA PLATEFORME -->
|
|
<div class="section">
|
|
<h2>Accès à la Plateforme</h2>
|
|
<div class="access">
|
|
<ul>
|
|
<li>Rendez-vous sur : <a href="https://biocid-anses.fr/biocid" target="_blank">https://biocid-anses.fr/biocid</a></li>
|
|
<li>Cliquez sur « Rechercher un produit »</li>
|
|
<li>Vous accédez à la base de données consultable</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- EXERCICE 1 -->
|
|
<div class="section">
|
|
<h2>Exercice 1 : Recherche par Nom de Produit</h2>
|
|
<div class="exercise">
|
|
<div class="exercise-title">
|
|
<div class="exercise-icon">1</div>
|
|
Trouver un produit spécifique
|
|
</div>
|
|
<div class="exercise-desc">Durée : 5 minutes</div>
|
|
<ul>
|
|
<li>Recherchez un produit connu (ex. « Goliath », « Phobi », « Soricide »)</li>
|
|
<li>Notez le type de produit, la substance active, et le fabricant</li>
|
|
<li>Vérifiez la date d'autorisation du produit</li>
|
|
<li>Observez les conditions d'utilisation mentionnées</li>
|
|
</ul>
|
|
<button onclick="toggleFeedback(1)">📝 Voir les indications</button>
|
|
<div class="feedback" id="feedback1">
|
|
<strong>Indications :</strong> Cherchez dans la zone de texte principale. Les résultats affichent le nom du produit, le fabricant et la substance active. C'est généralement le chemin le plus rapide pour localiser un produit connu.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- EXERCICE 2 -->
|
|
<div class="section">
|
|
<h2>Exercice 2 : Recherche par Type de Produit</h2>
|
|
<div class="exercise">
|
|
<div class="exercise-title">
|
|
<div class="exercise-icon">2</div>
|
|
Explorer les catégories disponibles
|
|
</div>
|
|
<div class="exercise-desc">Durée : 5 minutes</div>
|
|
<ul>
|
|
<li>Utilisez le filtre « Type de produit »</li>
|
|
<li>Sélectionnez « Rodenticides (TP14) » ou « Insecticides (TP18) »</li>
|
|
<li>Comptez combien de produits sont disponibles dans cette catégorie</li>
|
|
<li>Comparez avec une autre catégorie (ex. Désinfectants TP2/TP3/TP4)</li>
|
|
</ul>
|
|
<button onclick="toggleFeedback(2)">📝 Voir les indications</button>
|
|
<div class="feedback" id="feedback2">
|
|
<strong>Indications :</strong> Les filtres se trouvent généralement dans un menu latéral ou en haut de la page. Les types de produits correspondent aux codes TP (Type Product). Les rodenticides et insecticides sont souvent parmi les plus représentés.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- EXERCICE 3 -->
|
|
<div class="section">
|
|
<h2>Exercice 3 : Recherche par Substance Active</h2>
|
|
<div class="exercise">
|
|
<div class="exercise-title">
|
|
<div class="exercise-icon">3</div>
|
|
Trouver tous les produits d'une même substance
|
|
</div>
|
|
<div class="exercise-desc">Durée : 5 minutes</div>
|
|
<ul>
|
|
<li>Recherchez une substance active (ex. « Brodifacoum », « Perméthrine »)</li>
|
|
<li>Listez au minimum 3 produits différents contenant cette substance</li>
|
|
<li>Observez si différents fabricants proposent des formulations variées</li>
|
|
<li>Comparez les concentrations de la substance active d'un produit à l'autre</li>
|
|
</ul>
|
|
<button onclick="toggleFeedback(3)">📝 Voir les indications</button>
|
|
<div class="feedback" id="feedback3">
|
|
<strong>Indications :</strong> Cherchez dans la zone « Substance active » si elle existe. Une même substance active peut être formée différemment selon les fabricants (poudre, granulé, liquid, etc.).
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- EXERCICE 4 : CAS DE SYNTHÈSE -->
|
|
<div class="section">
|
|
<h2>Exercice 4 : Cas de Synthèse</h2>
|
|
<div class="case-study">
|
|
<div class="case-study-title">Mise en situation réelle</div>
|
|
<div class="case-study-desc">
|
|
Un restaurant vous appelle pour vous demander un produit. En utilisant BioCID, vous devez présenter une recommandation argumentée.
|
|
</div>
|
|
<ul>
|
|
<li>Filtrez par type : « Désinfectants (TP2/TP3/TP4) » ou « Produits de lutte contre les nuisibles (TP14/TP18/TP20) »</li>
|
|
<li>Identifiez au minimum 3 produits applicables</li>
|
|
<li>Pour chacun, relevez : nom, fabricant, substance active, usage spécifique</li>
|
|
<li>Proposez un court argumentaire pour chaque produit</li>
|
|
<li><strong>Bonus :</strong> Recherchez les fiches de sécurité (FDS) associées</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ASTUCES ET BONNES PRATIQUES -->
|
|
<div class="section">
|
|
<div class="tips">
|
|
<h3>💡 Astuces d'Utilisation & Bonnes Pratiques</h3>
|
|
<ul>
|
|
<li>Combinez plusieurs filtres pour affiner votre recherche (type + substance + fabricant)</li>
|
|
<li>Consultez toujours les fiches de sécurité (FDS) des produits avant recommandation</li>
|
|
<li>Vérifiez les conditions d'utilisation : usage professionnel vs. domestique</li>
|
|
<li>BioCID est mis à jour régulièrement avec les nouvelles autorisations et retraits</li>
|
|
<li>En cas de doute, contactez l'ANSES ou consultez un expert en biocides</li>
|
|
<li>Notez toujours les références exactes pour traçabilité (numéro d'AMM)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p><strong>Durée totale estimée :</strong> 30 minutes</p>
|
|
<p style="margin-top: 15px;">Pour toute question sur BioCID : <strong>support.biocid@anses.fr</strong></p>
|
|
<p style="margin-top: 20px; opacity: 0.7; font-size: 0.9em;">© 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
|
|
<p style="opacity: 0.6; font-size: 0.85em;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleFeedback(exerciseNum) {
|
|
const feedbackId = 'feedback' + exerciseNum;
|
|
const element = document.getElementById(feedbackId);
|
|
element.classList.toggle('show');
|
|
}
|
|
|
|
// Mise à jour de la barre de progression au scroll
|
|
window.addEventListener('scroll', () => {
|
|
const scrollTop = window.scrollY;
|
|
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
|
const scrollPercent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
|
|
document.getElementById('progressFill').style.width = scrollPercent + '%';
|
|
});
|
|
|
|
// Animation au chargement
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const sections = document.querySelectorAll('.section');
|
|
sections.forEach((section, index) => {
|
|
section.style.animationDelay = (index * 0.1) + 's';
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|