/* ============================================================
   Marché Mamou — Webfonts (self-hosted woff2)
   Display  : Anton            — bold condensed caps (the MAMOU wordmark)
   Heading  : Archivo          — grotesk, 400–800
   Body     : Hanken Grotesk   — warm humanist sans
   Script   : Sacramento       — signature accent ("Marché")
   ============================================================ */

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Anton-400.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Archivo-400.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/Archivo-500.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Archivo-600.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Archivo-700.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/Archivo-800.woff2") format("woff2");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-400.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-600.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/HankenGrotesk-700.woff2") format("woff2");
}

@font-face {
  font-family: "Sacramento";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Sacramento-400.woff2") format("woff2");
}
/* ============================================================
   Marché Mamou — Color tokens
   Earthy West-African market palette: warm cream paper, espresso
   ink, terracotta clay, saffron ochre, palm green, chili spice.
   ============================================================ */

:root {
  /* ---- Warm neutral ramp (espresso → cream) ---- */
  --stone-950: #221913;  /* deepest espresso */
  --stone-900: #2b2018;  /* ink / primary text */
  --stone-800: #3a2c20;
  --stone-700: #4a382a;  /* cocoa */
  --stone-600: #6b5240;  /* bark */
  --stone-500: #8a7460;  /* taupe */
  --stone-400: #ac9683;  /* muted sand */
  --stone-300: #cbb79b;  /* wheat */
  --stone-200: #e3d3b6;  /* parchment */
  --stone-150: #ece0c9;
  --stone-100: #f3ebd9;  /* linen */
  --stone-50:  #f8f1e2;  /* paper */
  --stone-25:  #fcf8ef;  /* light card */
  --cream:     #fffcf5;  /* near-white warm */

  /* ---- Brand: Terracotta clay (primary) ---- */
  --clay-700: #8f3f23;
  --clay-600: #a54a2c;   /* hover / pressed */
  --clay-500: #bf5a38;   /* PRIMARY */
  --clay-400: #d07a55;
  --clay-300: #e3a687;
  --clay-200: #efcbb6;
  --clay-100: #f7e4d8;
  --clay-50:  #fbf1ea;

  /* ---- Saffron ochre (secondary / highlight) ---- */
  --ochre-700: #9c6a1d;
  --ochre-600: #bd8429;
  --ochre-500: #d89a3c;  /* SECONDARY */
  --ochre-400: #e4b063;
  --ochre-300: #efca93;
  --ochre-200: #f6e1c0;
  --ochre-100: #fbf1dc;

  /* ---- Palm green (success / nature) ---- */
  --palm-700: #3c5430;
  --palm-600: #4b6a3a;
  --palm-500: #5b7a42;   /* leaf */
  --palm-400: #7e9a63;
  --palm-300: #a8bd91;
  --palm-200: #d2dec3;
  --palm-100: #eaf0e1;

  /* ---- Chili spice (danger / energy) ---- */
  --spice-700: #8a2c1c;
  --spice-600: #9d3122;
  --spice-500: #b23a28;  /* chili red */
  --spice-400: #cb6553;
  --spice-300: #e09e90;
  --spice-200: #f1d2cb;
  --spice-100: #fae8e3;

  /* ---- Indigo teal (cool accent — headwrap blue) ---- */
  --teal-700: #1f4f4d;
  --teal-600: #2a615e;
  --teal-500: #2e6e6b;
  --teal-400: #4f8f8b;
  --teal-300: #8bbab7;
  --teal-200: #c5dedc;
  --teal-100: #e6f1f0;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Surfaces & backgrounds */
  --surface-page:      var(--stone-50);
  --surface-card:      var(--cream);
  --surface-raised:    #ffffff;
  --surface-sunken:    var(--stone-100);
  --surface-inverse:   var(--stone-900);
  --surface-tint:      var(--clay-50);

  /* Text */
  --text-strong:   var(--stone-900);
  --text-body:     var(--stone-800);
  --text-muted:    var(--stone-600);
  --text-subtle:   var(--stone-500);
  --text-on-clay:  var(--cream);
  --text-on-dark:  var(--stone-50);
  --text-link:     var(--clay-600);

  /* Borders & dividers */
  --border-subtle: var(--stone-200);
  --border-default:var(--stone-300);
  --border-strong: var(--stone-500);
  --border-tint:   var(--clay-200);

  /* Brand actions */
  --brand:           var(--clay-500);
  --brand-hover:     var(--clay-600);
  --brand-active:    var(--clay-700);
  --brand-soft:      var(--clay-100);
  --brand-on:        var(--cream);
  --accent:          var(--ochre-500);
  --accent-soft:     var(--ochre-100);

  /* Feedback */
  --success:      var(--palm-600);
  --success-soft: var(--palm-100);
  --warning:      var(--ochre-600);
  --warning-soft: var(--ochre-100);
  --danger:       var(--spice-500);
  --danger-soft:  var(--spice-100);
  --info:         var(--teal-500);
  --info-soft:    var(--teal-100);

  /* Focus ring */
  --ring: color-mix(in srgb, var(--clay-500) 45%, transparent);
}

