/* ============================================================================
   MAISON CARNÉ — design system
   Maison de bouche : papier crème, noir profond, rouge sang de bœuf. Les
   photos étant sur fond ardoise, les blocs sombres reprennent cette valeur
   pour que l'image se fonde dans la page au lieu de flotter dessus.
   Typo : Bodoni Moda (titres) + Archivo (corps). Préfixe : .mc-
   ========================================================================== */

:root {
  --ink: #14100e;
  --ink-soft: #4d4640;
  --ink-faint: #8b8179;
  --paper: #f7f3ed;
  --paper-2: #efe8de;
  --paper-3: #e5dbcd;
  --white: #ffffff;
  --line: #ddd3c4;

  /* Ardoise : la valeur des fonds de photo, reprise sur les blocs sombres. */
  --ardoise: #1b1e20;
  --ardoise-2: #24282a;
  /* Rouge sang de bœuf, réservé aux promos et aux accents. */
  --rouge: #8f1d14;
  --rouge-soft: #f4e0dc;
  /* Bleu froid, uniquement pour le surgelé et la chaîne du froid. */
  --froid: #2a5c7a;
  --froid-soft: #dfeaf1;

  --shadow: 0 14px 40px -22px rgba(20, 16, 14, .45);
  --shadow-lg: 0 28px 60px -28px rgba(20, 16, 14, .55);

  --r: 3px;
  --r-lg: 8px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --wrap: 1220px;
  --header-h: 74px;

  --serif: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans: "Archivo", system-ui, -apple-system, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.6;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.02;
  letter-spacing: -.01em; margin: 0 0 .4em; }
h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-family: var(--sans); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em; margin: 0 0 1em; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.mc-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.mc-section { padding: clamp(56px, 8vw, 112px) 0; position: relative; }
.mc-center { text-align: center; }
.mc-muted { color: var(--ink-soft); }
.mc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

.mc-eyebrow { font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .24em; color: var(--ink-faint); margin: 0 0 1.2em; }
.mc-lead { font-size: clamp(1rem, 1.5vw, 1.14rem); color: var(--ink-soft); max-width: 56ch; }
.mc-center .mc-lead, .mc-lead.mc-center { margin-inline: auto; }

/* ── Boutons ──────────────────────────────────────────────────────────── */
.mc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  padding: 1.1em 2em; background: var(--ink); color: var(--paper);
  border: 1.5px solid var(--ink); border-radius: var(--r);
  transition: background .25s, color .25s, transform .25s var(--ease);
}
.mc-btn:hover { background: transparent; color: var(--ink); transform: translateY(-2px); }
.mc-btn[disabled], .mc-btn.is-busy { opacity: .45; pointer-events: none; }
.mc-btn--ghost { background: transparent; color: var(--ink); }
.mc-btn--ghost:hover { background: var(--ink); color: var(--paper); }
.mc-btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.mc-btn--paper:hover { background: transparent; color: var(--paper); border-color: var(--paper); }
.mc-btn--sm { padding: .75em 1.3em; font-size: .72rem; }
.mc-btn--block { display: flex; width: 100%; }

