/* import général*/
@import url(/CSS/general.css);

/*import header */
@import url(/CSS/header.css);

/* import footer */ 
@import url(/CSS/footer.css);

#qui-sommes-nous:target, #recrutement:target, #nos-equipes:target {
    padding-top: 4rem; 
    margin-top: 0; 
}

/* main */


/* apropos.html - section qui sommes nous */

#qui-sommes-nous {
    padding: 2rem;
}

#qui-sommes-nous h2{
    color: #68991a;
}

@media screen and (min-width: 767px){
    #qui-sommes-nous ul{
        display: flex;
       padding: 2rem;
    }
}

#qui-sommes-nous li{
    margin: 2rem auto;
    font-size: 1rem;
}

#excellence{
    color: #726460;
    font-weight: bold;
    
}

.circle {
    background: linear-gradient(#9ac455, #9b7c73);
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    text-align: center;
    margin: 5px 20px;
    font-size: 1rem;
    padding: 1rem;
    display: flex;
    height: 16rem;
    width: 16rem;
    color: #fff;
}


/* apropos.html - section recrutement */

#recrutement{
    text-align: left;
    color: #7a615b;
    padding: 1rem;
}


#recrutement-container{
    padding: 1rem;
    width: 90vw;
    margin: 0 auto;
}

#recrutement-container article{
    margin: 1rem auto;
    padding: 0 ;
}

.map-google{
    width: 100%;
    height: 45vh;
    border-radius: 3px;
    box-shadow: black 1px 1px 2px ;
}

#recrutement-container h3{
    text-align: left;
    font-size: 1.5rem;
}

#recrutement-container li{
    list-style: circle;
    margin-left: 2rem;
}

#recrutement-container a{
    color: #7a615b;
}

#recrutement-container a:hover{
    color: #68991a;
    font-weight: bold;
}

@media screen and (min-width:767px) {

    #recrutement-container{
        display: flex;
        padding: 1rem;
        width: 90vw;
        margin: 0 auto;
    }
    
    #recrutement-container article{
        flex: 1;
        padding: 1rem;
    }

    #article-border-left{
        border-left: #7a615b 2px solid;
        padding-left: 1rem;
    }

}

/* apropos.html - section nos equipes */

#nos-equipes-container {
    padding: 2rem;
    width: 90vw;
    margin: 0 auto;
}

#img-nos-equipes{
    width: 100%;
}

@media screen and (min-width:1024px){
    #nos-equipes-container {
        width: 70vw;
    }
    
    #img-nos-equipes{
        width: 100%;
        padding: 1rem;
    }
}