$(document).ready(function(){
    const lightbox = document.createElement('div')
    lightbox.id = 'lightbox'
    document.body.appendChild(lightbox)

    const images = document.querySelectorAll('img')
    images.forEach(image => {
        image.addEventListener('click', e => {
            lightbox.classList.add('active')
            const img = document.createElement('img')
            img.src = image.src
            while (lightbox.firstChild) {
                lightbox.removeChild(lightbox.firstChild)
            }
            lightbox.appendChild(img)
        })
    })

    lightbox.addEventListener('click', e=> {
        if (e.target !== e.currentTarget) return
        lightbox.classList.remove('active')
    })

    $("#tips").mouseover(function(){$(this).css('color', 'rgb(244, 90, 74)');});  
    $("#tips").mouseleave(function(){$(this).css('color', 'rgb(41, 44, 35)');});    
    $("#impacts").mouseover(function(){$(this).css('color', 'rgb(244, 90, 74)');});  
    $("#impacts").mouseleave(function(){$(this).css('color', 'rgb(41, 44, 35)');});    
    $("#campagnes").mouseover(function(){$(this).css('color', 'rgb(244, 90, 74)');});  
    $("#campagnes").mouseleave(function(){$(this).css('color', 'rgb(41, 44, 35)');});   
});