/* ── Puces ────────────────────────────────────────────────────────────── */
.mc-chip { display: inline-flex; align-items: center; gap: .4em; font-size: .66rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  padding: .45em .75em; border-radius: var(--r); background: var(--paper-2); color: var(--ink-soft); }
.mc-chip--ink { background: var(--ink); color: var(--paper); }
.mc-chip--rouge { background: var(--rouge); color: #fff; }
.mc-chip--line { background: transparent; border: 1px solid var(--line); }

/* ── Bandeau + header ─────────────────────────────────────────────────── */
.mc-announce { background: var(--ink); color: var(--paper); text-align: center;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .8em 16px; }
.mc-announce b { font-weight: 700; }

.mc-header { position: sticky; top: 0; z-index: 60; background: rgba(247, 243, 237, .92);
  backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.mc-header.is-stuck { border-color: var(--line); }
.mc-header__in { max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  height: var(--header-h); display: flex; align-items: center; gap: 20px; }

.mc-logo { font-family: var(--sans); font-weight: 700; font-size: .96rem;
  letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; flex: none; }

.mc-nav { display: flex; gap: 2px; margin-left: auto; }
.mc-nav a { font-size: .76rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; padding: .6em .85em; color: var(--ink-soft); transition: color .2s; }
.mc-nav a:hover, .mc-nav a[aria-current="page"] { color: var(--ink); }

.mc-tools { display: flex; align-items: center; gap: 4px; }
.mc-icon-btn { width: 40px; height: 40px; display: grid; place-items: center;
  position: relative; border-radius: var(--r); transition: background .2s; }
.mc-icon-btn:hover { background: var(--paper-2); }
.mc-icon-btn svg { width: 19px; height: 19px; }
.mc-count { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font-size: .62rem; font-weight: 700; display: grid; place-items: center; }
.mc-count[hidden] { display: none; }
.mc-burger { display: none; }

.mc-mobile { position: fixed; inset: 0; z-index: 90; background: var(--paper);
  padding: 24px; overflow-y: auto; transform: translateY(-100%);
  transition: transform .4s var(--ease); }
.mc-mobile.is-open { transform: none; }
.mc-mobile__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.mc-mobile a { display: block; font-family: var(--serif); font-size: 2rem;
  padding: .35em 0; border-bottom: 1px solid var(--line); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.mc-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 7vw, 96px); }
.mc-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 5vw, 64px); align-items: center; }
.mc-hero h1 { margin-bottom: .22em; }
.mc-hero h1 em { font-style: italic; }
.mc-hero__sub { font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--ink-soft); max-width: 44ch; }
.mc-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 2em 0 1.6em; }
.mc-hero__proof { font-size: .8rem; color: var(--ink-faint); text-transform: uppercase;
  letter-spacing: .1em; line-height: 1.9; }
.mc-hero__proof b { color: var(--ink); }

/* Grand motif décoratif à droite du hero. */
.mc-hero__art { position: relative; display: grid; place-items: center;
  aspect-ratio: 1 / 1.05; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.mc-hero__art svg { width: 62%; height: auto; color: var(--ink); }
.mc-hero__art::before { content: ""; position: absolute; inset: 14px;
  border: 1px solid var(--line); border-radius: var(--r); pointer-events: none; }
.mc-hero__tag { position: absolute; left: 24px; bottom: 22px; font-size: .66rem;
  text-transform: uppercase; letter-spacing: .18em; color: var(--ink-faint); }

/* ── Ticker ───────────────────────────────────────────────────────────── */
.mc-ticker { background: var(--ink); color: var(--paper); overflow: hidden;
  padding: .95em 0; font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; }
.mc-ticker__track { display: flex; width: max-content; animation: mc-scroll 38s linear infinite; }
.mc-ticker__track span { padding: 0 30px; white-space: nowrap; }
.mc-ticker__track span::after { content: "◆"; margin-left: 30px; opacity: .4; font-size: .8em; }
@keyframes mc-scroll { to { transform: translateX(-50%); } }

/* ── Univers ──────────────────────────────────────────────────────────── */
.mc-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: 48px; }
.mc-cat { background: var(--paper); padding: 34px 28px 28px; display: flex;
  flex-direction: column; gap: 14px; transition: background .3s; min-height: 240px; }
.mc-cat:hover { background: var(--white); }
.mc-cat__art { height: 92px; display: grid; place-items: center; }
.mc-cat__art svg { height: 100%; width: auto; color: var(--ink); transition: transform .45s var(--ease); }
.mc-cat:hover .mc-cat__art svg { transform: scale(1.09) rotate(-2deg); }
.mc-cat h3 { margin: 0; display: flex; align-items: baseline; gap: .4em; }
.mc-cat p { font-size: .84rem; color: var(--ink-soft); margin: 0; }
.mc-cat__n { font-family: var(--sans); font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; color: var(--ink-faint); }

/* ── Carte produit ────────────────────────────────────────────────────── */
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 24px; }

.mc-card { display: flex; flex-direction: column; height: 100%; }
.mc-card__media { position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); aspect-ratio: 1 / 1.16; display: grid; place-items: center;
  overflow: hidden; transition: border-color .25s, transform .35s var(--ease), box-shadow .3s; }
.mc-card:hover .mc-card__media { border-color: var(--ink); transform: translateY(-4px);
  box-shadow: var(--shadow); }