/* ============================================================
   Marché Mamou — Typography tokens
   ============================================================ */

:root {
  /* Families */
  --font-display: "Anton", "Arial Narrow", sans-serif;          /* huge condensed caps */
  --font-heading: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-script:  "Sacramento", "Snell Roundhand", cursive;     /* signature accent */
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   800;

  /* Type scale (1.250 major-third-ish, tuned for retail) */
  --text-2xs: 0.6875rem;  /* 11px — micro labels */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-md:  1rem;       /* 16px — base */
  --text-lg:  1.125rem;   /* 18px */
  --text-xl:  1.375rem;   /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 3rem;       /* 48px */
  --text-5xl: 4rem;       /* 64px */
  --text-6xl: 5.5rem;     /* 88px — display */

  /* Line heights */
  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.45;
  --leading-relaxed:1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;   /* uppercase eyebrows */
  --tracking-display:0.01em;

  /* Semantic roles */
  --role-display:  var(--weight-regular) var(--text-6xl)/var(--leading-tight) var(--font-display);
  --role-h1:       var(--weight-black) var(--text-4xl)/var(--leading-snug) var(--font-heading);
  --role-h2:       var(--weight-bold) var(--text-3xl)/var(--leading-snug) var(--font-heading);
  --role-h3:       var(--weight-bold) var(--text-2xl)/var(--leading-snug) var(--font-heading);
  --role-h4:       var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-heading);
  --role-body:     var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-body);
  --role-small:    var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --role-eyebrow:  var(--weight-bold) var(--text-xs)/var(--leading-snug) var(--font-heading);
}

/* ============================================================
   Marché Mamou — Spacing, radii, shadows, motion
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 6rem;     /* 96 */

  /* Radii — soft, rounded but not pill-everything; market-stall warmth */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  26px;
  --radius-2xl: 36px;
  --radius-pill:999px;
  --radius-circle:50%;

  /* Border widths */
  --border-thin: 1px;
  --border-base: 1.5px;
  --border-thick:2.5px;

  /* Shadows — warm-tinted, soft. Built on espresso brown not pure black. */
  --shadow-xs:  0 1px 2px rgba(43, 32, 24, 0.06);
  --shadow-sm:  0 2px 6px rgba(43, 32, 24, 0.08);
  --shadow-md:  0 6px 18px rgba(43, 32, 24, 0.10);
  --shadow-lg:  0 16px 38px rgba(43, 32, 24, 0.14);
  --shadow-xl:  0 28px 64px rgba(43, 32, 24, 0.18);
  --shadow-inset: inset 0 1px 2px rgba(43, 32, 24, 0.10);
  /* Tinted brand glow for primary hover */
  --shadow-clay: 0 8px 22px rgba(191, 90, 56, 0.28);

  /* Layout */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1140px;
  --container-xl: 1320px;
  --gutter: var(--space-5);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);       /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);    /* @kind other */
  --dur-fast:  120ms;   /* @kind other */
  --dur-base:  200ms;   /* @kind other */
  --dur-slow:  340ms;   /* @kind other */
}


