Spaces:
Running
Running
| <html lang="fr" data-fr-theme="light" data-fr-scheme="light"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tableau de bord COP Régionales — Comparaison des KPIs</title> | |
| <!-- DSFR --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.11.2/dist/dsfr/dsfr.min.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.11.2/dist/utility/utility.min.css"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <!-- ====== HEADER ====== --> | |
| <header role="banner" class="fr-header"> | |
| <div class="fr-header__body"> | |
| <div class="fr-container"> | |
| <div class="fr-header__body-row"> | |
| <div class="fr-header__brand fr-enlarge-link"> | |
| <div class="fr-header__brand-top"> | |
| <div class="fr-header__logo"> | |
| <p class="fr-logo"> | |
| République<br>Française | |
| </p> | |
| </div> | |
| </div> | |
| <div class="fr-header__service"> | |
| <p class="fr-header__service-title">Tableau de bord COP Régionales</p> | |
| <p class="fr-header__service-tagline">Comparaison des KPIs de planification écologique — 4 régions</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- ====== MAIN ====== --> | |
| <main role="main" id="main-content"> | |
| <div class="fr-container fr-my-6w"> | |
| <!-- Section synthèse --> | |
| <section id="synthese" class="fr-mb-6w"> | |
| <h2>Synthèse par thématique</h2> | |
| <p class="fr-text--lg"> | |
| Aperçu des <strong>KPIs extraits</strong> des feuilles de route COP de | |
| <span class="region-badge region-grand-est">Grand Est</span>, | |
| <span class="region-badge region-occitanie">Occitanie</span>, | |
| <span class="region-badge region-aura">Auvergne-Rhône-Alpes</span> et | |
| <span class="region-badge region-normandie">Normandie</span>. | |
| Cliquez sur une tuile pour filtrer. | |
| </p> | |
| <div class="fr-grid-row fr-grid-row--gutters" id="tiles-container"></div> | |
| </section> | |
| <!-- Section filtres + tableau --> | |
| <section id="comparaison" class="fr-mb-6w"> | |
| <h2>Comparaison détaillée des KPIs</h2> | |
| <!-- Filtres --> | |
| <div class="fr-grid-row fr-grid-row--gutters fr-mb-3w filters-bar"> | |
| <div class="fr-col-12 fr-col-md-4"> | |
| <div class="fr-select-group"> | |
| <label class="fr-label" for="filter-category">Thématique</label> | |
| <select class="fr-select" id="filter-category" onchange="filterTable()"> | |
| <option value="all">Toutes les thématiques</option> | |
| <option value="Transports & Mobilités">🚲 Transports & Mobilités</option> | |
| <option value="Bâtiment : Résidentiel & Tertiaire">🏠 Bâtiment</option> | |
| <option value="Énergie & Économie circulaire">⚡ Énergie</option> | |
| <option value="Industrie & Emploi">🏭 Industrie</option> | |
| <option value="Biodiversité, Eau & Sols">🌿 Biodiversité, Eau & Sols</option> | |
| <option value="Agriculture, Forêt & Alimentation">🌾 Agriculture</option> | |
| <option value="Déchets">♻️ Déchets</option> | |
| <option value="Santé, Sport & Culture">🏥 Santé</option> | |
| <option value="Emploi & Formation">🎓 Emploi & Formation</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="fr-col-12 fr-col-md-4"> | |
| <div class="fr-input-group"> | |
| <label class="fr-label" for="search-input">Rechercher</label> | |
| <input class="fr-input" type="text" id="search-input" | |
| placeholder="ex: vélo, eau, fioul…" | |
| oninput="filterTable()"> | |
| </div> | |
| </div> | |
| <div class="fr-col-12 fr-col-md-4"> | |
| <div class="fr-toggle" style="margin-top: 1.5rem;"> | |
| <input type="checkbox" class="fr-toggle__input" | |
| id="toggle-comparable" onchange="filterTable()"> | |
| <label class="fr-toggle__label" for="toggle-comparable"> | |
| Uniquement les KPIs comparables | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tableau --> | |
| <div class="fr-table table-wrapper"> | |
| <table id="kpi-table"> | |
| <thead> | |
| <tr> | |
| <th scope="col" class="col-indicateur">Indicateur / KPI</th> | |
| <th scope="col" class="col-region"> | |
| <span class="region-badge region-grand-est">Grand Est</span> | |
| </th> | |
| <th scope="col" class="col-region"> | |
| <span class="region-badge region-occitanie">Occitanie</span> | |
| </th> | |
| <th scope="col" class="col-region"> | |
| <span class="region-badge region-aura">AURA</span> | |
| </th> | |
| <th scope="col" class="col-region"> | |
| <span class="region-badge region-normandie">Normandie</span> | |
| </th> | |
| <th scope="col" class="col-comparable">Comparable</th> | |
| </tr> | |
| </thead> | |
| <tbody id="kpi-tbody"></tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <!-- Section Sources --> | |
| <section id="sources" class="fr-mb-6w"> | |
| <h2>Sources</h2> | |
| <p>Les données proviennent des feuilles de route officielles des COP régionales. Chaque valeur dans le tableau est accompagnée d'un lien vers la page exacte du PDF source (cliquez sur <code>p.XX</code>).</p> | |
| <div class="fr-grid-row fr-grid-row--gutters"> | |
| <div class="fr-col-12 fr-col-md-6 fr-col-lg-3"> | |
| <div class="fr-card fr-card--no-arrow"> | |
| <div class="fr-card__body"> | |
| <div class="fr-card__content"> | |
| <h3 class="fr-card__title"> | |
| <a href="https://www.prefectures-regions.gouv.fr/grand-est/grand-est/irecontenu/telechargement/120569/895203/file/20240927_Grand_Est_Planification_ecologique_feuille_de_route.pdf" target="_blank" rel="noopener"> | |
| Grand Est | |
| </a> | |
| </h3> | |
| <p class="fr-card__desc">Feuille de route 2024-2025 — 18 engagements, 80 actions (71 pages)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="fr-col-12 fr-col-md-6 fr-col-lg-3"> | |
| <div class="fr-card fr-card--no-arrow"> | |
| <div class="fr-card__body"> | |
| <div class="fr-card__content"> | |
| <h3 class="fr-card__title"> | |
| <a href="https://www.prefectures-regions.gouv.fr/occitanie/irecontenu/telechargement/123908/917834/file/feuille_de_route_cop.pdf" target="_blank" rel="noopener"> | |
| Occitanie | |
| </a> | |
| </h3> | |
| <p class="fr-card__desc">Feuille de route COP — 69 objectifs régionaux, 91 actions (116 pages)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="fr-col-12 fr-col-md-6 fr-col-lg-3"> | |
| <div class="fr-card fr-card--no-arrow"> | |
| <div class="fr-card__body"> | |
| <div class="fr-card__content"> | |
| <h3 class="fr-card__title"> | |
| <a href="https://www.prefectures-regions.gouv.fr/content/download/133679/980081/version/1/file/COP-AURA_202512-feuilleroute+COP+regional.pdf" target="_blank" rel="noopener"> | |
| Auvergne-Rhône-Alpes | |
| </a> | |
| </h3> | |
| <p class="fr-card__desc">Feuille de route 2024-2030 — 26 défis, ~100 actions (198 pages)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="fr-col-12 fr-col-md-6 fr-col-lg-3"> | |
| <div class="fr-card fr-card--no-arrow"> | |
| <div class="fr-card__body"> | |
| <div class="fr-card__content"> | |
| <h3 class="fr-card__title"> | |
| <a href="https://www.prefectures-regions.gouv.fr/normandie/irecontenu/telechargement/122983/912028/file/COP%20Normandie_FDR%20vf.pdf" target="_blank" rel="noopener"> | |
| Normandie | |
| </a> | |
| </h3> | |
| <p class="fr-card__desc">Feuille de route 2025-2030 — ~250 actions dont ~50 en 2025 (31 pages)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section Méthodologie --> | |
| <section id="methodologie" class="fr-mb-6w"> | |
| <h2>Méthodologie</h2> | |
| <div class="fr-callout"> | |
| <p class="fr-callout__text"> | |
| Les KPIs ont été extraits par analyse textuelle automatisée (pdfplumber + Mistral OCR pour Normandie) des feuilles de route officielles. | |
| <strong>Les périmètres, horizons temporels et unités ne sont pas toujours strictement identiques entre régions.</strong> | |
| Un KPI est marqué « comparable » lorsqu'au moins 3 régions ont un objectif chiffré ou qualitatif sur le même thème. | |
| </p> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <!-- ====== FOOTER ====== --> | |
| <footer class="fr-footer" role="contentinfo"> | |
| <div class="fr-container"> | |
| <div class="fr-footer__body"> | |
| <div class="fr-footer__brand fr-enlarge-link"> | |
| <p class="fr-logo"> | |
| République<br>Française | |
| </p> | |
| </div> | |
| <div class="fr-footer__content"> | |
| <p class="fr-footer__content-desc"> | |
| Outil de comparaison des KPIs des COP régionales — données extraites des feuilles de route officielles. | |
| </p> | |
| <ul class="fr-footer__content-list"> | |
| <li class="fr-footer__content-item"> | |
| <a class="fr-footer__content-link" href="https://www.info.gouv.fr/grand-dossier/france-nation-verte" target="_blank" rel="noopener"> | |
| France Nation Verte | |
| </a> | |
| </li> | |
| <li class="fr-footer__content-item"> | |
| <a class="fr-footer__content-link" href="https://www.ecologie.gouv.fr/cop-regionales" target="_blank" rel="noopener"> | |
| COP Régionales | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="fr-footer__bottom"> | |
| <ul class="fr-footer__bottom-list"> | |
| <li class="fr-footer__bottom-item"> | |
| <span class="fr-footer__bottom-link">Données à jour : Février 2025</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Scripts --> | |
| <script src="https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.11.2/dist/dsfr/dsfr.module.min.js" type="module"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@gouvfr/dsfr@1.11.2/dist/dsfr/dsfr.nomodule.min.js" nomodule></script> | |
| <script src="data.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |