@font-face {
  font-family: 'Ballare';
  src: url('../ballare.tff') format('tff'),
       url('../ballare.woff') format('woff');
}
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

*{
    margin:0;
    padding: 0;
}

html{
    font-size: 62.5%;
}

body{
    background-color: #ffffff;
    color:rgb(49,44,81);
    font-family: 'Lato',sans-serif;
    font-size: 1.6rem;
}

h2{
    font-family: 'ballare',sans-serif;
    font-size: 4.8rem;
    color: white;
}

.reservation{  /******  BUTTON   ********/
    background-color:#CD8A5E ;
    border: none;
    border-radius: 30px;
    font-size: 1.6rem;
    padding:1em;
    width: 50%;
    margin:auto auto 3em auto;

}
.reservation a{
    color:white;
    text-decoration: none;
}
/***** HEADER ******/

header{
    background-color: rgb(49,44,81);
    padding:3em;
    
}

/*.navbar{
    position: fixed;
}*/

header img{
    max-height: 84px;
}

.icone{display:none;}

.navbar-toggler-icon{
    font-size:3.2rem;
    
}

.navbar-toggler-icon,
.navbar-toggler{
    border:none;
    text-transform: none;
}

#page{
    padding:4em 0 4em 0;
}

.nav-item{
    margin:auto;
    text-align: center;
}

.nav-link {
    font-size:3.6rem ;
    color:white;
    margin-bottom: 0.5em;
}

#acc{
    border-bottom: 1px solid white;
    margin: auto auto 0.5em auto;
    padding:0;
}

@media screen and (min-width:990px) {
    .nav-link{
        font-size: 18px;
    }
    #acc,
    .nav-item{
        width: auto;
    }
    .nav-item{
        margin-left: 1em;
        margin-right: 1em;
    }
    .nav-item:first-child{
        margin-left: 5em;
    }
    
    
}

@media screen and (min-width:1100px) {
    .icone{
        display: flex;
        font-size: 16px;
    }
    .icone div{
        margin:auto 0.5em 0.5em 0.5em;
    }
    i{
        color:white;
    }
    header{
        padding: 1em;
    }
}

@media screen and (min-width:1250px) {
  .nav-link{
      font-size: 24px;
  }    
}



/***** FIN HEADER ****/


#RDV{display: flex;
     flex-direction: row;
       justify-content: center;
        align-content: center;
        margin: 8%; 
        position: relative;
        right: 100px;
}

input , select{width: 150%;
        height: 45px;
        margin-top: 2%;
        margin-bottom: 5%;}


form div{display: flex;
        flex-direction:column;
        margin: 2%;}

form div:nth-child(5) input{height: 20px !important;
                                margin: 0%;}

form div:nth-child(5){display: flex;}

label{margin-bottom:1% ;}

#nom{width: 150%;}

#nom input{width: 137%;
            }

form #nom{display: flex;
                flex-direction: row;
                justify-content:space-around;
                position: relative;
                right:52px;
        }

#date input{padding-bottom: 6%;
        margin-bottom: 2%;}

textarea{width: 150%;
        margin-bottom: 3%;}

        #heure{font-size: 12px;
                color:red;}

#phrase h2{font-size: 1.5em;
                font-weight: 600;
                margin-bottom: 2%;}

#phrase h3{font-size: 1.1em;
                font-weight: 400;
           width: 70%;}


#information{margin-top: 5%;}

#information div {margin:5%;
                width: 80%;}

#phrase #carte {position: relative;
                left:48px;}

label , p {font-weight: 400;
        font-size: 1.3em;}

iframe{margin-bottom: 5%;}

button{height: 80px;
        width: 160px;
        border-radius: 60px;
        background-color:peru;
        color:white;
        border-color:rgba(0,0,0,0);}

#bouton{width: 300px;
        display: flex;
        align-items: center;
        justify-items: center;
        position: relative;
        left: 110px;
        margin-top: 5%;}