:root { --black: var(--stone-900); --gold: var(--ochre-500); --red: var(--clay-500); --red-dark: var(--clay-600); --ink: var(--stone-900); --muted: var(--stone-600); --line: var(--stone-200); --sand: var(--stone-200); --card: var(--surface-card); --cream: var(--stone-50); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--role-body); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; padding-bottom: 90px; }
h1, h2, h3, h4 { margin: 0; color: var(--text-strong); font-family: var(--font-heading); font-weight: 700; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
p { margin: 10px 0 0; }
a { color: var(--clay-600); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
[hidden] { display: none !important; }
.script { font-family: var(--font-script); font-weight: 400; line-height: 1; color: var(--clay-500); }
.display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.wrap { max-width: 900px; margin: 0 auto; padding: 8px 20px 50px; }

/* en-tête */
.announce { background: var(--stone-900); color: var(--stone-50); text-align: center; padding: 8px 16px; font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; letter-spacing: .04em; }
.topbar { position: sticky; top: 0; z-index: 40; background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); }
.topbar .container { display: flex; align-items: center; gap: 14px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; }
.brand img { width: 42px; height: 42px; }
.brand .wm { display: flex; flex-direction: column; line-height: 1; }
.brand .wm .script { font-size: 19px; margin-bottom: -3px; }
.brand .wm .display { font-size: 21px; color: var(--stone-900); }
.nav { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.nav a { padding: 8px 12px; border-radius: var(--radius-pill); font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; color: var(--text-body); }
.nav a:hover { background: var(--stone-100); text-decoration: none; }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lang { display: inline-flex; background: var(--stone-100); border-radius: var(--radius-pill); padding: 3px; }
.lang button { border: 0; background: transparent; color: var(--text-body); padding: 6px 12px; border-radius: var(--radius-pill); font-family: var(--font-heading); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.lang button.on { background: var(--stone-900); color: var(--stone-50); }
.cartbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-circle); border: 1.5px solid var(--border-subtle); background: var(--surface-card); color: var(--stone-900); }
.cartbtn:hover { background: var(--stone-100); text-decoration: none; }

/* contenu */
.crumb { font-size: 13px; color: var(--text-subtle); margin: 18px 0 10px; }
.crumb a { color: var(--text-subtle); }
h1 { font-size: 32px; }
h2 { font-size: 20px; margin-top: 30px; padding-bottom: 8px; border-bottom: 1px solid var(--border-subtle); }
.card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 22px; margin-top: 12px; box-shadow: var(--shadow-sm); }
.prod { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
@media (min-width: 680px) { .prod { grid-template-columns: 340px 1fr; } }
.prod img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 8%; background: var(--stone-100); border-radius: var(--radius-lg); mix-blend-mode: multiply; }
.price { font-family: var(--font-heading); font-size: 30px; font-weight: 800; color: var(--stone-900); margin: 10px 0 2px; }
.tax { font-size: 13px; color: var(--text-muted); }
ul.pf { margin: 14px 0 0 18px; padding: 0; } ul.pf li { margin: 5px 0; }
.deliv { font-size: 13.5px; color: var(--text-muted); margin-top: 14px; line-height: 1.5; }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: var(--radius-pill); background: var(--clay-600); color: var(--cream) !important; font-family: var(--font-heading); font-weight: 700; font-size: 15px; text-decoration: none !important; margin: 14px 8px 4px 0; border: 1.5px solid var(--clay-600); transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.cta:hover { background: var(--clay-600); box-shadow: var(--shadow-clay); }
.cta.sec { background: var(--stone-900); border-color: var(--stone-900); }
.cta.sec:hover { background: var(--stone-800); box-shadow: var(--shadow-sm); }
.cta.order { background: var(--clay-600); }
.rel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
@media (min-width: 680px) { .rel { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rel a { display: block; background: var(--surface-card); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 10px; text-decoration: none; color: var(--text-strong); font-size: 13px; text-align: center; box-shadow: var(--shadow-xs); }
.rel a:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.rel img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 8%; border-radius: var(--radius-md); background: var(--stone-100); mix-blend-mode: multiply; }
.rel b { display: block; margin-top: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 13px; line-height: 1.3; }
.rel span { display: block; color: var(--clay-600); font-weight: 800; margin-top: 4px; }
.list { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
@media (min-width: 680px) { .list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.list a { display: flex; gap: 12px; align-items: center; background: var(--surface-card); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 10px 12px; text-decoration: none; color: var(--text-strong); box-shadow: var(--shadow-xs); }
.list a:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.list img { width: 66px; height: 66px; object-fit: contain; padding: 6%; border-radius: var(--radius-md); background: var(--stone-100); flex: none; mix-blend-mode: multiply; }
.list b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 14px; }
.list span { color: var(--clay-600); font-weight: 800; }
article p, article li { font-size: 16px; line-height: 1.65; }
article ol, article ul { margin: 10px 0 0 22px; }

/* FAQ */
.selfco { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding: 14px 16px; background: var(--stone-900); color: var(--stone-50); border-radius: var(--radius-lg); text-decoration: none !important; }
.selfco .ic { flex: none; width: 40px; height: 40px; border-radius: var(--radius-circle); background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; }
.selfco b { display: block; font-family: var(--font-heading); font-size: 15px; color: var(--ochre-400); }
.selfco small { font-size: 13px; opacity: .92; line-height: 1.4; }
.sec { margin-top: 28px; }
.sec h2 { font-size: 13px; font-family: var(--font-heading); font-weight: 700; color: var(--clay-600); letter-spacing: .12em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle); margin-top: 0; }
details { background: var(--surface-card); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-lg); margin-top: 10px; box-shadow: var(--shadow-xs); overflow: hidden; }
summary { list-style: none; cursor: pointer; padding: 14px 48px 14px 16px; font-family: var(--font-heading); font-weight: 700; font-size: 15.5px; position: relative; line-height: 1.35; color: var(--text-strong); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--clay-100); color: var(--clay-700); display: flex; align-items: center; justify-content: center; font-weight: 800; }
details[open] summary::after { content: "–"; background: var(--stone-900); color: var(--stone-50); }
details[open] summary { border-bottom: 1px solid var(--border-subtle); }
.a { padding: 12px 16px 16px; font-size: 15px; color: var(--text-body); }
.a p + p { margin-top: 8px; } .a ul { margin: 6px 0 0 20px; } .a li { margin-top: 4px; } .a a { color: var(--clay-600); font-weight: 600; } .a b { color: var(--text-strong); }
.tag { display: inline-block; background: var(--ochre-100); color: var(--ochre-700); font-size: 12px; font-weight: 700; border-radius: var(--radius-pill); padding: 2px 9px; margin: 4px 4px 0 0; }
.faq-title { padding: 30px 0 6px; }
.faq-title h1 { font-size: 34px; }
.faq-title p { color: var(--text-muted); font-size: 16px; }

