.accordion-container { font-family: 'IBM Plex Sans', sans-serif; } .accordion-header { width: 100%; text-align: left; background: #fff; color: #000; border: 1px solid #000; padding: 12px 16px; margin: 4px 0; cursor: pointer; font-size: 16px; transition: all 0.3s ease; } .accordion-header.active { background: #475976; color: #fff; border: none; } .accordion-content { display: none; padding: 10px 15px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } .accordion-content ul.events-list { list-style: none; margin: 0; padding: 0; } .accordion-content li.event-item { margin: 5px 0; } .accordion-content li.event-item a { color: #475976; text-decoration: none; font-weight: 500; } .accordion-content li.event-item a:hover { text-decoration: underline; } (function(){ const container = document.querySelector('.accordion-container'); if (!container) return; container.addEventListener('click', function(e){ const btn = e.target.closest('.accordion-header'); if (!btn) return; const panel = btn.nextElementSibling; if (!panel) return; const isActive = btn.classList.contains('active'); // fermer tous les autres panneaux container.querySelectorAll('.accordion-header').forEach(h => { if (h !== btn) { h.classList.remove('active'); const p = h.nextElementSibling; if (p) { p.style.maxHeight = null; p.style.display = 'none'; } } }); if (!isActive) { // ouvrir le panneau cliqué btn.classList.add('active'); panel.style.display = 'block'; panel.style.maxHeight = panel.scrollHeight + 'px'; // scroll sous le header fixe const header = document.querySelector('header'); const headerHeight = header ? header.offsetHeight : 220; // fallback const extraOffset = 10; const btnPosition = btn.getBoundingClientRect().top + window.pageYOffset; window.scrollTo({ top: btnPosition - headerHeight - extraOffset, behavior: 'smooth' }); } else { // fermer le panneau cliqué btn.classList.remove('active'); panel.style.maxHeight = null; panel.style.display = 'none'; } }); })();