Venda de garatges i mercats de puces a Loire-Atlantique (44)

/* — Design (sans images) — */ #infographie-vide-greniers-44 .bg-grid { background-image: radial-gradient(transparent 1px, rgba(255,255,255,0.0) 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 10px 10px, 26px 26px, 26px 26px; background-position: 0 0, 0 0, 0 0; } #infographie-vide-greniers-44 .glass { background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 30px rgba(0,0,0,0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #infographie-vide-greniers-44 .chip { border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); } #infographie-vide-greniers-44 .focus-ring:focus { outline: 3px solid rgba(59,130,246,0.75); outline-offset: 2px; } #infographie-vide-greniers-44 .slider { accent-color: #60a5fa; } #infographie-vide-greniers-44 .bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.10); overflow: hidden; border: 1px solid rgba(255,255,255,0.10); } #infographie-vide-greniers-44 .bar > i { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, rgba(96,165,250,0.95), rgba(52,211,153,0.95)); transition: width 300ms ease; } /* Hauteur max (outil complet) */ #infographie-vide-greniers-44 .cap-height { max-height: 2000px; }

Donges

, un desviament a

Saint-Lumine-de-Coutais

o una parada a

Villeneuve-en-Retz

. Aquesta rotació evita la competència directa i obre nous estils d’objectes.

Dues pautes senzilles: comproveu l’estat (fusta, calaixos, olors) i imagineu com s’utilitzaria. Entre

Gorges

i

Nantes

, sovint podeu trobar mobles robustos per renovar; és aquí on el

mercat de puces es converteix en un veritable projecte de millora de la llar.

Ciutat

Tipus d’esdeveniment Enfocament específic

Nantes

Mercats de puces / Mercats d’antiguitats

Mobles, decoració vintage, taxacions ràpides Donges

Venda de garatge organitzada per associacions Eines, articles per a la llar, articles de taller Pornic

Mercat de puces costaner

