@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DotGothic16&family=Geo:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Jura:wght@300..700&display=swap');

:root{
     --Beige:#c6a989;
     --Bleu:#12769b;

     font-family: 'inter', sans-serif;

}

body{
     font-family: 'inter', sans-serif;
     margin: 0;
     padding: 0;
     background-color: white;
     color: black;
}

/* NAV BAR*/

nav{
     text-align: end;
     position: fixed;
     z-index: 99;
     background-color: white;
     width: 100%;
     box-shadow: 0.5px 0.5px 7px grey;
}

nav ul{
     list-style: none;
     display: flex;
     flex-direction: row;
     gap: 3vw;
     justify-content: end;
     margin-right: 8vw;
}

nav ul li{
     padding: 15px 1vw 0px 2vw;
}

nav ul li a{
     text-decoration: none;
     color: black;
     font-weight: 300;
     font-size: 16px;
}

.menu-toggle{
     display: none;
}

/* HERO */

#hero{
     padding-top: 50px;
     display: flex;
     flex-direction: column;
     background-image: url('/img/decors-fond.jpg');
     background-size: cover;
     height: 90vh;
     text-align:center;
     align-items: center;
}

#hero img{
     max-width: 300px;
     margin-top: 20vh;
}

#hero a{
     text-decoration: none;
     color: white;
     font-size: 18px;
     font-weight: 300;
}

.btn::after {
     content: url('img/arrow.png');
     transform: scale(.5);
}

.btn{
     background-color: var(--Beige);
     border-radius: 25px;
     display: flex;
     align-items: center;
     padding-left: 40px;
     padding-right: 30px;
     margin-top: 12vh;
}

/* TEAM */

#team{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
}

.textarea{
     width: 49vw;
     margin-top: 11vh;
     margin-left: 4vw;
}

.textarea p{
     font-size: 14px;
}

.textarea h2{
     font-size: 22px;
}

.img-chef{
     margin-top: 12vh;
     z-index: 1;
}

.banner{
     margin: 0;
     width: 100%;
     height: 29vh;
     margin-top: -32.5vh;
     box-shadow: 1px 5px 5px #C1C1C1;
}

/* LA CRÊPERIE */

#creperie{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     height: 675px;
     background-image: url(img/brush-bleu-2.png);
     background-repeat: no-repeat;
     background-size: 17.5%;
     background-position: 100% 100%;
}

.img-resto{
     height: 450px;
     margin-top: 13vh;
}

.textarea2{
     margin-top: 22vh;
     width: 36vw;
     margin-right: 5vw;
}

.textarea2 p{
     text-align: justify;
     font-size: 14px;
}

.textarea2 h2{
     font-size: 22px;
}

/* GALLERIE PHOTOS */

#photos{
     margin: 0vh 0 6vh;
     display: block;
     flex-wrap: wrap;
}

.photos img{
     width: 33.15vw;
     margin: -3px;
}

/* MENU */

#menu{
     display: flex;
     flex-wrap: wrap;
     flex-direction: space-between;
     margin: 0;
}

#menu h2{
     margin-left: 7vw;
     width: 100%;
     font-size: 30px;
     margin-bottom: 2vh;
}

#menu h3{
     font-size: 25px;
}

.menu-crepes{
     margin-left: 5vw;
     width: 40%;
     text-align: justify;
}

.crepe-avec-desc strong, span{
     font-style: normal;
}

.crepe-avec-desc p{
     font-size: 16px;
     line-height: 25px;
     font-style: italic;
}

.crepes-sans-desc{
     font-size: 16px;
     margin: 25px auto;
}

.menu-galettes{
     width: 45%;
     margin-left: 5vw;
     text-align: justify;
}

.galette{
     line-height: 25px;
     font-style: italic;
}

.galette strong, span{
     font-style: normal;
}

/* CONTACT */

#reserver{
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     width: 100%;
}

#contact, #form{
     width: 50%;
}

#contact h2{
     margin-left: 9vw;
     font-size: 28px;
     font-weight: bold;
}

.location, .timetable{
     margin-left: 13vw;
     margin-top: 10vh;
}

#contact h3{
     font-size: 22px;
     font-weight: bold;
}

.timetable strong{
     font-style: normal;
}

.timetable p{
     font-style: italic;
}


/* FOOTER */

footer{

}