• <section id="actions" aria-labelledby="actionsTitle">
  • <div class="section-head">
    • <div>
      • <h2 id="actionsTitle">Liste des actions recensées</h2>
      • <div style="color:var(--muted)">Cliquez sur une action pour consulter sa fiche détaillée.</div>
    • </div>
  • </div>
  • <div class="cards" id="cards"></div>
• </section>

• <div class="modal-head">
  • <button class="close" id="closeModal" aria-label="Fermer">×</button>
  • <div id="modalBadges" class="badge-row"></div>
  • <h2 id="modalTitle"></h2>
• </div>
• <div class="modal-body" id="modalBody"></div>

• <div class="inner">
  • <strong>Hub-Lo Centre-Val de Loire</strong>
  • <span>Données issues des PNT du Cher — édition 2025</span>
• </div>

• if (status

  "En projet") return "status-projet";

• if (status "En cours") return "status-cours";
• if (status

  "Réalisée") return "status-realisee";

• return ; } function badge(text, extra=) {
• return <span class="badge ${extra}">${escapeHtml(text)}</span>;

• return (value || ).replace(/[&<>"']/g, c => ({"&":"&","<":"<",">":">",'"':""","'":"'"}[c])); } function filtered() { const q = normalize(filters.search.value); return actions.filter(a => { const haystack = normalize(Object.values(a).join(" ")); return (!q || haystack.includes(q)) && (!filters.bassin.value || a.bassin === filters.bassin.value) && (!filters.thematique.value || a.thematique === filters.thematique.value) && (!filters.statut.value || a.avancement === filters.statut.value) && (!filters.annee.value || (a.annees || ).split(";").map(x=>x.trim()).includes(filters.annee.value));
• });

• const items = filtered();
• $("count").textContent = ${items.length} fiche${items.length > 1 ? "s" : ""} trouvée${items.length > 1 ? "s" : ""};
• if (!items.length) {
  • $("cards").innerHTML = <div class="empty">Aucune action ne correspond aux filtres sélectionnés.</div>;
  • return;
• }
• $("cards").innerHTML = items.map(a => <article class="card"> <div class="card-top"> <div class="badge-row"> ${badge(a.avancement, statusClass(a.avancement))} ${badge(a.annees || "Année non précisée")} </div> <h3>${escapeHtml(a.titre)}</h3> <p>${escapeHtml(a.resume)}</p> </div> <div class="card-meta"> <strong>${escapeHtml(a.bassin)}</strong><br> ${escapeHtml(a.thematique)} </div> <div class="card-footer"> <span>${escapeHtml(a.porteur || "Porteur à préciser")}</span> <button type="button" data-id="${a.id}">Voir la fiche →</button> </div> </article>).join(); document.querySelectorAll("[data-id]").forEach(btn => btn.addEventListener("click", () => openModal(btn.dataset.id))); } function detail(title, value, full=false) { if (!value) return ;
• return <section class="detail ${full ? "full" : ""}"><h3>${escapeHtml(title)}</h3><p>${escapeHtml(value)}</p></section>;

• const a = actions.find(x => x.id id);
• $("modalBadges").innerHTML = badge(a.avancement, statusClass(a.avancement)) + badge(a.annees || "Année non précisée") + badge(a.bassin);
• $("modalTitle").textContent = a.titre;
• $("modalBody").innerHTML =
  • detail("En bref", a.resume, true) +
  • detail("Constat / besoin", a.constat, true) +
  • detail("Objectifs", a.objectifs, true) +
  • detail("Publics bénéficiaires", a.publics) +
  • detail("Porteur principal", a.porteur) +
  • detail("Partenaires", a.partenaires, true) +
  • detail("Rôle du Hub-Lo", a.role, true) +
  • detail("Territoire / lieux", a.lieux || a.territoire) +
  • detail("Thématique", a.thematique + (a.sous_thematiques ? " — " + a.sous_thematiques : )) + detail("Résultats / réalisations", a.resultats, true) + detail("Contact", a.contact) + detail("Source", `${a.source}${a.page ? ", page " + a.page : }) + detail("Dernière mise à jour", a.maj); $("modal").showModal(); } $("closeModal").addEventListener("click", () => $("modal").close()); $("modal").addEventListener("click", e => { const r = $("modal").getBoundingClientRect(); if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) $("modal").close(); }); Object.values(filters).forEach(el => el.addEventListener("input", render)); $("reset").addEventListener("click", () => { filters.search.value = ""; filters.bassin.value = ""; filters.thematique.value = ""; filters.statut.value = ""; filters.annee.value = ""; render(); }); $("export").addEventListener("click", () => { const items = filtered(); const headers = ["ID","Bassin de vie","Intitulé","Avancement","Année(s)","Thématique","Porteur","Publics","Résumé"]; const lines = [headers, ...items.map(a => [a.id,a.bassin,a.titre,a.avancement,a.annees,a.thematique,a.porteur,a.publics,a.resume])]; const csv = lines.map(row => row.map(v =>"${(v||).replaceAll('"','')}"`).join(",")).join("\n");
• const blob = new Blob(["\ufeff"+csv], {type:"text/csv;charset=utf-8"});
• const url = URL.createObjectURL(blob);
• const link = document.createElement("a");
• link.href = url; link.download = "actions-pnt-cher-filtrees.csv"; link.click();
• URL.revokeObjectURL(url);

"Réalisée").length; $("statCours").textContent = actions.filter(a=>a.avancement