/* ==========================================================================
   Black Olive, la carte : pages sombres façon menu imprimé.
   Papier noir froissé, cartes ardoise, titres manuscrits, listes serrées,
   photos détourées qui débordent des cartes, brins d'olivier. Préfixe mk-.
   ========================================================================== */

.mk {
  position: relative; overflow: hidden;
  padding: clamp(56px, 8vw, 110px) var(--gutter) clamp(56px, 8vw, 96px);
  background: #15191b url('../assets/cut/paper-dark.jpg') center top / 1400px auto repeat-y;
}
.mk-grid { max-width: 1180px; margin: 0 auto; display: grid; gap: clamp(36px, 5vw, 56px) clamp(30px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* carte (une page du menu) */
.mk-card {
  position: relative; border-radius: 3px;
  padding: clamp(28px, 3.4vw, 40px) clamp(22px, 3vw, 36px) clamp(30px, 3.6vw, 44px);
  background: linear-gradient(158deg, #30353a 0%, #23282c 46%, #1d2124 100%);
  box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .045);
  color: #f4f2e8;
}
.mk-card.has-tr::before { content: ''; float: right; width: 36%; height: clamp(150px, 17vw, 210px); }
.mk-card.has-br { padding-bottom: clamp(150px, 17vw, 215px); }

.mk-title { font-family: 'Marck Script', 'Cormorant Garamond', cursive; font-weight: 400; font-size: clamp(2.3rem, 3.8vw, 3.2rem); line-height: 1.05; color: #fff; }
.mk-title em { font-style: normal; color: var(--olive-soft); }
.mk-sub { margin: clamp(22px, 3vw, 32px) 0 2px; font-family: 'Marck Script', 'Cormorant Garamond', cursive; font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.1; color: #fff; clear: both; }
.mk-sub--first { margin-top: 14px; }

.mk-list { list-style: none; margin: 8px 0 0; padding: 0; }
.mk-list li { padding: 7px 0; }
.mk-row { display: flex; align-items: baseline; gap: 9px; }
.mk-row b { font-family: var(--font-body); font-weight: 600; font-size: .86rem; line-height: 1.35; color: #fff; }
.mk-row i { flex: 1; min-width: 10px; border-bottom: 1px dotted rgba(255, 255, 255, .22); transform: translateY(-3px); }
.mk-row span { font-family: var(--font-body); font-weight: 500; font-size: .86rem; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.mk-row small { margin-left: 4px; font-size: .55rem; font-weight: 500; letter-spacing: .1em; color: #9aa2a6; }
.mk-list p { margin: 2px 0 0; max-width: 92%; font-size: .7rem; font-weight: 300; line-height: 1.5; color: #9aa2a6; }

/* photos détourées qui débordent */
.mk-photo { position: absolute; height: auto; pointer-events: none; filter: drop-shadow(0 26px 22px rgba(0, 0, 0, .55)); }
.mk-a-tr { top: clamp(-30px, -2vw, -14px); right: clamp(-34px, -2.4vw, -12px); width: clamp(150px, 19vw, 235px); transform: rotate(5deg); }
.mk-a-br { bottom: clamp(-34px, -2.4vw, -12px); right: clamp(-30px, -2vw, -12px); width: clamp(160px, 20vw, 250px); transform: rotate(-4deg); }
.mk-a-tr.mk-big { width: clamp(190px, 25vw, 310px); top: clamp(-12px, -1vw, 0px); right: clamp(-40px, -3vw, -14px); transform: none; filter: none; }
.mk-a-br.mk-big { width: clamp(200px, 26vw, 320px); bottom: clamp(-20px, -1.6vw, -8px); right: clamp(-40px, -3vw, -14px); transform: none; filter: none; }
.mk-card .mk-photo { transition: transform .8s var(--ease-out); }
@media (hover: hover) { .mk-card:hover .mk-a-tr:not(.mk-big) { transform: rotate(2deg) translateY(-6px); } .mk-card:hover .mk-a-br:not(.mk-big) { transform: rotate(-2deg) translateY(-6px); } }

/* brins d'olivier */
.mk-sprig { position: absolute; width: clamp(44px, 5vw, 64px); height: clamp(55px, 6.2vw, 80px); pointer-events: none; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .45)); }
.mk-sprig-tl { top: -26px; left: -16px; transform: rotate(-24deg); }
.mk-sprig-tr { top: -28px; right: 38%; transform: rotate(28deg); }
.mk-sprig-bl { bottom: -26px; left: -14px; transform: rotate(196deg); }

.mk-note { max-width: 1180px; margin: clamp(40px, 6vw, 64px) auto 0; font-size: .74rem; letter-spacing: .12em; text-align: center; color: #aeb6b8; }

/* hero : le cadre dont l'assiette sort */
.mn-hero__visual.pop { position: relative; width: min(100%, 540px); aspect-ratio: 1 / 1.02; justify-self: center; }
.pop-frame { position: absolute; inset: 2% 10% 16% 0; margin: 0; padding: 14px; background: #f4f2e8; border-radius: 8px; box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .85); }
.pop-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; }
.pop-plate { position: absolute; right: -3%; bottom: 0; width: 66%; height: auto; transform: rotate(-4deg); filter: drop-shadow(0 34px 28px rgba(0, 0, 0, .6)); }
.pop-plate--b { right: auto; left: -5%; bottom: 6%; width: 40%; transform: rotate(7deg); }

@media (max-width: 899px) {
  .mk-card.has-tr::before { width: 38%; }
  .mn-hero__visual.pop { width: min(90%, 400px); }
}
@media (prefers-reduced-motion: reduce) { .mk-card .mk-photo { transition: none; } }

/* Accueil : accès rapide aux parties de la carte */
.menu-links { list-style: none; margin: var(--space-md) auto 0; padding: 0; max-width: 760px; border-top: 1px solid rgba(248, 246, 240, .16); }
.menu-links li { border-bottom: 1px solid rgba(248, 246, 240, .16); }
.menu-links a { display: flex; align-items: baseline; gap: 20px; padding: 20px 0; font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--cream); transition: padding-left .5s var(--ease-out), color .3s var(--ease-out); }
.menu-links a span { min-width: 2.6rem; font-style: italic; font-size: 1rem; color: var(--gold); }
.menu-links a:hover { padding-left: 12px; color: var(--olive-soft); }
.menu-more { margin: var(--space-md) 0 0; text-align: center; }
@media (prefers-reduced-motion: reduce) { .menu-links a { transition: none; } .menu-links a:hover { padding-left: 0; } }

/* ==========================================================================
   Version mobile (moins de 900 px) : sombre et élégant.
   Vert très sombre, texte ivoire, une photo carrée en passe-partout ivoire par
   catégorie, titres serif, filets fins, prix dorés.
   Le menu ordinateur (.mk) n'est pas modifié au-dessus de 900 px.
   ========================================================================== */
.mm { display: none; }

@media (max-width: 899px) {
  .mk { display: none; }
  .mm { display: block; }

  .mm { --mm-line: rgba(248, 246, 240, .14); background: #0e1c17; color: var(--cream); overflow: hidden; }
  .mm .pg-pills { position: sticky; top: var(--pg-top); z-index: 20; }

  .mm-card { padding: 46px 20px 12px; scroll-margin-top: calc(var(--pg-top) + 56px); }
  .mm-card + .mm-card { border-top: 1px solid var(--mm-line); }

  /* photo carrée en passe-partout ivoire */
  .mm-photo { margin: 0; padding: 10px; background: #f4f2e8; border-radius: 3px; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .9); }
  .mm-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 1px; }

  .mm-head { margin-top: 30px; text-align: center; }
  .mm-num { margin-bottom: 12px; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; letter-spacing: .1em; color: var(--gold); }
  .mm-num span { display: inline-flex; align-items: center; gap: 12px; }
  .mm-num span::before, .mm-num span::after { content: ''; width: 28px; height: 1px; background: var(--gold-line); }
  .mm-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.3rem, 11vw, 3.2rem); line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--cream); text-wrap: balance; }
  .mm-title span, .mm-title em { display: block; }
  .mm-title em { margin-top: 2px; font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0; color: var(--gold-soft); }

  .mm-body { padding-bottom: 10px; }
  .mm-sub { display: flex; align-items: center; gap: 14px; margin: 30px 0 4px; font-family: var(--font-body); font-weight: 500; font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--olive-soft); }
  .mm-sub::before, .mm-sub::after { content: ''; flex: 1; height: 1px; background: var(--mm-line); }
  .mm-list { list-style: none; margin: 14px 0 0; padding: 0; }
  .mm-sub + .mm-list { margin-top: 0; }
  .mm-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--mm-line); }
  .mm-list li:last-child { border-bottom: 0; }
  .mm-list h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.26rem; line-height: 1.2; color: var(--cream); }
  .mm-list p { margin: 4px 0 0; font-size: .82rem; font-weight: 300; line-height: 1.5; color: var(--cream-muted); }
  .mm-price { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; font-variant-numeric: lining-nums; color: var(--gold-soft); white-space: nowrap; }
  .mm-price small { font-family: var(--font-body); font-size: .58rem; font-weight: 500; letter-spacing: .14em; color: var(--cream-muted); }

  .mm-note { margin: 0; padding: 30px 22px 44px; font-size: .74rem; letter-spacing: .1em; text-align: center; color: var(--cream-muted); border-top: 1px solid var(--mm-line); }
}

