html{

}

body {
    font-family: Arial;
    margin: 0 auto;
    background-color: #F8F6F1;

}
.menu-qr-footer{
    text-align: center;
}
#tabs {
    display: flex;
    overflow-x: auto;
    padding: 7px 10px;
}

#tabs button {
    flex-shrink: 0;
    padding: 12px;

    border: none;
}

#content {

    margin-bottom: 100px;
}

.item {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

.name {
    font-weight: bold;
    font-size: 16px;
}

.price {
    color: #000;
    font-size: 17px;

}

.row{
    justify-content: space-between;
    padding-right: 15px;
}

.vin-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.vin-appellation {
    font-size: 11px;
    font-style: italic;
    opacity: 0.6;
    margin-top: 2px;
}

.vin-sizes,.vin-price{
    text-align: right;
    padding-right: 10px;
}

.vin-sizes span {
    font-size: 12px;
    color: #666;
}

.vin-sizes:not(span){
    font-weight: bold;
}

.price {
 flex-shrink: 0;
 text-align: right;
 white-space: nowrap;
 font-weight: bold;
 padding-right: 15px;

}
.row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.name{
    padding: 0 15px;
    flex: 1;
    min-width: 0; /* IMPORTANT */

}

.desc{
   padding: 0 15px;
   font-size: 15px;
}

h3{
    margin-top: 50px;
    font-size: 25px;
    padding-left: 10px;
}

.vin {
    padding: 10px 0;
}

/* TYPE VERRE */
.vin--verre .vin-title {
    font-weight: 500;
}

/* TYPE BOUTEILLE */
.vin--bouteille {
    border-bottom: 1px solid #eee;
}

/* ligne principale */
.vin-line1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.vin-title {
    flex: 1;
}

.vin-price {
    white-space: nowrap;
    font-weight: 600;
}

/* secondaires */
.vin-appellation {
    font-size: 11px;
    font-style: italic;
    opacity: 0.6;
    margin-top: 2px;
}

#page-title {
    font-size: 24px;
    font-weight: 600;
    padding: 25px 0 0 0;
    text-align: center;
}

.menu-header,#menu-header {
    text-align: center;
    padding: 10px 0;
}



.menu-price{
    font-size: 25px;
    font-weight: bold;
  
}

.menu-menu-formule+#content h3{
    display: none;
}

.menu-menu-formule+#content .desc{
    padding-top: 50px;
    text-align: center;
}

#tabs button {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    
    transition: all 0.2s ease;
    font-size: 14px;
}

#tabs button.active {


    border-radius: 10px;
    padding: 5px 16px;
    border: 1px solid #fff;
    font-weight: bold;
}

#content {
    transition: transform 0.2s ease;
}


.item-details-no-image .item-details-content {
    padding-top: 65px;
}

.item{
    display:flex;
    gap:0px;
    align-items:flex-start;
    margin-bottom:20px;
}

.item-photo{
    width:90px;
    flex-shrink:0;
    padding-right: 10px ;
    margin-left: 15px;
}

.item-photo img{
    width:90px;
    height:90px;
    object-fit:cover;
    border-radius:10px;
    display:block;
}

.item-content{
    flex:1;
}

.menu-item{
    display:flex;
    gap:15px;
    align-items:flex-start;
    margin-bottom:20px;

}

.menu-item .row{
    padding-right: 0px;
}

.menu-photo{
    margin-bottom:8px;
    width:90px;
    flex-shrink:0;
}

.menu-photo img{
  width:90px;
  height:90px;
  object-fit:cover;
  border-radius:10px;
  display:block;
}


/* =====================================================
   MENU QR — FENÊTRE DÉTAIL
   ===================================================== */

   .lightbox{

    position:fixed;
    inset:0;

    z-index:999999;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:20px;

    background:rgba(0,0,0,.72);

    opacity:0;
    visibility:hidden;

    transition:
    opacity .25s ease,
    visibility .25s ease;

}


.lightbox.open{

    opacity:1;
    visibility:visible;

}