#date label{margin-bottom: 3%;
        margin-top: 1%;}

#date #Date{margin-bottom: 4%;}

label , p , h2 , h3{font-family: 'Lato', sans-serif;
        color: #312C51;}

#phrase{width: 60%;}

h1{font-family: 'Ballare';
        font-size: 4em;
margin-left: 5%;
color:#312C51}


/**Fin style page**/

/** debut media query**/







@media screen and (max-width:1100px) {

        #RDV{display: flex;
        flex-direction: column-reverse;
        position: relative;
        left: 15.4%;
width: 80%;
margin: 0% !important;}

        #formu{width: 100%;
                position: relative;
                top:300px !important;
                left:40px;}
        input , textarea , select {width: 80%;}

        #nom{width: 88%;
                position: relative;
                right:10% !important;}

        #bouton{margin-bottom: 10%;
                position: relative;
                left:150px;}

        #phrase{position: relative;
                top:100px;
                right: 100px ;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        }

        #phrase h1 {position: relative;
                bottom:1500px !important;
                }

        #information{border: 2px dashed;
                        width: 70%;
                        display: flex !important;
                        flex-direction: column !important;
                        align-items: center !important;
                        justify-items: center !important;
                        margin-bottom: 5%;
                        }
        
        #information div {margin:3%;
                        position: relative;
                        left:100px;
                        width: 100%;}

        #information div h2 {position: relative;
                                left:80px;}

        iframe{width:100% !important;
                position: relative;
        right: 50px;}

        

        #lieu{border: 2px dashed;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-items: center;
                margin-bottom: 5%;
                position: relative;
                right:50px;
                padding: 2%;
                margin-bottom: 30%;}
        
}


@media screen and (max-width:1100px){

        #phrase h1 {bottom: 1700px !important;
                left: 50px !important;
                font-size: 6.4rem;}

}

@media screen and (max-width:1050px){

        #phrase h1 {bottom: 1640px !important;
                left: 50px !important;
                font-size: 6.4rem;}

}

@media screen and (max-width:992px){

        #RDV{margin-right: 0px !important;
                margin: 0px !important;
        position: relative;
        left:130px !important;
        top:0px;}

        #formu{width: 90%;}

        #page {display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 2em;}

        #phrase h1 {bottom: 1530px !important;
                left: 100px !important;
                width: 70%;
                font-size: 6.4rem;}

        iframe{width: 80% !important;
                position: relative;
                left:70px;}

        #carte{width: 80%;}

        #lieu{position: relative;
                left:15px;}

        input ,select , textarea{width: 90%;}

        #nom{width: 96%;}
        

        #information div h2{width: 50%;}

        #information {position: relative;
                left:50px;}


        
}


@media screen and (max-width:910px){

        #phrase h1 {bottom: 1330px !important;
                left: 70px !important;
                font-size: 6.4rem;}

}
@media screen and (max-width: 900px) {

        #phrase h1{bottom: 1490px !important;
                left: 70px !important;
                font-size: 6.4rem;}

                #bouton{position: relative;
                        left:110px;}

        #information div {width: 80%;}

        #information div h3{width: 100%;
        position: relative;
                right:90px !important;}

         #information div h2{position: relative !important;
                left:-10px!important;
        width: 70%;}

                        #lieu  {width: 80%;
                                position: relative;
                                left:70px !important;}
}

@media screen and (max-width:850px) {
       
        #phrase h1{position: relative;
                bottom: 1450px !important;
                font-size: 6.4rem;
                left: 70px !important;}

        #nom {width: 100%;}

        #nom input{width: 112%;}

}