.mc-card__media svg { width: 58%; height: auto; color: var(--ink); transition: transform .45s var(--ease); }
.mc-card:hover .mc-card__media svg { transform: scale(1.07); }
.mc-card__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 5px; flex-wrap: wrap; }
.mc-card__size { position: absolute; right: 10px; bottom: 10px; font-size: .64rem;
  letter-spacing: .1em; color: var(--ink-faint); }
.mc-card__quick { position: absolute; left: 10px; right: 10px; bottom: 10px;
  opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .3s var(--ease); }
.mc-card:hover .mc-card__quick, .mc-card:focus-within .mc-card__quick { opacity: 1; transform: none; }
.mc-card:hover .mc-card__size { opacity: 0; }
@media (hover: none) { .mc-card__quick { opacity: 1; transform: none; } .mc-card__size { display: none; } }

.mc-card__body { padding: 14px 2px 0; display: flex; flex-direction: column; flex: 1; }
.mc-card__meta { font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--ink-faint); margin-bottom: .5em; }
.mc-card__name { font-family: var(--serif); font-size: 1.28rem; line-height: 1.1; margin: 0 0 .3em; }
.mc-card__short { font-size: .82rem; color: var(--ink-soft); margin: 0 0 .9em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mc-card__price { margin-top: auto; display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap;
  font-size: .95rem; }
.mc-card__price b { font-weight: 700; }
.mc-card__was { color: var(--ink-faint); text-decoration: line-through; font-size: .84rem; }
.mc-card__from { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }

.mc-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(224px, 250px);
  gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 24px 28px;
  max-width: calc(var(--wrap) + 48px); margin: 40px auto 0; scrollbar-width: thin; }
.mc-rail > * { scroll-snap-align: start; }
.mc-rail::-webkit-scrollbar { height: 6px; }
.mc-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

/* ── Bandes sombres ───────────────────────────────────────────────────── */
.mc-dark { background: var(--ink); color: var(--paper); }
.mc-dark h2, .mc-dark h3 { color: var(--paper); }
.mc-dark .mc-eyebrow { color: rgba(244, 241, 236, .55); }
.mc-dark .mc-lead, .mc-dark p { color: rgba(244, 241, 236, .8); }

/* ── Édito ────────────────────────────────────────────────────────────── */
.mc-edito { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 5vw, 72px);
  align-items: center; }
.mc-edito__art { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  aspect-ratio: 1 / 1.1; display: grid; place-items: center; padding: 8%; }
.mc-dark .mc-edito__art { background: rgba(244, 241, 236, .05); border-color: rgba(244, 241, 236, .18); }
.mc-edito__art svg { width: 100%; height: auto; color: var(--ink); }
.mc-dark .mc-edito__art svg { color: var(--paper); }
.mc-edito--flip .mc-edito__art { order: 2; }

/* ── Stats ────────────────────────────────────────────────────────────── */
.mc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(244,241,236,.18);
  border: 1px solid rgba(244, 241, 236, .18); }
.mc-stat { background: var(--ink); padding: 34px 22px; text-align: center; }
.mc-stat__n { font-family: var(--serif); font-size: clamp(2.2rem, 4.6vw, 3.4rem); display: block; line-height: 1; }
.mc-stat__l { font-size: .68rem; text-transform: uppercase; letter-spacing: .16em;
  opacity: .7; display: block; margin-top: .9em; }

/* ── Étapes ───────────────────────────────────────────────────────────── */
.mc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: 48px; }
.mc-step { background: var(--paper); padding: 34px 28px; }
.mc-step__n { font-family: var(--serif); font-size: 2.6rem; line-height: 1; display: block;
  margin-bottom: .3em; color: var(--ink-faint); }
.mc-step h3 { font-size: 1.24rem; margin-bottom: .35em; }
.mc-step p { font-size: .88rem; color: var(--ink-soft); margin: 0; }

/* ── Zones du corps ───────────────────────────────────────────────────── */
.mc-zones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.mc-zone { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  padding: .7em 1.2em; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--white); transition: all .2s; }
.mc-zone:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* ── Boutique ─────────────────────────────────────────────────────────── */
.mc-pagehead { border-bottom: 1px solid var(--line); padding: clamp(40px, 6vw, 76px) 0 clamp(32px, 4vw, 52px); }
.mc-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.mc-filter { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  padding: .65em 1.1em; border: 1px solid var(--line); border-radius: var(--r);
  background: transparent; color: var(--ink-soft); transition: all .2s; }
