/*  GLOBAL  */
                                                                            
                                                                             :root {
                                                                                --primaryColor: #f8b800;
                                                                            }
                                                                            /* HEADER */
                                                                            
                                                                            .titre {
                                                                                display: flex;
                                                                                align-items: center;
                                                                                justify-content: space-around;
                                                                                height: 100px;
                                                                                margin-bottom: 30px;
                                                                            }
                                                                            
                                                                            .titre img {
                                                                                width: 200px;
                                                                            }
                                                                            
                                                                            .titre h3 i {
                                                                                color: var(--primaryColor);
                                                                            }
                                                                            /* SECTION CAROUSEL */
                                                                            
                                                                            .carrousel {
                                                                                position: relative;
                                                                                overflow: hidden;
                                                                            }
                                                                            
                                                                            .carrousel .images {
                                                                                display: flex;
                                                                                flex-wrap: nowrap;
                                                                                flex-direction: row;
                                                                                height: 600px;
                                                                                transition: transform 0.7s ease-in-out;
                                                                            }
                                                                            
                                                                            .slider-item {
                                                                                width: 100%;
                                                                                object-fit: cover;
                                                                                flex-shrink: 0;
                                                                            }
                                                                            
                                                                            .fleches {
                                                                                position: absolute;
                                                                                width: 100%;
                                                                                padding-left: 10px;
                                                                                top: 300px;
                                                                                color: var(--primaryColor);
                                                                                cursor: pointer;
                                                                            }
                                                                            
                                                                            #droite {
                                                                                float: right;
                                                                                padding-right: 20px;
                                                                            }
                                                                            
                                                                            #gauche {
                                                                                float: right;
                                                                                padding-right: 20px;
                                                                            }
                                                                            /* NAVIGATION */
                                                                            
                                                                            #toggle-btn {
                                                                                display: none;
                                                                                position: absolute;
                                                                                top: 180px;
                                                                                right: 20px;
                                                                                cursor: pointer;
                                                                            }
                                                                            
                                                                            nav ul {
                                                                                display: flex;
                                                                                flex-direction: row;
                                                                                justify-content: space-evenly;
                                                                                position: absolute;
                                                                                top: 100px;
                                                                                left: -40px;
                                                                                width: 100%;
                                                                                list-style-type: none;
                                                                                opacity: 1;
                                                                                transition: opacity 0.5s;
                                                                            }
                                                                            
                                                                            nav ul li {
                                                                                margin: 0 20px;
                                                                                background-color: rgba(112, 112, 128, 0.8);
                                                                                font-size: 16px;
                                                                                min-width: 110px;
                                                                                height: 45px;
                                                                                line-height: 45px;
                                                                                color: white;
                                                                                text-align: center;
                                                                                cursor: pointer;
                                                                                box-shadow: 2px 2px 5px #444;
                                                                            }
                                                                            
                                                                            nav ul li a {
                                                                                display: block;
                                                                                text-decoration: none;
                                                                                color: white;
                                                                                width: 100%;
                                                                                height: 100%;
                                                                            }
                                                                            
                                                                            nav ul li:hover {
                                                                                background-color: rgb(96, 96, 96);
                                                                            }
                                                                            
                                                                            nav ul li:first-child {
                                                                                background-color: var(--primaryColor);
                                                                            }
                                                                            /* ARTICLES */
                                                                            
                                                                            .articles {
                                                                                display: grid;
                                                                                grid-template-columns: 1fr 1fr;
                                                                                grid-template-rows: auto;
                                                                                font-size: small;
                                                                            }
                                                                            
                                                                            .articles h4,
                                                                            h5 {
                                                                                font-size: 16px;
                                                                            }
                                                                            
                                                                            .un p {
                                                                                padding-right: 10px;
                                                                            }
                                                                            
                                                                            .deux {
                                                                                margin-top: 10px;
                                                                                padding: 20px;
                                                                                background-color: rgba(128, 128, 128, 0.5);
                                                                                border-radius: 0 20px 20px 0;
                                                                                height: 500px;
                                                                            }
                                                                            
                                                                            .bouton {
                                                                                background-color: var(--primaryColor);
                                                                                color: white;
                                                                                padding: 10px 15px;
                                                                                font-size: 14px;
                                                                                border-radius: 5px;
                                                                                margin: 30px 5px;
                                                                                cursor: pointer;
                                                                            }
                                                                            
                                                                            .bouton:hover {
                                                                                background-color: #e6c200;
                                                                                transform: scale(1.05);
                                                                            }
                                                                            /* AVIS */
                                                                            
                                                                            .temoignages h2 {
                                                                                font-size: 24px;
                                                                                font-weight: bold;
                                                                                margin: 20px 0 40px 0;
                                                                            }
                                                                            
                                                                            .temoignage_card {
                                                                                display: grid;
                                                                                grid-template-columns: repeat(6, 1fr);
                                                                                grid-auto-rows: auto;
                                                                                gap: 15px 20px;
                                                                                padding: 20px;
                                                                            }
                                                                            
                                                                            .card {
                                                                                grid-column: span 2;
                                                                                box-shadow: 2px 2px 5px #444;
                                                                                padding: 0 15px;
                                                                            }
                                                                            
                                                                            .card:hover {
                                                                                background-color: white;
                                                                                transform: scale(1.05);
                                                                            }
                                                                            
                                                                            .name {
                                                                                font-size: 18px;
                                                                                font-weight: bold;
                                                                                margin-top: 10px;
                                                                            }
                                                                            
                                                                            .card p {
                                                                                font-size: 14px;
                                                                            }
                                                                            
                                                                            .temoignages button {
                                                                                background-color: var(--primaryColor);
                                                                                color: white;
                                                                                font-size: 14px;
                                                                                width: 300px;
                                                                                height: 40px;
                                                                                display: block;
                                                                                margin: 40px auto;
                                                                                border-radius: 5px;
                                                                                cursor: pointer;
                                                                            }
                                                                            
                                                                            .temoignages button:hover {
                                                                                background-color: #e6c200;
                                                                                transform: scale(1.05);
                                                                            }
                                                                            /* DISHES */
                                                                            /* Dishes carousel container */
                                                                            
                                                                            .dishes-images {
                                                                                position: relative;
                                                                                width: 80%;
                                                                                margin: 30px auto;
                                                                                overflow: hidden;
                                                                                border-radius: 50px 0px 50px 0px;
                                                                            }
                                                                            /* Dishes images container */
                                                                            
                                                                            .dishes-images {
                                                                                display: flex;
                                                                                transition: transform 0.7s ease;
                                                                            }
                                                                            /* Each dish image */
                                                                            
                                                                            .dishes-images img {
                                                                                width: 100%;
                                                                                flex-shrink: 0;
                                                                                height: 350px;
                                                                                object-fit: cover;
                                                                            }
                                                                            /* Left and right buttons */
                                                                            
                                                                            #dishes-left,
                                                                            #dishes-right {
                                                                                position: absolute;
                                                                                top: 50%;
                                                                                transform: translateY(-50%);
                                                                                background: rgba(0, 0, 0, 0.6);
                                                                                color: white;
                                                                                border: none;
                                                                                padding: 12px 15px;
                                                                                font-size: 24px;
                                                                                cursor: pointer;
                                                                                border-radius: 50%;
                                                                            }
                                                                            /* Left button */
                                                                            
                                                                            #dishes-left {
                                                                                left: 10px;
                                                                            }
                                                                            /* Right button */
                                                                            
                                                                            #dishes-right {
                                                                                right: 10px;
                                                                            }
                                                                            /* Hover effect */
                                                                            
                                                                            #dishes-left:hover,
                                                                            #dishes-right:hover {
                                                                                background: #FFD700;
                                                                                color: black;
                                                                            }
                                                                            /* ENTRIES */
                                                                            /* Carousel container */
                                                                            
                                                                            .carrousel-images {
                                                                                position: relative;
                                                                                width: 80%;
                                                                                margin: 30px auto;
                                                                                overflow: hidden;
                                                                                border-radius: 50px 0px 50px 0px;
                                                                            }
                                                                            /* Images container */
                                                                            
                                                                            .entries-images {
                                                                                display: flex;
                                                                                transition: transform 0.7s ease;
                                                                            }
                                                                            /* Left and right buttons */
                                                                            
                                                                            #entries-left,
                                                                            #entries-right {
                                                                                position: absolute;
                                                                                top: 50%;
                                                                                transform: translateY(-50%);
                                                                                background: rgba(0, 0, 0, 0.6);
                                                                                color: white;
                                                                                border: none;
                                                                                padding: 12px 15px;
                                                                                font-size: 24px;
                                                                                cursor: pointer;
                                                                                border-radius: 50%;
                                                                            }
                                                                            /* Left button */
                                                                            
                                                                            #entries-left {
                                                                                left: 10px;
                                                                            }
                                                                            /* Right button */
                                                                            
                                                                            #entries-right {
                                                                                right: 10px;
                                                                            }
                                                                            /* Hover effect */
                                                                            
                                                                            #entries-left:hover,
                                                                            #entries-right:hover {
                                                                                background: #FFD700;
                                                                                color: black;
                                                                            }
                                                                            /* DESSERTS  */
                                                                            /* Carousel container */
                                                                            
                                                                            .desserts.carrousel {
                                                                                position: relative;
                                                                                width: 80%;
                                                                                margin: 30px auto;
                                                                                overflow: hidden;
                                                                                border-radius: 50px 0px 50px 0px;
                                                                            }
                                                                            /* Images container */
                                                                            
                                                                            .desserts-images {
                                                                                display: flex;
                                                                                transition: transform 0.7s ease;
                                                                            }
                                                                            /* Left and right buttons */
                                                                            
                                                                            #desserts-left,
                                                                            #desserts-right {
                                                                                position: absolute;
                                                                                top: 50%;
                                                                                transform: translateY(-50%);
                                                                                background: rgba(0, 0, 0, 0.6);
                                                                                color: white;
                                                                                border: none;
                                                                                padding: 12px 15px;
                                                                                font-size: 24px;
                                                                                cursor: pointer;
                                                                                border-radius: 50%;
                                                                            }
                                                                            /* Left button */
                                                                            
                                                                            #desserts-left {
                                                                                left: 10px;
                                                                            }
                                                                            /* Right button */
                                                                            
                                                                            #desserts-right {
                                                                                right: 10px;
                                                                            }
                                                                            /* Hover effect */
                                                                            
                                                                            #desserts-left:hover,
                                                                            #desserts-right:hover {
                                                                                background: #FFD700;
                                                                                color: black;
                                                                            }
                                                                            /*DRINKS*
                                                                            /* Carousel container */
                                                                            
                                                                            .drinks.carrousel {
                                                                                position: relative;
                                                                                width: 80%;
                                                                                margin: 30px auto;
                                                                                overflow: hidden;
                                                                                border-radius: 50px 0px 50px 0px;
                                                                            }
                                                                            /* Images container */
                                                                            
                                                                            .drinks-images {
                                                                                display: flex;
                                                                                transition: transform 0.7s ease;
                                                                            }
                                                                            /* Left and right buttons */
                                                                            
                                                                            #drinks-left,
                                                                            #drinks-right {
                                                                                position: absolute;
                                                                                top: 50%;
                                                                                transform: translateY(-50%);
                                                                                background: rgba(0, 0, 0, 0.6);
                                                                                color: white;
                                                                                border: none;
                                                                                padding: 12px 15px;
                                                                                font-size: 24px;
                                                                                cursor: pointer;
                                                                                border-radius: 50%;
                                                                            }
                                                                            /* Left button */
                                                                            
                                                                            #drinks-left {
                                                                                left: 10px;
                                                                            }
                                                                            /* Right button */
                                                                            
                                                                            #drinks-right {
                                                                                right: 10px;
                                                                            }
                                                                            /* Hover effect */
                                                                            
                                                                            #drinks-left:hover,
                                                                            #drinks-right:hover {
                                                                                background: #FFD700;
                                                                                color: black;
                                                                            }
                                                                            
                                                                            #Entries h1,
                                                                            #dishes h1,
                                                                            #desserts h1,
                                                                            #drinks h1 {
                                                                                color: #c0392b;
                                                                                text-align: center;
                                                                                font-size: 40px;
                                                                                font-weight: bold;
                                                                            }
                                                                            
                                                                            .menu-section p {
                                                                                text-align: center;
                                                                                font-weight: bold;
                                                                                font-size: 18px;
                                                                                width: 80%;
                                                                                margin: 15px auto 25px;
                                                                                line-height: 1.6;
                                                                            }
                                                                            
                                                                            hr {
                                                                                border: none;
                                                                                height: 2px;
                                                                                background: linear-gradient(to right, transparent, #c0392b, transparent);
                                                                                margin: 60px auto;
                                                                                width: 80%;
                                                                            }
                                                                            /*  BUTTON */
                                                                            
                                                                            .button {
                                                                                display: flex;
                                                                                justify-content: center;
                                                                                margin: 10px 0;
                                                                            }
                                                                            
                                                                            .cart-btn {
                                                                                background-color: #FFD700;
                                                                                color: white;
                                                                                border: none;
                                                                                padding: 12px 25px;
                                                                                border-radius: 8px 0px 8px 0px;
                                                                                font-size: 18px;
                                                                                font-weight: bold;
                                                                                cursor: pointer;
                                                                                justify-content: center;
                                                                                display: inline-block;
                                                                                margin-top: 30px;
                                                                            }
                                                                            
                                                                            .cart-btn:hover {
                                                                                background-color: #e6c200;
                                                                                transform: scale(1.05);
                                                                            }
                                                                            
                                                                            .order-btn {
                                                                                display: block;
                                                                                margin: 40px auto;
                                                                                background-color: #c0392b;
                                                                                color: white;
                                                                                border: none;
                                                                                padding: 18px 55px;
                                                                                font-size: 28px;
                                                                                font-family: Georgia, serif;
                                                                                font-weight: bold;
                                                                                border-radius: 50px;
                                                                                cursor: pointer;
                                                                                letter-spacing: 2px;
                                                                                box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
                                                                                transition: .3s ease;
                                                                            }
                                                                            
                                                                            .order-btn:hover {
                                                                                background-color: #a93226;
                                                                                transform: scale(1.08);
                                                                            }
                                                                            
                                                                            #contact-info {
                                                                                font-weight: bold;
                                                                                color: #a93226;
                                                                                text-align: center;
                                                                            }
                                                                            /* FOOTER */
                                                                            
                                                                            footer {
                                                                                height: 50px;
                                                                                background-color: #444;
                                                                                color: #ccc;
                                                                                font-size: 12px;
                                                                                text-align: center;
                                                                                padding: 20px 100px;
                                                                            }
                                                                            /* RESPONSIVE */
                                                                            
                                                                            @media screen and (max-width: 900px) {
                                                                                #toggle-btn {
                                                                                    display: block
                                                                                }
                                                                                nav ul {
                                                                                    opacity: 0;
                                                                                    flex-direction: column;
                                                                                    width: 250px;
                                                                                    padding: 0;
                                                                                    top: 225px;
                                                                                    left: calc(50% - 125px);
                                                                                }
                                                                                .un,
                                                                                .deux {
                                                                                    grid-column: span 2;
                                                                                }
                                                                            }
                                                                            
                                                                            @media screen and (min-width: 901px) {
                                                                                nav ul {
                                                                                    opacity: 1 !important;
                                                                                }
                                                                            }
                                                                            
                                                                            @media screen and (max-width: 580px) {
                                                                                .titre {
                                                                                    justify-content: space-between;
                                                                                }
                                                                                .titre h3 {
                                                                                    font-size: 14px;
                                                                                }
                                                                                .titre img {
                                                                                    width: 220px;
                                                                                }
                                                                                .card {
                                                                                    grid-column: span 3;
                                                                                }
                                                                            }