:root { /* CSS HEX */ --rosy-brown: #BAA099ff; --cinereous: #836E68ff; --beaver: #B48E77ff; --rose-quartz: #9E959Eff; --platinum: #DDDFE3ff; --french-gray: #C4C1CCff; --raisin-black: #2D2930ff; --coffee: #785A4Aff; --glaucous: #5C789Cff; --alice-blue: #E6F0FBff; }
/* https://coolors.co/baa099-836e68-b48e77-9e959e-dddfe3-c4c1cc-2d2930-785a4a-5c789c-e6f0fb*/


body { font: 400 15px/1.8 Lato, sans-serif; color: #777; background-color: var(--platinum); }
body { min-height: 100vh; position: relative; margin: 0; padding-bottom: 100px; box-sizing: border-box; }

      
       
       
       
       
       h1 { font-size: 3em; text-transform: uppercase; margin-bottom: 30px; margin-top: 20px; color: var(--raisin-black); }
h2 { font-size: 2em; margin-bottom: 20px; margin-top: 10px; color: var(--raisin-black); }
h3, h4 { margin: 10px 0 30px 0;  font-size: larger; font-weight: bolder; color: var(--coffee); }



footer { background-color: var(--raisin-black); color: white; padding: 20px; max-height:50px }
    footer a { color: #f5f5f5; }
        footer a:hover { color: #777; text-decoration: none; }







.sub-section-title { margin-bottom: 20px; margin-top: 10px; font-size: x-large; font-weight: bold }
.background-image { width: 100%; max-height: 300px;  object-fit: cover; }


.headerpublic-titre { background-color:var(--coffee); opacity:0.7;  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
    .headerpublic-titre h1 { color: white }



.logo  { position: absolute; top: 0; left: 0; padding: 20px; max-width:200px }
@media (max-width: 767px) {
    .logo  {width:150px }
}

.bg-cover { background-size: cover !important; }



.navbar { margin-left: 20px }
    .navbar a { text-decoration: none; color: white }
        .navbar a:hover { color: white; background-color: black }
    .navbar li { background-color: black }
.navbar-light .navbar-nav .nav-link { color: white; }
.navbar { font-family: Montserrat, sans-serif; margin-bottom: 0; border: 0; letter-spacing: 4px; opacity: 0.9; }
    .navbar li a, .navbar .navbar-brand { color: white !important; }
.navbar-nav li a:hover { color: #fff !important; }
.navbar-nav li.active a { color: #fff !important; background-color: #29292c !important; }
.navbar-default .navbar-toggle { border-color: transparent; }

@media (max-width: 767px) {
        .navbar-toggler { position: fixed; top: 0; left: 10px; }
    #navbarprincipal { position: fixed; top: 50px; }
   }


.argument { margin-top: 20px; margin-bottom: 20px; border-radius: 15px !important; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); }
.carte-subtitle { font-weight: bolder; font-size: larger; padding: 10px; text-decoration-line: underline overline; }

@media (max-width: 767px) {
    .toggle-button { display: block; cursor: pointer; }
    .vertical-navbar { display: none; }
}

.plat-entry { display: flex; gap: 8px }
    .plat-entry + .plat-entry { margin-top: 16px }
    .plat-entry .plat-titre { font-weight: bold; line-height: 1.5em }
    .plat-entry .plat-detail { margin-top: 3px; font-size: 14px; line-height: 1.29em }
    .plat-entry .plat-prix { flex-shrink: 0; width: 48px; margin-left: auto; font-weight: bold; font-size: 14px; line-height: 1.43em; letter-spacing: .88px; text-align: right }


.carousel-inner img { -webkit-filter: grayscale(90%); filter: grayscale(90%); /* make all photos black and white */ width: 100%; /* Set width to 100% */ margin: auto; }
.carousel-caption h3 { color: #fff !important; }

@media (max-width: 600px) {
    .carousel-caption { display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */ }
}

.bg-1 { background: #2d2d30; color: #bdbdbd; }
    .bg-1 h3 { color: #fff; }
    .bg-1 p { font-style: italic; }
.list-group-item:first-child { border-top-right-radius: 0; border-top-left-radius: 0; }
.list-group-item:last-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.thumbnail { padding: 0 0 15px 0; border: none; border-radius: 0; }
    .thumbnail p { margin-top: 15px; color: #555; }
.btn { padding: 10px 20px; background-color: #333; color: #f1f1f1; border-radius: 0; transition: .2s; }
    .btn:hover, .btn:focus { border: 1px solid #333; background-color: #fff; color: #000; }
/*.modal-header, h4, .close { background-color: #333; color: #fff !important; text-align: center; font-size: 30px; }
.modal-header, .modal-body { padding: 40px 50px; }*/
.nav-tabs li a { color: #777; }
#googleMap { width: 100%; height: 400px; -webkit-filter: grayscale(100%); filter: grayscale(100%); }

.open .dropdown-toggle { color: #fff; background-color: #555 !important; }
.dropdown-menu li a { color: #000 !important; }
    .dropdown-menu li a:hover { background-color: red !important; }




.group-menu { margin-bottom: 10px; }
    .group-menu .card { border: 1px solid #ccc; margin-right: 20px; border-radius: 15px !important; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); }
        .group-menu .card-body:first-child {padding:0;  }
        .group-menu .card:first-child { max-width:120px; background-color: var(--coffee); color: white; font-size: 32px;  text-align: center;   justify-content: center;     }
.group-menu .card_type {  transform: rotate(270deg);    margin: 0; padding: 0;  line-height:1em}
    .group-menu .card-header { background-color: #333; color: #fff; text-align: center; padding: 10px; }
    .group-menu .card-body { padding: 10px; text-align: center; }
    .group-menu .card-title { font-size: 1rem; margin: 0; text-transform: lowercase; margin-bottom: 0.5em; text-align: center; padding: 15px; padding-left: 0; padding-right: 0; }
        .group-menu .card-title:first-letter { text-transform: uppercase; }
    .group-menu .card-text { font-size: 1rem; line-height: 1; }
    .group-menu .price { font-size: 1rem; font-style: italic; }
    .group-menu .card-footer { background-color: transparent; padding: 0 10px 0 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; display: flex; justify-content: space-between; text-align:center; font-size:smaller }
.group-menu .card-img {max-height:300px;  object-fit: cover; }
.group-menu .card-title {  font-size:x-large;  font-weight:bold}
    .group-menu .cartouche { max-width: 250px; background-color: var(--raisin-black); color: white; padding: 0; border-radius: 15px !important; opacity: 0.9; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }




.item-menu   { margin-top:20px!important}
.item-menu .card-header { background-color: var(--coffee); }
    .item-menu .card-header h2 { color: white;}