/* Black Olive, carte sur mobile (900 px et moins) : panneaux empilés, titres de catégorie en script sur coup de pinceau,
   prix reliés au nom par une ligne de points. Chargé après carte.css et mm-viewer.css ; la version ordinateur n'est pas touchée. */
@media (max-width: 899px) {
  /* la visionneuse « une catégorie à la fois » est remplacée par une longue page */
  .mv { display: none !important; }
  .mm.mv-on:not(.mv-search) .mm-pills { display: block; }

  /* panneaux : même gabarit pour toutes les catégories, fonds alternés vert profond / vert mousse */
  .mm.mv-on:not(.mv-search) .mm-card,
  .mm.mv-on:not(.mv-search) .mm-card:not(.is-active),
  .mm.mv-on:not(.mv-search) .mm-card.is-active { display: block; margin: 0; padding: 40px 20px 30px; }
  .mm.mv-on:not(.mv-search) .mm-card.is-active .mm-head { display: block; }
  .mm article.mm-card:nth-of-type(odd) { background: #0e1c17; }
  .mm article.mm-card:nth-of-type(even) { background: #15291f; }
  .mm .mm-card + .mm-card { border-top: 1px solid rgba(201, 160, 99, .28); }
  .mm .mm-card { border: 0; border-radius: 0; outline: 0; box-shadow: none; }
  /* décor d'arrière-plan propre à chaque catégorie (photos déjà définies par #c1…#c8 dans carte.css) :
     une grande vignette en haut à droite et une plus petite en bas à gauche, fondues dans le vert, sous le texte */
  .mm .mm-card { overflow: hidden; }
  .mm .mm-card::before,
  .mm.mv-on:not(.mv-search) .mm-card.is-active::before,
  .mm .mm-card::after {
    content: ''; display: block; position: absolute; z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(10, 22, 17, .26), rgba(10, 22, 17, .26)), var(--mmbg) center var(--mmy, 50%) / cover no-repeat;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  }
  .mm .mm-card::before,
  .mm.mv-on:not(.mv-search) .mm-card.is-active::before {
    top: 0; right: 0; left: auto; width: 100%; height: 440px; opacity: .9;
    -webkit-mask-image: radial-gradient(ellipse 85% 88% at 88% 0%, #000 0%, rgba(0, 0, 0, .8) 42%, transparent 86%);
    mask-image: radial-gradient(ellipse 85% 88% at 88% 0%, #000 0%, rgba(0, 0, 0, .8) 42%, transparent 86%);
  }
  .mm .mm-card::after {
    bottom: 0; left: 0; width: 85%; height: 340px; opacity: .6; background-position: center calc(100% - var(--mmy, 50%));
    -webkit-mask-image: radial-gradient(ellipse 85% 85% at 8% 100%, #000 0%, rgba(0, 0, 0, .75) 42%, transparent 86%);
    mask-image: radial-gradient(ellipse 85% 85% at 8% 100%, #000 0%, rgba(0, 0, 0, .75) 42%, transparent 86%);
  }
  .mm .mm-photo, .mm .mm-num { display: none; }

  /* titre : sans fond, en majuscules fines (police des titres du site) + italique doré, filet doré en dessous */
  .mm .mm-head { margin: 0 0 20px; text-align: left; filter: none; }
  .mm .mm-title {
    display: block; max-width: none; margin: 0; padding: 0; background: none; clip-path: none;
    font-family: var(--font-display); font-weight: 300; font-size: clamp(1.1rem, 6.7vw, 1.95rem); line-height: 1.1; white-space: nowrap;
    letter-spacing: .03em; text-transform: uppercase; color: var(--cream);
    text-shadow: 0 2px 16px rgba(6, 14, 10, .85), 0 0 2px rgba(6, 14, 10, .5);
  }
  .mm .mm-title span { display: inline; margin: 0; font: inherit; color: inherit; }
  .mm .mm-title em { display: inline; margin: 0 0 0 .28em; font-family: inherit; font-style: italic; font-weight: 400; font-size: .9em; letter-spacing: .01em; text-transform: none; color: #e6c98a; }
  .mm .mm-title em::before { content: none; }
  .mm .mm-head::after {
    content: ''; display: block; width: 104px; height: 9px; margin-top: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 9'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23e6c98a'/%3E%3Cstop offset='1' stop-color='%23e6c98a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4.5 .8 8.2 4.5 4.5 8.2 .8 4.5Z' fill='%23e6c98a'/%3E%3Cpath d='M15 4.5H104' stroke='url(%23g)' stroke-width='1'/%3E%3C/svg%3E") left center / contain no-repeat;
  }
  /* sous-titres (Bowls, Infusions paradis…) */
  .mm .mm-sub { margin: 28px 0 2px; color: #e6c98a; }
  .mm .mm-sub::before, .mm .mm-sub::after { background: rgba(201, 160, 99, .3); }

  /* plats : nom ······· prix, description dessous */
  .mm .mm-list li { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0 8px; align-items: baseline; padding: 13px 0; border-bottom: 0; }
  .mm .mm-list li > div { display: contents; }
  .mm .mm-list h4 { grid-column: 1; grid-row: 1; margin: 0; font-size: 1.2rem; }
  .mm .mm-list .mm-price { grid-column: 2; grid-row: 1; display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; line-height: 1.2; }
  .mm .mm-list .mm-price::before { content: ''; flex: 1 1 auto; min-width: 14px; align-self: baseline; transform: translateY(-.3em); border-bottom: 2px dotted rgba(233, 207, 159, .55); }
  .mm .mm-list h4, .mm .mm-list .mm-price, .mm .mm-list p, .mm .mm-sub { text-shadow: 0 1px 10px rgba(6, 14, 10, .85), 0 0 2px rgba(6, 14, 10, .6); }
  .mm .mm-list p { grid-column: 1 / -1; grid-row: 2; margin: 3px 0 0; max-width: 46ch; }
}

/* ---------- Hero de la page Menu (mobile) : grande photo plein cadre, titre en bas qui se fond dans le vert ---------- */
@media (max-width: 899px) {
  .mn-hero {
    display: flex; flex-direction: column; justify-content: flex-end; min-height: min(calc(100vw * 1.212 + 72px), 700px); padding: 0 var(--gutter) 36px;
    background:
      linear-gradient(180deg, rgba(14, 28, 23, 0) 0%, rgba(14, 28, 23, 0) 40%, rgba(14, 28, 23, .74) 66%, #0e1c17 88%),
      url('../assets/bg/hero-carte.jpg') center top / 100% auto no-repeat #0e1c17;
  }
  .mn-band { display: none; }
  .mn-hero__text { text-align: left; }
  .mn-hero .kicker { color: #e6c98a; text-shadow: 0 1px 10px rgba(6, 14, 10, .8); }
  .mn-hero .pg-title { font-size: clamp(2.7rem, 13.5vw, 3.9rem); font-weight: 300; line-height: 1; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 2px 18px rgba(6, 14, 10, .8); }
  .mn-hero .pg-title em { font-weight: 400; letter-spacing: .01em; text-transform: none; color: #e6c98a; }
  .mn-hero .pg-lead { max-width: 30ch; margin: 14px 0 0; font-size: 1.02rem; line-height: 1.55; color: var(--cream); text-shadow: 0 1px 12px rgba(6, 14, 10, .85); }
}
@media (min-width: 560px) and (max-width: 899px) { .mn-hero { background-size: cover; background-position: center 22%; min-height: 640px; } }