/* ###########
    HOME - INDEX
############## */

@font-face {
    font-family: "NowLight";
    src: url("./../../font/NowLight/fonnts.com-Now-Light.otf");
}

body{
    position: inherit;
    position: relative;
}
.banniere-bloc.recrutement{
    width: 40%;
}
.banniere-bloc strong{
    color: white;
    display: block;
    margin-top: 2vh;
    opacity: 0.9;
    width: 100%;
}
#home{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    background-blend-mode: multiply;
    background-image: url('/IMG/home/pieds.jpg'),linear-gradient(180deg,#4f4f4f 0%,#ffffff 100%) !important;
    background-position: 100% 70%;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 98;
}
.center{
   text-align: center;
   width: 60%;
   color: white;
   font-family: 'light';
}
.center h1{
    margin-bottom: 2vh;
    font-size: 1.5em;
    font-family: 'regular';
}
.center p{
    font-size: 1em;
}
.center .buttons{
    margin: 5vh auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 70%;
}
.center .buttons a{
    width: 45%;
    text-decoration: none;
    color: white;
    padding: 1vh;
    border: 2px solid white;
    border-radius: 0.3vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}
.center .buttons a:hover{
    background-color: lightgray;
}
.center .buttons a img{
    width: 0.7em;
    margin-left: 1em;
    transition: 1s;
    display: none;
}
.center .buttons a img.visible{
    display: block;
}


main{
    width: 80%;
    margin: 20vh auto;
}
main article{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
main article section{
    width: 49%;
}
main article img#big{
    width: 49%;
    box-shadow: 0px 2px 18px 0px rgba(0,0,0,0.3);
}
main article section h2,
main article section h3{
    margin-bottom: 1em;
    font-family: 'bold';
    font-size: 2em;
}
main article section h3{
    font-family: 'regular';
    font-size: 1.4em;
    margin-bottom: 2em;
}
main article section p{
    font-size: 0.8em;
    font-family: 'light';
    margin-bottom: 1em;
}
main article section p b{
    font-family: 'bold';
}
h1#about{
    text-transform: uppercase;
    opacity: 0.3;
    font-size: 0.9em;
    margin-bottom: 5vh;
}
main article ul{
    list-style: none;
    margin-top: 5vh;
}
main article ul li{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 4vh;
}
main article ul li p{
    width: 95%;
    font-family: 'light';
    font-size: 0.8em;
}
main article ul li img{
    width: 1.5em;
    margin-right: 1em;
}

.conseil h4{
    margin-top: 5vh;
    font-family: 'bold';
}
.conseil p{
    font-family: 'light';
    font-size: 0.8em;
}


.sky{
    width: 100%;
    background-image: url('/IMG/home/pieds.jpg');
    background-position: 100% 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sky > div{
    width: 80%;
    padding: 10vh 0;
}
.sky > div h5{
    font-size: 2em;
    font-family: 'bold';
}
.sky .count{
    margin-top: 5%;
    width: 100%;
    background-color: #ffffffa2;
    border-radius: 0.5em;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    height: 80%;
    padding: 5vh 0;
}
.sky .count div{
    width: 25%;
    text-align: center;
}
.sky .count div span{
    font-size: 3em;
    font-family: 'bold';
}
.count p{
    margin-top: 3vh;
}


main h2#discover{
    font-size: 2em;
    font-family: 'bold';
}

main article section div{
    box-shadow: 0px 10px 24px 6px rgba(0,0,0,0.06);
    padding: 2em;
    text-align: center;
}
main article section div img{
    width: 100%;
    margin-bottom: 3vh;
}
main article section div h3{
    font-size: 1.1em;
    font-family: 'bold';
    margin-bottom: 1vh;
}
main article section div p{
    font-family: 'regular';
}
main article section a{
    display: block;
    margin: 5vh auto;
    width: 50%;
    text-decoration: none;
    color: black;
    border-radius: 2em;
    padding: 0.3vh;
    border: 1px solid black;
    font-size: 0.9em;
    text-align: center;
    transition: 0.3s;
}
main article section a:hover{
    background-color: #dfdfdf;
    border: none;
}
.sky.second{
    height: auto;
}
.sky.second .count div{
    text-align: inherit;
    width: 27%;
}
.sky.second .count div span{
    font-size: 1em;
}
.sky.second .count div p{
    font-size: 0.8em;
    font-family: 'light';
}


/* RECRUTEMENT */
main#recrutement{
    width: 100%;
    margin: 0;
}
main#recrutement article{
    width: 100%;
    background: linear-gradient(180deg,#ffffff 21%,#f9f9f9 100%)!important;
    justify-content: center;
    padding: 10vh 0;
}
main#recrutement article#fonctionnement{
    background-image: url('/IMG/home/bannieres/recrutement.jpg'),linear-gradient(180deg,#ffffff 0%,#e5e5e5 100%)!important;
    background-position: 100% 0%;
    background-blend-mode: screen;
    margin-top: 5vh;
}

main#recrutement article div:nth-child(1){
    width: 30%;
    text-align: center;
}
main#recrutement article#fonctionnement div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 80%;
}
main#recrutement article div h2{
    font-family: 'bold';
    margin-bottom: 2vh;
    width: 100%;
}
main#recrutement article#fonctionnement div div{
    width: 30%;
    text-align: center;
    display: block;
    margin-top: 5vh;
}
main#recrutement article div div img{
    width: 2.5em;
    margin-bottom: 2vh;
}
main#recrutement article div div h3{
    font-family: 'bold';
    font-size: 1em;
}
main#recrutement article div div p{
    font-size: 0.8em;
}

main article#points{
    width: 80%;
    margin: auto;
    justify-content: space-between;
    background: none !important;
}
main article#points h2{
    font-family: 'bold';
    margin-bottom: 5vh;
}
main article#points ul{
    width: 48%;
}
main article#points ul li{
    flex-wrap: nowrap;
}
main article#points h2{
    width: 100%;
}


.processus{
    width: 100%;
    background-image: url('/IMG/home/bannieres/massage.jpg');
    padding: 10%;
    box-sizing: border-box;
}
.processus h2{
    text-align: center;
    font-family: 'bold';
    margin-bottom: 15vh;
    font-size: 1.6em;
}
.processus .barre{
    width: 100%;
    background:#f7f7f8;
    display: flex;
    flex-wrap: wrap;
    border-top-width: 2px; 
    border-color: rgba(0,0,0,0.12);
}
.processus .barre div{
    width: calc(100% / 6);
    text-align: center;
}
.processus .barre div img{
    width: 3em;
    margin-top: 2em;
}
.processus .barre div p{
    font-size: 0.8em;
    width: 80%;
    margin: auto;
}
.processus .barre div .circle{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: #efdec0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'bold';
    margin: -25px auto;
    z-index: 90;
}

body{
    position: relative;
}

footer{
    background-color: black;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 2vh 0;
    box-sizing: border-box;
    width: 100%;
    position: absolute;
    top: 100%;
    z-index: 999;
 }
 
 footer p#copyright{
    text-align: center;
    color: white;
    padding: 1em;
    font-size: 0.8em;
    box-sizing: border-box
 }