.transparant-vertclair{
    font-size: 1em;
    padding: 15px 30px;
    background: transparent;
    color: white;
    border: 3px solid white;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.3s;
}
.transparant-vertclair:hover{
    background: var(--vertsemiclair);
    border: 3px solid black;
    color: black;
}

.noir-vertsemiclair{
    font-size: 1em;
    padding: 15px 30px;
    background: black;
    border: 3px solid black;
    color: white;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.3s;
}
.noir-vertsemiclair:hover{
    background: var(--vertsemiclair);
    color: black;
}


.transparant-bleuclair-noir{
    font-size: 1em;
    padding: 15px 30px;
    background: transparent;
    color: black;
    border: 3px solid black;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.3s;
}
.transparant-bleuclair-noir:hover{
    background: #eaf4fd;
    border: 3px solid black;
    color: black;
}


.blanc-bleuclair-noir{
    font-size: 1em;
    padding: 15px 30px;
    background: white;
    color: black;
    border: 3px solid white;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.3s;
}
.blanc-bleuclair-noir:hover{
    background: black;
    border: 3px solid black;
    color: white;
}




.noir-blanc{
    font-size: 1em;
    padding: 15px 30px;
    background: black;
    border: 3px solid black;
    color: white;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.3s;
}
.noir-blanc:hover{
    background: white;
    color: black;
}