.mc-filter:hover { border-color: var(--ink); color: var(--ink); }
.mc-filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mc-shopbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 24px 0 26px; }
.mc-shopbar__right { margin-left: auto; display: flex; gap: 8px; }
.mc-search, .mc-select { border: 1px solid var(--line); background: var(--white);
  border-radius: var(--r); padding: .7em 1em; font-size: .82rem; }
.mc-search { min-width: 200px; }
.mc-search:focus, .mc-select:focus { outline: none; border-color: var(--ink); }
.mc-select { appearance: none; padding-right: 2.4em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a453e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8em center; background-size: 14px; }
.mc-count-line { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-faint); margin: 0; }
.mc-empty { text-align: center; padding: 80px 20px; color: var(--ink-soft); }

/* ── Fiche produit ────────────────────────────────────────────────────── */
.mc-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px);
  align-items: start; padding-top: 36px; }
/* `sticky` sert aussi de référentiel aux enfants en position absolue (le liseré
   ::before et l'étiquette de taille). Ne jamais redéclarer `position` plus bas
   dans ce bloc, ni la passer à `static` en responsive : les absolus se
   rattacheraient alors à la page entière. */
.mc-pdp__art { position: sticky; top: calc(var(--header-h) + 20px); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg); aspect-ratio: 1 / 1.1;
  display: grid; place-items: center; }
.mc-pdp__art svg { width: 56%; height: auto; color: var(--ink); }
.mc-pdp__art::before { content: ""; position: absolute; inset: 18px; border: 1px solid var(--line); }
.mc-pdp__scale { position: absolute; left: 26px; bottom: 24px; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.mc-crumbs { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-faint); margin-bottom: 1.6em; }
.mc-crumbs a:hover { color: var(--ink); }
.mc-pdp h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin-bottom: .2em; }
.mc-pdp__hook { font-size: 1.06rem; color: var(--ink-soft); }
.mc-pdp__price { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; margin: 1.3em 0 .3em; }
.mc-pdp__price b { font-family: var(--serif); font-size: 2.2rem; font-weight: 400; }
.mc-pdp__tax { font-size: .74rem; color: var(--ink-faint); margin-bottom: 1.8em; }

.mc-opt { margin-bottom: 1.6em; }
.mc-opt__label { display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--ink-faint); margin-bottom: .8em; }
.mc-opt__list { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-opt__btn { border: 1px solid var(--line); background: var(--white); border-radius: var(--r);
  padding: .75em 1.1em; font-size: .84rem; font-weight: 600; text-align: left; transition: all .2s; }
.mc-opt__btn small { display: block; font-weight: 400; color: var(--ink-faint); font-size: .78rem; }
.mc-opt__btn:hover { border-color: var(--ink); }
.mc-opt__btn[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.mc-opt__btn[aria-pressed="true"] small { color: rgba(244, 241, 236, .7); }

.mc-qty { display: inline-flex; align-items: center; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--white); }
.mc-qty button { width: 42px; height: 48px; font-size: 1.1rem; color: var(--ink-soft); }
.mc-qty button:hover { background: var(--paper-2); color: var(--ink); }
.mc-qty span { min-width: 34px; text-align: center; font-weight: 700; }
.mc-buy { display: flex; gap: 10px; margin-bottom: 1.8em; }
.mc-buy .mc-btn { flex: 1; }

.mc-reassure { display: grid; gap: 11px; padding: 22px; background: var(--paper-2);
  border-radius: var(--r); margin-bottom: 1.8em; font-size: .86rem; }
.mc-reassure div { display: flex; gap: 11px; align-items: flex-start; }
.mc-reassure svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

.mc-warn { font-size: .8rem; color: var(--ink-soft); background: var(--rouge-soft);
  border-left: 3px solid var(--rouge); padding: 14px 16px; border-radius: var(--r); margin-bottom: 1.8em; }

.mc-acc { border-top: 1px solid var(--line); }
.mc-acc__item { border-bottom: 1px solid var(--line); }
.mc-acc__head { width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 1.2em 0; font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; text-align: left; }
.mc-acc__head svg { width: 16px; height: 16px; flex: none; transition: transform .3s var(--ease); }
.mc-acc__head[aria-expanded="true"] svg { transform: rotate(45deg); }
.mc-acc__body { overflow: hidden; max-height: 0; transition: max-height .4s var(--ease); }
.mc-acc__body > div { padding: 0 0 1.5em; font-size: .92rem; color: var(--ink-soft); }
.mc-acc__body ul, .mc-acc__body ol { padding-left: 1.2em; margin: 0; }
.mc-acc__body li { margin-bottom: .45em; }
.mc-specs div { display: flex; justify-content: space-between; gap: 20px; padding: .6em 0;
  border-bottom: 1px dashed var(--line); font-size: .88rem; }
.mc-specs div:last-child { border: none; }
.mc-specs dt { color: var(--ink-faint); }
.mc-specs dd { margin: 0; text-align: right; }

/* ── Panier ───────────────────────────────────────────────────────────── */
.mc-cart { display: grid; grid-template-columns: 1.55fr .85fr; gap: clamp(24px, 4vw, 52px); align-items: start; }
.mc-line { display: grid; grid-template-columns: 86px 1fr auto; gap: 18px; padding: 22px 0;
  border-bottom: 1px solid var(--line); align-items: center; }
.mc-line__art { width: 86px; height: 96px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); display: grid; place-items: center; }
.mc-line__art svg { width: 62%; height: auto; color: var(--ink); }
.mc-line__name { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 .1em; }
.mc-line__var { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); margin: 0 0 .7em; }
.mc-line__rm { font-size: .74rem; text-decoration: underline; color: var(--ink-faint); }
.mc-line__rm:hover { color: var(--rouge); }
.mc-line__price { text-align: right; font-weight: 700; white-space: nowrap; }

