/* Styles spécifiques à l’infographie */ #garden-infographic header { background: linear-gradient(135deg, #1e3a8a 0%, #0b5bd3 60%); border-radius: 12px; padding: 14px 16px; color: white; margin-bottom: 12px; } #garden-infographic .badge { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.08); color:#eaf2ff; font-size:12px; } #garden-infographic .badge .dot{ width:8px; height:8px; border-radius:50%; display:inline-block; } #garden-infographic .toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; margin: 8px 0 12px; } #garden-infographic .btn-filter { padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color:white; cursor:pointer; font-weight:500; } #garden-infographic .btn-filter.active { background: rgba(255,255,255,.25); color:#0b1020; } #garden-infographic .section { margin-top: 6px; } #garden-infographic .timeline { display:flex; gap:8px; overflow:auto; padding-bottom:6px; } #garden-infographic .day-pill { padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color:white; cursor:pointer; min-width:72px; text-align:center; } #garden-infographic .day-pill[aria-selected= »true »] { background: rgba(255,255,255,.25); color:#0b1020; font-weight:700; } #garden-infographic .grid { display:grid; gap:10px; } #garden-infographic .zone-card { border-radius:12px; padding:10px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); cursor:pointer; display:flex; flex-direction:column; min-height:90px; } #garden-infographic .zone-card .zone-title { font-weight:600; font-size:14px; } #garden-infographic .zone-card .zone-type { font-size:12px; opacity:.9; } #garden-infographic .zone-card[data-selected= »true »] { outline: 2px solid #fff; background: rgba(255,255,255,.25); } #garden-infographic .details { margin-top:12px; padding:12px; border-radius:12px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.25); color:#e9f0ff; } #garden-infographic .stats { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; margin-top:12px; } #garden-infographic .stat { padding:8px; border-radius:10px; background: rgba(255,255,255,.08); text-align:center; } @media (max-width: 1024px) { #garden-infographic .stats { grid-template-columns: repeat(2, 1fr); } }

Festival Garden Parvis – Paris La Défense

Retour à Paris La Défense du 25 Juin au 25 Juillet 2025

En partenariat avec RFM

Tous Musique Conversations Ateliers Gastronomie Animations

Sélectionnez une zone et un jour.

Timeline (25 Juin – 25 Juillet 2025)

Zones du Parvis

Détails des événements: sélectionnez une zone et un jour pour voir le programme.

Événements: 0

Zones actives: 0

Jours: 0

Participants estimés: 0

