/*restaurant la porte des laurentides*/

html,
body {
    margin: 0;
    padding: 0;
}


/*valide pour toutes les pages*/

#accordion {
    cursor: pointer;
}

.active,
.nav-link:hover {
    color: #ccc;
}

.rounded-circle {
    width: 100%;
}

.blackfont {
    color: black;
}

.bouf {
    margin-top: 15%;
}

.haut {
    width: 25px;
    height: 20px;
    margin-left: 1%;
    margin-top: 20%;
    position: fixed;
    z-index: 100;
}

.titre-principal {
    color: black;
    text-align: center;
    text-shadow: 2px 2px 2px rgb(204, 51, 0);
    padding: 1%;
    width: 75%;
    margin-left: 12.5%;
    margin-top: 20%;
    background-color: rgba(123, 65, 65, 0.50);
    border: 5px solid brown;
    border-style: double;
    border-radius: 30%;
    box-shadow: 2px 2px 5px red inset;
}

.ydl-titre {
    color: white;
    font-size: medium;
    padding-left: 5%;
}

.ydl {
    width: 2%;
    height: 2%;
}

.over {
    overflow-x: auto;
}

.noir {
    color: black;
}

.titre-sm {
    font-size: 55%;
}

.btn-info {
    border: 5px solid blue;
    border-style: double;
    border-radius: 5%;
    box-shadow: 1px 1px 5px 1px blue inset;
}

.btn-warning {
    border: 5px solid yellow;
    border-style: double;
    border-radius: 5%;
    box-shadow: 3px 3px 5px 3px green inset;
}

.btn-primary {
    border: 5px solid yellow;
    border-style: double;
    border-radius: 5%;
    box-shadow: 3px 3px 5px 3px blue inset;
}

.btn-light {
    border: 5px solid yellow;
    border-style: double;
    border-radius: 5%;
    box-shadow: 3px 3px 5px 3px blue inset;
}


/*page acceuil */

@keyframes resto {
    from {
        margin-left: 5%;
    }
    to {
        margin-left: 20%;
    }
}

.body-intro {
    background-image: url('../images/bar-av.jpg');
    background-size: cover;
    background-repeat: repeat;
}

.ca-va {
    margin-left: 70%;
    color: yellow;
    font-family: "lucida calligraphy";
    font-size: xx-large;
}

.img-logo {
    width: 22%;
    height: auto;
    position: static;
    border: 5px solid brown;
    border-radius: 20%;
}

.img-facade {
    width: 35%;
    height: auto;
    position: static;
    top: 5px;
    border: 5px solid brown;
    border-radius: 20%;
}

.resto:hover {
    box-shadow: 10px 10px 25px blue;
}

.resto {
    color: rgb(204, 136, 0);
    font-size: x-large;
    text-align: center;
    padding: 1%;
    width: 75%;
    position: relative;
    border: 5px solid brown;
    border-radius: 30%;
    background-color: rgb(102, 68, 51, 0.50);
    box-shadow: 2px 2px 5px red inset;
    animation: resto 10s ease-in 1ms infinite alternate;
}

.visite {
    font: xx-large;
    color: white;
    margin-left: 35%;
}

.msgcovid {
    margin-left: 20%;
    width: auto;
    padding: 2%;
    font-size: x-large;
    text-align: justify;
    background-color: rgba(204, 255, 204, 0.55);
    border: 5px solid rgb(102, 255, 5);
    border-style: double;
    border-radius: 5%;
    box-shadow: 2px 2px 5px red inset;
}

.img-arc {
    width: 200%;
}


/*page menu salle à manger*/

