setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: 'relative', aspectRatio: '1 / 1', overflow: 'hidden', background: '#0a0a0a', cursor: 'pointer', }} > {/* Visual layer */} {ep.img && !imgError ? (

setImgError(true)} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 0.7s cubic-bezier(.2,.7,.3,1), filter 0.4s', transform: hover ? 'scale(1.06)' : 'scale(1)', filter: hover ? 'brightness(1) saturate(1.1)' : 'brightness(0.72) saturate(0.85)', }} /> ) : (

)} {/* Bottom gradient shade */}

{/* Top-left: episode number */}

N°{String(ep.n).padStart(3, '0')}

{/* Top-right: VIDEO badge and/or date */}

{hasVideo && (

● VIDÉO

)} {ep.date && (

{ep.date}

)}

{/* Bottom: red accent line + title + action buttons */}

{ep.title}

{/* Action buttons — appear on hover */}

e.stopPropagation()} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 11px', borderRadius: 999, background: accent, color: '#fff', textDecoration: 'none', fontFamily: '"DM Mono", monospace', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500, }} title="Écouter le podcast audio" > Écouter {hasVideo && ( e.stopPropagation()} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 11px', borderRadius: 999, background: 'rgba(255,255,255,0.92)', color: '#0a0a0c', textDecoration: 'none', fontFamily: '"DM Mono", monospace', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500, }} title="Voir la version vidéo sur YouTube" > Vidéo )}

); } function EpisodesWall() { const [query, setQuery] = React.useState(''); const [shown, setShown] = React.useState(PAGE_SIZE); const sentinelRef = React.useRef(null); // Normalize accents and case so "Orban" matches "Orbán" and "elections" // matches "élections". Searches the title, the editor-written description // (when present), and the raw episode number. const normalize = (s) => s .toLowerCase() .normalize('NFD') .replace(/[̀-ͯ]/g, ''); const q = normalize(query); const filtered = window.EPISODES.filter(e => { if (!q) return true; if (normalize(e.title).includes(q)) return true; if (e.description && normalize(e.description).includes(q)) return true; if (String(e.n).includes(query)) return true; return false; }); const visible = filtered.slice(0, shown); const hasMore = visible.length < filtered.length; React.useEffect(() => { setShown(PAGE_SIZE); }, [query]); // Infinite scroll: load more when sentinel enters viewport React.useEffect(() => { if (!hasMore) return; const el = sentinelRef.current; if (!el) return; const obs = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { setShown(s => s + PAGE_SIZE); } }, { rootMargin: '600px' }); obs.observe(el); return () => obs.disconnect(); }, [hasMore, visible.length]); return (

{/* Hero header with logo banner */}

{ e.currentTarget.style.opacity = '0.78'; e.currentTarget.style.transform = 'scale(1.03)'; }} onMouseLeave={(e) => { e.currentTarget.style.opacity = '0.32'; e.currentTarget.style.transform = 'scale(1)'; }} >

podcast · franceinfo

Complorama.

Par{' '} Tristan Mendès France,{' '} Rudy Reichstadt{' '} et{' '} Noé Da Silva.

Décryptage de l'activité de la complosphère, en lien avec l'actualité.

Mur des épisodes — un index visuel renvoyant vers Radio France.

EN COURS

{window.EPISODES[0] ? window.EPISODES[0].n : window.EPISODES.length} ÉPISODES

SAISON 06

{/* Sticky search bar */}

setQuery(e.target.value)} placeholder="Chercher un épisode, un thème, un numéro…" style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', color: '#f3efe6', fontFamily: 'inherit', fontSize: 15, fontWeight: 500, minWidth: 0, }} /> {query && ( )}

{String(filtered.length).padStart(3, '0')} / {String(window.EPISODES.length).padStart(3, '0')}

{/* Episode wall — responsive, edge-to-edge, no gap */}

{visible.map(ep => )}

{/* Sentinel for infinite scroll */} {hasMore && (

chargement…

)} {/* End of catalogue footer */} {!hasMore && ( )} {/* Responsive grid */}

); } window.EpisodesWall = EpisodesWall;