:root {

    --blanc:white;

    --bleu:#4c8f9f;

}



@font-face {

    font-family: lato;

    src: url(/fonts/lato-regular.ttf);  

    font-display: swap; 

}



@font-face {

    font-family: lato-bold;

    src: url(/fonts/Lato-Bold.ttf);  

    font-display: swap;

}







*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

    

}



body, html{

    position: relative;

    width: 100%;

    font-size: 16px;

    overflow-x: hidden !important;

}



body {

    font-family: lato;

}





/* -- Se change en row après -- */

.flex {

    display: flex;

    flex-direction: column;

}



.flex-column {

    display: flex;

    flex-direction: column;

}



.marge {

    padding-left: 20px;

    padding-right: 20px;

}



.marge-left{

    padding-left: 20px;

    padding-right: 20px;

}



.marge-right{

    padding-left: 20px;

    padding-right: 20px;

}



.danger{

    color: red;

    margin: 8px 0;

    font-weight: bold;

}



a {

    display: inline-block;

    text-decoration: none;

}



a, .bouton{

    transition: color 0.4s, background-color 0.4s;
    cursor: pointer;
} 





#ancre{

    position: absolute;

    top: -125px;

}



section{

    position: relative;

}



img {

    width: 100%;

    height: auto;

    display: block;

}



.img-absolute {

    position: absolute;

}



form #name{

    display: none;

}





label{

    color: var(--bleu);

    font-weight: bold;

}



input,textarea {

    padding: 15px;

    font-family: lato-bold;

    color: var(--bleu);

}





input::placeholder,textarea::placeholder{

    color: var(--bleu);

    opacity: 1;

}

input:-ms-input-placeholder,textarea:-ms-input-placeholder{

    color: var(--bleu);

}



input::-ms-input-placeholder ,textarea::-ms-input-placeholder {

    color: var(--bleu);

}

input[type="checkbox"] {

    margin-right: 8px;

}



input[type="checkbox"] + label {

    margin-right: 29px;

}









header{

    position: fixed;

    top: 0;

    left: 0;

    z-index: 10;

    padding-left: 5%;

    height: 100px;

    width: 100%;

    background-color: white;

}



header.scrolled{

    box-shadow: 0px 1px 5px black;

}



header a{

    color: black;

}



header .col-1{

    display: flex;

    justify-content: space-between;

    width: 95%;

    margin: auto auto;

}



header .col-1 p{

    color: var(--bleu);

}



header .col-1 p:nth-child(1){

    font-size: 2em;

}





header .col-2{

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    margin-top: -82px;

}



header .col-2 div{

    display: flex;

    justify-content: flex-end;

    margin: 5px 2.5%;

}



.nom-melissa{

    display: none;

}



header .col-2 picture {

    margin-right: 14px;

    text-align: left;

}



header .col-2 p, header .col-2 a{

    width: 180px;

    display: inline;

}



.logo-header img{

    width: 100px;

}





.arrow{

    position: fixed;

    right: 20px;

    bottom: 20px;

    padding: 25px; 

    background-color: grey;

    border-radius: 50%;

    opacity: 0.75;

    cursor: pointer;

}



.arrow img{

    width: 35px;

    height: 35px;

}



/*********** 



    MAIN CSS  



************/



li {

    list-style: none;

}



.banner{

    position: relative;

    margin-top: 100px;

}



.banner .banner-txt{

    width: 100%;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    text-align: center;

}





p{

    color: #051018;

}



ul li:before{

    content: url("/images/list.png");

    margin-right: 11px;

}



.bouton {

    background-color: var(--bleu);

    color: var(--blanc);

    padding: 13px 19px;

    border-radius: 36px;

    margin-top: 27px;

    border: 1px solid transparent;

}



.bouton:hover {

    background-color: var(--blanc);

    border: 1px solid #0e0f0f;

    color: #0e0f0f;

}



footer {

    margin-top: 45px;

    margin-bottom: 66px; 

}



footer .footer-links{

    justify-content: space-between;

    row-gap: 20px;
}

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



    

}





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

    .flex{

        flex-direction: row;

    }

    .marge {

        padding-left: 103px;

        padding-right: 103px;

    }



    .marge-left{

        padding-left: 103px;

        padding-right: 0;

    }



    .marge-right{

        padding-left: 0;

        padding-right: 103px;

    }



    header{ 

        width: 100%;

        display: flex;

        justify-content: space-between;

        position: fixed;

        top: 95px;

        background-color: var(--blanc);

        z-index:1;

        padding-top: 9px;

        padding-bottom: 9px;

        padding-left: 2.5%;

        padding-right: 2.5%;

        align-items: center;

        flex-direction: row;

        transition: all ease 0.5s;

    }



    header .col-1{

        display: flex;

        justify-content: unset;

        width: auto;

        margin: 0;

    }



    header.scrolled{

        height: 100px;

        top: 0;

        box-shadow: 0px 1px 5px black;

    }



    header.scrolled .col-1 a{

        top: 0; 

    } 



    header.scrolled .logo-header img{

        width: 100px;

    }



    header .col-1 div{

        margin-left: 253px;

    }



    header .col-1 a{

        position: absolute;

        top: -49px;

        width: max-content;

    }



    .logo-header img{

        width: 201px;

    }



    header .col-2{

        flex-direction: row;

        margin: 0;

    }



    header .col-2 div{

        display: flex;

        margin: 5px 0 5px 20px;

    }



    .banner{

        margin:0;

    }



    .nom-melissa{

        display: block;

    }

    

}



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

    



}





@media only print{

h1,h2,h3,h4,p,a,li{color:#000 !important;}

nav{display:none;}

}