/* Base CSS */
:root{
    box-sizing: border-box;
    font-size: 1rem;
    --valentino : #1d0b31;
    --lilac : #d1a3cf;
    --matisse :#225d96;
    --blueHippie : #5ea3b5;
    --royal-purple : #5b46a6;
    --darkViolet : #9400d3;
}
*, *:before, *:after {
    box-sizing: inherit;
}
h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
}
img{
    max-width: 100%;
    height: auto;
}
/* body style  */
body{
    padding: 0;
    margin: 0;
    /* background-color: rgb(27, 25, 25); */
    background-color: black;
    color: white;
    font-size: 1rem;
    font-family: Georgia, 'Times New Roman', Times, serif;}
    
#mainHeader{
    display: flex;
}
#mainHeader img{
    width: 200px;
}
/* Header layout */
#mainHeader{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
}
/* Layout for mobile */
#layMobile{
    grid-row: 1/2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
}
#layMobile img{
   width: 100px;
   height: 100%;
   padding: 0;
   margin: 0;
}
/* Resevation btn for computer */
#layMobile a.btnResComputer{
    display: none;
    height: 50px;
    width: 100%;
    background-color: var(--valentino);
    align-items: center;
    border: 1px solid black;
    border-radius: 5px;
    justify-content: space-between;
    font-size: 1.2em;
    color: white;
    text-decoration: none;
    padding: 5px;
}
#menuComputer {
    display: none;
}
/* Menu for mobile */
#menuComputer{
    display: none;
    visibility: hidden;
    background-color: var(--lilac);

}
#menu {
    display: flex;
    border: 1px solid rgb(27, 25, 25);
    flex-direction: column;
    justify-items: center;
    /* background: linear-gradient(to right, var(--lilac),red); */
    background-color: var(--lilac);
    position: sticky;
    top: 0;
    max-height: 0;
    overflow: hidden; 
}

#menu.hidden {
  display: none;
  opacity: 0;
}
#menu.show, #menuComputer {
  display: flex;
  opacity: 1;
  visibility: visible;
  max-height: 100%;
  transition: max-height 0.40s ease;
}
/* Sous menu */
.sous-menu{
    display: none;
    flex-direction: column;
    background-color: var(--valentino);
    position: absolute;
    top: 40px;
    left: 230px;
    z-index: 1;
    transition: 0.25s ease;
}
.sousMenuVisible{
    display: flex;
    top: 40px;
}
#menu a, #menuComputer a{
    padding: 5px;
    text-decoration: none;
    color: white;
    justify-items: center;
    flex-grow: 1;
    height: 50px;
    align-content: center;
    font-size: 1.2em;
}
#menu a:hover, #menuComputer a:hover{
    background-color: var(--valentino);
    transition: 0.25s ease;
}
#menu a.btnRes{
    height: 50px;
    width: 100%;
    background-color: var(--valentino);
    align-items: center;
    border: 1px solid black;
    display: flex;
    justify-content: space-between;
    font-size: 1.5em;
}
#cta{
    background-color: transparent;
    color: white;
    border: none;
}
/* nav #menu .hidden{
    display: none;
    opacity: 0;
}
nav #menu .show{
    display: flex;
    opacity: 1;
    visibility: visible;
} */
/* Main page */

/* Footer */
#mainFooter{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    /* grid-template-columns: repeat(auto-fill,minmax(600px,1fr)); */
    background-color: var(--lilac);
    padding: 5px;
    gap: 1rem;
    max-width: 100%;
}
#mainFooter #map{
    grid-column: 1/-1;
}
body #copy{
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    margin: 0;
    /* background-color: var(--royal-purple); */
    background: #D1A3CF;
background: linear-gradient(27deg, rgba(209, 163, 207, 1) 0%, rgba(148, 0, 211, 1) 19%, rgba(29, 11, 49, 1) 100%);
}
body #copy cite a{
    text-decoration: underline;
    color: white;
}
/* Left side of footer */
#mainFooter #apropos{
    grid-column: 1/-1;
}
#mainFooter .contact {
    grid-column: 1/-1;
}
#mainFooter #apropos article {
    grid-column: 1/-1;
    text-align: justify;
    max-width: 100%;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
#mainFooter .contact {
    grid-column: 1/-1;
}
/* Right side of footer */
#mainFooter .contact #socialNetworks {
    margin-top: 1rem;
    display: flex;
    gap: 50px;
    justify-content: start;
}
.contact-item{
    display: flex;
    gap: 1rem;
    align-items: center;
}
/* Style for maps */
#mainFooter.contact article gmp-map{
    width: 100%;
    height: 100%;
}
#map{
    height: 100%;
    max-width: 100%;
}
@media screen and (min-width:700px) {
    /* Menu header */
    #layMobile img{
        width: 150px;
        height: 100%;
    }
    /* Reservation btn for computer */
    #layMobile a.btnResComputer{
        display: flex;
        max-width: 200px;
    }
    /* Padding for computer Logo */
    #layMobile{
        padding: 0px 50px 0px 50px ;
        margin-bottom: 1em;
    }
    /* Hide reserv btn on men */
    #cta{
        display: none;
    }
    #menu a.btnRes{
        display: none;
    }
    /* Show menu on computers */
    #menuComputer{
        display: flex;
    }
    #menu.show{
       flex-direction: row;
       justify-content: space-around;
    }
    #menu a{
        text-align: center;
    }
    /* Footer */
    #mainFooter #apropos{
        grid-column: 1/2;
    }
    #mainFooter .contact {
        grid-column: 2/-1;
    }
    #mainFooter #apropos, #mainFooter .contact  {
        padding: 10px 50px 10px 50px;
    }
    #mainFooter #apropos article p{
        text-align: justify;
    }
}
@media screen and (min-width:1500px) {
    /* Section services */
    body{
        font-size: 1.2rem;
    }
}