html{
    font-family: sans-serif;
}
/*Début ex1*/
.ex1--container{
    display: flex;
    justify-content: center;
    align-items: center;
    
    

}

.ex1--btn{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #BADA55;
    border: 3px solid #BADA55; 
    text-decoration: none;
    color: black;
    margin: 1em;
    padding: 10px 20px;
    border-radius: 30px;
}
.ex1--btn--icone{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNLjAyNiAyNGwxMS45NzQtMTEuNjA3IDExLjk3NCAxMS42MDdoLTIzLjk0OHptMTEuOTY0LTIzLjk2MWwtMTEuOTkgOC43MjV2MTIuNDc2bDcuMzUyLTcuMTI3LTUuNjUzLTQuMTEzIDEwLjI5MS03LjQ4OCAxMC4zMDkgNy40ODgtNS42NTUgNC4xMDggNy4zNTYgNy4xMzJ2LTEyLjQ3NmwtMTIuMDEtOC43MjV6Ii8+PC9zdmc+) ;
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 90% center;
    background-position-y: 40%;
    padding-right: 40px;
}

.ex1--btn:hover{
    background-color: white;

}
.ex1--btn--icone:hover{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMTIuNzEzbC0xMS45ODUtOS43MTNoMjMuOTdsLTExLjk4NSA5LjcxM3ptMCAyLjU3NGwtMTItOS43MjV2MTUuNDM4aDI0di0xNS40MzhsLTEyIDkuNzI1eiIvPjwvc3ZnPg==);
}
/*Fin ex1*/

/*Début ex2*/