/* =====================================================
   FENÊTRE BLANCHE
   ===================================================== */

   .item-details{

    position:relative;

    width:min(92vw,560px);

    max-height:90vh;

    overflow-y:auto;

    background:#fff;

    color:#202824;

    border-radius:18px;

    box-shadow:
    0 20px 60px rgba(0,0,0,.30);

}


/* =====================================================
   BOUTON FERMER
   ===================================================== */
.item-details .item-details-close {

    position:absolute;

    top:12px;
    right:12px;

    z-index:20;

    width:38px;
    height:38px;

    padding:0;

    border:0;
    border-radius:50%;

    background:rgba(255,255,255,.95);

    color:#202824;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:18px;
    line-height:1;

    cursor:pointer;

    box-shadow:
    0 2px 8px rgba(0,0,0,.18);

}

.item-details .item-details-close i {
    line-height:1;
}

.item-details .item-details-close:hover{
    background: #fff;
    color: #000;
}

/* =====================================================
   GRANDE PHOTO
   ===================================================== */

   .item-details-image{

    width:100%;

    background:#f4efe3;

    overflow:hidden;

    border-radius:
    18px 18px 0 0;

}


.item-details-image img{

    display:block;

    width:100%;

    height:auto;

    max-width:100%;

    max-height:55vh;

    object-fit:cover;

    margin:0 auto;

    border-radius:0;

    transition:transform .15s;

    touch-action:none;

}


/* =====================================================
   CONTENU
   ===================================================== */

   .item-details-content{

    padding:24px;

}


/* =====================================================
   NOM + PRIX
   ===================================================== */

   .item-details-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

}


.item-details-name{

    color:#23483A;

    font-size:24px;

    font-weight:700;

    line-height:1.25;

}


.item-details-price{

    flex-shrink:0;

    color:#D86730;

    font-size:20px;

    font-weight:700;

    white-space:nowrap;

}


/* =====================================================
   DESCRIPTION
   ===================================================== */

   .item-details-description{

    margin-top:16px;

    color:#202824;

    font-size:16px;

    line-height:1.6;

}


/* =====================================================
   ALLERGÈNES
   ===================================================== */

   .item-details-allergenes{

    margin-top:22px;

    padding-top:18px;

    border-top:1px solid #e5e5e5;

}


.item-details-label{

    margin-bottom:10px;

    color:#23483A;

    font-size:15px;

    font-weight:700;

}


.item-details-allergenes-list{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

}


.item-details-allergene{

    display:inline-flex;

    align-items:center;

    padding:6px 10px;

    border-radius:999px;

    background:#DCE7DD;

    color:#23483A;

    font-size:13px;

    font-weight:500;

}


/* =====================================================
   MOBILE
   ===================================================== */

   @media(max-width:600px){

    .lightbox{

        padding:10px;

    }


    .item-details{

        width:100%;

        max-height:94vh;

        border-radius:16px;

    }


    .item-details-image{

        border-radius:
        16px 16px 0 0;

    }


    .item-details-image img{

        max-height:50vh;

    }


    .item-details-content{

        padding:20px;

    }


    .item-details-name{

        font-size:21px;

    }


    .item-details-price{

        font-size:18px;

    }

}


.page-title,
.menu-section,
.name {

    font-family: var(--menu-title-font);

}


body,
.desc,
.price,
.vin-appellation {

    font-family: var(--menu-text-font);



}


@media (min-width: 768px) {

  body {
    max-width: none;
    background-color: #F8F6F1!important;
}

.oa-phone {
    width: 390px;
    padding: 7px;
    padding-top: 5px;
    border-radius: 42px;
    box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.25),
    inset 0 0 0 4px #444;
    position: relative;

    margin: 15px auto;
}

.oa-phone-screen {

    max-height: 900px;
    border-radius: 32px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;

    background-color: var(--menu-background-color);

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.oa-phone-screen::-webkit-scrollbar {
    display: none;
}

.oa-phone::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 24px;
    background: #202824;
    border-radius: 0 0 16px 16px;
    z-index: 10;
}



.oa-phone::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 140px;
    width: 4px;
    height: 70px;
    background: #202824;
    border-radius: 0 4px 4px 0;
}

#tabs {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#tabs::-webkit-scrollbar {
    display: none;
}

}