.principal {
    background-color: $noir;
    color: $blanc;

    .nav {
        height: 3.75rem;
        background-image: url("../img/solid-concrete-wall-textured-backdrop.jpg");
        background-size: cover;
        background-repeat: no-repeat;

        .admin {
            display: none;
        }

        .liens {
            height: 3.75rem;
            border-bottom: solid 4px $blanc;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0px 15px;

            .gauche {
                display: none;
            }

            .centre {
                font-size: 1.25rem;
                display: flex;
                align-items: center;
                gap: 10px;
                justify-content: center;
            }

            .droite {
                display: none;
            }

            .mobile {
                width: 36px;
                height: 24px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                hr {
                    font-size: 3px;
                    border: solid 2px $blanc;
                }
            }

        }
    }

    .baniere {
        background-image: url("../img/baniere.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        padding: 20px 0px;

        .logo {
            width: 100%;
            height: 60%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 52%;
            }
        }

        .boutons {
            width: 100%;
            height: 40%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.625rem;
            padding-top: 20px;

            .bouton {
                width: 120px;
                height: 35px;
                background-color: $noir;
                display: flex;
                justify-content: center;
                align-items: center;

                &:hover {
                    background-color: $orange;
                }

                div {
                    width: 110px;
                    height: 25px;
                    border: solid 2px $blanc;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: $blanc;
                }
            }
        }

    }

    .infos {
        background-image: url("../img/solid-concrete-wall-textured-backdrop.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-bottom: solid 4px $blanc;

        .localisation {
            text-align: center;
            align-items: center;
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 20px;
            padding: 20px;

            p {
                width: 75%;
                font-family: "bitter", serif;
                font-weight: 400;
                font-style: normal;
            }

            div {
                width: 100%;
            }
        }

        .horaire {
            padding: 20px;
            text-align: center;

            .heures {
                display: flex;
                flex-wrap: wrap;

                h2 {
                    text-align: left;
                    min-width: 140px;
                    margin-top: 1rem;
                }

                p {
                    min-width: 140px;
                    text-align: end;
                    margin-top: 1rem;
                }
            }
        }
    }

    .menu {
        display: flex;
        flex-direction: column;
        padding: 20px 0px;
        background-image: url("../img/solid-concrete-wall-textured-backdrop.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        align-items: center;
        border-bottom: solid 4px $blanc;

        .categorie {
            width: 100%;
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px;
            background-color: $noir;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.75);
            // border-bottom: solid 4px $blanc;
            // border-top: solid 4px $blanc;
            margin-top: 20px;
            margin-bottom: 20px;

            h2 {
                padding: 0.6rem;
                border: solid 2px $blanc;
                border-radius: 5px;
                cursor: pointer;

                &:hover {
                    background-color: $gris;
                }
            }
        }

        .page {
            flex-direction: column;
        }

        .carte {
            display: flex;
            justify-content: center;
            margin-top: 50px;

            .plats {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 80%;
                gap: 25px;

                .nom {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    font-size: 20px;
                    font-weight: 400;

                }

                .description {
                    text-align: left;
                    width: 100%;

                    .tag {
                        display: none;
                    }
                }
            }

            .image {
                display: none;
            }
        }
    }

    .apropos {
        background-image: url("../img/solid-concrete-wall-textured-backdrop.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        text-align: center;
        padding: 20px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .rond {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: $blanc;
            margin-top: 20px;
        }

        .colonne {
            width: 100%;
            font-family: "bitter", serif;

            .image {
                width: 100%;
                height: 4.7rem;
                background-size: cover;
                background-position: center bottom 20%;
                border-bottom: solid 4px $blanc;
                border-top: solid 4px $blanc;
                margin-top: 20px;
            }

            p {
                width: 80%;
                margin-top: 20px;
            }

            .gauche {
                display: flex;
                flex-direction: column;
                align-items: center;

                .un {
                    background-image: url("../img/biere.jpg");
                }

                .deux {
                    background-image: url("../img/manger.jpg");
                }

            }

            .droite {
                display: flex;
                flex-direction: column;
                align-items: center;

                .trois {
                    background-image: url("../img/cuisine.jpg");
                    background-position: center bottom 40%;
                }
            }
        }

        .fin {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: "bitter", serif;

            p {
                width: 270px;
                margin-top: 20px;

            }
        }
    }

    .infolettre {
        background-image: url("../img/tireuse.jpg");
        background-size: cover;
        background-position: center;
        font-size: 1.25rem;
        text-align: center;
        padding: 20px;

        p {
            width: 80%;
        }

        .formulaire {
            .bordure {
                display: flex;
                flex-direction: column;
                align-items: center;

                input[type=text] {
                    width: 78%;
                    padding: 15px 20px;
                    margin: 8px 0;
                    display: inline-block;
                    border: 1px solid $blanc;
                    border-radius: 4px;
                    box-sizing: border-box;
                    text-align: center;
                    margin-top: 20px;
                }

                input[type=submit] {
                    width: 70%;
                    background-color: $orange;
                    color: white;
                    padding: 15px 20px;
                    margin: 8px 0;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    margin-top: 20px;

                    &:hover {
                        background-color: $gris;
                    }
                }
            }
        }


    }

    .commentaires {
        background-image: url("../img/solid-concrete-wall-textured-backdrop.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        padding: 20px;

        h1 {
            text-align: center;
        }

        hr {
            display: none;
        }

        div {
            display: flex;
            flex-direction: column;
            align-items: center;

            .commentaire {
                display: flex;
                flex-direction: column;

                p {
                    width: 95%;
                    margin-top: 40px;
                }

                .etoile {
                    --percent: calc(var(--rating) / 5 * 100%);

                    display: inline-block;
                    font-size: var(--star-size);
                    font-family: Times; // make sure ★ appears correctly
                    line-height: 1;
                    width: 100%;
                    text-align: end;

                    &::before {
                        content: '★★★★★';
                        letter-spacing: 3px;
                        background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                }
            }

            .com2 {
                text-align: end;
                align-items: end;

                .etoile {
                    text-align: left;
                }
            }
        }
    }

    .footer {
        background-image: url("../img/solid-concrete-wall-textured-backdrop.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .liens {
            display: flex;
            gap: 1rem;
            margin-top: 20px;
            font-size: 25px;

            a {

                &:hover {
                    color: $orange;
                }
            }
        }

        .icons {
            display: flex;
            gap: 15px;
            font-size: 30px;
            margin-top: 20px;
        }

    }
}