Gauthier/Site_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Renomme la marque en Gauthier Chombart & Nathan Chauwin et finalise le jeu Memory

Browse Source 
Header, footer, titres et balises meta de toutes les pages actives : remplace NextGN Formation par Gauthier Chombart & Nathan Chauwin. Nouveau pied de page uniforme mentionnant les droits reserves et le statut de formateurs independants (dossier archives/ laisse inchange).

Integre aussi la refonte du jeu Memory (CSS/JS/HUD/leaderboard) et ajoute le rapport de veille Certibiocide semaine 28.
This commit is contained in:
gauthier.chombart
2026-07-14 23:02:09 +02:00
parent 9140d2f468
commit 44be41b2b2
22 changed files with 747 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
articles/documentation-index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index Documentation Technique & Biologie | NextGN Formation</title> <title>Index Documentation Technique & Biologie | Gauthier Chombart & Nathan Chauwin</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet"> <link 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> <style>
:root { :root {
@@ -506,7 +506,7 @@
<nav class="nav-header"> <nav class="nav-header">
<a href="index.html" class="header-logo"> <a href="index.html" class="header-logo">
<span>NextGN</span> Formation Gauthier Chombart & Nathan Chauwin
</a> </a>
<div class="header-nav"> <div class="header-nav">
<a href="index.html#formations">Exercices interactifs</a> <a href="index.html#formations">Exercices interactifs</a>
@@ -548,7 +548,7 @@
</main> </main>
<footer> <footer>
<p>&copy; 2026 NextGN Formation - Index Documentation Technique & Biologie</p> <p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p>Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p> <p>Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
</footer> </footer>

6
exercices/Exo_BioCID.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercices Pratiques BioCID - NextGN Formation</title> <title>Exercices Pratiques BioCID - Gauthier Chombart & Nathan Chauwin</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet"> <link 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"/> <link rel="stylesheet" href="../header-style.css"/>
<style> <style>
@@ -341,7 +341,7 @@
<body> <body>
<!-- HEADER NAVIGATION --> <!-- HEADER NAVIGATION -->
<header> <header>
<div class="logo">NextGN Formation</div> <div class="logo">Gauthier Chombart & Nathan Chauwin</div>
<nav> <nav>
<a href="../index.html">Accueil</a> <a href="../index.html">Accueil</a>
<a href="../index.html#formations">Exercices</a> <a href="../index.html#formations">Exercices</a>
@@ -487,7 +487,7 @@
<footer> <footer>
<p><strong>Durée totale estimée :</strong> 30 minutes</p> <p><strong>Durée totale estimée :</strong> 30 minutes</p>
<p style="margin-top: 15px;">Pour toute question sur BioCID : <strong>support.biocid@anses.fr</strong></p> <p style="margin-top: 15px;">Pour toute question sur BioCID : <strong>support.biocid@anses.fr</strong></p>
<p style="margin-top: 20px; opacity: 0.7; font-size: 0.9em;">&copy; 2026 NextGN Formation - Exercices BioCID</p> <p style="margin-top: 20px; opacity: 0.7; font-size: 0.9em;">&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p style="opacity: 0.6; font-size: 0.85em;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p> <p style="opacity: 0.6; font-size: 0.85em;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
</footer> </footer>
</div> </div>

4
exercices/Exo_FDS.html
View File

@@ -325,7 +325,7 @@
</head> </head>
<body> <body>
<header> <header>
<div class="logo">NextGN Formation</div> <div class="logo">Gauthier Chombart & Nathan Chauwin</div>
<nav> <nav>
<a href="../index.html">Accueil</a> <a href="../index.html">Accueil</a>
<a href="../index.html#formations">Exercices</a> <a href="../index.html#formations">Exercices</a>
@@ -696,7 +696,7 @@
</div> </div>
<footer> <footer>
<p>&copy; 2026 NextGN Formation - Formations Certibiocide & Techniques</p> <p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p> <p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
</footer> </footer>
</div> </div>

2
exercices/TP_Nuisibles.html
View File

@@ -633,7 +633,7 @@
<!-- HEADER WITH NAVIGATION --> <!-- HEADER WITH NAVIGATION -->
<header> <header>
<div class="logo">NextGN Formation</div> <div class="logo">Gauthier Chombart & Nathan Chauwin</div>
<nav> <nav>
<a href="../index.html">Accueil</a> <a href="../index.html">Accueil</a>
<a href="../index.html#formations">Exercices</a> <a href="../index.html#formations">Exercices</a>

4
exercices/correction-tp-nuisibles.html
View File

@@ -243,7 +243,7 @@ h1 {
</head> </head>
<body> <body>
<header> <header>
<div class="logo">NextGN Formation</div> <div class="logo">Gauthier Chombart & Nathan Chauwin</div>
<nav> <nav>
<a href="../index.html">Accueil</a> <a href="../index.html">Accueil</a>
<a href="../index.html#formations">Exercices</a> <a href="../index.html#formations">Exercices</a>
@@ -299,7 +299,7 @@ h1 {
</div> </div>
<footer> <footer>
<p>&copy; 2026 NextGN Formation - Formations Certibiocide & Techniques</p> <p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p> <p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
</footer> </footer>

86
exercices/memory-pictogrammes/assets/css/hud.css
View File

@@ -7,10 +7,9 @@
============================================ */ ============================================ */
.game-hud { .game-hud {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); grid-template-columns: repeat(4, minmax(120px, 1fr));
gap: 16px; gap: 16px;
margin-bottom: 32px; flex: 1;
animation: fadeInUp 0.6s ease-out 0.4s both;
} }
.stat-box { .stat-box {
@@ -230,6 +229,41 @@
margin-top: 4px; margin-top: 4px;
} }
/* ============================================
PLAYER NAME MODAL
============================================ */
.name-modal-content h2 {
margin-top: 32px;
}
.name-modal-text {
color: var(--text-muted);
font-size: 14px;
line-height: 1.5;
margin-bottom: 24px;
position: relative;
z-index: 1;
}
.name-input {
width: 100%;
padding: 14px 16px;
font-size: 16px;
font-family: 'DM Sans', sans-serif;
border: 2px solid var(--amber-mid);
border-radius: 8px;
background: var(--white);
color: var(--text);
text-align: center;
box-sizing: border-box;
}
.name-input:focus {
outline: none;
border-color: var(--amber-dark);
box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.15);
}
/* ============================================ /* ============================================
ACHIEVEMENTS ACHIEVEMENTS
============================================ */ ============================================ */
@@ -289,52 +323,6 @@
min-width: 140px; min-width: 140px;
} }
/* ============================================
PAUSE MODAL
============================================ */
.pause-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1999;
backdrop-filter: blur(5px);
}
.pause-content {
background: var(--white);
border-radius: 12px;
padding: 40px;
text-align: center;
border: 2px solid var(--amber-mid);
animation: slideUp 0.4s ease-out;
}
.pause-content h2 {
font-family: 'Syne', sans-serif;
font-size: 32px;
color: var(--amber);
margin-bottom: 24px;
}
.pause-content .pause-timer {
font-size: 48px;
font-family: 'Syne', sans-serif;
font-weight: 800;
color: var(--amber-dark);
margin-bottom: 24px;
animation: timerTick 0.5s ease-out;
}
.pause-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* ============================================ /* ============================================
RESPONSIVE DESIGN RESPONSIVE DESIGN
============================================ */ ============================================ */

