// customize some Bootstrap variables
// $primary: darken(#428bca, 20%);

// the ~ allows you to reference things in node_modules
@import "~bootstrap/scss/bootstrap";
/////////////////////////////////////////////////////////////////////////////////////////////
//PAGE ERROR
#page_error{margin-top: 450px;}

/////////////////////////////////////////////////////////////////////////////////////////////
//navbar
.container-fluid{position: relative;}

header h1{font-size: 76px;}
.navbar a{ width: 100px; text-align: right;color: #f5bb77 !important;font-size: 28px;}
.navbar-collapse{margin-left: 20%;}
.logoHeader{
    height: 25px;
    background-color: #f5bb77;
    border-radius: 15px;
}
.navbar-toggler-icon{color: white;}

header{background-color: #0f1334;
    text-align: center;
    color: #f5bb77;
    font-family: "Alex Brush", cursive;
    font-weight: 400;
    font-style: normal;
}

.navbar{
    background-color: #0f1334 !important;
    width: 90%;
}
.nav-link.active{
    width: 200px;
text-align: center;}
.nav-link.nav_logo {width: 50px;margin-left:80px ;}

.dropdown-menu{background-color:rgba($color: #ffffff, $alpha: 1.0);}
/////////////////////////////////////////////////////
//FOOTER
#bloc_footer{   
    background-color: #0f1334 !important;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
}
#mention{position: absolute;bottom: 0; margin-bottom: 30px;}#mention a{text-decoration: none;color: white;}
#footer_menu{color: #f5bb77;text-align: center;font-size: 27px;  font-family: "Alex Brush", cursive;
    font-weight: 400;
    font-style: normal;
    width: 33%;}#footer_menu a{margin-bottom: 15px; margin-left: 15%;}
#footer_info{color: white;text-align: center;margin-top: 70px;margin-bottom: 70px;width: 33%;}
#footer_info h1 {font-size: 32px;}
#footer_info a{text-decoration: none; color: white;}
.logo_restaurant{width: 95px;height: 95px; }

/////////////////////////////////////////////////////
//PAGE CARTE
#carte-menu h2,h4{text-align: center;}
#carte-menu h2{font-size: 54px;}
#carte-menu h4{font-size: 30px;margin-top: 70px;}
#carte-menu h3{font-size: 54px;}
#carte-menu p{font-size: 30px;}
.plat_prix{font-family: 'Times New Roman', Times, serif;margin-bottom: 50px;}

#carte_plat .plat_photo{display: none;}
#carte_plat:hover .plat_photo{display: block;}

#photo_carte{
    background-image: url(https://project-resto.s3.eu-west-3.amazonaws.com/page_carte.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 1300px;
    width: 100%; 
    zoom: 30%;
}
#carte-menu{padding: 140px;background:linear-gradient(#0D0E12 17%,#0F1334 42%,#212449 85%,#333664 98%);
    color: white;
    font-family: "Parisienne", cursive;
    font-weight: 400;
    font-style: normal;}
#carte_entre{text-align: center;width: 50%;margin-left: 50%;}
#carte_plat{text-align: center;width: 50%;}
#carte_dessert{text-align: center;width: 50%;margin-left: 50%;}
.bouton_reservation_carte{
    display: inline-block;
    background-color: #f5bb77;
    text-decoration: none;
    color: black;
    padding: 3px 8px 3px 8px;
    border-radius:5px;
    font-size: 26px;
}
#carte-menu h3{margin-top: 100px;margin-bottom: 45px;color: #f5bb77;}


/////////////////////////////////////////////////////
//PAGE ACCUEIL

