@font-face {
    font-family: 'acumin'; /* 18px */
    src: url('fonts/AcuminProBook.otf') format('truetype');
}

@font-face {
    font-family: 'bebas'; /* 30px */
    src: url('fonts/bebasneuepro-smeeb.otf') format('truetype');
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {
    --scroll-behavior: smooth;
    scroll-behavior: smooth;
}

header{
    width: 100%;
    background-color: #F8F4EB;
    font-family: 'bebas';
    font-stretch: semi-expanded;

}

header .nav{
    display: flex;
    max-width: 1600px;
    list-style: none;
    margin: auto;
    justify-content: space-between;
    align-items: center;
    padding: 3%;
    flex-wrap: wrap;
}

header .nav div{
    display: flex;
}

header .nav li{
    margin: auto 10px;
}

header .nav img{
    width: 25vw;
    max-width: 200px;
}

header .nav select{
    border: none;
    font-size: 16px;
    font-family: 'bebas';
    background-color: transparent;
}


header .intro{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.intro div{
    width: 100%;
    padding: 2% 4%;
}

.intro .img{
    text-align: center;

}

.intro div img{
    width: 100%;
    max-width: 500px;

}

.intro div h4{
    display: flex;
    align-items: center;
}

.intro div hr{
    height: 3px;
    width: 20px;
    background: #D7556C;
    border: none;
    margin-right: 5px;
}

header .intro h1{
    text-transform: uppercase;
}

header .intro p{
    margin: 10px auto;
}

header .intro .boutton{
    display: flex;
    justify-content: center;
    max-width: 600px;
    margin: auto;
}

header .intro div button{
    padding: 10px;
    border: none;
    background-color: #D7556C;
    border-radius: 5px;
    color: #F8F4EB;
    text-align: center;
    margin: auto;
    width: 100%;
    font-size: 10px;
    max-width: 540px;
    display: block;
}

header .intro .boutton button{
    padding: 10px;
    border: none;
    background-color: #D7556C;
    border-radius: 5px;
    color: #F8F4EB;
    margin: 2px;
    display: flex;
    align-items: center;
    font-size: 10px;
    justify-content: center;
}



header .intro .boutton img{
    width: 15px;
}



main{
    background-color: #ECB9C4;
    font-family: 'acumin';
    width: 100%;
    overflow-x: hidden;
    border-top: solid 2px #D7556C;
    border-bottom: solid 2px #D7556C;
}

main img{
    width: 100%;
    max-width: 360px;
    margin: 10px auto;
}


a:link {
    color: #F8F4EB;
}
/* lien visité */
a:visited {
    color: #F8F4EB;
}
/* souris sur le lien */
a:hover {
    color: #ECB9C4;
}
/* lien sélécté */
a:active {
    color: #F8F4EB;
}


main .large{
    /*height: 100vh;*/
    /*
    max-width: 1600px;
    */
    width: 100%;
    padding: 2% 4%;
    margin: auto;

}

main .large h3{
    margin: 10px auto;
}

main .large ul{
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
}

main .large ul h3{

    margin: 2px auto;
}

main .large ul li{
    margin: auto;
}

main .large ul h6{
    color: #D7556C;
    margin-bottom: 10px;
}

main .large hr{
    border: none;
    background-color: #F8F4EB;
    height: 2px;
    margin: 20px auto;

}

main .large button{
    padding: 10px;
    border: none;
    background-color: #D7556C;
    border-radius: 5px;
    color: #F8F4EB;
    margin: 2px auto;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-size: 10px;
}


class{

    color : #F8F4EB;
    color : #ECB9C4;
    color : #D7556C;
    color : #E28798;

}




footer{
    width: 100%;
    background-color: #F8F4EB;
    font-family: 'acumin';
    color: #000;
    font-size: 14px;
    padding: 3%;
}

footer .large{

    display: flex;
    margin: auto;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

footer div{
    width: 100%;
}

footer div p{
    text-align: justify;
    padding: 5px;
    margin: 10px auto;
}

footer div ul{
    list-style: none;
}


footer img{
    width: 25vw;
    max-width: 220px;
}

footer .lien{
    display: flex;
    justify-content: space-around;
}

footer .lien ul{
    margin: 5px;
    line-height: 2.2;
}

footer .lien hr{
    height: 2px;
    width: 25px;
    background: #D7556C;
    border: none;
}


footer a:link {
    color: #000;
}
/* lien visité */
footer a:visited {
    color: #000;
}
/* souris sur le lien */
footer a:hover {
    color: #D7556C;
}
/* lien sélécté */
footer a:active {
    color: #000;
}

.large{
    max-width: 1400px;
    margin: auto;
}

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

    footer .large{
        flex-wrap: nowrap;
    }

}

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

    header .nav li, header .nav select{
        font-size: 24px;

    }

    header .intro div{
        width: 50%;
    }

    header .intro .boutton {

        width: 100%;

    }

}