/*-Réalisation par Deguite cédric fait 2021------------------*/
*{
    margin:0;
    padding:0;
}
html{
    font-family:'arial';
    font-size:16px;
}
h1{
    color:black;
    font-size:40px;
    font-family: 'lobster',cursive;
}
h2{
    color:#6e39ff;
    
}
h3{
    color:#B20000;
}
a{
    color:whitesmoke;
    text-decoration:none;
    padding:35px;
    font-size: 30px;
}
a:hover{
    color:wheat;
    text-decoration:underline;
}
#hero{
    background: url('./images/zone_titre.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height:100%;
}
nav{
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    padding-bottom:20px;
}
#bandeau{
    margin-top:10%;
    margin-bottom: 10%;
    background-color: rgba(255,255,255,0.5);
}
#contenu{
    text-align: center;
    padding:2%;
}
#contenu a{
    color:white;
    border:2px solid wheat;
    border-radius:18px;
    padding:10px;
    transition:ease 2s;
}
#contenu a:hover{
    color: red;
    background-color: wheat;
}
#contenu img{
    transition:1.5s;
    border-radius: 35%;
    height:300px;
}
#contenu img:hover{
    transform: scale(1.5);
}
#apropos{
    display:flex;
    
}
#apropos_image{
    padding:20px;
    flex:1
}
#apropos_image img{
    flex:1;
    max-width: 100%;

}
#apropos_texte{
    padding:10px;
    flex:2;
    text-align:justify;
    font-size:24px;
}
#services{
    display:flex;
    justify-content: space-between;
    background-color: #666;
    color: white;
    padding:20px;
    text-align:center;
}
.services_item p{
    text-align:justify;
    padding:20px;
}
.list1{
    color:black;
    padding:10px;
}
#apropos_texte1{
    padding-left:10%;
    flex:2;
    text-align:justify;
    font-size:48px;
    margin-bottom:20px;
}
#button{
    width: 50px;
    height:50px;
    border-radius:50%;
    background-color: wheat;
}
@media screen and(max-width:414px){
    #apropos{
        flex-direction:column;
    }/*Ici, on referme la déclarations #propos*/
    #services{
        flex-direction:column;
    }/*Ici, on referme la déclaration #services*/
    nav a{
        display:block;
        padding:10px;
    }/*Ici, on referme la déclaration nav a*/
}/*Ici, on referme la média query*/
footer{
    display: flex;
    justify-content:center;
}
article{
    width:100%;
    height:30px;
    background-color:#666;
    text-align: center;   
    opacity:0.2;
}
article:hover{opacity:1;
    color:white;}