html,body{
    height:100%;
    box-sizing: border-box;
}

body{
    background:linear-gradient(to top,#43cea2,#185a9d);
    font-family: Arial, Helvetica, sans-serif;
}

.bt{
    text-decoration: none;
    background:gray;
    color:white;
    font-weight:bold;
    padding:10px;
    border-radius:5px;
    transition:background 500ms;
    display:inline-flex;
    justify-content: center;
    align-items: center;
}

.bt:hover{
    background:yellow;
    color:gray;
}

.popup{
    background:white;
    width:80%;
    max-width:1280px;
    margin:auto;
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    padding:20px 2%;
    border-radius:20px;
    box-shadow:0 0 20px 0 rgba(0,0,0,0.7);
    display:none;
}

.popup header .bt.closeBt{
    padding:5px;
    position:absolute;
    top:10px;
    right:10px;
    width:25px;
    height:25px;
    border-radius:50%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.popup footer{
    display:flex;
    justify-content: center;
}

.popup footer .bt{
    margin:0 10px;
    flex:1;
    max-width:30%;
}

function ouvrirPopup(idPopup){
    let popup = document.querySelector("#"+idPopup);
    popup.style.display="block";
}

function fermerPopup(bt){
    bt.parentNode.parentNode.style="none";
}

// spécial bouton v2
let boutons = document.querySelectorAll("[data-action]");
boutons.forEach( bouton => {
    let action = bouton.getAttribute("data-action");
    if(action=="popup"){
        let cible = bouton.getAttribute("data-cible");
        if(cible) bouton.onclick = function(e){ ouvrirPopup(cible); };
    }
});