*{
    box-sizing : border-box;
}
body{
    margin :0;
    font-size :18px;
    background-color:#FFF;
}

/**********************************************
HEADER
*********************************************/
header{
    display : flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    text-align: center;
    background: linear-gradient(#ebe3db, #FFF);
    font-family : "Athiti";
    color :#4c4343;
    width:100%;
}

#logoo {
    width:20%;
}
.logo{
    display : flex;
    flex-direction: column;
    align-items:center;
}
h1{
    text-transform : uppercase;
    font-family : "Athiti";
    color :#4c4343;
    font-size :30px;
}
.fa-star{
    font-size : 20px;
    color: #950000;
    align-items : center;
    margin : 0 10px;
}
.toolbar{
    display:flex;
    flex-direction : column;
    font-family : "Athiti";
    color :#4c4343;
    background-color : #ebe3db;
    font-size : 25px;
    font-weight : bold;
    margin-bottom : 1em;
}
.toolbar a:hover{
    color : #ebe3db;
    background-color : #4c4343;
}
a{
    text-decoration : none;
    color :#4c4343;
} 

.toolbar > a {
    border-top :1px solid #4c4343;
    border-bottom :1px solid #4c4343;
}

/************************************
corps
*************************************/
main{
    margin : 0 2em;
}

h2{
    text-align:center;
    font-family : "Merienda";
    font-weight : normal;
}
h3{
    text-align:center;
}

#carousel{
    margin : 2em;
    padding:0;
}
div img{
    width : 100%;
}
.menus{
    display:flex;
    flex-direction : column;
}
.meat{
    background-color : #ebe3db;
    padding:2em;
    margin-bottom : 1em;
}
.meat p{
    border-bottom: 1px dashed #4c4343;
}

.meat> img:hover{
    background-color :#4c4343;
    opacity : ;
}

.fish{
    background-color : #ebe3db;
    padding:2em;
    margin-bottom : 1em;
}
.fish p{
    border-bottom: 1px dashed #4c4343;
}

.vege{
    background-color : #ebe3db;
    padding:2em;
    margin-bottom : 1em;
}

.vege p{
    border-bottom: 1px dashed #4c4343;
}

button{
    margin : auto;
    text-align : center;
    background-color :#4c4343;
    color : #FFF;
    font-family :"Athiti" ;
    font-size : 18px;
    font-weight: bold;
    width : 100%;
}

button:hover{
    background-color :#950000;
    color :#ebe3db ;
}

button img{
    width : 1.5em;
    margin : 5px;
    vertical-align : middle;
}

figure{
    position : relative;
}
figcaption{
    position : absolute;
    top :0;
    right: 0;
    bottom : 0;
    left :0;
    background-color : rgba(0,0,0,0.6);
    opacity : 0;
}

figcaption > span {
    color: white;
}

figure :hover figcaption{
    opacity : 1;
}
    


/*********page des menus*************/

.detailmenu{
    font-family : "Athiti";
    text-align: center;
    font-size : 18px;
}

.details{
    display:flex;
    flex-direction : row;
    justify-content : space-around;
    font-family : "Athiti";
    color :#4c4343;
    text-transform : uppercase;
    font-size : 25px;
    font-weight : bold;
    margin-bottom : 1em;
    text-align: center;
}
.details a{
    color : #4c4343;
    background-color : #ebe3db;
    width : 5em;
}

.details a:hover{
    color : #FFF;
    background-color : #950000;
    width : 5em;
}
a{
    text-decoration : none;
    color :#4c4343;
} 
/*******images plats******/

.plats{
    background-color : #ebe3db;
    margin :1em;
    padding:1em;
    display : grid;
    grid-template-columns : 1fr 1fr;
    grid-auto-rows : 30vh;
    grid-gap : 1em;
    max-width :100%;
    justify-items : center
}

.plats >img{
    box-shadow: 5px 5px 5px #4c4343;
    max-width : 100%;
    max-height: 100%;
    width: auto;
    
}

.desserts{
    background-color : #ebe3db;
    margin :1em;
    padding:1em;
    display : grid;
    grid-template-columns : 1fr 1fr;
    grid-auto-rows : 30vh;
    grid-gap : 1em;
    max-width :100%;
    justify-items : center
}
.desserts >img{
    box-shadow: 5px 5px 5px #4c4343;
    max-width : 100%;
    max-height: 100%;
    width: auto;
}

