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

Compare commits

base: Gauthier:954c7d2b1a4663a77530c7afc3f69247c3e67296
Branches Tags
Gauthier:main Gauthier:exos-rework
..
compare: Gauthier:44be41b2b2352017fe72f84de1c4e024b4ad9c61
Branches Tags
Gauthier:main Gauthier:exos-rework

7 Commits
954c7d2b1a ... 44be41b2b2

Author SHA1 Message Date
gauthier.chombart
44be41b2b2 Renomme la marque en Gauthier Chombart & Nathan Chauwin et finalise le jeu Memory 
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.
 2026-07-14 23:02:09 +02:00
gauthier.chombart
9140d2f468 Harmonise le jeu Memory avec le style ambre du site et corrige le titre 
Le jeu utilisait le teal comme couleur dominante (titres, bordures,
boutons, cartes) alors que le reste du site n'emploie le teal que
ponctuellement (état de succès) et repose sur l'ambre comme couleur
principale. Remplace toutes les références teal par l'ambre déjà
défini dans header-style.css, et réaffecte le teal à son rôle habituel
de couleur de succès (paire trouvée), à la place du vert générique
utilisé jusqu'ici.

Renomme aussi le titre en "Memory pictogrammes", augmente la marge
sous le header pour éviter tout chevauchement, et ajoute un paramètre
de version aux feuilles de style du jeu pour éviter les soucis de
cache navigateur lors des prochaines mises à jour.
 2026-07-07 17:23:57 +02:00
gauthier.chombart
75c5a1ac84 Retire le pictogramme manette de l'en-tête du jeu 2026-07-07 17:14:22 +02:00
gauthier.chombart
1e757ccda8 Corrige le panneau "Vos statistiques" et compacte son affichage 
Deux règles CSS différentes partageaient le nom .player-stats (la
ligne de détails sous chaque joueur du classement, et tout le panneau
"Vos statistiques"). Le panneau héritait donc du display:flex prévu
pour la ligne de détails, ce qui empêchait la grille de stats de
prendre toute la largeur et l'affichait en une colonne étroite.

Renomme la ligne de détails en .rank-meta et aligne les 4 encadrés de
stats sur une seule rangée compacte sous le titre.
 2026-07-07 17:12:29 +02:00
gauthier.chombart
f7f73591c1 Ajoute la config du serveur de preview local 
Permet de lancer le site en local (python3 -m http.server) via l'outil
de preview.
 2026-07-07 17:08:08 +02:00
gauthier.chombart
cf69373417 Corrige la superposition header/contenu et harmonise le style du jeu Memory 
L'animation d'entrée (translation + rebond infini du badge) pouvait
faire chevaucher le header. Remplacée par une simple apparition sans
déplacement vertical, avec plus de marge sous le header.

Aligne aussi les rayons d'angle, les ombres et les boutons du jeu sur
le langage visuel déjà utilisé ailleurs sur le site (cartes à 12px de
rayon, ombres neutres, titre de section souligné, style de bouton
partagé depuis header-style.css).
 2026-07-07 17:06:09 +02:00
gauthier.chombart
2227aa89d5 Refonte visuelle du jeu Memory Pictogrammes GHS 
Corrige les pictogrammes cassés (mauvais noms de fichiers dans
utils.js) et le conflit de classe CSS .progress-bar avec le header
qui cassait la barre de progression du jeu. Réorganise l'interface
dans un panneau de jeu unifié, ajoute des icônes aux statistiques
et au sélecteur de difficulté, et rend le dos des cartes plus ludique.
 2026-07-07 16:58:40 +02:00
24 changed files with 926 additions and 472 deletions
Expand all files Collapse all files

11
.claude/launch.json Normal file
View File

@@ -0,0 +1,11 @@
{
"version": "0.0.1",
"configurations": [
{
"name": "static-site",
"runtimeExecutable": "python3",
"runtimeArgs": ["-m", "http.server", "8123"],
"port": 8123
}
]
}

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>

22
exercices/memory-pictogrammes/assets/css/animations.css
View File