.ex2--container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.ex2--btn{
    background-color: white;
    border: 3px solid black;
    color: black;
    padding: 10px 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin: 1em;
    cursor: pointer;
}
.ex2--btn:hover{
    background-color: black;
    color: white;
}
.ex2--btn--icone{
    background-color: white;
    border: 3px solid black;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTQgMTloLTRjLS4yNzYgMC0uNS4yMjQtLjUuNXMuMjI0LjUuNS41aDRjLjI3NiAwIC41LS4yMjQuNS0uNXMtLjIyNC0uNS0uNS0uNXptMCAyaC00Yy0uMjc2IDAtLjUuMjI0LS41LjVzLjIyNC41LjUuNWg0Yy4yNzYgMCAuNS0uMjI0LjUtLjVzLS4yMjQtLjUtLjUtLjV6bS4yNSAyaC00LjVsMS4xODguNzgyYy4xNTQuMTM4LjM4LjIxOC42MTUuMjE4aC44OTVjLjIzNCAwIC40NjEtLjA4LjYxNS0uMjE4bDEuMTg3LS43ODJ6bTMuNzUtMTMuNzk5YzAgMy41NjktMy4yMTQgNS45ODMtMy4yMTQgOC43OTloLTEuOTg5Yy0uMDAzLTEuODU4Ljg3LTMuMzg5IDEuNzIxLTQuODY3Ljc2MS0xLjMyNSAxLjQ4Mi0yLjU3NyAxLjQ4Mi0zLjkzMiAwLTIuNTkyLTIuMDc1LTMuNzcyLTQuMDAzLTMuNzcyLTEuOTI1IDAtMy45OTcgMS4xOC0zLjk5NyAzLjc3MiAwIDEuMzU1LjcyMSAyLjYwNyAxLjQ4MiAzLjkzMi44NTEgMS40NzggMS43MjUgMy4wMDkgMS43MiA0Ljg2N2gtMS45ODhjMC0yLjgxNi0zLjIxNC01LjIzLTMuMjE0LTguNzk5IDAtMy43MjMgMi45OTgtNS43NzIgNS45OTctNS43NzIgMy4wMDEgMCA2LjAwMyAyLjA1MSA2LjAwMyA1Ljc3MnptNC0uNjkxdjEuMzcyaC0yLjUzOGMuMDItLjIyMy4wMzgtLjQ0OC4wMzgtLjY4MSAwLS4yMzctLjAxNy0uNDY0LS4wMzUtLjY5aDIuNTM1em0tMTAuNjQ4LTYuNTUzdi0xLjk1N2gxLjM3MXYxLjk2NGMtLjI0Mi0uMDIyLS40ODQtLjAzNS0uNzI2LS4wMzUtLjIxNSAwLS40My4wMS0uNjQ1LjAyOHptLTMuNzQzIDEuMjk0bC0xLjA0LTEuOTQgMS4yMDgtLjY0OCAxLjAzNyAxLjkzM2MtLjQxOC4xODEtLjgyMi40MDEtMS4yMDUuNjU1em0xMC41ODYgMS43MzVsMS45NDItMS4zOTQuNzk5IDEuMTE1LTIuMDU0IDEuNDczYy0uMTkxLS40My0uNDIzLS44MjctLjY4Ny0xLjE5NHptLTMuMDEtMi4zODlsMS4wMzgtMS45MzQgMS4yMDguNjQ4LTEuMDQxIDEuOTQxYy0uMzgyLS4yNTQtLjc4Ni0uNDczLTEuMjA1LS42NTV6bS0xMC4wNjggMy41ODNsLTIuMDU0LTEuNDcyLjc5OS0xLjExNSAxLjk0MiAxLjM5M2MtLjI2NC4zNjYtLjQ5NS43NjMtLjY4NyAxLjE5NHptMTMuNzA3IDYuMjIzbDIuMzU0Ljk1NC0uNTE0IDEuMjcxLTIuNDI1LS45ODJjLjIxLS4zOTcuNDA4LS44MTIuNTg1LTEuMjQzem0tMTMuMTA4IDEuMTU1bC0yLjM1NiAxLjA2LS41NjItMS4yNTEgMi4zNC0xLjA1MmMuMTczLjQzMy4zNzEuODQ1LjU3OCAxLjI0M3ptLTEuMTc4LTMuNjc2aC0yLjUzOHYtMS4zNzJoMi41MzVjLS4wMTguMjI2LS4wMzUuNDU0LS4wMzUuNjkxIDAgLjIzMy4wMTguNDU4LjAzOC42ODF6Ii8+PC9zdmc+);
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: right 50% bottom 50% ;
    padding: 2em;
    cursor: pointer;
}
.ex2--btn--icone:hover{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTQgMTloLTRjLS4yNzYgMC0uNS4yMjQtLjUuNXMuMjI0LjUuNS41aDRjLjI3NiAwIC41LS4yMjQuNS0uNXMtLjIyNC0uNS0uNS0uNXptMCAyaC00Yy0uMjc2IDAtLjUuMjI0LS41LjVzLjIyNC41LjUuNWg0Yy4yNzYgMCAuNS0uMjI0LjUtLjVzLS4yMjQtLjUtLjUtLjV6bS4yNSAyaC00LjVsMS4xODguNzgyYy4xNTQuMTM4LjM4LjIxOC42MTUuMjE4aC44OTVjLjIzNCAwIC40NjEtLjA4LjYxNS0uMjE4bDEuMTg3LS43ODJ6bTMuNzUtMTMuNzk5YzAgMy41NjktMy4yMTQgNS45ODMtMy4yMTQgOC43OTloLTUuNTcyYzAtMi44MTYtMy4yMTQtNS4yMy0zLjIxNC04Ljc5OSAwLTMuNzIzIDIuOTk4LTUuNzcyIDUuOTk3LTUuNzcyIDMuMDAxIDAgNi4wMDMgMi4wNTEgNi4wMDMgNS43NzJ6bTQtLjY5MXYxLjM3MmgtMi41MzhjLjAyLS4yMjMuMDM4LS40NDguMDM4LS42ODEgMC0uMjM3LS4wMTctLjQ2NC0uMDM1LS42OWgyLjUzNXptLTEwLjY0OC02LjU1M3YtMS45NTdoMS4zNzF2MS45NjRjLS4yNDItLjAyMi0uNDg0LS4wMzUtLjcyNi0uMDM1LS4yMTUgMC0uNDMuMDEtLjY0NS4wMjh6bS0zLjc0MyAxLjI5NGwtMS4wNC0xLjk0IDEuMjA4LS42NDggMS4wMzcgMS45MzNjLS40MTguMTgxLS44MjIuNDAxLTEuMjA1LjY1NXptMTAuNTg2IDEuNzM1bDEuOTQyLTEuMzk0Ljc5OSAxLjExNS0yLjA1NCAxLjQ3M2MtLjE5MS0uNDMtLjQyMy0uODI3LS42ODctMS4xOTR6bS0zLjAxLTIuMzg5bDEuMDM4LTEuOTM0IDEuMjA4LjY0OC0xLjA0MSAxLjk0MWMtLjM4Mi0uMjU0LS43ODYtLjQ3My0xLjIwNS0uNjU1em0tMTAuMDY4IDMuNTgzbC0yLjA1NC0xLjQ3Mi43OTktMS4xMTUgMS45NDIgMS4zOTNjLS4yNjQuMzY2LS40OTUuNzYzLS42ODcgMS4xOTR6bTEzLjcwNyA2LjIyM2wyLjM1NC45NTQtLjUxNCAxLjI3MS0yLjQyNS0uOTgyYy4yMS0uMzk3LjQwOC0uODEyLjU4NS0xLjI0M3ptLTEzLjEwOCAxLjE1NWwtMi4zNTYgMS4wNi0uNTYyLTEuMjUxIDIuMzQtMS4wNTJjLjE3My40MzMuMzcxLjg0NS41NzggMS4yNDN6bS0xLjE3OC0zLjY3NmgtMi41Mzh2LTEuMzcyaDIuNTM1Yy0uMDE4LjIyNi0uMDM1LjQ1NC0uMDM1LjY5MSAwIC4yMzMuMDE4LjQ1OC4wMzguNjgxeiIvPjwvc3ZnPg==);
}

/*Fin ex2*/

/*Début ex3*/

.ex3--container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.ex3--btn{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border: 3px solid black;
    padding: 10px 10px 9px;
    cursor: pointer;
}
.ex3--btn:hover{
    background-color: black;
    color: white;
}
.ex3--btn:hover .ex3--btn--icone{
    fill: white;
}
.ex3--btn--content{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    margin-right: 10px;
}


/*Fin ex3*/