@media screen and (max-width:800px) {

        #phrase h1{bottom: 1400px !important;
                font-size: 5.6rem;}

        #nom input {width: 107%;}

        #nom{position: relative;
                left:-47px !important;}

        #lieu{padding:3%;
                text-align: center;}

                #carte  {position: relative;
                        left:50px !important;}

                        #bouton{position: relative;
                                left:80px;
                                }

                        #information{position: relative;
                                left:65px !important;}

                                #information div h2{position: relative !important;
                                        left:-40px!important;
                                        width: 80%;
                                }


                                        #information div h3{width: 107%;
                                                position: relative;
                                                        right:100px !important;
                                                text-align: center;}

}

@media screen and (max-width:740px) {

        #RDV{position: relative;
                left:100px !important;}

        #phrase h1{bottom: 1360px !important;
                font-size: 5.6rem;}

        #nom input {width: 102%;}

        #nom{position: relative;
                left:-40px !important;}

        #information div h2{font-size: 1.2em;}

        #information div p{font-size: 1em;}

        #bouton{margin-bottom: 10% !important;
                margin-right: 0px !important;
                position: relative;
                left:50px;}
        
}

                @media screen and (max-width:700px) {

                        #RDV{position: relative;
                        left:80px !important;}

                       

                        #phrase h1{width: 80%;
                                position: relative;
                                bottom: 1320px !important;
                                left:90px !important;}

                                #nom input {width: 95%;}

        #nom{position: relative;
                left:-30px !important;}

                        #bouton{position: relative;
                                left: 60px;}

                        
                        #information {padding:3%;
                                        width: 70%;
                                position: relative;
                                left:80px !important;}

                        #information div h2{position: relative;
                                        left:-40px !important;}

                        #carte{position: relative;
                                left:60px !important;}

                        #lieu{margin-bottom: 40%;}

                        
                        
                }

        
@media screen and (max-width:630px) {

        #RDV {position: relative;
                top:-50px !important;
                left:60px !important;}

        #phrase h1 {font-size:3.5em;
                       position: relative;
                bottom:1340px !important;
                left:100px !important; }

        #nom input{width: 85%;}

        #nom{position: relative;
        left:-15px !important;}

        #bouton{position: relative;
                left:30px !important;
                margin-bottom: 20% !important;}

        #information div h2{position: relative;
                        left:-60px !important;
                        width: 90%;}

        #information #annulation h2{position: relative;
                                                left: -80px !important;}

                #information{position: relative;
                        left:85px !important;}

        #lieu{width: 90%;
                position: relative;
                left:50px !important;}
        
}

@media screen and (max-width:600px) {


        #RDV{position: relative;
                left:50px !important;
                top:-100px !important;}

        #phrase h1{font-size: 2.6em !important;
                bottom: 1220px !important;}

                #annulation , #paiement {position: relative;
                                        left:90px !important;}

                                        #nom input{width: 80%;}

                                        #nom{position: relative;
                                        left:-10px !important;}

        iframe{width: 100% !important;
                left: 20px !important;}

        #lieu{width: 100%;
                left:20px !important;}
        
}

@media screen and (max-width:530px) {

        #phrase h1 {bottom: 1130px !important;
                left: 0px !important;
                font-size: 4rem !important;}

        #bouton{left:-10px !important;
                margin-bottom: 30% !important;
                }

        #date input{padding-bottom: 8%;}
        
        button{width: 120px;
                height: 50px;}

        #information {width: 90%;
                        left:-10px !important;}

        #RDV{margin-right: 0px;
        margin-left: 0px;
        width: 70% !important;
        position: relative;
        left:60px !important;}

        #information div h2{left:-40px !important;}

        #information #annulation h2{left:-60px !important;}

        #phrase h2 {font-size: 1.1em;}

        #phrase h3 , #phrase p {font-size: 1em;}

        #phrase{position: relative;
                left:15px;}

        iframe{width: 110% !important;
                left:-85px !important;}

        #lieu{width: 110% !important;
                left:-85px !important;}
        
}