114
exercices/memory-pictogrammes/assets/css/leaderboard.css
View File

@@ -2,19 +2,22 @@
LEADERBOARD & PLAYER STATS LEADERBOARD & PLAYER STATS
============================================ */ ============================================ */
.leaderboard-section { .leaderboard-panel {
margin-top: 80px;
animation: fadeInUp 0.6s ease-out 0.6s both; animation: fadeInUp 0.6s ease-out 0.6s both;
text-align: center; text-align: center;
} }
.leaderboard-section h2 { .stats-panel {
animation: fadeInUp 0.6s ease-out 0.6s both;
}
.leaderboard-panel h2 {
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
font-size: clamp(24px, 5vw, 32px); font-size: clamp(20px, 4vw, 26px);
font-weight: 800; font-weight: 800;
letter-spacing: -0.5px; letter-spacing: -0.5px;
color: var(--text); color: var(--text);
margin: 0 auto 32px; margin: 0 auto 24px;
padding-bottom: 12px; padding-bottom: 12px;
border-bottom: 3px solid var(--amber-mid); border-bottom: 3px solid var(--amber-mid);
display: inline-block; display: inline-block;
@@ -78,12 +81,11 @@
} }
.rank-item { .rank-item {
display: grid; display: flex;
grid-template-columns: 50px 1fr auto auto; flex-direction: column;
align-items: center; gap: 8px;
gap: 16px;
background: var(--white); background: var(--white);
padding: 16px; padding: 14px;
border-radius: 8px; border-radius: 8px;
transition: all 0.3s ease; transition: all 0.3s ease;
border-left: 4px solid var(--amber-light); border-left: 4px solid var(--amber-light);
@@ -91,6 +93,13 @@
overflow: hidden; overflow: hidden;
} }
.rank-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.rank-item::before { .rank-item::before {
content: ''; content: '';
position: absolute; position: absolute;
@@ -121,30 +130,16 @@
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
} }
.rank-number.medal-1 { .rank-number.medal-1,
font-size: 24px; .rank-number.medal-2,
} .rank-number.medal-3 {
font-size: 22px;
.rank-number.medal-1::before {
content: '🥇';
display: block;
}
.rank-number.medal-2::before {
content: '🥈';
display: block;
font-size: 20px;
}
.rank-number.medal-3::before {
content: '🥉';
display: block;
font-size: 20px;
} }
/* Infos joueur */ /* Infos joueur */
.rank-info { .rank-info {
flex: 1; flex: 1;
min-width: 0;
} }
.player-name { .player-name {
@@ -152,13 +147,16 @@
color: var(--text); color: var(--text);
margin-bottom: 4px; margin-bottom: 4px;
font-size: 14px; font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.rank-meta { .rank-meta {
font-size: 12px; font-size: 11px;
color: var(--text-muted); color: var(--text-muted);
display: flex; display: flex;
gap: 12px; gap: 10px;
flex-wrap: wrap; flex-wrap: wrap;
} }
@@ -172,38 +170,10 @@
.rank-score { .rank-score {
font-weight: 700; font-weight: 700;
color: var(--amber-dark); color: var(--amber-dark);
font-size: 18px; font-size: 16px;
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
min-width: 60px;
text-align: right; text-align: right;
} flex-shrink: 0;
.rank-difficulty {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 4px 8px;
border-radius: 4px;
background: var(--amber-light);
color: var(--amber-dark);
min-width: 60px;
text-align: center;
}
.rank-difficulty.easy {
background: #C8E6C9;
color: #2E7D32;
}
.rank-difficulty.normal {
background: var(--amber-light);
color: var(--amber-dark);
}
.rank-difficulty.hard {
background: #FFCCBC;
color: #D84315;
} }
/* Message si pas de scores */ /* Message si pas de scores */
@@ -249,7 +219,7 @@
.stats-grid { .stats-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 12px; gap: 12px;
} }
@@ -329,7 +299,7 @@
RESPONSIVE DESIGN RESPONSIVE DESIGN
============================================ */ ============================================ */
@media (max-width: 768px) { @media (max-width: 768px) {
.leaderboard-section h2 { .leaderboard-panel h2 {
font-size: 24px; font-size: 24px;
} }
@@ -342,15 +312,6 @@
font-size: 11px; font-size: 11px;
} }
.rank-item {
grid-template-columns: 40px 1fr auto;
gap: 12px;
}
.rank-difficulty {
display: none;
}
.rank-number { .rank-number {
font-size: 16px; font-size: 16px;
} }
@@ -402,17 +363,10 @@
} }
.rank-item { .rank-item {
grid-template-columns: 40px 1fr; gap: 8px;
gap: 10px;
padding: 12px; padding: 12px;
} }
.rank-score {
grid-column: 1 / -1;
text-align: left;
margin-top: 8px;
}
.rank-number { .rank-number {
font-size: 14px; font-size: 14px;
} }

86
exercices/memory-pictogrammes/assets/css/memory-game.css
View File