#page_accueil{
    background-image: url(https://project-resto.s3.eu-west-3.amazonaws.com/page_accueil.png);
    height: 730px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#bloc_banniere{
    background-color: rgba($color: #000000, $alpha: 0.7);
    width: 45%;
    color: white;
    position: absolute;
    top:15%;
    left: 28%;
    height: 65%;
    border-radius: 5px;
}
#banniere_accueil{
padding: 40px 80px 40px 80px;
font-size: 18px;
}
.bouton_reservation{
    display: inline-block;
    background-color: #f5bb77;
    text-decoration: none;
    color: black;
    padding: 0 26px 0 26px;
    border-radius:5px;
    position: absolute;
    right: 40%;
    bottom: 4%;
}
.bouton_carte{
    display: inline-block;
    background-color: #f5bb77;
    text-decoration: none;
    color: black;
    padding: 0 6px 0 6px;
    border-radius:5px;
    position: absolute;
    right: 40.7%;
    bottom: -4%;
}
.bouton_reservation, .bouton_carte{
    font-size: 20px;
    font-family: "Parisienne", cursive;
    font-weight: 400;
    font-style: normal;
}

//////////////////////////////////////////////////////
//PAGE RESERVATION CLIENT
#photo_reservation{
    background-image: url(https://project-resto.s3.eu-west-3.amazonaws.com/page_reservation.png);
    width: 100%;
    height: 300px;
}
#page_reservation {
    color: white;
    background-color: #191612;
    position: relative;

}
#page_reservation p, h1{
    text-align: center;
    padding: 1%;
}
#page_reservation h1{  font-family: "Parisienne", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 54px;
}
#dateresa{
    width: 50%;
    margin-left: 25%;
}
#nbrclient{
    width: 25%;
    margin-left: 38%;
}
#commentary{
    width: 50%;
    margin-left: 25%;
    margin-bottom: 150px;
}

.btn-reservation{    
    display: inline-block;
    background-color: #f5bb77;
    text-decoration: none;
    color: black;
    padding: 3px 8px 3px 8px;
    border-radius:5px;
    position: absolute;
    left: 47.5%;
    bottom: 5%;
    font-size: 26px;
    font-family: "Parisienne", cursive;
    font-weight: 400;
    font-style: normal;
}
.input-group{margin-top: 15px;}
/////////////////////////////////////////////
/// PAGE_RESERVATION ADMIN

#page_reservation_admin{margin: 0 15% 0 15%;}
/////////////////////////////////////////////////////////////////////////////////
//PAGE CONTACT
#page_contact{
    background-image: url(https://project-resto.s3.eu-west-3.amazonaws.com/page_contact.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 75%;
    position: relative;
    height: 800px;
}
.info_contact{

    background-color: rgba($color: #000000, $alpha: 0.7);
    width: 30%;
    position: absolute;
    left: 35%;
    top: 30%;
    padding: 3% 0 3% 0;
}
.info_contact p, .info_contact a{
    text-align: center;
    color: rgb(255, 255, 255);
    text-decoration: none;
}

/////////////////////////////////////////////////////////////////////
// PAGE PROFIL CLIENT
#page_profil{background-image: url(./images/logo_restaurant.png);background-repeat: no-repeat;background-position: center;opacity: 0.7;}
#page_profil th{
    padding-left: 25%;
}
#page_profil td{

    background-color: rgba($color: #ffffff, $alpha: 0.5) !important;
    color: #000000;;
    padding-left: 10%;
}
#option_profil{
    display: flex;
    justify-content: space-around;
    margin-bottom: 70px;
    font-size: 26px;
    font-family: "Parisienne", cursive;
    font-weight: 400;
    font-style: normal;
}
.btn-profil{
    display: inline-block;
    background-color: #f5bb77;
    text-decoration: none;
    color: black;
    padding: 3px 8px 3px 8px;
    border-radius:5px;
    font-size: 26px;
    font-family: "Parisienne", cursive;
    font-weight: 400;
    font-style: normal;
}
.gap-1{margin-left: 40%;}
#multiCollapseExample1{width: 70%;margin-left: 30%;}
#multiCollapseExample2{width:70%;margin-left: 3%;}
#mes_reservations{margin-bottom: 15%;}
////////////////////////////////////////////////////
/// PAGE_PROFIL_ADMIN

