@font-face{
    font-family: 'DreamerRegular';
    src: url('font/Dreamer/DreamerRegular.ttf');
    font-weight: normal;
    font-style: normal;
}

body{ 
    padding: 0px; 
    margin: 0px;  
    overflow-x: hidden; 
    background-color: #F0F0F0;
    background: linear-gradient(180deg,rgba(217, 217, 217, 1) 0%, rgba(240, 240, 240, 1) 40%);
}


ul, li{ 
    margin: 0px; 
    padding: 0px; 
    text-decoration: none;  
    list-style-type: none; 

    font-family: "Inter", sans-serif;
    font-weight: 200;
}

a{ 
    color: #000; 
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-weight: 200;
}


html{ 
    scroll-behavior: smooth; 
}

h1{
    font-family: 'DreamerRegular';
    font-size: 10vw;
}
h2{
    font-family: "Cormorant Garamond", serif;
    font-size: 10vw;
    font-weight: 300;
}

h3, p{
    font-family: "Inter", sans-serif;
    font-weight: 200;
}

.span{
    display: block;
}
.span__titre{
    padding-left: 8vh;
}

    /* MENU */
.head{
    background-image: url(img/symbolB02.svg);
    background-size: 60vh;
    background-repeat: no-repeat;
    background-position: 4vh 8vh;
}
.retour{
    width: auto;
    height: 4vh;
}

.logo{
    width: auto;
    height: 5vh;
}
.menumobile{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: 20px 30px;
}

.h1{
    font-size: 8vh;
    margin: 0px 0px 0px 20px;
    padding-top: 50vh;
    padding-bottom: 10vh;
}
.h1__suite{
    font-size: 5vh;
}
.titre{
    font-size: 8vh;
    margin: 0px 0px 0px 20px;
    padding-top: 50vh;
    padding-bottom: 10vh;
}
.titre__suite{
    font-size: 5.5vh;
}

.fleche{
    padding-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    animation: fleche 2s infinite;
}
@keyframes fleche{
  0% {transform: translateY(0);}
  20% {transform: translateY(0);}
  30% {transform: translateY(0);}
  50% {transform: translateY(5px);}
  80% {transform: translateY(0);}
  100% {transform: translateY(0);}
}
    /* CONTENU */
.contenu{
    margin: 20vh 10px 10vh 20px;
}

.h2{
    font-size: 40px;
    margin-bottom: 20px;
}

.h2__espace{
    margin-top: 20vh;
}
.p{
    font-size: 16px;
}

.p__maj{
    font-size: 14px;
}
.li{
    margin-bottom: 15px;
}

    /* FOOTER */
footer{
  background-color: #1E1E1E;
  padding: 20px 10px;

  border-top: #D9D9D9 solid 1px;
}
.logofooter{
    width: auto;
    height: 5vh;
}
.listefooter{
  display: flex;
  flex-direction: column;

  margin-top: 10px;
}
.listefooter, .listefooter__modif{
  color: #D9D9D9;
  font-size: 18px;
}

@media (min-width: 710px){

    .head{
        background-size: 100vh;
        background-position: 20vw 10vh;
    }

    .titre, .h1{
        font-size: 10vh;
        padding-left: 10vw;
    }
    .titre__suite{
        font-size: 8vh;
    }
    .contenu{
        padding-left: 10vw;
        padding-right: 30px;
    }

    .p{
        max-width: 600px;
        padding-left: 50px;
    }

        /* FOOTER */
    .footer{
        display: flex;
    }
    .liflex{
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .txtfooter{
        font-size: 16px;
        margin-left: 20px;
    }
}

 @media (min-width: 1024px){
    .head{
        background-position: 90% 10vh;
    }
    .titre{
        font-size: 12vh;
        padding-left: 10vw;
    }
    .h1{
        font-size: 12vh;
    }
    .titre__suite{
        font-size: 10vh;
    }
    .contenu{
        padding-left: 15vw;
    }

    .h2{
        font-size: 50px;
    }
    .p{
        max-width: 600px;
        font-size: 18px;
    }
    .p__maj{
        font-size: 16px;
    }
 }

 @media (min-width: 1200px){
    .contenu{
        padding-left: 20vw;
    }
    .p{
        font-size: 20px;
    }
    .p__maj{
        font-size: 16px;
    }
 }

  @media (min-width: 1500px){
    .contenu{
        padding-left: 25vw;
    }
 }

  @media (min-width: 2000px){
    .contenu{
        padding-left: 30vw;
    }
 }