/*
Theme Name: Menuiserie Klasen
Description: Theme sur-mesure Menuiserie Klasen (artisan menuisier, Mons-La-Trivalle). Editorial bois/papier, responsive.
Author: Kernel Panik
Version: 1.0
*/

/* ───────── Menuiserie Klasen — Design System ───────── */

:root {
  /* Cream / paper tones */
  --cream-50:  #FBF8F3;
  --cream-100: #F5EFE6;
  --cream-200: #EBE3D5;
  --cream-300: #DDD1BB;

  /* Wood / brand */
  --tan-300:  #D8B98C;
  --tan-400:  #C8A576;
  --tan-500:  #B58A55;
  --tan-600:  #97703F;

  /* Brown text */
  --brown-700: #5C3A1E;
  --brown-800: #3F2812;
  --brown-900: #2C1F14;

  /* Neutrals / text */
  --ink:        #2C1F14;
  --ink-soft:   #5A4A3B;
  --muted:      #8A7B6A;
  --line:       #E5DBC9;
  --line-soft:  #EFE7D6;

  /* Accent (subtle terracotta — used sparingly) */
  --accent:    oklch(0.55 0.085 45);

  /* Spacing */
  --gutter: 64px;
  --container: 1152px;

  /* Type */
  --f-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

.mk-page {
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--cream-50);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

.mk-page h1, .mk-page h2, .mk-page h3, .mk-page h4 {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--brown-900);
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
}

.mk-page p { margin: 0; }

.mk-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.mk-eyebrow {
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tan-600);
}

/* ───────── Nav ───────── */
.mk-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--cream-200);
  position: relative;
  z-index: 2;
}

.mk-nav-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mk-nav-brand img {
  width: 130px;
  height: 130px;
  object-fit: contain;
}

.mk-nav-brand-text {
  display: none;
}

.mk-nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
  font-size: 14px;
  color: var(--ink-soft);
}

.mk-nav-links a {
  color: inherit;
  text-decoration: none;
  position: relative;
  padding: 4px 0;
}

.mk-nav-links a.active {
  color: var(--brown-900);
}

.mk-nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--tan-500);
}

.mk-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--brown-900);
  color: var(--cream-50);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  border-radius: 2px;
}

/* ───────── Buttons ───────── */
.mk-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s;
}
.mk-btn-primary { background: var(--brown-900); color: var(--cream-50); }
.mk-btn-primary:hover { background: var(--brown-700); }
.mk-btn-ghost {
  background: transparent;
  color: var(--brown-900);
  border: 1px solid var(--brown-900);
}
.mk-btn-link {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brown-900);
  text-decoration: none;
  border-bottom: 1px solid var(--tan-400);
  padding-bottom: 4px;
}

/* ───────── Hero ───────── */
.mk-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 620px;
}

.mk-hero-text {
  padding: 96px var(--gutter) 96px var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--cream-50);
}

.mk-hero h1 {
  font-size: 76px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 20px 0 28px;
}

.mk-hero h1 em {
  font-style: italic;
  color: var(--tan-600);
  font-weight: 400;
}

.mk-hero-lede {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 460px;
  line-height: 1.65;
  margin-bottom: 40px;
}

.mk-hero-cta {
  display: flex;
  gap: 16px;
  align-items: center;
}

.mk-hero-img {
  background: var(--cream-100);
  position: relative;
  overflow: hidden;
}

/* ───────── Placeholder images (striped, monospace label) ───────── */
.mk-img {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      var(--cream-100) 0px, var(--cream-100) 18px,
      var(--cream-200) 18px, var(--cream-200) 19px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mk-img::after {
  content: attr(data-label);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--tan-600);
  background: rgba(251, 248, 243, 0.85);
  padding: 6px 12px;
  border: 1px solid var(--cream-300);
  border-radius: 2px;
  text-transform: uppercase;
}

/* Section base */
.mk-section { padding: 110px 0; }
.mk-section-alt { background: var(--cream-100); }
.mk-section-dark { background: var(--brown-900); color: var(--cream-100); }
.mk-section-dark h2, .mk-section-dark h3 { color: var(--cream-50); }

