/*** Contact ***/

const contactezMoi = document.getElementById("contactez-moi");
const contactDiv =  document.querySelectorAll("#contact div");
const contact =  document.getElementById("contact");


contactezMoi.addEventListener("mouseover", () => {
    contactDiv.forEach(div => {
        div.style.fontSize = "50px"
        div.style.padding = "20px"
        div.style.margin =  "20px 10px";
        contact.style.background = "rgba(255,255,255,0.8)";
        /*contact.style.top = "10%";
        contact.style.left = "40%";*/
    });
})
contactezMoi.addEventListener("mouseleave", () => {
    contactDiv.forEach(div => {
        div.style.fontSize = "30px"
        div.style.padding = "8px"
        div.style.margin =  "0";
        contact.style.background = "transparent";
        /*contact.style.top = "0";
        contact.style.left = "0";*/
    });
})

/*** Panneaux ***/
const panneaux = document.querySelectorAll("section.panneaux > div");
const panneauxTextes = document.querySelectorAll("section.panneaux > div > div");
const h4 = document.querySelectorAll("section.panneaux > div > h4");
let panneauxBoolean = new Array (false,false,false,false,false,false);
console.log(panneaux,panneauxTextes,h4,panneauxBoolean);

for(let i = 0; i < panneaux.length; i++) {
    panneaux[i].addEventListener("click", () => {
        if (panneauxBoolean[i]) {
            h4[i].style.color = "#fff";
            panneaux[i].style.backgroundColor = "#104b65";
            panneaux[i].style.padding = "30px 10px";
            panneaux[i].style.borderRadius = "20px";
            panneaux[i].style.borderRadius = "50%";
            panneauxTextes[i].style.maxHeight = "0";
            panneauxBoolean[i] = false;
            console.log(panneauxBoolean);
        }
        else {
            h4[i].style.color = "#bbb";
            panneaux[i].style.backgroundColor = "#1a7298";
            panneaux[i].style.padding = "20px 10px 10px";
            panneaux[i].style.borderRadius = "20px";
            panneauxTextes[i].style.maxHeight = "300px";
            panneauxBoolean[i] = true;
            console.log(panneauxBoolean);
        }
    })
}