Feiras de inverno na Normandia – datas e locais em 2025

/* Contrainte hauteur max (outil) */ #infographie-brocantes-normandie-2025 { max-height: 2000px; overflow: auto; scroll-behavior: smooth; } /* Petits raffinements UI */ .card { background: rgba(255,255,255,.9); border: 1px solid rgba(15, 23, 42, .10); box-shadow: 0 10px 25px rgba(2, 6, 23, .08); border-radius: 16px; } .chip { border: 1px solid rgba(15, 23, 42, .14); background: rgba(248, 250, 252, .9); } .btn { border: 1px solid rgba(15, 23, 42, .18); background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.9)); box-shadow: 0 8px 18px rgba(2,6,23,.08); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(2,6,23,.12); } .btn:active { transform: translateY(0px); box-shadow: 0 6px 14px rgba(2,6,23,.10); } .btnPrimary { border-color: rgba(2, 132, 199, .35); background: linear-gradient(180deg, rgba(14,165,233,.15), rgba(255,255,255,.92)); } .kpi { background: linear-gradient(180deg, rgba(2, 132, 199, .10), rgba(255,255,255,.85)); border: 1px solid rgba(2, 132, 199, .18); border-radius: 16px; } .focusRing:focus { outline: 3px solid rgba(14, 165, 233, .55); outline-offset: 2px; } .tableRow:hover { background: rgba(2, 132, 199, .06); } /* Mini “carte” stylisée sans image */ .mapBox { background: radial-gradient(1200px 400px at 30% 10%, rgba(14,165,233,.10), transparent 60%), radial-gradient(900px 300px at 80% 30%, rgba(99,102,241,.10), transparent 60%), linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.92)); border: 1px solid rgba(15, 23, 42, .10); border-radius: 16px; position: relative; overflow: hidden; } .deptDot { position: absolute; width: 12px; height: 12px; border-radius: 999px; background: rgba(14,165,233,.95); box-shadow: 0 6px 14px rgba(2,6,23,.18); border: 2px solid rgba(255,255,255,.95); transform: translate(-50%, -50%); } .deptDot[data-active=”true”] { background: rgba(99,102,241,.95); width: 14px; height: 14px; } .srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } } /** * Infographie interactive — Brocantes d’hiver en Normandie (2025) * Pur HTML + JS (sans images). * Toutes les chaînes sont en français et facilement éditables. * * —- API gratuite (optionnelle) —- * Cet outil n’a pas besoin d’API externe. * Si vous souhaitez auto-compléter des villes via un service gratuit : * API: https://geo.api.gouv.fr/communes?nom=caen&limit=5 * Exemple de réponse JSON : * [ * {“nom”:”Caen”,”code”:”14118″,”codesPostaux”:[“14000″],”codeDepartement”:”14″,”codeRegion”:”28″,”population”:106230} * ] * (Service public gratuit, sans clé.) */ (function () { // —————————– // TEXTES (i18n FR – éditables) // —————————– const TEXTES = { mois: { “01”: “Janvier”, “02”: “Février”, “03”: “Mars” }, tous: “Tous”, statut: { confirme: “Confirmé”, aVerifier: “À vérifier” }, types: { brocante: “Brocante”, videGreniers: “Vide-greniers”, marche: “Marché / salon” }, chips: { recherche: “Recherche”, mois: “Mois”, departement: “Département”, type: “Type”, raccourci: “Raccourci” }, toast: { copieOk: “Résumé copié dans le presse-papiers.”, copieKo: “Impossible de copier automatiquement. Sélectionnez puis copiez manuellement.”, csvOk: “CSV généré.”, rienAExporter: “Rien à exporter (aucun résultat).” } }; // —————————– // DATA (remplacez par vos “dates et lieux 2025”) // IMPORTANT : l’utilisateur n’a fourni aucune liste exploitable. // Je propose donc un jeu d’exemple + structure prête à compléter. // —————————– const EVENEMENTS = [ { id: “bn25-0001”, dateISO: “2025-01-05”, ville: “Caen”, deptCode: “14”, deptNom: “Calvados”, type: TEXTES.types.videGreniers, nom: “Vide-greniers du début d’année”, lieu: “Salle / quartier à préciser”, statut: TEXTES.statut.aVerifier, tags: [“famille”] }, { id: “bn25-0002”, dateISO: “2025-01-12”, ville: “Rouen”, deptCode: “76”, deptNom: “Seine-Maritime”, type: TEXTES.types.brocante, nom: “Brocante d’hiver (centre-ville)”, lieu: “Zone centrale (à confirmer)”, statut: TEXTES.statut.aVerifier, tags: [“incontournable”] }, { id: “bn25-0003”, dateISO: “2025-02-02”, ville: “Cherbourg-en-Cotentin”, deptCode: “50”, deptNom: “Manche”, type: TEXTES.types.marche, nom: “Marché thématique & occasion”, lieu: “Halle / espace couvert (à préciser)”, statut: TEXTES.statut.aVerifier, tags: [“famille”] }, { id: “bn25-0004”, dateISO: “2025-02-16”, ville: “Évreux”, deptCode: “27”, deptNom: “Eure”, type: TEXTES.types.videGreniers, nom: “Vide-greniers (hiver)”, lieu: “Gymnase / salle (à préciser)”, statut: TEXTES.statut.aVerifier, tags: [] }, { id: “bn25-0005”, dateISO: “2025-03-09”, ville: “Alençon”, deptCode: “61”, deptNom: “Orne”, type: TEXTES.types.brocante, nom: “Brocante de fin d’hiver”, lieu: “Centre / place (à confirmer)”, statut: TEXTES.statut.aVerifier, tags: [“incontournable”] } ]; // —————————– // Helpers // —————————– const $ = (sel, root = document) => root.querySelector(sel); const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel)); function pad2(n) { return String(n).padStart(2, “0”); } function parseISODate(iso) { // iso attendu: YYYY-MM-DD const [y, m, d] = iso.split(“-“).map(Number); return new Date(y, m – 1, d); } function formatDateFR(iso) { const dt = parseISODate(iso); const day = pad2(dt.getDate()); const month = pad2(dt.getMonth() + 1); const year = dt.getFullYear(); return `${day}/${month}/${year}`; } function monthKeyFromISO(iso) { return iso.split(“-“)[1]; // “01”..”12″ } function normalize(str) { return (str || “”) .toString() .trim() .toLowerCase() .normalize(“NFD”) .replace(/[u0300-u036f]/g, “”); } function uniq(arr) { return Array.from(new Set(arr)); } function compareStrFR(a, b) { return a.localeCompare(b, “fr”, { sensitivity: “base” }); } function buildCSV(rows) { const header = [“Date”, “Ville”, “Département”, “Type”, “Nom”, “Lieu”, “Statut”]; const lines = [header]; for (const r of rows) { lines.push([ formatDateFR(r.dateISO), r.ville, `${r.deptNom} (${r.deptCode})`, r.type, r.nom, r.lieu, r.statut ]); } // CSV simple avec échappement des guillemets const csv = lines .map(cols => cols.map(v => `”${String(v ?? “”).replaceAll(‘”‘, ‘””‘)}”`).join(“;”)) .join(“n”); return csv; } function downloadText(filename, text, mime) { const blob = new Blob([text], { type: mime || “text/plain;charset=utf-8” }); const url = URL.createObjectURL(blob); const a = document.createElement(“a”); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 500); } function setToast(msg) { const el = $(“#bn25-toast”); el.textContent = msg; // mini “auto-clear” discret window.clearTimeout(setToast._t); setToast._t = window.setTimeout(() => { el.textContent = “”; }, 3500); } // —————————– // Etat UI // —————————– const state = { search: “”, month: “TOUS”, dept: “TOUS”, type: “TOUS”, sort: “DATE_ASC”, quick: null // WEEKEND | FAMILLE | INCONTOURNABLES | null }; // —————————– // Init selects (dept/type) // —————————– function initSelects() { const depts = uniq(EVENEMENTS.map(e => `${e.deptNom}|||${e.deptCode}`)) .map(x => { const [deptNom, deptCode] = x.split(“|||”); return { deptNom, deptCode }; }) .sort((a, b) => compareStrFR(a.deptNom, b.deptNom)); const types = uniq(EVENEMENTS.map(e => e.type)).sort(compareStrFR); const deptSel = $(“#bn25-dept”); for (const d of depts) { const opt = document.createElement(“option”); opt.value = d.deptCode; opt.textContent = `${d.deptNom} (${d.deptCode})`; deptSel.appendChild(opt); } const typeSel = $(“#bn25-type”); for (const t of types) { const opt = document.createElement(“option”); opt.value = t; opt.textContent = t; typeSel.appendChild(opt); } } // —————————– // Filtrage / tri // —————————– function applyQuickShortcut(list) { if (!state.quick) return list; if (state.quick === “FAMILLE”) { return list.filter(e => (e.tags || []).includes(“famille”)); } if (state.quick === “INCONTOURNABLES”) { return list.filter(e => (e.tags || []).includes(“incontournable”)); } if (state.quick === “WEEKEND”) { // Heuristique “prochains week-ends” (sans API): on garde sam/dim return list.filter(e => { const dt = parseISODate(e.dateISO); const day = dt.getDay(); // 0 dim, 6 sam return day === 0 || day === 6; }); } return list; } function filteredEvents() { let list = […EVENEMENTS]; // Mois if (state.month !== “TOUS”) { list = list.filter(e => monthKeyFromISO(e.dateISO) === state.month); } // Département if (state.dept !== “TOUS”) { list = list.filter(e => e.deptCode === state.dept); } // Type if (state.type !== “TOUS”) { list = list.filter(e => e.type === state.type); } // Recherche (ville, nom, type, département) const q = normalize(state.search); if (q) { list = list.filter(e => { const hay = normalize( `${e.ville} ${e.nom} ${e.type} ${e.deptNom} ${e.deptCode} ${e.lieu} ${e.statut}` ); return hay.includes(q); }); } // Raccourci list = applyQuickShortcut(list); // Tri const s = state.sort; if (s === “DATE_ASC”) list.sort((a, b) => parseISODate(a.dateISO) – parseISODate(b.dateISO)); if (s === “DATE_DESC”) list.sort((a, b) => parseISODate(b.dateISO) – parseISODate(a.dateISO)); if (s === “VILLE_ASC”) list.sort((a, b) => compareStrFR(a.ville, b.ville)); if (s === “DEPT_ASC”) list.sort((a, b) => compareStrFR(a.deptNom, b.deptNom)); return list; } // —————————– // Render: chips // —————————– function renderChips() { const wrap = $(“#bn25-activeChips”); wrap.innerHTML = “”; const chips = []; if (state.search.trim()) chips.push({ k: “search”, label: `${TEXTES.chips.recherche} : « ${state.search.trim()} »` }); if (state.month !== “TOUS”) chips.push({ k: “month”, label: `${TEXTES.chips.mois} : ${TEXTES.mois[state.month] || state.month}` }); if (state.dept !== “TOUS”) { const d = EVENEMENTS.find(e => e.deptCode === state.dept); const label = d ? `${d.deptNom} (${d.deptCode})` : state.dept; chips.push({ k: “dept”, label: `${TEXTES.chips.departement} : ${label}` }); } if (state.type !== “TOUS”) chips.push({ k: “type”, label: `${TEXTES.chips.type} : ${state.type}` }); if (state.quick) { const map = { WEEKEND: “Prochains week-ends”, FAMILLE: “Idées sortie en famille”, INCONTOURNABLES: “Incontournables” }; chips.push({ k: “quick”, label: `${TEXTES.chips.raccourci} : ${map[state.quick] || state.quick}` }); } if (!chips.length) { const span = document.createElement(“span”); span.className = “text-xs text-slate-600”; span.textContent = “Aucun (vue complète).”; wrap.appendChild(span); return; } for (const c of chips) { const chip = document.createElement(“button”); chip.type = “button”; chip.className = “chip focusRing inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-semibold text-slate-800”; chip.setAttribute(“aria-label”, `Retirer le filtre : ${c.label}`); chip.innerHTML = `${c.label}×`; chip.addEventListener(“click”, () => { if (c.k === “search”) { state.search = “”; $(“#bn25-search”).value = “”; } if (c.k === “month”) { state.month = “TOUS”; $(“#bn25-month”).value = “TOUS”; } if (c.k === “dept”) { state.dept = “TOUS”; $(“#bn25-dept”).value = “TOUS”; syncMapActiveDept(); } if (c.k === “type”) { state.type = “TOUS”; $(“#bn25-type”).value = “TOUS”; } if (c.k === “quick”) { state.quick = null; } renderAll(); }); wrap.appendChild(chip); } } // —————————– // Render: tableau // —————————– function renderTable() { const tbody = $(“#bn25-tbody”); const empty = $(“#bn25-empty”); const rows = filteredEvents(); tbody.innerHTML = “”; if (!rows.length) { empty.classList.remove(“hidden”); return; } empty.classList.add(“hidden”); for (const e of rows) { const tr = document.createElement(“tr”); tr.className = “tableRow border-t border-slate-100 align-top”; tr.tabIndex = 0; // Détails (bloc repliable) const detailId = `detail-${e.id}`; const googleQ = encodeURIComponent(`${e.nom} ${e.ville} ${e.deptCode} horaires`); const mapsQ = encodeURIComponent(`${e.ville} ${e.deptNom}`); tr.innerHTML = ` ${formatDateFR(e.dateISO)} ${e.ville} ${e.deptNom} (${e.deptCode}) ${e.type} ${e.statut} Détails `; const detailTr = document.createElement(“tr”); detailTr.className = “hidden border-t border-slate-100 bg-slate-50/60”; detailTr.id = detailId; detailTr.innerHTML = ` `; const detailsBtn = tr.querySelector(“button[aria-controls]”); const toggle = (force) => { const isOpen = !detailTr.classList.contains(“hidden”); const next = (typeof force === “boolean”) ? force : !isOpen; detailTr.classList.toggle(“hidden”, !next); detailsBtn.setAttribute(“aria-expanded”, String(next)); }; // Click ligne = toggle (mais pas si on clique un lien) tr.addEventListener(“click”, (ev) => { const tag = (ev.target && ev.target.tagName) ? ev.target.tagName.toLowerCase() : “”; if (tag === “a” || tag === “button”) return; toggle(); }); detailsBtn.addEventListener(“click”, () => toggle()); tr.addEventListener(“keydown”, (ev) => { if (ev.key === “Enter” || ev.key === ” “) { ev.preventDefault(); toggle(); } }); tbody.appendChild(tr); tbody.appendChild(detailTr); } } // —————————– // Render: KPI + accessibilité + carte // —————————– function renderKPI() { const rows = filteredEvents(); $(“#bn25-kpi-count”).textContent = String(rows.length); const scopeBits = []; if (state.month !== “TOUS”) scopeBits.push(TEXTES.mois[state.month] || state.month); if (state.dept !== “TOUS”) scopeBits.push(`Département ${state.dept}`); if (state.type !== “TOUS”) scopeBits.push(state.type); if (state.search.trim()) scopeBits.push(`Recherche « ${state.search.trim()} »`); if (state.quick) scopeBits.push(`Raccourci ${state.quick}`); $(“#bn25-kpi-scope”).textContent = scopeBits.length ? scopeBits.join(” • “) : “Vue complète (tous les événements)”; $(“#bn25-a11yStatus”).textContent = `${rows.length} événement(s) affiché(s).`; } function syncMapActiveDept() { $$(“.deptDot”).forEach(btn => { btn.dataset.active = (state.dept !== “TOUS” && btn.dataset.dept === state.dept) ? “true” : “false”; }); } function renderAll() { renderChips(); renderKPI(); renderTable(); syncMapActiveDept(); } // —————————– // Actions: export/copie // —————————– function exportCSV() { const rows = filteredEvents(); if (!rows.length) { setToast(TEXTES.toast.rienAExporter); return; } const csv = buildCSV(rows); downloadText(“brocantes-hiver-normandie-2025.csv”, csv, “text/csv;charset=utf-8”); setToast(TEXTES.toast.csvOk); } function copySummary() { const rows = filteredEvents(); const lines = []; lines.push(“Brocantes d’hiver en Normandie (2025) — Résultats”); lines.push(`Événements : ${rows.length}`); lines.push(“”); for (const e of rows.slice(0, 20)) { lines.push(`- ${formatDateFR(e.dateISO)} — ${e.ville} (${e.deptCode}) — ${e.type} — ${e.nom} — ${e.statut}`); } if (rows.length > 20) lines.push(`… +${rows.length – 20} autre(s)`); const text = lines.join(“n”); if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text) .then(() => setToast(TEXTES.toast.copieOk)) .catch(() => setToast(TEXTES.toast.copieKo)); } else { // fallback try { const ta = document.createElement(“textarea”); ta.value = text; ta.setAttribute(“readonly”, “true”); ta.style.position = “fixed”; ta.style.left = “-9999px”; document.body.appendChild(ta); ta.select(); document.execCommand(“copy”); ta.remove(); setToast(TEXTES.toast.copieOk); } catch (e) { setToast(TEXTES.toast.copieKo); } } } // —————————– // Actions: open/close all details // —————————– function setAllDetails(open) { const tbody = $(“#bn25-tbody”); const detailRows = $$(“tr[id^=’detail-bn25-‘]”, tbody); detailRows.forEach(dr => dr.classList.toggle(“hidden”, !open)); // Sync aria-expanded on buttons const btns = $$(“button[aria-controls^=’detail-bn25-‘]”, tbody); btns.forEach(b => b.setAttribute(“aria-expanded”, String(open))); } // —————————– // Bind events // —————————– function bind() { $(“#bn25-search”).addEventListener(“input”, (e) => { state.search = e.target.value || “”; renderAll(); }); $(“#bn25-month”).addEventListener(“change”, (e) => { state.month = e.target.value; renderAll(); }); $(“#bn25-dept”).addEventListener(“change”, (e) => { state.dept = e.target.value; state.quick = null; // éviter les superpositions surprises renderAll(); }); $(“#bn25-type”).addEventListener(“change”, (e) => { state.type = e.target.value; renderAll(); }); $(“#bn25-sort”).addEventListener(“change”, (e) => { state.sort = e.target.value; renderAll(); }); $(“#bn25-reset”).addEventListener(“click”, () => { state.search = “”; state.month = “TOUS”; state.dept = “TOUS”; state.type = “TOUS”; state.sort = “DATE_ASC”; state.quick = null; $(“#bn25-search”).value = “”; $(“#bn25-month”).value = “TOUS”; $(“#bn25-dept”).value = “TOUS”; $(“#bn25-type”).value = “TOUS”; $(“#bn25-sort”).value = “DATE_ASC”; renderAll(); }); $(“#bn25-export”).addEventListener(“click”, exportCSV); $(“#bn25-copy”).addEventListener(“click”, copySummary); $(“#bn25-openAll”).addEventListener(“click”, () => setAllDetails(true)); $(“#bn25-closeAll”).addEventListener(“click”, () => setAllDetails(false)); // Raccourcis $$(“button[data-quick]”).forEach(btn => { btn.addEventListener(“click”, () => { const q = btn.getAttribute(“data-quick”); // toggle si re-cliqué state.quick = (state.quick === q) ? null : q; // On ne force pas de filtres supplémentaires, mais on peut guider renderAll(); }); }); // Carte : clic sur dept dot $$(“.deptDot”).forEach(dot => { dot.addEventListener(“click”, () => { const dept = dot.dataset.dept; state.dept = (state.dept === dept) ? “TOUS” : dept; $(“#bn25-dept”).value = state.dept; state.quick = null; renderAll(); }); }); $(“#bn25-clearDeptFromMap”).addEventListener(“click”, () => { state.dept = “TOUS”; $(“#bn25-dept”).value = “TOUS”; renderAll(); }); } // —————————– // Boot // —————————– initSelects(); bind(); renderAll(); })();