.mk-section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 680px;
  margin-bottom: 64px;
}

.mk-section-head h2 {
  font-size: 52px;
  letter-spacing: -0.02em;
}
.mk-section-head p {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
}

/* ───────── Service cards ───────── */
.mk-services {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.mk-service {
  background: var(--cream-50);
  padding: 36px 22px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
}
.mk-service-num {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--tan-600);
  letter-spacing: 0.1em;
}
.mk-service h3 {
  font-size: 26px;
  margin: 0;
}
.mk-service p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.mk-service-link {
  margin-top: auto;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-900);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ───────── Footer ───────── */
.mk-footer {
  background: var(--brown-900);
  color: var(--cream-200);
  padding: 80px 0 28px;
}
.mk-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mk-footer h4 {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tan-400);
  margin-bottom: 18px;
  font-weight: 500;
}
.mk-footer a {
  display: block;
  color: var(--cream-200);
  text-decoration: none;
  font-size: 14px;
  line-height: 2;
  opacity: 0.8;
}
.mk-footer-legal {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--tan-400);
  opacity: 0.7;
}
.mk-footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.mk-footer-brand img {
  width: 110px;
  height: 110px;
  background: var(--cream-50);
  padding: 8px;
  border-radius: 2px;
  object-fit: contain;
}
.mk-footer-tagline {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--cream-50);
  line-height: 1.3;
  max-width: 280px;
}

/* ───────── Google Maps embed (contact) ───────── */
.mk-map {
  position: relative;
  border: 1px solid var(--line);
  background: var(--cream-100);
}
.mk-map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}
.mk-map-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  background: var(--cream-50);
  border-top: 1px solid var(--line);
  color: var(--brown-900);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s;
}
.mk-map-link:hover { background: var(--cream-100); }

/* ───────── Burger (mobile nav) ───────── */
.mk-nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
}
.mk-nav-burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--brown-900);
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — container queries scoped to each .mk-page artboard
   ────────────────────────────────────────────────────────────────
   We use container queries (not media queries) because each page
   renders inside a fixed-width artboard on the canvas — the viewport
   width is meaningless. Same components, same code, render at 1280px
   AND at 390px just by being inside a smaller artboard.

   In production the same rules will fire on real mobile devices
   because the body-level container will be narrower than 720px.
   ════════════════════════════════════════════════════════════════ */

