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

Restaure index.html supprime par erreur, avec les masquages

Browse Source 
Le commit precedent avait supprime index.html au lieu de le modifier.
Ce commit le retablit dans son integralite (429 lignes) avec le
display:none sur la documentation et les rapports de veille.
This commit is contained in:
gauthier.chombart
2026-07-21 08:31:08 +02:00
parent f027dfcf4c
commit 0b818414ed
1 changed files with 429 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

429
index.html Normal file
View File

@@ -0,0 +1,429 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gauthier Chombart & Nathan Chauwin - Formations Certibiocide & Techniques</title>
<!-- SEO de base -->
<meta name="description" content="Formations Certibiocide pratiques et interactives par des formateurs indépendants experts. Exercices, documentation technique sur les nuisibles et rapports de veille réglementaire.">
<meta name="keywords" content="Certibiocide, formation biocides, hygiène professionnelle, nuisibles, désinfection, 3D, ESOD, formateurs indépendants">
<meta name="author" content="Gauthier Chombart, Nathan Chauwin">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://nextgnformation.bsite.net/">
<!-- Open Graph (partage sur les réseaux sociaux et LinkedIn) -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://nextgnformation.bsite.net/">
<meta property="og:title" content="Gauthier Chombart & Nathan Chauwin - Formations Certibiocide & Techniques">
<meta property="og:description" content="Formations Certibiocide pratiques et interactives par des formateurs indépendants experts. Exercices, documentation technique sur les nuisibles et rapports de veille réglementaire.">
<meta property="og:locale" content="fr_FR">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Gauthier Chombart & Nathan Chauwin - Formations Certibiocide & Techniques">
<meta name="twitter:description" content="Formations Certibiocide pratiques et interactives par des formateurs indépendants experts.">
<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>
<div class="logo">Gauthier Chombart & Nathan Chauwin</div>
<nav>
<a href="#formations">Exercices interactifs</a>
<a href="#documentation" style="display:none;">Documentation</a>
<a href="#rapports" style="display:none;">Rapports de veille</a>
<a href="#about">À propos</a>
<a href="#contact">Contact</a>
</nav>
</header>
<!-- PROGRESS BAR -->
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
<main>
<!-- HERO SECTION -->
<section class="hero">
<div class="hero-content">
<h1>Formateurs <span class="accent">Certibiocide</span><br>indépendants</h1>
<p>Maîtrisez les compétences essentielles en hygiène, biocides et sécurité. Formations pratiques, interactives et certifiantes pour les professionnels.</p>
<div class="cta-group">
<a href="#formations" class="btn btn-primary">Suivre les exercices interactifs</a>
<a href="#documentation" class="btn btn-secondary" style="display:none;">Documentation</a>
<a href="#rapports" class="btn btn-secondary" style="display:none;">Rapports de veille</a>
</div>
<div class="stats">
<div class="stat-card">
<div class="stat-label">En 2026</div>
<div class="stat-number">309</div>
<div class="stat-label">Stagiaires certifiés</div>
</div>
<div class="stat-card">
<div class="stat-label">Exercices</div>
<div class="stat-number">100%</div>
<div class="stat-label">Pratiques & Interactifs</div>
</div>
<div class="stat-card">
<a href="#about" style="position: absolute; inset: 0; z-index: 3;"></a>
<div class="stat-label">En savoir</div>
<div class="stat-number">+</div>
<div class="stat-label">Sur nous</div>
</div>
</div>
</div>
</section>
<!-- FORMATIONS SECTION -->
<section id="formations" class="formations-section">
<div class="section-header">
<h2>Nos Exercices</h2>
<p>Explorez nos exercices ludiques et détaillés, conçus pour répondre à vos besoins en matière de connaissances théoriques et compétences techniques.</p>
</div>
<div class="formations-grid">
<!-- Formation 1: BioCID Exercises -->
<div class="formation-card">
<div class="formation-header">
<div class="formation-icon">🧪</div>
<h3 class="formation-title">Plateforme BioCID</h3>
<p class="formation-subtitle">Premiers pas</p>
</div>
<div class="formation-body">
<p class="formation-description">Exercices interactifs spécialisés dans les biocides et leurs applications. Pratique approfondie et validation des connaissances.</p>
<a href="exercices/Exo_BioCID.html" class="formation-link">Accéder</a>
</div>
</div>
<!-- Formation 2: FDS, FT et Étiquettes -->
<div class="formation-card">
<div class="formation-header">
<div class="formation-icon">📋</div>
<h3 class="formation-title">FDS, FT & Étiquettes</h3>
<p class="formation-subtitle">Aller plus loin</p>
</div>
<div class="formation-body">
<p class="formation-description">Maîtrisez les Fiches de Données de Sécurité, fiches techniques et étiquetage. Formation complète et pratique.</p>
<a href="exercices/Exo_FDS.html" class="formation-link">Accéder</a>
</div>
</div>
<!-- Formation 3: TP Nuisibles final -->
<div class="formation-card">
<div class="formation-header">
<div class="formation-icon">📚</div>
<h3 class="formation-title">TP Nuisibles final</h3>
<p class="formation-subtitle">Étude de cas</p>
</div>
<div class="formation-body">
<p class="formation-description">Exercices pratiques et complets pour maîtriser la certification Certibiocide. Contenu détaillé et progressif.</p>
<a href="exercices/TP_Nuisibles.html" class="formation-link">Accéder</a>
</div>
</div>
<!-- Formation 4: Pictogrammes de danger -->
<div class="formation-card">
<div class="formation-header">
<div class="formation-icon">⚠️</div>
<h3 class="formation-title">Pictogrammes de danger</h3>
<p class="formation-subtitle">Jeu interactif</p>
</div>
<div class="formation-body">
<p class="formation-description">Identifiez et mémorisez les pictogrammes de danger des substances chimiques. Jeu ludique pour maîtriser la classification GHS.</p>
<a href="exercices/memory-pictogrammes/memory.html" class="formation-link">Jouer</a>
</div>
</div>
<!-- Correction : page unique pour tous les exercices -->
<div class="formation-card">
<div class="formation-header">
<div class="formation-icon">✅</div>
<h3 class="formation-title">Corriger un exercice</h3>
<p class="formation-subtitle">Correction des rendus</p>
</div>
<div class="formation-body">
<p class="formation-description">Déposez le PDF exporté par un groupe et obtenez la lecture de son rendu. Page unique de correction pour l'ensemble des exercices.</p>
<a href="exercices/corriger-exercice.html" class="formation-link">Corriger</a>
</div>
</div>
</div>
</section>
<!-- DOCUMENTATION TECHNIQUE SECTION -->
<section id="documentation" class="documentation-section" style="display:none;">
<div class="section-header">
<h2>Documentation technique et biologie des espèces</h2>
<p>Accédez à notre base de connaissances : études détaillées, analyses scientifiques et rapports techniques sur les nuisibles, les biocides et les enjeux réglementaires.</p>
</div>
<div class="documentation-grid">
<!-- Frelon Asiatique -->
<div class="doc-card">
<div class="doc-header">
<div class="doc-icon">🐝</div>
<h3 class="doc-title">Frelon asiatique (Vespa velutina nigrithorax) — Invasion de France</h3>
<p class="doc-subtitle">Date de rédaction : 25 mai 2026</p>
</div>
<div class="doc-body">
<p class="doc-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.</p>
<a href="articles/frelon_asiatique_evolution.html" class="doc-link">Consulter l'étude →</a>
</div>
</div>
</div>
<!-- Encadré "Voir tous les articles" -->
<div class="see-all-documentation">
<div class="see-all-content">
<div class="see-all-icon">📚</div>
<div class="see-all-text">
<h3>Voir tous les articles</h3>
<p>Explorez l'intégralité de notre base de connaissances avec recherche par mot-clé et filtrage par tags. Retrouvez toutes les pages de documentation technique et biologique.</p>
</div>
<a href="articles/documentation-index.html" class="see-all-link">
Accéder à l'index complet →
</a>
</div>
</div>
</section>
<!-- RAPPORTS DE VEILLE HEBDOMADAIRES -->
<section id="rapports" class="rapports-section" style="display:none;">
<div class="section-header">
<h2>Rapports de veille hebdomadaires</h2>
<p>Suivez chaque semaine l'actualité réglementaire, les opportunités de marché et les tendances du secteur Certibiocide en France et en Europe.</p>
</div>
<div class="rapports-intro">
<div class="rapports-intro-icon">📊</div>
<div class="rapports-intro-content">
<h3>8 rubriques thématiques couvrant l'écosystème Certibiocide</h3>
<p style="margin-top: 8px; font-size: 14px;">Réglementation • Marché formation • Nuisibles & ESOD • Désinfection • Opportunités • Innovation • Veille européenne • RH & Concurrence</p>
</div>
</div>
<div class="rapports-grid">
<!-- Semaine 21 -->
<div class="rapport-card">
<div class="rapport-header">
<div class="rapport-semaine">Semaine 21</div>
<div class="rapport-date">18-24 mai 2026</div>
</div>
<div class="rapport-body">
<p class="rapport-highlight">⚠️ <strong>Faits clés :</strong></p>
<ul class="rapport-list">
<li>Loi anti-fraude formation définitivement adoptée (13 mai)</li>
<li>Non-renouvellement cyperméthrine en Europe</li>
<li>4 appels d'offres BOAMP 3D actifs</li>
<li>125+ offres d'emploi techniciens 3D</li>
</ul>
</div>
<a href="veille/rapports/veille-certibiocide-semaine-21.html" class="rapport-link">Consulter le rapport complet →</a>
</div>
<!-- Semaine 20 -->
<div class="rapport-card">
<div class="rapport-header">
<div class="rapport-semaine">Semaine 20</div>
<div class="rapport-date">11-17 mai 2026</div>
</div>
<div class="rapport-body">
<p class="rapport-highlight">⚠️ <strong>Faits clés :</strong></p>
<ul class="rapport-list">
<li>Actualisation réglementaire continue</li>
<li>Évolutions du marché formation</li>
<li>Surveillance nuisibles invasifs</li>
<li>Opportunités secteur 3D</li>
</ul>
</div>
<a href="veille/rapports/veille-certibiocide-semaine-20.html" class="rapport-link">Consulter le rapport complet →</a>
</div>
<!-- Archive -->
<div class="rapport-card">
<div class="rapport-header">
<div class="rapport-semaine">Archives</div>
<div class="rapport-date">Accès historique</div>
</div>
<div class="rapport-body">
<p class="rapport-highlight">📚 <strong>Consultez l'index complet :</strong></p>
<p style="font-size: 14px; margin-top: 10px;">Accédez à tous les rapports de veille précédents, classés par semaine et par rubrique thématique pour un suivi approfondi de l'évolution du secteur.</p>
</div>
<a href="veille/veille-index.html" class="rapport-link">Voir tous les rapports →</a>
</div>
</div>
</section>
<!-- ABOUT SECTION -->
<section id="about" class="about-section">
<div class="about-content">
<div class="about-text">
<h3>Qui sommes-nous ?</h3>
<p>Formateurs indépendants spécialisés dans les formations Certibiocide et les domaines techniques. Avec une expertise pointue en hygiène, biocides et sécurité, nous accompagnons les professionnels pour maîtriser les compétences essentielles.</p>
<div class="about-features">
<div class="feature-item">
<div class="feature-icon">✓</div>
<div class="feature-text">Formations conformes au programme du Ministère de la Transition écologique</div>
</div>
<div class="feature-item">
<div class="feature-icon">✓</div>
<div class="feature-text">Approche pratique et interactive</div>
</div>
<div class="feature-item">
<div class="feature-icon">✓</div>
<div class="feature-text">Contenus à jour avec la réglementation</div>
</div>
</div>
</div>
<div class="about-image">
<div class="about-profiles">
<a href="https://www.linkedin.com/in/nathan-chauwin-88a717183/" target="_blank" rel="noopener" class="profile-link">
<div class="profile-circle user inline">
<img src="data/Nathan.jpeg" alt="Profil Nathan" class="profile-image">
</div>
</a>
<a href="https://www.linkedin.com/in/gauthier-chombart-553606343/" target="_blank" rel="noopener" class="profile-link">
<div class="profile-circle user inline">
<img src="data/Gauthier.jpeg" alt="Profil Gauthier" class="profile-image">
</div>
</a>
</div>
</div>
</div>
</section>
<!-- CONTACT SECTION - DIRECTEMENT APRÈS ABOUT (SANS ESPACE) -->
<section class="contact-section" id="contact">
<div class="contact-container">
<h2>Nous contacter</h2>
<p>Une question sur nos formations ? Envoyez-nous un message et nous vous répondrons au plus vite.</p>
<form class="contact-form" id="contactForm">
<div class="form-group">
<label for="name">Nom complet</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Adresse email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="subject">Sujet</label>
<input type="text" id="subject" name="subject" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
</div>
<button type="submit" class="contact-submit">Envoyer</button>
<div class="form-message" id="formMessage"></div>
</form>
</div>
</section>
</main>
<footer>
<p>&copy; 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
<p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
</footer>
<script>
// Animation du compteur pour 309 stagiaires
document.addEventListener('DOMContentLoaded', function() {
const counterElement = document.querySelector('.stat-card:first-child .stat-number');
if (counterElement) {
const target = 309;
const duration = 2000; // 2 secondes
const startTime = Date.now();
function updateCounter() {
const now = Date.now();
const progress = Math.min((now - startTime) / duration, 1);
const currentNumber = Math.floor(progress * target);
counterElement.textContent = currentNumber;
if (progress < 1) {
requestAnimationFrame(updateCounter);
} else {
counterElement.textContent = target;
}
}
updateCounter();
}
});
// Progress bar au scroll
window.addEventListener('scroll', function() {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const scrollPercent = (scrollTop / docHeight) * 100;
const progressFill = document.querySelector('.progress-fill');
if (progressFill) {
progressFill.style.width = scrollPercent + '%';
}
});
// Gestion du formulaire de contact
const contactForm = document.getElementById('contactForm');
const formMessage = document.getElementById('formMessage');
if (contactForm) {
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('name').value.trim();
const email = document.getElementById('email').value.trim();
const subject = document.getElementById('subject').value.trim();
const message = document.getElementById('message').value.trim();
// Validation
if (!name || !email || !subject || !message) {
showMessage('Tous les champs sont requis.', 'error');
return;
}
// Validation email
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
showMessage('Veuillez entrer une adresse email valide.', 'error');
return;
}
// Construction du corps du message
const body = encodeURIComponent(
`Demande de contact\n\n` +
`Nom: ${name}\n` +
`Email: ${email}\n` +
`Sujet: ${subject}\n\n` +
`Message:\n${message}`
);
// Ouverture du client email
const mailtoLink = `mailto:gauthier.chombart@gmail.com?subject=${encodeURIComponent(subject)}&body=${body}`;
window.location.href = mailtoLink;
// Message de succès
showMessage('Votre message a été ouvert dans votre client email. Veuillez cliquer sur Envoyer pour confirmer.', 'success');
// Réinitialisation après 3 secondes
setTimeout(() => {
contactForm.reset();
formMessage.style.display = 'none';
}, 3000);
});
function showMessage(text, type) {
formMessage.textContent = text;
formMessage.className = `form-message ${type}`;
formMessage.style.display = 'block';
}
}
</script>
</body>
</html>