diff --git a/articles/documentation-index 2.html b/articles/documentation-index 2.html
new file mode 100644
index 0000000..569a078
--- /dev/null
+++ b/articles/documentation-index 2.html	
@@ -0,0 +1,650 @@
+<!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>&copy; 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>