@@ -26,7 +26,7 @@ main {
} }
.game-container { .game-container {
max-width: 1200px; max-width: 1440px;
margin: 0 auto; margin: 0 auto;
} }
@@ -70,11 +70,50 @@ main {
text-align: center; text-align: center;
} }
/* ============================================
TOP BAR (niveau + stats en temps réel)
============================================ */
.game-top-bar {
max-width: 1440px;
margin: 0 auto 32px;
background: var(--white);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px clamp(20px, 3vw, 36px);
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(20px, 3vw, 40px);
animation: fadeInUp 0.6s ease-out 0.2s both;
}
/* ============================================
GAME LAYOUT (classement / jeu / stats)
============================================ */
.game-layout {
display: grid;
grid-template-columns: minmax(0, 320px) minmax(0, 760px) minmax(0, 320px);
grid-template-areas: "leaderboard game stats";
justify-content: center;
align-items: start;
gap: 32px;
margin-bottom: 80px;
}
.leaderboard-panel {
grid-area: leaderboard;
}
.stats-panel {
grid-area: stats;
}
/* ============================================ /* ============================================
GAME SECTION / PANEL GAME SECTION / PANEL
============================================ */ ============================================ */
.game-section { .game-section {
margin-bottom: 80px; grid-area: game;
animation: fadeInUp 0.6s ease-out 0.3s both; animation: fadeInUp 0.6s ease-out 0.3s both;
} }
@@ -82,7 +121,7 @@ main {
background: var(--white); background: var(--white);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 12px; border-radius: 12px;
padding: clamp(20px, 4vw, 40px); padding: clamp(20px, 4vw, 32px);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
@@ -90,8 +129,8 @@ main {
DIFFICULTY SELECTOR DIFFICULTY SELECTOR
============================================ */ ============================================ */
.difficulty-selector { .difficulty-selector {
margin-bottom: 32px; text-align: left;
text-align: center; flex-shrink: 0;
} }
.difficulty-selector label { .difficulty-selector label {
@@ -106,10 +145,8 @@ main {
.btn-group { .btn-group {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-template-columns: repeat(3, minmax(100px, 1fr));
gap: 12px; gap: 12px;
max-width: 520px;
margin: 0 auto;
} }
.btn-difficulty { .btn-difficulty {
@@ -168,9 +205,8 @@ main {
============================================ */ ============================================ */
.game-grid { .game-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(70px, 15vw, 140px), 1fr)); grid-template-columns: repeat(auto-fit, minmax(clamp(70px, 15vw, 110px), 1fr));
gap: clamp(12px, 2vw, 20px); gap: clamp(10px, 2vw, 16px);
max-width: 900px;
margin: 0 auto 32px; margin: 0 auto 32px;
padding: 20px; padding: 20px;
background: linear-gradient(135deg, rgba(250, 238, 218, 0.4), transparent); background: linear-gradient(135deg, rgba(250, 238, 218, 0.4), transparent);
@@ -325,6 +361,34 @@ footer {
/* ============================================ /* ============================================
RESPONSIVE DESIGN RESPONSIVE DESIGN
============================================ */ ============================================ */
@media (max-width: 1100px) {
.game-layout {
grid-template-columns: 1fr;
grid-template-areas:
"game"
"leaderboard"
"stats";
gap: 40px;
}
}
@media (max-width: 900px) {
.game-top-bar {
flex-direction: column;
align-items: stretch;
gap: 24px;
}
.difficulty-selector {
text-align: center;
}
.btn-group {
max-width: 520px;
margin: 0 auto;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
main { main {
padding: 56px 20px 20px; padding: 56px 20px 20px;

2
exercices/memory-pictogrammes/assets/js/game-state.js
View File

@@ -175,7 +175,6 @@ class GameSessionState {
this.moves = 0; this.moves = 0;
this.score = 0; this.score = 0;
this.matched = 0; this.matched = 0;
this.isPaused = false;
this.gameActive = false; this.gameActive = false;
} }
@@ -190,7 +189,6 @@ class GameSessionState {
this.score = 0; this.score = 0;
this.matched = 0; this.matched = 0;
this.gameActive = true; this.gameActive = true;
this.isPaused = false;
} }
/** /**

9
exercices/memory-pictogrammes/assets/js/leaderboard.js
View File

@@ -192,17 +192,18 @@ class LeaderboardManager {
const medal = index < 3 ? `class="rank-number medal-${index + 1}"` : 'class="rank-number"'; const medal = index < 3 ? `class="rank-number medal-${index + 1}"` : 'class="rank-number"';
rankItem.innerHTML = ` rankItem.innerHTML = `
<div class="rank-top">
<div ${medal}>${rankNumber}</div> <div ${medal}>${rankNumber}</div>
<div class="rank-score">${formatNumber(score.score)}</div>
</div>
<div class="rank-info"> <div class="rank-info">
<div class="player-name">${this.escapeHTML(score.playerName)}</div> <div class="player-name">${this.escapeHTML(score.playerName)}</div>
<div class="rank-meta"> <div class="rank-meta">
<span>⏱ ${formatTime(score.timeSeconds)}</span> <span>⏱ ${formatTime(score.timeSeconds)}</span>
<span>🎯 ${score.moves} mouvements</span> <span>🎯 ${score.moves}</span>
${score.isPerfect ? '<span>✨ Parfait</span>' : ''} ${score.isPerfect ? '<span>✨</span>' : ''}
</div> </div>
</div> </div>
<div class="rank-score">${formatNumber(score.score)}</div>
<div class="rank-difficulty ${score.difficulty}">${DIFFICULTY_MODES[score.difficulty].name}</div>
`; `;
leaderboardList.appendChild(rankItem); leaderboardList.appendChild(rankItem);

69
exercices/memory-pictogrammes/assets/js/memory-game.js
View File

@@ -14,7 +14,6 @@ class MemoryGameEngine {
moves: 0, moves: 0,
score: 0, score: 0,
isProcessing: false, isProcessing: false,
isPaused: false,
gameStarted: false gameStarted: false
}; };
this.startTime = null; this.startTime = null;
@@ -128,7 +127,6 @@ class MemoryGameEngine {
if (this.gameState.flipped.length === 2) return; if (this.gameState.flipped.length === 2) return;
if (this.cards[cardIndex].isMatched) return; if (this.cards[cardIndex].isMatched) return;
if (this.gameState.flipped.includes(cardIndex)) return; if (this.gameState.flipped.includes(cardIndex)) return;
if (this.gameState.isPaused) return;
// Retourner la carte // Retourner la carte
this.flipCard(cardIndex); this.flipCard(cardIndex);
@@ -260,9 +258,7 @@ class MemoryGameEngine {
this.startTime = Date.now(); this.startTime = Date.now();
this.timerInterval = setInterval(() => { this.timerInterval = setInterval(() => {
if (!this.gameState.isPaused) {
this.updateTimer(); this.updateTimer();
}
}, 100); }, 100);
this.analytics.trackGameStart(this.difficulty); this.analytics.trackGameStart(this.difficulty);
@@ -429,7 +425,6 @@ class MemoryGameEngine {
moves: 0, moves: 0,
score: 0, score: 0,
isProcessing: false, isProcessing: false,
isPaused: false,
gameStarted: false gameStarted: false
}; };
@@ -444,24 +439,6 @@ class MemoryGameEngine {
document.getElementById('timer-display').style.animation = ''; document.getElementById('timer-display').style.animation = '';
} }
/**
* Pause/Reprise
*/
togglePause() {
if (!this.gameState.gameStarted) return;
this.gameState.isPaused = !this.gameState.isPaused;
const pauseBtn = document.getElementById('pause-btn');
if (this.gameState.isPaused) {
pauseBtn.textContent = '▶ Reprendre';
pauseBtn.classList.add('paused');
} else {
pauseBtn.textContent = '⏸ Pause';
pauseBtn.classList.remove('paused');
}
}
/** /**
* Setup event listeners * Setup event listeners
*/ */
@@ -469,9 +446,6 @@ class MemoryGameEngine {
// Bouton restart // Bouton restart
document.getElementById('restart-btn').addEventListener('click', () => this.restart()); document.getElementById('restart-btn').addEventListener('click', () => this.restart());
// Bouton pause
document.getElementById('pause-btn').addEventListener('click', () => this.togglePause());
// Sélecteur de difficulté // Sélecteur de difficulté
document.querySelectorAll('.btn-difficulty').forEach(btn => { document.querySelectorAll('.btn-difficulty').forEach(btn => {
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
@@ -512,14 +486,51 @@ class MemoryGameEngine {
// ============================================ // ============================================
let game; let game;
document.addEventListener('DOMContentLoaded', () => { /**
// Initialiser le jeu * Demander le nom du joueur à la première partie
game = new MemoryGameEngine('normal'); */
function setupPlayerNameModal(onReady) {
const nameConfirmed = localStorage.getItem('nextgn_name_confirmed') === 'true';
if (nameConfirmed) {
onReady();
return;
}
const modal = document.getElementById('player-name-modal');
const input = document.getElementById('player-name-input');
const confirmBtn = document.getElementById('player-name-confirm');
modal.classList.remove('hidden');
input.focus();
const confirmName = () => {
const name = input.value.trim();
localStorage.setItem('nextgn_playerName', name || getPlayerName());
localStorage.setItem('nextgn_name_confirmed', 'true');
modal.classList.add('hidden');
onReady();
};
confirmBtn.addEventListener('click', confirmName, { once: true });
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') confirmName();
}, { once: true });
}
document.addEventListener('DOMContentLoaded', () => {
// Afficher le leaderboard initial // Afficher le leaderboard initial
LeaderboardManager.updateDisplay('all'); LeaderboardManager.updateDisplay('all');
LeaderboardManager.updatePlayerStats(); LeaderboardManager.updatePlayerStats();
setupPlayerNameModal(() => {
LeaderboardManager.updateDisplay('all');
LeaderboardManager.updatePlayerStats();
});
// Initialiser le jeu
game = new MemoryGameEngine('normal');
// Scroll progress // Scroll progress
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
game.updateHUD(); game.updateHUD();

10
exercices/memory-pictogrammes/assets/js/utils.js
View File

@@ -18,8 +18,8 @@ const PICTOGRAMMES = [
id: 2, id: 2,
nom: "Exclamation", nom: "Exclamation",
filename: "nocif_irritant_ozone.jpg", filename: "nocif_irritant_ozone.jpg",
texte: "Je nuis gravement à la santé", texte: "J'altère la santé ou la couche d'ozone",
danger: "Danger pour la santé", danger: "Danger pour la santé/Environnement",
couleur: "teal" couleur: "teal"
}, },
{ {
@@ -72,10 +72,10 @@ const PICTOGRAMMES = [
}, },
{ {
id: 9, id: 9,
nom: "Santé/Environnement", nom: "Santé (CMR)",
filename: "cmr.jpg", filename: "cmr.jpg",
texte: "J'altère la santé ou la couche d'ozone", texte: "Je nuis gravement à la santé",
danger: "Danger pour la santé/Environnement", danger: "Danger pour la santé",
couleur: "teal" couleur: "teal"
} }
]; ];

86
exercices/memory-pictogrammes/memory.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Pictogrammes GHS - NextGN Formation</title> <title>Memory Pictogrammes GHS - Gauthier Chombart & Nathan Chauwin</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet"> <link 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">
<!-- Styles --> <!-- Styles -->
@@ -14,9 +14,9 @@
<link rel="stylesheet" href="assets/css/leaderboard.css?v=3"> <link rel="stylesheet" href="assets/css/leaderboard.css?v=3">
</head> </head>
<body> <body>
<!-- HEADER NextGN Formation --> <!-- HEADER Gauthier Chombart & Nathan Chauwin -->
<header> <header>
<div class="logo">NextGN Formation</div> <div class="logo">Gauthier Chombart & Nathan Chauwin</div>
<nav> <nav>
<a href="../../index.html">Accueil</a> <a href="../../index.html">Accueil</a>
<a href="../../index.html#formations">Exercices</a> <a href="../../index.html#formations">Exercices</a>
@@ -47,9 +47,8 @@
</div> </div>
</section> </section>
<!-- GAME SECTION --> <!-- TOP BAR (niveau + stats en temps réel) -->
<section class="game-section"> <div class="game-top-bar">
<div class="game-panel">
<!-- DIFFICULTY SELECTOR --> <!-- DIFFICULTY SELECTOR -->
<div class="difficulty-selector"> <div class="difficulty-selector">
<label>Choisir le niveau</label> <label>Choisir le niveau</label>
@@ -91,7 +90,31 @@
<div class="value" id="pairs-display">0/9</div> <div class="value" id="pairs-display">0/9</div>
</div> </div>
</div> </div>
</div>
<!-- GAME LAYOUT (classement / jeu / statistiques) -->
<div class="game-layout">
<!-- LEADERBOARD PANEL (gauche) -->
<aside class="leaderboard-panel">
<h2>🏆 Classement</h2>
<div class="tabs">
<button class="tab-btn active" data-filter="all">Tous</button>
<button class="tab-btn" data-filter="easy">Facile</button>
<button class="tab-btn" data-filter="normal">Normal</button>
<button class="tab-btn" data-filter="hard">Difficile</button>
</div>
<div class="leaderboard">
<div class="leaderboard-list" id="leaderboard-list">
<!-- Rempli par JS -->
</div>
</div>
</aside>
<!-- GAME SECTION (centre) -->
<section class="game-section">
<div class="game-panel">
<!-- PROGRESS BAR --> <!-- PROGRESS BAR -->
<div class="progress-container"> <div class="progress-container">
<div class="game-progress-fill" id="progress-bar"></div> <div class="game-progress-fill" id="progress-bar"></div>
@@ -107,31 +130,12 @@
<button class="btn btn-primary" id="restart-btn"> <button class="btn btn-primary" id="restart-btn">
🔄 Recommencer 🔄 Recommencer
</button> </button>
<button class="btn btn-secondary" id="pause-btn">
⏸ Pause
</button>
</div> </div>
</div> </div>
</section> </section>
<!-- LEADERBOARD SECTION --> <!-- PLAYER STATS PANEL (droite) -->
<section class="leaderboard-section"> <aside class="stats-panel">
<h2>🏆 Classement</h2>
<div class="tabs">
<button class="tab-btn active" data-filter="all">Tous</button>
<button class="tab-btn" data-filter="easy">Facile</button>
<button class="tab-btn" data-filter="normal">Normal</button>
<button class="tab-btn" data-filter="hard">Difficile</button>
</div>
<div class="leaderboard">
<div class="leaderboard-list" id="leaderboard-list">
<!-- Rempli par JS -->
</div>
</div>
<!-- PLAYER STATS -->
<div class="player-stats"> <div class="player-stats">
<h3>Vos statistiques</h3> <h3>Vos statistiques</h3>
<div class="stats-grid"> <div class="stats-grid">
@@ -157,9 +161,33 @@
</div> </div>
</div> </div>
</div> </div>
</section> </aside>
</div>
</main> </main>
<!-- PLAYER NAME MODAL (1ère partie) -->
<div class="victory-modal hidden" id="player-name-modal">
<div class="modal-content name-modal-content">
<h2>Bienvenue ! 👋</h2>
<p class="name-modal-text">
Entrez votre nom ou un pseudo pour apparaître dans le classement général.
</p>
<input
type="text"
id="player-name-input"
class="name-input"
maxlength="20"
placeholder="Votre nom ou pseudo"
autocomplete="off"
>
<div class="modal-actions">
<button class="btn btn-primary" id="player-name-confirm">
🎮 Commencer à jouer
</button>
</div>
</div>
</div>
<!-- VICTORY MODAL --> <!-- VICTORY MODAL -->
<div class="victory-modal hidden" id="victory-modal"> <div class="victory-modal hidden" id="victory-modal">
<div class="modal-content"> <div class="modal-content">
@@ -201,7 +229,7 @@
<!-- FOOTER --> <!-- FOOTER -->
<footer> <footer>
<p>&copy; 2024 NextGN Formation - Memory Pictogrammes GHS</p> <p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés - Formateurs indépendants</p> <p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés - Formateurs indépendants</p>
</footer> </footer>

10
index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NextGN Formation - Formations Certibiocide & Techniques</title> <title>Gauthier Chombart & Nathan Chauwin - Formations Certibiocide & Techniques</title>
<!-- SEO de base --> <!-- SEO de base -->
<meta name="description" content="Formations Certibiocide pratiques et interactives par des formateurs indépendants experts. Exercices, documentation technique sur les nuisibles et rapports de veille réglementaire."> <meta name="description" content="Formations Certibiocide pratiques et interactives par des formateurs indépendants experts. Exercices, documentation technique sur les nuisibles et rapports de veille réglementaire.">
@@ -15,13 +15,13 @@
<!-- Open Graph (partage sur les réseaux sociaux et LinkedIn) --> <!-- Open Graph (partage sur les réseaux sociaux et LinkedIn) -->
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:url" content="https://nextgnformation.bsite.net/"> <meta property="og:url" content="https://nextgnformation.bsite.net/">
<meta property="og:title" content="NextGN Formation - Formations Certibiocide & Techniques"> <meta property="og:title" content="Gauthier Chombart & Nathan Chauwin - Formations Certibiocide & Techniques">
<meta property="og:description" content="Formations Certibiocide pratiques et interactives par des formateurs indépendants experts. Exercices, documentation technique sur les nuisibles et rapports de veille réglementaire."> <meta property="og:description" content="Formations Certibiocide pratiques et interactives par des formateurs indépendants experts. Exercices, documentation technique sur les nuisibles et rapports de veille réglementaire.">
<meta property="og:locale" content="fr_FR"> <meta property="og:locale" content="fr_FR">
<!-- Twitter Card --> <!-- Twitter Card -->
<meta name="twitter:card" content="summary"> <meta name="twitter:card" content="summary">
<meta name="twitter:title" content="NextGN Formation - Formations Certibiocide & Techniques"> <meta name="twitter:title" content="Gauthier Chombart & Nathan Chauwin - Formations Certibiocide & Techniques">
<meta name="twitter:description" content="Formations Certibiocide pratiques et interactives par des formateurs indépendants experts."> <meta name="twitter:description" content="Formations Certibiocide pratiques et interactives par des formateurs indépendants experts.">
<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 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">
@@ -29,7 +29,7 @@
</head> </head>
<body> <body>
<header> <header>
<div class="logo">NextGN Formation</div> <div class="logo">Gauthier Chombart & Nathan Chauwin</div>
<nav> <nav>
<a href="#formations">Exercices interactifs</a> <a href="#formations">Exercices interactifs</a>
<a href="#documentation">Documentation</a> <a href="#documentation">Documentation</a>
@@ -314,7 +314,7 @@
</main> </main>
<footer> <footer>
<p>&copy; 2026 NextGN Formation - Formations Certibiocide & Techniques</p> <p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p> <p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
</footer> </footer>

4
veille/rapports/veille-certibiocide-semaine-20.html
View File

@@ -419,7 +419,7 @@
<!-- HEADER --> <!-- HEADER -->
<header> <header>
<div class="logo">NextGN Formation</div> <div class="logo">Gauthier Chombart & Nathan Chauwin</div>
<nav> <nav>
<a href="#formations">Exercices interactifs</a> <a href="#formations">Exercices interactifs</a>
<a href="#documentation">Documentation</a> <a href="#documentation">Documentation</a>
@@ -799,7 +799,7 @@
<!-- FOOTER --> <!-- FOOTER -->
<footer> <footer>
<p>&copy; 2024 NextGN Formation - Rapport Veille Semaine 20</p> <p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p>Tous droits réservés - Formateur indépendant spécialisé en Certibiocide</p> <p>Tous droits réservés - Formateur indépendant spécialisé en Certibiocide</p>
</footer> </footer>

4
veille/rapports/veille-certibiocide-semaine-21.html
View File

@@ -419,7 +419,7 @@
<!-- HEADER --> <!-- HEADER -->
<header> <header>
<div class="logo">NextGN Formation</div> <div class="logo">Gauthier Chombart & Nathan Chauwin</div>
<nav> <nav>
<a href="#formations">Exercices interactifs</a> <a href="#formations">Exercices interactifs</a>
<a href="#documentation">Documentation</a> <a href="#documentation">Documentation</a>
@@ -799,7 +799,7 @@
<!-- FOOTER --> <!-- FOOTER -->
<footer> <footer>
<p>&copy; 2024 NextGN Formation - Rapport Veille Semaine 21</p> <p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p>Tous droits réservés - Formateur indépendant spécialisé en Certibiocide</p> <p>Tous droits réservés - Formateur indépendant spécialisé en Certibiocide</p>
</footer> </footer>

6
veille/rapports/veille-certibiocide-semaine-23.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Veille Certibiocide — Semaine 23 | NextGN Formation</title> <title>Veille Certibiocide — Semaine 23 | Gauthier Chombart & Nathan Chauwin</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet"> <link 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> <style>
:root { :root {
@@ -355,7 +355,7 @@
<!-- NAV --> <!-- NAV -->
<nav class="nav-header"> <nav class="nav-header">
<a href="index.html" class="header-logo"><span>NextGN</span> Formation</a> <a href="index.html" class="header-logo">Gauthier Chombart & Nathan Chauwin</a>
<nav class="header-nav"> <nav class="header-nav">
<a href="index.html#formations">Exercices interactifs</a> <a href="index.html#formations">Exercices interactifs</a>
<a href="index.html#about">À propos</a> <a href="index.html#about">À propos</a>
@@ -800,7 +800,7 @@
</main> </main>
<footer> <footer>
<p>&copy; 2026 NextGN Formation — Veille Certibiocide Semaine 23</p> <p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p style="margin-top:10px; opacity:0.6;">Tous droits réservés — Formateurs indépendants</p> <p style="margin-top:10px; opacity:0.6;">Tous droits réservés — Formateurs indépendants</p>
</footer> </footer>

4
veille/rapports/veille-certibiocide-semaine-24.html
View File

@@ -356,7 +356,7 @@
<!-- Navigation --> <!-- Navigation -->
<nav class="nav-header"> <nav class="nav-header">
<a href="index.html" class="header-logo"><span>NextGN</span> Formation</a> <a href="index.html" class="header-logo">Gauthier Chombart & Nathan Chauwin</a>
<nav class="header-nav" id="mainNav"> <nav class="header-nav" id="mainNav">
<a href="index.html#formations">Exercices interactifs</a> <a href="index.html#formations">Exercices interactifs</a>
<a href="index.html#about">À propos</a> <a href="index.html#about">À propos</a>
@@ -790,7 +790,7 @@
</div><!-- /container --> </div><!-- /container -->
<footer> <footer>
<p>&copy; 2026 NextGN Formation — Veille Certibiocide Semaine 24</p> <p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p style="margin-top:10px; opacity:0.6;">Tous droits réservés — Formateurs indépendants</p> <p style="margin-top:10px; opacity:0.6;">Tous droits réservés — Formateurs indépendants</p>
</footer> </footer>

4
veille/rapports/veille-certibiocide-semaine-25.html
View File

@@ -375,7 +375,7 @@
<!-- NAV HEADER --> <!-- NAV HEADER -->
<nav class="nav-header"> <nav class="nav-header">
<a href="index.html" class="header-logo"><span>NextGN</span> Formation</a> <a href="index.html" class="header-logo">Gauthier Chombart & Nathan Chauwin</a>
<button class="hamburger" id="hamburger" aria-label="Menu"> <button class="hamburger" id="hamburger" aria-label="Menu">
<span></span><span></span><span></span> <span></span><span></span><span></span>
</button> </button>
@@ -704,7 +704,7 @@
<!-- FOOTER --> <!-- FOOTER -->
<footer> <footer>
<p>&copy; 2026 NextGN Formation - Veille Certibiocide Semaine 25</p> <p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p>Tous droits réservés - Formateurs indépendants</p> <p>Tous droits réservés - Formateurs indépendants</p>
</footer> </footer>

8
veille/rapports/veille-certibiocide-semaine-26.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Veille Certibiocide — Semaine 26 | NextGN Formation</title> <title>Veille Certibiocide — Semaine 26 | Gauthier Chombart & Nathan Chauwin</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet"> <link 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> <style>
:root { :root {
@@ -378,7 +378,7 @@
<body> <body>
<nav class="nav-header"> <nav class="nav-header">
<a href="index.html" class="header-logo"><span>NextGN</span> Formation</a> <a href="index.html" class="header-logo">Gauthier Chombart & Nathan Chauwin</a>
<nav class="header-nav"> <nav class="header-nav">
<a href="index.html#formations">Exercices interactifs</a> <a href="index.html#formations">Exercices interactifs</a>
<a href="index.html#about">À propos</a> <a href="index.html#about">À propos</a>
@@ -393,7 +393,7 @@
<h1>Veille Certibiocide<br>Semaine 26 — 2026</h1> <h1>Veille Certibiocide<br>Semaine 26 — 2026</h1>
<p class="hero-meta"> <p class="hero-meta">
<strong>Semaine du 23 au 29 juin 2026</strong> &nbsp;·&nbsp; <strong>Semaine du 23 au 29 juin 2026</strong> &nbsp;·&nbsp;
Généré le 29 juin 2026 &nbsp;·&nbsp; NextGN Formation Généré le 29 juin 2026 &nbsp;·&nbsp; Gauthier Chombart & Nathan Chauwin
</p> </p>
</div> </div>
@@ -810,7 +810,7 @@
</div> </div>
<footer> <footer>
<p>&copy; 2026 NextGN Formation — Veille Certibiocide Semaine 26</p> <p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p>Tous droits réservés — Formateurs indépendants</p> <p>Tous droits réservés — Formateurs indépendants</p>
</footer> </footer>

376
veille/rapports/veille-certibiocide-semaine-28.html Normal file
View File

@@ -0,0 +1,376 @@
<!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 28 (06-12 juillet 2026)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<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);
}
* { 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;
}
h1, h2, h3 { font-family: 'Syne', sans-serif; }
/* 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: 20px;
text-decoration: none;
background: linear-gradient(90deg, var(--teal), var(--coral-mid));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.header-logo span { font-weight: 800; }
.header-nav { display: flex; gap: 28px; }
.header-nav a {
font-family: 'Syne', sans-serif; font-size: 12px; text-transform: uppercase;
letter-spacing: 0.5px; color: var(--text); text-decoration: none;
position: relative; padding-bottom: 4px;
}
.header-nav a::after {
content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
background: var(--teal-mid); transition: width 0.2s ease;
}
.header-nav a:hover::after { width: 100%; }
/* 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.3s ease; }
.wrap { max-width: 900px; margin: 0 auto; padding: 40px 24px 20px; }
/* Hero */
.hero {
background: var(--teal-light); border: 1px solid var(--teal-mid);
border-radius: 14px; padding: 36px 40px; margin-bottom: 32px;
}
.badge {
display: inline-block; background: var(--teal); color: var(--white);
font-family: 'Syne', sans-serif; font-size: 12px; text-transform: uppercase;
letter-spacing: 0.5px; padding: 6px 14px; border-radius: 20px; margin-bottom: 14px;
}
.hero h1 { font-size: 30px; font-weight: 800; color: var(--teal-dark); margin-bottom: 8px; }
.hero p { color: var(--text-muted); font-size: 14px; }
/* Sommaire */
.sommaire {
position: sticky; top: 90px; background: var(--white); border: 1px solid var(--border);
border-radius: 10px; padding: 18px 22px; margin-bottom: 32px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04); z-index: 10;
}
.sommaire h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 10px; }
.sommaire-links { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.sommaire-links a {
font-size: 13px; color: var(--teal-dark); text-decoration: none; font-weight: 500;
}
.sommaire-links a:hover { text-decoration: underline; }
/* Points d'attention */
.attention {
background: var(--amber-light); border-left: 4px solid var(--amber);
border-radius: 10px; padding: 24px 28px; margin-bottom: 40px;
}
.attention h2 { font-size: 20px; color: var(--amber-dark); margin-bottom: 14px; }
.attention ol { margin-left: 20px; color: var(--text); }
.attention li { margin-bottom: 10px; font-size: 14.5px; }
/* Sections */
.section {
background: var(--white); border-radius: 10px; margin-bottom: 28px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05); overflow: hidden;
animation: fadeIn 0.6s ease-out;
scroll-margin-top: 100px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.section-header {
background: var(--teal-light); padding: 16px 24px;
font-family: 'Syne', sans-serif; font-weight: 700; font-size: 17px; color: var(--teal-dark);
}
.section-body { padding: 20px 24px; }
.news { padding: 14px 0; border-bottom: 1px solid var(--border); }
.news:last-child { border-bottom: none; }
.news-source {
display: inline-block; background: var(--teal-light); color: var(--teal-dark);
font-family: 'Syne', sans-serif; font-size: 11px; text-transform: uppercase;
letter-spacing: 0.3px; padding: 3px 10px; border-radius: 20px; margin-bottom: 6px;
}
.news p { font-size: 14.5px; margin: 6px 0; }
.news-meta { font-size: 12.5px; color: var(--text-muted); }
.news-meta a { color: var(--teal); text-decoration: none; transition: transform 0.2s ease; display: inline-block; }
.news-meta a:hover { transform: translateY(-1px); text-decoration: underline; }
.note {
background: var(--amber-light); border: 1px solid var(--amber);
color: var(--amber-dark); border-radius: 8px; padding: 10px 14px;
font-size: 13.5px; margin: 10px 0;
}
footer {
background: var(--text); color: var(--white); padding: 40px; font-size: 13px; text-align: center;
margin-top: 40px;
}
footer p:first-child { opacity: 0.9; }
footer p:last-child { margin-top: 10px; opacity: 0.6; }
@media (max-width: 768px) {
.nav-header { flex-direction: column; height: auto; padding: 12px 20px; align-items: flex-start; gap: 8px; }
body { padding-top: 110px; }
.progress { top: 110px; }
.header-nav { gap: 16px; flex-wrap: wrap; }
.hero { padding: 24px 22px; }
.hero h1 { font-size: 22px; }
.sommaire { position: static; }
.section-body, .section-header { padding-left: 18px; padding-right: 18px; }
}
</style>
</head>
<body>
<nav class="nav-header">
<a href="index.html" class="header-logo">Gauthier Chombart & Nathan Chauwin</a>
<nav class="header-nav">
<a href="index.html#formations">Exercices interactifs</a>
<a href="index.html#about">À propos</a>
<a href="index.html#contact">Contact</a>
</nav>
</nav>
<div class="progress"><div class="progress-bar" id="progressBar"></div></div>
<div class="wrap">
<div class="hero">
<span class="badge">Semaine 28</span>
<h1>Veille Certibiocide</h1>
<p>Semaine du 06 au 12 juillet 2026 — Rapport de veille réglementaire et technique</p>
</div>
<div class="sommaire">
<h3>Sommaire</h3>
<div class="sommaire-links">
<a href="#reglementaire">⚖️ Réglementaire</a>
<a href="#formation">🎓 Marché formation</a>
<a href="#nuisibles">🐀 Nuisibles &amp; 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 &amp; Concurrence</a>
</div>
</div>
<div class="attention">
<h2>📌 Points d'attention</h2>
<ol>
<li><strong>Qualiopi désormais obligatoire pour le FAFCEA</strong> — depuis le 1er juillet 2026, la période transitoire est terminée : seuls les organismes certifiés Qualiopi peuvent être financés pour les formations destinées aux artisans.</li>
<li><strong>Nouveau règlement européen (UE) 2026/1165</strong> — entré en vigueur le 15 juin 2026, il prolonge jusqu'au 31/12/2030 la protection des données de certains dossiers de substances actives biocides : à intégrer dans les modules réglementaires BPR.</li>
<li><strong>Marchés publics 3D/4D actifs</strong> — plusieurs appels d'offres BOAMP en cours (Oise, Fos-sur-Mer, Carrières-sous-Poissy, Le Cannet) : fenêtre à surveiller pour des partenariats avec des prestataires en recherche de formation Certibiocide.</li>
</ol>
</div>
<div class="section" id="reglementaire">
<div class="section-header">⚖️ Réglementaire</div>
<div class="section-body">
<div class="news">
<span class="news-source">ANSES</span>
<p>Autorisation de mise sur le marché du produit biocide ZANZA SPRAY (n° AMM FR-2026-0040, signature du 18/06/2026). Publication au registre le 1er juillet 2026.</p>
<div class="news-meta"><em>01/07/2026</em> — <a href="https://www.anses.fr/fr/decisions_biocide" target="_blank" rel="noopener">Registre des AMM biocides — ANSES</a></div>
</div>
<div class="news">
<span class="news-source">ANSES</span>
<p>Retrait de plusieurs produits de traitement du bois (XILIX GEL BS, 18V33CP-PE, INDULINE SW-900 IT, TRAITEMENT BOIS EXTERIEUR NUANCE, V33 TRAITEMENT BOIS MULTI USAGES, XILIX 1000, XYL SGR 2002). Décisions signées le 15/06/2026, publiées le 24/06/2026.</p>
<div class="news-meta"><em>24/06/2026</em> — <a href="https://www.anses.fr/fr/decisions_biocide" target="_blank" rel="noopener">Registre des AMM biocides — ANSES</a></div>
</div>
<div class="news">
<span class="news-source">ANSES</span>
<p>Arrêté du 4 juin 2026 fixant les redevances biocides dues à l'ANSES pour toute demande déposée en France au titre du règlement (UE) 528/2012.</p>
<div class="news-meta"><em>04/06/2026</em> — <a href="https://www.anses.fr/fr/content/demarches-produits-biocides" target="_blank" rel="noopener">Démarches produits biocides — ANSES</a></div>
</div>
</div>
</div>
<div class="section" id="formation">
<div class="section-header">🎓 Marché formation</div>
<div class="section-body">
<div class="news">
<span class="news-source">FAFCEA</span>
<p>Depuis le 1er juillet 2026, seuls les organismes certifiés Qualiopi sont éligibles aux financements FAFCEA pour les formations destinées aux artisans. La période de transition s'est achevée le 30 juin 2026.</p>
<div class="news-meta"><em>01/07/2026</em> — <a 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>
<div class="news">
<span class="news-source">France Compétences</span>
<p>La révision du Référentiel National Qualité, socle de Qualiopi, entre dans sa phase finale : consultations en cours avec certificateurs et organismes de formation.</p>
<div class="news-meta"><em>2026</em> — <a href="https://fresh-management.fr/qualiopi-2026-changements-organisme-formation/" target="_blank" rel="noopener">Fresh Management</a></div>
</div>
<div class="note">⚠️ Aucune donnée chiffrée récente et vérifiée sur le CPF ou les OPCO EP n'a été trouvée cette semaine au-delà des statistiques 2024 déjà connues (~880 000 contrats d'apprentissage financés).</div>
</div>
</div>
<div class="section" id="nuisibles">
<div class="section-header">🐀 Nuisibles &amp; ESOD</div>
<div class="section-body">
<div class="news">
<span class="news-source">Veille sanitaire</span>
<p>Le moustique tigre est désormais implanté durablement dans 83 des 96 départements métropolitains (plus de 86 %), avec une progression des cas de dengue et de chikungunya à transmission locale.</p>
<div class="news-meta"><em>2026</em> — <a href="https://izipest.com/blog/top-3-especes-envahissantes-france-2026/" target="_blank" rel="noopener">IZIPest</a></div>
</div>
<div class="news">
<span class="news-source">Frelon asiatique</span>
<p>Un plan national de lutte contre le frelon asiatique et les autres espèces invasives a été lancé en mars 2026. Le frelon asiatique contribuerait à environ 20 % de la mortalité des colonies d'abeilles domestiques.</p>
<div class="news-meta"><em>mars 2026</em> — <a href="https://www.lyoncapitale.fr/actualite/lyon-la-guerre-contre-les-especes-invasives-aura-t-elle-lieu" target="_blank" rel="noopener">Lyon Capitale</a></div>
</div>
<div class="note">⚠️ Aucune donnée récente vérifiée via sources officielles (ANSES, INRAE) sur les rongeurs résistants aux anticoagulants cette semaine.</div>
</div>
</div>
<div class="section" id="desinfection">
<div class="section-header">🧴 Désinfection</div>
<div class="section-body">
<div class="news">
<span class="news-source">Certibiocide</span>
<p>Depuis le 1er janvier 2026, l'obtention du Certibiocide est obligatoire pour tout professionnel utilisant, achetant ou distribuant des produits biocides à usage professionnel. La formation dure 7 heures et le certificat est valable 5 ans.</p>
<div class="news-meta"><em>01/01/2026</em> — <a href="https://tbcformation.com/certibiocide-2026-nouveautes-reglementation-desinfection/" target="_blank" rel="noopener">TBC Formation</a></div>
</div>
<div class="news">
<span class="news-source">AFNOR</span>
<p>Le cadre normatif reste structuré autour de NF EN 14885 (produits biocides de désinfection), NF EN 14476 (activité virucide) et NF T72-281 (désinfection par voie aérienne). Aucune révision de ces normes n'a été identifiée cette semaine.</p>
<div class="news-meta"><em>2026</em> — <a href="https://norminfo.afnor.org/norme/NF%20U43-500/bonnes-pratiques-dapplication-des-produits-phytosanitaires-et-biocides-maitrise-des-applications-de-produits-phytosanitaires/79450" target="_blank" rel="noopener">AFNOR Norm'Info</a></div>
</div>
<div class="note">⚠️ Aucun nouveau produit homologué spécifique signalé cette semaine par les sources consultées.</div>
</div>
</div>
<div class="section" id="opportunites">
<div class="section-header">💡 Opportunités</div>
<div class="section-body">
<div class="news">
<span class="news-source">BOAMP — Oise</span>
<p>Marché de missions de dératisation, désinsectisation, désinfection et traitement spécifique sur les sites et le réseau routier du département de l'Oise. Notification de l'accord-cadre prévue en juillet 2026.</p>
<div class="news-meta"><em>juillet 2026</em> — <a href="https://www.francemarches.com/appel-offre/3boamp2616972-2026-missions-deratisation-desinsectisation" target="_blank" rel="noopener">France Marchés</a></div>
</div>
<div class="news">
<span class="news-source">BOAMP — Fos-sur-Mer</span>
<p>Marché de prestations de lutte contre les nuisibles sur la voirie et les bâtiments communaux, réparti en 2 lots. Date limite de remise des offres : 2 juillet 2026.</p>
<div class="news-meta"><em>02/07/2026</em> — <a href="https://www.francemarches.com/appel-offre/3boamp2651311-2026-prestations-lutte-contre" target="_blank" rel="noopener">France Marchés</a></div>
</div>
<div class="news">
<span class="news-source">BOAMP — Carrières-sous-Poissy</span>
<p>Marché de prestations anti-nuisibles 4D (dératisation, désinfection, désinsectisation, dépigeonnisation) actuellement en consultation.</p>
<div class="news-meta"><em>2026</em> — <a href="https://www.francemarches.com/appel-offre/3boamp2632494-2026-prestation-anti-nuisibles" target="_blank" rel="noopener">France Marchés</a></div>
</div>
</div>
</div>
<div class="section" id="innovation">
<div class="section-header">🔬 Innovation</div>
<div class="section-body">
<div class="news">
<span class="news-source">LIFE BioPest</span>
<p>Le projet européen LIFE BioPest (2024-2027) finance le développement de bioinsecticides à base de champignons entomopathogènes destinés à remplacer les pyréthrinoïdes en zone urbaine.</p>
<div class="news-meta"><em>2024-2027</em> — <a href="https://www.application-iot.fr/industrie-4-0/les-pieges-connectes-revolutionnent-la-gestion-des-nuisibles-dans-lindustrie-alimentaire/" target="_blank" rel="noopener">Application IoT</a></div>
</div>
<div class="news">
<span class="news-source">Groupe Berkem</span>
<p>Le piège connecté Novaterm® combine intelligence artificielle et superactivateur végétal pour la lutte antiparasitaire.</p>
<div class="news-meta"><em>2026</em> — <a href="https://www.hamelin.info/actus/deratisation/lutte-anti-nuisible-et-revolution-numerique/" target="_blank" rel="noopener">Hamelin</a></div>
</div>
<div class="news">
<span class="news-source">Anticimex</span>
<p>Déploiement de pièges connectés couplés à des plateformes de gestion de données (IA, IoT) dans l'industrie agroalimentaire, avec alertes en temps réel et anticipation des pics saisonniers.</p>
<div class="news-meta"><em>2026</em> — <a href="https://www.anticimex.fr/blog/lutte-nuisibles-connectee-ia-iot-data/" target="_blank" rel="noopener">Anticimex</a></div>
</div>
</div>
</div>
<div class="section" id="europe">
<div class="section-header">🇪🇺 Veille européenne</div>
<div class="section-body">
<div class="news">
<span class="news-source">Commission européenne</span>
<p>Le règlement (UE) 2026/1165, entré en vigueur le 15 juin 2026, modifie le BPR et prolonge la protection des données de certains dossiers de substances actives jusqu'au 31 décembre 2030, afin de compenser les retards du programme d'examen.</p>
<div class="news-meta"><em>15/06/2026</em> — <a href="https://www.cehtra.com/post/amendment-bpr-for-data-protection-extension-enters-into-force" target="_blank" rel="noopener">Cehtra</a></div>
</div>
<div class="news">
<span class="news-source">ECHA</span>
<p>Publication de mises à jour réglementaires concernant plusieurs substances actives biocides clés : cyperméthrine, DBNPA, certains libérateurs de formaldéhyde et éthanol.</p>
<div class="news-meta"><em>2026</em> — <a href="https://en.reach24h.com/news/industry-news/disinfectant-biocide/eu-brp-key-biocidal-active-substances-update" target="_blank" rel="noopener">REACH24H</a></div>
</div>
<div class="news">
<span class="news-source">Commission européenne</span>
<p>Une consultation publique européenne est ouverte pour évaluer les 12 années de mise en œuvre du règlement biocides (BPR), en vue d'une possible révision future.</p>
<div class="news-meta"><em>2026</em> — <a href="https://en.reach24h.com/news/industry-news/disinfectant-biocide/eu-bpr-evaluation-public-consultation" target="_blank" rel="noopener">REACH24H</a></div>
</div>
</div>
</div>
<div class="section" id="rh">
<div class="section-header">👥 RH &amp; Concurrence</div>
<div class="section-body">
<div class="news">
<span class="news-source">CS3D</span>
<p>Le CQP Technicien applicateur en maîtrise des nuisibles est inscrit au RNCP au niveau 3 (équivalent CAP). Le parcours dure 3 mois, incluant un stage de 3 semaines en entreprise et le Certibiocide.</p>
<div class="news-meta"><em>2026</em> — <a href="https://www.paritarisme-emploi-formation.fr/le-cqp-maitrise-des-nuisibles-professionnaliser" target="_blank" rel="noopener">Paritarisme Emploi Formation</a></div>
</div>
<div class="news">
<span class="news-source">Secteur 3D</span>
<p>Plus de 1 200 entreprises actives en France pour un chiffre d'affaires supérieur à 500 millions d'euros. Le secteur recrute en continu et propose fréquemment un CDI à l'issue du stage.</p>
<div class="news-meta"><em>2026</em> — <a href="https://www.hamelin.info/metier/environnement-de-travail/cqp-maitrise-des-nuisibles/" target="_blank" rel="noopener">Hamelin</a></div>
</div>
<div class="news">
<span class="news-source">Marché de l'emploi</span>
<p>Des offres de technicien 3D Certibiocide sont actives, notamment en Île-de-France (environ 1 752 € brut en CDD).</p>
<div class="news-meta"><em>11/06/2026</em> — <a href="https://fr.indeed.com/q-deratisation-3d-emplois.html" target="_blank" rel="noopener">Indeed</a></div>
</div>
</div>
</div>
</div>
<footer>
<p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p>Tous droits réservés - Formateurs indépendants</p>
</footer>
<script>
window.addEventListener('scroll', () => {
const scrolled = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
document.getElementById('progressBar').style.width = scrolled + '%';
});
</script>
</body>
</html>

4
veille/veille-index.html
View File

@@ -353,7 +353,7 @@
<!-- HEADER --> <!-- HEADER -->
<header> <header>
<div class="logo">NextGN Formation</div> <div class="logo">Gauthier Chombart & Nathan Chauwin</div>
<nav> <nav>
<a href="../../index.html">Exercices interactifs</a> <a href="../../index.html">Exercices interactifs</a>
<a href="../../index.html#documentation">Documentation</a> <a href="../../index.html#documentation">Documentation</a>
@@ -503,7 +503,7 @@
<!-- FOOTER --> <!-- FOOTER -->
<footer> <footer>
<p>&copy; 2026 NextGN Formation - Formations Certibiocide & Techniques</p> <p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p> <p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
</footer> </footer>