/* Black Olive, page Menu sur ordinateur (900 px et plus) : même esprit que Galerie et À propos.
   Héros photo sur vert + vague crème, recherche et cartes sur fond crème, boissons signature sur bandeau vert.
   Les cartes (.mk-card) ne sont pas modifiées. Chargé après menu-mobile.css. */
.mn-hero__photo { display: none; }
.oc-trigger, .oc-fab, .oc-overlay, .oc-head { display: none; }

@media (min-width: 900px) {
  :root { --mc-cream: #f6efdf; --mc-green: #10281f; --mc-gold: #c9a063; --mc-gold-lt: #e2c68b; }
  main { padding-top: 0; }

  /* ---------- Héros ---------- */
  .mn-hero {
    position: relative; isolation: isolate; overflow: hidden; display: block; row-gap: 0;
    min-height: clamp(540px, 50vw, 700px); padding: calc(var(--pg-top) + clamp(40px, 6vw, 84px)) var(--gutter) clamp(120px, 13vw, 190px);
    background: var(--mc-green); color: var(--cream);
  }
  .mn-hero__photo { display: block; position: absolute; z-index: -2; top: 0; right: 0; bottom: 0; width: 68%; margin: 0; }
  .mn-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
  .mn-hero::before {
    content: ''; position: absolute; z-index: -1; inset: 0;
    background:
      linear-gradient(180deg, rgba(10, 24, 18, .6) 0%, rgba(10, 24, 18, 0) 30%),
      linear-gradient(90deg, #10281f 0%, #10281f 31%, rgba(16, 40, 31, .78) 45%, rgba(16, 40, 31, .24) 66%, rgba(16, 40, 31, 0) 84%);
  }
  .mn-hero::after {
    content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; height: clamp(70px, 8vw, 116px); pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62C230 8 520 2 780 34S1230 76 1440 22V100H0Z' fill='%23f6efdf'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  }
  .mn-band { display: none; }
  .mn-hero__text { width: min(100%, 1240px); margin-inline: auto; }
  .mn-hero .kicker { margin: 0 0 22px; font-family: var(--font-body); font-style: normal; font-size: .8rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--mc-gold-lt); }
  .mn-hero .pg-title { max-width: 11em; margin: 0; font-size: clamp(2.8rem, 5.8vw, 4.9rem); font-weight: 500; line-height: 1.02; letter-spacing: -.005em; text-transform: none; color: #f6f1e4; }
  .mn-hero .pg-title em { display: block; padding: 0; font-style: normal; font-weight: 500; color: var(--mc-gold-lt); }
  .mn-hero .pg-lead { max-width: 27em; margin: clamp(18px, 2.4vw, 28px) 0 0; font-size: clamp(1rem, 1.25vw, 1.12rem); font-weight: 300; line-height: 1.65; color: #efe9da; }

  /* ---------- Recherche et cartes sur fond crème ---------- */
  .bs-intro.bo-sec { padding: clamp(18px, 2.4vw, 32px) 0 clamp(14px, 2vw, 26px); background: var(--mc-cream); }
  .bs-intro .bo-kicker { font-family: var(--font-body); font-style: normal; font-size: .78rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: #9a7a3f; }
  .bs-intro .bo-h2 { font-weight: 500; text-transform: none; font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.1; color: var(--mc-green); }
  .bs-intro .bo-h2 em { background: linear-gradient(100deg, #8c6a2f 0%, #b8914f 52%, #8c6a2f 100%); -webkit-background-clip: text; background-clip: text; }
  .bs-intro .bo-status { color: #4a5d51; }
  .mk { background: var(--mc-cream); padding-top: clamp(20px, 2.6vw, 36px); }
  .mk .mk-note { color: #7a5c24; }
  .mk > .bo-menu__tools { background: #10281f; border-color: rgba(201, 160, 99, .6); box-shadow: 0 26px 40px -26px rgba(16, 40, 31, .65); }

  /* ---------- Boissons signature : bandeau vert sous une vague crème ---------- */
  .bo-signatures { position: relative; background: var(--mc-green); padding-top: clamp(120px, 13vw, 180px); }
  .bo-signatures::before {
    content: ''; position: absolute; left: 0; right: 0; top: -1px; height: clamp(60px, 7vw, 100px); pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V30C1210 84 930 90 680 60S230 16 0 56Z' fill='%23f6efdf'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
  }

  /* ---------- Cartes un peu plus grandes : la place du panneau latéral est libérée ---------- */
  .mk > .mk-grid { max-width: min(1040px, 100%); }

  /* ---------- Recherche et catégories : menu coulissant (off-canvas) ---------- */
  .mk > .bo-menu__tools {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 400; width: min(380px, 92vw); height: 100vh; height: 100dvh; margin: 0; padding: 26px 26px 32px; align-self: stretch; justify-self: end;
    align-content: start; gap: 20px; overflow-y: auto; border: 0; border-left: 1px solid rgba(201, 160, 99, .55); border-radius: 0;
    background: #10281f; box-shadow: -30px 0 60px -20px rgba(0, 0, 0, .55);
    transform: translateX(104%); visibility: hidden; transition: transform .42s var(--ease-out), visibility 0s linear .42s;
  }
  html.oc-on .mk > .bo-menu__tools { transform: none; visibility: visible; transition: transform .42s var(--ease-out), visibility 0s; }
  .mk > .bo-menu__tools .bo-search input { padding: 13px 18px; font-size: .95rem; }
  .mk > .bo-menu__tools .bo-tab { padding: 12px 18px; }

  .oc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(201, 160, 99, .35); }
  .oc-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.8rem; line-height: 1; color: #f6f1e4; }
  .oc-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(201, 160, 99, .6); border-radius: 50%; background: transparent; color: #f6f1e4; cursor: pointer; transition: background-color .25s var(--ease-out), color .25s var(--ease-out), transform .16s var(--ease-out); }
  .oc-close svg { width: 18px; height: 18px; }
  .oc-close:active { transform: scale(.94); }
  .oc-close:focus-visible, .oc-trigger:focus-visible, .oc-fab:focus-visible { outline: 2px solid var(--mc-gold-lt); outline-offset: 3px; }
  @media (hover: hover) and (pointer: fine) { .oc-close:hover { background: var(--mc-gold); border-color: var(--mc-gold); color: var(--mc-green); } }

  .oc-overlay { display: block; position: fixed; inset: 0; z-index: 390; background: rgba(8, 20, 15, .55); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out), visibility 0s linear .3s; }
  html.oc-on .oc-overlay { opacity: 1; visibility: visible; transition: opacity .3s var(--ease-out), visibility 0s; }

  /* bouton d'ouverture dans le bloc « Cherchez un plat » */
  .bs-intro .bo-wrap { text-align: center; }
  .oc-trigger {
    display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; min-height: 50px; padding: 12px 28px; cursor: pointer;
    border: 1px solid var(--mc-green); border-radius: 999px; background: var(--mc-green); color: #f6f1e4; font: inherit; font-size: .92rem; letter-spacing: .04em;
    transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), transform .16s var(--ease-out);
  }
  .oc-trigger svg, .oc-fab svg { width: 18px; height: 18px; flex: none; }
  .oc-trigger:active { transform: scale(.97); }
  @media (hover: hover) and (pointer: fine) { .oc-trigger:hover { background: var(--mc-gold); border-color: var(--mc-gold); color: var(--mc-green); } }

  /* même accès, collé au bord droit, quand on a défilé plus bas que le bloc de recherche */
  .oc-fab {
    display: inline-flex; align-items: center; gap: 10px; position: fixed; right: 0; top: 44%; z-index: 80; padding: 14px 18px 14px 16px; cursor: pointer;
    border: 1px solid rgba(201, 160, 99, .7); border-right: 0; border-radius: 999px 0 0 999px; background: var(--mc-green); color: #f6f1e4;
    font: inherit; font-size: .76rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6);
    opacity: 0; pointer-events: none; transform: translateX(14px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  }
  .oc-fab.is-on { opacity: 1; pointer-events: auto; transform: none; }
  html.oc-on .oc-fab { opacity: 0; pointer-events: none; }
  @media (prefers-reduced-motion: reduce) {
    .mk > .bo-menu__tools, html.oc-on .mk > .bo-menu__tools, .oc-overlay, .oc-fab, .oc-trigger, .oc-close { transition: none; }
  }}