// Données: 6 zones avec programmation sur la période const zones = [ { id: ‘zone-a’, name: ‘Parvis Vert’, type: ‘Musique’, color: ‘#6EE7B7’, description: ‘Scène principale en plein air avec des sets live et DJ sets.’, capacity: 1800, schedule: [ { date: ‘2025-06-26′, time: ’18:00’, title: ‘Garden Beat’, artist: ‘DJ Solaris’, details: ‘Entrée libre’ }, { date: ‘2025-07-04′, time: ’20:00’, title: ‘Acoustic Sunset’, artist: ‘Luna & Noa’, details:  » }, { date: ‘2025-07-15′, time: ’19:30’, title: ‘Jazz Afternoon’, artist: ‘Milo Quartet’, details:  » } ] }, { id: ‘zone-b’, name: ‘Jardin des Dialogues’, type: ‘Talks’, color: ‘#93C5FD’, description: ‘Rencontres et talks autour d’urbanisme, jardins et ville.’, capacity: 800, schedule: [ { date: ‘2025-06-28′, time: ’17:00’, title: ‘La ville qui respire’, artist: ‘A. Dupont’, details: ‘Entrée libre’ }, { date: ‘2025-07-12′, time: ’18:30’, title: ‘RFM et le son des quartiers’, artist: ‘Émilie Martin’, details:  » } ] }, { id: ‘zone-c’, name: ‘Ateliers Cueillette’, type: ‘Ateliers’, color: ‘#FDE68A’, description: ‘Ateliers participatifs sur les plantes, potager urbain.’, capacity: 300, schedule: [ { date: ‘2025-06-30′, time: ’16:00’, title: ‘Bacs et balconnet’, artist: ‘Atelier Verde’, details:  » }, { date: ‘2025-07-20′, time: ’11:00’, title: ‘Herbes aromatiques’, artist: ‘Chef Niko’, details:  » } ] }, { id: ‘zone-d’, name: ‘Quai Gourmand’, type: ‘Gastronomie’, color: ‘#F472B6’, description: ‘Food trucks et dégustations autour des jardins comestibles.’, capacity: 700, schedule: [ { date: ‘2025-07-10′, time: ’12:00’, title: ‘Dégustation estivale’, artist: ‘Chef Sara’, details:  » }, { date: ‘2025-07-22′, time: ’13:00’, title: ‘Cuisine rapide healthy’, artist: ‘M. Chen’, details:  » } ] }, { id: ‘zone-e’, name: ‘Mur des Animations’, type: ‘Animation’, color: ‘#A78BFA’, description: ‘Performances et arts visuels en plein air.’, capacity: 500, schedule: [ { date: ‘2025-06-25′, time: ’19:00’, title: ‘Performance lumineuse’, artist: ‘Grupo Luma’, details:  » }, { date: ‘2025-07-18′, time: ’20:00’, title: ‘Carnet d’ombres’, artist: ‘Aurélia’, details:  » } ] }, { id: ‘zone-f’, name: ‘Parvis des Enfants’, type: ‘Kids’, color: ‘#93EF8C’, description: ‘Animation et ateliers pour enfants et familles.’, capacity: 400, schedule: [ { date: ‘2025-07-05′, time: ’10:00’, title: ‘Conte et musique’, artist: ‘Mina’, details:  » }, { date: ‘2025-07-19′, time: ’15:00’, title: ‘Coloriage géant’, artist: ‘Claire’, details:  » } ] } ]; // DOM éléments const timelineEl = document.getElementById(‘timeline’); const zonesGridEl = document.getElementById(‘zones-grid’); const detailsEl = document.getElementById(‘details’); const liveStatus = document.getElementById(‘live-status’); const statEvents = document.getElementById(‘stat-events’); const statZones = document.getElementById(‘stat-zones’); const statDays = document.getElementById(‘stat-days’); const statParticipants = document.getElementById(‘stat-participants’); let selectedDayIndex = 0; let selectedZoneId = zones[0].id; let activeFilter = ‘Tous’; // Période: 25 Juin 2025 -> 25 Juillet 2025 const startDate = new Date(‘2025-06-25’); const endDate = new Date(‘2025-07-25’); function addDays(date, n) { const d = new Date(date); d.setDate(d.getDate() + n); return d; } function formatDateLabel(date) { return date.toLocaleDateString(‘fr-FR’, { day: ‘2-digit’, month: ‘long’ }); } function dayKey(date) { const y = date.getFullYear(); const m = String(date.getMonth() + 1).padStart(2, ‘0’); const d = String(date.getDate()).padStart(2, ‘0’); return `${y}-${m}-${d}`; } // Générer les jours dans la timeline const daysInRange = []; const diffDays = Math.round((endDate – startDate) / (1000 * 60 * 60 * 24)); for (let i = 0; i { const btn = document.createElement(‘button’); btn.className = ‘day-pill’; btn.setAttribute(‘role’, ‘option’); btn.setAttribute(‘aria-selected’, idx === selectedDayIndex ? ‘true’ : ‘false’); btn.textContent = d.date.toLocaleDateString(‘fr-FR’, { day: ‘2-digit’, month: ‘short’ }); btn.title = d.date.toLocaleDateString(‘fr-FR’, { weekday: ‘long’, day: ‘numeric’, month: ‘long’ }); btn.addEventListener(‘click’, () => { selectedDayIndex = idx; renderTimelineSelection(); updateDetails(); }); timelineEl.appendChild(btn); }); renderTimelineSelection(); } function renderTimelineSelection() { const items = timelineEl.querySelectorAll(‘.day-pill’); items.forEach((b, idx) => { b.setAttribute(‘aria-selected’, idx === selectedDayIndex ? ‘true’ : ‘false’); if (idx === selectedDayIndex) b.style.outline = ‘2px solid #fff’; else b.style.outline = ‘none’; }); const d = daysInRange[selectedDayIndex].date; liveStatus.textContent = `Jour sélectionné: ${d.toLocaleDateString(‘fr-FR’, { weekday: ‘long’, day: ‘numeric’, month: ‘long’ })}`; } // Rendu des zones function renderZones() { zonesGridEl.innerHTML =  »; zones.forEach((z) => { const btn = document.createElement(‘button’); btn.type = ‘button’; btn.className = ‘zone-card’; btn.style.borderColor = z.color; btn.style.background = ‘linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.08))’; btn.dataset.zoneId = z.id; btn.setAttribute(‘aria-label’, `${z.name} – ${z.type} – Capacité ${z.capacity}`); btn.innerHTML = ` `; btn.addEventListener(‘click’, () => { selectedZoneId = z.id; // Mettre en évidence la zone sélectionnée document.querySelectorAll(‘.zone-card’).forEach(n => n.removeAttribute(‘data-selected’)); btn.setAttribute(‘data-selected’, ‘true’); updateDetails(); detailsEl.focus?.(); }); zonesGridEl.appendChild(btn); }); // Highlight initial zone après rendu const initial = zones.find(z => z.id === selectedZoneId); if (initial) { const el = zonesGridEl.querySelector(‘[data-zone-id= »‘ + initial.id + ‘ »]’); if (el) el.setAttribute(‘data-selected’, ‘true’); } } // Détails des événements pour la zone et le jour sélectionnés function updateDetails() { const zone = zones.find(z => z.id === selectedZoneId); const day = daysInRange[selectedDayIndex].date; const dayKeyStr = day.toISOString().slice(0,10); const eventsForDay = zone.schedule.filter(ev => ev.date === dayKeyStr); let html =  »; if (eventsForDay.length === 0) { html = ``; } else { eventsForDay.forEach(ev => { html += ``; }); } detailsEl.innerHTML = `