.mc-summary { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 26px; position: sticky; top: calc(var(--header-h) + 20px); }
.mc-summary__row { display: flex; justify-content: space-between; gap: 16px; padding: .5em 0; font-size: .9rem; }
.mc-summary__row--total { border-top: 1px solid var(--line); margin-top: .7em; padding-top: 1em;
  font-size: 1.15rem; font-weight: 700; }

/* ── Tiroir ───────────────────────────────────────────────────────────── */
.mc-drawer { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.mc-drawer__veil { position: absolute; inset: 0; background: rgba(20, 20, 20, .45); opacity: 0; transition: opacity .3s; }
.mc-drawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 100%);
  background: var(--paper); display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .4s var(--ease); }
.mc-drawer.is-open { pointer-events: auto; }
.mc-drawer.is-open .mc-drawer__veil { opacity: 1; }
.mc-drawer.is-open .mc-drawer__panel { transform: none; }
.mc-drawer__head { display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid var(--line); }
.mc-drawer__head h3 { margin: 0; }
.mc-drawer__body { flex: 1; overflow-y: auto; padding: 0 24px; }
.mc-drawer__foot { padding: 22px 24px; border-top: 1px solid var(--line); background: var(--white); }
.mc-drawer .mc-line { grid-template-columns: 64px 1fr auto; padding: 16px 0; gap: 14px; }
.mc-drawer .mc-line__art { width: 64px; height: 72px; }

/* ── Toast ────────────────────────────────────────────────────────────── */
.mc-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 140%);
  background: var(--ink); color: var(--paper); padding: 1em 1.6em; border-radius: var(--r);
  font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  z-index: 120; transition: transform .35s var(--ease); max-width: calc(100% - 40px); text-align: center; }
.mc-toast.is-on { transform: translate(-50%, 0); }

/* ── Prose ────────────────────────────────────────────────────────────── */
.mc-prose { max-width: 70ch; }
.mc-prose h2 { margin-top: 1.6em; }
.mc-prose h3 { margin-top: 1.4em; font-size: 1.2rem; }
.mc-prose ul, .mc-prose ol { padding-left: 1.3em; }
.mc-prose li { margin-bottom: .45em; }
.mc-prose a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Newsletter ───────────────────────────────────────────────────────── */
.mc-news { text-align: center; padding: clamp(44px, 7vw, 84px) 24px; }
.mc-news__form { display: flex; gap: 8px; max-width: 440px; margin: 2em auto 0; flex-wrap: wrap; }
.mc-news__form input { flex: 1 1 220px; border: 1px solid rgba(244, 241, 236, .3);
  background: transparent; color: var(--paper); border-radius: var(--r); padding: 1em 1.2em; font-size: .9rem; }