/* pied de page + barre panier */
footer.site { background: var(--stone-900); color: var(--stone-200); margin-top: 40px; }
footer.site .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding: 40px 0 24px; }
footer.site .wm .script { font-size: 26px; color: var(--clay-400); display: block; }
footer.site .wm .display { font-size: 34px; color: var(--cream); display: block; margin-top: -4px; }
footer.site p { font-size: 13.5px; line-height: 1.6; color: var(--stone-300); max-width: 320px; margin-top: 12px; }
footer.site h5 { margin: 0 0 12px; font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ochre-400); }
footer.site a { display: block; color: var(--stone-200); font-size: 14px; padding: 4px 0; }
footer.site a:hover { color: var(--cream); }
footer.site .base { border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0; font-size: 12.5px; color: var(--stone-400); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.mm-cart { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--stone-900); color: var(--cream); box-shadow: 0 -8px 24px rgba(43,32,24,.25); transform: translateY(110%); transition: transform .25s ease; padding: 0 16px; padding-bottom: env(safe-area-inset-bottom); }
.mm-cart.show { transform: translateY(0); }
.mm-cart .in { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 0; }
.mm-cart .info small { display: block; font-size: 11.5px; color: var(--ochre-400); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-heading); }
.mm-cart .info b { font-family: var(--font-heading); font-size: 17px; font-weight: 800; }
.mm-cart a.go { flex: none; background: var(--clay-600); color: var(--cream); text-decoration: none; font-family: var(--font-heading); font-weight: 700; border-radius: var(--radius-pill); padding: 12px 20px; font-size: 15px; }
#mmtoast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); background: var(--stone-900); color: #fff; padding: 10px 18px; border-radius: 20px; font-weight: 700; opacity: 0; transition: all .25s; z-index: 80; pointer-events: none; }
#mmtoast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 980px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .topbar .container { height: 60px; gap: 8px; }
  .brand img { width: 36px; height: 36px; } .brand .wm .script { font-size: 16px; } .brand .wm .display { font-size: 18px; }
  .announce { font-size: 11.5px; padding: 6px 12px; line-height: 1.35; }
  h1 { font-size: 26px; } .price { font-size: 26px; } .card { padding: 16px; border-radius: var(--radius-lg); }
  .faq-title h1 { font-size: 28px; }
  .cta { width: 100%; }
  input, select, textarea { font-size: 16px !important; }   /* évite le zoom automatique d'iOS au focus */
  footer.site .cols { grid-template-columns: 1fr; gap: 22px; padding: 30px 0 18px; }
}

