*{
    margin: 0;
    padding: 0;
}


::-webkit-scrollbar{
    display: none;
}

:root{
    --bleu-fonce : #03989e;
    --bleu-noir : #002728;
    --bleu1 : #00C2CB;
    --bleu2 : #5CE1E6;
    --rouge : #FF5757;
    --gradient1 : linear-gradient(to top left, #00C4CC, #03989E);
    --gradient2 : linear-gradient(to top left , #5CE1E6, #00C2CB);
}



@font-face {
    font-family: robotoLight;
    src: url("/fonts/roboto/Roboto-Light.ttf");
}
@font-face {
    font-family: robotoBold;
    src: url("/fonts/roboto/Roboto-Bold.ttf");
}
@font-face {
    font-family: robotoRegular;
    src: url("/fonts/roboto/Roboto-Regular.ttf");
}


.background{
    background: url("/img/main_page/bg.jpg") center center no-repeat;
    position: fixed;
    z-index: -1;
    background-size: cover;
    height: 100vh;
    width: 100vw;
}




.mainpage{
    background-color: white;
}

.mainpagelong{
    background-color: white;
    /* padding: 0 30px 0px 30px; */
}

.mainpage:first-of-type{
    background-color: #F8F8F8;
    background: url("/img/main_page/background.jpg");
    height: 85vh;
    background-color: white;
    background-size:cover ;
    display:flex ;
    margin-top: 10vh;
}

.mp-align{
    display: flex;    
}



.mptitle{
    color: var(--bleu-noir) ;
    font-family: robotoRegular;
    font-size: 3em;
    margin-top: 50px;
    margin-left: 50px;
}

.mp-image{
    align-items: center;
    display: flex;
}



.mp-title-text {
    font-family: robotoRegular;
    font-size: 4em;
    color: var(--bleu-fonce);
    display: inline-flex;
    text-align: center;
}
.mp-title-text-acv{
    color: var(--rouge);
    font-family:robotoBold ;
}


.mp-title-subtext{
    font-family: robotoRegular;
    font-size: 1.2em;
}

.mp-bloc{
    background-color: var(--bleu1);
    width: 30vw;
    height: 15vh;
    margin: 5vh 10px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mp-bloc p{
    text-align: center;
    color: white;
    font-family:robotoLight ;
}


.mp-subtext-p{
    width: 600px;
    color: var(--bleu-noir);
}

.mp-flex-inner{
    margin: calc(50vh - 60px - 10vh) 0 0 10vw;
    text-align: justify;
}

.orange{
    color: var(--rouge);
    font-family:robotoBold ;
    margin-left: 10px;
}

.gris{    
    color: #D9E5E1;
    font-family:robotoBold ;
    margin-left: 10px;
}

.mp-title-button a{
    text-decoration: none;
    transition: all 2s ease;
}

.mp-button-publier{
    margin: 20px 0 0 10px;
    font-family:robotoBold ;
    background: linear-gradient(to right, var(--bleu1), var(--bleu-fonce));
    padding: 10px 25px;
    border: none;
    color: white;
    font-size: 0.8em;
    border-radius: 15px;
    transition: ease 0.2s all;
    width: fit-content;
    float: left;
}

.mp-button-publier-border{  
    margin: 20px 0 0 0;
    font-family:robotoBold ;
    box-shadow: 0 0 20px grey;
    padding: 10px 25px;
    background-color: white;    
    color: var(--bleu-noir) ;
    font-size: 0.8em;
    border-radius: 15px;
    width: fit-content;
    transition: ease 0.2s all;
    float: left;
}

.mp-button-publier:hover{    
    cursor: pointer;
    color: var(--bleu-noir);
}

.mp-button-publier-border:hover{    
    cursor: pointer;
    color: white;
    background-color: var(--bleu1);
}

.mp-cycle-vie {
    width: 40vw;
    margin: 50px;
}

.mp-div-img{
    width: 50vw;
    text-align: center;
}

.mptitle-goal{
    color: var(--bleu-noir) ;
    font-family: robotoRegular;
    font-size: 3em;
    text-align: center;
    padding: 5vh 0 10vh 0;
}

.mp-goals{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}


.mp-g-flex {
    box-shadow: 0 0 20px lightgrey;
    border-radius: 20px;
    width: 20vw;
    margin: 0 3vw 10vh;
    text-align: center;
    padding: 2vw;
}

.mp-g-flex > p {
    font-family: robotoRegular;
    color: var(--bleu-fonce);
}

.mp-g-flex > h3 {
    font-family: robotoBold;
    color: var(--rouge);
    margin: 3vh 0;
}

.mp-g-flex > img {
    width: 10vw;
}





.fondbleu{
    background-color: var(--bleu1);
    padding: 5vw;
}

.fondbleu sub{
    margin: -5px;
}

.mp-method{
    font-family: robotoBold;
    font-size: 2em;
    text-align: center;
    color: var(--bleu-fonce);
    transition: all 0.5s ease;
}

.mp-method:hover{
    cursor: default;
    color: var(--bleu-noir);
}

.uppertext{
    font-family: robotoRegular;
    font-size: 1em;
    color: var(--bleu1);
    transition: all 0.5s ease;
}

.uppertext:hover{
    color: var(--bleu2);
    cursor: default;
}

.mp-discovermore{
    height: 5vh;
    text-align: center;
    font-family: robotoRegular;
    color: white;
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bleu-fonce);

}


.mp-discovermore i{
    color: var(--rouge);
    transition: all 0.3s ease;
}

.mp-discovermore p{
    transition: all 0.3s ease;
}



.mp-discovermore:hover i{
    cursor: pointer;
    animation: slide2 1s ease-in-out 1;
}

.mp-discovermore:hover p{
    cursor: pointer;
}



@keyframes slide2 {
    0%,
    100% {
        transform: translate(0, 0);
    }
    
    50% {
        transform: translate(0px, 10px);
    }
}

/*----------------------------------------------------------- timeline*/

.categorie{
    transition: all 1s ease;
    background-size: 150vw;
    font-family: robotoBold;
    color: var(--bleu-noir);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12vw;
    z-index: 9000;
    border-radius: 10px;
}

.solo{
    background: url("/img/main_page/illustrations/alone.jpg") center center no-repeat;
    background-size: 100vw;
    transition: all 1s ease;
}

.coop{
    background: url("/img/main_page/illustrations/entreprise.jpg") center center no-repeat;
    background-size: 100vw;
    transition: all 1s ease;
}

.whiteBold{
    color: white;
    font-family: robotoBold;
    margin-left: 7px;    
    font-size: 3em;
}


.solo:hover , .coop:hover{
    background-size: 110vw;
} 


.mpl{
    z-index: 9990 ;
}

.wow{
    display:flex;
    align-items: flex-start;
}

.upperAr {
    height: 10vh;
    position: relative;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.upperAr div{
    width: 5px;
    height:100%;
    background-color: var(--bleu-fonce);
    display: block;
}


.uppercurve{
    height:30vh;
    position:relative;
}

.uppercurve div{
    position:absolute;
    width:14vw;
    border:5px solid var(--bleu-fonce);
    height: calc(100% - 12.5px);
    bottom:calc(5% - 2.5px);
    border-bottom:0;
}

.up-left{
    border-radius:25vw 0 0 0;
    left:calc(25% - 2.5px);
    border-right:0 !important;
}

.up-right{
    border-radius:0 25vw 0 0;
    right:calc(25% - 2.5px);
    border-left:0 !important;

}

.up-left::before, .up-right::before{
    content:'';
    width:12vw;
    position:absolute;
    border:5px solid var(--bleu-fonce);
    /* height:11.5vw; */

}

.up-left::before{
    /* border-radius:0 0 25vw 0; */
    bottom:100%;
    left:14vw;
    border-left:0;
    border-top:0;
}

.up-right::before{
    content:'';
    /* border-radius:0 0 0 25vw; */
    position:absolute;
    border:5px solid var(--bleu-fonce);
    bottom:100%;
    right:14vw;
    border-right:0;
    border-top:0;
}

.part{
    width:50vw;
    justify-content:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    margin: 2vw;
}

.part .bubble{
    width:60%;
    border-radius:10px;
    margin: 25px 0;
    position:relative;
    align-items:center;
    display:flex;
    justify-content:center;
    flex-direction: column;
    padding: 15px;
    box-shadow: 0 0 50px 5px lightgrey;
}

.part div:last-of-type{
    margin-bottom: 0;
}

.part div::before{
    content:'';
    width:3px;
    height:50px;
    top:-50px;
    background: white;
    position:absolute;
}

.part div:first-of-type::before{
    display: none;
}

.bottomAr {
    height: 10vh;
    position: relative;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.bottomAr div{
    width: 5px;
    height:100%;
    background-color: var(--bleu-fonce);
    display: block;
}


.bottomcurve{
    height:30vh;
    position:relative;
}

.bottomcurve div {
    position: absolute;
    width: 12.5vw;
    border: 5px solid var(--bleu-fonce);
    height: 100%;
    border-top: 0;
}

.bt-left {
    border-radius: 0 0 0 25vw;
    left: calc(25% - 2.5px);
    border-right: 0 !important;
}

.bt-right{
    border-radius:0 0 25vw 0;
    right:calc(25% - 2.5px);
    border-left:0 !important;

}

.bt-left::before, .bt-right::before{
    content:'';
    width:12vw;
    position:absolute;
    border:5px solid var(--bleu-fonce);
    /* height:11.5vw; */

}

.bt-left::before {
    content:'';
    left: 12vw;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    top: 100%;
}

.bt-right::before {
    content: '';
    right: 12vw;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    top: 100%;
}


.parttitle{
    font-family: robotoBold;
    font-size: 1.4em;
    margin: 10px 0px 20px 0px;
    text-align: left !important;
}

.parttext{
    font-family: robotoRegular;
    font-size: 1.2em;
}

.moreInfoBtn{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5vh;
}

.moreInfoBtn > a{
    color: var(--bleu-fonce);
    padding: 10px 20px;
    border: solid 2px var(--bleu-fonce);
    border-radius: 10px;
    text-decoration: none;
    font-family: robotoRegular;
    transition: all 0.5s ease;
}

.moreInfoBtn > a:hover{
    color: white;
    background-color: var(--bleu-fonce);
}

.textDiv{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15vh 0;
}

.textDiv p{
    font-family: robotoBold;
    font-size: 1.5em;
    color: var(--rouge);
}

.detailsDiv{
    display: flex;
    align-items: center;
    flex-direction: column;
}

.detailsDiv-img-cit{
    display: flex;
    align-items: center;
    flex-direction: column;
}

.detailsDiv-img-cit p{
    font-size: 2rem;
    color: var(--rouge);
    font-family: robotoRegular;
    opacity: 50%;
}

.detailsDiv-img-cit img{
    width: 80%;
}

.discoverMoreBtn{
    margin: 10vh;
}

.discoverMoreBtn a{
    text-decoration: none;
    color: var(--rouge);
    padding: 2vh 6vw;
    border: var(--rouge) 2px solid;
    border-radius: 30px;
    transition: all 0.5s ease;
}

.discoverMoreBtn a:hover{
    background-color: var(--rouge);
    color: white;
}

.quoteInfo{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20vh 0;
}

.quoteInfoText{
    display: flex;
    align-items: center;
    flex-direction: column;
}

.quoteInfoText .red{
    color: var(--rouge);
    font-size: 5em;
    font-family: robotoBold;
}

.quoteInfoText .quote{
    font-family: robotoBold;
    color: white;
    font-size: 1.5em;
}

/*----------------------------------------------carrousel*/

.tns-nav{
    display: flex;
    align-items: center;
    justify-content: center;
}


.tns-nav > button{
    height: 10px;
    width: 10px;
    border-radius: 50px;
    border: 0;
    background-color: var(--bleu-noir);
    margin: 0 5px 50px 5px;
}

.my-slider > div > img{
    width: 30vw;
    margin: 1.5vw;
}

.mptitle-news{
    color: var(--bleu-noir) ;
    font-family: robotoBold;
    font-size: 3em;
    text-align: center;
    padding: 5vh 0 2vh 0;
}