.mc-news__form input::placeholder { color: rgba(244, 241, 236, .45); }
.mc-news__form input:focus { outline: none; border-color: var(--paper); }
.mc-news__ok { display: block; margin-top: 1.2em; font-size: .82rem; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.mc-footer { background: var(--ink); color: rgba(244, 241, 236, .7); padding: clamp(48px, 6vw, 80px) 0 28px; }
.mc-footer a { color: rgba(244, 241, 236, .7); }
.mc-footer a:hover { color: var(--paper); }
.mc-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.mc-footer h4 { color: var(--paper); }
.mc-footer ul { list-style: none; margin: 0; padding: 0; }
.mc-footer li { margin-bottom: .6em; font-size: .88rem; }
.mc-footer .mc-logo { color: var(--paper); display: block; margin-bottom: 1.2em; }
.mc-footer__about { font-size: .88rem; max-width: 32ch; }
.mc-footer__pay { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 1.5em; align-items: center; }
/* Logos monochromes : la couleur vient de currentColor, la pastille sert
   surtout à les détacher du fond sombre. */
.mc-pay { display: grid; place-items: center; height: 30px; padding: 0 9px;
  border: 1px solid rgba(244, 241, 236, .2); border-radius: var(--r);
  color: rgba(244, 241, 236, .78); transition: color .2s, border-color .2s; }
.mc-pay:hover { color: var(--paper); border-color: rgba(244, 241, 236, .45); }
.mc-pay svg { height: 15px; width: auto; fill: currentColor; }
.mc-footer__bottom { border-top: 1px solid rgba(244, 241, 236, .14); margin-top: 44px; padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: .76rem; opacity: .65; }

/* ── Révélation ───────────────────────────────────────────────────────── */
.mc-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s var(--ease); }
.mc-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mc-reveal { opacity: 1; transform: none; transition: none; }
  .mc-ticker__track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .mc-cats, .mc-steps { grid-template-columns: repeat(2, 1fr); }
  .mc-footer__grid { grid-template-columns: 1fr 1fr; }
  .mc-cart { grid-template-columns: 1fr; }
  .mc-summary { position: static; }
}
@media (max-width: 860px) {
  .mc-nav { display: none; }
  .mc-burger { display: grid; }
  .mc-tools { margin-left: auto; }
  .mc-hero__grid, .mc-edito, .mc-pdp { grid-template-columns: 1fr; }
  .mc-edito--flip .mc-edito__art { order: 0; }
  /* `relative` et non `static` : on annule le collage en haut de page tout en
     gardant le référentiel des enfants absolus. */
  .mc-pdp__art { position: relative; top: auto; }
  .mc-stats { grid-template-columns: repeat(2, 1fr); }
  .mc-hero__art { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 620px) {
  .mc-cats, .mc-steps { grid-template-columns: 1fr; }
  .mc-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .mc-card__short { display: none; }
  .mc-card__name { font-size: 1.06rem; }
  .mc-footer__grid { grid-template-columns: 1fr; }
  .mc-shopbar__right { margin-left: 0; width: 100%; }
  .mc-search { flex: 1; min-width: 0; }
  .mc-line { grid-template-columns: 70px 1fr; }
  .mc-line__price { grid-column: 2; text-align: left; }
}

/* ============================================================================
   MAISON CARNÉ — photos produit
   Le gabarit d'origine centrait un SVG dans un cadre clair. Ici le visuel est
   une photo qui doit remplir tout le cadre : on passe donc les conteneurs en
   fond ardoise et l'image en couverture.
   ========================================================================== */
.mc-card__media, .mc-pdp__art, .mc-line__art { background: var(--ardoise); }
.mc-card__media .mc-photo, .mc-pdp__art .mc-photo, .mc-line__art .mc-photo,
.mc-hero__art .mc-photo, .mc-edito__art .mc-photo, .mc-cat__art .mc-photo {
  width: 100%; height: 100%; object-fit: cover; }
.mc-card__media .mc-photo { transition: transform .55s var(--ease); }
.mc-card:hover .mc-card__media .mc-photo { transform: scale(1.05); }
/* Le liseré intérieur de la fiche produit passerait sous la photo : on le
   remonte au-dessus, il sert de cadre à l'image. */
.mc-pdp__art::before { z-index: 1; border-color: rgba(247, 243, 237, .18); }
.mc-pdp__art, .mc-card__media, .mc-line__art { overflow: hidden; }

/* Repli quand la fiche n'a pas encore de photo : l'initiale sur l'ardoise. */
.mc-photo--vide { width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--ardoise-2), var(--ardoise)); }
.mc-photo--vide span { font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 4.2rem);
  color: rgba(247, 243, 237, .22); line-height: 1; }

