656 lines
22 KiB
HTML
656 lines
22 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</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>
|
|
:root {
|
|
--teal: #0F6E56;
|
|
--teal-mid: #1D9E75;
|
|
--teal-light: #E1F5EE;
|
|
--teal-dark: #085041;
|
|
--amber: #BA7517;
|
|
--amber-light: #FAEEDA;
|
|
--amber-dark: #633806;
|
|
--coral: #993C1D;
|
|
--coral-mid: #D85A30;
|
|
--coral-light: #FAECE7;
|
|
--purple: #534AB7;
|
|
--purple-light: #EEEDFE;
|
|
--purple-dark: #3C3489;
|
|
--blue: #185FA5;
|
|
--blue-light: #E6F1FB;
|
|
--bg: #F7F6F2;
|
|
--white: #FFFFFF;
|
|
--text: #1a1a18;
|
|
--text-muted: #6b6a65;
|
|
--border: rgba(0,0,0,0.1);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: 'DM Sans', sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
padding-top: 70px;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* HEADER NAVIGATION */
|
|
.nav-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 70px;
|
|
background: var(--white);
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 40px;
|
|
z-index: 1000;
|
|
backdrop-filter: blur(10px);
|
|
background: rgba(255, 255, 255, 0.95);
|
|
}
|
|
|
|
.header-logo {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.5px;
|
|
background: linear-gradient(135deg, var(--teal-mid), var(--coral-mid));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.header-nav {
|
|
display: flex;
|
|
gap: 30px;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-nav a {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.header-nav a:hover {
|
|
color: var(--teal-mid);
|
|
}
|
|
|
|
.header-nav a::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -4px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
background: var(--teal-mid);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.header-nav a:hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
.container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
background: var(--white);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
header {
|
|
background: linear-gradient(135deg, var(--purple-light) 0%, rgba(83, 74, 183, 0.05) 100%);
|
|
color: var(--text);
|
|
padding: 50px 40px;
|
|
text-align: center;
|
|
border-bottom: 3px solid var(--purple);
|
|
}
|
|
|
|
header h1 {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 2.2em;
|
|
margin-bottom: 10px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.5px;
|
|
color: var(--text);
|
|
}
|
|
|
|
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(--purple);
|
|
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(--purple);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.intro {
|
|
background: var(--purple-light);
|
|
padding: 20px;
|
|
border-left: 4px solid var(--purple);
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
font-size: 0.95em;
|
|
color: var(--text-muted);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.intro a {
|
|
color: var(--purple);
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
border-bottom: 2px solid var(--purple);
|
|
}
|
|
|
|
.intro a:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.exercise {
|
|
background: var(--white);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 25px;
|
|
margin-bottom: 20px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.exercise:hover {
|
|
border-color: var(--purple);
|
|
box-shadow: 0 12px 24px rgba(83, 74, 183, 0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.exercise-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
font-size: 1.1em;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
font-family: 'Syne', sans-serif;
|
|
}
|
|
|
|
.exercise-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: var(--purple-light);
|
|
color: var(--purple);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
font-size: 0.85em;
|
|
font-family: 'Syne', sans-serif;
|
|
}
|
|
|
|
.exercise-desc {
|
|
color: var(--text-muted);
|
|
margin-bottom: 15px;
|
|
font-style: italic;
|
|
padding: 8px 0;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
li {
|
|
padding: 10px 0 10px 30px;
|
|
position: relative;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
li::before {
|
|
content: '✓';
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--teal-mid);
|
|
font-weight: 700;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.exercise li {
|
|
background: var(--bg);
|
|
margin-bottom: 8px;
|
|
padding: 12px 15px 12px 40px;
|
|
border-radius: 6px;
|
|
border-left: 3px solid var(--teal-mid);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.exercise li:hover {
|
|
background: var(--teal-light);
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
.access {
|
|
background: var(--blue-light);
|
|
border-left: 4px solid var(--blue);
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.access li {
|
|
background: var(--white);
|
|
border-left-color: var(--blue);
|
|
}
|
|
|
|
.tips {
|
|
background: var(--amber-light);
|
|
border-left: 4px solid var(--amber);
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.tips h3 {
|
|
color: var(--amber-dark);
|
|
margin-bottom: 15px;
|
|
font-size: 1em;
|
|
font-family: 'Syne', sans-serif;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.tips li {
|
|
background: var(--white);
|
|
border-left-color: var(--amber);
|
|
}
|
|
|
|
.case-study {
|
|
background: linear-gradient(135deg, var(--purple-light) 0%, rgba(83, 74, 183, 0.05) 100%);
|
|
border: 2px solid var(--purple);
|
|
border-radius: 8px;
|
|
padding: 25px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.case-study-title {
|
|
font-size: 1.1em;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-family: 'Syne', sans-serif;
|
|
}
|
|
|
|
.case-study-title::before {
|
|
content: '🎯';
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.case-study-desc {
|
|
color: var(--text-muted);
|
|
margin-bottom: 15px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.case-study ul {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
button {
|
|
font-family: 'Syne', sans-serif;
|
|
background: var(--purple);
|
|
color: var(--white);
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
transition: all 0.3s ease;
|
|
margin-top: 15px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
button:hover {
|
|
background: var(--purple-dark);
|
|
box-shadow: 0 8px 16px rgba(83, 74, 183, 0.25);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
button:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.feedback {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background: var(--teal-light);
|
|
border: 1px solid var(--teal-mid);
|
|
border-radius: 6px;
|
|
color: var(--teal-dark);
|
|
display: none;
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
.feedback.show {
|
|
display: block;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
footer {
|
|
background: var(--bg);
|
|
padding: 25px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.progress {
|
|
height: 3px;
|
|
background: var(--border);
|
|
margin: 0;
|
|
border-radius: 0;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
top: 70px;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
background: var(--purple);
|
|
width: 0%;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-header {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.header-logo {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.header-nav {
|
|
gap: 15px;
|
|
}
|
|
|
|
.header-nav a {
|
|
font-size: 10px;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.content {
|
|
padding: 25px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.3em;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- HEADER NAVIGATION -->
|
|
<header>
|
|
<div class="logo">NextGN Formation</div>
|
|
<nav>
|
|
<a href="#formations">Exercices interactifs</a>
|
|
<a href="#documentation">Documentation</a>
|
|
<a href="#rapports">Rapports de veille</a>
|
|
<a href="#about">À propos</a>
|
|
<a href="#contact">Contact</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<header>
|
|
<h1>🎯 EXERCICES PRATIQUES BioCID</h1>
|
|
<p>Maîtriser la plateforme de recherche de produits biocides</p>
|
|
</header>
|
|
|
|
<div class="progress">
|
|
<div class="progress-bar" id="progressBar"></div>
|
|
</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" style="color: var(--purple); text-decoration: none; font-weight: 600; border-bottom: 2px solid var(--purple);">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; font-size: 0.95em;">Pour toute question sur BioCID : <strong>support.biocid@anses.fr</strong></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 = (scrollTop / docHeight) * 100;
|
|
document.getElementById('progressBar').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>
|
|
|