:root{ --menu-gap: 18px; --menu-radius: var(--borderRadius, 12px); }



/* --- Page qui liste les cartes de restaurant --- */
.eurezia-menu-index{ display:grid; gap:14px; }
.eurezia-menu-index.cols-1{ grid-template-columns: 1fr; }
.eurezia-menu-index.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.eurezia-menu-index.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }


.menu-index__card{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius: var(--borderRadius, 12px); overflow:hidden; }
.menu-index__link{ display:block; padding:16px; text-decoration:none; color:inherit; }
.menu-index__title{ font-family: var(--fontTitle, inherit); color: var(--colorTitle, #222); font-weight:700; margin: 0 0 6px; }
.menu-index__excerpt{ color: var(--colorText, #555); font-size:.95rem; margin:0 0 10px; }
.menu-index__cta{ display:inline-block; font-weight:700; color: var(--primary, #0d6efd); }
.menu-index__thumb img {width: auto; max-width: 100%; max-height: 300px;}
.menu-index__thumb {
    text-align: center;
}

.eurezia-menu-index{
  display: grid;
  gap: 14px;
}

/* Toujours au moins 2 colonnes */
.eurezia-menu-index.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.eurezia-menu-index.cols-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }

/* Et tu redonnes 3 colonnes à partir d’un viewport plus large */
@media (min-width: 768px){
  .eurezia-menu-index.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}




/* ---- Section ---- */
.menu-section{ margin-bottom: 3.5rem; }
.menu-section__title{
font-family: var(--fontTitle, inherit);
color: var(--colorTitle, #222);
letter-spacing: .06em;
text-transform: uppercase;
font-size: clamp(1.1rem, 0.9rem + 1vw, 1.4rem);
margin: 0 0 .75rem 0;
}
.menu-section__desc{ color: color-mix(in oklab, var(--colorText, #444) 80%, #000 20%); margin: 0 0 1rem; }


/* ---- Liste des plats (layout bistronomie) ---- */
.menu-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: var(--menu-gap); }


/* 2 colonnes sur écrans larges */
@media (min-width: 992px){
.menu-list{ grid-template-columns: 1fr 1fr; }
}


.content-header-plat {
    display: flex;
    justify-content: space-between;
        align-items: center;
}


.menu-price-line {
    text-align: center;
}


.menu-list .menu-item{

align-items: center;
gap: var(--menu-gap);
padding: 14px 16px;
background: #fff;
border: 1px solid rgba(0,0,0,.06);
border-radius: var(--menu-radius);
box-shadow: 0 1px 2px rgba(0,0,0,.03);
}



.menu-item__thumb
{ 
  grid-area: thumb; 
  width: 84px; 
  height: 84px; 
  border-radius: 10px;
   overflow: hidden; 
   background: #f6f6f6; 
   display:flex; 
   align-items:center; 
   justify-content:center; 
   float: left;
   margin-right: 15px;
}
.menu-item__thumb img{ width:100%; height:100%; object-fit: cover; }


.menu-item__content{ grid-area: content; min-width: 0; }
.menu-item__title{ margin: 0; color: var(--colorTitle, #222); font-size: 1.05rem; font-weight: 700; }
.menu-item__desc{ margin:.25rem 0 0; color: var(--colorText, #555); font-size: .95rem; }


/* Ligne de points entre titre et prix (effet leaders) */
.menu-item__spacer{ display:none; }


.menu-item__labels{ grid-column: 2 / span 1; margin-top:.5rem; display:flex; flex-wrap:wrap; gap:6px; }


/* Pills reliées aux couleurs du thème */
.pill{ --pill-bg:#eef0f2; --pill-fg:#334; border-radius: 999px; padding:.2rem .55rem; font-size:.78rem; font-weight:600; letter-spacing:.02em; background: var(--pill-bg); color: var(--pill-fg); border:1px solid color-mix(in oklab, var(--pill-fg) 20%, transparent); }
.pill--primary{ --pill-bg: var(--second, #0d6efd); --pill-fg:#fff; }
.pill--primary--subtle{ --pill-bg: color-mix(in oklab, var(--primary, #0d6efd) 18%, #fff); --pill-fg: color-mix(in oklab, var(--primary, #0d6efd) 50%, #000); }
.pill--info{ --pill-bg: var(--second, #0dcaf0); --pill-fg:#00303a; }
.pill--danger{ --pill-bg:#dc3545; --pill-fg:#fff; }


.menu-item__price {
    display: flex;
    justify-self: end;
    gap: 20px;
}
.menu-item__price .price{ color: var(--second); font-weight: 700; }


/* --- Mobile : forcer l'affichage en colonne --- */
@media (max-width: 767px) {
  .menu-item {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
  }

  .menu-item__thumb {
    width: 100%;
    height: auto;
    border-radius: var(--borderRadius, 10px) var(--borderRadius, 10px) 0 0;
    overflow: hidden;
    margin-bottom: .75rem;
  }
  .menu-item__thumb img {
    width: auto !important;
    height: auto;
    object-fit: cover;
  }

  .menu-body {
    width: 100%;
  }
  .menu-title {
    font-size: 1.1rem;
    margin-bottom: .25rem;
  }
  .menu-desc {
    font-size: .9rem;
    margin-bottom: .5rem;
  }

  .menu-footer {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: .75rem;
  }
  .menu-tags {
    margin-bottom: .5rem;
  }
  .menu-price {
    text-align: right;
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
  }
}