.cocktails{
    background-color : #ebe3db;
    margin :1em;
    padding:1em;
    display : grid;
    grid-template-columns : 1fr 1fr;
    grid-auto-rows : 30vh;
    grid-gap : 1em;
    max-width :100%;
    justify-items : center
}

.cocktails >img{
    box-shadow: 5px 5px 5px #4c4343;
    max-width : 100%;
    max-height: 100%;
    width: auto;
}

.alone{
    display : flex;
    justify-content: center;
    grid-column : 1/3

}
/************************************
FOOTER
************************************/

footer {                           /**/
    padding : 2em;
	text-align: center;            /**/ 
	color: #fff;                   /****FOOTER GRIS 3WA*/
	background-color: #444; 

}


.footer{
    display : flex;
    flex-direction : column;
    padding : 2em;
    background-image: url(images/footer-bg.jpg);
    color : #FFF;
    text-align : center;
    width : 100%;
    
}
.footer h4{
    border-bottom : 1px dashed #FFF;
    font-family : "Merienda";
    font-size : 18px;
}


/*******************************************************************************
RESPONSIVE
*******************************************************************************/

/* *****************************************************************
 VERSION TABLETTE
***************************************************************** */

@media screen and (min-width: 780px) and (max-width: 1200px) {
	.toolbar{
	    flex-direction : row;
	    width : 100%;
	    justify-content : space-between;
	}
	.toolbar >a{
	    border-top :none;
	    border-bottom :none;
	    padding :0 1em;
	    margin : 0 1em;
	}
	
	.footer{
	    flex-direction : row;
	    width : 100%;
	    justify-content : space-between;
	}

/****************page menus*****************/

    .plats{    background-color : #ebe3db;
        margin :1em;
        padding:1em;
        display : grid;
        grid-template-columns : 1fr 1fr 1fr;
        grid-remlpate-rows : 1fr 1fr 1fr
        grid-gap : 1em;
        max-width :100%;
        justify-items : center
    }
    
    .plats >img{
        box-shadow: 5px 5px 5px #4c4343;
        max-width : 100%;
        max-height: 100%;
        width: auto;
    }
    
    .desserts{
        background-color : #ebe3db;
        margin :1em;
        padding:1em;
        display : grid;
        grid-template-columns : 1fr 1fr 1fr;
        grid-remlpate-rows : 1fr 1fr 1fr
        grid-gap : 1em;
        max-width :100%;
        justify-items : center
    }
    .desserts >img{
        box-shadow: 5px 5px 5px #4c4343;
        max-width : 100%;
        max-height: 100%;
        width: auto;
    }
    
    .cocktails{
        background-color : #ebe3db;
        margin :1em;
        padding:1em;
        display : grid;
        grid-template-columns : 1fr 1fr 1fr;
        grid-remlpate-rows : 1fr 1fr 1fr
        grid-gap : 1em;
        max-width :100%;
        justify-items : center
    }
    
    .cocktails >img{
        box-shadow: 5px 5px 5px #4c4343;
        max-width : 100%;
        max-height: 100%;
        width: auto;
    }
    
    .alone{
        display : grid;
        max-width : 100%;
        grid-column : 3/3;
    
    }

}

/* *****************************************************************
 VERSION DESKTOP
***************************************************************** */

@media screen and (min-width: 1200px) {
    header{
        padding-left: 2em;
        padding-right: 2em;
        width : 100%;
        flex-direction: row;
        justify-content : space-between;
        align-items : center;
        vertical-align: center;
    }
    .toolbar{
        background-color: transparent;
	    flex-direction : row;
	    width : 100%;
	    justify-content : space-between;
	    border-top :none;
	    border-bottom :none;
	    width : 50%;
	    margin-bottom:0.5em;
	}
	.logo{
	    flex-direction : row;
	    justify-content : space-between;
	    width : 50%;
	}
	#logoo{
	    width : 25%;
	}
	
	.logo>h1{
	    vertical-align : center;
	}
	

	.toolbar >a{
	    color : #4c4343;
        background-color : #ebe3db;
	    flex-direction : row;
	    align-items : center;
        vertical-align: center;
	    border-top :none;
	    border-bottom :none;
	    padding : 0.5em 1em;
	    margin : 0.5em 1em;
	    height : 3em;
	}
	
	.footer{
	    flex-direction : row;
	    width : 100%;
	    justify-content : space-between;
	}
	.menus{
        flex-direction : row;
        width : 100%;
}
}