/* ── Logo sur deux lignes ─────────────────────────────────────────────── */
.mc-logo { display: inline-flex; flex-direction: column; line-height: .92;
  font-family: var(--serif); letter-spacing: .01em; }
.mc-logo__l1 { font-size: .82rem; text-transform: uppercase; letter-spacing: .3em;
  font-family: var(--sans); font-weight: 700; color: var(--ink-soft); }
.mc-logo__l2 { font-size: 1.62rem; }
.mc-dark .mc-logo__l1, .mc-footer .mc-logo__l1 { color: inherit; opacity: .7; }

/* ── Pastille chaîne du froid ─────────────────────────────────────────── */
.mc-chip--froid { background: var(--froid-soft); color: var(--froid); border-color: transparent; }

/* ── Étiquette de poids sur la carte : lisible sur photo sombre ───────── */
.mc-card__size { background: rgba(20, 16, 14, .62); color: var(--paper);
  border-color: transparent; backdrop-filter: blur(3px); }

/* ── Photos : conteneurs hérités du gabarit SVG ────────────────────────────
   `.mc-cat__art` était calibré pour un pictogramme de 92 px de haut ; une
   photo en `cover` y débordait. On lui donne un vrai format d'image, et le
   lien du hero doit remplir son cadre pour que `height:100%` ait un sens. */
.mc-cat__art { height: auto; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r); background: var(--ardoise);
  /* `center` héritait du pictogramme : l'image ne s'étirait pas et débordait. */
  place-items: stretch; }
.mc-cat__art .mc-photo { transition: transform .45s var(--ease); }
.mc-cat:hover .mc-cat__art .mc-photo { transform: scale(1.06); }
.mc-hero__art > a { display: block; width: 100%; height: 100%; }
.mc-hero__art { background: var(--ardoise); }
.mc-hero__art::before { z-index: 1; border-color: rgba(247, 243, 237, .2); }

/* ── Le calage définitif des visuels ───────────────────────────────────────
   Quand la hauteur d'un conteneur vient d'un `aspect-ratio`, un enfant en
   `height: 100 %` ne peut pas s'y référer (la résolution serait circulaire) et
   retombe sur sa hauteur intrinsèque, donc il déborde. La seule mise en page
   fiable ici est l'absolu dans un parent positionné. */
.mc-card__media, .mc-cat__art, .mc-hero__art { position: relative; }
.mc-card__media > .mc-photo,
.mc-cat__art > .mc-photo,
.mc-pdp__art > .mc-photo,
.mc-hero__art > a > .mc-photo,
.mc-edito__art > .mc-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-hero__art > a { position: absolute; inset: 0; display: block; }
/* Le tiroir et la ligne de panier gardent des dimensions fixes, pas de ratio :
   le flux normal y suffit. */
.mc-line__art > .mc-photo { width: 100%; height: 100%; object-fit: cover; }

/* ── Figures éditoriales (pages La maison, Conservation & cuisson) ─────────
   Les images de réassurance sortent légèrement de la colonne de texte pour
   respirer, et reviennent dans le flux sur mobile. */
.mc-figure { margin: 2.6em 0; }
.mc-figure img { width: 100%; height: auto; border-radius: var(--r-lg);
  background: var(--ardoise); display: block; }
.mc-figure figcaption { font-size: .82rem; color: var(--ink-faint); margin-top: .9em;
  line-height: 1.5; padding-left: 2px; }
.mc-prose .mc-figure--large { margin-top: .4em; }
@media (min-width: 1000px) {
  .mc-prose .mc-figure--large { width: calc(100% + 180px); margin-left: -90px; }
}