Compare commits

...

4 Commits

15 changed files with 2822 additions and 3376 deletions

View File

@@ -5,135 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercices Pratiques BioCID - NextGN Formation</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 {
--amber: #BA7517;
--amber-mid: #BA7517;
--amber-light: #FAEEDA;
--amber-dark: #633806;
--amber: #BA7517;
--amber-light: #FAEEDA;
--amber-dark: #633806;
--coral: #993C1D;
--coral-mid: #D85A30;
--coral-light: #FAECE7;
--purple: #BA7517;
--purple-light: #FAEEDA;
--purple-dark: #633806;
--blue: #BA7517;
--blue-light: #FAEEDA;
--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 */
header.nav-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background: var(--amber-light);
border-bottom: 2px solid var(--amber);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
z-index: 1000;
backdrop-filter: blur(10px);
background: rgba(250, 238, 218, 0.98);
}
.logo {
font-family: 'Syne', sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.5px;
background: linear-gradient(135deg, var(--amber), 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;
}
nav {
display: flex;
gap: 30px;
align-items: center;
}
nav a {
font-family: 'Syne', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
text-decoration: none;
transition: color 0.3s ease;
position: relative;
}
nav a:hover {
color: var(--amber);
}
nav a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--amber);
transition: width 0.3s ease;
}
nav a:hover::after {
width: 100%;
}
/* PROGRESS BAR */
.progress-bar {
position: fixed;
top: 70px;
left: 0;
right: 0;
height: 3px;
background: rgba(0, 0, 0, 0.1);
z-index: 999;
}
.progress-fill {
height: 100%;
background: var(--amber);
width: 0%;
transition: width 0.1s ease;
}
.container {
@@ -431,37 +306,12 @@
color: var(--text);
}
footer {
background: var(--text);
color: var(--white);
padding: 40px;
text-align: center;
border-top: 2px solid var(--amber);
font-size: 0.95em;
}
footer p {
margin: 8px 0;
opacity: 0.9;
}
@media (max-width: 768px) {
header.nav-header {
padding: 0 20px;
}
.logo {
font-size: 16px;
}
nav {
gap: 15px;
}
nav a {
font-size: 10px;
}
.page-header h1 {
font-size: 1.8em;
}
@@ -490,15 +340,15 @@
</head>
<body>
<!-- HEADER NAVIGATION -->
<header class="nav-header">
<header>
<div class="logo">NextGN Formation</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>
<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>

View File

@@ -5,135 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercices Pratiques BioCID - NextGN Formation</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 {
--amber: #BA7517;
--amber-mid: #BA7517;
--amber-light: #FAEEDA;
--amber-dark: #633806;
--amber: #BA7517;
--amber-light: #FAEEDA;
--amber-dark: #633806;
--coral: #993C1D;
--coral-mid: #D85A30;
--coral-light: #FAECE7;
--purple: #BA7517;
--purple-light: #FAEEDA;
--purple-dark: #633806;
--blue: #BA7517;
--blue-light: #FAEEDA;
--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 */
header.nav-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background: var(--amber-light);
border-bottom: 2px solid var(--amber);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
z-index: 1000;
backdrop-filter: blur(10px);
background: rgba(250, 238, 218, 0.98);
}
.logo {
font-family: 'Syne', sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.5px;
background: linear-gradient(135deg, var(--amber), 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;
}
nav {
display: flex;
gap: 30px;
align-items: center;
}
nav a {
font-family: 'Syne', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
text-decoration: none;
transition: color 0.3s ease;
position: relative;
}
nav a:hover {
color: var(--amber);
}
nav a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--amber);
transition: width 0.3s ease;
}
nav a:hover::after {
width: 100%;
}
/* PROGRESS BAR */
.progress-bar {
position: fixed;
top: 70px;
left: 0;
right: 0;
height: 3px;
background: rgba(0, 0, 0, 0.1);
z-index: 999;
}
.progress-fill {
height: 100%;
background: var(--amber);
width: 0%;
transition: width 0.1s ease;
}
.container {
@@ -431,37 +306,12 @@
color: var(--text);
}
footer {
background: var(--text);
color: var(--white);
padding: 40px;
text-align: center;
border-top: 2px solid var(--amber);
font-size: 0.95em;
}
footer p {
margin: 8px 0;
opacity: 0.9;
}
@media (max-width: 768px) {
header.nav-header {
padding: 0 20px;
}
.logo {
font-size: 16px;
}
nav {
gap: 15px;
}
nav a {
font-size: 10px;
}
.page-header h1 {
font-size: 1.8em;
}
@@ -490,15 +340,15 @@
</head>
<body>
<!-- HEADER NAVIGATION -->
<header class="nav-header">
<header>
<div class="logo">NextGN Formation</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>
<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>

View File

@@ -5,117 +5,10 @@
<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 {
@@ -127,7 +20,7 @@
overflow: visible;
}
header {
.page-header {
background: linear-gradient(135deg, var(--purple-light) 0%, rgba(83, 74, 183, 0.05) 100%);
color: var(--text);
padding: 50px 40px;
@@ -135,7 +28,7 @@
border-bottom: 3px solid var(--purple);
}
header h1 {
.page-header h1 {
font-family: 'Syne', sans-serif;
font-size: 2.2em;
margin-bottom: 10px;
@@ -144,7 +37,7 @@
color: var(--text);
}
header p {
.page-header p {
font-size: 1em;
opacity: 0.8;
font-weight: 400;
@@ -446,23 +339,7 @@
}
@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 {
.page-header h1 {
font-size: 1.8em;
}
@@ -481,19 +358,20 @@
<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>
<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>
<div class="container">
<header>
<div class="page-header">
<h1>🎯 EXERCICES PRATIQUES BioCID</h1>
<p>Maîtriser la plateforme de recherche de produits biocides</p>
</header>
</div>
<div class="progress">
<div class="progress-bar" id="progressBar"></div>

View File

@@ -5,117 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TD FDS, FT et Étiquettes</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 {
--amber: #BA7517;
--amber-mid: #BA7517;
--amber-light: #FAEEDA;
--amber-dark: #633806;
--amber: #BA7517;
--amber-light: #FAEEDA;
--amber-dark: #633806;
--coral: #993C1D;
--coral-mid: #D85A30;
--coral-light: #FAECE7;
--purple: #BA7517;
--purple-light: #FAEEDA;
--purple-dark: #633806;
--blue: #BA7517;
--blue-light: #FAEEDA;
--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(--amber-light);
border-bottom: 2px solid var(--amber);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
z-index: 1000;
backdrop-filter: blur(10px);
background: rgba(250, 238, 218, 0.98);
}
.header-logo {
font-family: 'Syne', sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.5px;
background: linear-gradient(135deg, var(--amber), 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(--amber);
}
.header-nav a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--amber);
transition: width 0.3s ease;
}
.header-nav a:hover::after {
width: 100%;
}
.container {
@@ -127,7 +20,7 @@
overflow: visible;
}
header {
.page-header {
background: linear-gradient(135deg, var(--amber-light) 0%, rgba(24, 95, 165, 0.05) 100%);
color: var(--text);
padding: 50px 40px;
@@ -135,7 +28,7 @@
border-bottom: 3px solid var(--amber);
}
header h1 {
.page-header h1 {
font-family: 'Syne', sans-serif;
font-size: 2.2em;
margin-bottom: 10px;
@@ -144,7 +37,7 @@
color: var(--text);
}
header p {
.page-header p {
font-size: 1em;
opacity: 0.8;
font-weight: 400;
@@ -423,23 +316,7 @@
}
@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 {
.page-header h1 {
font-size: 1.8em;
}
@@ -467,22 +344,21 @@
<!-- HEADER NAVIGATION -->
<header>
<div class="logo">NextGN Formation</div>
<a href="../../index.html">Accueil</a>
<nav>
<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>
<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>
<body>
<div class="container">
<header>
<div class="page-header">
<h1>📋 TD — ANALYSE FDS, FT ET ÉTIQUETTES</h1>
<p>Maîtriser les documents essentiels des produits biocides</p>
</header>
</div>
<div class="progress">
<div class="progress-bar" id="progressBar"></div>

View File

@@ -5,117 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TD FDS, FT et Étiquettes</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(--blue);
}
.header-nav a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--blue);
transition: width 0.3s ease;
}
.header-nav a:hover::after {
width: 100%;
}
.container {
@@ -127,7 +20,7 @@
overflow: visible;
}
header {
.page-header {
background: linear-gradient(135deg, var(--blue-light) 0%, rgba(24, 95, 165, 0.05) 100%);
color: var(--text);
padding: 50px 40px;
@@ -135,7 +28,7 @@
border-bottom: 3px solid var(--blue);
}
header h1 {
.page-header h1 {
font-family: 'Syne', sans-serif;
font-size: 2.2em;
margin-bottom: 10px;
@@ -144,7 +37,7 @@
color: var(--text);
}
header p {
.page-header p {
font-size: 1em;
opacity: 0.8;
font-weight: 400;
@@ -423,23 +316,7 @@
}
@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 {
.page-header h1 {
font-size: 1.8em;
}
@@ -468,20 +345,20 @@
<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>
<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>
<body>
<div class="container">
<header>
<div class="page-header">
<h1>📋 TD — ANALYSE FDS, FT ET ÉTIQUETTES</h1>
<p>Maîtriser les documents essentiels des produits biocides</p>
</header>
</div>
<div class="progress">
<div class="progress-bar" id="progressBar"></div>

View File

@@ -5,42 +5,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formation Certibiocide — Travaux Pratiques</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);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: 'DM Sans', sans-serif;
background: var(--bg);
color: var(--text);
overflow: hidden;
}
/* SLIDES */
.slide {
position: absolute;
inset: 0;
top: 70px; left: 0; right: 0; bottom: 0;
display: none;
flex-direction: column;
align-items: center;
@@ -59,16 +33,7 @@ body {
to { opacity: 1; transform: translateY(0); }
}
/* PROGRESS BAR */
.progress-bar {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
background: rgba(0,0,0,0.08);
z-index: 100;
}
.progress-fill {
height: 100%;
background: var(--teal-mid);
transition: width 0.4s ease;
}
@@ -76,7 +41,7 @@ body {
/* PHASE INDICATOR */
.phase-badge {
position: fixed;
top: 16px; right: 16px;
top: 80px; right: 16px;
font-family: 'Syne', sans-serif;
font-size: 11px;
font-weight: 700;
@@ -507,6 +472,18 @@ body {
</head>
<body>
<header>
<div class="logo">NextGN Formation</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>

View File

@@ -5,114 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TP Nuisibles final — Étude de cas</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 {
--amber: #BA7517;
--amber-mid: #BA7517;
--amber-light: #FAEEDA;
--amber-dark: #633806;
--amber: #BA7517;
--amber-light: #FAEEDA;
--amber-dark: #633806;
--coral: #993C1D;
--coral-mid: #D85A30;
--coral-light: #FAECE7;
--purple: #BA7517;
--purple-light: #FAEEDA;
--purple-dark: #633806;
--blue: #BA7517;
--blue-light: #FAEEDA;
--bg: #F7F6F2;
--white: #FFFFFF;
--text: #1a1a18;
--text-muted: #6b6a65;
--border: rgba(0,0,0,0.1);
}
/* HEADER NAVIGATION */
.nav-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background: var(--amber-light);
border-bottom: 2px solid var(--amber);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
z-index: 1000;
backdrop-filter: blur(10px);
background: rgba(250, 238, 218, 0.98);
}
.header-logo {
font-family: 'Syne', sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.5px;
background: linear-gradient(135deg, var(--amber), 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(--coral-mid);
}
.header-nav a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--coral-mid);
transition: width 0.3s ease;
}
.header-nav a:hover::after {
width: 100%;
}
/* MAIN CONTENT ADJUSTMENT */
main {
margin-top: 70px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: 'DM Sans', sans-serif;
background: var(--bg);
color: var(--text);
overflow-x: hidden;
}
/* SLIDES */
.slide {
position: absolute;
@@ -138,16 +32,7 @@ body {
to { opacity: 1; transform: translateY(0); }
}
/* PROGRESS BAR */
.progress-bar {
position: fixed;
top: 70px; left: 0; right: 0;
height: 3px;
background: var(--border);
z-index: 999;
}
.progress-fill {
height: 100%;
background: var(--coral-mid);
transition: width 0.4s ease;
}
@@ -155,7 +40,7 @@ body {
/* PHASE INDICATOR */
.phase-badge {
position: fixed;
top: 16px; right: 16px;
top: 80px; right: 16px;
font-family: 'Syne', sans-serif;
font-size: 11px;
font-weight: 700;
@@ -308,6 +193,134 @@ body {
margin-top: 1px;
}
/* ANSWER FIELDS */
.answer-field {
width: 100%;
margin-top: 8px;
font-family: 'DM Sans', sans-serif;
font-size: 13.5px;
color: var(--text);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 14px;
resize: vertical;
min-height: 64px;
line-height: 1.5;
transition: border-color 0.2s, background 0.2s;
}
.answer-field:focus {
outline: none;
border-color: var(--amber);
background: white;
}
.q-item { flex-direction: column; align-items: stretch; }
.q-item .q-head { display: flex; align-items: flex-start; gap: 12px; }
/* IDENTIFICATION SCREEN */
.id-form {
width: 100%;
max-width: 420px;
display: flex;
flex-direction: column;
gap: 14px;
margin: 1.25rem 0;
}
.id-field label {
display: block;
font-family: 'Syne', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 6px;
text-align: left;
}
.id-field input {
width: 100%;
font-family: 'DM Sans', sans-serif;
font-size: 15px;
padding: 12px 16px;
border: 1.5px solid var(--border);
border-radius: 10px;
background: white;
color: var(--text);
}
.id-field input:focus {
outline: none;
border-color: var(--amber);
}
/* TABLE FORM CONTROLS */
.risk-table input, .risk-table textarea {
width: 100%;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: var(--text);
background: transparent;
border: none;
border-bottom: 1px dashed var(--border);
padding: 4px 2px;
font-style: normal;
}
.risk-table input:focus, .risk-table textarea:focus {
outline: none;
border-bottom-color: var(--amber);
background: var(--amber-light);
}
.risk-table textarea { resize: vertical; min-height: 40px; }
.risk-cell {
border: none !important;
background: transparent;
width: 100%;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: var(--text);
resize: vertical;
min-height: 36px;
padding: 4px 2px;
}
.risk-cell:focus { outline: none; background: var(--amber-light); }
.risk-cell::placeholder { color: var(--text-muted); font-style: italic; }
.add-row-btn {
font-family: 'Syne', sans-serif;
font-size: 12px;
font-weight: 700;
color: var(--amber-dark);
background: var(--amber-light);
border: 1px dashed var(--amber);
border-radius: 8px;
padding: 8px 16px;
cursor: pointer;
margin-top: 10px;
}
.add-row-btn:hover { background: #F5DFB8; }
/* SUBMIT / STATUS */
.submit-zone {
width: 100%;
max-width: 680px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 1.5rem;
}
.submit-status {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
padding: 10px 18px;
border-radius: 10px;
display: none;
}
.submit-status.show { display: block; }
.submit-status.loading { background: var(--blue-light); color: var(--blue); }
.submit-status.success { background: var(--teal-light); color: var(--teal-dark); }
.submit-status.error { background: var(--coral-light); color: var(--coral); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-outline.btn-teal { color: var(--amber-dark); border-color: var(--amber); }
/* TABLE */
.risk-table {
width: 100%;
@@ -589,13 +602,13 @@ body {
<!-- HEADER WITH NAVIGATION -->
<header>
<div class="logo">NextGN Formation</div>
<a href="../../index.html">Accueil</a>
<nav>
<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>
<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>
@@ -621,8 +634,30 @@ body {
</div>
</div>
<!-- ======================== SLIDE 0 — IDENTIFICATION ======================== -->
<div class="slide active fade-in" id="slide-0">
<div class="deco-circle" style="width:320px;height:320px;background:var(--amber-light);top:-80px;left:-80px;opacity:0.5;"></div>
<div style="text-align:center; z-index:1; width:100%;">
<div class="section-tag" style="background:var(--amber-light);color:var(--amber-dark);">Avant de commencer</div>
<div class="slide-title">Identification du groupe</div>
<p class="slide-intro" style="margin:0.5rem auto 0;max-width:420px;">Ces informations permettront au formateur de retrouver vos réponses.</p>
<div class="id-form" style="margin-left:auto;margin-right:auto;">
<div class="id-field">
<label for="inputNom">Nom du stagiaire ou du groupe</label>
<input type="text" id="inputNom" placeholder="Ex : Groupe 3 - Dupont / Martin" autocomplete="off">
</div>
<div class="id-field">
<label for="inputDate">Date de la session</label>
<input type="date" id="inputDate">
</div>
</div>
<div id="idError" style="color:var(--coral);font-size:13px;margin-bottom:0.5rem;display:none;">Merci de renseigner au moins le nom du groupe.</div>
<button class="btn btn-teal" onclick="confirmIdentite()">Continuer →</button>
</div>
</div>
<!-- ======================== SLIDE 1 — ACCUEIL ======================== -->
<div class="slide active fade-in" id="slide-1">
<div class="slide" id="slide-1">
<div class="deco-circle" style="width:400px;height:400px;background:var(--amber-light);top:-100px;right:-80px;opacity:0.6;"></div>
<div class="deco-circle" style="width:200px;height:200px;background:var(--amber-light);bottom:60px;left:-60px;opacity:0.5;"></div>
<div style="text-align:center; z-index:1;">
@@ -728,20 +763,32 @@ body {
</div>
<ul class="questions-list">
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--amber-light);color:var(--amber-dark);">1</span>
<span>Quelles questions posez-vous au client lors du premier contact ?</span>
</div>
<textarea class="answer-field" id="ans_prevention_1" placeholder="Votre réponse…" data-question="Questions posées au client lors du premier contact"></textarea>
</li>
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--amber-light);color:var(--amber-dark);">2</span>
<span>Quels conseils lui donnez-vous en premier lieu ?</span>
</div>
<textarea class="answer-field" id="ans_prevention_2" placeholder="Votre réponse…" data-question="Conseils donnés en premier lieu"></textarea>
</li>
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--amber-light);color:var(--amber-dark);">3</span>
<span>Quelles actions de prévention allez-vous mener sur le site ?</span>
</div>
<textarea class="answer-field" id="ans_prevention_3" placeholder="Votre réponse…" data-question="Actions de prévention menées sur le site"></textarea>
</li>
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--amber-light);color:var(--amber-dark);">4</span>
<span>Quels éléments allez-vous observer ? Comment prouver la présence du nuisible ?</span>
</div>
<textarea class="answer-field" id="ans_prevention_4" placeholder="Votre réponse…" data-question="Éléments observés / preuve de présence du nuisible"></textarea>
</li>
</ul>
<div class="actions-row">
@@ -761,16 +808,25 @@ body {
</div>
<ul class="questions-list">
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--amber-light);color:var(--amber-dark);">1</span>
<span>Quelles solutions alternatives (non-biocides) pouvez-vous mettre en place ?</span>
</div>
<textarea class="answer-field" id="ans_intervention_1" placeholder="Votre réponse…" data-question="Solutions alternatives non-biocides"></textarea>
</li>
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--amber-light);color:var(--amber-dark);">2</span>
<span>Quelles solutions biocides allez-vous mettre en place ?</span>
</div>
<textarea class="answer-field" id="ans_intervention_2" placeholder="Votre réponse…" data-question="Solutions biocides mises en place"></textarea>
</li>
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--amber-light);color:var(--amber-dark);">3</span>
<span>Quel est le type de produit (TP) adapté ? Avec quel mode de traitement ?</span>
</div>
<textarea class="answer-field" id="ans_intervention_3" placeholder="Votre réponse…" data-question="Type de produit (TP) et mode de traitement"></textarea>
</li>
</ul>
<div class="actions-row">
@@ -790,12 +846,18 @@ body {
</div>
<ul class="questions-list">
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--amber-light);color:var(--amber-dark);">1</span>
<span>Quel suivi allez-vous mettre en place ? Pendant combien de temps ?</span>
</div>
<textarea class="answer-field" id="ans_evaluation_1" placeholder="Votre réponse…" data-question="Suivi mis en place et durée"></textarea>
</li>
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--amber-light);color:var(--amber-dark);">2</span>
<span>Comment allez-vous gérer les déchets issus de votre intervention ?</span>
</div>
<textarea class="answer-field" id="ans_evaluation_2" placeholder="Votre réponse…" data-question="Gestion des déchets"></textarea>
</li>
</ul>
<div style="background:var(--amber-light);border-radius:12px;padding:14px 18px;max-width:680px;width:100%;font-size:13px;color:var(--amber-dark);margin:0.75rem 0;">
@@ -839,20 +901,32 @@ body {
</div>
<ul class="questions-list">
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--coral-light);color:var(--coral);">1</span>
<span>Trouvez et téléchargez la <strong>Fiche de Données de Sécurité (FDS)</strong> de votre produit.</span>
</div>
<textarea class="answer-field" id="ans_fds_1" placeholder="Notez ici les éléments principaux de la FDS…" data-question="FDS trouvée (éléments principaux)"></textarea>
</li>
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--coral-light);color:var(--coral);">2</span>
<span>Quel est le <strong>nom du produit</strong> et de son fabricant / fournisseur ?</span>
</div>
<textarea class="answer-field" id="ans_fds_2" placeholder="Votre réponse…" data-question="Nom du produit et fabricant/fournisseur"></textarea>
</li>
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--coral-light);color:var(--coral);">3</span>
<span>Quel est son <strong>numéro d'Autorisation de Mise sur le Marché (AMM)</strong> ?</span>
</div>
<textarea class="answer-field" id="ans_fds_3" placeholder="Votre réponse…" data-question="Numéro AMM"></textarea>
</li>
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--coral-light);color:var(--coral);">4</span>
<span>Quels sont les <strong>risques pour la santé</strong> liés à ce produit ?</span>
</div>
<textarea class="answer-field" id="ans_fds_4" placeholder="Votre réponse…" data-question="Risques pour la santé"></textarea>
</li>
</ul>
<div class="actions-row">
@@ -872,20 +946,32 @@ body {
</div>
<ul class="questions-list">
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--coral-light);color:var(--coral);">5</span>
<span>Quels <strong>équipements de protection individuelle (EPI)</strong> dois-je porter lors de la manipulation ?</span>
</div>
<textarea class="answer-field" id="ans_epi_1" placeholder="Votre réponse…" data-question="EPI à porter"></textarea>
</li>
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--coral-light);color:var(--coral);">6</span>
<span>Quels sont les <strong>risques pour l'environnement</strong> ? Que faire en cas de dispersion accidentelle ?</span>
</div>
<textarea class="answer-field" id="ans_epi_2" placeholder="Votre réponse…" data-question="Risques environnement / dispersion accidentelle"></textarea>
</li>
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--coral-light);color:var(--coral);">7</span>
<span>Quelle est la <strong>DL50</strong> de la (ou des) substance(s) active(s) ?</span>
</div>
<textarea class="answer-field" id="ans_epi_3" placeholder="Votre réponse…" data-question="DL50 substance(s) active(s)"></textarea>
</li>
<li class="q-item">
<div class="q-head">
<span class="q-num" style="background:var(--coral-light);color:var(--coral);">8</span>
<span>Quels <strong>gestes de premiers secours</strong> adopter en cas d'exposition ?</span>
</div>
<textarea class="answer-field" id="ans_epi_4" placeholder="Votre réponse…" data-question="Gestes de premiers secours"></textarea>
</li>
</ul>
<div style="background:var(--amber-light);border-radius:12px;padding:14px 18px;max-width:680px;width:100%;font-size:13px;color:var(--amber-dark);margin:0.75rem 0;">
@@ -924,22 +1010,22 @@ body {
<div class="case-banner" id="caseBanner12">
<span id="caseIcon12">🛏️</span><strong id="caseTitle12">Cas</strong>
</div>
<table class="risk-table" style="max-width:780px;width:100%;">
<table class="risk-table" style="max-width:780px;width:100%;" id="riskTable">
<tr class="meta-row">
<td style="width:200px;" class="meta-label">Intitulé du projet</td>
<td colspan="2" style="color:var(--text-muted);font-style:italic;">À compléter par votre groupe</td>
<td colspan="2"><input type="text" id="meta_intitule" placeholder="À compléter par votre groupe"></td>
</tr>
<tr class="meta-row">
<td class="meta-label">Description de l'activité</td>
<td colspan="2" style="color:var(--text-muted);font-style:italic;">À compléter</td>
<td colspan="2"><input type="text" id="meta_description" placeholder="À compléter"></td>
</tr>
<tr class="meta-row">
<td class="meta-label">Lieu de l'activité</td>
<td colspan="2" style="color:var(--text-muted);font-style:italic;">À compléter</td>
<td colspan="2"><input type="text" id="meta_lieu" placeholder="À compléter"></td>
</tr>
<tr class="meta-row">
<td class="meta-label">Début de l'activité prévu le</td>
<td colspan="2" style="color:var(--text-muted);font-style:italic;">À compléter</td>
<td colspan="2"><input type="date" id="meta_debut"></td>
</tr>
<tr class="meta-row">
<td class="meta-label">Numéro(s) d'urgence</td>
@@ -950,32 +1036,32 @@ body {
<th>Risques</th>
<th>Mesures de prévention</th>
</tr>
<tr>
<td onclick="showHint('etape1')" style="cursor:pointer;color:var(--text-muted);font-style:italic;">Ex : Préparation du produit <span style="font-size:11px;color:var(--amber);">💡</span></td>
<td onclick="showHint('risque1')" style="cursor:pointer;color:var(--text-muted);font-style:italic;">Ex : Contact cutané <span style="font-size:11px;color:var(--amber);">💡</span></td>
<td onclick="showHint('mesure1')" style="cursor:pointer;color:var(--text-muted);font-style:italic;">Ex : Port de gants nitrile <span style="font-size:11px;color:var(--amber);">💡</span></td>
<tbody id="riskTableBody">
<tr class="risk-row">
<td onclick="showHint('etape1')" style="cursor:pointer;"><textarea class="risk-cell" placeholder="Ex : Préparation du produit 💡"></textarea></td>
<td onclick="showHint('risque1')" style="cursor:pointer;"><textarea class="risk-cell" placeholder="Ex : Contact cutané 💡"></textarea></td>
<td onclick="showHint('mesure1')" style="cursor:pointer;"><textarea class="risk-cell" placeholder="Ex : Port de gants nitrile 💡"></textarea></td>
</tr>
<tr>
<td style="color:var(--text-muted);font-style:italic;"></td>
<td style="color:var(--text-muted);font-style:italic;"></td>
<td style="color:var(--text-muted);font-style:italic;"></td>
<tr class="risk-row">
<td><textarea class="risk-cell" placeholder="…"></textarea></td>
<td><textarea class="risk-cell" placeholder="…"></textarea></td>
<td><textarea class="risk-cell" placeholder="…"></textarea></td>
</tr>
<tr>
<td style="color:var(--text-muted);font-style:italic;"></td>
<td style="color:var(--text-muted);font-style:italic;"></td>
<td style="color:var(--text-muted);font-style:italic;"></td>
</tr>
<tr>
<td style="color:var(--text-muted);font-style:italic;"></td>
<td style="color:var(--text-muted);font-style:italic;"></td>
<td style="color:var(--text-muted);font-style:italic;"></td>
<tr class="risk-row">
<td><textarea class="risk-cell" placeholder="…"></textarea></td>
<td><textarea class="risk-cell" placeholder="…"></textarea></td>
<td><textarea class="risk-cell" placeholder="…"></textarea></td>
</tr>
</tbody>
<tr class="meta-row">
<td class="meta-label">Analyse réalisée par</td>
<td class="meta-label">Vérifiée par</td>
<td class="meta-label">Mise à jour par</td>
<td class="meta-label"><input type="text" id="meta_realisee_par" placeholder="Analyse réalisée par"></td>
<td class="meta-label"><input type="text" id="meta_verifiee_par" placeholder="Vérifiée par"></td>
<td class="meta-label"><input type="text" id="meta_maj_par" placeholder="Mise à jour par"></td>
</tr>
</table>
<div class="actions-row" style="margin-top:-6px;">
<button class="add-row-btn" onclick="addRiskRow()">+ Ajouter une ligne</button>
</div>
<div style="background:var(--amber-light);border-radius:10px;padding:10px 16px;max-width:780px;width:100%;font-size:12px;color:var(--amber-dark);margin:0.75rem 0;">
💡 Cliquez sur les cellules de la première ligne pour obtenir des indices. Reproduisez ce tableau sur papier pour votre groupe.
</div>
@@ -1015,7 +1101,14 @@ body {
<div class="final-card-sub">Analyse de risques</div>
</div>
</div>
<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;">
<div class="submit-zone">
<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;">
<button class="btn btn-teal" onclick="envoyerReponses()" id="btnEnvoyer">📤 Envoyer mes réponses au formateur</button>
<button class="btn btn-outline btn-teal" onclick="exporterPDF()">⬇ Télécharger en PDF</button>
</div>
<div class="submit-status" id="submitStatus"></div>
</div>
<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:0.75rem;">
<a href="https://biocid-anses.fr" target="_blank" class="btn btn-outline btn-teal" style="font-size:13px;padding:10px 20px;">biocid-anses.fr ↗</a>
<button class="btn btn-teal" onclick="restartAll()">↺ Recommencer depuis le début</button>
</div>
@@ -1023,11 +1116,12 @@ body {
</div>
<script>
let currentSlide = 1;
let currentSlide = 0;
let history = [];
const totalSlides = 13;
const selectedCase = { key: '', icon: '', title: '', desc: '' };
const stagiaire = { nom: '', date: '' };
const hints = {
prevention: {
@@ -1134,16 +1228,16 @@ function goBack() {
function updateUI() {
const fill = document.getElementById('progressFill');
fill.style.width = ((currentSlide / totalSlides) * 100) + '%';
fill.style.width = currentSlide === 0 ? '0%' : ((currentSlide / totalSlides) * 100) + '%';
const counter = document.getElementById('slideCounter');
counter.textContent = currentSlide + ' / ' + totalSlides;
counter.textContent = currentSlide === 0 ? '' : currentSlide + ' / ' + totalSlides;
const backBtn = document.getElementById('backBtn');
backBtn.style.display = history.length > 0 ? 'block' : 'none';
const badge = document.getElementById('phaseBadge');
if (currentSlide === 1 || currentSlide === 2 || currentSlide === 3 || currentSlide === 13) {
if (currentSlide === 0 || currentSlide === 1 || currentSlide === 2 || currentSlide === 3 || currentSlide === 13) {
badge.style.display = 'none';
} else if (currentSlide >= 4 && currentSlide <= 7) {
badge.style.display = 'block';
@@ -1211,8 +1305,8 @@ function restartAll() {
s.classList.remove('active', 'fade-in');
s.style.display = 'none';
});
currentSlide = 1;
const first = document.getElementById('slide-1');
currentSlide = 0;
const first = document.getElementById('slide-0');
first.style.display = 'flex';
setTimeout(() => first.classList.add('active', 'fade-in'), 10);
updateUI();
@@ -1222,6 +1316,169 @@ document.addEventListener('keydown', e => {
if (e.key === 'Escape') closeModal();
});
/* ======================== IDENTIFICATION ======================== */
function confirmIdentite() {
const nom = document.getElementById('inputNom').value.trim();
const date = document.getElementById('inputDate').value;
if (!nom) {
document.getElementById('idError').style.display = 'block';
return;
}
document.getElementById('idError').style.display = 'none';
stagiaire.nom = nom;
stagiaire.date = date || new Date().toISOString().slice(0, 10);
goTo(1);
}
/* ======================== TABLEAU TP3 — LIGNES DYNAMIQUES ======================== */
function addRiskRow() {
const tbody = document.getElementById('riskTableBody');
const tr = document.createElement('tr');
tr.className = 'risk-row';
tr.innerHTML = `
<td><textarea class="risk-cell" placeholder="…"></textarea></td>
<td><textarea class="risk-cell" placeholder="…"></textarea></td>
<td><textarea class="risk-cell" placeholder="…"></textarea></td>`;
tbody.appendChild(tr);
}
/* ======================== COLLECTE DES RÉPONSES ======================== */
function collecterReponses() {
const reponses = [];
document.querySelectorAll('.answer-field').forEach(el => {
reponses.push({
id: el.id,
question: el.dataset.question || '',
reponse: el.value.trim()
});
});
const tableauRisques = [];
document.querySelectorAll('#riskTableBody .risk-row').forEach(row => {
const cells = row.querySelectorAll('.risk-cell');
tableauRisques.push({
etape: cells[0] ? cells[0].value.trim() : '',
risque: cells[1] ? cells[1].value.trim() : '',
mesure: cells[2] ? cells[2].value.trim() : ''
});
});
return {
nom: stagiaire.nom,
date_session: stagiaire.date,
cas_choisi: selectedCase.title || '',
cas_cle: selectedCase.key || '',
reponses: reponses,
tp3_meta: {
intitule: val('meta_intitule'),
description: val('meta_description'),
lieu: val('meta_lieu'),
debut: val('meta_debut'),
realise_par: val('meta_realisee_par'),
verifie_par: val('meta_verifiee_par'),
maj_par: val('meta_maj_par')
},
tp3_tableau: tableauRisques,
date_envoi: new Date().toISOString()
};
}
function val(id) {
const el = document.getElementById(id);
return el ? el.value.trim() : '';
}
/* ======================== ENVOI VERS LE SERVEUR ======================== */
function envoyerReponses() {
const data = collecterReponses();
const statusEl = document.getElementById('submitStatus');
const btn = document.getElementById('btnEnvoyer');
if (!data.nom) {
statusEl.className = 'submit-status show error';
statusEl.textContent = '⚠️ Nom du groupe manquant. Veuillez recommencer depuis le début.';
return;
}
statusEl.className = 'submit-status show loading';
statusEl.textContent = '⏳ Envoi en cours…';
btn.disabled = true;
fetch('save_results.asp', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
})
.then(res => {
if (!res.ok) throw new Error('Erreur serveur (' + res.status + ')');
return res.json();
})
.then(json => {
if (json && json.success) {
statusEl.className = 'submit-status show success';
statusEl.textContent = '✅ Réponses envoyées avec succès au formateur !';
btn.textContent = '✅ Envoyé';
} else {
throw new Error((json && json.error) || 'Réponse invalide du serveur');
}
})
.catch(err => {
statusEl.className = 'submit-status show error';
statusEl.textContent = '❌ Échec de l\'envoi (' + err.message + '). Téléchargez le PDF et transmettez-le manuellement.';
btn.disabled = false;
});
}
/* ======================== EXPORT PDF (impression navigateur) ======================== */
function exporterPDF() {
const data = collecterReponses();
const w = window.open('', '_blank');
const lignes = data.reponses.map(r =>
`<div style="margin-bottom:14px;"><strong>${escapeHtml(r.question)}</strong><p style="margin:4px 0 0;white-space:pre-wrap;">${escapeHtml(r.reponse) || '<em>(sans réponse)</em>'}</p></div>`
).join('');
const tableauRows = data.tp3_tableau.map(r =>
`<tr><td>${escapeHtml(r.etape)}</td><td>${escapeHtml(r.risque)}</td><td>${escapeHtml(r.mesure)}</td></tr>`
).join('');
w.document.write(`
<html><head><meta charset="utf-8"><title>Résultats TP — ${escapeHtml(data.nom)}</title>
<style>
body { font-family: Arial, sans-serif; padding: 30px; color: #1a1a18; }
h1 { font-size: 20px; border-bottom: 2px solid #BA7517; padding-bottom: 8px; }
h2 { font-size: 15px; margin-top: 28px; color: #633806; }
table { width: 100%; border-collapse: collapse; margin-top: 8px; }
td, th { border: 1px solid #ccc; padding: 6px 8px; font-size: 12px; text-align: left; vertical-align: top; }
.meta { font-size: 13px; color: #555; margin-bottom: 4px; }
</style></head>
<body>
<h1>TP Nuisibles — Certibiocide 2025</h1>
<p class="meta"><strong>Groupe / Stagiaire :</strong> ${escapeHtml(data.nom)}</p>
<p class="meta"><strong>Date de session :</strong> ${escapeHtml(data.date_session)}</p>
<p class="meta"><strong>Cas pratique :</strong> ${escapeHtml(data.cas_choisi)}</p>
<h2>Réponses TP1 &amp; TP2</h2>
${lignes}
<h2>TP3 — Analyse de risques</h2>
<p class="meta"><strong>Intitulé :</strong> ${escapeHtml(data.tp3_meta.intitule)}</p>
<p class="meta"><strong>Description :</strong> ${escapeHtml(data.tp3_meta.description)}</p>
<p class="meta"><strong>Lieu :</strong> ${escapeHtml(data.tp3_meta.lieu)}</p>
<p class="meta"><strong>Début prévu le :</strong> ${escapeHtml(data.tp3_meta.debut)}</p>
<table>
<tr><th>Étapes</th><th>Risques</th><th>Mesures de prévention</th></tr>
${tableauRows}
</table>
<p class="meta" style="margin-top:16px;">Réalisée par : ${escapeHtml(data.tp3_meta.realise_par)} — Vérifiée par : ${escapeHtml(data.tp3_meta.verifie_par)} — Mise à jour par : ${escapeHtml(data.tp3_meta.maj_par)}</p>
</body></html>
`);
w.document.close();
setTimeout(() => w.print(), 300);
}
function escapeHtml(str) {
if (!str) return '';
return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
updateUI();
</script>
</body>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,299 @@
<%@ Language="VBScript" %>
<%
Response.Buffer = True
Response.CharSet = "UTF-8"
' ------- À ADAPTER : même chaîne de connexion que save_results.asp -------
Dim connString
connString = "Provider=SQLOLEDB;Data Source=sql.bsite.net\MSSQL2016;" & _
"Initial Catalog=nextgnformation_reponses_exercices;" & _
"User ID=nextgnformation_reponses_exercices;" & _
"Password=S5$NyFXzEjJCg6jD;"
' ------- À ADAPTER : mot de passe d'accès à cette page -------
Dim ADMIN_PASSWORD
ADMIN_PASSWORD = "Sm#gnttCaYE5f3ED"
' -----------------------------------------------------------------------
Dim authenticated
authenticated = False
If Request.Cookies("tp_admin_auth") = "ok" Then
authenticated = True
End If
If Request.Form("password") <> "" Then
If Request.Form("password") = ADMIN_PASSWORD Then
authenticated = True
Response.Cookies("tp_admin_auth") = "ok"
Response.Cookies("tp_admin_auth").Expires = DateAdd("h", 8, Now)
Else
authenticated = False
End If
End If
Function HtmlEscape(s)
If IsNull(s) Then
HtmlEscape = ""
Exit Function
End If
s = CStr(s)
s = Replace(s, "&", "&amp;")
s = Replace(s, "<", "&lt;")
s = Replace(s, ">", "&gt;")
HtmlEscape = s
End Function
%>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Résultats des TP — NextGN Formation</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">
<style>
:root {
--amber: #BA7517; --amber-light: #FAEEDA; --amber-dark: #633806;
--coral: #993C1D; --coral-mid: #D85A30; --coral-light: #FAECE7;
--bg: #F7F6F2; --white: #FFFFFF; --text: #1a1a18; --text-muted: #6b6a65;
--border: rgba(0,0,0,0.1);
}
* { box-sizing: border-box; }
body {
margin: 0; font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text);
padding-top: 70px;
}
.nav-header {
position: fixed; top: 0; left: 0; right: 0; height: 70px;
background: rgba(250,238,218,0.98); border-bottom: 2px solid var(--amber);
display: flex; align-items: center; justify-content: space-between; padding: 0 40px; z-index: 1000;
}
.header-logo {
font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 700;
background: linear-gradient(135deg, var(--amber), var(--coral-mid));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 2rem; }
h1 { font-family: 'Syne', sans-serif; font-size: 24px; font-weight: 800; }
.login-box {
max-width: 360px; margin: 80px auto; background: white; border: 1px solid var(--border);
border-radius: 16px; padding: 2rem; text-align: center;
}
.login-box input[type="password"] {
width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px;
font-size: 15px; margin: 1rem 0;
}
.login-box button, .btn {
font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
text-transform: uppercase; background: var(--amber); color: white; border: none;
border-radius: 30px; padding: 10px 24px; cursor: pointer;
}
.error-msg { color: var(--coral); font-size: 13px; margin-bottom: 0.5rem; }
table.results { width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); font-size: 13px; }
table.results th {
background: var(--amber-light); color: var(--amber-dark); font-family: 'Syne', sans-serif;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
padding: 10px 14px; text-align: left; border-bottom: 2px solid var(--amber);
}
table.results td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.results tr:hover { background: #FAFAFA; }
.detail-toggle { cursor: pointer; color: var(--amber-dark); font-weight: 700; text-decoration: underline; background: none; border: none; font-family: 'DM Sans', sans-serif; font-size: 13px; }
.detail-row { display: none; }
.detail-row.open { display: table-row; }
.detail-content { background: #FAFAFA; padding: 16px 24px; }
.detail-content h3 { font-family: 'Syne', sans-serif; font-size: 13px; margin: 14px 0 6px; color: var(--amber-dark); }
.detail-content p { margin: 4px 0; font-size: 13px; line-height: 1.5; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.count-badge { background: var(--amber-light); color: var(--amber-dark); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; font-family: 'Syne', sans-serif; }
.risk-mini { width: 100%; border-collapse: collapse; margin-top: 4px; }
.risk-mini td { border: 1px solid var(--border); padding: 4px 8px; font-size: 12px; }
</style>
</head>
<body>
<nav class="nav-header">
<span class="header-logo">NextGN Formation — Admin</span>
</nav>
<div class="wrap">
<%
If Not authenticated Then
%>
<div class="login-box">
<h1 style="font-size:18px;">Accès résultats TP</h1>
<% If Request.Form("password") <> "" Then %>
<div class="error-msg">Mot de passe incorrect.</div>
<% End If %>
<form method="POST">
<input type="password" name="password" placeholder="Mot de passe" autofocus>
<br>
<button type="submit">Se connecter</button>
</form>
</div>
<%
Else
Dim conn, rs
Set conn = Server.CreateObject("ADODB.Connection")
On Error Resume Next
conn.Open connString
If Err.Number <> 0 Then
%>
<p style="color:var(--coral);">Erreur de connexion à la base : <%= HtmlEscape(Err.Description) %></p>
<%
Else
Err.Clear
Set rs = conn.Execute("SELECT * FROM tp_resultats ORDER BY date_enregistrement DESC")
If Err.Number <> 0 Then
%>
<p style="color:var(--coral);">La table tp_resultats n'existe pas encore — aucun envoi reçu pour le moment.</p>
<%
Else
%>
<div class="topbar">
<h1>Résultats des stagiaires</h1>
<span class="count-badge"><%= IIf_Count(rs) %></span>
</div>
<table class="results">
<tr>
<th>Groupe / Stagiaire</th>
<th>Date session</th>
<th>Cas pratique</th>
<th>Reçu le</th>
<th>Détail</th>
</tr>
<%
Dim rowIndex
rowIndex = 0
Do While Not rs.EOF
rowIndex = rowIndex + 1
%>
<tr>
<td><%= HtmlEscape(rs("nom")) %></td>
<td><%= HtmlEscape(rs("date_session")) %></td>
<td><%= HtmlEscape(rs("cas_choisi")) %></td>
<td><%= HtmlEscape(rs("date_enregistrement")) %></td>
<td><button class="detail-toggle" onclick="toggleDetail(<%= rowIndex %>)">Voir le détail</button></td>
</tr>
<tr class="detail-row" id="detail-<%= rowIndex %>">
<td colspan="5">
<div class="detail-content">
<h3>Réponses TP1 &amp; TP2</h3>
<%= RenderReponses(rs("reponses_json")) %>
<h3>TP3 — Analyse de risques</h3>
<p><strong>Intitulé :</strong> <%= HtmlEscape(rs("tp3_intitule")) %></p>
<p><strong>Description :</strong> <%= HtmlEscape(rs("tp3_description")) %></p>
<p><strong>Lieu :</strong> <%= HtmlEscape(rs("tp3_lieu")) %></p>
<p><strong>Début prévu :</strong> <%= HtmlEscape(rs("tp3_debut")) %></p>
<%= RenderTableau(rs("tp3_tableau_json")) %>
<p><strong>Réalisée par :</strong> <%= HtmlEscape(rs("tp3_realise_par")) %> —
<strong>Vérifiée par :</strong> <%= HtmlEscape(rs("tp3_verifie_par")) %> —
<strong>MAJ par :</strong> <%= HtmlEscape(rs("tp3_maj_par")) %></p>
</div>
</td>
</tr>
<%
rs.MoveNext
Loop
%>
</table>
<%
End If
conn.Close
End If
End If
%>
</div>
<script>
function toggleDetail(i) {
var row = document.getElementById('detail-' + i);
row.classList.toggle('open');
}
</script>
</body>
</html>
<%
Function IIf_Count(rs)
Dim n
n = 0
Do While Not rs.EOF
n = n + 1
rs.MoveNext
Loop
rs.MoveFirst
IIf_Count = n & " envoi(s)"
End Function
' --- Parsing JSON minimal via ScriptControl pour l'affichage admin ---
Function RenderReponses(jsonStr)
Dim out
out = ""
If Trim(jsonStr) = "" Then
RenderReponses = "<p><em>Aucune réponse.</em></p>"
Exit Function
End If
Dim sc
Set sc = Server.CreateObject("MSScriptControl.ScriptControl")
sc.Language = "JScript"
sc.AddCode "function parseArr(s){ return eval('(' + s + ')'); }"
On Error Resume Next
Dim arr
Set arr = sc.Run("parseArr", jsonStr)
If Err.Number <> 0 Then
RenderReponses = "<p><em>Erreur de lecture des réponses.</em></p>"
Exit Function
End If
On Error Goto 0
Dim i
For i = 0 To arr.length - 1
Dim q, r
q = arr.Item(i).question
r = arr.Item(i).reponse
If Trim(r) = "" Then r = "(sans réponse)"
out = out & "<p><strong>" & ServerHtmlEscape(q) & " :</strong> " & ServerHtmlEscape(r) & "</p>"
Next
RenderReponses = out
End Function
Function RenderTableau(jsonStr)
Dim out
out = ""
If Trim(jsonStr) = "" Then
RenderTableau = ""
Exit Function
End If
Dim sc
Set sc = Server.CreateObject("MSScriptControl.ScriptControl")
sc.Language = "JScript"
sc.AddCode "function parseArr(s){ return eval('(' + s + ')'); }"
On Error Resume Next
Dim arr
Set arr = sc.Run("parseArr", jsonStr)
If Err.Number <> 0 Then
RenderTableau = "<p><em>Erreur de lecture du tableau.</em></p>"
Exit Function
End If
On Error Goto 0
out = "<table class='risk-mini'><tr><th>Étape</th><th>Risque</th><th>Mesure</th></tr>"
Dim i
For i = 0 To arr.length - 1
out = out & "<tr><td>" & ServerHtmlEscape(arr.Item(i).etape) & "</td><td>" & _
ServerHtmlEscape(arr.Item(i).risque) & "</td><td>" & _
ServerHtmlEscape(arr.Item(i).mesure) & "</td></tr>"
Next
out = out & "</table>"
RenderTableau = out
End Function
Function ServerHtmlEscape(s)
If IsNull(s) Then
ServerHtmlEscape = ""
Exit Function
End If
s = CStr(s)
s = Replace(s, "&", "&amp;")
s = Replace(s, "<", "&lt;")
s = Replace(s, ">", "&gt;")
ServerHtmlEscape = s
End Function
%>

213
exercices/save_results.asp Normal file
View File

@@ -0,0 +1,213 @@
<%@ Language="VBScript" %>
<%
' ============================================================
' save_results.asp
' Reçoit les réponses de l'exercice TP Nuisibles (JSON en POST)
' et les enregistre dans la base SQL Server.
' ============================================================
Response.Buffer = True
Response.ContentType = "application/json"
Response.CharSet = "UTF-8"
' ------- À ADAPTER : chaîne de connexion vers votre base -------
' Récupérée depuis le panneau "Manage Databases" de FreeASPHosting :
' Server Name : sql.bsite.net\MSSQL2016
' SQL Username : nextgnformation_reponses_exercices
' Database name : (généralement identique au username, à vérifier dans le panneau)
Dim connString
connString = "Provider=SQLOLEDB;Data Source=sql.bsite.net\MSSQL2016;" & _
"Initial Catalog=nextgnformation_reponses_exercices;" & _
"User ID=nextgnformation_reponses_exercices;" & _
"Password=S5$NyFXzEjJCg6jD;"
' -----------------------------------------------------------------
Function JSONEscape(s)
s = Replace(s, "\", "\\")
s = Replace(s, Chr(34), "\""")
s = Replace(s, vbCrLf, "\n")
s = Replace(s, vbLf, "\n")
s = Replace(s, vbCr, "\n")
s = Replace(s, vbTab, "\t")
JSONEscape = s
End Function
Sub SendJSON(success, message)
Dim out
out = "{""success"":" & LCase(CStr(success)) & ",""error"":""" & JSONEscape(message) & """}"
Response.Write out
Response.End
End Sub
' --- Lecture du corps de la requête (JSON brut envoyé en POST) ---
Dim rawJSON
Dim totalBytes
totalBytes = Request.TotalBytes
If totalBytes = 0 Then
SendJSON False, "Aucune donnée reçue."
End If
Dim binData
binData = Request.BinaryRead(totalBytes)
' Conversion des octets UTF-8 en chaîne VBScript
Dim objStream
Set objStream = Server.CreateObject("ADODB.Stream")
objStream.Type = 1 ' adTypeBinary
objStream.Open
objStream.Write binData
objStream.Position = 0
objStream.Type = 2 ' adTypeText
objStream.CharSet = "utf-8"
rawJSON = objStream.ReadText
objStream.Close
Set objStream = Nothing
If Trim(rawJSON) = "" Then
SendJSON False, "Corps de requête vide."
End If
' --- Parsing JSON minimal sans librairie externe ---
' On utilise le moteur JScript via ScriptControl pour parser le JSON de façon fiable.
Dim sc
Set sc = Server.CreateObject("MSScriptControl.ScriptControl")
sc.Language = "JScript"
sc.AddCode "function parseIt(s){ return eval('(' + s + ')'); } " & _
"function getStr(o,k){ return (o && o[k] != null) ? String(o[k]) : ''; } " & _
"function getReponsesJSON(o){ var arr = o.reponses || []; var out = []; " & _
"for (var i=0;i<arr.length;i++){ out.push({id:String(arr[i].id||''), question:String(arr[i].question||''), reponse:String(arr[i].reponse||'')}); } return out; } " & _
"function getTableauJSON(o){ var arr = o.tp3_tableau || []; var out = []; " & _
"for (var i=0;i<arr.length;i++){ out.push({etape:String(arr[i].etape||''), risque:String(arr[i].risque||''), mesure:String(arr[i].mesure||'')}); } return out; }"
Dim dataObj
On Error Resume Next
Set dataObj = sc.Run("parseIt", rawJSON)
If Err.Number <> 0 Then
SendJSON False, "JSON invalide : " & Err.Description
End If
On Error Goto 0
Dim nom, dateSession, casChoisi, casCle, dateEnvoi
Dim metaIntitule, metaDescription, metaLieu, metaDebut, metaRealise, metaVerifie, metaMaj
nom = sc.Run("getStr", dataObj, "nom")
dateSession = sc.Run("getStr", dataObj, "date_session")
casChoisi = sc.Run("getStr", dataObj, "cas_choisi")
casCle = sc.Run("getStr", dataObj, "cas_cle")
dateEnvoi = sc.Run("getStr", dataObj, "date_envoi")
Dim tp3Obj
tp3Obj = dataObj.tp3_meta
metaIntitule = sc.Run("getStr", tp3Obj, "intitule")
metaDescription = sc.Run("getStr", tp3Obj, "description")
metaLieu = sc.Run("getStr", tp3Obj, "lieu")
metaDebut = sc.Run("getStr", tp3Obj, "debut")
metaRealise = sc.Run("getStr", tp3Obj, "realise_par")
metaVerifie = sc.Run("getStr", tp3Obj, "verifie_par")
metaMaj = sc.Run("getStr", tp3Obj, "maj_par")
If Trim(nom) = "" Then
SendJSON False, "Le nom du groupe est obligatoire."
End If
' --- Sérialisation des réponses et du tableau en JSON texte (stockés en colonnes NVARCHAR(MAX)) ---
Dim reponsesArr, tableauArr
Set reponsesArr = sc.Run("getReponsesJSON", dataObj)
Set tableauArr = sc.Run("getTableauJSON", dataObj)
Dim reponsesJSONStr, tableauJSONStr
reponsesJSONStr = "["
Dim i
For i = 0 To reponsesArr.length - 1
If i > 0 Then reponsesJSONStr = reponsesJSONStr & ","
reponsesJSONStr = reponsesJSONStr & "{""id"":""" & JSONEscape(reponsesArr.Item(i).id) & _
""",""question"":""" & JSONEscape(reponsesArr.Item(i).question) & _
""",""reponse"":""" & JSONEscape(reponsesArr.Item(i).reponse) & """}"
Next
reponsesJSONStr = reponsesJSONStr & "]"
tableauJSONStr = "["
For i = 0 To tableauArr.length - 1
If i > 0 Then tableauJSONStr = tableauJSONStr & ","
tableauJSONStr = tableauJSONStr & "{""etape"":""" & JSONEscape(tableauArr.Item(i).etape) & _
""",""risque"":""" & JSONEscape(tableauArr.Item(i).risque) & _
""",""mesure"":""" & JSONEscape(tableauArr.Item(i).mesure) & """}"
Next
tableauJSONStr = tableauJSONStr & "]"
' --- Connexion et insertion en base ---
Dim conn
Set conn = Server.CreateObject("ADODB.Connection")
On Error Resume Next
conn.Open connString
If Err.Number <> 0 Then
SendJSON False, "Connexion BDD impossible : " & Err.Description
End If
On Error Goto 0
' Création de la table si elle n'existe pas encore
Dim createTableSQL
createTableSQL = "IF NOT EXISTS (SELECT * FROM sysobjects WHERE name='tp_resultats' AND xtype='U') " & _
"CREATE TABLE tp_resultats (" & _
"id INT IDENTITY(1,1) PRIMARY KEY, " & _
"nom NVARCHAR(255), " & _
"date_session NVARCHAR(50), " & _
"cas_choisi NVARCHAR(255), " & _
"cas_cle NVARCHAR(100), " & _
"reponses_json NVARCHAR(MAX), " & _
"tp3_intitule NVARCHAR(500), " & _
"tp3_description NVARCHAR(1000), " & _
"tp3_lieu NVARCHAR(500), " & _
"tp3_debut NVARCHAR(50), " & _
"tp3_realise_par NVARCHAR(255), " & _
"tp3_verifie_par NVARCHAR(255), " & _
"tp3_maj_par NVARCHAR(255), " & _
"tp3_tableau_json NVARCHAR(MAX), " & _
"date_envoi NVARCHAR(50), " & _
"date_enregistrement DATETIME DEFAULT GETDATE())"
On Error Resume Next
conn.Execute createTableSQL
If Err.Number <> 0 Then
SendJSON False, "Création de table impossible : " & Err.Description
End If
On Error Goto 0
' Insertion via requête paramétrée (Command) pour éviter les injections SQL
Dim cmd
Set cmd = Server.CreateObject("ADODB.Command")
cmd.ActiveConnection = conn
cmd.CommandText = "INSERT INTO tp_resultats " & _
"(nom, date_session, cas_choisi, cas_cle, reponses_json, tp3_intitule, tp3_description, tp3_lieu, tp3_debut, tp3_realise_par, tp3_verifie_par, tp3_maj_par, tp3_tableau_json, date_envoi) " & _
"VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"
cmd.CommandType = 1 ' adCmdText
Dim p
Set p = cmd.CreateParameter("nom", 202, 1, 255, nom) : cmd.Parameters.Append p
Set p = cmd.CreateParameter("date_session", 202, 1, 50, dateSession) : cmd.Parameters.Append p
Set p = cmd.CreateParameter("cas_choisi", 202, 1, 255, casChoisi) : cmd.Parameters.Append p
Set p = cmd.CreateParameter("cas_cle", 202, 1, 100, casCle) : cmd.Parameters.Append p
Set p = cmd.CreateParameter("reponses_json", 203, 1, Len(reponsesJSONStr), reponsesJSONStr) : cmd.Parameters.Append p
Set p = cmd.CreateParameter("tp3_intitule", 202, 1, 500, metaIntitule) : cmd.Parameters.Append p
Set p = cmd.CreateParameter("tp3_description", 202, 1, 1000, metaDescription) : cmd.Parameters.Append p
Set p = cmd.CreateParameter("tp3_lieu", 202, 1, 500, metaLieu) : cmd.Parameters.Append p
Set p = cmd.CreateParameter("tp3_debut", 202, 1, 50, metaDebut) : cmd.Parameters.Append p
Set p = cmd.CreateParameter("tp3_realise_par", 202, 1, 255, metaRealise) : cmd.Parameters.Append p
Set p = cmd.CreateParameter("tp3_verifie_par", 202, 1, 255, metaVerifie) : cmd.Parameters.Append p
Set p = cmd.CreateParameter("tp3_maj_par", 202, 1, 255, metaMaj) : cmd.Parameters.Append p
Set p = cmd.CreateParameter("tp3_tableau_json", 203, 1, Len(tableauJSONStr), tableauJSONStr) : cmd.Parameters.Append p
Set p = cmd.CreateParameter("date_envoi", 202, 1, 50, dateEnvoi) : cmd.Parameters.Append p
On Error Resume Next
cmd.Execute
If Err.Number <> 0 Then
conn.Close
SendJSON False, "Erreur lors de l'insertion : " & Err.Description
End If
On Error Goto 0
conn.Close
Set conn = Nothing
SendJSON True, ""
%>

View File

@@ -121,7 +121,7 @@
</div>
<div class="formation-body">
<p class="formation-description">Exercices pratiques et complets pour maîtriser la certification Certibiocide. Contenu détaillé et progressif.</p>
<a href="exercices/TP_Nuisibles_final.html" class="formation-link">Accéder</a>
<a href="exercices/TP_Nuisibles.html" class="formation-link">Accéder</a>
</div>
</div>

View File

@@ -0,0 +1,830 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Veille Certibiocide — Semaine 24 (814 juin 2026)</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">
<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);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
padding-top: 70px;
background: var(--bg);
font-family: 'DM Sans', sans-serif;
color: var(--text);
line-height: 1.6;
}
/* ── Progress bar ── */
.progress {
height: 3px;
background: var(--border);
position: fixed;
top: 70px;
left: 0; right: 0;
z-index: 999;
}
.progress-bar {
height: 100%;
background: var(--teal-mid);
width: 0%;
transition: width 0.2s ease;
}
/* ── Nav header ── */
.nav-header {
position: fixed;
top: 0; left: 0; right: 0;
height: 70px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32px;
}
.header-logo {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: 18px;
text-decoration: none;
background: linear-gradient(135deg, var(--teal), var(--coral-mid));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.header-logo span { font-weight: 800; }
.header-nav { display: flex; gap: 28px; align-items: center; }
.header-nav a {
font-family: 'Syne', sans-serif;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text);
text-decoration: none;
position: relative;
padding-bottom: 2px;
}
.header-nav a::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1.5px;
background: var(--teal-mid);
transform: scaleX(0);
transition: transform 0.2s ease;
transform-origin: left;
}
.header-nav a:hover::after { transform: scaleX(1); }
/* Hamburger responsive */
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span {
display: block; width: 22px; height: 2px;
background: var(--text); margin: 4px 0;
transition: 0.2s;
}
/* ── Layout ── */
.container { max-width: 860px; margin: 0 auto; padding: 40px 24px 80px; }
/* ── Hero ── */
.hero {
background: var(--teal-light);
border: 1px solid var(--teal-mid);
border-radius: 14px;
padding: 44px 40px;
margin-bottom: 36px;
text-align: center;
}
.hero-eyebrow {
font-family: 'Syne', sans-serif;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--teal);
margin-bottom: 12px;
}
.hero h1 {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: clamp(24px, 4vw, 36px);
color: var(--teal-dark);
margin-bottom: 14px;
line-height: 1.15;
}
.hero-meta {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-top: 18px;
}
.badge {
display: inline-block;
background: var(--teal-mid);
color: var(--white);
font-family: 'Syne', sans-serif;
font-size: 12px;
font-weight: 700;
padding: 5px 14px;
border-radius: 20px;
}
.badge-outline {
background: transparent;
border: 1.5px solid var(--teal-mid);
color: var(--teal-dark);
}
/* ── Sommaire sticky ── */
.sommaire {
background: var(--white);
border-radius: 12px;
border: 1px solid var(--border);
padding: 20px 24px;
margin-bottom: 36px;
position: sticky;
top: 76px;
z-index: 90;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.sommaire-title {
font-family: 'Syne', sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
margin-bottom: 10px;
}
.sommaire-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.sommaire-links a {
font-size: 12px;
font-weight: 500;
color: var(--teal-dark);
text-decoration: none;
background: var(--teal-light);
padding: 4px 11px;
border-radius: 20px;
border: 1px solid rgba(15,110,86,0.18);
transition: background 0.2s, color 0.2s;
}
.sommaire-links a:hover {
background: var(--teal-mid);
color: var(--white);
}
/* ── Points d'attention ── */
.attention-box {
background: var(--amber-light);
border-left: 4px solid var(--amber);
border-radius: 10px;
padding: 24px 28px;
margin-bottom: 36px;
}
.attention-box h2 {
font-family: 'Syne', sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--amber-dark);
margin-bottom: 14px;
}
.attention-item {
display: flex;
gap: 14px;
align-items: flex-start;
margin-bottom: 10px;
}
.attention-num {
background: var(--amber);
color: var(--white);
font-family: 'Syne', sans-serif;
font-size: 12px;
font-weight: 700;
width: 24px; height: 24px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.attention-text { font-size: 14px; color: var(--amber-dark); font-weight: 500; }
/* ── Sections rubriques ── */
.section {
background: var(--white);
border-radius: 10px;
box-shadow: 0 1px 8px rgba(0,0,0,0.07);
margin-bottom: 28px;
overflow: hidden;
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.section-header {
background: var(--teal-light);
padding: 18px 24px;
border-bottom: 1px solid rgba(29,158,117,0.18);
display: flex;
align-items: center;
gap: 12px;
}
.section-header h2 {
font-family: 'Syne', sans-serif;
font-size: 17px;
font-weight: 700;
color: var(--teal-dark);
}
.section-emoji { font-size: 20px; }
.section-body { padding: 24px; }
/* ── Actualité card ── */
.actu {
border-bottom: 1px solid var(--border);
padding-bottom: 20px;
margin-bottom: 20px;
}
.actu:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.actu-meta {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.source-badge {
background: var(--teal-mid);
color: var(--white);
font-family: 'Syne', sans-serif;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.actu-date {
font-size: 12px;
color: var(--text-muted);
font-style: italic;
}
.actu-text { font-size: 14px; line-height: 1.65; color: var(--text); }
.actu-link {
display: inline-block;
margin-top: 8px;
font-size: 12px;
font-weight: 500;
color: var(--teal-mid);
text-decoration: none;
transition: transform 0.2s, color 0.2s;
}
.actu-link:hover {
transform: translateY(-1px);
color: var(--teal-dark);
}
.actu-link::after { content: ' ↗'; }
/* ── Warning note ── */
.warning-note {
background: var(--amber-light);
border: 1px solid var(--amber);
border-radius: 8px;
padding: 14px 18px;
color: var(--amber-dark);
font-size: 14px;
font-weight: 500;
}
.warning-note::before { content: '⚠️ '; }
/* ── Footer ── */
footer {
background: var(--text);
color: var(--white);
padding: 40px;
font-size: 13px;
text-align: center;
}
/* ── Responsive ── */
@media (max-width: 768px) {
.nav-header { padding: 0 20px; }
.header-nav { display: none; flex-direction: column; position: fixed; top: 70px; left: 0; right: 0; background: var(--white); padding: 20px; border-bottom: 1px solid var(--border); gap: 16px; }
.header-nav.open { display: flex; }
.hamburger { display: block; }
.hero { padding: 30px 22px; }
.container { padding: 24px 16px 60px; }
.sommaire { position: relative; top: auto; }
.section-body { padding: 16px; }
.attention-box { padding: 18px 20px; }
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav-header">
<a href="index.html" class="header-logo"><span>NextGN</span> Formation</a>
<nav class="header-nav" id="mainNav">
<a href="index.html#formations">Exercices interactifs</a>
<a href="index.html#about">À propos</a>
<a href="index.html#contact">Contact</a>
</nav>
<button class="hamburger" aria-label="Menu" onclick="document.getElementById('mainNav').classList.toggle('open')">
<span></span><span></span><span></span>
</button>
</nav>
<!-- Barre de progression -->
<div class="progress"><div class="progress-bar" id="progressBar"></div></div>
<div class="container">
<!-- Hero -->
<section class="hero">
<div class="hero-eyebrow">Rapport de veille hebdomadaire</div>
<h1>Veille Certibiocide<br>Semaine 24 — 2026</h1>
<p style="color:var(--teal); font-weight:500; font-size:15px;">8 au 14 juin 2026</p>
<div class="hero-meta">
<span class="badge">Semaine 24</span>
<span class="badge badge-outline">8 rubriques</span>
<span class="badge badge-outline">Formateur indépendant</span>
</div>
</section>
<!-- Sommaire -->
<nav class="sommaire" aria-label="Sommaire">
<div class="sommaire-title">Sommaire</div>
<div class="sommaire-links">
<a href="#reglementaire">⚖️ Réglementaire</a>
<a href="#formation">🎓 Marché formation</a>
<a href="#nuisibles">🐀 Nuisibles & ESOD</a>
<a href="#desinfection">🧴 Désinfection</a>
<a href="#opportunites">💡 Opportunités</a>
<a href="#innovation">🔬 Innovation</a>
<a href="#europe">🇪🇺 Veille européenne</a>
<a href="#rh">👥 RH & Concurrence</a>
</div>
</nav>
<!-- Points d'attention -->
<div class="attention-box">
<h2>📌 Points d'attention — Semaine 24</h2>
<div class="attention-item">
<div class="attention-num">1</div>
<div class="attention-text"><strong>Certibiocide désinfectants obligatoire depuis le 1er janvier 2026 :</strong> la période de tolérance s'achève — les professionnels sans certification risquent des sanctions immédiates (arrêt d'activité, amendes, poursuites pénales). Opportunité commerciale directe pour les formateurs agréés.</div>
</div>
<div class="attention-item">
<div class="attention-num">2</div>
<div class="attention-text"><strong>Moustique tigre — 81 départements colonisés en 2026 :</strong> Santé Publique France active son dispositif de surveillance renforcée. La pression sur les collectivités et les acteurs de la démoustication est maximale ce printemps-été. Fort potentiel de demande de formation.</div>
</div>
<div class="attention-item">
<div class="attention-num">3</div>
<div class="attention-text"><strong>CPF — reste à charge à 150 € depuis avril 2026 :</strong> impact modéré pour les formations Certibiocide (courtes, peu onéreuses), mais à intégrer dans votre communication commerciale. La certification Qualiopi reste indispensable pour accéder aux financements OPCO et FAFCEA.</div>
</div>
</div>
<!-- 1. Réglementaire -->
<section class="section" id="reglementaire">
<div class="section-header">
<span class="section-emoji">⚖️</span>
<h2>Réglementaire — Nouvelles AMM, retraits, BPR, obligations Certibiocide</h2>
</div>
<div class="section-body">
<div class="actu">
<div class="actu-meta">
<span class="source-badge">ANSES / Légifrance</span>
<span class="actu-date">1er janvier 2026</span>
</div>
<p class="actu-text">L'obligation Certibiocide s'étend aux professionnels utilisant des produits désinfectants (TP2, TP3, TP4) à partir du 1er janvier 2026. Le système passe à trois certifications distinctes : désinfectants (7h), nuisibles (21h) et autres biocides. Les professionnels non conformes s'exposent à une interruption d'activité immédiate et à des sanctions pénales.</p>
<a class="actu-link" href="https://reglementation-environnement.com/certibiocide-2026-obligation-desinfectants-professionnels/" target="_blank" rel="noopener">Lire sur Réglementation Environnement</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">ANSES</span>
<span class="actu-date">Juin 2026</span>
</div>
<p class="actu-text">Une grâce réglementaire arrive à échéance le 10 juin 2026 pour la vente et la distribution de certains produits biocides dont l'autorisation a été retirée. La grâce pour l'utilisation des stocks expire le 10 décembre 2026. Les professionnels doivent vérifier leur stock de produits biocides pour s'assurer de leur conformité.</p>
<a class="actu-link" href="https://www.anses.fr/fr/decisions_biocide?sort_by=field_signature_date_value&sort_order=DESC&nb=110" target="_blank" rel="noopener">Registre des décisions AMM ANSES</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">ANSES</span>
<span class="actu-date">2026</span>
</div>
<p class="actu-text">L'ANSES propose de nouvelles restrictions à la vente en libre-service de produits biocides rodenticides. Cette démarche vise à limiter les achats non professionnels de raticides susceptibles de provoquer des empoisonnements non ciblés. La consultation est en cours auprès des parties prenantes.</p>
<a class="actu-link" href="https://www.anses.fr/en/content/proposal-criteria-restrict-self-service-sales-biocidal-products" target="_blank" rel="noopener">Lire sur ANSES.fr</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">Légifrance / MTE</span>
<span class="actu-date">2026</span>
</div>
<p class="actu-text">La certification Certibiocide reste valable 5 ans et doit être renouvelée avant expiration. Les formateurs agréés doivent s'assurer que leurs stagiaires reçoivent le bon certificat selon la catégorie visée (désinfectants : 1 jour / nuisibles : 3 jours). Aucun certificat polyvalent ne couvre l'ensemble des types de produits.</p>
<a class="actu-link" href="https://lodi-hygiene.fr/certibiocide-2026-ce-qui-change-les-obligations-et-comment-se-former/" target="_blank" rel="noopener">Guide complet Certibiocide 2026</a>
</div>
</div>
</section>
<!-- 2. Marché formation -->
<section class="section" id="formation">
<div class="section-header">
<span class="section-emoji">🎓</span>
<h2>Marché formation — Qualiopi, CPF, OPCO</h2>
</div>
<div class="section-body">
<div class="actu">
<div class="actu-meta">
<span class="source-badge">Service Public</span>
<span class="actu-date">2 avril 2026</span>
</div>
<p class="actu-text">Depuis le 2 avril 2026, le reste à charge CPF est fixé à 150 € par dossier de formation. Les demandeurs d'emploi inscrits à France Travail et les salariés bénéficiant d'un abondement employeur restent exonérés. Pour les formations courtes Certibiocide (200300 €), cela représente une fraction non négligeable du coût total.</p>
<a class="actu-link" href="https://www.service-public.gouv.fr/particuliers/actualites/A18831" target="_blank" rel="noopener">Lire sur Service Public</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">FAFCEA / France Compétences</span>
<span class="actu-date">1er janvier 30 juin 2026</span>
</div>
<p class="actu-text">Le FAFCEA rend Qualiopi obligatoire pour tout financement dès 2026, avec une période transitoire courant jusqu'au 30 juin 2026. Les organismes de formation non certifiés Qualiopi à cette date ne pourront plus accéder aux financements mutualisés. Cette échéance est critique pour les petits organismes indépendants.</p>
<a class="actu-link" href="https://csfc-federation.org/blog/qualiopi-devient-obligatoire-pour-les-financements-fafcea-des-2026/" target="_blank" rel="noopener">CSFC Fédération</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">OPCO / Infrep</span>
<span class="actu-date">2026</span>
</div>
<p class="actu-text">En 2026, la prise en charge moyenne par un OPCO atteint 5 000 € par parcours. Le CPF constitue le socle, l'abondement OPCO couvre le différentiel. Pour les formations Certibiocide, la complémentarité CPF + OPCO EP représente un levier de financement accessible aux professionnels du secteur.</p>
<a class="actu-link" href="https://www.infrep.org/cpf-opco-poei-comparatif-des-financements-pour-votre-formation-en-2026/" target="_blank" rel="noopener">Comparatif financements 2026</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">Digi-Certif</span>
<span class="actu-date">Juin 2026</span>
</div>
<p class="actu-text">Le site digi-certif.com publie des actualités hebdomadaires Qualiopi 2026. Cette semaine : focus sur les contrôles des organismes certificateurs et les points de vigilance lors des audits. La rigueur documentaire (feuilles de présence, évaluations, preuves d'amélioration continue) reste le premier facteur de non-conformité relevé.</p>
<a class="actu-link" href="https://www.digi-certif.com/debut-2026-quelles-actualites-pour-la-formation-pro-et-qualiopi/" target="_blank" rel="noopener">Actualités Qualiopi 2026</a>
</div>
</div>
</section>
<!-- 3. Nuisibles & ESOD -->
<section class="section" id="nuisibles">
<div class="section-header">
<span class="section-emoji">🐀</span>
<h2>Nuisibles & ESOD — Moustique tigre, frelon asiatique, rongeurs, punaises</h2>
</div>
<div class="section-body">
<div class="actu">
<div class="actu-meta">
<span class="source-badge">Santé Publique France / ANSES</span>
<span class="actu-date">Printemps 2026</span>
</div>
<p class="actu-text">Le moustique tigre est désormais implanté dans 81 départements français (84 % du territoire métropolitain). Santé Publique France active son dispositif de surveillance et de contrôle renforcé pour la saison 2026. La plateforme de signalement citoyens sur signalement-moustiques.anses.fr alimente la carte nationale en temps réel.</p>
<a class="actu-link" href="https://www.santepubliquefrance.fr/en/press/2026-stepped-efforts-combat-tiger-mosquito-activation-surveillance-and-control-system" target="_blank" rel="noopener">Santé Publique France — communiqué 2026</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">Gouvernement / OFB</span>
<span class="actu-date">Mars 2026</span>
</div>
<p class="actu-text">Un plan national de lutte contre les espèces invasives a été lancé en mars 2026, couvrant le frelon asiatique (présent dans plus de 70 départements), la chenille processionnaire et le moustique tigre. Des plateformes officielles — frelonasiatique.mnhn.fr et signalement-moustique.anses.fr — permettent d'affiner la surveillance territoriale.</p>
<a class="actu-link" href="https://www.ootravaux.fr/actualites/carte-nuisibles-region-printemps.html" target="_blank" rel="noopener">Carte nuisibles printemps 2026</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">ANSES / INRAE</span>
<span class="actu-date">2026</span>
</div>
<p class="actu-text">Les rongeurs résistants aux anticoagulants restent une problématique majeure dans les zones péri-urbaines et agricoles. L'ANSES rappelle que l'utilisation des rodenticides professionnels est soumise à certification Certibiocide (TP14), et que l'application doit être réalisée avec des postes d'appâtage sécurisés pour limiter les risques pour la faune non-cible.</p>
<a class="actu-link" href="https://www.anses.fr/fr/decisions_biocide" target="_blank" rel="noopener">Registre AMM biocides — ANSES</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">Santé Publique France</span>
<span class="actu-date">2026</span>
</div>
<p class="actu-text">Les punaises de lit demeurent un enjeu de santé publique à fort impact social et économique en France. Sans transmission directe de maladie, leur élimination génère des coûts élevés pour les ménages et les bailleurs. La demande d'intervention professionnelle certifiée reste soutenue, notamment dans le secteur hôtelier et les transports.</p>
<a class="actu-link" href="https://www.larochedeglun.fr/Lutte-contre-le-frelon-asiatique-moustique-tigre-Punaises" target="_blank" rel="noopener">Informations pratiques — nuisibles</a>
</div>
</div>
</section>
<!-- 4. Désinfection -->
<section class="section" id="desinfection">
<div class="section-header">
<span class="section-emoji">🧴</span>
<h2>Désinfection — Normes AFNOR, produits homologués, alternatives</h2>
</div>
<div class="section-body">
<div class="actu">
<div class="actu-meta">
<span class="source-badge">AFNOR / Légifrance</span>
<span class="actu-date">2026</span>
</div>
<p class="actu-text">La norme NF U43-500 (bonnes pratiques d'application des produits phytosanitaires et biocides) est en cours de révision et disponible à consultation publique. Cette norme encadre les conditions d'application en sécurité des produits biocides, et sa mise à jour est directement pertinente pour le contenu pédagogique des formations Certibiocide.</p>
<a class="actu-link" href="https://norminfo.afnor.org/consultation/nf-u43-500/bonnes-pratiques-dapplication-des-produits-phytosanitaires-et-biocides-maitrise-des-applications-de-produits-phytosanitaires/108423" target="_blank" rel="noopener">Consultation NF U43-500 — AFNOR</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">TBCF Formation</span>
<span class="actu-date">2026</span>
</div>
<p class="actu-text">Un article de synthèse recense les nouveautés réglementaires 2026 applicables aux professionnels de la désinfection : extension du Certibiocide aux désinfectants (TP2, TP3, TP4), obligation de traçabilité renforcée des interventions et mise à jour des fiches de sécurité. Un point utile à intégrer dans les supports de formation.</p>
<a class="actu-link" href="https://tbcformation.com/certibiocide-2026-nouveautes-reglementation-desinfection/" target="_blank" rel="noopener">Certibiocide 2026 — TBCF</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">AFNOR / ANSES</span>
<span class="actu-date">Référence permanente</span>
</div>
<p class="actu-text">Les normes clés pour les évaluations d'efficacité des désinfectants restent : NF EN 14476 (activité virucide), NF EN 1276 (activité bactéricide), NF EN 14885 (cadre général). La maîtrise de ces normes est fondamentale dans le contenu des formations Certibiocide désinfectants. Aucune nouvelle norme publiée cette semaine.</p>
<a class="actu-link" href="https://www.prodhybase.fr/norme_generalite.html" target="_blank" rel="noopener">ProdHYBase — normes désinfection</a>
</div>
<div class="warning-note">
Aucune nouvelle homologation ou retrait de produit désinfectant vérifiable via sources officielles cette semaine. Consulter directement le registre ANSES pour les décisions récentes.
</div>
</div>
</section>
<!-- 5. Opportunités -->
<section class="section" id="opportunites">
<div class="section-header">
<span class="section-emoji">💡</span>
<h2>Opportunités — Appels d'offres BOAMP, CPF, secteurs demandeurs</h2>
</div>
<div class="section-body">
<div class="actu">
<div class="actu-meta">
<span class="source-badge">BOAMP / France Marchés</span>
<span class="actu-date">2026 — en cours</span>
</div>
<p class="actu-text">Un marché 4D (dératisation, désinfection, désinsectisation, dépigeonnisation) est en cours de passation via le BOAMP (réf. 3/boamp/2627622). 7 offres ont été reçues, attribution prévue courant mars 2026. Le marché illustre la demande constante des collectivités pour des opérateurs certifiés Certibiocide.</p>
<a class="actu-link" href="https://www.francemarches.com/appel-offre/3boamp2627622-2026-prestations-anti-nuisibles" target="_blank" rel="noopener">Voir le marché BOAMP</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">BOAMP — Département Oise</span>
<span class="actu-date">Notification prévue juillet 2026</span>
</div>
<p class="actu-text">Le Département de l'Oise lance un marché-cadre pour des missions de dératisation, désinsectisation, désinfection et traitements spécifiques sur ses bâtiments et voiries. La notification du marché-cadre est attendue en juillet 2026. Ce type de contrat pluriannuel représente un débouché stable pour les opérateurs certifiés.</p>
<a class="actu-link" href="https://www.francemarches.com/appel-offre/3boamp2616972-2026-missions-deratisation-desinsectisation" target="_blank" rel="noopener">Marché Oise — BOAMP</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">BOAMP — Fos-sur-Mer</span>
<span class="actu-date">Date limite offres : 2 juillet 2026</span>
</div>
<p class="actu-text">La ville de Fos-sur-Mer lance un appel d'offres en 2 lots : Lot 1 (3D classique) et Lot 2 (lutte par prédation). La date limite de dépôt des offres est le 2 juillet 2026. Ce marché est notable pour son Lot 2 innovant intégrant des méthodes biologiques alternatives aux rodenticides chimiques.</p>
<a class="actu-link" href="https://www.francemarches.com/appel-offre/3boamp2651311-2026-prestations-lutte-contre" target="_blank" rel="noopener">Marché Fos-sur-Mer — BOAMP</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">BOAMP — Carrières-sous-Poissy</span>
<span class="actu-date">2026</span>
</div>
<p class="actu-text">La ville de Carrières-sous-Poissy lance un marché de prestation anti-nuisibles 4D pour ses bâtiments communaux. Ce marché illustre la multiplication des appels d'offres municipaux exigeant le Certibiocide, ce qui consolide la valeur commerciale de la certification pour les opérateurs comme pour les formateurs.</p>
<a class="actu-link" href="https://www.francemarches.com/appel-offre/3boamp2632494-2026-prestation-anti-nuisibles" target="_blank" rel="noopener">Marché Carrières-sous-Poissy</a>
</div>
</div>
</section>
<!-- 6. Innovation -->
<section class="section" id="innovation">
<div class="section-header">
<span class="section-emoji">🔬</span>
<h2>Innovation — Bioinsecticides, IoT, IA, brevets</h2>
</div>
<div class="section-body">
<div class="actu">
<div class="actu-meta">
<span class="source-badge">Anticimex / IoT</span>
<span class="actu-date">2026</span>
</div>
<p class="actu-text">Anticimex publie un dossier sur la lutte antiparasitaire connectée (IA + IoT + data) dans l'industrie : pièges communicants avec alertes en temps réel, tableaux de bord de gestion et modèles prédictifs basés sur les données saisonnières. Ce modèle de service réduit les interventions chimiques et répond aux exigences croissantes des industriels en matière de traçabilité.</p>
<a class="actu-link" href="https://www.anticimex.fr/blog/lutte-nuisibles-connectee-ia-iot-data/" target="_blank" rel="noopener">Lutte connectée — Anticimex</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">Groupe Berkem / BPI France</span>
<span class="actu-date">2026</span>
</div>
<p class="actu-text">Le piège Novaterm® du Groupe Berkem associe intelligence artificielle et suractivateur végétal (extrait de plante) pour améliorer le taux de capture des rongeurs sans toxique. Cette innovation combine bioinsecticide naturel et détection connectée, illustrant la tendance vers la lutte intégrée (IPM) à faible impact environnemental.</p>
<a class="actu-link" href="https://nuisible-control.fr/actualites/tendance-deratisation-ethique-et-efficace" target="_blank" rel="noopener">Tendances dératisation éthique 2026</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">Application-IoT.fr</span>
<span class="actu-date">2026</span>
</div>
<p class="actu-text">Les pièges connectés se généralisent dans l'industrie alimentaire comme réponse aux exigences IFS/BRC. Les données collectées permettent l'analyse prédictive des cycles d'infestation, réduisant de 40 à 60 % les applications de rodenticides selon les retours terrain. Sujet à intégrer dans les modules de formation sur la lutte intégrée.</p>
<a class="actu-link" href="https://www.application-iot.fr/industrie-4-0/les-pieges-connectes-revolutionnent-la-gestion-des-nuisibles-dans-lindustrie-alimentaire/" target="_blank" rel="noopener">Pièges connectés — industrie alimentaire</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">APA / Seipasa</span>
<span class="actu-date">2026</span>
</div>
<p class="actu-text">Les bioinsecticides d'origine botanique et microbiologique progressent en alternative aux insecticides classiques, en réponse à l'apparition de résistances et aux restrictions réglementaires. Des produits à base de Bacillus thuringiensis, d'azadirachtine ou d'extraits de neem sont en développement pour les marchés professionnels, notamment contre les insectes rampants.</p>
<a class="actu-link" href="https://www.seipasa.com/fr_ES/bioinsecticides/" target="_blank" rel="noopener">Bioinsecticides — Seipasa</a>
</div>
</div>
</section>
<!-- 7. Veille européenne -->
<section class="section" id="europe">
<div class="section-header">
<span class="section-emoji">🇪🇺</span>
<h2>Veille européenne — Révision BPR, EFSA, résistances</h2>
</div>
<div class="section-body">
<div class="actu">
<div class="actu-meta">
<span class="source-badge">ECHA / Commission Européenne</span>
<span class="actu-date">1er avril 2026</span>
</div>
<p class="actu-text">Le guide ECHA/EFSA sur les produits de traitement de l'eau (eau potable) est à application obligatoire depuis le 1er avril 2026. Ce guide impose de nouvelles exigences pour les dossiers d'AMM biocides destinés au traitement de l'eau, notamment sur les produits de transformation et les limites de résidus dans l'eau potable.</p>
<a class="actu-link" href="https://www.cehtra.com/post/echa-efsa-water-treatment-bpr-guidance" target="_blank" rel="noopener">Guidance ECHA/EFSA Eau potable</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">ECHA / Commission Européenne</span>
<span class="actu-date">Décembre 2026 (échéance)</span>
</div>
<p class="actu-text">Plusieurs substances actives biocides doivent fournir les données manquantes sur leur potentiel perturbateur endocrinien (PE) avant le 31 décembre 2026. L'absence de ces données entraînerait le non-renouvellement de l'approbation de la substance. Les professionnels utilisant ces substances (notamment certains rodenticides et insecticides) doivent anticiper d'éventuels retraits.</p>
<a class="actu-link" href="https://www.knoell.com/en/news/monthly-global-biocides-regulatory-newsletter-february-2026" target="_blank" rel="noopener">Newsletter biocides mondiale — knoell</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">Commission Européenne / ECHA</span>
<span class="actu-date">Approbation prévue juin 2027</span>
</div>
<p class="actu-text">La Commission européenne a approuvé le formaldéhyde issu de la réaction du paraformaldéhyde avec la 2-hydroxypropylamine pour les types de produits TP2, TP6, TP11, TP12 et TP13, avec une date d'entrée en vigueur au 1er juin 2027. Ce processus illustre les délais longs (18+ mois) entre la décision et l'application effective dans le BPR.</p>
<a class="actu-link" href="https://echa.europa.eu/fr/regulations/biocidal-products-regulation/approval-of-active-substances" target="_blank" rel="noopener">Approbation substances actives — ECHA</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">ECHA — Guidance résistances</span>
<span class="actu-date">2026</span>
</div>
<p class="actu-text">Le guide sur la résistance aux biocides est en cours de consultation dans le cadre des dossiers de renouvellement. La résistance croisée biocides/antibiotiques reste un sujet de recherche actif : ECHA surveille les données épidémiologiques pour réévaluer le statut de certaines substances actives (notamment les ammoniums quaternaires). Point à suivre pour les formations Certibiocide avancées.</p>
<a class="actu-link" href="https://team-mastery.eu/bpr-update-on-existing-biocidal-active-substances/" target="_blank" rel="noopener">BPR — substances actives existantes</a>
</div>
</div>
</section>
<!-- 8. RH & Concurrence -->
<section class="section" id="rh">
<div class="section-header">
<span class="section-emoji">👥</span>
<h2>RH & Concurrence — Offres d'emploi 3D, certifications RNCP</h2>
</div>
<div class="section-body">
<div class="actu">
<div class="actu-meta">
<span class="source-badge">Indeed / CS3D</span>
<span class="actu-date">Avriljuin 2026</span>
</div>
<p class="actu-text">Indeed recense plus de 75 offres d'emploi actives en dératisation et désinsectisation au 1er avril 2026. Le secteur recrute massivement des techniciens applicateurs en CDI. Les entreprises valorisent explicitement le Certibiocide et le CQP Technicien en maîtrise des nuisibles dans leurs annonces, confirmant la demande de formation initiale et continue.</p>
<a class="actu-link" href="https://fr.indeed.com/q-d%C3%A9ratisation-emplois.html" target="_blank" rel="noopener">Offres dératisation — Indeed</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">France Compétences / CS3D</span>
<span class="actu-date">2026</span>
</div>
<p class="actu-text">Le CQP Technicien applicateur spécialisé en maîtrise des nuisibles (RNCP 36313) reste la certification de référence du secteur 3D. La CS3D propose un parcours de 3 mois incluant Certibiocide + CQP, avec des débouchés en CDI reconnus. Les organismes de formation peuvent articuler leurs offres autour de ce parcours pour capter un public en reconversion.</p>
<a class="actu-link" href="https://www.francecompetences.fr/recherche/rncp/36313/" target="_blank" rel="noopener">RNCP 36313 — France Compétences</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">Certif-Agri / ISTAV</span>
<span class="actu-date">2026</span>
</div>
<p class="actu-text">Plusieurs organismes (Certif-Agri, ISTAV, Ensystex) renforcent leurs offres de formation Technicien 3D en 2026 en mettant en avant le bloc Certibiocide désinfectants comme nouveau différenciateur. La concurrence sur le marché de la formation Certibiocide s'intensifie : un positionnement clair (spécialisation sectorielle, pédagogie active, ancrage terrain) est clé.</p>
<a class="actu-link" href="https://www.certif-agri.com/formations/metiers/technicien-en-desinfection-desinsectisation-et-deratisation-3d/" target="_blank" rel="noopener">Formation Technicien 3D — Certif-Agri</a>
</div>
<div class="actu">
<div class="actu-meta">
<span class="source-badge">SAD'S Interim / LeBonContact3D</span>
<span class="actu-date">2026</span>
</div>
<p class="actu-text">Des agences d'intérim spécialisées (SAD'S Interim) et des startups du secteur (LeBonContact3D) recrutent activement des techniciens 3D. Les contrats en CDI sont majoritaires, avec des missions polyvalentes (dératisation + désinsectisation + désinfection). L'obligation Certibiocide devient un prérequis affiché dans les offres d'intérim.</p>
<a class="actu-link" href="https://www.sads-interim.eu/emploi/cdi-technicien-deratisa-azwwd2kpnr/" target="_blank" rel="noopener">Offre CDI Technicien 3D — SAD'S Interim</a>
</div>
</div>
</section>
</div><!-- /container -->
<footer>
<p>&copy; 2026 NextGN Formation — Veille Certibiocide Semaine 24</p>
<p style="margin-top:10px; opacity:0.6;">Tous droits réservés — Formateurs indépendants</p>
</footer>
<script>
// Barre de progression au scroll
window.addEventListener('scroll', () => {
const scrolled = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
document.getElementById('progressBar').style.width = Math.min(scrolled, 100) + '%';
});
// Smooth scroll pour les ancres
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
const offset = 80;
const top = target.getBoundingClientRect().top + window.pageYOffset - offset;
window.scrollTo({ top, behavior: 'smooth' });
}
});
});
// Animation staggered des sections
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.animationDelay = '0s';
entry.target.classList.add('visible');
}
});
}, { threshold: 0.08 });
document.querySelectorAll('.section').forEach(s => observer.observe(s));
</script>
</body>
</html>

View File

@@ -0,0 +1,740 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Veille Certibiocide Semaine 25 (915 juin 2026)</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">
<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);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
padding-top: 70px;
background: var(--bg);
font-family: 'DM Sans', sans-serif;
color: var(--text);
line-height: 1.65;
}
/* NAV */
.nav-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
}
.header-logo {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: 18px;
text-decoration: none;
background: linear-gradient(135deg, var(--teal), var(--coral));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.header-nav { display: flex; gap: 28px; }
.header-nav a {
font-family: 'Syne', sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text);
text-decoration: none;
position: relative;
padding-bottom: 2px;
}
.header-nav a::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: var(--teal-mid);
transform: scaleX(0);
transition: transform 0.2s ease;
}
.header-nav a:hover::after { transform: scaleX(1); }
/* PROGRESS BAR */
.progress {
height: 3px;
background: var(--border);
position: fixed;
top: 70px;
left: 0; right: 0;
z-index: 999;
}
.progress-bar {
height: 100%;
background: var(--teal-mid);
width: 0%;
transition: width 0.1s ease;
}
/* HERO */
.hero {
background: var(--teal-light);
border-bottom: 2px solid var(--teal-mid);
padding: 60px 40px 48px;
text-align: center;
}
.hero-badge {
display: inline-block;
background: var(--teal-mid);
color: var(--white);
font-family: 'Syne', sans-serif;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 6px 16px;
border-radius: 20px;
margin-bottom: 20px;
}
.hero h1 {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: clamp(26px, 4vw, 40px);
color: var(--teal-dark);
line-height: 1.2;
margin-bottom: 12px;
}
.hero .period {
font-size: 15px;
color: var(--text-muted);
font-weight: 300;
}
/* SOMMAIRE */
.sommaire-wrap {
max-width: 900px;
margin: 32px auto;
padding: 0 20px;
}
.sommaire {
background: var(--white);
border-radius: 12px;
padding: 24px 28px;
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
border-left: 4px solid var(--teal-mid);
}
.sommaire h2 {
font-family: 'Syne', sans-serif;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--teal-dark);
margin-bottom: 16px;
}
.sommaire-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
}
.sommaire-list a {
display: inline-block;
padding: 6px 14px;
background: var(--teal-light);
color: var(--teal-dark);
border-radius: 20px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.sommaire-list a:hover {
background: var(--teal-mid);
color: var(--white);
}
/* POINTS D'ATTENTION */
.attention-box {
max-width: 900px;
margin: 0 auto 32px;
padding: 0 20px;
}
.attention-inner {
background: var(--amber-light);
border-left: 5px solid var(--amber);
border-radius: 10px;
padding: 28px 32px;
}
.attention-inner h2 {
font-family: 'Syne', sans-serif;
font-size: 18px;
font-weight: 800;
color: var(--amber-dark);
margin-bottom: 18px;
}
.attention-item {
display: flex;
gap: 14px;
margin-bottom: 14px;
align-items: flex-start;
}
.attention-num {
min-width: 28px;
height: 28px;
background: var(--amber);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
}
.attention-text {
font-size: 14px;
line-height: 1.6;
color: var(--amber-dark);
}
.attention-text strong { font-weight: 500; }
/* MAIN CONTENT */
.main {
max-width: 900px;
margin: 0 auto;
padding: 0 20px 60px;
}
/* SECTIONS */
.section {
background: var(--white);
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
margin-bottom: 28px;
overflow: hidden;
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.section-header {
background: var(--teal-light);
padding: 20px 28px;
border-bottom: 1px solid rgba(29, 158, 117, 0.2);
}
.section-header h2 {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: 19px;
color: var(--teal-dark);
}
.section-body { padding: 24px 28px; }
/* ACTUALITES */
.actu {
padding: 16px 0;
border-bottom: 1px solid var(--border);
}
.actu:last-child { border-bottom: none; padding-bottom: 0; }
.actu:first-child { padding-top: 0; }
.actu-source {
display: inline-block;
background: var(--teal-mid);
color: var(--white);
font-family: 'Syne', sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 3px 10px;
border-radius: 4px;
margin-bottom: 8px;
}
.actu-text {
font-size: 14px;
line-height: 1.65;
color: var(--text);
margin-bottom: 6px;
}
.actu-meta {
font-size: 12px;
color: var(--text-muted);
}
.actu-meta a {
color: var(--teal-mid);
text-decoration: none;
font-weight: 500;
transition: transform 0.2s, color 0.2s;
display: inline-block;
}
.actu-meta a:hover {
color: var(--teal-dark);
transform: translateY(-1px);
}
/* WARNING BOX */
.warn-box {
background: var(--amber-light);
border: 1px solid var(--amber);
border-radius: 8px;
padding: 14px 18px;
font-size: 13px;
color: var(--amber-dark);
font-style: italic;
margin-top: 8px;
}
/* FOOTER */
footer {
background: var(--text);
color: var(--white);
padding: 40px;
font-size: 13px;
text-align: center;
}
footer p:last-child {
margin-top: 10px;
opacity: 0.6;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.nav-header { padding: 0 20px; }
.header-nav {
display: none;
flex-direction: column;
position: absolute;
top: 70px; left: 0; right: 0;
background: var(--white);
padding: 16px 20px;
border-bottom: 1px solid var(--border);
gap: 12px;
}
.header-nav.open { display: flex; }
.hamburger {
display: flex;
flex-direction: column;
gap: 5px;
cursor: pointer;
background: none;
border: none;
padding: 4px;
}
.hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--text);
border-radius: 2px;
}
.hero { padding: 40px 20px 32px; }
.section-body { padding: 18px 20px; }
.section-header { padding: 16px 20px; }
.sommaire-wrap, .attention-box, .main { padding: 0 14px; }
.attention-inner { padding: 20px; }
}
@media (min-width: 769px) {
.hamburger { display: none; }
}
</style>
</head>
<body>
<!-- PROGRESS BAR -->
<div class="progress"><div class="progress-bar" id="progressBar"></div></div>
<!-- NAV HEADER -->
<nav class="nav-header">
<a href="index.html" class="header-logo"><span>NextGN</span> Formation</a>
<button class="hamburger" id="hamburger" aria-label="Menu">
<span></span><span></span><span></span>
</button>
<nav class="header-nav" id="headerNav">
<a href="index.html#formations">Exercices interactifs</a>
<a href="index.html#about">À propos</a>
<a href="index.html#contact">Contact</a>
</nav>
</nav>
<!-- HERO -->
<div class="hero">
<div class="hero-badge">📋 Rapport de veille hebdomadaire</div>
<h1>Veille Certibiocide — Semaine 25</h1>
<p class="period">Du 9 au 15 juin 2026 · Généré automatiquement le 15 juin 2026</p>
</div>
<!-- SOMMAIRE -->
<div class="sommaire-wrap">
<div class="sommaire">
<h2>📌 Sommaire</h2>
<ul class="sommaire-list">
<li><a href="#reglementaire">⚖️ Réglementaire</a></li>
<li><a href="#formation">🎓 Marché formation</a></li>
<li><a href="#nuisibles">🐀 Nuisibles & ESOD</a></li>
<li><a href="#desinfection">🧴 Désinfection</a></li>
<li><a href="#opportunites">💡 Opportunités</a></li>
<li><a href="#innovation">🔬 Innovation</a></li>
<li><a href="#europe">🇪🇺 Veille européenne</a></li>
<li><a href="#rh">👥 RH & Concurrence</a></li>
</ul>
</div>
</div>
<!-- POINTS D'ATTENTION -->
<div class="attention-box">
<div class="attention-inner">
<h2>📌 Points d'attention — Semaine 25</h2>
<div class="attention-item">
<div class="attention-num">1</div>
<div class="attention-text"><strong>Creosote : retrait effectif au 1er juillet 2026.</strong> L'ANSES a confirmé le retrait des AMM biocides contenant de la créosote. La période de grâce pour la vente prenait fin le 10 juin 2026. En tant que formateur, il est essentiel de mettre à jour vos supports sur les produits autorisés et de sensibiliser les stagiaires sur ce retrait imminent.</div>
</div>
<div class="attention-item">
<div class="attention-num">2</div>
<div class="attention-text"><strong>Certibiocide en vigueur depuis le 1er janvier 2026 : la demande de formations reste forte.</strong> Le bilan à 6 mois montre une forte demande des professionnels (désinfection, 3D) pour obtenir leur certification. Le reste à charge CPF est fixé à 150 € depuis avril 2026. C'est un levier commercial direct pour vos sessions.</div>
</div>
<div class="attention-item">
<div class="attention-num">3</div>
<div class="attention-text"><strong>Plan national frelon asiatique (mars 2026) : un guichet de financement ouvert depuis mai 2026.</strong> Les collectivités peuvent financer les opérations de lutte. Cela génère des appels d'offres et une demande de techniciens 3D formés. Opportunité de positionnement pour les organismes de formation Certibiocide.</div>
</div>
</div>
</div>
<!-- CONTENU PRINCIPAL -->
<main class="main">
<!-- SECTION 1 : REGLEMENTAIRE -->
<section class="section" id="reglementaire">
<div class="section-header">
<h2>⚖️ Réglementaire — AMM, BPR, obligations Certibiocide</h2>
</div>
<div class="section-body">
<div class="actu">
<span class="actu-source">ANSES</span>
<p class="actu-text">L'ANSES a prononcé le retrait des autorisations de mise sur le marché (AMM) des produits biocides contenant de la <strong>créosote</strong>. La période de grâce pour la vente et la distribution a expiré le <strong>10 juin 2026</strong> ; l'usage des stocks existants est toléré jusqu'au 10 décembre 2026.</p>
<p class="actu-meta">*Juin 2026* — <a href="https://www.anses.fr/fr/decisions_biocide" target="_blank" rel="noopener">Registre AMM biocides ANSES</a></p>
</div>
<div class="actu">
<span class="actu-source">MTE / ANSES</span>
<p class="actu-text">Depuis le <strong>1er janvier 2026</strong>, le Certibiocide est pleinement obligatoire pour l'achat, l'utilisation et la distribution de produits biocides professionnels (TP2, TP3, TP4, TP14, TP18, TP20, TP8, TP15, TP21). Les distributeurs ne peuvent plus vendre sans présentation d'un numéro de certification valide.</p>
<p class="actu-meta">*Janvier 2026* — <a href="https://pedagogie.ac-lille.fr/sbssa/mise-en-application-au-1er-janvier-2026-de-larrete-certibiocide-du-23-janvier-2023/" target="_blank" rel="noopener">Académie Lille Arrêté Certibiocide</a></p>
</div>
<div class="actu">
<span class="actu-source">ECHA</span>
<p class="actu-text">L'évaluation du Règlement sur les Produits Biocides (BPR UE 528/2012) est en cours depuis le Q4 2025. Elle évalue si le règlement atteint ses objectifs et si des révisions sont nécessaires pour répondre aux enjeux actuels (résistances, substances actives en retard d'examen).</p>
<p class="actu-meta">*20252026* — <a href="https://echa.europa.eu/fr/regulations/biocidal-products-regulation/understanding-bpr" target="_blank" rel="noopener">ECHA Comprendre le BPR</a></p>
</div>
<div class="actu">
<span class="actu-source">ANSES</span>
<p class="actu-text">L'ANSES a publié une proposition de critères pour la restriction de la vente en libre-service des produits biocides professionnels. Ce projet de texte vise à renforcer le contrôle sur l'accès aux produits les plus dangereux pour les non-certifiés.</p>
<p class="actu-meta">*2026* — <a href="https://axonet.anses.fr/fr/criteres-produits-biocides-libre-service" target="_blank" rel="noopener">ANSES Critères vente libre-service</a></p>
</div>
</div>
</section>
<!-- SECTION 2 : MARCHE FORMATION -->
<section class="section" id="formation">
<div class="section-header">
<h2>🎓 Marché formation — Qualiopi, CPF, OPCO</h2>
</div>
<div class="section-body">
<div class="actu">
<span class="actu-source">France Compétences</span>
<p class="actu-text">France Compétences a renouvelé pour <strong>3 ans</strong> (à compter du 1er janvier 2026) les huit organismes habilités à délivrer la certification Qualiopi. Les certificateurs actuels sont confirmés jusqu'en 2028, apportant de la stabilité aux organismes de formation certifiés.</p>
<p class="actu-meta">*Janvier 2026* — <a href="https://www.digi-certif.com/debut-2026-quelles-actualites-pour-la-formation-pro-et-qualiopi/" target="_blank" rel="noopener">Digi-certif Actualités Qualiopi 2026</a></p>
</div>
<div class="actu">
<span class="actu-source">Mon Compte Formation / CPF</span>
<p class="actu-text">Depuis le <strong>2 avril 2026</strong>, le reste à charge CPF est fixé à <strong>150 € par dossier</strong>. Les demandeurs d'emploi inscrits à France Travail en sont exonérés. Cette mesure stabilise le coût pour les stagiaires après les incertitudes de 20242025.</p>
<p class="actu-meta">*Avril 2026* — <a href="https://www.infrep.org/cpf-opco-poei-comparatif-des-financements-pour-votre-formation-en-2026/" target="_blank" rel="noopener">INFREP Comparatif financements 2026</a></p>
</div>
<div class="actu">
<span class="actu-source">URSSAF / OPCO</span>
<p class="actu-text">Depuis janvier 2026, les branches professionnelles peuvent choisir de confier la collecte de leurs <strong>contributions conventionnelles de formation à l'URSSAF</strong> (au lieu de leur OPCO). Ce changement peut impacter la gestion de la trésorerie des OPCO et la rapidité de traitement des dossiers de financement formation.</p>
<p class="actu-meta">*2026* — <a href="https://www.starthack.fr/financement-de-la-formation-professionnelle-en-2026-opco-budgets-et-obligations-des-centres-de-formation/" target="_blank" rel="noopener">Starthack Financement formation 2026</a></p>
</div>
<div class="actu">
<span class="actu-source">FAFCEA / Qualiopi</span>
<p class="actu-text">Qualiopi devient obligatoire pour les financements FAFCEA dès 2026. Les artisans souhaitant faire financer leur formation Certibiocide via le FAFCEA doivent désormais s'adresser exclusivement à des organismes certifiés Qualiopi.</p>
<p class="actu-meta">*2026* — <a href="https://csfc-federation.org/blog/qualiopi-devient-obligatoire-pour-les-financements-fafcea-des-2026/" target="_blank" rel="noopener">CSFC Fédération Qualiopi FAFCEA</a></p>
</div>
</div>
</section>
<!-- SECTION 3 : NUISIBLES & ESOD -->
<section class="section" id="nuisibles">
<div class="section-header">
<h2>🐀 Nuisibles & ESOD — Moustique tigre, frelon, rongeurs, punaises</h2>
</div>
<div class="section-body">
<div class="actu">
<span class="actu-source">Ministère Transition Écologique</span>
<p class="actu-text">Un <strong>plan national de lutte contre le frelon asiatique</strong> a été lancé le 27 mars 2026 par le ministre délégué Mathieu Lefèvre. Doté de <strong>3 M€/an</strong> (complétés par le Fonds vert), il prévoit le renforcement du piégeage, la destruction des nids et un guichet de financement ouvert aux collectivités depuis le 1er mai 2026.</p>
<p class="actu-meta">*Mars 2026* — <a href="https://www.ecologie.gouv.fr/presse/lancement-du-plan-national-lutte-contre-frelon-asiatique" target="_blank" rel="noopener">Ecologie.gouv.fr Plan national frelon asiatique</a></p>
</div>
<div class="actu">
<span class="actu-source">ANSES / Santé Publique France</span>
<p class="actu-text">Le <strong>moustique tigre (Aedes albopictus)</strong> est présent dans près de <strong>90 départements</strong> français. La saison d'activité s'étend désormais de mars à novembre dans les zones les plus touchées. Le signalement via signalement-moustique.anses.fr permet d'affiner la surveillance épidémiologique.</p>
<p class="actu-meta">*Printemps 2026* — <a href="https://www.service-public.gouv.fr/particuliers/actualites/A14140" target="_blank" rel="noopener">Service-Public Moustique tigre</a></p>
</div>
<div class="actu">
<span class="actu-source">OFB / INRAE</span>
<p class="actu-text">Le frelon asiatique occupe désormais <strong>plus de 70 départements</strong> métropolitains. Les pertes pour la filière apicole sont estimées à plus de <strong>100 millions d'euros par an</strong>. Une partie du budget du plan national sera confiée au Muséum national d'histoire naturelle pour approfondir la recherche scientifique sur l'espèce.</p>
<p class="actu-meta">*Mars 2026* — <a href="https://www.economiematin.fr/plan-national-lutte-frelon-asiatique" target="_blank" rel="noopener">Economie Matin Plan frelon asiatique</a></p>
</div>
<div class="actu">
<span class="actu-source">Santé Publique France</span>
<p class="actu-text">Les <strong>punaises de lit</strong> restent un enjeu de santé publique majeur. Sans transmission de maladie, leur impact psychologique et économique est considérable (stress, isolement, coûts d'élimination élevés pour ménages et bailleurs). La demande de techniciens certifiés Certibiocide pour ce type d'intervention est en hausse.</p>
<p class="actu-meta">*2026* — <a href="https://www.larochedeglun.fr/Lutte-contre-le-frelon-asiatique-moustique-tigre-Punaises" target="_blank" rel="noopener">Source secondaire Nuisibles communes</a></p>
</div>
</div>
</section>
<!-- SECTION 4 : DÉSINFECTION -->
<section class="section" id="desinfection">
<div class="section-header">
<h2>🧴 Désinfection — Normes AFNOR, produits homologués, alternatives</h2>
</div>
<div class="section-body">
<div class="actu">
<span class="actu-source">ANSES / Réglementation</span>
<p class="actu-text">Depuis le 1er janvier 2026, l'obligation Certibiocide s'étend aux <strong>désinfectants professionnels</strong> (TP2 désinfection, TP3 hygiène vétérinaire, TP4 désinfection eau potable). Les établissements de santé, industrie alimentaire et prestataires de nettoyage professionnel sont directement concernés.</p>
<p class="actu-meta">*Janvier 2026* — <a href="https://tbcformation.com/certibiocide-2026-nouveautes-reglementation-desinfection/" target="_blank" rel="noopener">TBCF Certibiocide désinfection 2026</a></p>
</div>
<div class="actu">
<span class="actu-source">AFNOR</span>
<p class="actu-text">La norme <strong>NF EN 14885</strong> reste la référence européenne encadrant les désinfectants biocides (hôpitaux, industrie alimentaire, communauté). Elle définit les tests d'efficacité requis (normes EN 1276, EN 14476, EN 1650) pour la validation des produits mis sur le marché.</p>
<p class="actu-meta">*2026* — <a href="https://www.prodhybase.fr/norme_generalite.html" target="_blank" rel="noopener">ProdHYBase Normes désinfection</a></p>
</div>
<div class="actu">
<span class="actu-source">ANSES</span>
<p class="actu-text">Le projet de critères de restriction de la vente en libre-service des biocides (dont les désinfectants TP2TP4) est en consultation. L'objectif est de limiter l'accès aux produits concentrés uniquement aux détenteurs du Certibiocide, renforçant ainsi l'étanchéité du marché professionnel.</p>
<p class="actu-meta">*2026* — <a href="https://axonet.anses.fr/fr/criteres-produits-biocides-libre-service" target="_blank" rel="noopener">ANSES Consultation restriction libre-service</a></p>
</div>
<div class="actu">
<span class="actu-source">Réglementation UE</span>
<p class="actu-text">Tous les désinfectants biocides commercialisés en Europe doivent être conformes au Règlement (UE) n° 528/2012. La procédure d'autorisation nationale (via ANSES en France) ou européenne (Union Authorisation via ECHA) conditionne leur mise sur le marché. Les formations Certibiocide doivent aborder cette architecture réglementaire.</p>
<p class="actu-meta">*2026* — <a href="https://echa.europa.eu/fr/regulations/biocidal-products-regulation/authorisation-of-biocidal-products" target="_blank" rel="noopener">ECHA Autorisation produits biocides</a></p>
</div>
</div>
</section>
<!-- SECTION 5 : OPPORTUNITES -->
<section class="section" id="opportunites">
<div class="section-header">
<h2>💡 Opportunités — BOAMP, CPF, secteurs demandeurs</h2>
</div>
<div class="section-body">
<div class="actu">
<span class="actu-source">BOAMP</span>
<p class="actu-text">Le <strong>Département de l'Oise</strong> a publié une consultation pour la dératisation, désinsectisation, désinfection et traitements spécifiques sur ses bâtiments, collèges et réseau routier. La notification de l'accord-cadre est prévue en <strong>juillet 2026</strong> — indicateur d'un marché public actif pour les prestataires 3D certifiés.</p>
<p class="actu-meta">*2026* — <a href="https://www.francemarches.com/appel-offre/3boamp2616972-2026-missions-deratisation-desinsectisation" target="_blank" rel="noopener">FranceMarchés AO Oise 3D</a></p>
</div>
<div class="actu">
<span class="actu-source">BOAMP</span>
<p class="actu-text">La <strong>ville de Fos-sur-Mer</strong> a lancé un appel d'offres en 2 lots (prestations 3D + campagne de dératisation par prédation). La ville du <strong>Cannet</strong> recherche également des prestataires pour dératisation, désinsectisation, démoustication et désinfection du domaine public et privé — des marchés accessibles aux entreprises dont les techniciens sont Certibiocide.</p>
<p class="actu-meta">*2026* — <a href="https://www.francemarches.com/appel-offre/3boamp2651311-2026-prestations-lutte-contre" target="_blank" rel="noopener">FranceMarchés AO Fos-sur-Mer</a></p>
</div>
<div class="actu">
<span class="actu-source">Mon Compte Formation</span>
<p class="actu-text">La formation Certibiocide Nuisibles (RS6442) reste éligible CPF. Avec un reste à charge de 150 € depuis avril 2026, le frein financier est limité pour les salariés. C'est un argument commercial fort pour les organismes de formation indépendants : mettre en avant la prise en charge CPF dans les devis.</p>
<p class="actu-meta">*Avril 2026* — <a href="https://www.formation-hygiene-salubrite.fr/formation-certibiocide-desinfectant/" target="_blank" rel="noopener">Formation Hygiène Salubrité CPF Certibiocide</a></p>
</div>
<div class="actu">
<span class="actu-source">Plan National Frelon / Fonds Vert</span>
<p class="actu-text">Le plan national contre le frelon asiatique génère un besoin de techniciens formés et de prestataires habilités dans les collectivités. Le guichet de financement ouvert depuis mai 2026 va mécaniquement générer de nouveaux marchés locaux — une opportunité pour les organismes de formation positionnés sur la lutte contre les espèces invasives.</p>
<p class="actu-meta">*Mai 2026* — <a href="https://www.ecologie.gouv.fr/presse/lancement-du-plan-national-lutte-contre-frelon-asiatique" target="_blank" rel="noopener">Ecologie.gouv.fr Guichet financement frelon</a></p>
</div>
</div>
</section>
<!-- SECTION 6 : INNOVATION -->
<section class="section" id="innovation">
<div class="section-header">
<h2>🔬 Innovation — Bioinsecticides, IoT, IA, pièges connectés</h2>
</div>
<div class="section-body">
<div class="actu">
<span class="actu-source">Anticimex / Secteur</span>
<p class="actu-text">Les <strong>pièges connectés IoT</strong> couplés à des plateformes de gestion de données sont en forte expansion dans les secteurs agroalimentaire et industrie. Ils permettent des alertes en temps réel et une anticipation des infestations saisonnières, réduisant l'usage de produits chimiques.</p>
<p class="actu-meta">*2026* — <a href="https://www.anticimex.fr/blog/lutte-nuisibles-connectee-ia-iot-data/" target="_blank" rel="noopener">Anticimex Lutte nuisibles connectée IA/IoT</a></p>
</div>
<div class="actu">
<span class="actu-source">Groupe Berkem / Innovation</span>
<p class="actu-text">Le piège <strong>Novaterm®</strong> du Groupe Berkem combine intelligence artificielle et super-activateur végétal. Ce type d'innovation illustre la tendance de fond vers des solutions plus durables, réduisant la dépendance aux substances actives chimiques dans un contexte de restriction réglementaire croissante.</p>
<p class="actu-meta">*2026* — <a href="https://nuisible-control.fr/actualites/tendance-deratisation-ethique-et-efficace" target="_blank" rel="noopener">Nuisible Control Tendances 2026</a></p>
</div>
<div class="actu">
<span class="actu-source">SEIPASA / BPI France</span>
<p class="actu-text">Les <strong>bioinsecticides</strong> (issus de substances botaniques et microbiologiques) s'imposent comme alternative ou complément aux insecticides chimiques. Face à la diminution des substances actives approuvées et aux résistances émergentes, leur développement est soutenu par des programmes européens (CORDIS) et nationaux (BPI France).</p>
<p class="actu-meta">*2026* — <a href="https://www.seipasa.com/fr_ES/bioinsecticides/" target="_blank" rel="noopener">SEIPASA Bioinsecticides lutte antiparasitaire</a></p>
</div>
<div class="actu">
<span class="actu-source">CORDIS / ArXiv</span>
<p class="actu-text">L'<strong>Edge AI pour la surveillance de la biodiversité et des nuisibles</strong> fait l'objet de publications récentes (ArXiv 2026). Des capteurs embarquant des modèles d'IA légers permettent l'identification d'espèces en temps réel sur le terrain — une technologie prometteuse pour le monitoring des espèces invasives (frelon, moustique tigre).</p>
<p class="actu-meta">*2026* — <a href="https://arxiv.org/pdf/2602.13496" target="_blank" rel="noopener">ArXiv Edge AI biodiversity monitoring</a></p>
</div>
</div>
</section>
<!-- SECTION 7 : VEILLE EUROPÉENNE -->
<section class="section" id="europe">
<div class="section-header">
<h2>🇪🇺 Veille européenne — BPR, EFSA, résistances</h2>
</div>
<div class="section-body">
<div class="actu">
<span class="actu-source">ECHA / Commission Européenne</span>
<p class="actu-text">L'évaluation du <strong>Règlement BPR (UE 528/2012)</strong> est en cours depuis Q4 2025. La Commission évalue l'adéquation du règlement aux défis actuels : résistances, substances actives en retard d'approbation, et cohérence avec le Green Deal. Les conclusions orienteront une éventuelle révision législative.</p>
<p class="actu-meta">*20252026* — <a href="https://echa.europa.eu/fr/regulations/biocidal-products-regulation/understanding-bpr" target="_blank" rel="noopener">ECHA Comprendre le BPR</a></p>
</div>
<div class="actu">
<span class="actu-source">ECHA / Commission</span>
<p class="actu-text">Des <strong>retards persistants</strong> dans le programme de révision des substances actives biocides existantes entraînent un report des échéances. Il est proposé que les périodes de protection des données pour les combinaisons substance/type de produit sans décision d'approbation avant juin 2018 soient prolongées jusqu'au <strong>31 décembre 2030</strong>.</p>
<p class="actu-meta">*2026* — <a href="https://www.atoutchimie.eu/avancement-du-programme-dexamen-europeen-des-substances-actives-existantes" target="_blank" rel="noopener">Atout Chimie Programme substances actives</a></p>
</div>
<div class="actu">
<span class="actu-source">Parlement Européen</span>
<p class="actu-text">Un document de travail du Parlement européen sur la révision du BPR est en cours d'examen (procédure observable via le OEIL/Europarl). Les discussions portent notamment sur la simplification des procédures d'autorisation et l'harmonisation des délais entre États membres.</p>
<p class="actu-meta">*2026* — <a href="https://oeil.europarl.europa.eu/oeil/fr/document-summary?id=1880200" target="_blank" rel="noopener">Europarl OEIL Révision BPR</a></p>
</div>
<div class="warn-box">
⚠️ <em>Aucune publication EFSA spécifique aux résistances insecticides vérifiée via sources officielles cette semaine. Aucune décision OMS récente sur les biocides identifiée pour la période du 9 au 15 juin 2026.</em>
</div>
</div>
</section>
<!-- SECTION 8 : RH & CONCURRENCE -->
<section class="section" id="rh">
<div class="section-header">
<h2>👥 RH & Concurrence — Emploi 3D, RNCP, Certibiocide</h2>
</div>
<div class="section-body">
<div class="actu">
<span class="actu-source">Indeed France</span>
<p class="actu-text">Au <strong>11 juin 2026</strong>, Indeed recense plus de <strong>25 offres actives</strong> pour des techniciens 3D (dératisation/désinsectisation/désinfection) en France, et plus de 75 offres dératisation toutes catégories. Le Certibiocide est mentionné comme qualification requise ou souhaitée dans la majorité des annonces.</p>
<p class="actu-meta">*11 juin 2026* — <a href="https://fr.indeed.com/q-deratisation-3d-emplois.html" target="_blank" rel="noopener">Indeed Offres technicien 3D</a></p>
</div>
<div class="actu">
<span class="actu-source">Secteur / Employeurs</span>
<p class="actu-text">Des entreprises comme <strong>LeBonContact3D</strong> recrutent des techniciens 3D Certibiocide, avec des rémunérations autour de <strong>1 752 € brut en CDD</strong> en Île-de-France. Le profil recherché combine compétences techniques, Certibiocide et sens du service client — une opportunité de contenu pédagogique pour les formations.</p>
<p class="actu-meta">*2026* — <a href="https://fr.indeed.com/q-technicien-deratisation-emplois.html" target="_blank" rel="noopener">Indeed Technicien dératisation</a></p>
</div>
<div class="actu">
<span class="actu-source">France Compétences / RS6442</span>
<p class="actu-text">La certification <strong>RS6442 (Certibiocide Nuisibles)</strong> reste inscrite au RNCP et éligible CPF. L'accès aux formations avancées (CQP Technicien maîtrise du risque nuisibles) requiert soit le RS6442 soit 1 an d'expérience professionnelle. Le Certibiocide est donc un prérequis stratégique pour les évolutions de carrière dans le secteur.</p>
<p class="actu-meta">*2026* — <a href="https://istav.fr/journees-techniques-3d/" target="_blank" rel="noopener">ISTAV Formations 3D</a></p>
</div>
<div class="warn-box">
⚠️ <em>Aucun mouvement sectoriel majeur (fusion, acquisition, certification RNCP nouvelle) vérifié via sources officielles cette semaine sur la période du 9 au 15 juin 2026.</em>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer>
<p>&copy; 2026 NextGN Formation - Veille Certibiocide Semaine 25</p>
<p>Tous droits réservés - Formateurs indépendants</p>
</footer>
<script>
// Barre de progression au scroll
window.addEventListener('scroll', () => {
const scrolled = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
document.getElementById('progressBar').style.width = scrolled + '%';
});
// Menu hamburger responsive
const hamburger = document.getElementById('hamburger');
const headerNav = document.getElementById('headerNav');
hamburger.addEventListener('click', () => {
headerNav.classList.toggle('open');
});
// Smooth scroll pour les ancres
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
const offset = 80;
const top = target.getBoundingClientRect().top + window.scrollY - offset;
window.scrollTo({ top, behavior: 'smooth' });
}
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,256 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Veille Hygiène & Pest Control</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
padding: 40px;
}
.header {
margin-bottom: 40px;
border-bottom: 3px solid #2c3e50;
padding-bottom: 20px;
}
.header h1 {
font-size: 32px;
color: #2c3e50;
margin-bottom: 8px;
}
.header p {
color: #7f8c8d;
font-size: 14px;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
margin-bottom: 30px;
}
.card {
background: #f8f9fa;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 24px;
transition: all 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
transform: translateY(-2px);
border-color: #3498db;
}
.card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.card-icon {
font-size: 28px;
}
.card h3 {
font-size: 16px;
color: #2c3e50;
font-weight: 600;
}
.card ul {
list-style: none;
padding: 0;
}
.card li {
margin-bottom: 12px;
font-size: 13px;
color: #555;
line-height: 1.6;
padding-left: 0;
}
.card strong {
color: #2c3e50;
display: block;
margin-bottom: 2px;
}
.footer {
background: #ecf0f1;
border-radius: 8px;
padding: 16px;
margin-bottom: 24px;
}
.footer p {
font-size: 12px;
color: #7f8c8d;
margin: 0;
}
.footer strong {
color: #2c3e50;
}
.buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
button {
padding: 10px 16px;
border: 1px solid #bdc3c7;
background: white;
border-radius: 6px;
font-size: 13px;
color: #2c3e50;
cursor: pointer;
transition: all 0.2s ease;
}
button:hover {
border-color: #3498db;
background: #ecf4f9;
color: #2980b9;
}
.date {
font-size: 12px;
color: #95a5a6;
margin-top: 20px;
text-align: center;
padding-top: 20px;
border-top: 1px solid #ecf0f1;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📊 Veille Hygiène & Pest Control</h1>
<p>Semaine du 14-20 avril 2026</p>
</div>
<div class="grid">
<!-- REGLEMENTATION -->
<div class="card">
<div class="card-header">
<span class="card-icon">⚖️</span>
<h3>Réglementation</h3>
</div>
<ul>
<li><strong>ANSES :</strong> Mise à jour des listes de substances autorisées Certibiocide</li>
<li><strong>JO :</strong> Nouvelles exigences d'étiquetage pour les biocides (avril 2026)</li>
<li><strong>UE :</strong> Révision des critères d'évaluation toxicologique</li>
</ul>
</div>
<!-- INNOVATIONS -->
<div class="card">
<div class="card-header">
<span class="card-icon">💡</span>
<h3>Innovations</h3>
</div>
<ul>
<li><strong>Biotech :</strong> Nouvelles enzymes pour désinsectisation éco-responsable</li>
<li><strong>IoT :</strong> Monitoring en temps réel des nuisibles (startup française)</li>
<li><strong>Chimie verte :</strong> Fongicides à base d'huiles essentielles certifiés</li>
</ul>
</div>
<!-- MARCHE -->
<div class="card">
<div class="card-header">
<span class="card-icon">📈</span>
<h3>Marché</h3>
</div>
<ul>
<li><strong>Trends :</strong> +15% demande biocides dans secteur agroalimentaire</li>
<li><strong>Concurrence :</strong> Rachat de 2 PME par groupe allemand</li>
<li><strong>Recrutement :</strong> Formation Certibiocide en hausse (+35%)</li>
</ul>
</div>
<!-- RECHERCHE -->
<div class="card">
<div class="card-header">
<span class="card-icon">🔬</span>
<h3>Recherche scientifique</h3>
</div>
<ul>
<li><strong>Résistance :</strong> Étude INRAE sur résistance aux pyréthrines</li>
<li><strong>Santé :</strong> Nouvel article PubMed sur impact santé-environnement</li>
<li><strong>Méthodes :</strong> Protocoles d'évaluation de l'efficacité (ECHA)</li>
</ul>
</div>
<!-- FORMATION -->
<div class="card">
<div class="card-header">
<span class="card-icon">🎓</span>
<h3>Formations & Agréments</h3>
</div>
<ul>
<li><strong>Nouveaux agréés :</strong> 8 organismes cette semaine</li>
<li><strong>Tendance pédago :</strong> Hybrid e-learning davantage demandé</li>
<li><strong>Métier :</strong> Fiche de poste "Technicien Certibiocide" (2026)</li>
</ul>
</div>
<!-- ALERTE -->
<div class="card">
<div class="card-header">
<span class="card-icon">⚠️</span>
<h3>Alertes & Incidents</h3>
</div>
<ul>
<li><strong>Rappel :</strong> Substance X interdite dans l'UE (en vigueur mai)</li>
<li><strong>Incident :</strong> Contamination dans le secteur laitier (source maîtrisée)</li>
<li><strong>Certificat :</strong> Perte d'agrément d'1 organisme (non-conformité)</li>
</ul>
</div>
</div>
<div class="footer">
<p><strong>Sources :</strong> ANSES, JO (JORF), publications PubMed, LinkedIn professionnel, communiqués organismes, études INRAE, ECHA, Ministère Écologie</p>
</div>
<div class="buttons">
<button onclick="alert('Fonctionnalité : Détails réglementation ANSES')">📄 En savoir plus</button>
<button onclick="alert('Fonctionnalité : Détails des nouveaux agréments')">🔍 Agréments détail</button>
<button onclick="alert('Fonctionnalité : Innovations intéressantes')">💡 Innovations</button>
</div>
<div class="date">
Veille mise à jour le 14 avril 2026
</div>
</div>
</body>
</html>