@media screen and (max-width:490px) {

        

        #phrase h1 {font-size: 2.5em !important;
                        bottom: 1150px !important;
                        left:10px !important;
                        width: 100%;}

       #RDV{width: 60%;
                margin: 0px !important;
                margin-right: 0px !important;
                position: relative;
                left: 50px !important;}

        #carte{margin:0px !important;}
        
        input , select , textarea {width: 100%;}

        label{font-size: 1.1em;}

        #nom input{width: 100%;}
        #nom{width: 101%;}

        #bouton{margin-bottom: 10% !important;
                left:-10px !important;
                margin-bottom: 40% !important;}

        #phrase{position: relative;
                left: 40px;}

        #information #annulation h2{position:relative !important;
                        left: -80px !important;
                width: 100%;}

        #information #paiement h2 {position:relative;
                                        left:-65px !important;}

        #lieu{margin-bottom: 20% !important;}


}

@media screen and (max-width:460px) {


        #RDV{width: 60%;
                margin: 0px !important;
                margin-right: 0px !important;
                position: relative;
                left: 40px !important;}
}

@media screen and (max-width:440px) {
        

 #RDV{width: 60%;
        margin: 0px !important;
        margin-right: 0px !important;
        position: relative;
        left: 30px !important;
        top:-100px !important;}

#phrase h1 {position: relative;
                bottom:1090px !important;}

        #phrase h2{font-size: 0.9em;}

        #information{width: 100% !important;}
        
        #phrase h3 , #phrase p {font-size: 0.7em;}

}


@media screen and (max-width:412px) {

        #phrase h1 {font-size: 2.3em !important;
                bottom: 1120px !important;
                left:0px !important;
                width: 100%;}

                 #RDV{width: 60%;
                        margin: 0px !important;
                        margin-right: 0px !important;
                        position: relative;
                        left: 20px !important;
                        top:-110px !important;}

                #bouton{margin-bottom: 60% !important;
                        position: relative;
                        left:-30px !important;}

        #date input{padding-bottom: 10%;}

        #phrase h2{font-size: 0.9em;}
        
        #phrase h3 , #phrase p {font-size: 0.7em;}
        
}

@media screen and (max-width:383px) {

        #phrase h1 {font-size: 2.1em !important;
                bottom: 1100px !important;
                left:0px !important;
                width: 100%;}

                 #RDV{width: 60%;
                        margin: 0px !important;
                        margin-right: 0px !important;
                        position: relative;
                        left: 10px !important;
                        top:-120px !important;}

                #information div h2{font-size: 1em;}
        
}

@media screen and (max-width:360px){


                #RDV{width: 60%;
                        margin: 0px !important;
                        margin-right: 0px !important;
                        position: relative;
                        left: 0px !important;
                        top:-120px !important;}

}

/*******DEBUT FOOTER*******/

footer{
        background-color: rgb(49,44,81);
        padding-top: 5em;
        padding-bottom: 5em;
    }
    
    #foot{
        width: 90%;
        margin: auto;
    }
    
    #reserve_foot{
         display: flex;
         flex-direction: column;
    }
    
    footer a {
        font-size: 2.4rem;
        color:#CD8A5E;
        text-decoration: underline;
        margin-top: 0.5em;
    }
    
    footer address p{
        font-size: 1.8rem;
        margin-top: 2em;
        color: white !important;
    }
    
    footer address p:first-child{
        font-weight: 600;
    }
    
    footer address p:first-child,
    footer address p:nth-child(3),
    footer address p:last-child{
        margin-bottom: 1.5em;
    }
    
    footer #ico{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 40%;
    }
    #ico i{
        color:white;
    }
    #logo_foot{
        display: none;
    }
    
    @media screen and (min-width:780px) {
        #foot{
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: flex-start;
            padding-bottom: 1em;
        }
        footer address{
            margin-top: 1em;
        }
    
        footer #ico{
            width:100%
        }
    }
    
    @media screen and (min-width:1100px) {
        #logo_foot{
            display: block;
        }
    
        #logo_foot img{
            max-height: 120px;
            margin-top: 2em;
        }
    }
    
    /******* FIN FOOTER ********/