/* photos en cartouche à bord ondulé, sur un fond vert profond (style brochure) */
.bg-salade { --bg: url('../assets/bg/salade.jpg'); }
.bg-mezze { --bg: url('../assets/bg/mezze.jpg'); }
.bg-brunch { --bg: url('../assets/bg/brunch.jpg'); }
.mk-card.has-bg.bg-douceurs { --bg: url('../assets/bg/douceurs3.jpg'); --bgy: 50%; --bh: clamp(270px, 33vw, 390px); }
.mk-card.has-bg {
  --bh: clamp(210px, 25vw, 290px);
  isolation: isolate;
  background: linear-gradient(168deg, #2d3d2b 0%, #1b271e 52%, #121a16 100%);
}
.mk-card.has-bg::after {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; height: var(--bh); pointer-events: none;
  background: var(--bg) center var(--bgy, 50%) / cover no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V100C340 100 300 62 210 66C130 70 80 88 0 60Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V100C340 100 300 62 210 66C130 70 80 88 0 60Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.mk-card.has-bg.bg-top { padding-top: calc(var(--bh) * .8); }
.mk-card.has-bg.bg-top::after { top: 0; border-radius: 3px 3px 0 0; }
.mk-card.has-bg.bg-bottom { padding-bottom: calc(var(--bh) * 1.0); }
.mk-card.has-bg.bg-bottom::after {
  bottom: 0; border-radius: 0 0 3px 3px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100H400V0C340 0 300 38 210 34C130 30 80 12 0 40Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100H400V0C340 0 300 38 210 34C130 30 80 12 0 40Z'/%3E%3C/svg%3E");
}
.mk-card.has-bg .mk-title { color: #e6c98a; }
.mk-card.has-bg .mk-title em { color: #fff; }
.mk-card.has-bg .mk-sub { color: #e6c98a; }

/* fond clair derrière les cartes (desktop) : les cartes sombres ressortent */
.mk { background: radial-gradient(ellipse 90% 45% at 50% 0%, #56694e 0%, #46563f 60%, #3b4936 100%); }
.mk-card { box-shadow: 0 30px 50px -28px rgba(24, 28, 22, .55), 0 0 0 1px rgba(24, 28, 22, .08); }
.mk-sprig { filter: drop-shadow(0 6px 6px rgba(24, 28, 22, .3)); }
.mk-note { color: #dfe6d6; }

/* Boissons chaudes : photo en tête de carte */
.bg-chaud { --bg: url('../assets/bg/chaud2.jpg'); }
.mk-card.has-bg.bg-chaud { --bgy: 35%; --bh: clamp(250px, 30vw, 350px); }
.mk-card.has-bg.bg-chaud .mk-title em { color: #e6c98a; }

/* Boissons chaudes : photo en tête de carte */
.bg-boischaud { --bg: url('../assets/bg/chaud3.jpg'); }
.mk-card.has-bg.bg-boischaud { --bgy: 38%; --bh: clamp(250px, 30vw, 350px); }
.mk-card.has-bg.bg-boischaud .mk-title em { color: #e6c98a; }

/* Smoothies & frappés : nouvelle photo */
.bg-smoothie { --bg: url('../assets/bg/smoothie.jpg'); }
.mk-card.has-bg.bg-smoothie { --bgy: 40%; }
.mk-card.has-bg.bg-smoothie .mk-title em, .mk-card.has-bg.bg-smoothie .mk-title span { color: #e6c98a; }

/* Petit-déjeuner & brunch : nouvelle photo */
.bg-petitdej { --bg: url('../assets/bg/petitdej.jpg'); }
.mk-card.has-bg.bg-petitdej { --bgy: 100%; --bh: clamp(330px, 40vw, 470px); }

/* Boissons signature : photo en tête de carte */
.bg-signature { --bg: url('../assets/bg/signature.jpg'); }
.mk-card.has-bg.bg-signature { --bgy: 85%; }
.mk-card.has-bg.bg-signature .mk-title em { color: #e6c98a; }

/* Jus & détox : photo en tête de carte */
.bg-jus { --bg: url('../assets/bg/jus.jpg'); }
.mk-card.has-bg.bg-jus { --bgy: 62%; --bh: clamp(330px, 40vw, 470px); }
.mk-card.has-bg.bg-jus .mk-title em { color: #e6c98a; }

/* Salé & œufs : photo en tête de carte */
.bg-sale { --bg: url('../assets/bg/sale.jpg'); }
.mk-card.has-bg.bg-sale { --bgy: 45%; }
.mk-card.has-bg.bg-sale .mk-title em { color: #e6c98a; }

/* Petit-déjeuner & brunch : la vague ne descend plus derrière le titre à droite */
.mk-card.has-bg.bg-petitdej::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V58C340 58 300 46 210 50C130 54 80 68 0 44Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V58C340 58 300 46 210 50C130 54 80 68 0 44Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.mk-card.has-bg.bg-petitdej { padding-top: calc(var(--bh) * .66); }

/* Toute la partie menu : même arrière-plan que « Bon à savoir » (noir profond, lueur olive discrète) */
.mk, .mm {
  background:
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(138, 154, 91, 0.12) 0%, transparent 70%),
    #0e1512;
}

/* Cartes du menu : cadre doré or en relief (effet 3D) */
.mk-card, .mm-card {
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #f8e6b8 0%, #c9a063 22%, #8a6428 46%, #e9cf9f 62%, #b98f5c 82%, #f1d9a8 100%) 1;
  box-shadow:
    0 2px 0 #7a5a24,
    0 10px 16px -6px rgba(0, 0, 0, .75),
    0 30px 44px -22px rgba(0, 0, 0, .9),
    inset 0 0 0 1px rgba(255, 236, 190, .18);
  outline: 1px solid rgba(233, 207, 159, .45);
  outline-offset: -9px;
}
/* cadre doré plus marqué, relief renforcé */
.mk-card, .mm-card {
  border-width: 6px;
  border-image: linear-gradient(135deg, #fff1c9 0%, #d8b06a 18%, #7a5420 40%, #f3dba0 55%, #a67a3c 78%, #ffe9b5 100%) 1;
  box-shadow:
    0 3px 0 #6b4a1c,
    0 12px 18px -6px rgba(0, 0, 0, .8),
    0 34px 48px -22px rgba(0, 0, 0, .95),
    inset 0 0 0 2px rgba(60, 40, 10, .55);
  outline-color: rgba(243, 219, 160, .6);
  outline-offset: -13px;
}

/* Cartes du menu : cadre classique, double filet doré fin (remplace le cadre en relief) */
.mk-card, .mm-card {
  border: 1px solid #c9a063;
  border-image: none;
  border-radius: 4px;
  box-shadow: 0 18px 34px -22px rgba(0, 0, 0, .8);
  outline: 1px solid rgba(201, 160, 99, .6);
  outline-offset: -8px;
}

/* Mention des prix et allergies en or */
.mk-note, .mm-note { color: #e6c98a; }

/* ===== Mobile (≤ 899 px) : cartes du menu refaites comme sur ordinateur : photo en vague, cadre doré fin, fond vert profond ===== */
@media (max-width: 899px) {
  .mm { padding: 18px 0 6px; }
  .mm-card {
    --mh: clamp(220px, 62vw, 330px);
    position: relative; isolation: isolate;
    margin: 0 14px 28px; padding: calc(var(--mh) * .7) 20px 14px;
    background: linear-gradient(168deg, #2d3d2b 0%, #1b271e 52%, #121a16 100%);
  }
  .mm-card + .mm-card { border-top: 1px solid #c9a063; }
  .mm-photo { display: none; }
  .mm-card::before {
    content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: var(--mh); pointer-events: none;
    background: var(--mmbg) center var(--mmy, 50%) / cover no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V100C340 100 300 62 210 66C130 70 80 88 0 60Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V100C340 100 300 62 210 66C130 70 80 88 0 60Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  #c1 { --mmbg: url('../assets/bg/petitdej.jpg'); --mmy: 72%; }
  #c2 { --mmbg: url('../assets/bg/sale.jpg'); --mmy: 45%; }
  #c3 { --mmbg: url('../assets/bg/douceurs3.jpg'); --mmy: 50%; }
  #c4 { --mmbg: url('../assets/bg/chaud3.jpg'); --mmy: 38%; }
  #c5 { --mmbg: url('../assets/bg/chaud2.jpg'); --mmy: 35%; }
  #c6 { --mmbg: url('../assets/bg/smoothie.jpg'); --mmy: 40%; }
  #c7 { --mmbg: url('../assets/bg/signature.jpg'); --mmy: 55%; }
  #c8 { --mmbg: url('../assets/bg/jus.jpg'); --mmy: 55%; }
  .mm-head { margin-top: 4px; }
  .mm-title span { color: #e6c98a; }
  .mm-title em { color: #fff; }
  .mm .pg-pills { top: var(--pg-top); }
  .mm-note { border-top: 0; padding-top: 14px; }
}