/* TABLET — between 720 and 980 ish */
@media (max-width: 980px) {
  .mk-page {
    --gutter: 32px;
  }
  .mk-services {
    grid-template-columns: repeat(2, 1fr);
  }
  .mk-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

/* MOBILE — below 720px */
@media (max-width: 720px) {

  /* ── Layout primitives ── */
  .mk-page {
    --gutter: 24px;
    font-size: 15px;
  }
  .mk-container {
    padding: 0 24px;
    max-width: 100%;
  }
  .mk-section {
    padding: 56px 0;
  }
  .mk-section-head {
    margin-bottom: 32px;
    gap: 12px;
  }
  .mk-section-head h2 {
    font-size: 32px;
    line-height: 1.1;
  }
  .mk-section-head p {
    font-size: 15px;
  }

  /* ── Nav ── */
  .mk-nav {
    padding: 8px 20px;
  }
  .mk-nav-brand img {
    width: 64px;
    height: 64px;
  }
  .mk-nav-links,
  .mk-nav-cta {
    display: none !important;
  }
  .mk-nav-burger {
    display: flex;
  }

  /* ── Hero (page d'accueil) ── */
  .mk-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .mk-hero-text {
    padding: 56px 24px 48px;
  }
  .mk-hero h1 {
    font-size: 40px;
    margin: 16px 0 20px;
  }
  .mk-hero-lede {
    font-size: 15px;
    margin-bottom: 28px;
  }
  .mk-hero-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .mk-hero-img {
    min-height: 280px;
    order: -1; /* picture above text on mobile */
  }
  .mk-hero-text {
    order: 0;
  }

  /* ── Services grid (5 → 1) ── */
  .mk-services {
    grid-template-columns: 1fr;
  }
  .mk-service {
    min-height: auto;
    padding: 28px 24px;
  }
  .mk-service h3 {
    font-size: 22px;
  }

  /* ── Footer (4 → 1) ── */
  .mk-footer {
    padding: 56px 0 24px;
  }
  .mk-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 32px;
  }
  .mk-footer-brand img {
    width: 80px;
    height: 80px;
  }
  .mk-footer-tagline {
    font-size: 18px;
  }
  .mk-footer-legal {
    flex-direction: column;
    gap: 8px;
    text-align: left;
  }

  /* ── Buttons ── */
  .mk-btn {
    padding: 12px 20px;
    font-size: 12px;
  }

  /* ── Map block ── */
  .mk-map iframe {
    height: 240px;
  }

  /* ════════════════════════════════════════════════
     INLINE-STYLE OVERRIDES
     The pages have many inline `style={{}}` props that
     would otherwise win over the cascade. Attribute
     selectors with !important pry them open so the
     same component code adapts to a narrow artboard.
     ════════════════════════════════════════════════ */

  /* Any multi-column grid collapses to a single column. minmax(0,1fr) —
     not bare 1fr — because grid tracks resolve 1fr as minmax(auto,1fr),
     and the auto min-content can still push the column wider than the
     artboard (e.g. the blog newsletter input + button row). */
  .mk-page [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Sticky sidebars (CGU sommaire) stop being sticky and become a normal
     block when stacked. */
  .mk-page [style*="position:sticky"] {
    position: static !important;
  }

  /* Flex rows with space-between (section heads + CTA, etc.) wrap. */
  .mk-page [style*="justify-content:space-between"] {
    flex-wrap: wrap;
  }

  /* Inner chip / pill rows — the parent has space-between so we already wrap
     that, but the inner flex row holding 5–6 chips has its own
     `display:flex; gap:6` and stays one-line without help. Catch any flex
     row with a small gap so its chips wrap onto the next line. */
  .mk-page [style*="display:flex"][style*="gap:6px"],
  .mk-page [style*="display:flex"][style*="gap:8px"] {
    flex-wrap: wrap !important;
  }

  /* Form inputs in flex rows default to a content-derived min-width and
     can push their container wider than the artboard (newsletter form on
     the blog). Reset min-width so they shrink. */
  .mk-page input,
  .mk-page textarea {
    min-width: 0;
    max-width: 100%;
  }

  /* Large gaps */
  .mk-page [style*="gap:80px"]  { gap: 32px !important; }
  .mk-page [style*="gap:64px"]  { gap: 28px !important; }
  .mk-page [style*="gap:60px"]  { gap: 28px !important; }
  .mk-page [style*="gap:56px"]  { gap: 28px !important; }
  .mk-page [style*="gap:48px"]  { gap: 24px !important; }
  .mk-page [style*="gap:40px"]  { gap: 20px !important; }
  .mk-page [style*="gap:36px"]  { gap: 20px !important; }
  .mk-page [style*="gap:32px"]  { gap: 18px !important; }

  /* Large vertical paddings on hero / sections */
  .mk-page [style*="padding:120px 0 100px"] { padding: 56px 0 40px !important; }
  .mk-page [style*="padding:120px 0"]       { padding: 56px 0 !important; }
  .mk-page [style*="padding:110px 0"]       { padding: 56px 0 !important; }
  .mk-page [style*="padding:100px 0 80px"]  { padding: 56px 0 40px !important; }
  .mk-page [style*="padding:100px 0 60px"]  { padding: 56px 0 32px !important; }
  .mk-page [style*="padding:90px 0 60px"]   { padding: 56px 0 32px !important; }
  .mk-page [style*="padding:80px 0 100px"]  { padding: 40px 0 56px !important; }
  .mk-page [style*="padding:80px 0 120px"]  { padding: 40px 0 56px !important; }
  .mk-page [style*="padding:80px 0"]        { padding: 48px 0 !important; }
  .mk-page [style*="padding:60px 0 120px"]  { padding: 32px 0 64px !important; }
  .mk-page [style*="padding:40px 0 120px"]  { padding: 24px 0 64px !important; }
  .mk-page [style*="padding:20px 0 100px"]  { padding: 8px 0 56px !important; }
  .mk-page [style*="padding:100px 0 80px"]  { padding: 48px 0 40px !important; }

  /* Card / form internal padding */
  .mk-page [style*="padding:56px"][style*="background:var(--cream-50)"] { padding: 24px !important; }
  .mk-page [style*="padding:40px 36px"] { padding: 28px 24px !important; }
  .mk-page [style*="padding:'40px 36px'"] { padding: 28px 24px !important; }
  .mk-page [style*="padding:32px 36px"] { padding: 22px 22px !important; }
  .mk-page [style*="padding:24px 28px"] { padding: 18px 20px !important; }
  .mk-page [style*="padding:36px"][style*="height:100%"] { padding: 24px !important; }

  /* Large display headings */
  .mk-page [style*="font-size:76px"] { font-size: 38px !important; letter-spacing: -0.01em !important; }
  .mk-page [style*="font-size:60px"] { font-size: 32px !important; }
  .mk-page [style*="font-size:56px"] { font-size: 32px !important; }
  .mk-page [style*="font-size:52px"] { font-size: 30px !important; }
  .mk-page [style*="font-size:48px"] { font-size: 28px !important; }
  .mk-page [style*="font-size:44px"] { font-size: 26px !important; }
  .mk-page [style*="font-size:40px"] { font-size: 24px !important; }
  .mk-page [style*="font-size:36px"] { font-size: 22px !important; }
  .mk-page [style*="font-size:32px"] { font-size: 22px !important; }
  .mk-page [style*="font-size:30px"] { font-size: 20px !important; }
  .mk-page [style*="font-size:28px"] { font-size: 20px !important; }
  .mk-page [style*="font-size:26px"] { font-size: 19px !important; }

  /* Hero in pages other than home — h1 inline */
  .mk-page h1 { font-size: 36px; line-height: 1.05; }

  /* MKPageFrame URL bar — tighten */
  .mk-page > div:first-child {
    padding: 8px 14px;
  }
}


/* ───────── Production (WordPress) additions ───────── */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream-50); }
img { max-width: 100%; height: auto; }
a { color: inherit; }
.mk-photo { display: block; }
.mk-skip { position: absolute; left: -9999px; }

