Fiche Descriptive Complète : Chantilly Air · Bel Air
🔷 INFORMATIONS GÉNÉRALES
Champ Détail
Nom du template chantilly_air_bel_air_pollution_control.html
Version 1.0.0
Date de création 18/03/2026
Auteur / Designer Refoia Jeremy Tech (Inspiration Luxe & Environnement)
Type de page Landing Page / Dashboard de Surveillance
Objectif principal Présenter les relevés de pollution atmosphérique avec une esthétique « Haut de Gamme ».
🎯 DESCRIPTION FONCTIONNELLE
📌 Que fait ce template ?
Ce template fusionne l’univers du patrimoine historique (Chantilly) et du luxe résidentiel (Bel Air) pour présenter des données techniques sur la qualité de l’air. Il structure les informations via une bannière Hero immersive, des fiches techniques sur les équipements, et un tableau de bord des mesures récentes (PM2.5, O₃, etc.).
📌 Public cible (Persona)
👤 Techniciens environnementaux : Pour la consultation rapide des derniers relevés validés.
👤 Gestionnaires de domaines : Soucieux de l’image de marque et de l’excellence écologique.
👤 Résidents / Visiteurs : Cherchant à être rassurés sur la pureté de l’air environnant.
⚙️ SPÉCIFICATIONS TECHNIQUES
🌐 Environnement & Compatibilité
Standard HTML : HTML5 sémantique.
Framework CSS : CSS Pur (Custom Properties) avec une architecture visuelle riche.
Framework JS : Aucun (Statique, prêt pour injection dynamique).
Browsers ciblés : Chrome ✅ Firefox ✅ Safari ✅ Edge ✅.
Responsive : ✅ Oui — Adapté via Media Queries (Breakpoints à 800px).
📦 Dépendances / Assets
FontAwesome 6.0.0 : Utilisé pour l’iconographie technique (microscope, feuille, fiole).
Google Fonts / System : Utilisation de Segoe UI pour la clarté et Times New Roman pour l’aspect prestigieux/historique.
Images Distantes : Unsplash (Stations météo, paysages de manoirs).
📥 ENTRÉES — CONTENU DYNAMIQUE
# Nom de la variable Type Obligatoire Description
1 atmo_index int ✅ Indice ATMO global affiché dans la carte de données.
2 measure_rows array ✅ Liste des relevés (Lieu, Polluant, Valeur, Statut).
3 last_control_date date ❌ Date du dernier étalonnage des capteurs.
🧱 STRUCTURE DU FICHIER — DOM
index.html
nav.navbar : Navigation élégante avec logo thématique (Château + Feuille).
header.hero : Titre massif avec superposition de dégradés et icônes décoratives (🏛️, 🌿).
main.container :
div.card-panel : Introduction au métier avec lettrine et badge de données 2025.
div.grid-2col : Présentation des sites (Chantilly vs Bel Air) sous forme de cartes.
table.measure-table : Tableau des concentrations de polluants avec mise en évidence (.highlight).
div.tools-grid : Grille d’icônes pour les logiciels et équipements utilisés.
footer.footer : Signature de copyright et status des données en temps réel.
🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM
🎨 Palette de Couleurs (Bel Air Dark Green & Gold)
CSS
:root {
–color-forest: #1c2e1f; /* Fond principal (Sombre, Nature) */
–color-gold: #b29464; /* Bordures, accents, luxe */
–color-paper: #edeadb; /* Fond des cartes (Vieux papier) */
–color-text-dark: #27402b; /* Titres et textes sur fond clair */
–color-accent: #3b6240; /* Badges et boutons */
}
🔤 Typographie
Titres (H1, Section) : Times New Roman, serif (Tradition, Institutionnel).
Corps de texte : Segoe UI, sans-serif (Modernité technique, Lisibilité).
♿ ACCESSIBILITÉ & SEO
Sémantique : Utilisation de balises