.body-menu {
    background-image: url("../images/ban-bar.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.titre-menu:hover {
    box-shadow: 20px 10px 35px 20px blue;
}

.titre-menu {
    color: black;
    text-align: center;
    text-shadow: 2px 2px 2px rgb(0, 255, 255);
    font: italic 50px Lucida, Calligraphy;
    width: auto;
    background-color: rgba(204, 238, 255, 0.50);
    border: 5px solid blue;
    border-style: double;
    border-radius: 30%;
    box-shadow: 2px 2px 5px blue inset;
}

.alert {
    color: black;
    text-align: center;
    width: 80%;
    left: 10%;
}

.logo-saputo {
    width: 150px;
    height: 60px;
}

.img-thumbnail {
    width: auto;
}


/*page menu dejeuner*/

.body-menu-dej {
    background-image: url("../images/bar-av.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.titre-menu-dej:hover {
    box-shadow: 20px 10px 35px 20px yellow;
}

.titre-menu-dej {
    color: black;
    text-align: center;
    text-shadow: 1px 1px 1px rgb(255, 255, 0);
    font: italic xx-large Lucida, Calligraphy;
    width: auto;
    background-color: rgba(255, 255, 204, 0.50);
    border: 5px solid yellow;
    border-style: double;
    border-radius: 30%;
    box-shadow: 2px 2px 5px brown inset;
}

.hrs {
    color: white;
    text-align: center;
    background-color: rgba(0, 153, 0, 0.75);
    border: 5px solid yellow;
    border-style: double;
}

.btn-success {
    border: 5px solid green;
    border-style: double;
    border-radius: 5%;
    box-shadow: 3px 3px 5px 3px green inset;
}


/*page menu livraison*/

.body-menu-liv {
    background-image: url("../images/ban-4.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.titre-menu-liv:hover {
    box-shadow: 20px 10px 35px 20px lightblue;
}

.titre-menu-liv {
    color: black;
    text-align: center;
    text-shadow: 2px 2px 2px rgb(0, 153, 255);
    font: italic 50px Lucida, Calligraphy;
    width: auto;
    margin-top: 25%;
    background-color: rgba(204, 238, 255, 0.50);
    border: 5px solid rgb(0, 92, 153);
    border-style: double;
    border-radius: 30%;
    box-shadow: 2px 2px 5px blue inset;
}


/*page carte des vins*/

.body-vino {
    background-image: url("../images/bar-ban-arr.jpg");
    background-repeat: no-repeat;
    background-size: 100% 110%;
}

.img-fluid {
    width: auto;
}

.titre-menu-vin:hover {
    box-shadow: 20px 10px 35px 20px rgb(255, 102, 153);
}

.rouge:hover {
    box-shadow: 20px 10px 35px 20px rgb(255, 80, 80) inset;
}

.rose:hover {
    box-shadow: 20px 10px 35px 20px rgb(255, 153, 255) inset;
}

.blanc:hover {
    box-shadow: 20px 10px 35px 20px rgb(255, 255, 255) inset;
}

.biere:hover {
    box-shadow: 20px 10px 35px 20px rgb(255, 255, 255) inset;
}

.alcool:hover {
    box-shadow: 20px 10px 35px 20px rgb(255, 255, 255) inset;
}

.titre-menu-vin {
    color: black;
    text-align: center;
    text-shadow: 1px 1px 1px rgb(242, 242, 242);
    font: italic 50px Lucida, Calligraphy;
    padding: 5px;
    margin-left: 10%;
    margin-top: 20%;
    width: 80%;
    background-color: rgba(210, 166, 121, 0.50);
    border: 5px solid brown;
    border-style: double;
    border-radius: 30%;
    box-shadow: 2px 2px 5px brown inset;
}

.titre-375 {
    color: yellow;
    text-align: center;
    text-shadow: 1px 1px 1px rgb(242, 242, 242);
    font: italic 25px Lucida, Calligraphy;
    padding: 5px;
    margin-left: 10%;
    margin-top: 20%;
    width: 40%;
    background-color: rgba(210, 166, 121, 0.50);
    border: 5px solid yellow;
    border-style: double;
    border-radius: 30%;
    box-shadow: 2px 2px 5px white inset;
}

.clique {
    font-size: large;
    background-color: burlywood;
    border: 5px outset rgb(230, 184, 0);
    color: black;
    text-align: center;
    width: 100%;
    left: 7%;
}

.special {
    border: 1px solid white;
    border-collapse: separate;
}


/*page photos*/

.body-photos {
    background-image: url("../images/porte-grange-2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.titre-photo:hover {
    box-shadow: 20px 10px 35px 20px rgb(255, 191, 0);
}

.img-photos>img {
    width: 38%;
    height: auto;
    margin-left: 10%;
    border: 5px solid brown;
    border-radius: 15%;
}

.com-photos {
    margin-left: 2%;
    font: 28px brown;
    background-color: burlywood;
    border: 5px outset brown;
    text-align: center;
    padding: 10px;
    border-radius: 25%;
    width: 95%;
}


/*page reservations*/

.body-reservations {
    background-image: url("../images/bleu-ceramique.jpg");
    background-size: cover;
}

.reservation {
    font-size: x-large;
    font-weight: bold;
    background-color: burlywood;
    border: 5px outset grey;
    color: brown;
    text-align: center;
    width: 88%;
    margin-left: 5%;
}

#c,
.c,
.p-res {
    color: white;
    font-size: large;
    margin-left: 5%;
    width: 90%;
}

.choix-de-menu {
    width: 50%;
}

.area-b {
    width: 33%;
    margin-left: 5%;
}

.ast {
    color: red;
}


/*page nous joindre*/

.body-multi {
    background-color: rgb(204, 230, 255);
}

#joindre {
    width: 45%;
    height: 27%;
    margin-left: 45%;
    margin-top: 30%;
}

#titre-joindre {
    margin-left: 5%;
    margin-top: 10%;
}

#quest {
    width: 75%;
    margin-left: 5%;
}

#comment {
    margin-left: 50%;
    margin-top: -32%;
}

#sept {
    border: 5px outset crimson;
    background-color: rgb(140, 140, 140);
    margin-left: 50%;
    margin-top: 3%;
}

.liv {
    margin-left: 45%;
    margin-top: -3%;
    width: 50%;
    font-weight: bold;
}

.appreciation {
    margin-left: 5%;
    width: 33%;
}

.area {
    width: 33%;
    margin-left: 49%;
}

.commentaire {
    width: 100px;
    height: 100px;
}

.send {
    border: 5px outset crimson;
    width: 10%;
    padding: 1%;
    margin-left: 84%;
    margin-top: -8%;
}


/*footer*/

#footer {
    background-color: rgb(51, 51, 51);
    color: white;
    padding: 10px;
}

.f-titre {
    font-weight: bold;
}

#copyright {
    background-color: rgb(0, 0, 0);
    color: white;
    padding: 5px;
    text-align: center;
}


/*fin*/