/* Mobile nav drawer (burger) */
.mk-mobile-menu { display: none; position: fixed; inset: 0; background: var(--cream-50); z-index: 60; padding: 20px 24px; flex-direction: column; }
.mk-mobile-menu.open { display: flex; }
.mk-mm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.mk-mm-head img { width: 64px; height: 64px; object-fit: contain; }
.mk-mobile-menu nav a { display: block; font-family: var(--f-display); font-size: 30px; color: var(--brown-900); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mk-mm-close { background: none; border: 1px solid var(--line); border-radius: 2px; width: 42px; height: 42px; font-size: 22px; line-height: 1; cursor: pointer; color: var(--brown-900); }
.mk-mobile-menu .mk-btn { margin-top: 24px; justify-content: center; }

/* Blog prose */
.mk-prose { color: var(--ink-soft); font-size: 17px; line-height: 1.8; }
.mk-prose > * { margin: 0 0 1.2em; }
.mk-prose h2 { font-family: var(--f-display); font-size: 34px; color: var(--brown-900); margin: 1.4em 0 .5em; line-height: 1.15; }
.mk-prose h3 { font-family: var(--f-display); font-size: 26px; color: var(--brown-900); margin: 1.2em 0 .4em; }
.mk-prose a { color: var(--brown-900); text-decoration: underline; text-decoration-color: var(--tan-400); }
.mk-prose ul, .mk-prose ol { margin: 0 0 1.2em 1.4em; }
.mk-prose blockquote { border-left: 3px solid var(--tan-400); padding-left: 20px; font-family: var(--f-display); font-style: italic; font-size: 22px; color: var(--brown-800); }

/* Contact form (CF7) styled to match design fields */
.wpcf7 .mk-field { display: flex; flex-direction: column; gap: 10px; }
.wpcf7 label { font-size: 11px; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea {
  width: 100%; padding: 14px 16px; background: var(--cream-50); border: 1px solid var(--line);
  color: var(--ink); font-family: var(--f-body); font-size: 15px; outline: none; }
.wpcf7 textarea { line-height: 1.6; resize: vertical; }
.wpcf7-response-output { border: 1px solid var(--line) !important; padding: 12px 16px !important; margin: 18px 0 0 !important; font-size: 14px; }
.wpcf7 .wpcf7-submit { cursor: pointer; }

/* Filter chips (galerie / blog) */
.mk-chip { padding: 10px 18px; font-size: 13px; font-family: var(--f-body); background: transparent; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; letter-spacing: .02em; transition: background .2s, color .2s, border-color .2s; }
.mk-chip:hover { border-color: var(--tan-400); }
.mk-chip-on { background: var(--brown-900); color: var(--cream-50); border-color: var(--brown-900); }
.mk-figcap-circle { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--brown-900); flex-shrink: 0; }

/* ───────── Menus éditables (wp_nav_menu : <ul><li><a>) ───────── */
.mk-nav-links { list-style: none; margin: 0; padding: 0; }
.mk-nav-links li { list-style: none; }
.mk-nav-links .current-menu-item > a,
.mk-nav-links .current_page_item > a,
.mk-nav-links .current-menu-parent > a,
.mk-nav-links .current_page_parent > a,
.mk-nav-links .current-menu-ancestor > a,
.mk-nav-links a.active { color: var(--brown-900); }
.mk-nav-links .current-menu-item > a::after,
.mk-nav-links .current_page_item > a::after,
.mk-nav-links .current-menu-parent > a::after,
.mk-nav-links .current_page_parent > a::after,
.mk-nav-links .current-menu-ancestor > a::after,
.mk-nav-links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--tan-500);
}
.mk-mobile-menu nav ul { list-style: none; margin: 0; padding: 0; }
.mk-footer ul { list-style: none; margin: 0; padding: 0; }
.mk-footer-legal .mk-legal-links { display: inline-flex; flex-wrap: wrap; justify-content: flex-start; gap: 2px 0; }
.mk-footer-legal .mk-legal-links a:not(:first-child) { margin-left: 14px; }
.mk-footer-legal .mk-legal-links a:not(:first-child)::before { content: "·"; margin-right: 14px; color: var(--muted); }