${zone.name} • ${zone.type}

---

`; renderStats(); } // Statistiques (approximatives) function renderStats() { // Total d’événements pendant la période const totalEvents = zones.reduce((acc, z) => acc + z.schedule.length, 0); const zonesActive = zones.filter(z => z.schedule.length > 0).length; const daysCovered = daysInRange.length; // Estimation naïve des participants: somme des capacités multipliée par un facteur moyen const participants = zones.reduce((acc, z) => acc + z.capacity * 0.5, 0); statEvents.textContent = totalEvents; statZones.textContent = zonesActive; statDays.textContent = daysCovered; statParticipants.textContent = Math.round(participants); } // Filtrer par type (afficher/cacher les zones concernées) function filterByType(type) { activeFilter = type; zonesGridEl.querySelectorAll(‘.zone-card’).forEach(btn => { const zone = zones.find(z => z.id === btn.dataset.zoneId); if (!zone) return; const visible = (type === ‘Tous’) || (zone.type === type); btn.style.display = visible ? ‘flex’ : ‘none’; }); // Mettre à jour le libellé liveStatus.textContent = `Filtre appliqué: ${type}`; // Mettre à jour les styles des boutons document.querySelectorAll(‘.btn-filter’).forEach(b => { if (b.getAttribute(‘data-filter’) === type) b.classList.add(‘active’); else b.classList.remove(‘active’); }); } // Initialisation function init() { renderTimeline(); renderZones(); updateDetails(); // Navigation clavier simple entre zones document.addEventListener(‘keydown’, (e) => { const zonesButtons = Array.from(zonesGridEl.querySelectorAll(‘.zone-card’)); if (!zonesButtons.length) return; // Chercher bouton sélectionné let idx = zonesButtons.findIndex(b => b.getAttribute(‘data-selected’) === ‘true’); if (e.key === ‘ArrowRight’ || e.key === ‘ArrowLeft’) { e.preventDefault(); if (idx b.removeAttribute(‘data-selected’)); const nextBtn = zonesButtons[idx]; nextBtn.setAttribute(‘data-selected’, ‘true’); selectedZoneId = nextBtn.dataset.zoneId; updateDetails(); } if (e.key === ‘Enter’ && idx >= 0) { zonesButtons[idx].click(); } }); } window.addEventListener(‘DOMContentLoaded’, init);