@@ -44,15 +44,15 @@
@keyframes matchSuccess { @keyframes matchSuccess {
0% { 0% {
transform: scale(1); transform: scale(1);
filter: drop-shadow(0 0 0px rgba(76, 175, 80, 0.6)); filter: drop-shadow(0 0 0px rgba(29, 158, 117, 0.6));
} }
50% { 50% {
transform: scale(1.15) rotate(5deg); transform: scale(1.15) rotate(5deg);
filter: drop-shadow(0 0 12px rgba(76, 175, 80, 0.8)); filter: drop-shadow(0 0 12px rgba(29, 158, 117, 0.8));
} }
100% { 100% {
transform: scale(1); transform: scale(1);
filter: drop-shadow(0 0 0px rgba(76, 175, 80, 0)); filter: drop-shadow(0 0 0px rgba(29, 158, 117, 0));
} }
} }
@@ -101,14 +101,14 @@
/* Pulse Progress Bar */ /* Pulse Progress Bar */
@keyframes progressPulse { @keyframes progressPulse {
0%, 100% { 0%, 100% {
box-shadow: 0 0 8px rgba(29, 158, 117, 0.4); box-shadow: 0 0 8px rgba(186, 117, 23, 0.4);
} }
50% { 50% {
box-shadow: 0 0 24px rgba(29, 158, 117, 0.8); box-shadow: 0 0 24px rgba(186, 117, 23, 0.8);
} }
} }
.progress-bar.pulse { .game-progress-fill.pulse {
animation: progressPulse 0.6s ease-out; animation: progressPulse 0.6s ease-out;
} }
@@ -189,7 +189,7 @@
@keyframes statUpdate { @keyframes statUpdate {
0% { 0% {
transform: scale(0.8); transform: scale(0.8);
background: rgba(29, 158, 117, 0.2); background: rgba(186, 117, 23, 0.2);
} }
100% { 100% {
transform: scale(1); transform: scale(1);
@@ -255,10 +255,10 @@
/* Card glow hover */ /* Card glow hover */
@keyframes glowCard { @keyframes glowCard {
0% { 0% {
box-shadow: 0 0 0px rgba(29, 158, 117, 0); box-shadow: 0 0 0px rgba(186, 117, 23, 0);
} }
100% { 100% {
box-shadow: 0 0 16px rgba(29, 158, 117, 0.3); box-shadow: 0 0 16px rgba(186, 117, 23, 0.3);
} }
} }
@@ -281,10 +281,10 @@
/* Pulse button */ /* Pulse button */
@keyframes buttonPulse { @keyframes buttonPulse {
0%, 100% { 0%, 100% {
box-shadow: 0 0 0px rgba(29, 158, 117, 0.7); box-shadow: 0 0 0px rgba(186, 117, 23, 0.7);
} }
50% { 50% {
box-shadow: 0 0 16px rgba(29, 158, 117, 0.4); box-shadow: 0 0 16px rgba(186, 117, 23, 0.4);
} }
} }

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

@@ -7,15 +7,14 @@
============================================ */ ============================================ */
.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 {
background: linear-gradient(135deg, var(--teal-light), var(--white)); background: linear-gradient(135deg, var(--amber-light), var(--white));
border: 2px solid var(--teal-mid); border: 2px solid var(--amber-mid);
border-radius: 12px; border-radius: 12px;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
@@ -38,7 +37,7 @@
.stat-box:hover { .stat-box:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
border-color: var(--teal-dark); border-color: var(--amber-dark);
} }
.stat-box:hover::before { .stat-box:hover::before {
@@ -57,7 +56,7 @@
.stat-box .value { .stat-box .value {
font-size: 32px; font-size: 32px;
font-weight: 800; font-weight: 800;
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark)); background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
@@ -73,7 +72,7 @@
PROGRESS BAR (Paires trouvées) PROGRESS BAR (Paires trouvées)
============================================ */ ============================================ */
.progress-container { .progress-container {
background: var(--teal-light); background: var(--amber-light);
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
height: 12px; height: 12px;
@@ -82,14 +81,14 @@
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
.progress-bar { .game-progress-fill {
height: 100%; height: 100%;
background: linear-gradient(90deg, var(--teal-mid), var(--teal-dark)); background: linear-gradient(90deg, var(--amber-mid), var(--amber-dark));
width: 0%; width: 0%;
transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
} }
.progress-container.pulse .progress-bar { .progress-container.pulse .game-progress-fill {
animation: progressPulse 0.6s ease-out; animation: progressPulse 0.6s ease-out;
} }
@@ -148,15 +147,15 @@
} }
.modal-content { .modal-content {
background: linear-gradient(135deg, var(--white), var(--teal-light)); background: linear-gradient(135deg, var(--white), var(--amber-light));
border-radius: 24px; border-radius: 12px;
padding: 48px; padding: 48px;
max-width: 500px; max-width: 500px;
width: 100%; width: 100%;
text-align: center; text-align: center;
animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); animation: slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
border: 2px solid var(--teal-mid); border: 2px solid var(--amber-mid);
box-shadow: 0 32px 64px rgba(15, 110, 86, 0.3); box-shadow: 0 32px 64px rgba(186, 117, 23, 0.3);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@@ -177,7 +176,7 @@
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
font-size: 42px; font-size: 42px;
font-weight: 800; font-weight: 800;
color: var(--teal); color: var(--amber);
margin: 32px 0 12px; margin: 32px 0 12px;
position: relative; position: relative;
z-index: 1; z-index: 1;
@@ -186,7 +185,7 @@
.modal-content .score-display { .modal-content .score-display {
font-size: 64px; font-size: 64px;
font-weight: 800; font-weight: 800;
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark)); background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
@@ -203,10 +202,10 @@
} }
.stats-summary .stat { .stats-summary .stat {
background: var(--teal-light); background: var(--amber-light);
padding: 12px; padding: 12px;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--teal-mid); border: 1px solid var(--amber-mid);
animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
} }
@@ -217,7 +216,7 @@
.stats-summary .stat-value { .stats-summary .stat-value {
font-weight: 700; font-weight: 700;
color: var(--teal-dark); color: var(--amber-dark);
font-size: 16px; font-size: 16px;
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
} }
@@ -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: 16px;
padding: 40px;
text-align: center;
border: 2px solid var(--teal-mid);
animation: slideUp 0.4s ease-out;
}
.pause-content h2 {
font-family: 'Syne', sans-serif;
font-size: 32px;
color: var(--teal);
margin-bottom: 24px;
}
.pause-content .pause-timer {
font-size: 48px;
font-family: 'Syne', sans-serif;
font-weight: 800;
color: var(--teal-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
============================================ */ ============================================ */

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

@@ -2,18 +2,25 @@
LEADERBOARD & PLAYER STATS LEADERBOARD & PLAYER STATS
============================================ */ ============================================ */
.leaderboard-section { .leaderboard-panel {
margin-top: 80px; animation: fadeInUp 0.6s ease-out 0.6s both;
text-align: center;
}
.stats-panel {
animation: fadeInUp 0.6s ease-out 0.6s both; animation: fadeInUp 0.6s ease-out 0.6s both;
} }
.leaderboard-section h2 { .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;
color: var(--teal); letter-spacing: -0.5px;
margin-bottom: 24px; color: var(--text);
text-align: center; margin: 0 auto 24px;
padding-bottom: 12px;
border-bottom: 3px solid var(--amber-mid);
display: inline-block;
} }
/* ============================================ /* ============================================
@@ -30,7 +37,7 @@
.tab-btn { .tab-btn {
padding: 10px 20px; padding: 10px 20px;
background: var(--white); background: var(--white);
border: 2px solid var(--teal-light); border: 2px solid var(--amber-light);
border-radius: 8px; border-radius: 8px;
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
font-size: 12px; font-size: 12px;
@@ -43,13 +50,13 @@
} }
.tab-btn:hover { .tab-btn:hover {
border-color: var(--teal-mid); border-color: var(--amber-mid);
color: var(--teal-mid); color: var(--amber-mid);
} }
.tab-btn.active { .tab-btn.active {
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark)); background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
border-color: var(--teal-dark); border-color: var(--amber-dark);
color: var(--white); color: var(--white);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
@@ -58,12 +65,13 @@
LEADERBOARD LIST LEADERBOARD LIST
============================================ */ ============================================ */
.leaderboard { .leaderboard {
background: linear-gradient(135deg, var(--teal-light), var(--white)); background: linear-gradient(135deg, var(--amber-light), var(--white));
border-radius: 16px; border-radius: 12px;
padding: 24px; padding: 24px;
border: 2px solid var(--teal-mid); border: 2px solid var(--amber-mid);
margin-bottom: 48px; margin-bottom: 48px;
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
text-align: left;
} }
.leaderboard-list { .leaderboard-list {
@@ -73,19 +81,25 @@
} }
.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(--teal-light); border-left: 4px solid var(--amber-light);
position: relative; position: relative;
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;
@@ -93,14 +107,14 @@
left: -100%; left: -100%;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(29, 158, 117, 0.1), transparent); background: linear-gradient(90deg, transparent, rgba(186, 117, 23, 0.1), transparent);
transition: left 0.5s ease; transition: left 0.5s ease;
} }
.rank-item:hover { .rank-item:hover {
transform: translateX(8px); transform: translateX(8px);
box-shadow: 0 4px 12px rgba(15, 110, 86, 0.15); box-shadow: 0 4px 12px rgba(186, 117, 23, 0.15);
border-left-color: var(--teal-mid); border-left-color: var(--amber-mid);
} }
.rank-item:hover::before { .rank-item:hover::before {
@@ -111,35 +125,21 @@
.rank-number { .rank-number {
font-weight: 800; font-weight: 800;
font-size: 18px; font-size: 18px;
color: var(--teal-mid); color: var(--amber-mid);
text-align: center; text-align: center;
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 {
@@ -147,17 +147,20 @@
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;
} }
.player-stats { .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;
} }
.player-stats span { .rank-meta span {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
@@ -166,39 +169,11 @@
/* Score et difficulté */ /* Score et difficulté */
.rank-score { .rank-score {
font-weight: 700; font-weight: 700;
color: var(--teal-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(--teal-light);
color: var(--teal-dark);
min-width: 60px;
text-align: center;
}
.rank-difficulty.easy {
background: #C8E6C9;
color: #2E7D32;
}
.rank-difficulty.normal {
background: var(--teal-light);
color: var(--teal-dark);
}
.rank-difficulty.hard {
background: #FFCCBC;
color: #D84315;
} }
/* Message si pas de scores */ /* Message si pas de scores */
@@ -227,32 +202,32 @@
PLAYER STATS SECTION PLAYER STATS SECTION
============================================ */ ============================================ */
.player-stats { .player-stats {
background: linear-gradient(135deg, rgba(15, 110, 86, 0.05), transparent); background: linear-gradient(135deg, rgba(186, 117, 23, 0.05), transparent);
border-radius: 16px; border-radius: 12px;
padding: 32px; padding: 24px;
border: 2px solid var(--teal-light); border: 2px solid var(--amber-light);
} }
.player-stats h3 { .player-stats h3 {
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
font-size: 24px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: var(--teal); color: var(--amber);
margin-bottom: 24px; margin-bottom: 16px;
text-align: center; text-align: center;
} }
.stats-grid { .stats-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-template-columns: repeat(2, 1fr);
gap: 16px; gap: 12px;
} }
.stat-card { .stat-card {
background: var(--white); background: var(--white);
border: 2px solid var(--teal-light); border: 2px solid var(--amber-light);
border-radius: 12px; border-radius: 10px;
padding: 20px; padding: 14px 8px;
text-align: center; text-align: center;
transition: all 0.3s ease; transition: all 0.3s ease;
display: flex; display: flex;
@@ -263,27 +238,27 @@
.stat-card:hover { .stat-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
border-color: var(--teal-mid); border-color: var(--amber-mid);
} }
.stat-icon { .stat-icon {
font-size: 32px; font-size: 22px;
margin-bottom: 12px; margin-bottom: 6px;
} }
.stat-label { .stat-label {
font-size: 11px; font-size: 10px;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: var(--text-muted); color: var(--text-muted);
margin-bottom: 8px; margin-bottom: 4px;
} }
.stat-value { .stat-value {
font-size: 28px; font-size: 20px;
font-weight: 800; font-weight: 800;
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark)); background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text; background-clip: text;
@@ -291,7 +266,7 @@
} }
.stat-card.high-value .stat-value { .stat-card.high-value .stat-value {
font-size: 32px; font-size: 22px;
animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
} }
@@ -324,28 +299,19 @@
RESPONSIVE DESIGN RESPONSIVE DESIGN
============================================ */ ============================================ */
@media (max-width: 768px) { @media (max-width: 768px) {
.leaderboard-section h2 { .leaderboard-panel h2 {
font-size: 24px; font-size: 24px;
} }
.tabs { .tabs {
gap: 6px; gap: 6px;
} }
.tab-btn { .tab-btn {
padding: 8px 16px; padding: 8px 16px;
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;
} }
@@ -355,29 +321,29 @@
} }
.player-stats { .player-stats {
padding: 24px; padding: 20px;
} }
.player-stats h3 { .player-stats h3 {
font-size: 20px; font-size: 18px;
} }
.stats-grid { .stats-grid {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 12px; gap: 10px;
} }
.stat-card { .stat-card {
padding: 16px; padding: 14px 10px;
} }
.stat-icon { .stat-icon {
font-size: 28px;
margin-bottom: 8px;
}
.stat-value {
font-size: 24px; font-size: 24px;
margin-bottom: 6px;
}
.stat-value {
font-size: 22px;
} }
} }
@@ -397,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;
} }
@@ -419,24 +378,25 @@
.player-stats { .player-stats {
padding: 16px; padding: 16px;
} }
.player-stats h3 { .player-stats h3 {
font-size: 16px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.stat-card {
padding: 12px 8px;
}
.stat-icon {
font-size: 22px;
}
.stat-value {
font-size: 18px; font-size: 18px;
} }
.stats-grid {
grid-template-columns: 1fr;
}
.stat-card {
padding: 12px;
}
.stat-icon {
font-size: 24px;
}
.stat-value {
font-size: 20px;
}
} }

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

