);
}
// ── Blog section ─────────────────────────────────────────────────
function Blog() {
const cats = window.BG_DATA.BLOG_CATEGORIES;
const allPosts = window.BG_DATA.BLOG_POSTS;
const [filter, setFilter] = React.useState('Tous');
const [openPost, setOpenPost] = React.useState(null);
const scrollRef = React.useRef(null);
const pillsRef = React.useRef(null);
// CSS value matching exactly what .container does — no JS needed for default.
// On very wide screens: (100vw - 1240px)/2 + pad-x. On narrow: pad-x.
const [leftPad, setLeftPad] = React.useState('max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x)))');
const posts = filter === 'Tous'
? allPosts
: allPosts.filter(p => p.category === filter);
// Once rendered, measure the actual pixel value from the pills and lock it in.
// This guarantees pixel-perfect alignment even if CSS variables differ.
React.useEffect(() => {
const measure = () => {
if (!pillsRef.current) return;
const rect = pillsRef.current.getBoundingClientRect();
if (rect.left > 0) setLeftPad(Math.round(rect.left));
};
const t1 = requestAnimationFrame(measure);
const t2 = setTimeout(measure, 200);
window.addEventListener('resize', () => {
// On resize go back to CSS formula first, then re-measure
setLeftPad('max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x)))');
setTimeout(measure, 100);
});
return () => { cancelAnimationFrame(t1); clearTimeout(t2); };
}, []);
const scroll = (dir) => {
const el = scrollRef.current;
if (!el) return;
const card = el.querySelector('article');
const cardW = card ? card.offsetWidth + 20 : 320;
el.scrollBy({ left: dir * cardW, behavior: 'smooth' });
};
React.useEffect(() => {
if (scrollRef.current) scrollRef.current.scrollLeft = 0;
}, [filter]);
const ArrowBtn = ({ dir, d }) => (
);
return (
{/* ── Header — standard container ── */}
Le journal
Lectures pour esprits posés.
{/* Pills — ref here: no transforms, exact content-left position */}
{cats.map(c => {
const active = c === filter;
return (
);
})}
{/* ── Carousel ─────────────────────────────────────────────
overflowX:clip on outer → hides scrollbar & right overflow
overflowY:visible on both → cards scale without being clipped
paddingLeft = leftPad (measured from pills left edge above) */}
{posts.map(post => (
))}
{/* ── Arrows — bottom right, Apple style ── */}
{openPost && setOpenPost(null)} />}
);
}
Object.assign(window, { Blog });