/* ───────── Consentement cookies (RGPD) + gate carte ───────── */
.mk-consent { position: fixed; left: 28px; bottom: 28px; z-index: 80; width: 620px; max-width: calc(100vw - 56px); background: var(--brown-900); color: var(--cream-100); box-shadow: 0 16px 56px rgba(44,31,20,.45); border: 1px solid rgba(216,185,140,0.18); border-radius: 6px; }
.mk-consent-in { padding: 24px 28px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.mk-consent-txt { flex: 1; min-width: 220px; font-size: 13px; line-height: 1.6; color: var(--cream-200); margin: 0; }
.mk-consent-txt a { color: var(--tan-300); }
.mk-consent-btns { display: flex; gap: 10px; justify-content: flex-end; flex-shrink: 0; }
/* Boutons sur fond sombre : le ghost (Refuser) en brun foncé serait invisible */
.mk-consent .mk-btn-primary { background: var(--tan-400); color: var(--brown-900); }
.mk-consent .mk-btn-primary:hover { background: var(--tan-300); }
.mk-consent .mk-btn-ghost { color: var(--cream-100); border-color: rgba(216,185,140,0.45); }
.mk-consent .mk-btn-ghost:hover { border-color: var(--tan-300); }
.mk-gate { background: var(--cream-100); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; text-align: center; padding: 28px; }
.mk-gate-inner { max-width: 340px; }
.mk-gate-txt { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 16px; }
.mk-gate-txt a { color: var(--brown-900); text-decoration: underline; text-decoration-color: var(--tan-400); }
@media (max-width: 720px) {
  .mk-consent { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
  .mk-consent-in { padding: 18px 20px; gap: 14px; }
  .mk-consent-btns .mk-btn { flex: 1; justify-content: center; }
}