/* ---------- menu mobile (20 sep 2026) : bouton ☰ + tiroir avec toutes les pages ---------- */
.burger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-circle); border: 1.5px solid var(--border-subtle); background: var(--surface-card); color: var(--stone-900); cursor: pointer; padding: 0; flex: none; }
.burger:hover { background: var(--stone-100); }
.mnav { position: fixed; inset: 0; z-index: 90; }
.mnav[hidden] { display: none !important; }
.mnav .mnav-bg { position: absolute; inset: 0; background: rgba(43,32,24,.55); backdrop-filter: blur(2px); }
.mnav .mnav-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); background: var(--surface-card); box-shadow: -12px 0 40px rgba(43,32,24,.3); display: flex; flex-direction: column; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; animation: mnav-in .22s ease-out; }
@keyframes mnav-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.mnav .mnav-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 8px; }
.mnav .mnav-head .wm { display: flex; flex-direction: column; line-height: 1; }
.mnav .mnav-head .script { font-size: 18px; margin-bottom: -3px; } .mnav .mnav-head .display { font-size: 20px; color: var(--stone-900); }
.mnav .mnav-x { width: 40px; height: 40px; border-radius: var(--radius-circle); border: 1.5px solid var(--border-subtle); background: var(--surface-card); font-size: 22px; line-height: 1; cursor: pointer; color: var(--stone-900); }
.mnav a.ml { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 6px; border-bottom: 1px solid var(--border-subtle); font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--text-strong); text-decoration: none !important; }
.mnav a.ml small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.mnav a.ml::after { content: "›"; color: var(--clay-500); font-size: 22px; font-weight: 400; }
.mnav a.ml.hi { color: var(--clay-600); }
.mnav .mnav-lang { display: flex; align-items: center; justify-content: space-between; padding: 14px 6px 4px; font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--text-muted); }
.mnav .mnav-lang .lang { display: inline-flex; }
.mnav .mnav-wa { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: var(--radius-pill); background: #25D366; color: #fff !important; font-family: var(--font-heading); font-weight: 700; font-size: 15px; text-decoration: none !important; }
.mnav .mnav-tel { display: block; text-align: center; margin-top: 10px; font-size: 13.5px; color: var(--text-muted); }
body.mnav-open { overflow: hidden; }
@media (max-width: 820px) {
  .nav, .topbar .lang { display: none; }
  .burger { display: inline-flex; }
}