/* === API externe 100% gratuite (sans clé) === Service : Open-Meteo (prévisions) URL (exemple Nantes) : https://api.open-meteo.com/v1/forecast?latitude=47.2184&longitude=-1.5536&current=temperature_2m,precipitation,rain,wind_speed_10m&timezone=Europe%2FParis Exemple de réponse JSON (extrait) : { « latitude »:47.22, « longitude »:-1.55, « current »:{ « time »: »2025-12-15T10:00″, « temperature_2m »:8.2, « precipitation »:0.0, « rain »:0.0, « wind_speed_10m »:12.3 } } */ (function () { // ============ Textes (FR) facilement éditables ============ const STR = { badge: « Infographie interactive », title: « Vide-greniers & brocantes en Loire-Atlantique (44) », subtitle: « Filtrez les événements, estimez votre budget et récupérez une checklist prête à copier. », filterTitle: « Trouver un vide-greniers (exemples) », filterDesc: « La liste ci-dessous est un exemple éditable. Vous pouvez remplacer les données par les vôtres. », disclaimer: « Remarque : cette infographie ne remplace pas les annonces officielles. Vérifiez toujours l’organisateur (horaires, annulation, météo, autorisations). », townLabel: « Commune », typeLabel: « Type », distanceLabel: « Distance maximale (km) », distanceHint: « Estimation basée sur un point de départ (modifiable) et une formule simple. », searchLabel: « Recherche (nom / détails) », resultsSuffix: « événement(s) correspondant(s) », sortLabel: « Tri », reset: « Réinitialiser », copySelection: « Copier ma sélection », weatherLabel: « Météo (gratuite) », weatherLoading1: « Chargement… », weatherLoading2: « — », weatherHint: « Astuce : privilégiez les matinées si risque de pluie. (Données Open-Meteo) », weatherLine: (city, t, rain, wind) => `${city} : ${t}°C • Pluie ${rain} mm • Vent ${wind} km/h`, budgetTitle: « Estimation rapide du budget », budgetDesc: « Ajustez vos paramètres pour obtenir une fourchette réaliste (carburant + achats + imprévus). », modeVisitor: « Mode : visiteur », modeExhibitor: « Mode : exposant », youAre: « Vous êtes », tripKm: « Trajet estimé (km) », conso: « Conso (L/100km) », fuelPrice: « Prix carburant (€/L) », buyBudget: « Budget achats (€) », buffer: « Marge imprévus », totalEstimated: « Total estimé », indicativeRange: « Fourchette indicative », min: « Minimum », comfort: « Confort », breakdownFuel: « Carburant », breakdownBuy: « Achats », breakdownFees: « Frais (exposant) », budgetNote: « Calcul simplifié : carburant = km × (conso/100) × prix. Les frais exposant sont estimés. », checklistTitle: « Checklist express », checklistDesc: « Cochez, puis copiez une liste propre à coller dans vos notes. », copy: « Copier », checkAll: « Tout cocher », uncheckAll: « Tout décocher », smartTips: « Conseils selon météo », tipsTitle: « Conseils rapides », toastCopied: « Copié dans le presse-papiers. », toastFallback: « Copie impossible automatiquement. Sélectionnez et copiez manuellement. » }; // ============ Données locales (exemples) ============ // IMPORTANT : vous pouvez remplacer ce tableau par « la data pour l’outils » si vous la collez ici. // Champs : id, nom, commune, type, dateISO, debut, fin, lat, lon, details const EVENTS = [ { id: « vg-nantes-01 », nom: « Vide-greniers du quartier (exemple) », commune: « Nantes », type: « Vide-greniers », dateISO: « 2026-04-12 », debut: « 08:00 », fin: « 18:00 », lat: 47.2184, lon: -1.5536, details: « Accès transports • Restauration • Toilettes » }, { id: « brc-reze-01 », nom: « Brocante de printemps (exemple) », commune: « Rezé », type: « Brocante », dateISO: « 2026-05-03 », debut: « 09:00 », fin: « 17:30 », lat: 47.1907, lon: -1.5686, details: « Professionnels & particuliers • Parking à proximité » }, { id: « vg-stherblain-01 », nom: « Vide-greniers associatif (exemple) », commune: « Saint-Herblain », type: « Vide-greniers », dateISO: « 2026-06-07 », debut: « 07:30 », fin: « 18:30 », lat: 47.2175, lon: -1.6493, details: « Entrée gratuite • Emplacements exposants sur réservation » }, { id: « brc-guerande-01 », nom: « Brocante & antiquités (exemple) », commune: « Guérande », type: « Brocante », dateISO: « 2026-07-19 », debut: « 08:30 », fin: « 19:00 », lat: 47.3282, lon: -2.4296, details: « Centre historique • Idéal pour chiner tôt » }, { id: « vg-saintnazaire-01 », nom: « Grand vide-greniers (exemple) », commune: « Saint-Nazaire », type: « Vide-greniers », dateISO: « 2026-08-23 », debut: « 08:00 », fin: « 18:00 », lat: 47.2733, lon: -2.2137, details: « Grande capacité • Zone ombragée partielle » } ]; // Point de départ (modifiable) : Nantes centre const START = { label: « Point de départ : Nantes », lat: 47.2184, lon: -1.5536 }; // ============ Checklist (FR) ============ const CHECKLIST_ITEMS = [ « Espèces (petites coupures) + monnaie », « Sac cabas / chariot / sacs solides », « Mètre ruban (meubles, cadres, vélos) », « Batterie externe + câble », « Lingettes / gel hydroalcoolique », « Bouteille d’eau + encas », « Vêtements adaptés (couche imperméable) », « Liste de ce que je cherche + budget max », « De quoi protéger les trouvailles (papier bulle, couverture) », « Pour exposants : table, bâche, ficelle, scotch, marqueur » ]; // ============ Helpers ============ const $ = (sel) => document.querySelector(sel); const root = $(« #infographie-vide-greniers-44 »); function formatDateFR(dateISO) { const d = new Date(dateISO + « T00:00:00 »); return d.toLocaleDateString(« fr-FR », { weekday: « short », year: « numeric », month: « long », day: « numeric » }); } // Haversine (distance km) function distanceKm(lat1, lon1, lat2, lon2) { const R = 6371; const toRad = (x) => x * Math.PI / 180; const dLat = toRad(lat2 – lat1); const dLon = toRad(lon2 – lon1); const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2; const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 – a)); return R * c; } function clamp(n, min, max) { return Math.max(min, Math.min(max, n)); } function euro(n) { const v = Number.isFinite(n) ? n : 0; return v.toLocaleString(« fr-FR », { style: « currency », currency: « EUR » }); } async function copyToClipboard(text) { try { await navigator.clipboard.writeText(text); showToast(STR.toastCopied); return true; } catch (e) { showToast(STR.toastFallback); return false; } } let toastTimer = null; function showToast(msg) { const toast = $(« #toast »); $(« #toastText »).textContent = msg; toast.classList.remove(« hidden »); if (toastTimer) clearTimeout(toastTimer); toastTimer = setTimeout(() => toast.classList.add(« hidden »), 2200); } // ============ UI init textes ============ function setStaticText() { $(« #txtBadge »).textContent = STR.badge; $(« #txtTitle »).textContent = STR.title; $(« #txtSubtitle »).textContent = STR.subtitle; $(« #txtFilterTitle »).textContent = STR.filterTitle; $(« #txtFilterDesc »).textContent = STR.filterDesc; $(« #txtTownLabel »).textContent = STR.townLabel; $(« #txtTypeLabel »).textContent = STR.typeLabel; $(« #txtDistanceLabel »).textContent = STR.distanceLabel; $(« #txtDistanceHint »).textContent = STR.distanceHint; $(« #txtSearchLabel »).textContent = STR.searchLabel; $(« #txtResultsSuffix »).textContent = STR.resultsSuffix; $(« #txtSortLabel »).textContent = STR.sortLabel; $(« #btnReset »).textContent = STR.reset; $(« #btnCopySelection »).textContent = STR.copySelection; $(« #txtNowLabel »).textContent = STR.weatherLabel; $(« #meteoLine1 »).textContent = STR.weatherLoading1; $(« #meteoLine2 »).textContent = STR.weatherLoading2; $(« #meteoHint »).textContent = STR.weatherHint; $(« #txtDisclaimer »).textContent = STR.disclaimer; $(« #txtBudgetTitle »).textContent = STR.budgetTitle; $(« #txtBudgetDesc »).textContent = STR.budgetDesc; $(« #txtRoleLabel »).textContent = STR.youAre; $(« #txtKmLabel »).textContent = STR.tripKm; $(« #txtConsoLabel »).textContent = STR.conso; $(« #txtFuelLabel »).textContent = STR.fuelPrice; $(« #txtBuyLabel »).textContent = STR.buyBudget; $(« #txtBufferLabel »).textContent = STR.buffer; $(« #txtBudgetResultTitle »).textContent = STR.totalEstimated; $(« #txtBudgetResultHint »).textContent = STR.indicativeRange; $(« #txtBudgetMin »).textContent = STR.min; $(« #txtBudgetMax »).textContent = STR.comfort; $(« #txtBreakdownFuel »).textContent = STR.breakdownFuel; $(« #txtBreakdownBuy »).textContent = STR.breakdownBuy; $(« #txtBreakdownFees »).textContent = STR.breakdownFees; $(« #txtBudgetNote »).textContent = STR.budgetNote; $(« #txtChecklistTitle »).textContent = STR.checklistTitle; $(« #txtChecklistDesc »).textContent = STR.checklistDesc; $(« #btnCopyChecklist »).textContent = STR.copy; $(« #btnCheckAll »).textContent = STR.checkAll; $(« #btnUncheckAll »).textContent = STR.uncheckAll; $(« #btnSmartTips »).textContent = STR.smartTips; $(« #txtTipsTitle »).textContent = STR.tipsTitle; } // ============ Filtres : options ============ function uniqueSorted(arr) { return […new Set(arr)].sort((a, b) => a.localeCompare(b, « fr »)); } function buildSelectOptions() { const towns = uniqueSorted(EVENTS.map(e => e.commune)); const types = uniqueSorted(EVENTS.map(e => e.type)); const selTown = $(« #selTown »); const selType = $(« #selType »); selTown.innerHTML = «  »; selType.innerHTML = «  »; const optAllTown = document.createElement(« option »); optAllTown.value = « TOUTES »; optAllTown.textContent = « Toutes les communes »; selTown.appendChild(optAllTown); towns.forEach(t => { const o = document.createElement(« option »); o.value = t; o.textContent = t; selTown.appendChild(o); }); const optAllType = document.createElement(« option »); optAllType.value = « TOUS »; optAllType.textContent = « Tous les types »; selType.appendChild(optAllType); types.forEach(t => { const o = document.createElement(« option »); o.value = t; o.textContent = t; selType.appendChild(o); }); } // ============ Rendu liste ============ function getFilteredSorted() { const town = $(« #selTown »).value; const type = $(« #selType »).value; const q = ($(« #inpSearch »).value || «  »).trim().toLowerCase(); const maxDist = Number($(« #rangeDistance »).value); const sort = $(« #selSort »).value; const enriched = EVENTS.map(ev => { const d = distanceKm(START.lat, START.lon, ev.lat, ev.lon); return { …ev, distance: d }; }); let res = enriched.filter(ev => { const okTown = (town === « TOUTES ») || (ev.commune === town); const okType = (type === « TOUS ») || (ev.type === type); const okDist = ev.distance (a.dateISO).localeCompare(b.dateISO)); } else if (sort === « distanceAsc ») { res.sort((a, b) => a.distance – b.distance); } else if (sort === « nameAsc ») { res.sort((a, b) => a.nom.localeCompare(b.nom, « fr »)); } return res; } function renderList() { $(« #distanceValue »).textContent = String($(« #rangeDistance »).value); const list = $(« #list »); const items = getFilteredSorted(); $(« #resultsCount »).textContent = String(items.length); list.innerHTML = «  »; if (items.length === 0) { const empty = document.createElement(« div »); empty.className = « rounded-xl border border-white/10 bg-white/5 p-4 text-sm text-slate-200 »; empty.textContent = « Aucun événement ne correspond. Essayez d’augmenter la distance ou d’enlever un filtre. »; list.appendChild(empty); return; } items.forEach(ev => { const card = document.createElement(« article »); card.className = « rounded-2xl border border-white/10 bg-white/5 p-4 hover:bg-white/7 transition »; const top = document.createElement(« div »); top.className = « flex items-start justify-between gap-3 »; const left = document.createElement(« div »); left.className = « min-w-0 »; const h = document.createElement(« h4 »); h.className = « text-base font-semibold text-slate-50 truncate »; h.textContent = ev.nom; const meta = document.createElement(« div »); meta.className = « mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-300 »; const chip1 = document.createElement(« span »); chip1.className = « chip rounded-full px-2 py-1 »; chip1.textContent = ev.commune; const chip2 = document.createElement(« span »); chip2.className = « chip rounded-full px-2 py-1 »; chip2.textContent = ev.type; const chip3 = document.createElement(« span »); chip3.className = « chip rounded-full px-2 py-1 tabular-nums »; chip3.textContent = `${ev.distance.toFixed(1)} km (depuis ${START.label.replace(« Point de départ : « , «  »)})`; meta.appendChild(chip1); meta.appendChild(chip2); meta.appendChild(chip3); const when = document.createElement(« div »); when.className = « mt-2 text-sm text-slate-200 »; when.textContent = `${formatDateFR(ev.dateISO)} • ${ev.debut} – ${ev.fin}`; const details = document.createElement(« p »); details.className = « mt-2 text-sm text-slate-300 leading-relaxed »; details.textContent = ev.details; left.appendChild(h); left.appendChild(meta); left.appendChild(when); left.appendChild(details); const right = document.createElement(« div »); right.className = « shrink-0 flex flex-col gap-2 items-end »; const btn = document.createElement(« button »); btn.className = « focus-ring rounded-lg px-3 py-2 text-sm bg-white/10 hover:bg-white/15 transition »; btn.textContent = « Copier »; btn.setAttribute(« aria-label », « Copier les détails de cet événement »); btn.addEventListener(« click », () => { const txt = `${ev.nom}n` + `${ev.type} • ${ev.commune} (44)n` + `${formatDateFR(ev.dateISO)} • ${ev.debut} – ${ev.fin}n` + `Distance estimée : ${ev.distance.toFixed(1)} km (depuis ${START.label})n` + `Détails : ${ev.details}`; copyToClipboard(txt); }); const small = document.createElement(« div »); small.className = « text-[11px] text-slate-400 text-right »; small.textContent = « À vérifier auprès de l’organisateur »; right.appendChild(btn); right.appendChild(small); top.appendChild(left); top.appendChild(right); card.appendChild(top); list.appendChild(card); }); } // ============ Budget ============ function computeBudget() { const role = $(« #selRole »).value; const km = Math.max(0, Number($(« #inpKm »).value || 0)); const conso = Math.max(0, Number($(« #inpConso »).value || 0)); const fuel = Math.max(0, Number($(« #inpFuel »).value || 0)); const buy = Math.max(0, Number($(« #inpBuy »).value || 0)); const bufferPct = Number($(« #rangeBuffer »).value || 0); $(« #bufferValue »).textContent = `${bufferPct}%`; // Carburant : km * (L/100km) * €/L const fuelCost = km * (conso / 100) * fuel; // Frais exposant : estimation simple // (souvent 2-6€ le mètre linéaire ; ici un forfait indicatif) const fees = (role === « exposant ») ? 12 : 0; // Base const base = fuelCost + buy + fees; const buffer = base * (bufferPct / 100); // Fourchette : minimum = base, confort = base + buffer + 10% « souplesse » const min = base; const max = base + buffer + (base * 0.10); $(« #budgetMin »).textContent = euro(min); $(« #budgetMax »).textContent = euro(max); $(« #budgetBadge »).textContent = (role === « exposant ») ? STR.modeExhibitor : STR.modeVisitor; $(« #breakFuel »).textContent = euro(fuelCost); $(« #breakBuy »).textContent = euro(buy); $(« #breakFees »).textContent = euro(fees); // Bars (ratio relatif à max) const totalForBars = Math.max(max, 1); const wFuel = clamp((fuelCost / totalForBars) * 100, 0, 100); const wBuy = clamp((buy / totalForBars) * 100, 0, 100); const wFees = clamp((fees / totalForBars) * 100, 0, 100); $(« #barFuel »).style.width = wFuel.toFixed(1) + « % »; $(« #barBuy »).style.width = wBuy.toFixed(1) + « % »; $(« #barFees »).style.width = wFees.toFixed(1) + « % »; } // ============ Checklist ============ function renderChecklist() { const wrap = $(« #checklist »); wrap.innerHTML = «  »; CHECKLIST_ITEMS.forEach((label, idx) => { const id = `chk_${idx}`; const row = document.createElement(« label »); row.className = « flex items-start gap-3 rounded-xl border border-white/10 bg-white/5 p-3 hover:bg-white/7 transition cursor-pointer »; const input = document.createElement(« input »); input.type = « checkbox »; input.id = id; input.className = « mt-1 h-4 w-4 accent-emerald-400 »; input.setAttribute(« aria-label », label); const text = document.createElement(« div »); text.className = « text-sm text-slate-200 leading-snug »; text.textContent = label; row.appendChild(input); row.appendChild(text); wrap.appendChild(row); }); } function checklistText() { const inputs = Array.from($(« #checklist »).querySelectorAll(« input[type=’checkbox’] »)); const lines = inputs.map((inp, i) => { const label = CHECKLIST_ITEMS[i]; const mark = inp.checked ? « [x] » : « [ ] »; return `${mark} ${label}`; }); return `Checklist vide-greniers / brocantes (44)n` + lines.join(« n »); } // ============ Météo (Open-Meteo) ============ const METEO = { city: « Nantes », lat: 47.2184, lon: -1.5536, timezone: « Europe/Paris » }; function interpretWeather(current) { const t = Math.round(current.temperature_2m); const rain = Number(current.rain ?? current.precipitation ?? 0); const wind = Math.round(current.wind_speed_10m); return { t, rain, wind }; } async function fetchWeather() { const url = `https://api.open-meteo.com/v1/forecast` + `?latitude=${encodeURIComponent(METEO.lat)}` + `&longitude=${encodeURIComponent(METEO.lon)}` + `&current=temperature_2m,precipitation,rain,wind_speed_10m` + `&timezone=${encodeURIComponent(METEO.timezone)}`; $(« #meteoLine1 »).textContent = STR.weatherLoading1; $(« #meteoLine2 »).textContent = « Connexion à Open-Meteo… »; try { const res = await fetch(url, { cache: « no-store » }); if (!res.ok) throw new Error(« Réponse météo invalide »); const json = await res.json(); const cur = json.current || {}; const { t, rain, wind } = interpretWeather(cur); $(« #meteoLine1 »).textContent = STR.weatherLine(METEO.city, t, rain.toFixed(1), wind); $(« #meteoLine2 »).textContent = `Dernière mise à jour : ${String(cur.time || «  »).replace(« T »,  » « ) || « — »}`; // Stocker pour les conseils root.__meteo = { t, rain, wind, time: cur.time || null }; } catch (e) { $(« #meteoLine1 »).textContent = « Météo indisponible pour le moment. »; $(« #meteoLine2 »).textContent = « Vous pouvez continuer sans la météo. »; root.__meteo = null; } } function buildTipsFromWeather() { const m = root.__meteo; const tips = []; if (!m) { tips.push(« Prévoyez une couche légère + une option imperméable, par précaution. »); tips.push(« Arrivez tôt : le meilleur choix part souvent en première heure. »); tips.push(« Fixez un budget max avant de chiner, puis gardez 10–15% de marge. »); return tips; } if (m.rain >= 1.0) { tips.push(« Risque de pluie : prenez une veste imperméable et des sacs étanches pour vos trouvailles. »); tips.push(« Privilégiez les stands abrités et protégez les objets fragiles (papier bulle / couverture). »); } else { tips.push(« Peu de pluie : c’est un bon jour pour chiner tôt et comparer les prix. »); } if (m.wind >= 25) { tips.push(« Vent soutenu : pour exposants, prévoyez pinces, ficelle et lest pour la bâche. »); } if (m.t = 22) { tips.push(« Température douce/chaude : eau + casquette, et faites une pause avant midi. »); } tips.push(« Négociation : proposez un prix global si vous prenez plusieurs objets. »); return tips; } function showTips() { const list = $(« #tipsList »); list.innerHTML = «  »; buildTipsFromWeather().forEach(t => { const li = document.createElement(« li »); li.textContent = t; list.appendChild(li); }); $(« #tipsBox »).classList.remove(« hidden »); $(« #tipsBox »).scrollIntoView({ block: « nearest », behavior: « smooth » }); } // ============ Copier sélection ============ function selectionText() { const items = getFilteredSorted(); const header = `Sélection d’événements (Loire-Atlantique 44)n` + `Filtres : commune=${$(« #selTown »).value}, type=${$(« #selType »).value}, distance { return ( `${i + 1}. ${ev.nom}n` + ` ${ev.type} • ${ev.commune} (44)n` + ` ${formatDateFR(ev.dateISO)} • ${ev.debut} – ${ev.fin}n` + ` Distance : ${ev.distance.toFixed(1)} kmn` + ` Détails : ${ev.details}n` ); }); return header + (lines.length ? lines.join(« n ») : « Aucun événement correspondant. »); } // ============ Events ============ function bindEvents() { $(« #selTown »).addEventListener(« change », renderList); $(« #selType »).addEventListener(« change », renderList); $(« #rangeDistance »).addEventListener(« input », renderList); $(« #inpSearch »).addEventListener(« input », () => { // Petit debounce simple if (root.__searchTimer) clearTimeout(root.__searchTimer); root.__searchTimer = setTimeout(renderList, 120); }); $(« #selSort »).addEventListener(« change », renderList); $(« #btnReset »).addEventListener(« click », () => { $(« #selTown »).value = « TOUTES »; $(« #selType »).value = « TOUS »; $(« #rangeDistance »).value = « 20 »; $(« #inpSearch »).value = «  »; $(« #selSort »).value = « dateAsc »; renderList(); }); $(« #btnCopySelection »).addEventListener(« click », () => { copyToClipboard(selectionText()); }); // Budget [« selRole », « inpKm », « inpConso », « inpFuel », « inpBuy », « rangeBuffer »].forEach(id => { $(« # » + id).addEventListener(« input », computeBudget); $(« # » + id).addEventListener(« change », computeBudget); }); // Checklist $(« #btnCopyChecklist »).addEventListener(« click », () => copyToClipboard(checklistText())); $(« #btnCheckAll »).addEventListener(« click », () => { $(« #checklist »).querySelectorAll(« input[type=’checkbox’] »).forEach(i => i.checked = true); }); $(« #btnUncheckAll »).addEventListener(« click », () => { $(« #checklist »).querySelectorAll(« input[type=’checkbox’] »).forEach(i => i.checked = false); }); // Tips $(« #btnSmartTips »).addEventListener(« click », showTips); // Météo $(« #btnMeteoRefresh »).addEventListener(« click », fetchWeather); } // ============ Init ============ function init() { setStaticText(); buildSelectOptions(); renderList(); renderChecklist(); computeBudget(); fetchWeather(); } // Assurer que le composant s’initialise même si collé en bas de page if (document.readyState === « loading ») { document.addEventListener(« DOMContentLoaded », init, { once: true }); } else { init(); } })();