.lang-switch { display: flex; width: 160px; height: 52px; background: white; border-radius: 30px; padding: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); } .lang { flex: 1; text-align: center; line-height: 44px; border-radius: 26px; font-weight: bold; font-size: 25px; text-decoration: none; color: black; transition: all 0.3s ease; } .lang.active { background: #f4a300; color: white; } const box = document.querySelector('.lang-switch'); const currentLang = box.dataset.lang; const links = box.querySelectorAll('.lang'); // langue active par défaut box.querySelector('.' + currentLang).classList.add('active'); // clic + délai links.forEach(link => { link.addEventListener('click', e => { e.preventDefault(); links.forEach(l => l.classList.remove('active')); link.classList.add('active'); setTimeout(() => { window.location.href = link.href; }, 20); }); });