document.addEventListener('DOMContentLoaded', () => { const filterMap = { 'btn-all': 'portfolio-card', 'btn-residentiel': 'cat-residentiel', 'btn-renovation': 'cat-renovation', 'btn-commercial': 'cat-commercial', 'btn-extension': 'cat-extension' }; const buttons = document.querySelectorAll('.filter-btn'); const cards = document.querySelectorAll('.portfolio-card'); buttons.forEach(btn => { btn.addEventListener('click', (e) => { e.preventDefault(); buttons.forEach(b => { b.classList.remove('active-filter'); b.style.backgroundColor = '#ffffff'; b.style.color = '#111111'; b.style.borderColor = '#e0e0e0'; }); btn.classList.add('active-filter'); btn.style.backgroundColor = '#111111'; btn.style.color = '#ffffff'; btn.style.borderColor = '#111111'; let activeClass = 'portfolio-card'; btn.classList.forEach(cls => { if (filterMap[cls]) { activeClass = filterMap[cls]; } }); cards.forEach(card => { if (activeClass === 'portfolio-card' || card.classList.contains(activeClass)) { card.style.display = 'flex'; setTimeout(() => { card.style.opacity = '1'; card.style.transform = 'translateY(0) scale(1)'; }, 50); } else { card.style.opacity = '0'; card.style.transform = 'translateY(10px) scale(0.98)'; setTimeout(() => { card.style.display = 'none'; }, 300); } }); }); }); });