* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
    --earth: #8C4E37;
    --cream:#F3EBDD;
    /*#A35C3D
    #9C5B3C
    #B16846
    haut gamme #8C4E37
    fond crème : #F3EBDD
    terre cuite : #8C4E37
    texte foncé : #2E2A26*/
}
html {
  font-family: 'Montserrat', sans-serif;
}
header nav{
    background-color: rgb(10, 10, 10);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
}
header nav i{
    margin-right:18px;
}
header nav a{
    border-radius: 25px;
    background-color: var(--cream);
    padding:9px 25px;
    margin: 3px;
    font-size: 16px;
    font-weight:700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
    color:black;
    
}
header nav a:hover{
    text-decoration: underline;
}
.header-background{
    padding-top : 50px;
    height: 600px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    background-image:   linear-gradient(
    #f3ebdd68,
    #f3ebdd9b
    ), url('/assets/table1.avif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.logo{
    width:clamp(340px, 25%, 390px);
    object-fit: contain;
    backdrop-filter: blur(1px) brightness(105%);
    border-radius : 50%;
}
/* ------------- section offers ---------------- */
#offers{
    background-color: var(--cream);
}
.intro{
    background-image:  linear-gradient(
    #5a322461,
    #5a322461
    ),url('/assets/planches.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-block: 70px 100px;
}
.intro h2{
    font-size : clamp(45px, 4vw, 90px);
    color: white;
    opacity: 40%;
    text-align: center;
    margin-bottom: 30px;
}





.intro p{
    color:white;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
}
.meals{
    width: clamp(300px, 90%, 1200px);
    margin-inline: auto;

    background-image:url('/assets/table3.avif');
    background-repeat: repeat;
    background-size: contain;
    background-position: center;

    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap:wrap;

    margin-top: -100px;
    min-height: 200px;
}
.meal{
    width:300px;
    margin-block: 50px;
    margin-inline: clamp(10px, 5vw, 100px);

}
.meal img{
    width:95%;
    object-fit: contain;
}
/*.meal img:hover{
    width:100%;
}*/
.meal h3{
    font-size: 39px;
    font-family: 'Grandstander', cursive;
    text-align: center;
}
.meal p{
    font-weight: bold;
    text-align: center;
}
/* -------------- section location -------------- */
#location{
    background-color: var(--cream);
    padding-top: 30px;
}
#location h2{
    text-align: center;
    font-size:clamp(25px, 3vw, 45px);

    color: var(--earth);
}
#location p{
    font-size:15px;
    font-weight: 500;
}
.location-container{
    width: clamp(300px, 90%, 1200px);
    margin-inline: auto;
    margin-block:20px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    padding:30px 10px;
    gap:20px 0;

    background-image:  linear-gradient(
    #e8e0d249,
    #f3ebdd43
    ),url('/assets/grey-planch.avif');
    background-repeat: repeat;
    background-size: cover;
    background-position: 75% 25%;
}
.entrence, .map{
    width: clamp(370px, 40%, 472px);
}
.entrence img{
    display: block;
    width:72%;
    object-fit: contain;
    margin-bottom: 20px;
    margin-inline: auto;
}
.map img{
    width:95%;
    object-fit: contain;
    border:solid black 1px;
}
/* ------------ section contact ------------- */
#contact{
    background-color:  rgb(10, 10, 10);
    min-height: 150px;
    padding-block:50px;
    padding-inline: clamp(4px, 5%, 160px);

    display:flex;
    flex-flow: flow;
    justify-content: center;
}
.contact-logo{
    width:clamp(100px, 8%, 110px);
    margin-right: clamp(3px, 3%, 30px);
    object-fit:contain;
}
.contact-details p{
    margin-block:14px;
    color:var(--cream);    
}
.contact-details i{
    margin-right:18px;
}
/* ---------- small screens ------------ */
@media (max-width: 480px){
    #offers, #location, #contact {
        scroll-margin-top: 50px;
    }
    header nav{
        flex-wrap: nowrap;
        position: fixed;
        width:100%;
        z-index:10;
        padding:0;
    }
    header nav i{
        text-align: center;
        margin:auto;
        background-color:var(--cream);
        font-size: 0.9rem;
        padding:10px;
        border-radius: 50%;
        display:block;
    }
    .menu-remove{
        display: none;
    }
    .menu-text{
        color:var(--cream);
        display:block;
        margin-top:4px;
        font-size:0.9rem;
    }
    header nav a{
        flex:1;
        /* width:33%; */
        text-align: center;
        border-radius: 0;

        background-color: rgb(10, 10, 10);;
        padding:0;
        margin: 0;
        font-size: 16px;
        font-weight:700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        text-decoration: none;
        /* color:black; */
        
        border-right: 1px solid white;
        padding:7px;
        
    }
    header nav a:last-child{
        border-right:none;
    }
    header nav a:hover{
        font-size: 1.1rem;
    }
}