@@ -5,15 +5,15 @@
:root { :root {
/* Gamification Colors */ /* Gamification Colors */
--success: #4CAF50; --success: var(--teal-mid);
--warning: #FF9800; --warning: #FF9800;
--info: #2196F3; --info: #2196F3;
--accent: #FFD700; --accent: #FFD700;
/* Shadows */ /* Shadows (alignées sur le langage visuel du site) */
--shadow-sm: 0 4px 8px rgba(15, 110, 86, 0.1); --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
--shadow-md: 0 8px 16px rgba(15, 110, 86, 0.15); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 16px 32px rgba(15, 110, 86, 0.25); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);
} }
/* ============================================ /* ============================================
@@ -21,12 +21,12 @@
============================================ */ ============================================ */
main { main {
margin-top: 70px; margin-top: 70px;
padding: 40px; padding: 96px 40px 40px;
min-height: calc(100vh - 70px); min-height: calc(100vh - 70px);
} }
.game-container { .game-container {
max-width: 1200px; max-width: 1440px;
margin: 0 auto; margin: 0 auto;
} }
@@ -34,15 +34,16 @@ main {
INTRO SECTION INTRO SECTION
============================================ */ ============================================ */
.intro-section { .intro-section {
margin-bottom: 60px; margin-bottom: 48px;
animation: fadeInDown 0.6s ease-out; animation: fadeIn 0.6s ease-out;
text-align: center;
} }
.intro-section h1 { .intro-section h1 {
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
font-size: clamp(28px, 5vw, 48px); font-size: clamp(28px, 5vw, 44px);
font-weight: 800; font-weight: 800;
color: var(--teal); color: var(--amber);
margin-bottom: 8px; margin-bottom: 8px;
text-align: center; text-align: center;
} }
@@ -56,11 +57,10 @@ main {
} }
.intro-box { .intro-box {
background: linear-gradient(135deg, var(--teal-light), var(--white)); background: linear-gradient(135deg, var(--amber-light), var(--white));
border-left: 4px solid var(--teal-mid); border-left: 4px solid var(--amber-mid);
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
margin-bottom: 32px;
font-size: 0.95em; font-size: 0.95em;
color: var(--text-muted); color: var(--text-muted);
line-height: 1.6; line-height: 1.6;
@@ -70,93 +70,148 @@ 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 {
grid-area: game;
animation: fadeInUp 0.6s ease-out 0.3s both;
}
.game-panel {
background: var(--white);
border: 1px solid var(--border);
border-radius: 12px;
padding: clamp(20px, 4vw, 32px);
box-shadow: var(--shadow-sm);
}
/* ============================================ /* ============================================
DIFFICULTY SELECTOR DIFFICULTY SELECTOR
============================================ */ ============================================ */
.difficulty-selector { .difficulty-selector {
margin-bottom: 48px; text-align: left;
text-align: center; flex-shrink: 0;
animation: fadeInUp 0.6s ease-out 0.2s both;
} }
.difficulty-selector label { .difficulty-selector label {
display: block; display: block;
font-size: 14px; font-size: 12px;
font-weight: 600; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.1em;
color: var(--text-muted); color: var(--text-muted);
margin-bottom: 16px; margin-bottom: 14px;
} }
.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: 500px;
margin: 0 auto;
} }
.btn-difficulty { .btn-difficulty {
background: var(--white); background: var(--amber-light);
border: 2px solid var(--teal-light); background: linear-gradient(135deg, rgba(250, 238, 218, 0.5), transparent);
border-radius: 8px; border: 2px solid transparent;
padding: 16px 12px; border-radius: 12px;
padding: 14px 12px;
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 4px; gap: 2px;
} }
.btn-difficulty:hover { .btn-difficulty:hover {
border-color: var(--teal-mid); border-color: var(--amber-mid);
transform: translateY(-4px); transform: translateY(-3px);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
.btn-difficulty.active { .btn-difficulty.active {
background: linear-gradient(135deg, var(--teal-light), var(--white)); background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
border-color: var(--teal-mid); border-color: var(--amber-dark);
color: var(--teal); box-shadow: var(--shadow-md);
}
.btn-difficulty.active .btn-label,
.btn-difficulty.active .btn-desc {
color: var(--white);
}
.btn-icon {
font-size: 20px;
line-height: 1;
margin-bottom: 2px;
} }
.btn-label { .btn-label {
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
color: var(--teal); color: var(--amber);
} }
.btn-desc { .btn-desc {
font-size: 12px; font-size: 11px;
font-family: 'DM Sans', sans-serif; font-family: 'DM Sans', sans-serif;
color: var(--text-muted); color: var(--text-muted);
font-weight: 400; font-weight: 400;
} }
/* ============================================
GAME SECTION
============================================ */
.game-section {
margin-bottom: 80px;
animation: fadeInUp 0.6s ease-out 0.3s both;
}
/* ============================================ /* ============================================
GAME GRID & CARDS GAME GRID & CARDS
============================================ */ ============================================ */
.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 40px;
padding: 20px; padding: 20px;
background: linear-gradient(135deg, rgba(225, 245, 238, 0.4), transparent); background: linear-gradient(135deg, rgba(250, 238, 218, 0.4), transparent);
border-radius: 16px; border-radius: 12px;
border: 1px solid var(--teal-light); border: 1px solid var(--amber-light);
} }
/* MEMORY CARD STYLES */ /* MEMORY CARD STYLES */
@@ -188,16 +243,19 @@ main {
} }
.card-face.front { .card-face.front {
background: linear-gradient(135deg, var(--teal-light), var(--teal-light)); background:
border: 2px solid var(--teal-mid); radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.6), transparent 60%),
color: var(--teal-dark); linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
border: 2px solid var(--amber-dark);
color: var(--white);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
} }
.card-face.back { .card-face.back {
transform: rotateY(180deg); transform: rotateY(180deg);
background: linear-gradient(135deg, var(--white), var(--teal-light)); background: linear-gradient(135deg, var(--white), var(--amber-light));
border: 2px solid var(--teal-mid); border: 2px solid var(--amber-mid);
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
padding: 8px; padding: 8px;
@@ -246,7 +304,7 @@ main {
} }
.memory-card.matched .card-face.back { .memory-card.matched .card-face.back {
background: linear-gradient(135deg, var(--white), rgba(76, 175, 80, 0.2)); background: linear-gradient(135deg, var(--white), rgba(29, 158, 117, 0.2));
border-color: var(--success); border-color: var(--success);
} }
@@ -271,26 +329,16 @@ footer {
} }
/* ============================================ /* ============================================
BUTTONS BUTTONS (métriques héritées du style général du site)
============================================ */ ============================================ */
.btn { .btn {
font-family: 'Syne', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 12px 24px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
} }
.btn-primary { .btn-primary {
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark)); background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
color: var(--white); color: var(--white);
} }
@@ -301,27 +349,55 @@ footer {
.btn-secondary { .btn-secondary {
background: var(--white); background: var(--white);
border: 2px solid var(--teal-mid); border: 2px solid var(--amber-mid);
color: var(--teal-mid); color: var(--amber-mid);
} }
.btn-secondary:hover { .btn-secondary:hover {
background: var(--teal-light); background: var(--amber-light);
border-color: var(--teal-dark); border-color: var(--amber-dark);
} }
/* ============================================ /* ============================================
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: 20px; padding: 56px 20px 20px;
} }
.intro-section h1 { .intro-section h1 {
font-size: 28px; font-size: 28px;
} }
.game-grid { .game-grid {
gap: 12px; gap: 12px;
padding: 16px; padding: 16px;
@@ -345,9 +421,9 @@ footer {
@media (max-width: 480px) { @media (max-width: 480px) {
main { main {
padding: 16px; padding: 40px 16px 16px;
} }
.intro-section h1 { .intro-section h1 {
font-size: 24px; font-size: 24px;
} }

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;
} }
/** /**

13
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 ${medal}>${rankNumber}</div> <div class="rank-top">
<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="player-stats"> <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);

77
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,8 +127,7 @@ 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);
this.gameState.flipped.push(cardIndex); this.gameState.flipped.push(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,34 +439,13 @@ 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
*/ */
setupEventListeners() { setupEventListeners() {
// 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;
/**
* Demander le nom du joueur à la première partie
*/
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', () => { document.addEventListener('DOMContentLoaded', () => {
// Initialiser le jeu
game = new MemoryGameEngine('normal');
// 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();

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

@@ -9,7 +9,7 @@ const PICTOGRAMMES = [
{ {
id: 1, id: 1,
nom: "Gaz comprimé", nom: "Gaz comprimé",
filename: "1-gaz-comprime.png", filename: "sous_pression.jpg",
texte: "Je suis sous pression", texte: "Je suis sous pression",
danger: "Danger physique", danger: "Danger physique",
couleur: "teal" couleur: "teal"
@@ -17,15 +17,15 @@ const PICTOGRAMMES = [
{ {
id: 2, id: 2,
nom: "Exclamation", nom: "Exclamation",
filename: "2-exclamation.png", 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"
}, },
{ {
id: 3, id: 3,
nom: "Explosion", nom: "Explosion",
filename: "3-explosion.png", filename: "explosif.jpg",
texte: "J'explose", texte: "J'explose",
danger: "Danger physique", danger: "Danger physique",
couleur: "teal" couleur: "teal"
@@ -33,7 +33,7 @@ const PICTOGRAMMES = [
{ {
id: 4, id: 4,
nom: "Crâne", nom: "Crâne",
filename: "4-crane.png", filename: "toxicite_aigue.jpg",
texte: "Je tue", texte: "Je tue",
danger: "Danger physique", danger: "Danger physique",
couleur: "teal" couleur: "teal"
@@ -41,7 +41,7 @@ const PICTOGRAMMES = [
{ {
id: 5, id: 5,
nom: "Flamme", nom: "Flamme",
filename: "5-flamme.png", filename: "inflammable.jpg",
texte: "Je flambe", texte: "Je flambe",
danger: "Danger physique", danger: "Danger physique",
couleur: "teal" couleur: "teal"
@@ -49,7 +49,7 @@ const PICTOGRAMMES = [
{ {
id: 6, id: 6,
nom: "Comburant", nom: "Comburant",
filename: "6-comburant.png", filename: "comburant.jpg",
texte: "Je fais flamber", texte: "Je fais flamber",
danger: "Danger physique", danger: "Danger physique",
couleur: "teal" couleur: "teal"
@@ -57,7 +57,7 @@ const PICTOGRAMMES = [
{ {
id: 7, id: 7,
nom: "Environnement", nom: "Environnement",
filename: "7-environnement.png", filename: "pollution.jpg",
texte: "Je pollue", texte: "Je pollue",
danger: "Danger pour l'environnement", danger: "Danger pour l'environnement",
couleur: "teal" couleur: "teal"
@@ -65,17 +65,17 @@ const PICTOGRAMMES = [
{ {
id: 8, id: 8,
nom: "Corrosion", nom: "Corrosion",
filename: "8-corrosion.png", filename: "corrosif.jpg",
texte: "Je ronge", texte: "Je ronge",
danger: "Danger physique", danger: "Danger physique",
couleur: "teal" couleur: "teal"
}, },
{ {
id: 9, id: 9,
nom: "Santé/Environnement", nom: "Santé (CMR)",
filename: "9-sante-environnement.png", 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"
} }
]; ];

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

@@ -3,20 +3,20 @@
<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 -->
<link rel="stylesheet" href="../../header-style.css"/> <link rel="stylesheet" href="../../header-style.css"/>
<link rel="stylesheet" href="assets/css/memory-game.css"> <link rel="stylesheet" href="assets/css/memory-game.css?v=3">
<link rel="stylesheet" href="assets/css/hud.css"> <link rel="stylesheet" href="assets/css/hud.css?v=3">
<link rel="stylesheet" href="assets/css/animations.css"> <link rel="stylesheet" href="assets/css/animations.css?v=3">
<link rel="stylesheet" href="assets/css/leaderboard.css"> <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>
@@ -36,125 +36,158 @@
<main class="game-container"> <main class="game-container">
<!-- INTRO SECTION --> <!-- INTRO SECTION -->
<section class="intro-section"> <section class="intro-section">
<h1>🎮 Memory Pictogrammes GHS</h1> <h1>Memory pictogrammes</h1>
<p class="subtitle">Maîtrisez les 9 symboles de danger</p> <p class="subtitle">Maîtrisez les 9 symboles de danger</p>
<div class="intro-box"> <div class="intro-box">
<p> <p>
<strong>Objectif :</strong> Retrouvez les paires en associant chaque pictogramme à sa signification. <strong>Objectif :</strong> Retrouvez les paires en associant chaque pictogramme à sa signification.
Plus rapide vous êtes, plus de points vous gagnez! 🏆 Plus rapide vous êtes, plus de points vous gagnez! 🏆
</p> </p>
</div> </div>
</section>
<!-- TOP BAR (niveau + stats en temps réel) -->
<div class="game-top-bar">
<!-- DIFFICULTY SELECTOR --> <!-- DIFFICULTY SELECTOR -->
<div class="difficulty-selector"> <div class="difficulty-selector">
<label>Choisir le niveau :</label> <label>Choisir le niveau</label>
<div class="btn-group"> <div class="btn-group">
<button class="btn btn-difficulty" data-difficulty="easy"> <button class="btn btn-difficulty" data-difficulty="easy">
<span class="btn-icon">🌱</span>
<span class="btn-label">Facile</span> <span class="btn-label">Facile</span>
<span class="btn-desc">4 paires</span> <span class="btn-desc">4 paires</span>
</button> </button>
<button class="btn btn-difficulty active" data-difficulty="normal"> <button class="btn btn-difficulty active" data-difficulty="normal">
<span class="btn-icon">🎯</span>
<span class="btn-label">Normal</span> <span class="btn-label">Normal</span>
<span class="btn-desc">9 paires</span> <span class="btn-desc">9 paires</span>
</button> </button>
<button class="btn btn-difficulty" data-difficulty="hard"> <button class="btn btn-difficulty" data-difficulty="hard">
<span class="btn-icon">🔥</span>
<span class="btn-label">Difficile</span> <span class="btn-label">Difficile</span>
<span class="btn-desc">2 min chrono</span> <span class="btn-desc">2 min chrono</span>
</button> </button>
</div> </div>
</div> </div>
</section>
<!-- GAME SECTION -->
<section class="game-section">
<!-- HUD (Stats en temps réel) --> <!-- HUD (Stats en temps réel) -->
<div class="game-hud"> <div class="game-hud">
<div class="stat-box"> <div class="stat-box">
<div class="label">Score</div> <div class="label">🏆 Score</div>
<div class="value" id="score-display">0</div> <div class="value" id="score-display">0</div>
</div> </div>
<div class="stat-box"> <div class="stat-box">
<div class="label">Mouvements</div> <div class="label">👆 Mouvements</div>
<div class="value" id="moves-display">0</div> <div class="value" id="moves-display">0</div>
</div> </div>
<div class="stat-box"> <div class="stat-box">
<div class="label">Temps</div> <div class="label">⏱ Temps</div>
<div class="value" id="timer-display">00:00</div> <div class="value" id="timer-display">00:00</div>
</div> </div>
<div class="stat-box"> <div class="stat-box">
<div class="label">Paires</div> <div class="label">🧩 Paires</div>
<div class="value" id="pairs-display">0/9</div> <div class="value" id="pairs-display">0/9</div>
</div> </div>
</div> </div>
</div>
<!-- PROGRESS BAR --> <!-- GAME LAYOUT (classement / jeu / statistiques) -->
<div class="progress-container"> <div class="game-layout">
<div class="progress-bar" id="progress-bar"></div> <!-- LEADERBOARD PANEL (gauche) -->
</div> <aside class="leaderboard-panel">
<h2>🏆 Classement</h2>
<!-- GAME GRID --> <div class="tabs">
<div class="game-grid" id="game-grid"> <button class="tab-btn active" data-filter="all">Tous</button>
<!-- Cartes générées par JS --> <button class="tab-btn" data-filter="easy">Facile</button>
</div> <button class="tab-btn" data-filter="normal">Normal</button>
<button class="tab-btn" data-filter="hard">Difficile</button>
<!-- CONTROLS -->
<div class="game-controls">
<button class="btn btn-primary" id="restart-btn">
🔄 Recommencer
</button>
<button class="btn btn-secondary" id="pause-btn">
⏸ Pause
</button>
</div>
</section>
<!-- LEADERBOARD SECTION -->
<section class="leaderboard-section">
<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>
</div>
<!-- PLAYER STATS --> <div class="leaderboard">
<div class="player-stats"> <div class="leaderboard-list" id="leaderboard-list">
<h3>Vos statistiques</h3> <!-- Rempli par JS -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon">🎮</div>
<div class="stat-label">Jeux joués</div>
<div class="stat-value" id="total-games">0</div>
</div>
<div class="stat-card">
<div class="stat-icon">⭐</div>
<div class="stat-label">Meilleur score</div>
<div class="stat-value" id="best-score">0</div>
</div>
<div class="stat-card">
<div class="stat-icon">⚡</div>
<div class="stat-label">Temps record</div>
<div class="stat-value" id="best-time">--</div>
</div>
<div class="stat-card">
<div class="stat-icon">🏅</div>
<div class="stat-label">Taux de réussite</div>
<div class="stat-value" id="win-rate">0%</div>
</div> </div>
</div> </div>
</div> </aside>
</section>
<!-- GAME SECTION (centre) -->
<section class="game-section">
<div class="game-panel">
<!-- PROGRESS BAR -->
<div class="progress-container">
<div class="game-progress-fill" id="progress-bar"></div>
</div>
<!-- GAME GRID -->
<div class="game-grid" id="game-grid">
<!-- Cartes générées par JS -->
</div>
<!-- CONTROLS -->
<div class="game-controls">
<button class="btn btn-primary" id="restart-btn">
🔄 Recommencer
</button>
</div>
</div>
</section>
<!-- PLAYER STATS PANEL (droite) -->
<aside class="stats-panel">
<div class="player-stats">
<h3>Vos statistiques</h3>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon">🎮</div>
<div class="stat-label">Jeux joués</div>
<div class="stat-value" id="total-games">0</div>
</div>
<div class="stat-card">
<div class="stat-icon">⭐</div>
<div class="stat-label">Meilleur score</div>
<div class="stat-value" id="best-score">0</div>
</div>
<div class="stat-card">
<div class="stat-icon">⚡</div>
<div class="stat-label">Temps record</div>
<div class="stat-value" id="best-time">--</div>
</div>
<div class="stat-card">
<div class="stat-icon">🏅</div>
<div class="stat-label">Taux de réussite</div>
<div class="stat-value" id="win-rate">0%</div>
</div>
</div>
</div>
</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">
@@ -196,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>