mise à jour des articles
This commit is contained in:
@@ -1,158 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Index Documentation Technique & Biologie | NextGN Formation</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../header-style.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="progress">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
<nav class="nav-header">
|
||||
<a href="index.html" class="header-logo">
|
||||
<span>NextGN</span> Formation
|
||||
</a>
|
||||
<div class="header-nav">
|
||||
<a href="index.html#formations">Exercices interactifs</a>
|
||||
<a href="index.html#documentation">Documentation</a>
|
||||
<a href="index.html#about">À propos</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>Index Documentation</h1>
|
||||
<p class="hero-subtitle">Explorez notre base de connaissances complète : études biologiques, analyses techniques, biocides et réglementation.</p>
|
||||
|
||||
<div class="search-container">
|
||||
<div class="search-bar">
|
||||
<input
|
||||
type="text"
|
||||
id="searchInput"
|
||||
placeholder="Rechercher par mot-clé ou tag..."
|
||||
autocomplete="off"
|
||||
>
|
||||
<span class="search-icon">🔍</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="documentation-container">
|
||||
<div class="section-header">
|
||||
<h2>Pages de Documentation</h2>
|
||||
<p>Accédez à l'ensemble de nos ressources pédagogiques, analyses scientifiques et rapports techniques.</p>
|
||||
</div>
|
||||
|
||||
<div class="doc-grid" id="docGrid">
|
||||
<!-- Cards seront insérées ici par JavaScript -->
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 NextGN Formation - Index Documentation Technique & Biologie</p>
|
||||
<p>Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Base de données de documentation
|
||||
const documentationPages = [
|
||||
{
|
||||
title: "Frelon asiatique (Vespa velutina nigrithorax) — Invasion de France",
|
||||
subtitle: "Analyse évolutive 2004–2026",
|
||||
icon: "🐝",
|
||||
description: "Étude complète de l'invasion du frelon asiatique en France. Données scientifiques, cartographie de l'expansion, impacts écologiques et stratégies de lutte validées par le MNHN et le CNRS.",
|
||||
tags: ["Vespa velutina", "Entomologie", "Nuisibles invasifs", "Cartographie", "MNHN", "France", "Biodiversité", "Écologie"],
|
||||
url: "frelon_asiatique_evolution.html"
|
||||
}
|
||||
// Les pages suivantes seront ajoutées au fur et à mesure
|
||||
];
|
||||
|
||||
// Fonction de recherche
|
||||
function filterDocumentation() {
|
||||
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
||||
const docCards = document.querySelectorAll('.doc-card');
|
||||
let visibleCount = 0;
|
||||
|
||||
docCards.forEach(card => {
|
||||
const title = card.querySelector('.doc-title').textContent.toLowerCase();
|
||||
const description = card.querySelector('.doc-description').textContent.toLowerCase();
|
||||
const tags = Array.from(card.querySelectorAll('.doc-tag')).map(t => t.textContent.toLowerCase());
|
||||
|
||||
const matches = searchTerm === '' ||
|
||||
title.includes(searchTerm) ||
|
||||
description.includes(searchTerm) ||
|
||||
tags.some(tag => tag.includes(searchTerm));
|
||||
|
||||
if (matches) {
|
||||
card.classList.remove('hidden');
|
||||
visibleCount++;
|
||||
} else {
|
||||
card.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Afficher ou masquer le message "aucun résultat"
|
||||
let noResultsDiv = document.querySelector('.no-results');
|
||||
if (visibleCount === 0) {
|
||||
if (!noResultsDiv) {
|
||||
noResultsDiv = document.createElement('div');
|
||||
noResultsDiv.className = 'no-results';
|
||||
noResultsDiv.innerHTML = `
|
||||
<div class="no-results-icon">🔍</div>
|
||||
<h3>Aucun résultat trouvé</h3>
|
||||
<p>Essayez une autre recherche ou parcourez toutes les pages de documentation.</p>
|
||||
`;
|
||||
document.getElementById('docGrid').appendChild(noResultsDiv);
|
||||
}
|
||||
} else if (noResultsDiv) {
|
||||
noResultsDiv.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Fonction pour rendre les cartes
|
||||
function renderDocumentation() {
|
||||
const docGrid = document.getElementById('docGrid');
|
||||
docGrid.innerHTML = '';
|
||||
|
||||
documentationPages.forEach(page => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'doc-card';
|
||||
card.innerHTML = `
|
||||
<div class="doc-header">
|
||||
<div class="doc-icon">${page.icon}</div>
|
||||
<h3 class="doc-title">${page.title}</h3>
|
||||
<p class="doc-subtitle">${page.subtitle}</p>
|
||||
</div>
|
||||
<div class="doc-body">
|
||||
<p class="doc-description">${page.description}</p>
|
||||
<div class="doc-tags">
|
||||
${page.tags.map(tag => `<span class="doc-tag">${tag}</span>`).join('')}
|
||||
</div>
|
||||
<a href="${page.url}" class="doc-link">Consulter l'étude →</a>
|
||||
</div>
|
||||
`;
|
||||
docGrid.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
// Initialisation
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
renderDocumentation();
|
||||
document.getElementById('searchInput').addEventListener('input', filterDocumentation);
|
||||
});
|
||||
|
||||
// Progress bar
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollPercentage = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
|
||||
document.querySelector('.progress-bar').style.width = scrollPercentage + '%';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,159 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Index Documentation Technique & Biologie | NextGN Formation</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../header-style.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="progress">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
<nav class="nav-header">
|
||||
<a href="../index.html" class="header-logo">
|
||||
<span>NextGN</span> Formation
|
||||
</a>
|
||||
<a href="../index.html">Accueil</a>
|
||||
<div class="header-nav">
|
||||
<a href="../index.html#formations">Exercices</a>
|
||||
<a href="../index.html#documentation">Documentation</a>
|
||||
<a href="../index.html#about">À propos</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>Index Documentation</h1>
|
||||
<p class="hero-subtitle">Explorez notre base de connaissances complète : études biologiques, analyses techniques, biocides et réglementation.</p>
|
||||
|
||||
<div class="search-container">
|
||||
<div class="search-bar">
|
||||
<input
|
||||
type="text"
|
||||
id="searchInput"
|
||||
placeholder="Rechercher par mot-clé ou tag..."
|
||||
autocomplete="off"
|
||||
>
|
||||
<span class="search-icon">🔍</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="documentation-container">
|
||||
<div class="section-header">
|
||||
<h2>Pages de Documentation</h2>
|
||||
<p>Accédez à l'ensemble de nos ressources pédagogiques, analyses scientifiques et rapports techniques.</p>
|
||||
</div>
|
||||
|
||||
<div class="doc-grid" id="docGrid">
|
||||
<!-- Cards seront insérées ici par JavaScript -->
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 NextGN Formation - Formations Certibiocide & Techniques</p>
|
||||
<p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Base de données de documentation
|
||||
const documentationPages = [
|
||||
{
|
||||
title: "Frelon asiatique (Vespa velutina nigrithorax) — Invasion de France",
|
||||
subtitle: "Analyse évolutive 2004–2026",
|
||||
icon: "🐝",
|
||||
description: "Étude complète de l'invasion du frelon asiatique en France. Données scientifiques, cartographie de l'expansion, impacts écologiques et stratégies de lutte validées par le MNHN et le CNRS.",
|
||||
tags: ["Vespa velutina", "Entomologie", "Nuisibles invasifs", "Cartographie", "MNHN", "France", "Biodiversité", "Écologie"],
|
||||
url: "frelon_asiatique_evolution.html"
|
||||
}
|
||||
// Les pages suivantes seront ajoutées au fur et à mesure
|
||||
];
|
||||
|
||||
// Fonction de recherche
|
||||
function filterDocumentation() {
|
||||
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
||||
const docCards = document.querySelectorAll('.doc-card');
|
||||
let visibleCount = 0;
|
||||
|
||||
docCards.forEach(card => {
|
||||
const title = card.querySelector('.doc-title').textContent.toLowerCase();
|
||||
const description = card.querySelector('.doc-description').textContent.toLowerCase();
|
||||
const tags = Array.from(card.querySelectorAll('.doc-tag')).map(t => t.textContent.toLowerCase());
|
||||
|
||||
const matches = searchTerm === '' ||
|
||||
title.includes(searchTerm) ||
|
||||
description.includes(searchTerm) ||
|
||||
tags.some(tag => tag.includes(searchTerm));
|
||||
|
||||
if (matches) {
|
||||
card.classList.remove('hidden');
|
||||
visibleCount++;
|
||||
} else {
|
||||
card.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Afficher ou masquer le message "aucun résultat"
|
||||
let noResultsDiv = document.querySelector('.no-results');
|
||||
if (visibleCount === 0) {
|
||||
if (!noResultsDiv) {
|
||||
noResultsDiv = document.createElement('div');
|
||||
noResultsDiv.className = 'no-results';
|
||||
noResultsDiv.innerHTML = `
|
||||
<div class="no-results-icon">🔍</div>
|
||||
<h3>Aucun résultat trouvé</h3>
|
||||
<p>Essayez une autre recherche ou parcourez toutes les pages de documentation.</p>
|
||||
`;
|
||||
document.getElementById('docGrid').appendChild(noResultsDiv);
|
||||
}
|
||||
} else if (noResultsDiv) {
|
||||
noResultsDiv.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Fonction pour rendre les cartes
|
||||
function renderDocumentation() {
|
||||
const docGrid = document.getElementById('docGrid');
|
||||
docGrid.innerHTML = '';
|
||||
|
||||
documentationPages.forEach(page => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'doc-card';
|
||||
card.innerHTML = `
|
||||
<div class="doc-header">
|
||||
<div class="doc-icon">${page.icon}</div>
|
||||
<h3 class="doc-title">${page.title}</h3>
|
||||
<p class="doc-subtitle">${page.subtitle}</p>
|
||||
</div>
|
||||
<div class="doc-body">
|
||||
<p class="doc-description">${page.description}</p>
|
||||
<div class="doc-tags">
|
||||
${page.tags.map(tag => `<span class="doc-tag">${tag}</span>`).join('')}
|
||||
</div>
|
||||
<a href="${page.url}" class="doc-link">Consulter l'étude →</a>
|
||||
</div>
|
||||
`;
|
||||
docGrid.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
// Initialisation
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
renderDocumentation();
|
||||
document.getElementById('searchInput').addEventListener('input', filterDocumentation);
|
||||
});
|
||||
|
||||
// Progress bar
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollPercentage = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
|
||||
document.querySelector('.progress-bar').style.width = scrollPercentage + '%';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,650 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Index Documentation Technique & Biologie | NextGN Formation</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--teal: #0F6E56;
|
||||
--teal-mid: #1D9E75;
|
||||
--teal-light: #E1F5EE;
|
||||
--teal-dark: #085041;
|
||||
--amber: #BA7517;
|
||||
--amber-mid: #D4921A;
|
||||
--amber-light: #FAEEDA;
|
||||
--amber-dark: #633806;
|
||||
--coral: #993C1D;
|
||||
--coral-mid: #D85A30;
|
||||
--coral-light: #FAECE7;
|
||||
--purple: #534AB7;
|
||||
--purple-light: #EEEDFE;
|
||||
--purple-dark: #3C3489;
|
||||
--blue: #185FA5;
|
||||
--blue-light: #E6F1FB;
|
||||
--bg: #F7F6F2;
|
||||
--white: #FFFFFF;
|
||||
--text: #1a1a18;
|
||||
--text-muted: #6b6a65;
|
||||
--border: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* HEADER FIXE */
|
||||
nav.nav-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 70px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 40px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.02em;
|
||||
background: linear-gradient(135deg, var(--amber) 0%, var(--coral-mid) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.header-logo span {
|
||||
color: var(--amber);
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-nav a {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-nav a:hover {
|
||||
color: var(--amber-mid);
|
||||
}
|
||||
|
||||
.header-nav a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--amber-mid);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.header-nav a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* PROGRESS BAR */
|
||||
.progress {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--border);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: var(--amber-mid);
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* MAIN CONTENT */
|
||||
main {
|
||||
padding-top: 70px;
|
||||
min-height: calc(100vh - 70px);
|
||||
}
|
||||
|
||||
/* HERO SECTION */
|
||||
.hero {
|
||||
position: relative;
|
||||
padding: 80px 40px 100px;
|
||||
background: linear-gradient(135deg, rgba(186, 117, 23, 0.05) 0%, rgba(212, 146, 26, 0.03) 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -10%;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, var(--amber-light) 0%, transparent 70%);
|
||||
opacity: 0.4;
|
||||
border-radius: 50%;
|
||||
animation: float 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -30%;
|
||||
left: -5%;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, var(--amber-light) 0%, transparent 70%);
|
||||
opacity: 0.3;
|
||||
border-radius: 50%;
|
||||
animation: float-reverse 25s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-30px); }
|
||||
}
|
||||
|
||||
@keyframes float-reverse {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(30px); }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
animation: slideUp 0.8s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 56px;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: -1px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 18px;
|
||||
color: var(--text-muted);
|
||||
max-width: 700px;
|
||||
margin: 0 auto 50px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* SEARCH BAR */
|
||||
.search-container {
|
||||
max-width: 700px;
|
||||
margin: 0 auto 40px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--white);
|
||||
border: 2px solid var(--amber-light);
|
||||
border-radius: 12px;
|
||||
padding: 15px 20px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(186, 117, 23, 0.1);
|
||||
}
|
||||
|
||||
.search-bar:focus-within {
|
||||
border-color: var(--amber-mid);
|
||||
box-shadow: 0 8px 24px rgba(186, 117, 23, 0.2);
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-size: 16px;
|
||||
color: var(--text);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.search-bar input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
color: var(--amber-mid);
|
||||
font-size: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* DOCUMENTATION GRID */
|
||||
.documentation-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px 80px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 50px;
|
||||
animation: fadeIn 0.6s ease-out 0.1s both;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 15px;
|
||||
color: var(--text);
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 3px solid var(--amber-mid);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section-header p {
|
||||
font-size: 16px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.7;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
/* DOC CARDS GRID */
|
||||
.doc-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.doc-card {
|
||||
background: var(--white);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--border);
|
||||
animation: fadeIn 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.doc-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.doc-card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.doc-card:nth-child(3) { animation-delay: 0.3s; }
|
||||
.doc-card:nth-child(n+4) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.doc-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 16px 32px rgba(186, 117, 23, 0.15);
|
||||
border-color: var(--amber-light);
|
||||
}
|
||||
|
||||
.doc-card.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.doc-header {
|
||||
padding: 25px;
|
||||
background: linear-gradient(135deg, var(--amber-light) 0%, rgba(212, 146, 26, 0.05) 100%);
|
||||
border-bottom: 2px solid var(--amber-mid);
|
||||
}
|
||||
|
||||
.doc-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.doc-subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--amber-mid);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.doc-body {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.doc-description {
|
||||
font-size: 15px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.doc-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.doc-tag {
|
||||
display: inline-block;
|
||||
background: var(--amber-light);
|
||||
color: var(--amber-dark);
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.doc-link {
|
||||
display: inline-block;
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--amber-mid);
|
||||
text-decoration: none;
|
||||
padding: 10px 0;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.doc-link:hover {
|
||||
border-bottom-color: var(--amber-mid);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* NO RESULTS */
|
||||
.no-results {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.no-results-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.no-results h3 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.no-results p {
|
||||
color: var(--text-muted);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
footer {
|
||||
background: var(--text);
|
||||
color: var(--white);
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
footer p:first-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
footer p:last-child {
|
||||
opacity: 0.6;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
.nav-header {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 60px 20px 80px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.documentation-container {
|
||||
padding: 0 20px 60px;
|
||||
}
|
||||
|
||||
.doc-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="progress">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
<nav class="nav-header">
|
||||
<a href="index.html" class="header-logo">
|
||||
<span>NextGN</span> Formation
|
||||
</a>
|
||||
<div class="header-nav">
|
||||
<a href="index.html#formations">Exercices interactifs</a>
|
||||
<a href="index.html#documentation">Documentation</a>
|
||||
<a href="index.html#about">À propos</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>Index Documentation</h1>
|
||||
<p class="hero-subtitle">Explorez notre base de connaissances complète : études biologiques, analyses techniques, biocides et réglementation.</p>
|
||||
|
||||
<div class="search-container">
|
||||
<div class="search-bar">
|
||||
<input
|
||||
type="text"
|
||||
id="searchInput"
|
||||
placeholder="Rechercher par mot-clé ou tag..."
|
||||
autocomplete="off"
|
||||
>
|
||||
<span class="search-icon">🔍</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="documentation-container">
|
||||
<div class="section-header">
|
||||
<h2>Pages de Documentation</h2>
|
||||
<p>Accédez à l'ensemble de nos ressources pédagogiques, analyses scientifiques et rapports techniques.</p>
|
||||
</div>
|
||||
|
||||
<div class="doc-grid" id="docGrid">
|
||||
<!-- Cards seront insérées ici par JavaScript -->
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 NextGN Formation - Index Documentation Technique & Biologie</p>
|
||||
<p>Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Base de données de documentation
|
||||
const documentationPages = [
|
||||
{
|
||||
title: "Frelon asiatique (Vespa velutina nigrithorax) — Invasion de France",
|
||||
subtitle: "Analyse évolutive 2004–2026",
|
||||
icon: "🐝",
|
||||
description: "Étude complète de l'invasion du frelon asiatique en France. Données scientifiques, cartographie de l'expansion, impacts écologiques et stratégies de lutte validées par le MNHN et le CNRS.",
|
||||
tags: ["Vespa velutina", "Entomologie", "Nuisibles invasifs", "Cartographie", "MNHN", "France", "Biodiversité", "Écologie"],
|
||||
url: "frelon_asiatique_evolution.html"
|
||||
}
|
||||
// Les pages suivantes seront ajoutées au fur et à mesure
|
||||
];
|
||||
|
||||
// Fonction de recherche
|
||||
function filterDocumentation() {
|
||||
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
||||
const docCards = document.querySelectorAll('.doc-card');
|
||||
let visibleCount = 0;
|
||||
|
||||
docCards.forEach(card => {
|
||||
const title = card.querySelector('.doc-title').textContent.toLowerCase();
|
||||
const description = card.querySelector('.doc-description').textContent.toLowerCase();
|
||||
const tags = Array.from(card.querySelectorAll('.doc-tag')).map(t => t.textContent.toLowerCase());
|
||||
|
||||
const matches = searchTerm === '' ||
|
||||
title.includes(searchTerm) ||
|
||||
description.includes(searchTerm) ||
|
||||
tags.some(tag => tag.includes(searchTerm));
|
||||
|
||||
if (matches) {
|
||||
card.classList.remove('hidden');
|
||||
visibleCount++;
|
||||
} else {
|
||||
card.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Afficher ou masquer le message "aucun résultat"
|
||||
let noResultsDiv = document.querySelector('.no-results');
|
||||
if (visibleCount === 0) {
|
||||
if (!noResultsDiv) {
|
||||
noResultsDiv = document.createElement('div');
|
||||
noResultsDiv.className = 'no-results';
|
||||
noResultsDiv.innerHTML = `
|
||||
<div class="no-results-icon">🔍</div>
|
||||
<h3>Aucun résultat trouvé</h3>
|
||||
<p>Essayez une autre recherche ou parcourez toutes les pages de documentation.</p>
|
||||
`;
|
||||
document.getElementById('docGrid').appendChild(noResultsDiv);
|
||||
}
|
||||
} else if (noResultsDiv) {
|
||||
noResultsDiv.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Fonction pour rendre les cartes
|
||||
function renderDocumentation() {
|
||||
const docGrid = document.getElementById('docGrid');
|
||||
docGrid.innerHTML = '';
|
||||
|
||||
documentationPages.forEach(page => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'doc-card';
|
||||
card.innerHTML = `
|
||||
<div class="doc-header">
|
||||
<div class="doc-icon">${page.icon}</div>
|
||||
<h3 class="doc-title">${page.title}</h3>
|
||||
<p class="doc-subtitle">${page.subtitle}</p>
|
||||
</div>
|
||||
<div class="doc-body">
|
||||
<p class="doc-description">${page.description}</p>
|
||||
<div class="doc-tags">
|
||||
${page.tags.map(tag => `<span class="doc-tag">${tag}</span>`).join('')}
|
||||
</div>
|
||||
<a href="${page.url}" class="doc-link">Consulter l'étude →</a>
|
||||
</div>
|
||||
`;
|
||||
docGrid.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
// Initialisation
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
renderDocumentation();
|
||||
document.getElementById('searchInput').addEventListener('input', filterDocumentation);
|
||||
});
|
||||
|
||||
// Progress bar
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollPercentage = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
|
||||
document.querySelector('.progress-bar').style.width = scrollPercentage + '%';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -5,7 +5,499 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Index Documentation Technique & Biologie | NextGN Formation</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../header-style.css"/>
|
||||
<style>
|
||||
:root {
|
||||
--teal: #0F6E56;
|
||||
--teal-mid: #1D9E75;
|
||||
--teal-light: #E1F5EE;
|
||||
--teal-dark: #085041;
|
||||
--amber: #BA7517;
|
||||
--amber-mid: #D4921A;
|
||||
--amber-light: #FAEEDA;
|
||||
--amber-dark: #633806;
|
||||
--coral: #993C1D;
|
||||
--coral-mid: #D85A30;
|
||||
--coral-light: #FAECE7;
|
||||
--purple: #534AB7;
|
||||
--purple-light: #EEEDFE;
|
||||
--purple-dark: #3C3489;
|
||||
--blue: #185FA5;
|
||||
--blue-light: #E6F1FB;
|
||||
--bg: #F7F6F2;
|
||||
--white: #FFFFFF;
|
||||
--text: #1a1a18;
|
||||
--text-muted: #6b6a65;
|
||||
--border: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* HEADER FIXE */
|
||||
nav.nav-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 70px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 40px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.02em;
|
||||
background: linear-gradient(135deg, var(--amber) 0%, var(--coral-mid) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.header-logo span {
|
||||
color: var(--amber);
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-nav a {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-nav a:hover {
|
||||
color: var(--amber-mid);
|
||||
}
|
||||
|
||||
.header-nav a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--amber-mid);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.header-nav a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* PROGRESS BAR */
|
||||
.progress {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: var(--border);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: var(--amber-mid);
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* MAIN CONTENT */
|
||||
main {
|
||||
padding-top: 70px;
|
||||
min-height: calc(100vh - 70px);
|
||||
}
|
||||
|
||||
/* HERO SECTION */
|
||||
.hero {
|
||||
position: relative;
|
||||
padding: 80px 40px 100px;
|
||||
background: linear-gradient(135deg, rgba(186, 117, 23, 0.05) 0%, rgba(212, 146, 26, 0.03) 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -10%;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, var(--amber-light) 0%, transparent 70%);
|
||||
opacity: 0.4;
|
||||
border-radius: 50%;
|
||||
animation: float 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -30%;
|
||||
left: -5%;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, var(--amber-light) 0%, transparent 70%);
|
||||
opacity: 0.3;
|
||||
border-radius: 50%;
|
||||
animation: float-reverse 25s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-30px); }
|
||||
}
|
||||
|
||||
@keyframes float-reverse {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(30px); }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
animation: slideUp 0.8s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 56px;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: -1px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 18px;
|
||||
color: var(--text-muted);
|
||||
max-width: 700px;
|
||||
margin: 0 auto 50px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* SEARCH BAR */
|
||||
.search-container {
|
||||
max-width: 700px;
|
||||
margin: 0 auto 40px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--white);
|
||||
border: 2px solid var(--amber-light);
|
||||
border-radius: 12px;
|
||||
padding: 15px 20px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(186, 117, 23, 0.1);
|
||||
}
|
||||
|
||||
.search-bar:focus-within {
|
||||
border-color: var(--amber-mid);
|
||||
box-shadow: 0 8px 24px rgba(186, 117, 23, 0.2);
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-size: 16px;
|
||||
color: var(--text);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.search-bar input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
color: var(--amber-mid);
|
||||
font-size: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* DOCUMENTATION GRID */
|
||||
.documentation-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px 80px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 50px;
|
||||
animation: fadeIn 0.6s ease-out 0.1s both;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 15px;
|
||||
color: var(--text);
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 3px solid var(--amber-mid);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section-header p {
|
||||
font-size: 16px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.7;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
/* DOC CARDS GRID */
|
||||
.doc-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.doc-card {
|
||||
background: var(--white);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--border);
|
||||
animation: fadeIn 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.doc-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.doc-card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.doc-card:nth-child(3) { animation-delay: 0.3s; }
|
||||
.doc-card:nth-child(n+4) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.doc-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 16px 32px rgba(186, 117, 23, 0.15);
|
||||
border-color: var(--amber-light);
|
||||
}
|
||||
|
||||
.doc-card.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.doc-header {
|
||||
padding: 25px;
|
||||
background: linear-gradient(135deg, var(--amber-light) 0%, rgba(212, 146, 26, 0.05) 100%);
|
||||
border-bottom: 2px solid var(--amber-mid);
|
||||
}
|
||||
|
||||
.doc-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.doc-subtitle {
|
||||
font-size: 13px;
|
||||
color: var(--amber-mid);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.doc-body {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.doc-description {
|
||||
font-size: 15px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.doc-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.doc-tag {
|
||||
display: inline-block;
|
||||
background: var(--amber-light);
|
||||
color: var(--amber-dark);
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.doc-link {
|
||||
display: inline-block;
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--amber-mid);
|
||||
text-decoration: none;
|
||||
padding: 10px 0;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.doc-link:hover {
|
||||
border-bottom-color: var(--amber-mid);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* NO RESULTS */
|
||||
.no-results {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.no-results-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.no-results h3 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.no-results p {
|
||||
color: var(--text-muted);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
footer {
|
||||
background: var(--text);
|
||||
color: var(--white);
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
footer p:first-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
footer p:last-child {
|
||||
opacity: 0.6;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 768px) {
|
||||
.nav-header {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 60px 20px 80px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.documentation-container {
|
||||
padding: 0 20px 60px;
|
||||
}
|
||||
|
||||
.doc-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="progress">
|
||||
@@ -13,14 +505,13 @@
|
||||
</div>
|
||||
|
||||
<nav class="nav-header">
|
||||
<a href="../../index.html" class="header-logo">
|
||||
<a href="index.html" class="header-logo">
|
||||
<span>NextGN</span> Formation
|
||||
</a>
|
||||
<a href="../../index.html">Accueil</a>
|
||||
<div class="header-nav">
|
||||
<a href="../../index.html#formations">Exercices</a>
|
||||
<a href="../../index.html#documentation">Documentation</a>
|
||||
<a href="../../index.html#about">À propos</a>
|
||||
<a href="index.html#formations">Exercices interactifs</a>
|
||||
<a href="index.html#documentation">Documentation</a>
|
||||
<a href="index.html#about">À propos</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -1,479 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vespa velutina — Invasion de France | NextGN Formation</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
|
||||
<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"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HEADER NAVIGATION -->
|
||||
<header>
|
||||
<div class="logo">NextGN Formation</div>
|
||||
<a href="../../index.html">Accueil</a>
|
||||
<nav>
|
||||
<a href="../../index.html#formations">Exercices</a>
|
||||
<a href="../../index.html#documentation">Documentation</a>
|
||||
<a href="../../index.html#rapports">Rapports</a>
|
||||
<a href="../../index.html#about">À propos</a>
|
||||
<a href="../../index.html#contact">Contact</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- BARRE DE PROGRESSION -->
|
||||
<div class="progress">
|
||||
<div class="progress-bar" id="progressBar"></div>
|
||||
</div>
|
||||
|
||||
<!-- SOMMAIRE COLLAPSIBLE -->
|
||||
<div class="toc-overlay" id="tocOverlay"></div>
|
||||
<div class="toc-panel" id="tocPanel">
|
||||
<h3>Sommaire</h3>
|
||||
<ul class="toc-list">
|
||||
<li class="toc-item"><a href="#invasion-territoriale" class="toc-link">Invasion territoriale</a></li>
|
||||
<li class="toc-item"><a href="#chiffres-cles" class="toc-link">Chiffres clés</a></li>
|
||||
<li class="toc-item"><a href="#manche" class="toc-link">Cas de la Manche</a></li>
|
||||
<li class="toc-item"><a href="#impacts" class="toc-link">Impacts écologiques</a></li>
|
||||
<li class="toc-item"><a href="#strategie-lutte" class="toc-link">Stratégie de lutte</a></li>
|
||||
<li class="toc-item"><a href="#cadre-legal" class="toc-link">Cadre légal</a></li>
|
||||
<li class="toc-item"><a href="#projections" class="toc-link">Projections futures</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- ═══ CONTENU PRINCIPAL ═════════════════════════════════════════════════════ -->
|
||||
<main>
|
||||
<!-- HERO SECTION -->
|
||||
<div class="hero">
|
||||
<h1>Vespa velutina</h1>
|
||||
<p class="hero-subtitle">L'invasion du frelon asiatique en France — Analyse évolutive 2004–2026</p>
|
||||
<div class="hero-meta">🐝 Apicultureà risque · 📊 Données MNHN/INPN · 🇫🇷 Situation nationale critique</div>
|
||||
</div>
|
||||
|
||||
<!-- INTRO -->
|
||||
<div class="intro">
|
||||
<strong>Situation actuelle (mars 2026) :</strong> Tous les départements français continentaux sont potentiellement infestés. L'espèce a colonisé 101 départements en 22 ans. Aucun mécanisme d'éradication démographique n'a pu être mis en place. Les modèles scientifiques (CNRS, MNHN) anticipent une invasion quasi-totale de l'Europe occidentale d'ici 10 ans. Ce document consolide les données officielles, sources MNHN/INPN et estimations scientifiques.
|
||||
</div>
|
||||
|
||||
<!-- SECTION 1 : INVASION TERRITORIALE -->
|
||||
<section class="section" id="invasion-territoriale">
|
||||
<h2>🗺️ Invasion territoriale</h2>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">Progression départementale</div>
|
||||
<h3>De 1 à 101 départements en 22 ans</h3>
|
||||
<p style="color: var(--text-muted); margin-bottom: 16px;">L'invasion progresse à un rythme exponentiel. Les données certifiées MNHN/INPN couvrent 2004–2020. À partir de 2021, les chiffres proviennent de consolidations multi-sources.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Rythme d'expansion</div>
|
||||
<h3>+3 à 5 départements/an</h3>
|
||||
<p style="color: var(--text-muted); margin-bottom: 16px;">Depuis 2020, le rythme s'accélère. La saturation des habitats et la disponibilité de proies (abeilles, guêpes) favorisent une colonisation rapide des zones tempérées.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">Expansion départementale (2004–2025)</div>
|
||||
<canvas id="deptChart" style="max-height: 250px;"></canvas>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<div class="legend-item"><div class="legend-dot" style="background: rgba(45,122,74,0.75);"></div> Données certifiées (MNHN/INPN)</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background: rgba(184,134,11,0.75);"></div> Estimations consolidées</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 2 : CHIFFRES CLÉS -->
|
||||
<section class="section" id="chiffres-cles">
|
||||
<h2>📊 Chiffres clés</h2>
|
||||
|
||||
<div class="alert">
|
||||
<div class="alert-icon">⚠️</div>
|
||||
<div class="alert-body">
|
||||
<strong>Attention méthodologique :</strong> Les signalements ne représentent que <strong>5 à 10%</strong> des nids réels. La plateforme SignalNids.fr (participative) enregistre uniquement les déclarations volontaires. Aucun comptage exhaustif national n'existe.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">Nids signalés 2023</div>
|
||||
<h3 style="color: var(--amber); font-size: 28px;">7 500</h3>
|
||||
<p style="color: var(--text-muted);">Confirmés et géolocalisés (données SignalNids.fr + FDGDON)</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Nids signalés 2024</div>
|
||||
<h3 style="color: var(--amber); font-size: 28px;">13 000–14 000</h3>
|
||||
<p style="color: var(--text-muted);">Augmentation de +73% vs 2023 — accélération confirmée</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Estimation totale 2024</div>
|
||||
<h3 style="color: var(--amber); font-size: 28px;">~500 000</h3>
|
||||
<p style="color: var(--text-muted);">Extrapolation (non officielle) · Sources : MNHN & PAT Frelons</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Mortalité des colonies d'abeilles</div>
|
||||
<h3 style="color: var(--amber); font-size: 28px;">25–40%</h3>
|
||||
<p style="color: var(--text-muted);">Régions affectées · Pertes directes liées au prédatisme</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">Nids signalés et projections (2020–2026)</div>
|
||||
<canvas id="nidsChart" style="max-height: 250px;"></canvas>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<div class="legend-item"><div class="legend-dot" style="background: rgba(45,122,74,0.75);"></div> Confirmés</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background: rgba(184,134,11,0.13); border: 1px solid rgba(184,134,11,0.5);"></div> Estimation totale</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background: rgba(201,79,26,0.13); border: 1px solid rgba(201,79,26,0.55);"></div> Projection 2026</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background: rgba(201,79,26,0.65);"></div> Tendance</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 3 : MANCHE -->
|
||||
<section class="section" id="manche">
|
||||
<h2>🏴 Cas d'étude : La Manche (50)</h2>
|
||||
|
||||
<div class="intro">
|
||||
La Manche est le point d'entrée historique du frelon asiatique en France (découverte 2004). C'est aussi un excellent baromètre de l'efficacité des mesures locales de lutte.
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">Pic d'invasions 2022</div>
|
||||
<h3>9 924 nids signalés</h3>
|
||||
<p style="color: var(--text-muted); margin-bottom: 16px;">Record départemental atteint lors de l'automne 2022.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Stabilisation 2023–2024</div>
|
||||
<h3>Diminution progressive</h3>
|
||||
<p style="color: var(--text-muted); margin-bottom: 16px;">7 077 en 2023 → 5 083 en 2024. Les mesures locales ont un impact limité mais mesuré.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">Évolution des nids détectés en Manche (2022–2024)</div>
|
||||
<canvas id="mancheChart" style="max-height: 250px;"></canvas>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<div class="legend-item"><div class="legend-dot" style="background: rgba(201,79,26,0.7);"></div> 2022 (pic)</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background: rgba(45,122,74,0.65);"></div> 2023–2024 (stabilisation)</div>
|
||||
</div>
|
||||
|
||||
<p style="margin-top: 20px; color: var(--text-muted); font-style: italic;">Source : FDGDON Manche — Bilans annuels · Données exhaustives départementales</p>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 4 : IMPACTS -->
|
||||
<section class="section" id="impacts">
|
||||
<h2>🐝 Impacts écologiques et économiques</h2>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">Menace apicole</div>
|
||||
<h3>Premier impact observable</h3>
|
||||
<p style="color: var(--text-muted);">Prédation directe sur les colonies d'abeilles. Les pertes atteignent <strong>25–40%</strong> dans les zones infestées.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Pertes économiques</div>
|
||||
<h3>200–300 millions €/an</h3>
|
||||
<p style="color: var(--text-muted);">Apiculture, agriculture de pollinisation, destructions professionnelles (coût moyen : 200–500 €/nid).</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Biodiversité</div>
|
||||
<h3>Prédateur généraliste</h3>
|
||||
<p style="color: var(--text-muted);">V. velutina chasse aussi guêpes, papillons et autres insectes. Déséquilibre trophique avéré en zones affectées.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert">
|
||||
<div class="alert-icon">📍</div>
|
||||
<div class="alert-body">
|
||||
<strong>Zones critiques identifiées :</strong> Bretagne, Pays de la Loire, Nouvelle-Aquitaine. Ces régions connaissent une surmortalité apicole directement liée à V. velutina.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 5 : STRATÉGIE DE LUTTE -->
|
||||
<section class="section" id="strategie-lutte">
|
||||
<h2>🛡️ Stratégie nationale de lutte</h2>
|
||||
|
||||
<h3>Approches testées</h3>
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">Destruction des nids</div>
|
||||
<p style="color: var(--text-muted);">Opération ponctuelle efficace (100% du nid détruits). <strong>Limitation :</strong> Coût (~200–500 €/nid) + détection tardive (80% des nids se font en automne).</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Piégeage printanier</div>
|
||||
<p style="color: var(--text-muted);">Théorique : capturer les fondatrices. <strong>Réalité :</strong> >99% de captures sont des insectes non-cibles. Efficacité négligeable.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Lutte biologique</div>
|
||||
<p style="color: var(--text-muted);">Recherches en cours (prédateurs naturels, parasites). Aucune solution opérationnelle validée avant 2030.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert">
|
||||
<div class="alert-icon">⚠️</div>
|
||||
<div class="alert-body">
|
||||
<strong>Plan national 2026 (Ministère TE) :</strong> Impose les pièges sélectifs et renforce la formation des destructeurs agréés. Cependant, <strong>aucun mécanisme de limitation démographique</strong> n'a montré son efficacité à l'échelle régionale.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert">
|
||||
<div class="alert-icon">🔬</div>
|
||||
<div class="alert-body">
|
||||
<strong>Conclusion scientifique (MNHN/CNRS) :</strong> <em>Aucun plafond démographique identifié.</em> L'éradication n'est plus envisageable. Les modèles anticipent une invasion quasi-totale de l'Europe occidentale d'ici 10 ans.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 6 : CADRE LÉGAL -->
|
||||
<section class="section" id="cadre-legal">
|
||||
<h2>⚖️ Cadre légal et réglementaire</h2>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">Loi n°2025-237</div>
|
||||
<h3>14 mars 2025</h3>
|
||||
<p style="color: var(--text-muted);">Renforce les obligations de déclaration et impose les pièges sélectifs pour tout piégeage apicole.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Arrêté ministériel</div>
|
||||
<h3>Mars 2026</h3>
|
||||
<p style="color: var(--text-muted);">Plan national de lutte. Obligation pour les régions d'organiser la destruction. Budget alloué : ~50 millions €.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Classification</div>
|
||||
<h3>Espèce exotique envahissante</h3>
|
||||
<p style="color: var(--text-muted);">Statut depuis 2016. Tous les nids détectés doivent être signalés aux autorités compétentes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 7 : PROJECTIONS -->
|
||||
<section class="section" id="projections">
|
||||
<h2>🔮 Projections futures</h2>
|
||||
|
||||
<div class="alert">
|
||||
<div class="alert-icon">📈</div>
|
||||
<div class="alert-body">
|
||||
<strong>Scénario de base (tendance +15–20%/an) :</strong>
|
||||
<ul style="margin-top: 10px; padding-left: 20px;">
|
||||
<li>2026 : 300 000–400 000 nids estimés</li>
|
||||
<li>2030 : Totalité de la France continentale densément infestée</li>
|
||||
<li>2035 : Colonisation probable de la majeure partie de l'Europe occidentale</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert">
|
||||
<div class="alert-icon">❓</div>
|
||||
<div class="alert-body">
|
||||
<strong>Variables d'incertitude :</strong>
|
||||
<ul style="margin-top: 10px; padding-left: 20px;">
|
||||
<li>Capacité adaptative au changement climatique (hivers plus doux = cicle reproductif prolongé)</li>
|
||||
<li>Découverte de parasites naturels effectifs</li>
|
||||
<li>Disponibilité de proies (stocks apicoles, insectes wild)</li>
|
||||
<li>Efficacité des mesures locales à moyen terme</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Enjeux d'adaptation</h3>
|
||||
<p style="color: var(--text-muted); margin-bottom: 20px;">Les décideurs publics doivent anticiper le coût de la gestion long terme et la transformation des écosystèmes. La recherche fondamentale (lutte biologique, génétique) est prioritaire mais n'aura d'impact opérationnel qu'après 2030–2035.</p>
|
||||
</section>
|
||||
|
||||
<!-- SOURCES -->
|
||||
<div class="sources">
|
||||
<div class="sources-label">Sources scientifiques</div>
|
||||
<a class="source-chip verified" href="https://frelonasiatique.mnhn.fr/" target="_blank" rel="noopener">MNHN/INPN · Rome & Villemant</a>
|
||||
<a class="source-chip official" href="https://www.ecologie.gouv.fr/politiques-publiques/produits-biocides" target="_blank" rel="noopener">Plan national · Ministère TE · Mars 2026</a>
|
||||
<a class="source-chip verified" href="https://questions.assemblee-nationale.fr/q16/16-5422QE.htm" target="_blank" rel="noopener">Assemblée nationale Q16-5422</a>
|
||||
<a class="source-chip verified" href="https://www.inee.cnrs.fr/fr/cnrsinfo/invasion-du-frelon-asiatique-en-france-le-cout-de-la-lutte" target="_blank" rel="noopener">CNRS Écologie & Environnement</a>
|
||||
<a class="source-chip" href="https://www.fdgdon50.com/Frelons-asiatiques" target="_blank" rel="noopener">FDGDON Manche · bilans annuels</a>
|
||||
<a class="source-chip" href="https://www.patfrelons.fr/evolution-du-frelon-asiatique-en-france-et-en-europe/" target="_blank" rel="noopener">PAT Frelons</a>
|
||||
<a class="source-chip" href="https://signalnids.fr/journal/frelon-asiatique-chiffres-2026/" target="_blank" rel="noopener">SignalNids.fr</a>
|
||||
<a class="source-chip" href="https://frelonasiatique.mnhn.fr/plan-national-de-lutte-des-ovs-2024/" target="_blank" rel="noopener">FREDON France / GDS France</a>
|
||||
<a class="source-chip official" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000051254501" target="_blank" rel="noopener">Loi n°2025-237 · 14 mars 2025</a>
|
||||
<a class="source-chip" href="https://www.plateforme-esa.fr/fr/frelon-asiatique" target="_blank" rel="noopener">ITSAP / Plateforme ESA</a>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- ═══ FOOTER ════════════════════════════════════════════════════════════════ -->
|
||||
<footer>
|
||||
<p>© 2024 NextGN Formation - Vespa velutina : Invasion de France</p>
|
||||
<p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés - Formateurs indépendants</p>
|
||||
</footer>
|
||||
|
||||
<!-- ═══ JAVASCRIPT ════════════════════════════════════════════════════════════ -->
|
||||
<script>
|
||||
// Gestion du sommaire collapsible
|
||||
const tocToggle = document.getElementById('tocToggle');
|
||||
const tocPanel = document.getElementById('tocPanel');
|
||||
const tocOverlay = document.getElementById('tocOverlay');
|
||||
|
||||
tocToggle.addEventListener('click', () => {
|
||||
tocPanel.classList.toggle('active');
|
||||
tocOverlay.classList.toggle('active');
|
||||
});
|
||||
|
||||
tocOverlay.addEventListener('click', () => {
|
||||
tocPanel.classList.remove('active');
|
||||
tocOverlay.classList.remove('active');
|
||||
});
|
||||
|
||||
document.querySelectorAll('.toc-link').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
tocPanel.classList.remove('active');
|
||||
tocOverlay.classList.remove('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Barre de progression au scroll
|
||||
window.addEventListener('scroll', () => {
|
||||
const progress = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
|
||||
document.getElementById('progressBar').style.width = progress + '%';
|
||||
});
|
||||
|
||||
// ═══ CHART 1 — DÉPARTEMENTS ════════════════════════════════════════════════
|
||||
new Chart(document.getElementById('deptChart').getContext('2d'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2025],
|
||||
datasets: [{
|
||||
data: [1,13,30,40,56,67,78,88,95,100,101],
|
||||
backgroundColor: [2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2025].map(y => y<=2020?'rgba(45,122,74,0.75)':'rgba(186,117,23,0.75)'),
|
||||
borderColor: [2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2025].map(y => y<=2020?'#2d7a4a':'#BA7517'),
|
||||
borderWidth: 1.5, borderRadius: 4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true, maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor:'#fff', borderColor:'#BA7517', borderWidth:1,
|
||||
titleColor:'#BA7517', bodyColor:'#1a1a18',
|
||||
titleFont:{family:"'Syne',sans-serif",size:11, weight:700},
|
||||
bodyFont:{family:"'DM Sans',sans-serif",size:12},
|
||||
callbacks: {
|
||||
title: i => `Année ${i[0].label}`,
|
||||
label: i => ` ${i.raw} départements / 101`,
|
||||
afterLabel: i => i.label<=2020 ? ' ✓ Source : MNHN/INPN' : ' ~ Sources consolidées'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: { grid:{color:'rgba(0,0,0,0.05)'}, ticks:{color:'#6b6a65',font:{family:"'DM Sans',sans-serif",size:11}}, border:{color:'rgba(0,0,0,0.1)'} },
|
||||
y: { min:0, max:101, grid:{color:'rgba(0,0,0,0.05)'}, ticks:{color:'#6b6a65',font:{family:"'DM Sans',sans-serif",size:11}, callback:v=>v+' dép.'}, border:{color:'rgba(0,0,0,0.1)'} }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ═══ CHART 2 — NIDS + PROJECTION ══════════════════════════════════════════
|
||||
new Chart(document.getElementById('nidsChart').getContext('2d'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [2020,2021,2022,2023,2024,2025,2026],
|
||||
datasets: [
|
||||
{
|
||||
type:'bar', label:'Signalements confirmés',
|
||||
data:[null,null,null,7500,13000,14000,null],
|
||||
backgroundColor:'rgba(45,122,74,0.75)', borderColor:'#2d7a4a',
|
||||
borderWidth:1.5, borderRadius:4, yAxisID:'y', order:2
|
||||
},
|
||||
{
|
||||
type:'bar', label:'Estimation totale 2024',
|
||||
data:[null,null,null,null,500000,null,null],
|
||||
backgroundColor:'rgba(186,117,23,0.13)', borderColor:'rgba(186,117,23,0.5)',
|
||||
borderWidth:1.5, borderRadius:4, yAxisID:'y', order:3
|
||||
},
|
||||
{
|
||||
type:'bar', label:'Projection 2026',
|
||||
data:[null,null,null,null,null,null,300000],
|
||||
backgroundColor:'rgba(201,79,26,0.13)', borderColor:'rgba(201,79,26,0.55)',
|
||||
borderWidth:1.5, borderRadius:4, yAxisID:'y', order:4
|
||||
},
|
||||
{
|
||||
type:'line', label:'Tendance +15-20%/an',
|
||||
data:[null,null,null,7500,13000,15000,17500],
|
||||
borderColor:'rgba(201,79,26,0.65)', borderWidth:2, borderDash:[5,4],
|
||||
pointBackgroundColor:'rgba(201,79,26,0.7)',
|
||||
pointRadius:[0,0,0,4,4,4,4], pointHoverRadius:6,
|
||||
fill:false, tension:0.35, yAxisID:'y', order:1
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive:true, maintainAspectRatio:false,
|
||||
plugins: {
|
||||
legend:{display:false},
|
||||
tooltip:{
|
||||
backgroundColor:'#fff', borderColor:'#BA7517', borderWidth:1,
|
||||
titleColor:'#BA7517', bodyColor:'#1a1a18',
|
||||
titleFont:{family:"'Syne',sans-serif",size:11, weight:700},
|
||||
bodyFont:{family:"'DM Sans',sans-serif",size:11},
|
||||
callbacks: {
|
||||
title: i => `Année ${i[0].label}`,
|
||||
label: item => {
|
||||
if(item.raw===null||item.raw===undefined) return null;
|
||||
const k = item.raw>=1000 ? `${(item.raw/1000).toFixed(0)}k` : item.raw;
|
||||
return [' Signalés : ',' Estimés totaux : ~',' Projection : ~',' Tendance : ~'][item.datasetIndex]+k+' nids';
|
||||
},
|
||||
afterLabel: item => {
|
||||
if(item.datasetIndex===1) return ' ⚠ Extrapolation — non officiel';
|
||||
if(item.datasetIndex===2) return ' ⚠ Projection — non officielle';
|
||||
return '';
|
||||
}
|
||||
},
|
||||
filter: item => item.raw!==null && item.raw!==undefined
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: { grid:{color:'rgba(0,0,0,0.05)'}, ticks:{color:'#6b6a65',font:{family:"'DM Sans',sans-serif",size:11}}, border:{color:'rgba(0,0,0,0.1)'} },
|
||||
y: { min:0, grid:{color:'rgba(0,0,0,0.05)'}, ticks:{color:'#6b6a65',font:{family:"'DM Sans',sans-serif",size:11}, callback:v=>v>=1000?`${(v/1000).toFixed(0)}k`:v}, border:{color:'rgba(0,0,0,0.1)'} }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ═══ CHART 3 — MANCHE ══════════════════════════════════════════════════════
|
||||
new Chart(document.getElementById('mancheChart').getContext('2d'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['2022','2023','2024'],
|
||||
datasets: [{
|
||||
data: [9924,7077,5083],
|
||||
backgroundColor: ['rgba(201,79,26,0.7)','rgba(45,122,74,0.65)','rgba(45,122,74,0.65)'],
|
||||
borderColor: ['#c94f1a','#2d7a4a','#2d7a4a'],
|
||||
borderWidth:1.5, borderRadius:4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive:true, maintainAspectRatio:false,
|
||||
plugins: {
|
||||
legend:{display:false},
|
||||
tooltip:{
|
||||
backgroundColor:'#fff', borderColor:'#BA7517', borderWidth:1,
|
||||
titleColor:'#BA7517', bodyColor:'#1a1a18',
|
||||
titleFont:{family:"'Syne',sans-serif",size:11, weight:700},
|
||||
bodyFont:{family:"'DM Sans',sans-serif",size:12},
|
||||
callbacks:{
|
||||
title: i => `Manche (50) — ${i[0].label}`,
|
||||
label: item => ` ${item.raw.toLocaleString('fr-FR')} nids localisés & signalés`,
|
||||
afterLabel: () => ' Source : FDGDON Manche — bilan annuel'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: { grid:{color:'rgba(0,0,0,0.05)'}, ticks:{color:'#6b6a65',font:{family:"'DM Sans',sans-serif",size:11}}, border:{color:'rgba(0,0,0,0.1)'} },
|
||||
y: { min:0, grid:{color:'rgba(0,0,0,0.05)'}, ticks:{color:'#6b6a65',font:{family:"'DM Sans',sans-serif",size:11}, callback:v=>v.toLocaleString('fr-FR')}, border:{color:'rgba(0,0,0,0.1)'} }
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,479 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vespa velutina — Invasion de France | NextGN Formation</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
|
||||
<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"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- HEADER NAVIGATION -->
|
||||
<header>
|
||||
<div class="logo">NextGN Formation</div>
|
||||
<a href="../../index.html">Accueil</a>
|
||||
<nav>
|
||||
<a href="../../index.html#formations">Exercices</a>
|
||||
<a href="../../index.html#documentation">Documentation</a>
|
||||
<a href="../../index.html#rapports">Rapports</a>
|
||||
<a href="../../index.html#about">À propos</a>
|
||||
<a href="../../index.html#contact">Contact</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- BARRE DE PROGRESSION -->
|
||||
<div class="progress">
|
||||
<div class="progress-bar" id="progressBar"></div>
|
||||
</div>
|
||||
|
||||
<!-- SOMMAIRE COLLAPSIBLE -->
|
||||
<div class="toc-overlay" id="tocOverlay"></div>
|
||||
<div class="toc-panel" id="tocPanel">
|
||||
<h3>Sommaire</h3>
|
||||
<ul class="toc-list">
|
||||
<li class="toc-item"><a href="#invasion-territoriale" class="toc-link">Invasion territoriale</a></li>
|
||||
<li class="toc-item"><a href="#chiffres-cles" class="toc-link">Chiffres clés</a></li>
|
||||
<li class="toc-item"><a href="#manche" class="toc-link">Cas de la Manche</a></li>
|
||||
<li class="toc-item"><a href="#impacts" class="toc-link">Impacts écologiques</a></li>
|
||||
<li class="toc-item"><a href="#strategie-lutte" class="toc-link">Stratégie de lutte</a></li>
|
||||
<li class="toc-item"><a href="#cadre-legal" class="toc-link">Cadre légal</a></li>
|
||||
<li class="toc-item"><a href="#projections" class="toc-link">Projections futures</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- ═══ CONTENU PRINCIPAL ═════════════════════════════════════════════════════ -->
|
||||
<main>
|
||||
<!-- HERO SECTION -->
|
||||
<div class="hero">
|
||||
<h1>Vespa velutina</h1>
|
||||
<p class="hero-subtitle">L'invasion du frelon asiatique en France — Analyse évolutive 2004–2026</p>
|
||||
<div class="hero-meta">🐝 Apicultureà risque · 📊 Données MNHN/INPN · 🇫🇷 Situation nationale critique</div>
|
||||
</div>
|
||||
|
||||
<!-- INTRO -->
|
||||
<div class="intro">
|
||||
<strong>Situation actuelle (mars 2026) :</strong> Tous les départements français continentaux sont potentiellement infestés. L'espèce a colonisé 101 départements en 22 ans. Aucun mécanisme d'éradication démographique n'a pu être mis en place. Les modèles scientifiques (CNRS, MNHN) anticipent une invasion quasi-totale de l'Europe occidentale d'ici 10 ans. Ce document consolide les données officielles, sources MNHN/INPN et estimations scientifiques.
|
||||
</div>
|
||||
|
||||
<!-- SECTION 1 : INVASION TERRITORIALE -->
|
||||
<section class="section" id="invasion-territoriale">
|
||||
<h2>🗺️ Invasion territoriale</h2>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">Progression départementale</div>
|
||||
<h3>De 1 à 101 départements en 22 ans</h3>
|
||||
<p style="color: var(--text-muted); margin-bottom: 16px;">L'invasion progresse à un rythme exponentiel. Les données certifiées MNHN/INPN couvrent 2004–2020. À partir de 2021, les chiffres proviennent de consolidations multi-sources.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Rythme d'expansion</div>
|
||||
<h3>+3 à 5 départements/an</h3>
|
||||
<p style="color: var(--text-muted); margin-bottom: 16px;">Depuis 2020, le rythme s'accélère. La saturation des habitats et la disponibilité de proies (abeilles, guêpes) favorisent une colonisation rapide des zones tempérées.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">Expansion départementale (2004–2025)</div>
|
||||
<canvas id="deptChart" style="max-height: 250px;"></canvas>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<div class="legend-item"><div class="legend-dot" style="background: rgba(45,122,74,0.75);"></div> Données certifiées (MNHN/INPN)</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background: rgba(184,134,11,0.75);"></div> Estimations consolidées</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 2 : CHIFFRES CLÉS -->
|
||||
<section class="section" id="chiffres-cles">
|
||||
<h2>📊 Chiffres clés</h2>
|
||||
|
||||
<div class="alert">
|
||||
<div class="alert-icon">⚠️</div>
|
||||
<div class="alert-body">
|
||||
<strong>Attention méthodologique :</strong> Les signalements ne représentent que <strong>5 à 10%</strong> des nids réels. La plateforme SignalNids.fr (participative) enregistre uniquement les déclarations volontaires. Aucun comptage exhaustif national n'existe.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">Nids signalés 2023</div>
|
||||
<h3 style="color: var(--amber); font-size: 28px;">7 500</h3>
|
||||
<p style="color: var(--text-muted);">Confirmés et géolocalisés (données SignalNids.fr + FDGDON)</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Nids signalés 2024</div>
|
||||
<h3 style="color: var(--amber); font-size: 28px;">13 000–14 000</h3>
|
||||
<p style="color: var(--text-muted);">Augmentation de +73% vs 2023 — accélération confirmée</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Estimation totale 2024</div>
|
||||
<h3 style="color: var(--amber); font-size: 28px;">~500 000</h3>
|
||||
<p style="color: var(--text-muted);">Extrapolation (non officielle) · Sources : MNHN & PAT Frelons</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Mortalité des colonies d'abeilles</div>
|
||||
<h3 style="color: var(--amber); font-size: 28px;">25–40%</h3>
|
||||
<p style="color: var(--text-muted);">Régions affectées · Pertes directes liées au prédatisme</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">Nids signalés et projections (2020–2026)</div>
|
||||
<canvas id="nidsChart" style="max-height: 250px;"></canvas>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<div class="legend-item"><div class="legend-dot" style="background: rgba(45,122,74,0.75);"></div> Confirmés</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background: rgba(184,134,11,0.13); border: 1px solid rgba(184,134,11,0.5);"></div> Estimation totale</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background: rgba(201,79,26,0.13); border: 1px solid rgba(201,79,26,0.55);"></div> Projection 2026</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background: rgba(201,79,26,0.65);"></div> Tendance</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 3 : MANCHE -->
|
||||
<section class="section" id="manche">
|
||||
<h2>🏴 Cas d'étude : La Manche (50)</h2>
|
||||
|
||||
<div class="intro">
|
||||
La Manche est le point d'entrée historique du frelon asiatique en France (découverte 2004). C'est aussi un excellent baromètre de l'efficacité des mesures locales de lutte.
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">Pic d'invasions 2022</div>
|
||||
<h3>9 924 nids signalés</h3>
|
||||
<p style="color: var(--text-muted); margin-bottom: 16px;">Record départemental atteint lors de l'automne 2022.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Stabilisation 2023–2024</div>
|
||||
<h3>Diminution progressive</h3>
|
||||
<p style="color: var(--text-muted); margin-bottom: 16px;">7 077 en 2023 → 5 083 en 2024. Les mesures locales ont un impact limité mais mesuré.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">Évolution des nids détectés en Manche (2022–2024)</div>
|
||||
<canvas id="mancheChart" style="max-height: 250px;"></canvas>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<div class="legend-item"><div class="legend-dot" style="background: rgba(201,79,26,0.7);"></div> 2022 (pic)</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background: rgba(45,122,74,0.65);"></div> 2023–2024 (stabilisation)</div>
|
||||
</div>
|
||||
|
||||
<p style="margin-top: 20px; color: var(--text-muted); font-style: italic;">Source : FDGDON Manche — Bilans annuels · Données exhaustives départementales</p>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 4 : IMPACTS -->
|
||||
<section class="section" id="impacts">
|
||||
<h2>🐝 Impacts écologiques et économiques</h2>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">Menace apicole</div>
|
||||
<h3>Premier impact observable</h3>
|
||||
<p style="color: var(--text-muted);">Prédation directe sur les colonies d'abeilles. Les pertes atteignent <strong>25–40%</strong> dans les zones infestées.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Pertes économiques</div>
|
||||
<h3>200–300 millions €/an</h3>
|
||||
<p style="color: var(--text-muted);">Apiculture, agriculture de pollinisation, destructions professionnelles (coût moyen : 200–500 €/nid).</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Biodiversité</div>
|
||||
<h3>Prédateur généraliste</h3>
|
||||
<p style="color: var(--text-muted);">V. velutina chasse aussi guêpes, papillons et autres insectes. Déséquilibre trophique avéré en zones affectées.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert">
|
||||
<div class="alert-icon">📍</div>
|
||||
<div class="alert-body">
|
||||
<strong>Zones critiques identifiées :</strong> Bretagne, Pays de la Loire, Nouvelle-Aquitaine. Ces régions connaissent une surmortalité apicole directement liée à V. velutina.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 5 : STRATÉGIE DE LUTTE -->
|
||||
<section class="section" id="strategie-lutte">
|
||||
<h2>🛡️ Stratégie nationale de lutte</h2>
|
||||
|
||||
<h3>Approches testées</h3>
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">Destruction des nids</div>
|
||||
<p style="color: var(--text-muted);">Opération ponctuelle efficace (100% du nid détruits). <strong>Limitation :</strong> Coût (~200–500 €/nid) + détection tardive (80% des nids se font en automne).</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Piégeage printanier</div>
|
||||
<p style="color: var(--text-muted);">Théorique : capturer les fondatrices. <strong>Réalité :</strong> >99% de captures sont des insectes non-cibles. Efficacité négligeable.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Lutte biologique</div>
|
||||
<p style="color: var(--text-muted);">Recherches en cours (prédateurs naturels, parasites). Aucune solution opérationnelle validée avant 2030.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert">
|
||||
<div class="alert-icon">⚠️</div>
|
||||
<div class="alert-body">
|
||||
<strong>Plan national 2026 (Ministère TE) :</strong> Impose les pièges sélectifs et renforce la formation des destructeurs agréés. Cependant, <strong>aucun mécanisme de limitation démographique</strong> n'a montré son efficacité à l'échelle régionale.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert">
|
||||
<div class="alert-icon">🔬</div>
|
||||
<div class="alert-body">
|
||||
<strong>Conclusion scientifique (MNHN/CNRS) :</strong> <em>Aucun plafond démographique identifié.</em> L'éradication n'est plus envisageable. Les modèles anticipent une invasion quasi-totale de l'Europe occidentale d'ici 10 ans.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 6 : CADRE LÉGAL -->
|
||||
<section class="section" id="cadre-legal">
|
||||
<h2>⚖️ Cadre légal et réglementaire</h2>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">Loi n°2025-237</div>
|
||||
<h3>14 mars 2025</h3>
|
||||
<p style="color: var(--text-muted);">Renforce les obligations de déclaration et impose les pièges sélectifs pour tout piégeage apicole.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Arrêté ministériel</div>
|
||||
<h3>Mars 2026</h3>
|
||||
<p style="color: var(--text-muted);">Plan national de lutte. Obligation pour les régions d'organiser la destruction. Budget alloué : ~50 millions €.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">Classification</div>
|
||||
<h3>Espèce exotique envahissante</h3>
|
||||
<p style="color: var(--text-muted);">Statut depuis 2016. Tous les nids détectés doivent être signalés aux autorités compétentes.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTION 7 : PROJECTIONS -->
|
||||
<section class="section" id="projections">
|
||||
<h2>🔮 Projections futures</h2>
|
||||
|
||||
<div class="alert">
|
||||
<div class="alert-icon">📈</div>
|
||||
<div class="alert-body">
|
||||
<strong>Scénario de base (tendance +15–20%/an) :</strong>
|
||||
<ul style="margin-top: 10px; padding-left: 20px;">
|
||||
<li>2026 : 300 000–400 000 nids estimés</li>
|
||||
<li>2030 : Totalité de la France continentale densément infestée</li>
|
||||
<li>2035 : Colonisation probable de la majeure partie de l'Europe occidentale</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert">
|
||||
<div class="alert-icon">❓</div>
|
||||
<div class="alert-body">
|
||||
<strong>Variables d'incertitude :</strong>
|
||||
<ul style="margin-top: 10px; padding-left: 20px;">
|
||||
<li>Capacité adaptative au changement climatique (hivers plus doux = cicle reproductif prolongé)</li>
|
||||
<li>Découverte de parasites naturels effectifs</li>
|
||||
<li>Disponibilité de proies (stocks apicoles, insectes wild)</li>
|
||||
<li>Efficacité des mesures locales à moyen terme</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Enjeux d'adaptation</h3>
|
||||
<p style="color: var(--text-muted); margin-bottom: 20px;">Les décideurs publics doivent anticiper le coût de la gestion long terme et la transformation des écosystèmes. La recherche fondamentale (lutte biologique, génétique) est prioritaire mais n'aura d'impact opérationnel qu'après 2030–2035.</p>
|
||||
</section>
|
||||
|
||||
<!-- SOURCES -->
|
||||
<div class="sources">
|
||||
<div class="sources-label">Sources scientifiques</div>
|
||||
<a class="source-chip verified" href="https://frelonasiatique.mnhn.fr/" target="_blank" rel="noopener">MNHN/INPN · Rome & Villemant</a>
|
||||
<a class="source-chip official" href="https://www.ecologie.gouv.fr/politiques-publiques/produits-biocides" target="_blank" rel="noopener">Plan national · Ministère TE · Mars 2026</a>
|
||||
<a class="source-chip verified" href="https://questions.assemblee-nationale.fr/q16/16-5422QE.htm" target="_blank" rel="noopener">Assemblée nationale Q16-5422</a>
|
||||
<a class="source-chip verified" href="https://www.inee.cnrs.fr/fr/cnrsinfo/invasion-du-frelon-asiatique-en-france-le-cout-de-la-lutte" target="_blank" rel="noopener">CNRS Écologie & Environnement</a>
|
||||
<a class="source-chip" href="https://www.fdgdon50.com/Frelons-asiatiques" target="_blank" rel="noopener">FDGDON Manche · bilans annuels</a>
|
||||
<a class="source-chip" href="https://www.patfrelons.fr/evolution-du-frelon-asiatique-en-france-et-en-europe/" target="_blank" rel="noopener">PAT Frelons</a>
|
||||
<a class="source-chip" href="https://signalnids.fr/journal/frelon-asiatique-chiffres-2026/" target="_blank" rel="noopener">SignalNids.fr</a>
|
||||
<a class="source-chip" href="https://frelonasiatique.mnhn.fr/plan-national-de-lutte-des-ovs-2024/" target="_blank" rel="noopener">FREDON France / GDS France</a>
|
||||
<a class="source-chip official" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000051254501" target="_blank" rel="noopener">Loi n°2025-237 · 14 mars 2025</a>
|
||||
<a class="source-chip" href="https://www.plateforme-esa.fr/fr/frelon-asiatique" target="_blank" rel="noopener">ITSAP / Plateforme ESA</a>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- ═══ FOOTER ════════════════════════════════════════════════════════════════ -->
|
||||
<footer>
|
||||
<p>© 2026 NextGN Formation - Formations Certibiocide & Techniques</p>
|
||||
<p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
|
||||
</footer>
|
||||
|
||||
<!-- ═══ JAVASCRIPT ════════════════════════════════════════════════════════════ -->
|
||||
<script>
|
||||
// Gestion du sommaire collapsible
|
||||
const tocToggle = document.getElementById('tocToggle');
|
||||
const tocPanel = document.getElementById('tocPanel');
|
||||
const tocOverlay = document.getElementById('tocOverlay');
|
||||
|
||||
tocToggle.addEventListener('click', () => {
|
||||
tocPanel.classList.toggle('active');
|
||||
tocOverlay.classList.toggle('active');
|
||||
});
|
||||
|
||||
tocOverlay.addEventListener('click', () => {
|
||||
tocPanel.classList.remove('active');
|
||||
tocOverlay.classList.remove('active');
|
||||
});
|
||||
|
||||
document.querySelectorAll('.toc-link').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
tocPanel.classList.remove('active');
|
||||
tocOverlay.classList.remove('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Barre de progression au scroll
|
||||
window.addEventListener('scroll', () => {
|
||||
const progress = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
|
||||
document.getElementById('progressBar').style.width = progress + '%';
|
||||
});
|
||||
|
||||
// ═══ CHART 1 — DÉPARTEMENTS ════════════════════════════════════════════════
|
||||
new Chart(document.getElementById('deptChart').getContext('2d'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2025],
|
||||
datasets: [{
|
||||
data: [1,13,30,40,56,67,78,88,95,100,101],
|
||||
backgroundColor: [2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2025].map(y => y<=2020?'rgba(45,122,74,0.75)':'rgba(186,117,23,0.75)'),
|
||||
borderColor: [2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2025].map(y => y<=2020?'#2d7a4a':'#BA7517'),
|
||||
borderWidth: 1.5, borderRadius: 4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true, maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor:'#fff', borderColor:'#BA7517', borderWidth:1,
|
||||
titleColor:'#BA7517', bodyColor:'#1a1a18',
|
||||
titleFont:{family:"'Syne',sans-serif",size:11, weight:700},
|
||||
bodyFont:{family:"'DM Sans',sans-serif",size:12},
|
||||
callbacks: {
|
||||
title: i => `Année ${i[0].label}`,
|
||||
label: i => ` ${i.raw} départements / 101`,
|
||||
afterLabel: i => i.label<=2020 ? ' ✓ Source : MNHN/INPN' : ' ~ Sources consolidées'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: { grid:{color:'rgba(0,0,0,0.05)'}, ticks:{color:'#6b6a65',font:{family:"'DM Sans',sans-serif",size:11}}, border:{color:'rgba(0,0,0,0.1)'} },
|
||||
y: { min:0, max:101, grid:{color:'rgba(0,0,0,0.05)'}, ticks:{color:'#6b6a65',font:{family:"'DM Sans',sans-serif",size:11}, callback:v=>v+' dép.'}, border:{color:'rgba(0,0,0,0.1)'} }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ═══ CHART 2 — NIDS + PROJECTION ══════════════════════════════════════════
|
||||
new Chart(document.getElementById('nidsChart').getContext('2d'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [2020,2021,2022,2023,2024,2025,2026],
|
||||
datasets: [
|
||||
{
|
||||
type:'bar', label:'Signalements confirmés',
|
||||
data:[null,null,null,7500,13000,14000,null],
|
||||
backgroundColor:'rgba(45,122,74,0.75)', borderColor:'#2d7a4a',
|
||||
borderWidth:1.5, borderRadius:4, yAxisID:'y', order:2
|
||||
},
|
||||
{
|
||||
type:'bar', label:'Estimation totale 2024',
|
||||
data:[null,null,null,null,500000,null,null],
|
||||
backgroundColor:'rgba(186,117,23,0.13)', borderColor:'rgba(186,117,23,0.5)',
|
||||
borderWidth:1.5, borderRadius:4, yAxisID:'y', order:3
|
||||
},
|
||||
{
|
||||
type:'bar', label:'Projection 2026',
|
||||
data:[null,null,null,null,null,null,300000],
|
||||
backgroundColor:'rgba(201,79,26,0.13)', borderColor:'rgba(201,79,26,0.55)',
|
||||
borderWidth:1.5, borderRadius:4, yAxisID:'y', order:4
|
||||
},
|
||||
{
|
||||
type:'line', label:'Tendance +15-20%/an',
|
||||
data:[null,null,null,7500,13000,15000,17500],
|
||||
borderColor:'rgba(201,79,26,0.65)', borderWidth:2, borderDash:[5,4],
|
||||
pointBackgroundColor:'rgba(201,79,26,0.7)',
|
||||
pointRadius:[0,0,0,4,4,4,4], pointHoverRadius:6,
|
||||
fill:false, tension:0.35, yAxisID:'y', order:1
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive:true, maintainAspectRatio:false,
|
||||
plugins: {
|
||||
legend:{display:false},
|
||||
tooltip:{
|
||||
backgroundColor:'#fff', borderColor:'#BA7517', borderWidth:1,
|
||||
titleColor:'#BA7517', bodyColor:'#1a1a18',
|
||||
titleFont:{family:"'Syne',sans-serif",size:11, weight:700},
|
||||
bodyFont:{family:"'DM Sans',sans-serif",size:11},
|
||||
callbacks: {
|
||||
title: i => `Année ${i[0].label}`,
|
||||
label: item => {
|
||||
if(item.raw===null||item.raw===undefined) return null;
|
||||
const k = item.raw>=1000 ? `${(item.raw/1000).toFixed(0)}k` : item.raw;
|
||||
return [' Signalés : ',' Estimés totaux : ~',' Projection : ~',' Tendance : ~'][item.datasetIndex]+k+' nids';
|
||||
},
|
||||
afterLabel: item => {
|
||||
if(item.datasetIndex===1) return ' ⚠ Extrapolation — non officiel';
|
||||
if(item.datasetIndex===2) return ' ⚠ Projection — non officielle';
|
||||
return '';
|
||||
}
|
||||
},
|
||||
filter: item => item.raw!==null && item.raw!==undefined
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: { grid:{color:'rgba(0,0,0,0.05)'}, ticks:{color:'#6b6a65',font:{family:"'DM Sans',sans-serif",size:11}}, border:{color:'rgba(0,0,0,0.1)'} },
|
||||
y: { min:0, grid:{color:'rgba(0,0,0,0.05)'}, ticks:{color:'#6b6a65',font:{family:"'DM Sans',sans-serif",size:11}, callback:v=>v>=1000?`${(v/1000).toFixed(0)}k`:v}, border:{color:'rgba(0,0,0,0.1)'} }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ═══ CHART 3 — MANCHE ══════════════════════════════════════════════════════
|
||||
new Chart(document.getElementById('mancheChart').getContext('2d'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['2022','2023','2024'],
|
||||
datasets: [{
|
||||
data: [9924,7077,5083],
|
||||
backgroundColor: ['rgba(201,79,26,0.7)','rgba(45,122,74,0.65)','rgba(45,122,74,0.65)'],
|
||||
borderColor: ['#c94f1a','#2d7a4a','#2d7a4a'],
|
||||
borderWidth:1.5, borderRadius:4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive:true, maintainAspectRatio:false,
|
||||
plugins: {
|
||||
legend:{display:false},
|
||||
tooltip:{
|
||||
backgroundColor:'#fff', borderColor:'#BA7517', borderWidth:1,
|
||||
titleColor:'#BA7517', bodyColor:'#1a1a18',
|
||||
titleFont:{family:"'Syne',sans-serif",size:11, weight:700},
|
||||
bodyFont:{family:"'DM Sans',sans-serif",size:12},
|
||||
callbacks:{
|
||||
title: i => `Manche (50) — ${i[0].label}`,
|
||||
label: item => ` ${item.raw.toLocaleString('fr-FR')} nids localisés & signalés`,
|
||||
afterLabel: () => ' Source : FDGDON Manche — bilan annuel'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: { grid:{color:'rgba(0,0,0,0.05)'}, ticks:{color:'#6b6a65',font:{family:"'DM Sans',sans-serif",size:11}}, border:{color:'rgba(0,0,0,0.1)'} },
|
||||
y: { min:0, grid:{color:'rgba(0,0,0,0.05)'}, ticks:{color:'#6b6a65',font:{family:"'DM Sans',sans-serif",size:11}, callback:v=>v.toLocaleString('fr-FR')}, border:{color:'rgba(0,0,0,0.1)'} }
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,920 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vespa velutina — Invasion de France</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300&family=IBM+Plex+Mono:wght@400;500&display=swap');
|
||||
|
||||
:root {
|
||||
--bg: #f8f6f1;
|
||||
--surface: #ffffff;
|
||||
--surface2: #f2efe8;
|
||||
--accent: #b8860b;
|
||||
--accent2: #c94f1a;
|
||||
--text: #1a1a14;
|
||||
--muted: #7a7060;
|
||||
--verified: #2d7a4a;
|
||||
--estimated: #b8860b;
|
||||
--projected: #c94f1a;
|
||||
--border: #ddd8cc;
|
||||
--official: #1a4a8a;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: 'Source Serif 4', Georgia, serif;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.no-print { display: none !important; }
|
||||
body { background: white; }
|
||||
.card, .kpi { break-inside: avoid; }
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
.header {
|
||||
background: var(--surface);
|
||||
border-bottom: 2px solid var(--accent);
|
||||
padding: 32px 48px 24px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 16px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.header-species {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 58px;
|
||||
line-height: 0.92;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.header-title span { color: var(--accent); }
|
||||
|
||||
.header-subtitle {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.badge-year {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 80px;
|
||||
line-height: 1;
|
||||
color: var(--accent2);
|
||||
opacity: 0.15;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.badge-label {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.btn-print {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--muted);
|
||||
padding: 7px 14px;
|
||||
cursor: pointer;
|
||||
border-radius: 1px;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
.btn-print:hover { border-color: var(--accent); color: var(--accent); }
|
||||
|
||||
/* MAIN GRID */
|
||||
.main {
|
||||
padding: 32px 48px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.card-full { grid-column: 1 / -1; }
|
||||
|
||||
.card-title {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.card-heading {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 22px;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--text);
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* CHARTS */
|
||||
.chart-wrap { position: relative; height: 280px; }
|
||||
.chart-wrap-sm { position: relative; height: 210px; }
|
||||
|
||||
/* LEGEND */
|
||||
.legend { display: flex; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
||||
|
||||
.legend-dash {
|
||||
width: 20px; height: 2px; flex-shrink: 0;
|
||||
background: repeating-linear-gradient(to right, var(--projected) 0, var(--projected) 4px, transparent 4px, transparent 8px);
|
||||
}
|
||||
|
||||
/* MILESTONES */
|
||||
.milestones { position: relative; padding-left: 24px; }
|
||||
|
||||
.milestones::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px; top: 8px; bottom: 8px;
|
||||
width: 2px;
|
||||
background: linear-gradient(to bottom, var(--accent2), var(--accent), var(--official));
|
||||
}
|
||||
|
||||
.milestone {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0;
|
||||
transform: translateX(-8px);
|
||||
animation: fadeSlide 0.4s ease forwards;
|
||||
}
|
||||
|
||||
.milestone:nth-child(1) { animation-delay: 0.05s; }
|
||||
.milestone:nth-child(2) { animation-delay: 0.15s; }
|
||||
.milestone:nth-child(3) { animation-delay: 0.25s; }
|
||||
.milestone:nth-child(4) { animation-delay: 0.35s; }
|
||||
.milestone:nth-child(5) { animation-delay: 0.45s; }
|
||||
.milestone:nth-child(6) { animation-delay: 0.55s; }
|
||||
.milestone:nth-child(7) { animation-delay: 0.65s; }
|
||||
.milestone:nth-child(8) { animation-delay: 0.75s; }
|
||||
.milestone:nth-child(9) { animation-delay: 0.85s; }
|
||||
|
||||
@keyframes fadeSlide { to { opacity: 1; transform: translateX(0); } }
|
||||
|
||||
.milestone::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -20px; top: 5px;
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
border: 2px solid var(--bg);
|
||||
}
|
||||
|
||||
.milestone.est::before { background: var(--estimated); }
|
||||
.milestone.projected::before { background: var(--projected); }
|
||||
.milestone.official::before { background: var(--official); }
|
||||
|
||||
.milestone-year {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 18px;
|
||||
color: var(--accent);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.milestone.est .milestone-year { color: var(--estimated); }
|
||||
.milestone.projected .milestone-year { color: var(--projected); }
|
||||
.milestone.official .milestone-year { color: var(--official); }
|
||||
|
||||
.milestone-text { font-size: 12.5px; font-weight: 300; color: var(--text); line-height: 1.4; margin-top: 2px; }
|
||||
.milestone-source { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--muted); margin-top: 3px; }
|
||||
|
||||
/* KPI CARDS */
|
||||
.kpis {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 12px;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.kpi {
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
padding: 16px 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
|
||||
.kpi.k-verified::before { background: var(--verified); }
|
||||
.kpi.k-est::before { background: var(--estimated); }
|
||||
.kpi.k-proj::before { background: var(--projected); }
|
||||
.kpi.k-official::before { background: var(--official); }
|
||||
|
||||
.kpi-label {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.kpi-value { font-family: 'Bebas Neue', sans-serif; font-size: 32px; line-height: 1; color: var(--text); }
|
||||
.kpi-unit { font-size: 12px; font-weight: 300; color: var(--muted); margin-top: 3px; font-style: italic; }
|
||||
|
||||
/* ALERT */
|
||||
.alert {
|
||||
grid-column: 1 / -1;
|
||||
background: rgba(201,79,26,0.06);
|
||||
border: 1px solid rgba(201,79,26,0.28);
|
||||
border-left: 3px solid var(--projected);
|
||||
padding: 14px 20px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.alert.a-official {
|
||||
background: rgba(26,74,138,0.05);
|
||||
border: 1px solid rgba(26,74,138,0.22);
|
||||
border-left-color: var(--official);
|
||||
}
|
||||
|
||||
.alert-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
|
||||
|
||||
.alert-body { font-size: 12.5px; font-weight: 300; line-height: 1.55; color: var(--text); }
|
||||
.alert-body strong { font-weight: 600; color: var(--projected); }
|
||||
.alert.a-official .alert-body strong { color: var(--official); }
|
||||
|
||||
/* PLAN NATIONAL BANNER */
|
||||
.plan-banner {
|
||||
grid-column: 1 / -1;
|
||||
background: linear-gradient(135deg, #152f5c 0%, #1a4a8a 100%);
|
||||
border-radius: 2px;
|
||||
padding: 22px 28px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 22px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.plan-logo {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.1em;
|
||||
color: rgba(255,255,255,0.4);
|
||||
writing-mode: vertical-rl;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.plan-tag {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.5);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.plan-title {
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
font-size: 26px;
|
||||
color: #fff;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.plan-title span { color: #f5c842; }
|
||||
|
||||
.plan-text {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: rgba(255,255,255,0.78);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.plan-text strong { color: #f5c842; font-weight: 600; }
|
||||
|
||||
.plan-kpis { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
|
||||
|
||||
.plan-kpi { text-align: right; }
|
||||
.plan-kpi-val { font-family: 'Bebas Neue', sans-serif; font-size: 30px; color: #f5c842; line-height: 1; }
|
||||
.plan-kpi-lbl { font-family: 'IBM Plex Mono', monospace; font-size: 8px; color: rgba(255,255,255,0.5); letter-spacing: 0.08em; text-transform: uppercase; }
|
||||
|
||||
/* IMPACT GRID */
|
||||
.impact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
|
||||
|
||||
.impact-item {
|
||||
padding: 12px 14px;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.impact-val { font-family: 'Bebas Neue', sans-serif; font-size: 30px; line-height: 1; color: var(--text); }
|
||||
.impact-label { font-size: 11.5px; font-weight: 300; color: var(--muted); line-height: 1.4; margin-top: 3px; }
|
||||
.impact-source { font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; color: rgba(0,0,0,0.25); margin-top: 5px; }
|
||||
|
||||
/* MAP */
|
||||
.map-card {
|
||||
grid-column: 1 / -1;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-header {
|
||||
padding: 18px 24px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.map-frame-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 430px;
|
||||
background: var(--surface2);
|
||||
}
|
||||
|
||||
.map-frame-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
|
||||
|
||||
.map-overlay {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(255,255,255,0.9);
|
||||
border: 1px solid var(--border);
|
||||
padding: 5px 14px;
|
||||
border-radius: 2px;
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 9px;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.map-footer {
|
||||
padding: 12px 24px;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.map-credit { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--muted); }
|
||||
|
||||
.map-link {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 9px;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(184,134,11,0.3);
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.map-link:hover { border-color: var(--accent); }
|
||||
|
||||
/* DATA QUALITY */
|
||||
.data-quality { display: flex; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
|
||||
.dq-item { display: flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--muted); }
|
||||
.dq-block { width: 12px; height: 12px; border-radius: 1px; flex-shrink: 0; }
|
||||
|
||||
/* SOURCES */
|
||||
.sources {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 20px 48px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.sources-label {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.source-chip {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 9px;
|
||||
color: var(--muted);
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
padding: 3px 8px;
|
||||
border-radius: 1px;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
a.source-chip:hover { background: var(--bg); border-color: var(--accent); color: var(--accent); }
|
||||
.source-chip.verified { border-color: rgba(45,122,74,0.4); color: var(--verified); }
|
||||
a.source-chip.verified:hover { border-color: var(--verified); color: var(--verified); }
|
||||
.source-chip.official { border-color: rgba(26,74,138,0.4); color: var(--official); }
|
||||
a.source-chip.official:hover { border-color: var(--official); color: var(--official); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ═══ HEADER ═══════════════════════════════════════════════════════════════ -->
|
||||
<div class="header">
|
||||
<div>
|
||||
<div class="header-species">Vespa velutina nigrithorax · Espèce exotique envahissante · Danger sanitaire 2ème catégorie depuis 2012</div>
|
||||
<div class="header-title">FRELON<br><span>ASIATIQUE</span><br>EN FRANCE</div>
|
||||
<div class="header-subtitle">Vingt ans d'invasion : données épidémiologiques, estimations de population, plan national 2026</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div>
|
||||
<div class="badge-year">20</div>
|
||||
<div class="badge-year" style="margin-top:-20px">ANS</div>
|
||||
<div class="badge-label" style="text-align:right">D'INVASION · 2004–2026</div>
|
||||
</div>
|
||||
<button class="btn-print no-print" onclick="window.print()">⎙ Imprimer / PDF</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ KPI ROW ════════════════════════════════════════════════════════════ -->
|
||||
<div class="main" style="padding-bottom:0;">
|
||||
<div class="kpis">
|
||||
<div class="kpi k-verified">
|
||||
<div class="kpi-label">Départements touchés · 2026</div>
|
||||
<div class="kpi-value">101/101</div>
|
||||
<div class="kpi-unit">tous les dép. métropolitains</div>
|
||||
</div>
|
||||
<div class="kpi k-est">
|
||||
<div class="kpi-label">Nids signalés / an · 2024–25</div>
|
||||
<div class="kpi-value">13–15k</div>
|
||||
<div class="kpi-unit">nids déclarés (5–10% du réel)</div>
|
||||
</div>
|
||||
<div class="kpi k-est">
|
||||
<div class="kpi-label">Nids estimés en France · 2024</div>
|
||||
<div class="kpi-value">~500k</div>
|
||||
<div class="kpi-unit">ordre de grandeur · extrapolation</div>
|
||||
</div>
|
||||
<div class="kpi k-proj">
|
||||
<div class="kpi-label">Pertes filière apicole / an</div>
|
||||
<div class="kpi-value">98M€</div>
|
||||
<div class="kpi-unit">pertes estimées (UNAF)</div>
|
||||
</div>
|
||||
<div class="kpi k-official">
|
||||
<div class="kpi-label">Plan national 2026 · budget</div>
|
||||
<div class="kpi-value">3M€</div>
|
||||
<div class="kpi-unit">par an sur 6 ans · Ministère TE</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ PLAN NATIONAL ══════════════════════════════════════════════════════ -->
|
||||
<div class="main" style="padding-top:16px; padding-bottom:0;">
|
||||
<div class="plan-banner">
|
||||
<div class="plan-logo">OFFICIEL</div>
|
||||
<div>
|
||||
<div class="plan-tag">Dossier de presse officiel · Ministère de la Transition Écologique · 27 mars 2026</div>
|
||||
<div class="plan-title">Plan National de Lutte<br>contre le <span>Frelon Asiatique</span></div>
|
||||
<div class="plan-text">
|
||||
Présenté dans les Vosges par le ministre Mathieu Lefèvre, en application de la <strong>loi n°2025-237 du 14 mars 2025</strong>.
|
||||
Le plan acte officiellement que <strong>l'éradication n'est plus envisageable</strong>.
|
||||
La stratégie repose désormais sur la limitation des impacts :
|
||||
piégeage sélectif, destruction de nids par des professionnels,
|
||||
protection des ruchers (muselières, harpes), déclaration obligatoire des nids.
|
||||
Un guichet collectivités / associations a ouvert le <strong>1er mai 2026</strong>.
|
||||
L'espèce a atteint <strong>9 pays européens</strong>, dont la Hongrie en 2024.
|
||||
</div>
|
||||
</div>
|
||||
<div class="plan-kpis">
|
||||
<div class="plan-kpi">
|
||||
<div class="plan-kpi-val">9</div>
|
||||
<div class="plan-kpi-lbl">pays européens<br>concernés</div>
|
||||
</div>
|
||||
<div class="plan-kpi">
|
||||
<div class="plan-kpi-val">40%</div>
|
||||
<div class="plan-kpi-lbl">abeilles dans<br>l'alimentation</div>
|
||||
</div>
|
||||
<div class="plan-kpi">
|
||||
<div class="plan-kpi-val">30%</div>
|
||||
<div class="plan-kpi-lbl">colonies pouvant<br>disparaître/an</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ CHARTS ══════════════════════════════════════════════════════════════ -->
|
||||
<div class="main" style="padding-top:16px;">
|
||||
|
||||
<!-- CHART 1 : DÉPARTEMENTS -->
|
||||
<div class="card">
|
||||
<div class="card-title">Expansion géographique</div>
|
||||
<div class="card-heading">Départements colonisés par année</div>
|
||||
<div class="chart-wrap"><canvas id="deptChart"></canvas></div>
|
||||
<div class="legend">
|
||||
<div class="legend-item"><div class="legend-dot" style="background:var(--verified)"></div>Données vérifiées (MNHN/INPN)</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:var(--estimated)"></div>Sources consolidées</div>
|
||||
</div>
|
||||
<div class="data-quality">
|
||||
<div class="dq-item"><div class="dq-block" style="background:var(--verified)"></div>Publications scientifiques</div>
|
||||
<div class="dq-item"><div class="dq-block" style="background:var(--estimated)"></div>AN / rapports officiels</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CHART 2 : NIDS + PROJECTION -->
|
||||
<div class="card">
|
||||
<div class="card-title">Pression d'infestation</div>
|
||||
<div class="card-heading">Nids signalés, estimés & projection</div>
|
||||
<div class="chart-wrap"><canvas id="nidsChart"></canvas></div>
|
||||
<div class="legend">
|
||||
<div class="legend-item"><div class="legend-dot" style="background:var(--verified)"></div>Signalements confirmés</div>
|
||||
<div class="legend-item"><div class="legend-dot" style="background:rgba(184,134,11,0.45)"></div>Estimation totale (×30–50)</div>
|
||||
<div class="legend-item"><div class="legend-dash"></div>Tendance +15–20%/an</div>
|
||||
</div>
|
||||
<div class="data-quality">
|
||||
<div class="dq-item"><div class="dq-block" style="background:rgba(45,122,74,0.4); border:1px solid var(--verified)"></div>Seuls 5–10% des nids réels sont signalés</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CHART 3 : MANCHE -->
|
||||
<div class="card">
|
||||
<div class="card-title">Zoom département · Données annuelles continues</div>
|
||||
<div class="card-heading">Nids localisés — Manche (50) · 2022–2024</div>
|
||||
<div class="chart-wrap-sm"><canvas id="mancheChart"></canvas></div>
|
||||
<div style="margin-top:10px; font-size:12px; font-weight:300; color:var(--muted); line-height:1.5;">
|
||||
Seul département avec une série annuelle continue publiée. La baisse 2022→2024 illustre une possible saturation locale combinée à l'intensification de la lutte collective (FDGDON 50). À ne pas généraliser à l'échelle nationale.
|
||||
</div>
|
||||
<div class="data-quality">
|
||||
<div class="dq-item"><div class="dq-block" style="background:var(--verified)"></div>Source : FDGDON Manche — bilans annuels publiés</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IMPACT ABEILLES -->
|
||||
<div class="card">
|
||||
<div class="card-title">Impact filière apicole & biodiversité</div>
|
||||
<div class="card-heading">Chiffres clés — dossier officiel mars 2026</div>
|
||||
<div class="impact-grid">
|
||||
<div class="impact-item">
|
||||
<div class="impact-val" style="color:var(--projected)">40%</div>
|
||||
<div class="impact-label">des proies capturées sont des abeilles domestiques</div>
|
||||
<div class="impact-source">Plan national · MNHN</div>
|
||||
</div>
|
||||
<div class="impact-item">
|
||||
<div class="impact-val" style="color:var(--projected)">20%</div>
|
||||
<div class="impact-label">taux de mortalité des abeilles causé par le frelon asiatique</div>
|
||||
<div class="impact-source">Dossier de presse officiel mars 2026</div>
|
||||
</div>
|
||||
<div class="impact-item">
|
||||
<div class="impact-val" style="color:var(--estimated)">30%</div>
|
||||
<div class="impact-label">des colonies peuvent disparaître à l'échelle nationale chaque année dans les cas les plus sévères</div>
|
||||
<div class="impact-source">Plan national mars 2026</div>
|
||||
</div>
|
||||
<div class="impact-item">
|
||||
<div class="impact-val" style="color:var(--estimated)">10 kg</div>
|
||||
<div class="impact-label">d'insectes consommés par nid sur une saison, soit >100 000 individus</div>
|
||||
<div class="impact-source">UNAF / Plan national 2026</div>
|
||||
</div>
|
||||
<div class="impact-item" style="grid-column:1/-1;">
|
||||
<div class="impact-val" style="color:var(--verified); font-size:22px">85% de l'alimentation</div>
|
||||
<div class="impact-label">est composée d'abeilles, guêpes et mouches — dont 40% d'abeilles domestiques. Les 60% restants : diptères, hyménoptères, lépidoptères — autant de pollinisateurs sauvages déjà en déclin documenté en Europe.</div>
|
||||
<div class="impact-source">Dossier de presse — Ministère de la Transition Écologique, mars 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MILESTONES -->
|
||||
<div class="card">
|
||||
<div class="card-title">Chronologie clé</div>
|
||||
<div class="card-heading">Jalons de l'invasion & réponse institutionnelle</div>
|
||||
<div class="milestones">
|
||||
<div class="milestone">
|
||||
<div class="milestone-year">2004</div>
|
||||
<div class="milestone-text">2 premiers nids, Lot-et-Garonne. Introduction via poteries chinoises. Une unique reine fécondée à l'origine de toute l'invasion.</div>
|
||||
<div class="milestone-source">SOURCE : INPN/MNHN (Rome & Villemant, 2006) · Dossier de presse officiel 2026</div>
|
||||
</div>
|
||||
<div class="milestone">
|
||||
<div class="milestone-year">2006</div>
|
||||
<div class="milestone-text">13 départements touchés. Premiers signalements apiculteurs. Progression : ~78 km/an.</div>
|
||||
<div class="milestone-source">SOURCE : MNHN / INPN</div>
|
||||
</div>
|
||||
<div class="milestone est">
|
||||
<div class="milestone-year">2010</div>
|
||||
<div class="milestone-text">~40 départements. Milliers de nids estimés. Premiers nids en Espagne (Pays basque).</div>
|
||||
<div class="milestone-source">SOURCE : PAT Frelons / AAAFA</div>
|
||||
</div>
|
||||
<div class="milestone">
|
||||
<div class="milestone-year">2012</div>
|
||||
<div class="milestone-text">56 départements. Classé espèce exotique envahissante et danger sanitaire 2ème catégorie.</div>
|
||||
<div class="milestone-source">SOURCE : Assemblée nationale Q5422 / Code rural</div>
|
||||
</div>
|
||||
<div class="milestone est">
|
||||
<div class="milestone-year">2015</div>
|
||||
<div class="milestone-text">~75 départements. Centaines de milliers de nids. Présence en 5 pays européens.</div>
|
||||
<div class="milestone-source">SOURCE : PAT Frelons / MNHN</div>
|
||||
</div>
|
||||
<div class="milestone">
|
||||
<div class="milestone-year">2020–22</div>
|
||||
<div class="milestone-text">Quasi-totalité du territoire colonisé. Manche : 9 924 nids signalés en 2022 (pic). Plan OVS/FREDON publié.</div>
|
||||
<div class="milestone-source">SOURCE : FREDON France / FDGDON Manche</div>
|
||||
</div>
|
||||
<div class="milestone est">
|
||||
<div class="milestone-year">2023–24</div>
|
||||
<div class="milestone-text">7 500 → 13 000 nids signalés (+78%). ~500 000 nids estimés. Hongrie atteinte. 9 pays européens.</div>
|
||||
<div class="milestone-source">SOURCE : SignalNids / plateforme nationale / Dossier presse officiel 2026</div>
|
||||
</div>
|
||||
<div class="milestone official">
|
||||
<div class="milestone-year">Mars 2025</div>
|
||||
<div class="milestone-text">Loi n°2025-237 : déclaration des nids obligatoire. 12M€ de compensations aux apiculteurs.</div>
|
||||
<div class="milestone-source">SOURCE : Légifrance — Loi n°2025-237 du 14 mars 2025</div>
|
||||
</div>
|
||||
<div class="milestone official">
|
||||
<div class="milestone-year">Mars 2026</div>
|
||||
<div class="milestone-text">Plan national lancé : 3M€/an sur 6 ans. Réseau de référents départementaux. Guichet dédié ouvert le 1er mai. Éradication officiellement écartée.</div>
|
||||
<div class="milestone-source">SOURCE : Dossier de presse — Ministère de la Transition Écologique</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BIOLOGIE -->
|
||||
<div class="card">
|
||||
<div class="card-title">Biologie de la colonisation</div>
|
||||
<div class="card-heading">Pourquoi la population ne plafonne pas</div>
|
||||
<div style="display:grid; gap:12px; margin-top:4px;">
|
||||
<div style="display:flex; gap:12px; align-items:flex-start; padding:12px; background:var(--surface2); border:1px solid var(--border); border-left:3px solid var(--accent);">
|
||||
<div style="font-size:22px;flex-shrink:0">🐝</div>
|
||||
<div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px">Reproduction explosive</div>
|
||||
<div style="font-size:12px;font-weight:300;line-height:1.5;color:var(--text)">Chaque nid mature libère <strong style="color:var(--accent)">500 à 1 500 reines fondatrices</strong> par saison (Rome et al., 2015). Mortalité printanière élevée, mais le surplus compense très largement.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:12px; align-items:flex-start; padding:12px; background:var(--surface2); border:1px solid var(--border); border-left:3px solid var(--estimated);">
|
||||
<div style="font-size:22px;flex-shrink:0">📊</div>
|
||||
<div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--estimated);margin-bottom:4px">Production par nid</div>
|
||||
<div style="font-size:12px;font-weight:300;line-height:1.5;color:var(--text)">Jusqu'à <strong style="color:var(--estimated)">13 000 individus</strong> sur la saison (max 2 000 adultes simultanés en octobre). Taille corrélée au nombre d'individus (MNHN, 2015).</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:12px; align-items:flex-start; padding:12px; background:var(--surface2); border:1px solid var(--border); border-left:3px solid var(--verified);">
|
||||
<div style="font-size:22px;flex-shrink:0">🌍</div>
|
||||
<div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--verified);margin-bottom:4px">Absence de prédateurs spécifiques</div>
|
||||
<div style="font-size:12px;font-weight:300;line-height:1.5;color:var(--text)">Confirmé par le plan national 2026. Grande plasticité écologique : urbain, rural, altitude croissante avec le réchauffement climatique.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:12px; align-items:flex-start; padding:12px; background:var(--surface2); border:1px solid var(--border); border-left:3px solid var(--projected);">
|
||||
<div style="font-size:22px;flex-shrink:0">⚠️</div>
|
||||
<div>
|
||||
<div style="font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--projected);margin-bottom:4px">Piégeage : efficacité très limitée</div>
|
||||
<div style="font-size:12px;font-weight:300;line-height:1.5;color:var(--text)">MNHN/ITSAP : piégeage printanier laisse place à d'autres fondatrices. <strong style="color:var(--projected)">>99%</strong> des captures sont des insectes non-cibles (pièges bouteille). Le plan 2026 impose les pièges sélectifs.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert" style="margin-top:16px;">
|
||||
<div class="alert-icon">🔬</div>
|
||||
<div class="alert-body">
|
||||
<strong>Aucun plafond démographique identifié à ce jour.</strong> Le dossier officiel de mars 2026 confirme que l'éradication n'est plus envisageable. Les modèles prévoient une invasion quasi-totale de l'Europe occidentale d'ici 10 ans (CNRS).
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CARTE SIGNALNIDS -->
|
||||
<div class="map-card no-print">
|
||||
<div class="map-header">
|
||||
<div>
|
||||
<div class="card-title" style="margin-bottom:4px">Carte de signalement en temps réel</div>
|
||||
<div class="card-heading" style="margin-bottom:0;border-bottom:none;padding-bottom:0">Nids déclarés — SignalNids.fr</div>
|
||||
</div>
|
||||
<a class="map-link" href="https://signalnids.fr/carte/" target="_blank" rel="noopener">Ouvrir la carte complète ↗</a>
|
||||
</div>
|
||||
<div class="map-frame-wrap">
|
||||
<iframe
|
||||
src="https://signalnids.fr/carte/"
|
||||
title="Carte interactive des nids de frelons asiatiques — SignalNids.fr"
|
||||
loading="lazy"
|
||||
sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
|
||||
></iframe>
|
||||
<div class="map-overlay">Carte interactive · Cliquer pour interagir · Données temps réel : SignalNids.fr</div>
|
||||
</div>
|
||||
<div class="map-footer">
|
||||
<div class="map-credit">Source : <strong>SignalNids.fr</strong> · Plateforme de signalement participatif · Mise à jour en temps réel · Données non officielles</div>
|
||||
<a class="map-link" href="https://signalnids.fr/carte/" target="_blank" rel="noopener">signalnids.fr/carte/ ↗</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ALERTE MÉTHODOLOGIQUE -->
|
||||
<div class="alert" style="grid-column:1/-1; margin:0;">
|
||||
<div class="alert-icon">📌</div>
|
||||
<div class="alert-body">
|
||||
<strong>Limites méthodologiques :</strong> les données de signalement ne représentent que 5 à 10% des nids réels. Il n'existe pas de comptage national exhaustif. Les estimations de population totale sont des extrapolations — ordres de grandeur, non des valeurs précises. Sources primaires scientifiques : INPN/MNHN (Rome, Villemant et al.) · Données officielles : Dossier de presse Plan national — Ministère de la Transition Écologique, mars 2026.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /main -->
|
||||
|
||||
<!-- ═══ SOURCES ═════════════════════════════════════════════════════════════ -->
|
||||
<div class="sources">
|
||||
<div class="sources-label">Sources</div>
|
||||
<a class="source-chip verified" href="https://frelonasiatique.mnhn.fr/" target="_blank" rel="noopener">MNHN/INPN · Rome & Villemant</a>
|
||||
<a class="source-chip official" href="https://www.ecologie.gouv.fr/politiques-publiques/produits-biocides" target="_blank" rel="noopener">Plan national · Ministère TE · Mars 2026</a>
|
||||
<a class="source-chip verified" href="https://questions.assemblee-nationale.fr/q16/16-5422QE.htm" target="_blank" rel="noopener">Assemblée nationale Q16-5422</a>
|
||||
<a class="source-chip verified" href="https://www.inee.cnrs.fr/fr/cnrsinfo/invasion-du-frelon-asiatique-en-france-le-cout-de-la-lutte" target="_blank" rel="noopener">CNRS Écologie & Environnement</a>
|
||||
<a class="source-chip" href="https://www.fdgdon50.com/Frelons-asiatiques" target="_blank" rel="noopener">FDGDON Manche · bilans annuels</a>
|
||||
<a class="source-chip" href="https://www.patfrelons.fr/evolution-du-frelon-asiatique-en-france-et-en-europe/" target="_blank" rel="noopener">PAT Frelons</a>
|
||||
<a class="source-chip" href="https://signalnids.fr/journal/frelon-asiatique-chiffres-2026/" target="_blank" rel="noopener">SignalNids.fr</a>
|
||||
<a class="source-chip" href="https://frelonasiatique.mnhn.fr/plan-national-de-lutte-des-ovs-2024/" target="_blank" rel="noopener">FREDON France / GDS France</a>
|
||||
<a class="source-chip official" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000051254501" target="_blank" rel="noopener">Loi n°2025-237 · 14 mars 2025</a>
|
||||
<a class="source-chip" href="https://www.plateforme-esa.fr/fr/frelon-asiatique" target="_blank" rel="noopener">ITSAP / Plateforme ESA</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ═══ CHART 1 — DÉPARTEMENTS ════════════════════════════════════════════════
|
||||
new Chart(document.getElementById('deptChart').getContext('2d'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2025],
|
||||
datasets: [{
|
||||
data: [1,13,30,40,56,67,78,88,95,100,101],
|
||||
backgroundColor: [2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2025].map(y => y<=2020?'rgba(45,122,74,0.75)':'rgba(184,134,11,0.75)'),
|
||||
borderColor: [2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2025].map(y => y<=2020?'#2d7a4a':'#b8860b'),
|
||||
borderWidth: 1.5, borderRadius: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true, maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor:'#fff', borderColor:'#ddd8cc', borderWidth:1,
|
||||
titleColor:'#b8860b', bodyColor:'#1a1a14',
|
||||
titleFont:{family:"'IBM Plex Mono',monospace",size:10},
|
||||
bodyFont:{family:"'Source Serif 4',serif",size:12},
|
||||
callbacks: {
|
||||
title: i => `Année ${i[0].label}`,
|
||||
label: i => ` ${i.raw} départements / 101`,
|
||||
afterLabel: i => i.label<=2020 ? ' ✓ Source : MNHN/INPN' : ' ~ Sources multiples consolidées'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: { grid:{color:'rgba(0,0,0,0.07)'}, ticks:{color:'#7a7060',font:{family:"'IBM Plex Mono',monospace",size:9}}, border:{color:'#ddd8cc'} },
|
||||
y: { min:0, max:101, grid:{color:'rgba(0,0,0,0.07)'}, ticks:{color:'#7a7060',font:{family:"'IBM Plex Mono',monospace",size:9}, callback:v=>v+' dép.'}, border:{color:'#ddd8cc'} }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ═══ CHART 2 — NIDS + PROJECTION ══════════════════════════════════════════
|
||||
new Chart(document.getElementById('nidsChart').getContext('2d'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [2020,2021,2022,2023,2024,2025,2026],
|
||||
datasets: [
|
||||
{
|
||||
type:'bar', label:'Signalements confirmés',
|
||||
data:[null,null,null,7500,13000,14000,null],
|
||||
backgroundColor:'rgba(45,122,74,0.75)', borderColor:'#2d7a4a',
|
||||
borderWidth:1.5, borderRadius:1, yAxisID:'y', order:2
|
||||
},
|
||||
{
|
||||
type:'bar', label:'Estimation totale 2024',
|
||||
data:[null,null,null,null,500000,null,null],
|
||||
backgroundColor:'rgba(184,134,11,0.13)', borderColor:'rgba(184,134,11,0.5)',
|
||||
borderWidth:1.5, borderRadius:1, yAxisID:'y', order:3
|
||||
},
|
||||
{
|
||||
type:'bar', label:'Projection 2026',
|
||||
data:[null,null,null,null,null,null,300000],
|
||||
backgroundColor:'rgba(201,79,26,0.13)', borderColor:'rgba(201,79,26,0.55)',
|
||||
borderWidth:1.5, borderRadius:1, yAxisID:'y', order:4
|
||||
},
|
||||
{
|
||||
type:'line', label:'Tendance +15-20%/an',
|
||||
data:[null,null,null,7500,13000,15000,17500],
|
||||
borderColor:'rgba(201,79,26,0.65)', borderWidth:2, borderDash:[5,4],
|
||||
pointBackgroundColor:'rgba(201,79,26,0.7)',
|
||||
pointRadius:[0,0,0,4,4,4,4], pointHoverRadius:6,
|
||||
fill:false, tension:0.35, yAxisID:'y', order:1
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive:true, maintainAspectRatio:false,
|
||||
plugins: {
|
||||
legend:{display:false},
|
||||
tooltip:{
|
||||
backgroundColor:'#fff', borderColor:'#ddd8cc', borderWidth:1,
|
||||
titleColor:'#b8860b', bodyColor:'#1a1a14',
|
||||
titleFont:{family:"'IBM Plex Mono',monospace",size:10},
|
||||
bodyFont:{family:"'Source Serif 4',serif",size:11},
|
||||
callbacks: {
|
||||
title: i => `Année ${i[0].label}`,
|
||||
label: item => {
|
||||
if(item.raw===null||item.raw===undefined) return null;
|
||||
const k = item.raw>=1000 ? `${(item.raw/1000).toFixed(0)}k` : item.raw;
|
||||
return [' Signalés : ',' Estimés totaux : ~',' Projection : ~',' Tendance : ~'][item.datasetIndex]+k+' nids';
|
||||
},
|
||||
afterLabel: item => {
|
||||
if(item.datasetIndex===1) return ' ⚠ Extrapolation — non officiel';
|
||||
if(item.datasetIndex===2) return ' ⚠ Projection — non officielle';
|
||||
return '';
|
||||
}
|
||||
},
|
||||
filter: item => item.raw!==null && item.raw!==undefined
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: { grid:{color:'rgba(0,0,0,0.07)'}, ticks:{color:'#7a7060',font:{family:"'IBM Plex Mono',monospace",size:9}}, border:{color:'#ddd8cc'} },
|
||||
y: { min:0, grid:{color:'rgba(0,0,0,0.07)'}, ticks:{color:'#7a7060',font:{family:"'IBM Plex Mono',monospace",size:9}, callback:v=>v>=1000?`${(v/1000).toFixed(0)}k`:v}, border:{color:'#ddd8cc'} }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ═══ CHART 3 — MANCHE ══════════════════════════════════════════════════════
|
||||
new Chart(document.getElementById('mancheChart').getContext('2d'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['2022','2023','2024'],
|
||||
datasets: [{
|
||||
data: [9924,7077,5083],
|
||||
backgroundColor: ['rgba(201,79,26,0.7)','rgba(45,122,74,0.65)','rgba(45,122,74,0.65)'],
|
||||
borderColor: ['#c94f1a','#2d7a4a','#2d7a4a'],
|
||||
borderWidth:1.5, borderRadius:1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive:true, maintainAspectRatio:false,
|
||||
plugins: {
|
||||
legend:{display:false},
|
||||
tooltip:{
|
||||
backgroundColor:'#fff', borderColor:'#ddd8cc', borderWidth:1,
|
||||
titleColor:'#b8860b', bodyColor:'#1a1a14',
|
||||
titleFont:{family:"'IBM Plex Mono',monospace",size:10},
|
||||
bodyFont:{family:"'Source Serif 4',serif",size:12},
|
||||
callbacks:{
|
||||
title: i => `Manche (50) — ${i[0].label}`,
|
||||
label: item => ` ${item.raw.toLocaleString('fr-FR')} nids localisés & signalés`,
|
||||
afterLabel: () => ' Source : FDGDON Manche — bilan annuel'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: { grid:{color:'rgba(0,0,0,0.07)'}, ticks:{color:'#7a7060',font:{family:"'IBM Plex Mono',monospace",size:9}}, border:{color:'#ddd8cc'} },
|
||||
y: { min:0, grid:{color:'rgba(0,0,0,0.07)'}, ticks:{color:'#7a7060',font:{family:"'IBM Plex Mono',monospace",size:9}, callback:v=>v.toLocaleString('fr-FR')}, border:{color:'#ddd8cc'} }
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user