#page_profil_admin{margin-left: 15%;margin-right: 15%;}
//////////////////////////////////////////////////////////////////////////////////
/// Page REGISTER

#page_register{
    background-color: #191612;
    color: white;
    padding-top: 5%;
    padding-bottom: 5%;
}
.btn-register{color: white;background-color: #f5bb77;}
#form-register{
    width: 50%;
    margin-left: 30%;
}

//////////////////////////////////////////////////////////////////////////////////
/// PAGE login

#page_connexion{
    background-color: #191612;
    color: white;
    padding-top: 5%;
    padding-bottom: 5%;
}
#page_connexion a{margin-top: 5%;margin-left: 30%;}
.btn-connexion{background-color: #f5bb77;margin-top: 3%;margin-bottom: 3%;}
#form-connexion{
    width: 50%;
    margin-left: 30%;
}
/////////////////////////////////////////////////////////////////////////////////
/// PAGE RESET PASSWORD

#page_resetpassword{
    background-color: #191612;
    color: white;
    padding-top: 5%;
    padding-bottom: 5%;
}
.btn-resetpass{background-color: #f5bb77;margin-top: 3%;}
#form-resetpass{
    width: 50%;
    margin-left: 30%;
}
///////////////////////////////////////////////////////////////////////////////////////////
/// PAGE PLAT

#page_plat{margin: 5% 10% 0 10%;}








//////////////////////////////////////////////////////////////////////////////////////////
/// Version Mobile
/////////////////////////////////////////////////////////////////////////////////////////

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

    //navbar
header{position: fixed;z-index: 1;top: 0;width: 100%;}
header h1{font-size: 38px;}
.navbar a{ font-size: 24px;}
.navbar-toggler{position: absolute;right:-6%;top: -60px;z-index: 1;background-color: white;}
.navbar-collapse{margin-left: 38%;}


/////////////////////////////////////////////////////
//FOOTER

#footer_menu{width: 38%;margin-left: -15%;}
#footer_info{width: 50%;}
#footer_info h1 {font-size: 16px;}


/////////////////////////////////////////////////////
//PAGE CARTE

#photo_carte{background-position: bottom;margin-top: 262px;}
#carte-menu{padding: 61px;}
#carte_entre{text-align: center;width: 100%;margin-left: 0;}
#carte_plat{text-align: center;width: 100%;margin-left: 0;}
#carte_dessert{text-align: center;width: 100%;margin-left: 0;}



/////////////////////////////////////////////////////
//PAGE ACCUEIL

#page_accueil{
    height: 810px;

}
#bloc_banniere{
    width: 84%;
    top:14%;
    left: 8%;
    height: 78%;
}
.bouton_reservation{
    right: 30%;
    bottom: 35px;
}
.bouton_carte{
    right: 30%;
    bottom: -3%;
}

//////////////////////////////////////////////////////
//PAGE RESERVATION CLIENT

.btn-reservation{    
    left: 38.5%;
}

/////////////////////////////////////////////
//PAGE CONTACT

.info_contact{

    width: 62%;
    left: 20%;
    top: 26%;
}


/////////////////////////////////////////////////////////////////////
// PAGE PROFIL CLIENT

#page_profil th{
    padding-left: 25%;
}
#page_profil td{
    padding-left: 10%;
}
#option_profil{
    display: flex;
    justify-content: space-around;
    margin-bottom: 70px;
    font-size: 26px;
    font-family: "Parisienne", cursive;
    font-weight: 400;
    font-style: normal;
}
.btn-profil{
    display: inline-block;
    background-color: #f5bb77;
    text-decoration: none;
    color: black;
    padding: 3px 8px 3px 8px;
    border-radius:5px;
    font-size: 26px;
    font-family: "Parisienne", cursive;
    font-weight: 400;
    font-style: normal;
}
.gap-1{margin-left: 40%;}
#multiCollapseExample1{width: 70%;margin-left: 30%;}
#multiCollapseExample2{width:70%;margin-left: 3%;}
#mes_reservations{margin-bottom: 15%;}

    }