/*
 * Design system Monfiltre.
 * Traduction des tokens du bundle Claude Design en variables CSS : aucune
 * valeur hexadécimale ne doit être répétée dans les vues.
 */

:root {
  --mf-ink: #12161A;
  --mf-ink-soft: #495057;
  /* Assombri de #6C757D : il tombait à 4,3:1 sur le fond de page, sous le
     minimum de 4,5:1 pour un texte courant. */
  --mf-muted: #646C74;
  --mf-faint: #9AA2A9;
  --mf-accent: #2F6DF6;
  --mf-accent-dark: #1F4FC4;
  --mf-accent-light: #7EA6FF;
  --mf-accent-wash: #E8EFFE;
  --mf-accent-tint: #F4F7FE;
  --mf-surface: #FFFFFF;
  --mf-canvas: #F4F5F7;
  --mf-canvas-soft: #F8F9FA;
  --mf-line: #DDE1E6;
  --mf-line-strong: #C4CAD0;
  --mf-line-soft: #E4E7EA;
  --mf-line-dark: #2A3037;
  --mf-ink-elevated: #1A1F25;
  --mf-on-dark: #B4BCC4;
  --mf-on-dark-soft: #A8B0B8;
  --mf-wash: #EBEDF0;
  --mf-line-dim: #4A5560;
  /* Gris chaud des chapeaux sur fond sombre, et gris du fond de pastille. */
  --mf-on-dark-warm: #C4CBD2;
  --mf-ink-raised: #1D2530;

  /* Conduite du parcours de l'eau : grise à l'arrivée, bleue sur les étages,
     claire à la sortie. Horizontale sur bureau, verticale sur mobile. */
  --mf-rail-h: linear-gradient(90deg, #4A5560 0%, #2F6DF6 35%, #2F6DF6 78%, #7EA6FF 100%);

  --mf-sans: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mf-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --mf-shell: 1240px;
  --mf-gutter: 24px;

  /* Damier neutre qui tient lieu de visuel tant que les photos produit
     ne sont pas fournies. */
  --mf-placeholder: repeating-linear-gradient(135deg, #EBEDF0 0 8px, #F8F9FA 8px 16px);
  --mf-placeholder-lg: repeating-linear-gradient(135deg, #EBEDF0 0 10px, #F8F9FA 10px 20px);
}

/* --- Base ---------------------------------------------------------------- */

html, body { margin: 0; padding: 0; }

body.mc {
  background: var(--mf-canvas);
  color: var(--mf-ink);
  font-family: var(--mf-sans);
  -webkit-font-smoothing: antialiased;
}

.mc *, .mc *::before, .mc *::after { box-sizing: border-box; }

/* `:where()` neutralise la spécificité : les composants définis plus bas
   (boutons, pastilles, logo) reprennent la main sans avoir à sur-qualifier. */
.mc :where(a) { color: var(--mf-accent); text-decoration: none; }
.mc :where(a):hover { color: var(--mf-accent-dark); text-decoration: underline; }
.mc :where(button) { font-family: inherit; }
.mc :where(table) { border-collapse: collapse; }
.mc :where(img) { max-width: 100%; height: auto; }

.mf-shell {
  max-width: var(--mf-shell);
  margin: 0 auto;
  padding-left: var(--mf-gutter);
  padding-right: var(--mf-gutter);
}
.mf-shell--narrow { max-width: 1080px; }
.mf-shell--tight { max-width: 860px; }

.mf-mono {
  font-family: var(--mf-mono);
  font-variant-numeric: tabular-nums;
}

.mf-eyebrow {
  font-family: var(--mf-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mf-muted);
  margin: 0 0 11px;
  text-transform: uppercase;
}

.mf-skip-link {
  position: absolute;
  left: -9999px;
}
.mf-skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 200;
  background: var(--mf-ink);
  color: #fff;
  padding: 10px 16px;
}

.mc :focus-visible {
  outline: 2px solid var(--mf-accent);
  outline-offset: 2px;
}

/* --- Boutons ------------------------------------------------------------- */

.mf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  padding: 15px 26px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  text-align: center;
}
.mf-btn:hover { text-decoration: none; }
.mf-btn--primary { background: var(--mf-accent); color: #fff; }
.mf-btn--primary:hover { background: var(--mf-accent-dark); color: #fff; }
.mf-btn--outline { background: var(--mf-surface); color: var(--mf-ink); border-color: var(--mf-ink); }
.mf-btn--outline:hover { background: var(--mf-ink); color: #fff; }
.mf-btn--ghost-dark { background: transparent; color: #fff; border-color: #454B52; }
.mf-btn--ghost-dark:hover { border-color: #fff; color: #fff; }
.mf-btn--neutral { background: var(--mf-surface); color: var(--mf-ink); border-color: var(--mf-line); }
.mf-btn--neutral:hover { border-color: var(--mf-ink); color: var(--mf-ink); }
.mf-btn--dark { background: var(--mf-ink); color: #fff; }
.mf-btn--dark:hover { background: #000; color: #fff; }
.mf-btn--sm { padding: 10px 14px; font-size: 13px; }
.mf-btn--block { width: 100%; }
.mf-btn--quiet {
  background: none;
  border: 0;
  padding: 0;
  font-size: 13.5px;
  font-weight: 700;
  /* Le bleu foncé : le bleu d'accent ne fait que 4,1:1 sur le fond de page,
     trop peu pour un lien de 13,5 px. */
  color: var(--mf-accent-dark);
  cursor: pointer;
}

/* Pastilles de filtre : l'état actif est porté par une classe, pas par du style inline. */
.mf-pill {
  border: 1px solid var(--mf-line);
  background: var(--mf-surface);
  color: var(--mf-ink);
  padding: 7px 10px;
  font-family: var(--mf-mono);
  font-size: 12px;
  cursor: pointer;
  display: inline-block;
}
.mf-pill:hover { border-color: var(--mf-accent); color: var(--mf-accent); text-decoration: none; }
.mf-pill--wide {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  font-family: var(--mf-sans);
  font-size: 13px;
  font-weight: 600;
}
.mf-pill.is-active,
.mf-pill.is-active:hover {
  border-color: var(--mf-accent);
  background: var(--mf-accent-wash);
  color: var(--mf-accent-dark);
}
/* Une valeur que les filtres déjà posés rendent impossible : elle reste
   lisible, mais ne se clique plus et ne réagit plus au survol. */
.mf-pill.is-unavailable,
.mf-pill.is-unavailable:hover {
  border-color: #EAECEF;
  background: var(--mf-surface);
  color: var(--mf-muted);
  cursor: default;
}

/* --- Bandeau et en-tête -------------------------------------------------- */

.mf-topbar { background: var(--mf-ink); color: #fff; }
.mf-topbar__inner {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-top: 9px;
  padding-bottom: 9px;
  font-family: var(--mf-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  flex-wrap: wrap;
}
.mf-topbar__lead { color: var(--mf-accent-light); }
.mf-topbar span:not(.mf-topbar__lead) { opacity: 0.55; }
.mf-topbar__spacer { flex: 1; }
/* La mention de fabrication est le seul élément cliquable du bandeau : un
   filet la détache, et elle garde la pleine opacité pour se distinguer des
   mentions de service qui l'entourent. */
.mf-topbar__origin {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  color: #fff;
  border-left: 1px solid rgb(255 255 255 / 0.18);
  padding-left: 18px;
}
.mf-topbar__origin:hover { color: var(--mf-accent-light); text-decoration: none; }
.mf-topbar__origin .mf-flag { width: 15px; height: 10px; outline-color: rgb(255 255 255 / 0.28); }

.mf-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--mf-surface);
  border-bottom: 1px solid var(--mf-line);
}
.mf-header__inner {
  height: 66px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.mf-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--mf-ink);
}
.mf-logo:hover { color: var(--mf-ink); text-decoration: none; }
.mf-logo__lockup { width: 190px; height: 36px; display: block; }
.mf-logo__mark { display: none; width: 30px; height: 30px; object-fit: contain; }
.mf-logo__word { display: none; }
/* Le bloc complet mesure 190 px. En dessous de 1120 px, la ligne ne peut plus
   loger à la fois ce bloc, les cinq liens, le compte et le panier : on repasse
   à la goutte suivie du mot-marque composé, plus étroit de 50 px. */
@media (max-width: 1120px) {
  .mf-logo__lockup { display: none; }
  .mf-logo__mark { display: block; }
  .mf-logo__word { display: block; }
}
.mf-nav { display: flex; gap: 14px; white-space: nowrap; min-width: 0; overflow: hidden; }
.mf-nav a {
  padding: 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--mf-ink);
}
.mf-nav a:hover { color: var(--mf-accent); text-decoration: none; }
.mf-nav a.is-accent { color: var(--mf-accent); font-weight: 700; }
.mf-header__spacer { flex: 1; }
.mf-icon { width: 18px; height: 18px; flex: none; stroke-linecap: square; stroke-linejoin: miter; }
/* Accès au compte, à gauche du panier. Seule porte vers l'espace client :
   elle en porte donc le nom, et pas seulement une silhouette. */
.mf-account-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  flex: none;
  margin-right: 10px;
  border: 1px solid var(--mf-line);
  color: var(--mf-ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.mf-account-button:hover { color: var(--mf-ink); border-color: var(--mf-ink); text-decoration: none; }
.mf-cart-button {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--mf-ink);
  color: #fff;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}
.mf-cart-button:hover { color: #fff; text-decoration: none; }
.mf-cart-button__count {
  font-family: var(--mf-mono);
  background: var(--mf-accent);
  padding: 2px 7px;
  font-size: 12px;
}
/* Loupe de recherche, à gauche du compte : même gabarit bordé que lui, sans
   légende, la ligne de l'en-tête étant déjà comptée. */
.mf-search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  flex: none;
  margin-right: 10px;
  border: 1px solid var(--mf-line);
  background: var(--mf-surface);
  color: var(--mf-ink);
  cursor: pointer;
}
.mf-search-button:hover { border-color: var(--mf-ink); }

/* --- Blocs génériques ---------------------------------------------------- */

.mf-panel { border: 1px solid var(--mf-line); background: var(--mf-surface); }
.mf-panel--pad { padding: 28px; }
/* Panneau d'avertissement : résiliation anticipée, engagement non honoré. */
.mf-panel--warn { border-color: #B34A1F; background: #FDF3EF; }
.mf-panel--warn p { margin: 0 0 12px; line-height: 1.6; }
.mf-panel--warn p:last-child { margin-bottom: 0; }
.mf-panel--warn .mf-eyebrow { color: #8A3915; }
.mf-fineprint { font-size: 12.5px; color: var(--mf-muted); line-height: 1.55; }
.mf-page__actions { display: flex; align-items: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.mf-panel__section { padding: 16px; border-bottom: 1px solid var(--mf-line); }
.mf-panel__section:last-child { border-bottom: 0; }

.mf-band { background: var(--mf-surface); border-bottom: 1px solid var(--mf-line); }
.mf-band--dark { background: var(--mf-ink); color: #fff; border-bottom: 0; }

.mf-grid { display: grid; gap: 16px; }
.mf-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mf-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Grille « hairline » : les filets sont dessinés par le fond. */
.mf-rule-grid {
  display: grid;
  gap: 1px;
  background: var(--mf-line);
  border: 1px solid var(--mf-line);
}
.mf-rule-grid > * { background: var(--mf-surface); padding: 24px; }

.mf-media {
  position: relative;
  background: var(--mf-placeholder);
  border-bottom: 1px solid var(--mf-line);
}
.mf-media--square { aspect-ratio: 1 / 1; background-image: var(--mf-placeholder-lg); border: 1px solid var(--mf-line); }

/* Photo produit versée dans Solidus. Elle se pose au fond du cadre, sous les
   étiquettes et le bandeau de provenance, et se contente d'y tenir : un
   packshot recadré perd le produit qu'il montre, alors qu'un packshot avec de
   la marge reste juste. Le cadre n'a donc pas d'`overflow: hidden`, sans quoi
   il rognerait l'étiquette de provenance, qui déborde à gauche exprès. */
.mf-media__img {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 6px;
  object-fit: contain;
}
/* Dès qu'une photo est là, le damier n'a plus lieu d'être : il se lirait
   comme un défaut d'affichage derrière un packshot détouré. */
.mf-media.is-filled,
.mf-drawer-line__media.is-filled,
.mf-cart-line__media.is-filled { background: var(--mf-surface); background-image: none; }
.mf-media--card { aspect-ratio: 4 / 3; position: relative; }
.mf-media__note {
  font-family: var(--mf-mono);
  font-size: 11px;
  color: var(--mf-muted);
  background: var(--mf-surface);
  padding: 6px 10px;
  border: 1px solid var(--mf-line);
}

.mf-media--strip { height: 120px; }
/* Vignettes des lignes d'abonnement : `line` porte le bandeau de provenance,
   `thumb` est trop petite pour lui, `--thumb` sert aux listes denses. */
.mf-media--line {
  display: block;
  position: relative;
  width: 132px; height: 99px;
  flex: none;
  border: 1px solid var(--mf-line);
}
.mf-media--thumb {
  display: block;
  position: relative;
  width: 52px; height: 52px;
  flex: none;
  border: 1px solid var(--mf-line);
}
/* `tile` : la vignette carrée des lignes d'abonnement, assez grande pour
   porter le drapeau de provenance, trop petite pour son libellé. */
.mf-media--tile {
  display: block;
  position: relative;
  width: 92px; height: 92px;
  flex: none;
  border: 1px solid var(--mf-line);
}
.mf-panel__pad { padding: 22px; }
.mf-panel__pad h2 { font-size: 21px; margin: 0 0 10px; font-weight: 700; }
.mf-panel__pad p { font-size: 14px; line-height: 1.6; color: var(--mf-ink-soft); margin: 0 0 14px; }
.mf-panel__pad p:last-child { color: var(--mf-ink); font-size: 13.5px; margin-bottom: 0; }

.mf-tag {
  font-family: var(--mf-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  background: var(--mf-ink);
  color: #fff;
  padding: 4px 7px;
  display: inline-block;
}
.mf-tag--accent { background: var(--mf-accent); }
.mf-tag--muted { background: var(--mf-muted); }
.mf-tag--accent-soft { background: var(--mf-accent-wash); color: var(--mf-accent-dark); }
.mf-tag--muted-soft { background: var(--mf-wash); color: var(--mf-ink-soft); }
.mf-tag--tl { position: absolute; top: 9px; left: 9px; }
.mf-tag--tr { position: absolute; top: 9px; right: 9px; }

/* --- Carte référence ----------------------------------------------------- */

.mf-card {
  border: 1px solid var(--mf-line);
  background: var(--mf-surface);
  display: flex;
  flex-direction: column;
}
.mf-card__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.mf-card__ref { font-family: var(--mf-mono); font-size: 11px; color: var(--mf-muted); margin: 0; }
.mf-card__name { font-size: 14.5px; font-weight: 700; margin: 0; line-height: 1.3; }
.mf-card__name a { color: var(--mf-ink); }
.mf-card__spec { font-size: 12.5px; color: var(--mf-muted); margin: 0; }
.mf-card__blurb { font-size: 12.5px; font-style: italic; color: var(--mf-ink-soft); line-height: 1.45; margin: 6px 0 0; }
.mf-card__rating { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; color: var(--mf-muted); }
.mf-card__rating .mf-stars { font-size: 13px; }
.mf-card__rating a { color: var(--mf-muted); }
.mf-card__rating a:hover { color: var(--mf-accent-dark); }
.mf-card__spacer { flex: 1; }
.mf-card__price { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.mf-card__price strong { font-family: var(--mf-mono); font-size: 19px; font-weight: 600; }
.mf-card__price span { font-size: 12px; color: var(--mf-muted); }
.mf-card__sub { font-family: var(--mf-mono); font-size: 11.5px; margin: 0; color: var(--mf-accent-dark); }
.mf-card__sub--muted { color: var(--mf-muted); }
/* Carte produit : plusieurs références derrière, le prix est un prix de départ. */
.mf-card__from { font-size: 12px; color: var(--mf-muted); }
.mf-card__price .mf-card__from { margin-right: -2px; }
.mf-card__actions { display: flex; gap: 7px; margin-top: 9px; }
.mf-card__actions form { flex: 1; display: flex; }
.mf-card__actions .mf-btn { flex: 1; }

/* --- Étiquette « pays de fabrication » ----------------------------------- */
/* Une vignette blanche légèrement de travers, en débord du visuel : elle se
   lit comme une étiquette collée sur le carton, pas comme une mention
   d'interface. Quatre tailles, une par contexte du design. Le drapeau est
   dessiné en trois bandes plutôt qu'en emoji, dont le rendu change d'un
   système à l'autre et qui bave à cette taille. */

.mf-origin {
  position: absolute;
  margin: 0;
  display: flex;
  align-items: center;
  transform: rotate(-3.5deg);
  background: var(--mf-surface);
  border: 1px solid var(--mf-line-strong);
  color: var(--mf-ink);
  font-family: var(--mf-mono);
  white-space: nowrap;
}
.mf-origin--card {
  bottom: 12px;
  left: -7px;
  gap: 8px;
  padding: 6px 13px 6px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  box-shadow: 0 3px 12px rgb(18 22 26 / 0.16);
}
/* Réduite à son drapeau, pour les vignettes de quelques dizaines de pixels :
   le libellé y déborderait, le drapeau se lit d'un coup d'œil. */
.mf-origin--flag {
  bottom: 4px;
  left: -4px;
  padding: 3px;
  box-shadow: 0 2px 7px rgb(18 22 26 / 0.16);
}
.mf-origin--flag .mf-flag { width: 15px; height: 10px; }

/* Version resserrée : même étiquette, calibrée pour une vignette de ligne. */
.mf-origin--tight {
  bottom: 8px;
  left: -6px;
  gap: 6px;
  padding: 4px 9px 4px 7px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  box-shadow: 0 2px 9px rgb(18 22 26 / 0.14);
}
.mf-origin--tight .mf-flag { width: 14px; height: 10px; }

.mf-origin--hero {
  top: 24px;
  left: -9px;
  gap: 12px;
  padding: 10px 20px 10px 15px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  box-shadow: 0 4px 18px rgb(18 22 26 / 0.18);
}

.mf-flag { display: flex; flex: none; outline: 1px solid rgb(18 22 26 / 0.16); }
.mf-flag i { display: block; flex: 1; }
.mf-origin--card .mf-flag { width: 19px; height: 13px; }
.mf-origin--hero .mf-flag { width: 27px; height: 18px; }

/* Un jeu de bandes par pays du catalogue (cf. Catalog::ORIGINS). */
.mf-flag--fr i:nth-child(1) { background: #002654; }
.mf-flag--fr i:nth-child(2) { background: #FFFFFF; }
.mf-flag--fr i:nth-child(3) { background: #CE1126; }
.mf-flag--it i:nth-child(1) { background: #008C45; }
.mf-flag--it i:nth-child(2) { background: #FFFFFF; }
.mf-flag--it i:nth-child(3) { background: #CD212A; }

/* --- Accueil ------------------------------------------------------------- */

.mf-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  /* padding vertical uniquement : le raccourci `padding: 44px 0` écraserait
     les gouttières latérales posées par .mf-shell sur le même élément. */
  padding-top: 44px;
  padding-bottom: 40px;
}
.mf-hero h1 {
  font-size: 52px;
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-weight: 800;
  margin: 0 0 16px;
  text-wrap: pretty;
}
/* Le H1 porte la description du site, plus longue qu'un slogan : il descend
   d'un cran pour tenir en trois lignes, et le slogan prend l'accroche. */
.mf-hero h1.mf-hero__title { font-size: 42px; line-height: 1.08; margin-bottom: 12px; }
.mf-hero__slogan { font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; color: var(--mf-ink); margin: 0 0 10px; }
.mf-hero__lead { font-size: 17px; line-height: 1.55; color: var(--mf-ink-soft); margin: 0 0 24px; max-width: 50ch; }
.mf-hero__kicker {
  display: inline-block;
  font-family: var(--mf-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  background: var(--mf-accent-wash);
  color: var(--mf-accent-dark);
  padding: 6px 10px;
  margin: 0 0 18px;
}
.mf-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.mf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--mf-line); border: 1px solid var(--mf-line); }
/* Le relevé d'origines n'a que trois colonnes : sans ce modificateur, la
   quatrième case de .mf-stats resterait vide et se lirait comme un oubli. */
.mf-stats--3 { grid-template-columns: repeat(3, 1fr); }
.mf-stats > div { background: var(--mf-surface); padding: 14px; }
.mf-stats dt { font-family: var(--mf-mono); font-size: 19px; margin: 0 0 3px; color: var(--mf-accent); font-weight: 600; }
.mf-stats dd { font-size: 11.5px; color: var(--mf-muted); margin: 0; letter-spacing: 0.04em; }
/* Quatrième case : elle mène aux ateliers, donc elle se comporte en lien
   pleine surface plutôt qu'en chiffre décoratif. */
.mf-stats > div.mf-stats__link { position: relative; }
.mf-stats > div.mf-stats__link:hover { background: var(--mf-canvas-soft); }
.mf-stats__link a { color: inherit; }
.mf-stats__link a:hover { text-decoration: none; }
.mf-stats__link a::after { content: ""; position: absolute; inset: 0; }
.mf-stats__link dt { height: 25px; display: flex; align-items: center; margin-bottom: 6px; }
.mf-stats__link .mf-flag { width: 26px; height: 18px; }
.mf-stats__link .mf-flagpair { gap: 5px; }
.mf-stats__more { color: var(--mf-accent-dark); font-weight: 600; margin-top: 4px; letter-spacing: 0; }
.mf-hero__visual {
  border: 1px solid var(--mf-line);
  background: var(--mf-placeholder-lg);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  position: relative;
}
.mf-hero__visual .mf-media--strip { height: 120px; }
/* Le visuel garni : la photo occupe tout le cadre carré, l'étiquette
   d'abonnement se pose par-dessus. Le damier n'a plus lieu d'être. */
.mf-hero__visual.is-filled { background: var(--mf-surface); }
.mf-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mf-panel__pad { padding: 22px; }
.mf-panel__pad h2 { font-size: 21px; margin: 0 0 10px; font-weight: 700; }
.mf-panel__pad p { font-size: 14px; line-height: 1.6; color: var(--mf-ink-soft); margin: 0 0 14px; }
.mf-panel__pad p:last-child { color: var(--mf-ink); font-size: 13.5px; margin-bottom: 0; }

/* L'étiquette du visuel de l'accueil, calée dans son coin. La règle est
   nommément portée par le hero : écrite sur `.mf-tag` nu, elle collait un
   `right: 16px` à toutes les étiquettes du site, et celle du coin haut-gauche
   d'une carte, qui a déjà son `left`, s'étirait alors sur toute la largeur du
   visuel jusqu'à en masquer le haut. */
.mf-hero__visual .mf-tag { position: absolute; top: 16px; right: 16px; font-size: 11px; padding: 7px 10px; }

.mf-route {
  text-align: left;
  border: 1px solid var(--mf-line);
  background: var(--mf-surface);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--mf-ink);
}
.mf-route:hover { border-color: var(--mf-accent); text-decoration: none; color: var(--mf-ink); }
.mf-route--accent { border-color: var(--mf-accent); background: var(--mf-accent-tint); }
.mf-route--accent:hover { background: #EAF0FE; }
.mf-route__eyebrow { display: block; font-family: var(--mf-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--mf-muted); margin-bottom: 8px; }
.mf-route--accent .mf-route__eyebrow { color: var(--mf-accent-dark); }
.mf-route__title { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.018em; margin-bottom: 6px; }
.mf-route__note { display: block; font-size: 13.5px; color: var(--mf-muted); line-height: 1.5; }
.mf-route__arrow { font-size: 20px; color: var(--mf-accent); }

.mf-need {
  border: 1px solid var(--mf-line);
  background: var(--mf-surface);
  display: flex;
  flex-direction: column;
  color: var(--mf-ink);
}
.mf-need:hover { border-color: var(--mf-accent); text-decoration: none; color: var(--mf-ink); }
.mf-need__media { display: block; height: 112px; overflow: hidden; background: var(--mf-placeholder); border-bottom: 1px solid var(--mf-line); }
.mf-need__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.mf-need__body { padding: 16px 18px 18px; }
.mf-need__name { display: block; font-size: 19px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.015em; }
.mf-need__tagline { display: block; font-size: 13.5px; color: var(--mf-muted); line-height: 1.5; margin-bottom: 12px; min-height: 40px; }
.mf-need__meta { display: block; font-family: var(--mf-mono); font-size: 12.5px; color: var(--mf-accent); font-weight: 600; }

.mf-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.mf-section-head h2 { font-size: 26px; letter-spacing: -0.02em; margin: 0; font-weight: 700; }
.mf-section-head--quiet h2 {
  font-size: 15px;
  font-family: var(--mf-mono);
  letter-spacing: 0.12em;
  color: var(--mf-muted);
  font-weight: 500;
}

.mf-subscribe-band {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 52px;
  align-items: center;
  padding-top: 52px;
  padding-bottom: 52px;
}
.mf-subscribe-band h2 { font-size: 36px; line-height: 1.08; letter-spacing: -0.022em; margin: 0 0 16px; font-weight: 800; text-wrap: pretty; }
.mf-subscribe-band p { font-size: 16px; line-height: 1.6; color: var(--mf-on-dark); margin: 0 0 24px; max-width: 46ch; }
.mf-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--mf-line-dark); border: 1px solid var(--mf-line-dark); }
.mf-steps > div { background: var(--mf-ink-elevated); padding: 22px 20px; }
.mf-steps > div.is-accent { background: var(--mf-accent); }
.mf-steps dt { font-family: var(--mf-mono); font-size: 11px; margin: 0 0 10px; letter-spacing: 0.08em; color: var(--mf-accent-light); }
/* Blanc plein : à 70 % d'opacité, le blanc tombait sous 4,5:1 sur le bleu. */
.mf-steps > div.is-accent dt { color: #fff; }
.mf-steps dd { font-size: 14.5px; line-height: 1.5; margin: 0; color: #fff; }

/* Engagement de fabrication européenne, sur l'accueil : le texte à gauche, les
   quatre chiffres à droite en damier de filets. Les colonnes sont en flex avec
   des bases inégales, comme la maquette : le texte respire, le damier reste
   compact, et les deux se replient seuls sous 1080 px. */
.mf-pledge {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
  padding-top: 52px;
  padding-bottom: 52px;
}
.mf-pledge > div:first-child { flex: 1 1 440px; min-width: 0; }
.mf-pledge > .mf-facts { flex: 1 1 340px; min-width: 0; }
.mf-pledge h2 {
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.024em;
  font-weight: 800;
  margin: 0 0 16px;
  text-wrap: pretty;
}
.mf-pledge__lead { font-size: 16px; line-height: 1.6; color: var(--mf-ink-soft); margin: 0 0 24px; max-width: 54ch; }

/* Pastille de rappel : les deux drapeaux du catalogue, puis la mention. */
.mf-pledge__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mf-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  background: var(--mf-accent-tint);
  color: var(--mf-accent-dark);
  padding: 7px 11px;
  margin: 0 0 18px;
}
.mf-flagpair { display: flex; gap: 3px; }
.mf-flagpair .mf-flag, .mf-pledge__chip .mf-flag { width: 15px; height: 10px; }

/* Le bouton sombre vire à l'accent au survol : c'est le geste de la maquette,
   qui distingue cette action des boutons noirs neutres du reste du site. */
.mf-btn--dark:hover { background: var(--mf-accent); }

/* --- Les quatre chiffres de la fabrication ------------------------------- */
/* Deux par deux, en damier de filets. Même composant sur fond clair et sombre. */

.mf-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--mf-line);
  border: 1px solid var(--mf-line);
  margin: 0;
}
.mf-facts > div { background: var(--mf-canvas-soft); padding: 22px 20px; }
.mf-facts dt {
  font-family: var(--mf-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--mf-accent-dark);
  margin: 0 0 5px;
  white-space: nowrap;
}
.mf-facts dd { font-size: 12.5px; line-height: 1.5; color: var(--mf-ink-soft); margin: 0; }

.mf-facts--dark { background: var(--mf-line-dark); border-color: var(--mf-line-dark); }
.mf-facts--dark > div { background: var(--mf-ink); }
.mf-facts--dark dt { color: var(--mf-accent-light); font-size: 30px; }
.mf-facts--dark dd { color: var(--mf-on-dark-soft); }

/* --- Page fabrication ---------------------------------------------------- */

.mf-manuf-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
  padding-top: 52px;
  padding-bottom: 48px;
}
.mf-manuf-hero h1 {
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: -0.028em;
  font-weight: 800;
  margin: 0 0 18px;
  text-wrap: pretty;
}
.mf-manuf-hero__lead { font-size: 17px; line-height: 1.6; color: var(--mf-on-dark-warm); margin: 0 0 26px; max-width: 56ch; }
.mf-manuf-hero__lead strong { color: #fff; }
.mf-manuf-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mf-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  background: var(--mf-ink-raised);
  color: var(--mf-accent-light);
  padding: 7px 11px;
  margin: 0 0 20px;
}
/* Sur fond sombre, le filet noir des drapeaux disparaît : il faut l'éclaircir
   pour que le blanc du drapeau français ne bave pas dans le fond. */
.mf-manuf-hero__chip .mf-flag { outline-color: rgb(255 255 255 / 0.28); }

/* Titres et chapeaux communs aux sections de la page. */
.mf-manuf-title { font-size: 32px; font-weight: 800; letter-spacing: -0.022em; margin: 0 0 8px; }
.mf-manuf-rubric {
  font-family: var(--mf-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--mf-muted);
  margin: 0 0 22px;
}
.mf-manuf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.mf-manuf-head h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.022em; margin: 0; }
.mf-manuf-head__aside { font-family: var(--mf-mono); font-size: 11.5px; color: var(--mf-muted); margin: 0; }
.mf-manuf-head__lead { font-size: 15.5px; line-height: 1.55; color: var(--mf-ink-soft); margin: 0 0 26px; max-width: 74ch; }

/* Le face-à-face : à gauche ce que fait le marché, à droite ce que nous
   faisons. Le filet noir de la colonne de droite désigne la réponse sans
   avoir à l'écrire. */
.mf-versus-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.mf-versus { border: 1px solid var(--mf-line); background: var(--mf-canvas-soft); }
.mf-versus--ours { border: 2px solid var(--mf-ink); background: var(--mf-surface); }
.mf-versus__head { padding: 18px 22px; border-bottom: 1px solid var(--mf-line); }
.mf-versus__title { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; margin: 6px 0 0; color: var(--mf-ink-soft); }
.mf-versus--ours .mf-versus__title { color: var(--mf-ink); }
.mf-versus__list { list-style: none; margin: 0; padding: 0; }
.mf-versus__list li {
  position: relative;
  padding: 15px 22px 15px 46px;
  border-bottom: 1px solid var(--mf-line-soft);
  font-size: 14px;
  line-height: 1.55;
  color: var(--mf-ink-soft);
}
.mf-versus__list li:last-child { border-bottom: 0; }
.mf-versus__list li::before {
  content: "✕";
  position: absolute;
  left: 22px;
  font-family: var(--mf-mono);
  font-size: 14px;
  color: var(--mf-faint);
}
.mf-versus--ours .mf-versus__list li { color: var(--mf-ink); }
.mf-versus--ours .mf-versus__list li::before { content: "✓"; color: var(--mf-accent); }

/* Le tableau de preuve : il défile seul en largeur plutôt que de pousser la
   page, et son en-tête tient pendant le défilement vertical. */
.mf-manuf-table { overflow-x: auto; border: 1px solid var(--mf-line); background: var(--mf-surface); }
.mf-manuf-table table { border-collapse: collapse; width: 100%; min-width: 900px; }
.mf-manuf-table th, .mf-manuf-table td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--mf-line-soft);
  font-size: 14px;
  font-weight: 400;
  color: var(--mf-ink-soft);
  vertical-align: middle;
}
.mf-manuf-table thead th {
  font-family: var(--mf-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--mf-muted);
  background: var(--mf-canvas-soft);
  border-bottom: 1px solid var(--mf-line);
  position: sticky;
  top: 0;
}
.mf-manuf-table tbody tr:last-child th, .mf-manuf-table tbody tr:last-child td { border-bottom: 0; }
.mf-manuf-table tbody tr:hover { background: var(--mf-accent-tint); }
.mf-manuf-table tbody th { font-weight: 600; color: var(--mf-ink); }
.mf-manuf-table tbody th a { color: inherit; }
.mf-manuf-table__sku { font-family: var(--mf-mono); font-size: 12.5px; color: var(--mf-muted); white-space: nowrap; }
.mf-manuf-table__km { text-align: right; font-family: var(--mf-mono); font-size: 12.5px; white-space: nowrap; }
.mf-manuf-table__country { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mf-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--mf-ink); }
.mf-manuf-table__country .mf-flag { width: 18px; height: 12px; }
.mf-tagcell {
  display: inline-block;
  font-family: var(--mf-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  background: var(--mf-canvas);
  color: var(--mf-ink-soft);
  padding: 4px 8px;
  white-space: nowrap;
}

/* Fiche atelier : la photo porte l'étiquette de pays, comme une carte produit. */
.mf-atelier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mf-atelier { border: 1px solid var(--mf-line); background: var(--mf-surface); display: flex; flex-direction: column; }
.mf-atelier__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--mf-placeholder-lg);
  border-bottom: 1px solid var(--mf-line);
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.mf-atelier__media .mf-origin--card { bottom: auto; top: 16px; left: -8px; }
.mf-atelier__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.mf-atelier__body h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.018em; margin: 0 0 6px; }
.mf-atelier__meta { font-family: var(--mf-mono); font-size: 11.5px; color: var(--mf-muted); margin: 0 0 14px; }
.mf-atelier__text { font-size: 14.5px; line-height: 1.6; color: var(--mf-ink-soft); margin: 0 0 16px; }
.mf-atelier__foot { border-top: 1px solid var(--mf-line-soft); padding-top: 14px; margin-top: auto; }
.mf-atelier__foot .mf-eyebrow { font-size: 10.5px; margin-bottom: 9px; }
.mf-atelier__makes { font-size: 14px; line-height: 1.55; font-weight: 600; margin: 0; text-wrap: pretty; }

.mf-why__title { font-size: 19px; font-weight: 700; letter-spacing: -0.018em; line-height: 1.25; margin: 0 0 10px; }
.mf-why__body { font-size: 14px; line-height: 1.6; color: var(--mf-ink-soft); margin: 0; }

.mf-manuf-vow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 48px;
}
.mf-manuf-vow h2 { font-size: 30px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 800; margin: 0 0 12px; text-wrap: pretty; }
.mf-manuf-vow p { font-size: 15.5px; line-height: 1.6; color: var(--mf-on-dark-warm); margin: 0; max-width: 68ch; }
.mf-manuf-vow .mf-btn { padding: 16px 30px; font-size: 15.5px; white-space: nowrap; }

.mf-band--soft { background: var(--mf-canvas); border-bottom: 1px solid var(--mf-line); }

/* Lien mis en avant dans le pied de page : la promesse de fabrication est un
   argument de vente, pas une page de service parmi d'autres. */
.mf-footer__hi { color: var(--mf-accent-light); font-weight: 600; }

.mf-pt-52 { padding-top: 52px; }
.mf-pb-52 { padding-bottom: 52px; }

/* --- Catalogue ----------------------------------------------------------- */

.mf-shelf-tabs { display: flex; border: 1px solid var(--mf-line); width: fit-content; margin-bottom: 22px; }
.mf-shelf-tabs a {
  padding: 13px 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mf-ink);
  background: var(--mf-surface);
  display: flex;
  align-items: center;
  gap: 9px;
}
.mf-shelf-tabs a + a { border-left: 1px solid var(--mf-line); }
.mf-shelf-tabs a:hover { text-decoration: none; }
.mf-shelf-tabs a.is-active { background: var(--mf-ink); color: #fff; }
.mf-shelf-tabs .mf-count { font-family: var(--mf-mono); font-size: 11.5px; opacity: 0.7; }

.mf-catalog { display: grid; grid-template-columns: 232px 1fr; gap: 32px; align-items: start; }
.mf-catalog__aside { position: sticky; top: 82px; }
.mf-filter-stack { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.mf-filter-stack:last-child { margin-bottom: 0; }
.mf-filter-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-panel__section--accent { background: var(--mf-accent-tint); }
.mf-panel__section--accent p:first-child { font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.mf-panel__section--accent p:nth-child(2) { font-size: 12.5px; color: var(--mf-ink-soft); line-height: 1.5; margin: 0 0 10px; }
.mf-result-count { font-family: var(--mf-mono); font-size: 12px; color: var(--mf-muted); margin: 0; }
.mf-results-head { margin-bottom: 14px; }

.mf-empty {
  border: 1px dashed #C4CAD0;
  background: var(--mf-surface);
  padding: 44px;
  text-align: center;
  color: var(--mf-muted);
  font-size: 15px;
}
.mf-empty p { margin: 0; }

/* Dans le panier, la quantité se saisit directement : pas de pas +/−. */
.mf-cart-line .mf-stepper input { width: 56px; }

/* --- Fiche produit ------------------------------------------------------- */

.mf-breadcrumb { display: flex; align-items: center; gap: 8px; padding: 0 0 20px; font-size: 12.5px; color: var(--mf-muted); flex-wrap: wrap; }
.mf-breadcrumb a { color: var(--mf-accent); font-weight: 600; }
.mf-breadcrumb [aria-current] { color: var(--mf-ink); }

.mf-product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.mf-product h1 { font-size: 31px; line-height: 1.12; letter-spacing: -0.022em; margin: 0 0 12px; font-weight: 800; }
.mf-product__lead { font-size: 15.5px; line-height: 1.6; color: var(--mf-ink-soft); margin: 0 0 13px; }
.mf-product__lead:last-of-type { margin-bottom: 22px; }
/* La ligne propre à la déclinaison choisie : même voix, mais détachée du
   texte général, parce qu'elle change quand on change de référence. */
.mf-product__lead--variant {
  color: var(--mf-ink);
  border-left: 2px solid var(--mf-accent);
  padding-left: 13px;
}
.mf-product__idline { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.mf-product__sku { font-family: var(--mf-mono); font-size: 11.5px; color: var(--mf-muted); letter-spacing: 0.06em; }
.mf-product__hero { position: relative; display: flex; align-items: flex-end; padding: 16px; }
.mf-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 9px; }
.mf-thumbs > div { aspect-ratio: 1 / 1; border: 1px solid var(--mf-line); background: repeating-linear-gradient(135deg, #EBEDF0 0 6px, #F8F9FA 6px 12px); }
/* Vignette cliquable : la bordure marque celle qui est affichée en grand,
   c'est la seule chose qui distingue les quatre cases entre elles. */
.mf-thumbs__pick {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--mf-line);
  background: var(--mf-surface);
  cursor: pointer;
}
.mf-thumbs__pick.is-current { border-color: var(--mf-ink); }
.mf-thumbs__pick:focus-visible { outline: 2px solid var(--mf-accent-dark); outline-offset: 2px; }
.mf-thumbs__pick .mf-media__img { padding: 4px; }

.mf-kind-badge { font-family: var(--mf-mono); font-size: 10.5px; letter-spacing: 0.08em; padding: 5px 9px; }
.mf-kind-badge--consumable { background: var(--mf-accent-wash); color: var(--mf-accent-dark); }
.mf-kind-badge--equipment { background: var(--mf-ink); color: #fff; }

.mf-includes { border: 1px solid var(--mf-line); background: var(--mf-surface); padding: 18px 20px; margin-bottom: 16px; }
.mf-includes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mf-includes li { font-size: 13.5px; line-height: 1.45; display: flex; gap: 10px; }
.mf-includes li::before { content: "✓"; color: var(--mf-accent); font-weight: 700; }

.mf-buybox { border: 1px solid var(--mf-line); background: var(--mf-surface); }
.mf-buybox__notice {
  padding: 13px 20px;
  border-bottom: 1px solid var(--mf-line);
  background: var(--mf-canvas-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
}
.mf-buybox__notice strong { font-weight: 700; }
.mf-buybox__notice span { color: var(--mf-muted); font-size: 12.5px; }
.mf-mode-tabs { display: flex; }
.mf-mode-tabs button {
  flex: 1;
  padding: 13px;
  background: var(--mf-canvas);
  color: var(--mf-muted);
  border: 0;
  border-bottom: 1px solid var(--mf-line);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
}
.mf-mode-tabs button + button { border-left: 1px solid var(--mf-line); }
.mf-mode-tabs button.is-active { background: var(--mf-surface); color: var(--mf-ink); }
.mf-mode-tabs button.is-active.is-sub { color: var(--mf-accent); }
.mf-buybox__body { padding: 20px; }
.mf-option-row { margin-bottom: 16px; }
.mf-option-row .mf-pill { padding: 9px 13px; font-size: 12.5px; font-weight: 500; }
.mf-option-row .mf-pill.is-unavailable { color: var(--mf-on-dark-soft); border-color: #EAECEF; text-decoration: line-through; }
.mf-freq .mf-pill { min-width: 104px; text-align: left; padding: 9px 13px; }
.mf-freq .mf-pill strong { display: block; font-family: var(--mf-mono); font-size: 12.5px; font-weight: 600; }
.mf-freq .mf-pill span { display: block; font-size: 11px; opacity: 0.72; margin-top: 3px; font-family: var(--mf-sans); }

.mf-commitment {
  font-size: 12px;
  line-height: 1.5;
  color: var(--mf-muted);
  margin: 0 0 12px;
}

.mf-qty { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.mf-stepper { display: flex; align-items: center; border: 1px solid var(--mf-line); }
.mf-stepper button { width: 34px; height: 34px; background: var(--mf-surface); border: 0; cursor: pointer; font-size: 16px; color: var(--mf-ink); }
.mf-stepper input {
  width: 46px;
  height: 34px;
  text-align: center;
  font-family: var(--mf-mono);
  font-size: 14px;
  border: 0;
  background: var(--mf-surface);
  color: var(--mf-ink);
  -moz-appearance: textfield;
}
.mf-stepper input::-webkit-outer-spin-button,
.mf-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mf-tier { font-size: 12.5px; color: var(--mf-muted); }
.mf-tier.is-earned { color: var(--mf-accent-dark); }

.mf-buybox__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid #EDEFF2;
  padding-top: 16px;
  flex-wrap: wrap;
}
.mf-buybox__price { font-family: var(--mf-mono); font-size: 27px; margin: 0; font-weight: 600; }
.mf-buybox__note { font-size: 12.5px; color: var(--mf-muted); margin: 5px 0 0; }

.mf-upsell { border: 1px solid var(--mf-accent); background: var(--mf-accent-tint); margin-top: 16px; padding: 16px 20px 14px; }
.mf-upsell h2 { font-size: 14.5px; font-weight: 700; margin: 0 0 6px; }
.mf-upsell p { font-size: 13px; color: var(--mf-ink-soft); line-height: 1.5; margin: 0 0 12px; }
.mf-upsell ul { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.mf-upsell li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; border-bottom: 1px solid #DDE4F5; padding-bottom: 7px; }

/* Extension de garantie adossée à l'abonnement : c'est l'argument qui doit
   arrêter l'oeil dans le bloc, pas la ligne de prix. */
.mf-upsell p.mf-upsell__warranty {
  border-top: 1px solid #DDE4F5;
  padding-top: 11px;
  margin-bottom: 14px;
}
.mf-upsell__warranty strong { color: var(--mf-ink); }
.mf-upsell p.mf-upsell__foot { font-size: 12px; margin: 10px 0 0; text-align: center; }

/* Upsell par besoin manquant : deux références, chacune avec sa ligne de
   spécification et son bouton d'ajout direct. */
.mf-upsell--need ul { margin-bottom: 0; }
.mf-upsell__pick { align-items: flex-start; padding-bottom: 10px; }
.mf-upsell__pick:last-child { border-bottom: 0; padding-bottom: 0; }
.mf-upsell__pick-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mf-upsell__pick-name { font-weight: 600; }
.mf-upsell__pick-spec { font-size: 11.5px; color: var(--mf-muted); line-height: 1.4; }
.mf-upsell__pick-buy { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.mf-upsell__pick-buy form { margin: 0; }

/* Restriction d'emploi d'un produit : elle doit s'arrêter à la lecture, pas
   se fondre dans la description. */
.mf-warning {
  border: 1px solid var(--mf-line-strong);
  border-left: 4px solid var(--mf-ink);
  background: var(--mf-canvas-soft);
  padding: 14px 18px;
  margin-top: 16px;
}
.mf-warning__head { font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.mf-warning p:last-child { font-size: 13px; line-height: 1.55; color: var(--mf-ink-soft); margin: 0; }

.mf-specs { width: 100%; margin-top: 24px; font-size: 13.5px; }
.mf-specs th, .mf-specs td { padding: 10px 0; border-bottom: 1px solid var(--mf-line-soft); text-align: left; }
.mf-specs th { color: var(--mf-muted); width: 45%; font-weight: 400; }
.mf-specs td { font-weight: 600; font-family: var(--mf-mono); }

/* --- Sélecteur, comparatif, abonnement ---------------------------------- */

.mf-answer {
  text-align: left;
  border: 1px solid var(--mf-line);
  background: var(--mf-surface);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--mf-ink);
}
.mf-answer:hover { border-color: var(--mf-accent); background: #F7FAFF; text-decoration: none; color: var(--mf-ink); }
.mf-answer__key { font-family: var(--mf-mono); font-size: 12px; color: var(--mf-accent); font-weight: 600; }
.mf-answer__label { display: block; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.mf-answer__note { display: block; font-size: 13.5px; color: var(--mf-muted); line-height: 1.45; }

.mf-grid--answers { gap: 10px; }

/* Question à choix multiple : la réponse cochée reste visible pendant qu'on
   coche les suivantes, et le bouton « Continuer » ferme l'étape. */
.mf-answer.is-picked { border-color: var(--mf-accent); background: var(--mf-accent-tint); }
.mf-answer.is-picked .mf-answer__key { font-size: 14px; }
.mf-answers__go { margin: 18px 0 0; }

.mf-reco { border: 1px solid var(--mf-accent); background: var(--mf-surface); margin-top: 30px; }
.mf-reco__head { background: var(--mf-accent); color: #fff; padding: 12px 20px; font-family: var(--mf-mono); font-size: 11.5px; letter-spacing: 0.1em; }
.mf-reco__body { padding: 22px 20px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.mf-reco__media { width: 108px; height: 84px; border: 1px solid var(--mf-line); background: var(--mf-placeholder); flex: none; }
.mf-reco__actions { display: flex; flex-direction: column; gap: 8px; flex: none; }

/* Un montage compte de une à trois lignes : elles se séparent, et le total
   ne s'affiche que lorsqu'il y a plusieurs choses à additionner. */
.mf-reco__body + .mf-reco__body { border-top: 1px solid var(--mf-line-soft); }
.mf-reco__total {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-top: 1px solid var(--mf-line);
  background: var(--mf-accent-tint);
  font-size: 13.5px;
  color: var(--mf-ink-soft);
}
.mf-reco__total .mf-mono { font-size: 17px; font-weight: 600; color: var(--mf-ink); }
.mf-reco__total form { margin: 0; }

/* Variantes du montage : même filtration, autre arbitrage. */
.mf-variants { border: 1px solid var(--mf-line); background: var(--mf-surface); margin-top: 16px; padding: 18px 20px; }
.mf-variants h2 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.mf-variants > p { font-size: 13px; color: var(--mf-muted); line-height: 1.5; margin: 0 0 14px; }
.mf-variants ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mf-variant { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; border-top: 1px solid var(--mf-line-soft); padding-top: 12px; }
.mf-variant:first-child { border-top: 0; padding-top: 0; }
.mf-variant__name { display: block; font-size: 14.5px; font-weight: 700; margin: 6px 0 4px; }
.mf-variant__buy { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.mf-variant__buy form { margin: 0; }
.mf-tag--inline { position: static; display: inline-block; font-size: 10.5px; padding: 4px 7px; }

/* Récapitulatif : chaque réponse rouvre sa question sans perdre les autres. */
.mf-recap { margin-top: 30px; border-top: 1px solid var(--mf-line); padding-top: 20px; }
.mf-recap h2 { font-size: 13px; font-family: var(--mf-mono); letter-spacing: 0.08em; color: var(--mf-muted); font-weight: 400; margin: 0 0 12px; }
.mf-recap ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mf-recap li { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; font-size: 13.5px; }
.mf-recap__label { color: var(--mf-muted); flex: 1; min-width: 220px; }
.mf-recap__value { font-weight: 600; }

.mf-compare { width: 100%; background: var(--mf-surface); border: 1px solid var(--mf-line); font-size: 14px; }
.mf-compare thead tr { background: var(--mf-ink); color: #fff; }
.mf-compare th { text-align: left; padding: 13px 18px; font-weight: 600; font-size: 12.5px; letter-spacing: 0.06em; }
.mf-compare td { padding: 13px 18px; border-bottom: 1px solid var(--mf-line-soft); font-weight: 600; }
.mf-compare td:first-child { color: var(--mf-muted); font-weight: 400; }

/* --- Configurateur d'abonnement ------------------------------------------ */

.mf-subconf { display: grid; grid-template-columns: 1fr 376px; gap: 28px; align-items: start; }
.mf-subconf__main { min-width: 0; }
.mf-subconf__lead { max-width: 70ch; margin-bottom: 32px; }
.mf-subconf__presets { margin-bottom: 26px; }

.mf-subconf__head { display: flex; align-items: baseline; gap: 16px; }
.mf-subconf__head > span:first-child { flex: 1; }
.mf-subconf__head h2 { font-size: 19px; letter-spacing: -0.018em; font-weight: 700; margin: 0 0 4px; }
.mf-subconf__head p { font-size: 13px; color: var(--mf-muted); margin: 0; }

.mf-subconf__section-title { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 5px; }
.mf-subconf__section-note { font-size: 13px; color: var(--mf-muted); line-height: 1.5; margin: 0; }

/* Montage type : un raccourci vers une composition entière, pas un tarif. */
.mf-preset {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  border: 1px solid var(--mf-line);
  background: var(--mf-surface);
  padding: 18px 18px 16px;
  cursor: pointer;
}
.mf-preset:hover { border-color: var(--mf-accent); }
.mf-preset.is-active { border-color: var(--mf-accent); background: var(--mf-accent-tint); }
.mf-preset__stages { font-family: var(--mf-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--mf-muted); }
.mf-preset__name { font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; }
.mf-preset__detail { font-size: 12.5px; color: var(--mf-muted); line-height: 1.45; }
.mf-preset__price { font-family: var(--mf-mono); font-size: 12.5px; color: var(--mf-accent-dark); font-weight: 600; margin-top: 2px; }

/* Une ligne d'abonnement : la référence, la quantité de l'année, ce qu'elle coûte. */
.mf-subline { display: flex; gap: 16px; padding: 18px 16px; border-bottom: 1px solid var(--mf-line-soft); align-items: flex-start; }
.mf-subline__rank {
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--mf-accent-wash); color: var(--mf-accent-dark);
  font-family: var(--mf-mono); font-size: 12px; font-weight: 600; margin-top: 2px;
}
.mf-subline__body { flex: 1; min-width: 0; }
.mf-subline__head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.mf-subline__name { font-size: 15px; font-weight: 700; }
.mf-subline__ref { display: block; font-family: var(--mf-mono); font-size: 11.5px; color: var(--mf-muted); margin-bottom: 12px; }
.mf-subline__controls { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-end; }
.mf-subline__controls .mf-eyebrow { display: block; margin-bottom: 7px; }
.mf-subline__rhythm { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; min-width: 150px; }
.mf-subline__cost { flex: 1; min-width: 120px; text-align: right; }
.mf-subline__total { display: block; font-family: var(--mf-mono); font-size: 19px; font-weight: 600; line-height: 1.3; }
.mf-subline__note { display: block; font-size: 11.5px; color: var(--mf-muted); }
.mf-subline__warn {
  display: block; font-size: 12.5px; line-height: 1.45;
  color: #8A3915; background: #FDF3EF; border: 1px solid #F0D6C9;
  padding: 9px 11px; margin-top: 12px;
}
/* Le pas +/− est piloté par le contrôleur : la valeur n'est pas saisissable. */
.mf-stepper__value { width: 44px; text-align: center; font-family: var(--mf-mono); font-size: 14px; }

/* Sélecteur d'ajout : le catalogue abonnable, rangé par besoin. */
.mf-subconf__picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mf-pick {
  display: flex; align-items: center; gap: 12px; text-align: left;
  border: 1px solid var(--mf-line); background: var(--mf-surface);
  padding: 13px 15px; cursor: pointer; font-family: var(--mf-sans);
}
.mf-pick:hover { border-color: var(--mf-accent); }
.mf-pick.is-active { border-color: var(--mf-accent); background: var(--mf-accent-tint); cursor: default; }
.mf-pick__body { flex: 1; min-width: 0; }
.mf-pick .mf-media--thumb { width: 44px; height: 44px; }
.mf-pick__name { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 3px; color: var(--mf-ink); }
.mf-pick.is-active .mf-pick__name { color: var(--mf-accent-dark); }
.mf-pick__price { display: block; font-family: var(--mf-mono); font-size: 11px; color: var(--mf-muted); }
.mf-pick__sign { font-family: var(--mf-mono); font-size: 15px; flex: none; }
.mf-pick.is-active .mf-pick__sign { color: var(--mf-accent); }

/* Le contenu du colis unique. */
.mf-box { border: 1px solid var(--mf-line-soft); }
.mf-box__line { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-bottom: 1px solid var(--mf-line-soft); }
.mf-box__line .mf-media--thumb { width: 40px; height: 40px; }
.mf-box__qty { font-family: var(--mf-mono); font-size: 13px; font-weight: 600; color: var(--mf-accent-dark); flex: none; }
.mf-box__body { flex: 1; min-width: 0; }
.mf-box__name { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; }
.mf-box__ref { display: block; font-family: var(--mf-mono); font-size: 11px; color: var(--mf-muted); }
.mf-box__total { font-family: var(--mf-mono); font-size: 13px; font-weight: 600; flex: none; }
.mf-box__foot { display: flex; justify-content: space-between; gap: 12px; padding: 13px 15px; background: var(--mf-canvas-soft); font-size: 13px; font-weight: 700; }
.mf-box__foot span:last-child { font-family: var(--mf-mono); }

/* Les rappels de remplacement : des dates, pas des expéditions. */
.mf-timeline { list-style: none; margin: 0 0 4px; padding: 0 0 0 2px; position: relative; }
.mf-timeline::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 14px; width: 2px; background: #DDE4F5; }
.mf-timeline__item { position: relative; display: flex; flex-direction: column; padding: 0 0 16px 32px; }
.mf-timeline__item::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px; border: 3px solid var(--mf-surface); border-radius: 50%;
}
.mf-timeline__item--now::before { background: var(--mf-ink); }
.mf-timeline__item--accent::before { background: var(--mf-accent); }
.mf-timeline__item--next::before { background: #9DBBFA; }
.mf-timeline__when { font-family: var(--mf-mono); font-size: 11px; letter-spacing: 0.06em; margin-bottom: 4px; color: var(--mf-muted); }
.mf-timeline__item--now .mf-timeline__when { color: var(--mf-ink); }
.mf-timeline__item--accent .mf-timeline__when { color: var(--mf-accent-dark); }
.mf-timeline__what { font-size: 13px; line-height: 1.45; }

.mf-strike { text-decoration: line-through; color: var(--mf-faint); }
.mf-empty--inline { border: 0; border-bottom: 1px solid var(--mf-line-soft); padding: 40px 22px; }
.mf-empty--inline p + p { font-size: 13.5px; color: var(--mf-faint); margin-top: 6px; }

/* --- Le guide ------------------------------------------------------------ */

/* Trois volets. Sur bureau ils s'enchaînent de haut en bas ; sur mobile, la
   barre d'onglets n'en laisse qu'un visible (voir le bloc responsive). */
.mf-guide__section { padding-top: 44px; }

.mf-guide__head { margin-bottom: 22px; }
.mf-guide__head h2 {
  font-family: var(--mf-mono);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mf-muted);
  font-weight: 500;
  margin: 0 0 8px;
}
.mf-guide__head p { font-size: 16px; line-height: 1.55; color: var(--mf-ink-soft); margin: 0; max-width: 74ch; }
.mf-guide__head strong { color: var(--mf-ink); }

.mf-guide-hero { padding-top: 52px; }
.mf-guide-hero h1 {
  font-size: 50px;
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-weight: 800;
  margin: 0 0 16px;
  max-width: 22ch;
  text-wrap: pretty;
}
.mf-guide-hero__lead { font-size: 17px; line-height: 1.55; color: var(--mf-on-dark); margin: 0 0 44px; max-width: 62ch; }

/* Le parcours de l'eau : les pastilles sont posées sur la conduite, dont les
   trois extrémités sont dessinées par le dégradé. */
.mf-pipeline {
  list-style: none;
  margin: 0;
  padding: 0 0 52px;
  position: relative;
  display: grid;
  grid-template-columns: 0.72fr 1fr 1fr 1fr 0.72fr;
  gap: 18px;
}
.mf-pipeline::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 14px;
  height: 6px;
  background: var(--mf-rail-h);
}
.mf-pipeline__station { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.mf-pipeline__dot {
  position: relative;
  z-index: 1;
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--mf-accent);
  color: #fff;
  border: 3px solid var(--mf-ink);
  border-radius: 50%;
  font-family: var(--mf-mono);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}
.mf-pipeline__station--start .mf-pipeline__dot { background: var(--mf-line-dark); color: var(--mf-faint); }
.mf-pipeline__station--end .mf-pipeline__dot { background: var(--mf-accent-light); color: var(--mf-ink); }
.mf-pipeline__tag {
  display: block;
  font-family: var(--mf-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--mf-accent-light);
  margin-bottom: 8px;
}
.mf-pipeline__station--start .mf-pipeline__tag,
.mf-pipeline__station--end .mf-pipeline__tag { color: var(--mf-muted); }
.mf-pipeline__title {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 8px;
  color: #fff;
}
.mf-pipeline__body { display: block; font-size: 13.5px; line-height: 1.5; color: var(--mf-faint); }

/* Bobinée contre extrudée : la cellule mise en avant est celle qui l'emporte
   sur le critère de la ligne, pas un classement général. */
.mf-duel {
  width: 100%;
  table-layout: fixed;
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  font-size: 13.5px;
}
.mf-duel thead tr { background: var(--mf-ink); color: #fff; }
.mf-duel thead th {
  text-align: left;
  padding: 13px 20px;
  font-family: var(--mf-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 400;
}
.mf-duel thead th:first-child { width: 36%; }
.mf-duel__col-b { color: var(--mf-accent-light); }
.mf-duel tbody th {
  text-align: left;
  padding: 14px 20px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--mf-muted);
  border-bottom: 1px solid var(--mf-line-soft);
}
.mf-duel td { padding: 14px 20px; font-weight: 600; border-bottom: 1px solid var(--mf-line-soft); }
.mf-duel td.is-win { background: var(--mf-accent-tint); color: var(--mf-accent-dark); }
.mf-duel tbody tr:last-child th, .mf-duel tbody tr:last-child td { border-bottom: 0; }

/* Les trois étages. Le bouton d'accordéon ne sert qu'en petit écran : sur
   bureau, le bloc est toujours déplié en deux colonnes. */
.mf-stages { display: flex; flex-direction: column; gap: 20px; }
.mf-stage { border: 1px solid var(--mf-line); background: var(--mf-surface); }
.mf-stage__panel {
  display: grid;
  grid-template-columns: 340px 1fr;
  grid-template-rows: 1fr auto;
}
.mf-stage__side,
.mf-stage__cta {
  grid-column: 1;
  background: var(--mf-canvas-soft);
  border-right: 1px solid var(--mf-line-soft);
}
.mf-stage__side { grid-row: 1; padding: 30px 28px 0; }
.mf-stage__cta { grid-row: 2; padding: 20px 28px 30px; }
.mf-stage__main { grid-column: 2; grid-row: 1 / span 2; padding: 26px 28px 28px; }
.mf-stage__side h3 { font-size: 28px; letter-spacing: -0.022em; font-weight: 800; margin: 0 0 12px; line-height: 1.1; }
.mf-stage__what { font-size: 14.5px; line-height: 1.55; color: var(--mf-ink-soft); margin: 0 0 20px; }
.mf-stage__signs { font-size: 13.5px; line-height: 1.55; color: var(--mf-ink); margin: 0; }
.mf-stage__side .mf-eyebrow { margin-bottom: 8px; }
.mf-stage__main > .mf-eyebrow { margin-bottom: 16px; }

.mf-stage__options { grid-template-columns: repeat(2, 1fr); margin-bottom: 22px; }
.mf-stage__options--3 { grid-template-columns: repeat(3, 1fr); }
.mf-stage__options > * { padding: 20px 20px 22px; }
.mf-option__head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 0 0 10px; }
.mf-option__name { font-size: 16.5px; font-weight: 700; letter-spacing: -0.012em; }
.mf-option__spec {
  font-family: var(--mf-mono);
  font-size: 11px;
  color: var(--mf-accent-dark);
  background: var(--mf-accent-wash);
  padding: 4px 7px;
}
.mf-option__how { font-size: 13.5px; line-height: 1.55; color: var(--mf-ink-soft); margin: 0 0 12px; }
.mf-option__when { font-size: 13.5px; line-height: 1.5; color: var(--mf-ink); margin: 0; }

.mf-pitfall { border-left: 3px solid var(--mf-accent); padding: 2px 0 2px 15px; }
.mf-pitfall .mf-eyebrow { margin-bottom: 7px; }
.mf-pitfall p:last-child { font-size: 13.5px; line-height: 1.6; color: var(--mf-ink-soft); margin: 0; }

/* Votre situation, votre montage. */
.mf-cases { gap: 18px; align-items: start; }
.mf-case { border: 1px solid var(--mf-line); background: var(--mf-surface); display: flex; flex-direction: column; }
.mf-case__head { padding: 20px 22px 18px; border-bottom: 1px solid var(--mf-line-soft); }
.mf-case__head .mf-tag { margin-bottom: 12px; }
.mf-case__head h3 { font-size: 19px; letter-spacing: -0.018em; font-weight: 700; line-height: 1.22; margin: 0 0 8px; }
.mf-case__head p { font-size: 13.5px; line-height: 1.5; color: var(--mf-muted); margin: 0; }
.mf-case__chain { list-style: none; margin: 0; padding: 18px 22px 4px; flex: 1; }
.mf-case__chain li { display: flex; gap: 12px; padding-bottom: 12px; }
.mf-case__rank {
  width: 22px; height: 22px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--mf-accent-wash);
  color: var(--mf-accent-dark);
  font-family: var(--mf-mono);
  font-size: 11px;
  font-weight: 600;
}
.mf-case__what { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.mf-case__why { display: block; font-size: 12.5px; line-height: 1.45; color: var(--mf-muted); }
.mf-case__foot { padding: 0 22px 20px; }
.mf-case__foot p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mf-muted);
  margin: 0 0 14px;
  border-top: 1px solid var(--mf-line-soft);
  padding-top: 14px;
}
.mf-case__foot strong { color: var(--mf-ink); }

/* Quand changer, et la suite logique : l'abonnement. */
.mf-outro { border: 1px solid var(--mf-line); background: var(--mf-surface); display: grid; grid-template-columns: 1fr 1fr; }
.mf-outro__left { padding: 30px 28px; border-right: 1px solid var(--mf-line-soft); }
.mf-outro__right { padding: 30px 28px; background: var(--mf-accent-tint); }
.mf-outro h2 { font-size: 24px; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 12px; }
.mf-outro p { font-size: 14.5px; line-height: 1.6; color: var(--mf-ink-soft); margin: 0 0 20px; }
.mf-outro .mf-eyebrow { margin-bottom: 12px; }
.mf-outro__intervals { margin: 0; }
.mf-outro__intervals > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--mf-line-soft);
  font-size: 13.5px;
}
.mf-outro__intervals dt { color: var(--mf-muted); }
.mf-outro__intervals dd { margin: 0; font-weight: 600; white-space: nowrap; }
.mf-outro__right p:last-of-type { margin-bottom: 22px; }
.mf-outro__actions { display: flex; flex-direction: column; gap: 10px; }

/* --- Panier -------------------------------------------------------------- */

.mf-cart { display: grid; grid-template-columns: 1fr 336px; gap: 28px; align-items: start; }
.mf-cart__aside { position: sticky; top: 82px; }
.mf-cart-line {
  display: flex;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid var(--mf-line-soft);
  align-items: center;
  flex-wrap: wrap;
}
.mf-cart-line__media { position: relative; width: 84px; height: 66px; border: 1px solid var(--mf-line); background: var(--mf-placeholder); flex: none; }
.mf-cart-line__info { flex: 1; min-width: 140px; }
.mf-cart-line__ref { display: block; font-family: var(--mf-mono); font-size: 11px; color: var(--mf-muted); margin-bottom: 4px; }
.mf-cart-line__name { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 4px; }
.mf-cart-line__name a { color: var(--mf-ink); }
.mf-cart-line__mode { display: block; font-size: 12.5px; color: var(--mf-muted); }
.mf-cart-line__mode.is-sub { color: var(--mf-accent-dark); }
.mf-cart-line__total { width: 92px; text-align: right; font-family: var(--mf-mono); font-size: 15px; font-weight: 600; flex: none; }
.mf-cart-line__remove { background: none; border: 0; cursor: pointer; color: var(--mf-faint); font-size: 15px; flex: none; }

.mf-page__title { font-size: 32px; letter-spacing: -0.025em; margin: 0 0 26px; font-weight: 800; }
.mf-summary-title { font-size: 15px; font-weight: 700; margin: 0 0 16px; }
.mf-summary-fineprint { font-size: 12px; color: var(--mf-muted); margin: 12px 0 0; line-height: 1.5; text-align: center; }

.mf-summary-row { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 9px; gap: 12px; }
.mf-summary-row span:first-child { color: var(--mf-muted); }
.mf-summary-row span:last-child { font-family: var(--mf-mono); white-space: nowrap; }
.mf-summary-row.is-accent span { color: var(--mf-accent); }
.mf-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--mf-line-soft);
  padding-top: 14px;
  gap: 12px;
}
.mf-summary-total span:first-child { font-size: 15px; font-weight: 700; }
.mf-summary-total span:last-child { font-family: var(--mf-mono); font-size: 22px; font-weight: 600; }

.mf-ship-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
  width: 100%;
  padding: 11px 13px;
  font-family: var(--mf-sans);
}
.mf-ship-option strong { display: block; font-size: 13px; font-weight: 600; }
.mf-ship-option em { display: block; font-size: 11.5px; opacity: 0.72; margin-top: 3px; font-style: normal; }
.mf-ship-option .mf-mono { font-size: 13px; white-space: nowrap; }

/* Abonnement tout prêt du panier. C'est l'offre qui décide de l'extension de
   garantie : elle prend toute la largeur sous le panier, l'argument à gauche,
   les cartouches et le bouton à droite. */
.mf-pitch {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 336px;
  gap: 28px;
  align-items: start;
  border: 1px solid var(--mf-accent);
  background: var(--mf-accent-tint);
  padding: 24px 26px;
  margin-top: 28px;
}
.mf-pitch__claim h2 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  margin: 4px 0 10px;
  max-width: 22ch;
}
.mf-pitch__claim .mf-upsell__warranty { border-top: 0; padding-top: 0; margin-bottom: 0 !important; font-size: 13.5px; }
.mf-pitch__offer { background: #fff; border: 1px solid #D8E2FB; padding: 16px 18px; }
.mf-pitch__offer ul { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mf-pitch__offer li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  border-bottom: 1px solid #EDEFF2;
  padding-bottom: 9px;
}
.mf-pitch__offer li:last-child { border-bottom: 0; padding-bottom: 0; }
.mf-pitch__offer li > .mf-mono { white-space: nowrap; }
.mf-pitch__stage {
  display: block;
  font-family: var(--mf-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mf-muted);
  margin-bottom: 3px;
}
.mf-pitch__ref { display: block; font-weight: 600; }
/* Les options d'un étage : une rangée de pastilles sous la ligne qu'elles
   remplacent, sans filet, pour qu'on les lise comme un choix et non comme une
   seconde référence. */
.mf-pitch__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 0;
  padding: 0 0 4px;
  margin-top: -4px;
}
.mf-pitch__choices .mf-pill { font-size: 11.5px; padding: 5px 9px; }
.mf-pitch__spec { display: block; font-size: 11.5px; color: var(--mf-muted); margin-top: 2px; }
.mf-pitch__offer li.is-covered .mf-pitch__ref { color: var(--mf-muted); }
.mf-pitch__rebate {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--mf-accent-dark);
  margin: 0 0 10px;
}
.mf-pitch__rebate .mf-mono { white-space: nowrap; }
.mf-pitch__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  border-top: 1px solid var(--mf-line-strong);
  padding-top: 11px;
  margin: 0;
}
.mf-pitch__total strong { font-size: 19px; font-weight: 600; white-space: nowrap; }
.mf-pitch__saving { font-size: 12px; color: var(--mf-ink-soft); margin: 6px 0 12px; }
.mf-pitch__offer form { margin: 12px 0 0; }
.mf-pitch__alt { font-size: 12px; color: var(--mf-muted); margin: 10px 0 0; text-align: center; }

/* Appel à composer, en tête du rayon des corps nus : c'est là que le client
   hésite entre des références qui se ressemblent. */
.mf-shelf-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border: 1px solid var(--mf-accent);
  background: var(--mf-accent-tint);
  padding: 18px 22px;
  margin: 0 0 24px;
}
.mf-shelf-cta__title { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.mf-shelf-cta__note {
  font-size: 12.5px;
  color: var(--mf-ink-soft);
  line-height: 1.5;
  margin: 0;
  max-width: 62ch;
}

/* Configurateur Hydro105 : une étape par question, la réponse en pastilles,
   et le montage retenu qui se chiffre en regard. */
.mf-conf__step { padding: 20px 22px; border-bottom: 1px solid var(--mf-line); }
.mf-conf__step:last-child { border-bottom: 0; }
.mf-conf__help { font-size: 12.5px; color: var(--mf-ink-soft); line-height: 1.5; margin: 0 0 12px; }
.mf-conf__note { font-size: 12px; color: var(--mf-muted); margin: 12px 0 0; }
.mf-conf__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mf-conf__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--mf-line-strong);
  padding: 12px 14px;
  color: var(--mf-ink);
}
.mf-conf__card:hover { border-color: var(--mf-accent); text-decoration: none; }
.mf-conf__card.is-active { border-color: var(--mf-accent); background: var(--mf-accent-tint); }
.mf-conf__card-title { font-weight: 700; font-size: 14px; }
.mf-conf__card-detail { font-size: 11.5px; color: var(--mf-muted); line-height: 1.4; }
.mf-conf__stage { border-top: 1px solid var(--mf-line); padding-top: 12px; margin-top: 12px; }
.mf-conf__stage:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.mf-conf__stage-name {
  font-family: var(--mf-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mf-muted);
  margin: 0 0 8px;
}
.mf-conf__stage-ref { font-size: 12.5px; color: var(--mf-ink-soft); margin: 8px 0 0; }
.mf-conf__cta {
  border: 1px dashed var(--mf-accent-light);
  background: var(--mf-accent-tint);
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--mf-ink-soft);
  line-height: 1.5;
  margin: 16px 0 0;
}

.mf-cart-upsell { background: var(--mf-accent-tint); border-top: 1px solid #D8E2FB; padding: 18px 20px; }
.mf-cart-upsell h2 { font-size: 13.5px; font-weight: 700; margin: 0 0 6px; }
.mf-cart-upsell p { font-size: 12.5px; color: var(--mf-ink-soft); line-height: 1.5; margin: 0 0 12px; }

/* --- Espace client ------------------------------------------------------- */

/* Une seule page pour l'abonnement, les commandes et les informations : une
   colonne d'onglets à gauche, le volet courant à droite. Chaque onglet est un
   lien — l'état vit dans l'URL, pas dans du JavaScript. */

.mf-account__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
/* Le titre est court, la ligne d'identité longue : sans base de flex, le bloc
   se calerait sur le titre et « Se déconnecter » passerait à la ligne. */
.mf-account__head > div:first-child { flex: 1 1 340px; min-width: 0; }
.mf-account h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.026em; margin: 0 0 10px; }
.mf-account__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--mf-ink-soft);
  margin: 0;
}
.mf-account__identity .mf-mono { font-size: 13px; color: var(--mf-ink); }
.mf-account__logout { display: inline; }

.mf-account__body { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.mf-account__nav {
  flex: 1 1 200px;
  max-width: 218px;
  min-width: 180px;
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
}
.mf-account__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--mf-line-soft);
  border-left: 3px solid transparent;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mf-ink);
}
.mf-account__tab:hover { background: var(--mf-canvas-soft); color: var(--mf-ink); text-decoration: none; }
.mf-account__tab.is-active {
  background: var(--mf-accent-tint);
  border-left-color: var(--mf-accent);
  color: var(--mf-accent-dark);
  font-weight: 700;
}
.mf-account__tab .mf-mono { font-size: 11px; color: var(--mf-faint); }
.mf-account__tab.is-active .mf-mono { color: var(--mf-accent-dark); }
.mf-account__help { padding: 16px; }
.mf-account__help .mf-eyebrow { font-size: 10px; margin-bottom: 8px; }
.mf-account__help p:last-child { font-size: 13px; line-height: 1.5; color: var(--mf-ink-soft); margin: 0; }

/* `flex: 999` : le volet prend tout ce qui reste, mais passe sous la colonne
   d'onglets dès qu'il ne tient plus sur 420 px. */
.mf-account__panel { flex: 999 1 420px; min-width: 0; }

/* -- Compteurs de tête -- */
.mf-account-stats {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  margin-bottom: 28px;
}
.mf-account-stats > * { padding: 18px 20px; }
.mf-account-stats > .is-accent { background: var(--mf-accent-tint); }
.mf-account-stats .mf-eyebrow { font-size: 10.5px; margin-bottom: 8px; }
.mf-account-stats > .is-accent .mf-eyebrow { color: var(--mf-accent-dark); }
.mf-account-stat__value {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 3px;
}
.mf-account-stats > .is-accent .mf-account-stat__value { color: var(--mf-accent-dark); font-weight: 600; }
.mf-account-stat__note { font-size: 12.5px; color: var(--mf-muted); margin: 0; }

/* -- Engagement : ce que la remise a coûté au client, et ce qu'elle coûterait
      de rompre aujourd'hui. -- */
.mf-account-commitment {
  padding: 20px 22px;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.mf-account-commitment__title { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.mf-account-commitment__bar { display: flex; gap: 4px; margin-bottom: 10px; max-width: 420px; }
.mf-account-commitment__bar span { flex: 1; height: 7px; background: #DDE4F5; }
.mf-account-commitment__bar span.is-done { background: var(--mf-accent); }
.mf-account-commitment__note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mf-muted);
  margin: 0;
  max-width: 76ch;
}
.mf-account-commitment__clawback { text-align: right; }
.mf-account-commitment__clawback .mf-eyebrow { font-size: 10.5px; margin-bottom: 6px; }
.mf-account-commitment__clawback .mf-mono { display: block; font-size: 22px; font-weight: 600; }
.mf-account-commitment__clawback .mf-account-stat__note { margin-top: 4px; font-size: 12px; }

/* -- Lignes d'abonnement et colonne latérale -- */
.mf-account-columns { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.mf-account-columns > .mf-panel { flex: 999 1 420px; min-width: 0; }
.mf-account-aside { flex: 1 1 300px; min-width: 0; display: grid; gap: 24px; }
.mf-account-aside__note { font-size: 12.5px; color: var(--mf-muted); line-height: 1.5; margin: 4px 0 0; }
.mf-account-aside__timeline { padding: 18px 20px 4px; }

.mf-panel__head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--mf-line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mf-panel__head.is-stacked { display: block; }
.mf-panel__head p:first-child { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.mf-panel__head .mf-mono { font-size: 11px; color: var(--mf-muted); margin: 0; }
.mf-panel__foot {
  padding: 16px 22px;
  background: var(--mf-canvas-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.mf-panel__foot p { font-size: 13px; color: var(--mf-muted); margin: 0; }

.mf-account-sub {
  padding: 20px 22px;
  border-bottom: 1px solid var(--mf-line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}
.mf-account-sub:last-child { border-bottom: 0; }
.mf-account-sub.is-cancelled { opacity: 0.55; }
.mf-account-sub__body { flex: 1 1 240px; min-width: 0; }
.mf-account-sub__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.mf-account-sub__id { font-size: 11px; color: var(--mf-faint); }
.mf-account-sub__name { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; margin: 0 0 6px; }
.mf-account-sub__name a { color: var(--mf-ink); }
.mf-account-sub__ident { font-size: 11.5px; color: var(--mf-muted); margin: 0 0 12px; }

.mf-account-sub__facts { display: flex; gap: 22px; flex-wrap: wrap; margin: 0; }
.mf-account-sub__facts .mf-eyebrow { font-size: 10px; margin-bottom: 4px; }
.mf-account-sub__facts dd { font-size: 14px; font-weight: 600; margin: 0; }

.mf-account-sub__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mf-line-soft);
}
.mf-account-sub__price { display: flex; align-items: baseline; gap: 7px; margin: 0; }
.mf-account-sub__price .mf-mono { font-size: 18px; font-weight: 600; }
.mf-account-sub__price span:last-child { font-size: 12.5px; color: var(--mf-muted); white-space: nowrap; }
.mf-account-sub__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mf-account-sub__engagement { font-size: 12.5px; line-height: 1.5; color: var(--mf-muted); margin: 10px 0 0; }

.mf-state { font-family: var(--mf-mono); font-size: 11px; letter-spacing: 0.06em; padding: 4px 8px; background: var(--mf-accent-wash); color: var(--mf-accent-dark); }
.mf-state.is-cancelled { background: var(--mf-canvas); color: var(--mf-muted); }

/* -- Adresse : bloc sombre, comme les encarts d'engagement du site -- */
.mf-account-address { background: var(--mf-ink); border-color: var(--mf-ink); color: #fff; padding: 22px 20px; }
.mf-account-address__title { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.mf-account-address p { font-size: 13.5px; line-height: 1.6; color: var(--mf-on-dark); margin: 0 0 12px; }
.mf-account-address__note { font-size: 12.5px; color: var(--mf-on-dark-soft); margin-bottom: 0 !important; }

/* -- Commandes -- */
.mf-account-order {
  padding: 18px 22px;
  border-bottom: 1px solid var(--mf-line-soft);
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 20px;
  align-items: center;
}
.mf-account-order__what { min-width: 0; }
.mf-account-order__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.mf-account-order__head .mf-mono { font-size: 13px; font-weight: 600; }
.mf-account-order__lines { font-size: 14px; line-height: 1.45; margin: 0 0 4px; }
.mf-account-order__date { font-size: 11.5px; color: var(--mf-muted); margin: 0; }
.mf-account-order__state { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; margin: 0 0 6px; }
.mf-account-order__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mf-line-strong); flex: none; }
.mf-account-order__dot.is-done { background: var(--mf-accent); }
.mf-account-order__note { font-size: 12.5px; color: var(--mf-muted); line-height: 1.45; margin: 0; }
.mf-account-order__total { text-align: right; white-space: nowrap; }
.mf-account-order__total .mf-mono { font-size: 17px; font-weight: 600; margin: 0 0 10px; }

/* -- Informations -- */
.mf-account-infos > .mf-panel { padding: 22px; }
.mf-account-info__body { font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.mf-account-info__note { font-size: 12.5px; line-height: 1.5; color: var(--mf-muted); margin: 0 0 16px; }
.mf-account-infos .mf-btn { margin-top: 0; }

/* --- Contenu éditorial --------------------------------------------------- */

.mf-page h1 { font-size: 34px; letter-spacing: -0.025em; margin: 0 0 10px; font-weight: 800; }
.mf-page__lead { font-size: 16px; color: var(--mf-ink-soft); margin: 0 0 32px; max-width: 68ch; }
.mf-prose { background: var(--mf-surface); border: 1px solid var(--mf-line); padding: 32px; }
.mf-prose h2 { font-size: 20px; margin: 32px 0 10px; font-weight: 700; letter-spacing: -0.015em; }
.mf-prose h2:first-child { margin-top: 0; }
.mf-prose h3 { font-size: 16px; margin: 22px 0 8px; font-weight: 700; }
.mf-prose p, .mf-prose li { font-size: 14.5px; line-height: 1.65; color: var(--mf-ink-soft); }
/* La remise à zéro des marges collait les paragraphes les uns aux autres :
   un article de conseil se lisait comme un seul bloc. */
.mf-prose p { margin: 0 0 12px; }
.mf-prose p:last-child { margin-bottom: 0; }
.mf-prose ul { padding-left: 20px; }
/* Le reset de Tailwind supprime les puces. On les rend aux listes posées
   directement dans le corps de texte, sans toucher aux listes de composants
   imbriquées, qui se veulent nues. */
.mf-prose > ul { list-style: disc; margin: 10px 0; }
.mf-prose > ol { list-style: decimal; padding-left: 20px; margin: 10px 0; }
.mf-prose > ul > li, .mf-prose > ol > li { margin: 6px 0; padding-left: 2px; }
.mf-todo { background: #FFF4CE; color: #6B5300; padding: 1px 6px; font-family: var(--mf-mono); font-size: 12px; }

.mf-faq { border: 1px solid var(--mf-line); background: var(--mf-surface); }
.mf-faq details { border-bottom: 1px solid var(--mf-line-soft); }
.mf-faq details:last-child { border-bottom: 0; }
.mf-faq summary { padding: 18px 20px; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; }
.mf-faq summary::-webkit-details-marker { display: none; }
.mf-faq summary::after { content: "+"; float: right; color: var(--mf-accent); }
.mf-faq details[open] summary::after { content: "−"; }
.mf-faq p { margin: 0; padding: 0 20px 20px; font-size: 14px; line-height: 1.6; color: var(--mf-ink-soft); }

/* --- Messages flash ------------------------------------------------------ */

.mf-flash { padding: 12px 16px; font-size: 13.5px; font-weight: 600; margin-bottom: 16px; border: 1px solid var(--mf-line); background: var(--mf-surface); }
.mf-flash--success { border-color: var(--mf-accent); background: var(--mf-accent-tint); color: var(--mf-accent-dark); }
.mf-flash--error { border-color: #C0392B; background: #FDECEA; color: #96271B; }

.mf-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: var(--mf-ink);
  color: #fff;
  border-top: 2px solid var(--mf-accent);
  padding: 16px var(--mf-gutter);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.mf-consent p { margin: 0; flex: 1; min-width: 260px; font-size: 13px; line-height: 1.55; color: var(--mf-on-dark); }
.mf-consent a { color: var(--mf-accent-light); }

/* --- Pied de page -------------------------------------------------------- */

.mf-footer { background: var(--mf-ink); color: var(--mf-on-dark-soft); border-top: 1px solid var(--mf-line-dark); }
.mf-footer__cols { padding-top: 44px; padding-bottom: 32px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.mf-footer a { color: var(--mf-on-dark-soft); }
.mf-footer a:hover { color: #fff; }
.mf-footer p { font-size: 13px; margin: 0 0 8px; line-height: 1.6; }
.mf-footer ul { list-style: none; margin: 0; padding: 0; }
.mf-footer li { font-size: 13px; margin: 0 0 8px; }
.mf-footer__brand { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.mf-footer__brand span:last-child { font-size: 15px; font-weight: 800; letter-spacing: 0.04em; color: #fff; }
.mf-footer__brand em { color: var(--mf-accent-light); font-style: normal; }
.mf-footer__mark { width: 26px; height: 26px; display: block; object-fit: contain; }
.mf-footer__legal {
  font-family: var(--mf-mono);
  font-size: 11px;
  color: var(--mf-on-dark-soft);
  margin: 0;
  border-top: 1px solid var(--mf-line-dark);
  padding: 18px 0 32px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mf-footer__legal a { color: var(--mf-on-dark-soft); }
/* Le gris des sur-titres est fait pour un fond clair : sur le pied de page
   sombre, il descendait à 3,9:1. */
.mf-footer .mf-eyebrow { color: var(--mf-on-dark); }

/* Petit bloc « argument » : un titre court, un paragraphe gris. */
.mf-note h2, .mf-note p:first-child { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.mf-note p:last-child { font-size: 13.5px; line-height: 1.55; color: var(--mf-muted); margin: 0; }
.mf-note--tight p:first-child { font-size: 14.5px; margin-bottom: 7px; }
.mf-note--tight p:last-child { font-size: 13px; }

/* --- Conseils (articles éditoriaux) -------------------------------------- */

.mf-article-group { margin-bottom: 44px; }
.mf-article-group:last-of-type { margin-bottom: 0; }

.mf-article-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  padding: 22px 20px;
}
/* Vignette d'une carte d'article : elle déborde sur le cadre de la carte pour
   en occuper toute la largeur, au format 16:9 des illustrations. */
.mf-article-card__media {
  display: block;
  margin: -22px -20px 6px;
  aspect-ratio: 16 / 9;
  background: var(--mf-canvas);
  border-bottom: 1px solid var(--mf-line);
  overflow: hidden;
}
.mf-article-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mf-article-card h3 { font-size: 17px; line-height: 1.35; margin: 0; font-weight: 700; letter-spacing: -0.015em; }
.mf-article-card h3 a { color: var(--mf-ink); }

/* Sous la grille d'une page d'atterrissage : le guide à gauche, la FAQ et
   les lectures à droite. */
.mf-landing-guide { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; margin-top: 48px; }
.mf-landing-guide__reads { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mf-landing-guide__reads a { color: var(--mf-accent-dark); font-weight: 600; font-size: 14.5px; }
@media (max-width: 1080px) {
  .mf-landing-guide { grid-template-columns: 1fr; }
}

/* « En bref » de l'accueil : l'entreprise à gauche, ses questions à droite. */
.mf-home-about { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.mf-home-about h2 { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; font-weight: 800; }
.mf-home-about p { line-height: 1.6; color: var(--mf-ink-soft); }
@media (max-width: 1080px) {
  .mf-home-about { grid-template-columns: 1fr; gap: 24px; }
}

.mf-article-card h3 a:hover { color: var(--mf-accent); }
.mf-article-card__lead { font-size: 13.5px; line-height: 1.55; color: var(--mf-ink-soft); margin: 0; }
.mf-article-card__meta {
  margin: auto 0 0;
  padding-top: 6px;
  display: flex;
  gap: 7px;
  font-family: var(--mf-mono);
  font-size: 12px;
  color: var(--mf-faint);
}

.mf-article__head { margin-bottom: 26px; }
/* Illustration d'en-tête : pleine largeur de l'article, sur le fond de page,
   au format 16:9 réservé d'avance pour que rien ne bouge au chargement. */
.mf-article__visual { margin: 0 0 28px; border: 1px solid var(--mf-line); background: var(--mf-canvas); }
.mf-article__visual-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.mf-article__meta {
  margin: 14px 0 0;
  font-family: var(--mf-mono);
  font-size: 12.5px;
  color: var(--mf-faint);
}

/* Le corps hérite de `.mf-prose` ; on n'ajuste que ce que les articles
   ajoutent au vocabulaire des pages légales : tableaux, listes et encarts. */
.mf-article__body .mf-compare { margin: 22px 0; }
.mf-article__body ul { margin: 12px 0; }
.mf-article__body li { margin-bottom: 7px; }
.mf-article__body li:last-child { margin-bottom: 0; }
.mf-article__body abbr { text-decoration: none; border-bottom: 1px dotted var(--mf-line-strong); cursor: help; }
.mf-article__body .mf-note { margin: 22px 0; padding: 16px 18px; background: var(--mf-canvas-soft); border-left: 3px solid var(--mf-line-strong); }
.mf-article__body .mf-flag {
  display: inline-flex;
  width: 19px;
  height: 13px;
  margin-right: 8px;
  vertical-align: -2px;
}

.mf-article__faq, .mf-article__shop, .mf-article__related { margin-top: 44px; }

/* Encart d'achat inséré au fil du texte : assez visible pour être cliqué,
   assez sobre pour ne pas casser la lecture. */
.mf-inline-cta {
  margin: 28px 0;
  padding: 20px 22px;
  background: var(--mf-accent-tint);
  border: 1px solid var(--mf-accent-wash);
  border-left: 3px solid var(--mf-accent);
}
.mf-prose .mf-inline-cta__title { font-size: 15px; font-weight: 700; color: var(--mf-ink); margin: 0 0 6px; }
.mf-prose .mf-inline-cta__body { font-size: 13.5px; line-height: 1.55; color: var(--mf-ink-soft); margin: 0 0 14px; }

.mf-eyebrow--light { color: var(--mf-accent-light); }
.mf-eyebrow--accent { color: var(--mf-accent-dark); letter-spacing: 0.14em; }

/* --- Utilitaires --------------------------------------------------------- */

.mf-stack-sm > * + * { margin-top: 8px; }
.mf-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mf-row--between { justify-content: space-between; }
.mf-mb-0 { margin-bottom: 0; }
.mf-mt-16 { margin-top: 16px; }
.mf-mb-14 { margin-bottom: 14px; }
.mf-mb-34 { margin-bottom: 34px; }
.mf-mt-34 { margin-top: 34px; }
.mf-flex-1 { flex: 1; }
.mf-mt-26 { margin-top: 26px; }
.mf-pt-32 { padding-top: 32px; }
.mf-pb-72 { padding-bottom: 72px; }
.mf-pb-80 { padding-bottom: 80px; }
.mf-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* L'attribut `hidden` doit gagner même sur les blocs qui posent un display
   explicite (ex. .mf-radio-stack en flex). */
[hidden] { display: none !important; }

/* --- Tunnel de commande --------------------------------------------------- */

.mf-checkout { display: grid; grid-template-columns: 1fr 336px; gap: 28px; align-items: start; }
.mf-checkout__aside { position: sticky; top: 82px; }

.mf-checkout-steps {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--mf-line);
  background: var(--mf-surface);
  margin-bottom: 30px;
  overflow-x: auto;
}
.mf-checkout-steps__cell {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--mf-faint);
  white-space: nowrap;
}
.mf-checkout-steps__cell + .mf-checkout-steps__cell { border-left: 1px solid var(--mf-line); }
.mf-checkout-steps__cell.is-done { color: var(--mf-ink); }
.mf-checkout-steps__cell.is-current { background: var(--mf-accent-tint); color: var(--mf-accent-dark); font-weight: 700; }
a.mf-checkout-steps__cell:hover { text-decoration: none; background: var(--mf-canvas-soft); }
.mf-checkout-steps__dot {
  width: 24px; height: 24px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #EBEDF0; color: var(--mf-faint);
  font-family: var(--mf-mono); font-size: 11.5px; font-weight: 600;
}
.is-done .mf-checkout-steps__dot { background: var(--mf-ink); color: #fff; }
.is-current .mf-checkout-steps__dot { background: var(--mf-accent); color: #fff; }

.mf-step-card__head { padding: 22px 24px; border-bottom: 1px solid var(--mf-line-soft); }
.mf-step-card__head h1 { font-size: 22px; letter-spacing: -0.02em; margin: 0 0 6px; font-weight: 800; }
.mf-step-card__head p { font-size: 13.5px; color: var(--mf-muted); margin: 0; }
.mf-step-card__body { padding: 24px; }
.mf-step-card__footer {
  padding: 18px 24px;
  border-top: 1px solid var(--mf-line-soft);
  display: flex; align-items: center; gap: 12px;
}
.mf-step-card__error {
  margin: 0 24px 18px;
  border: 1px solid #B34A1F; background: #FDF3EF;
  padding: 12px 14px; font-size: 13px; color: #8A3915;
}

.mf-field { display: block; margin-bottom: 14px; }
.mf-field > span { display: block; font-size: 12px; font-weight: 600; color: var(--mf-ink-soft); margin-bottom: 6px; }
.mf-field > span em { color: var(--mf-faint); font-weight: 400; font-style: normal; }
.mf-field input, .mf-field select {
  width: 100%; border: 1px solid var(--mf-line);
  padding: 11px 12px; font-size: 14px;
  font-family: var(--mf-sans); color: var(--mf-ink); background: #fff;
}
.mf-field input:focus, .mf-field select:focus { outline: 2px solid var(--mf-accent); outline-offset: -1px; }
.mf-field--mono input { font-family: var(--mf-mono); }
.mf-field__hint { display: block; font-size: 11.5px; color: var(--mf-muted); margin-top: 6px; }
.mf-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mf-field-grid--zip { grid-template-columns: 140px 1fr; }
.mf-field-grid .mf-field { margin-bottom: 0; }
.mf-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.mf-fieldset + .mf-fieldset { border-top: 1px solid var(--mf-line-soft); margin-top: 18px; padding-top: 16px; }

.mf-check-toggle { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--mf-ink); }
.mf-check-toggle input {
  appearance: none; width: 18px; height: 18px; flex: none; margin: 0;
  border: 1px solid var(--mf-on-dark); background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mf-check-toggle input:checked { background: var(--mf-accent); border-color: var(--mf-accent); }
.mf-check-toggle input:checked::after { content: "✓"; color: #fff; font-size: 11px; }
.mf-check-toggle__note { font-size: 12px; color: var(--mf-muted); margin: 10px 0 0 28px; line-height: 1.5; }

.mf-subpanel { border: 1px solid var(--mf-line-soft); padding: 18px; margin-top: 16px; }

/* --- Identification : connexion, création de compte, commande sans compte --
   Deux cartes côte à côte avant le tunnel ; une seule, centrée, sur les pages
   /login et /signup. Les cartes reprennent l'en-tête et le corps des étapes
   du tunnel (.mf-step-card__*). */

.mf-auth__head { margin-bottom: 24px; }
.mf-auth__head h1 { font-size: 30px; letter-spacing: -0.022em; margin: 0 0 8px; font-weight: 800; }
.mf-auth__head p { font-size: 14px; color: var(--mf-muted); margin: 0; }
.mf-auth__head p .mf-mono { color: var(--mf-ink); font-weight: 600; }

.mf-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.mf-auth--single { grid-template-columns: minmax(0, 460px); justify-content: center; }
.mf-auth .mf-step-card__head h2 { font-size: 22px; letter-spacing: -0.02em; margin: 0 0 6px; font-weight: 800; }
/* Le bleu foncé : le bleu d'accent est trop pâle pour un lien de 13 px. */
.mf-auth a, .mf-auth__head a { color: var(--mf-accent-dark); font-weight: 600; }

/* Le message d'erreur vit dans le corps de la carte, au-dessus du champ en
   cause : il n'a plus les marges latérales qu'il porte sous un en-tête. */
.mf-auth__error { margin: 0 0 16px; line-height: 1.5; }
.mf-auth__error p { margin: 0; }
.mf-auth__error p + p { margin-top: 4px; }

.mf-auth__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap;
  margin: 2px 0 18px; font-size: 13px;
}
.mf-auth__note { font-size: 13px; color: var(--mf-muted); line-height: 1.5; margin: 0 0 16px; }
.mf-auth__foot {
  margin: 0; padding: 16px 24px;
  border-top: 1px solid var(--mf-line-soft);
  font-size: 13.5px; color: var(--mf-muted);
}

/* Création de compte, repliée sous la commande sans compte. */
.mf-auth__more { border-top: 1px solid var(--mf-line-soft); }
.mf-auth__more > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 24px; font-size: 14px; font-weight: 700;
}
.mf-auth__more > summary::-webkit-details-marker { display: none; }
.mf-auth__more > summary:hover { background: var(--mf-canvas-soft); }
.mf-auth__more > summary em { color: var(--mf-muted); font-weight: 400; font-style: normal; }
.mf-auth__more > .mf-step-card__body { padding-top: 4px; }
.mf-auth__chevron { color: var(--mf-muted); font-size: 12px; transition: transform 0.15s; }
.mf-auth__more[open] .mf-auth__chevron { transform: rotate(180deg); }

@media (max-width: 760px) {
  .mf-auth { grid-template-columns: 1fr; gap: 16px; }
  .mf-auth__head h1 { font-size: 24px; }
  .mf-auth .mf-step-card__head h2 { font-size: 20px; }
  .mf-auth__more > summary, .mf-auth__foot { padding-left: 18px; padding-right: 18px; }
}
.mf-subpanel > .mf-eyebrow { margin-bottom: 14px; }

.mf-radio-stack { display: flex; flex-direction: column; gap: 9px; }
.mf-radio-card {
  display: flex; align-items: center; gap: 14px; text-align: left;
  border: 1px solid var(--mf-line); background: var(--mf-surface); color: var(--mf-ink);
  padding: 15px 16px; cursor: pointer; margin: 0;
}
.mf-radio-card input[type="radio"] {
  appearance: none; width: 16px; height: 16px; flex: none; margin: 0;
  border: 1px solid var(--mf-on-dark); background: #fff; border-radius: 50%; cursor: pointer;
}
.mf-radio-card:has(input:checked) { border-color: var(--mf-accent); background: var(--mf-accent-tint); }
.mf-radio-card:has(input:checked) input[type="radio"] {
  border-color: var(--mf-accent); background: var(--mf-accent);
  box-shadow: inset 0 0 0 3px var(--mf-accent-tint);
}
.mf-radio-card__info { flex: 1; min-width: 0; }
.mf-radio-card__info strong { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.mf-radio-card__info em { display: block; font-size: 12.5px; opacity: 0.75; font-style: normal; }
.mf-radio-card__price { font-family: var(--mf-mono); font-size: 14px; white-space: nowrap; flex: none; }
.mf-radio-card__details {
  border: 1px solid var(--mf-line-soft); border-top: 0;
  padding: 16px; margin: 0; min-width: 0; background: var(--mf-surface);
}
.mf-radio-card__details[disabled] { display: none; }

.mf-subpanel--accent { border-color: var(--mf-accent); background: var(--mf-accent-tint); }
.mf-subpanel--accent strong { display: block; font-size: 13.5px; font-weight: 700; margin: 0 0 6px; }
.mf-subpanel--accent p { font-size: 12.5px; color: var(--mf-ink-soft); line-height: 1.55; margin: 0; }

.mf-parcel-box { border: 1px solid var(--mf-line-soft); background: var(--mf-canvas-soft); padding: 16px 18px; margin-top: 20px; }
.mf-parcel-box .mf-eyebrow { margin-bottom: 10px; }
.mf-parcel-box__line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin: 0 0 7px; }
.mf-parcel-box__line span:last-child { font-family: var(--mf-mono); color: var(--mf-muted); white-space: nowrap; }
.mf-parcel-box__note { font-size: 12.5px; color: var(--mf-muted); margin: 10px 0 0; line-height: 1.5; }

.mf-relay { border: 1px solid var(--mf-line-soft); padding: 18px; margin-top: 20px; }
.mf-relay > .mf-eyebrow { margin-bottom: 12px; }
.mf-relay-map { height: 380px; border: 1px solid var(--mf-line); }
.mf-relay-chosen {
  margin-top: 12px; padding: 12px 14px;
  background: var(--mf-accent-tint); border: 1px solid #D8E2FB;
  font-size: 13px; line-height: 1.5;
}
.mf-relay-chosen strong { display: block; font-size: 12px; margin-bottom: 3px; color: var(--mf-accent-dark); }
.mf-relay-option { padding: 11px 13px; }
.mf-relay-option strong { font-size: 13px; }
.mf-relay-option em { font-size: 11.5px; }
.mf-relay-note { font-size: 12.5px; color: var(--mf-muted); line-height: 1.5; margin: 0; }

/* Coordonnées de virement : sans bordure propre, le bloc se pose aussi bien
   dans le repli d'un moyen de paiement que sur la page de confirmation. */
.mf-bank > .mf-eyebrow { margin-bottom: 12px; }
.mf-bank__list {
  margin: 0; display: grid; gap: 1px;
  background: var(--mf-line-soft); border: 1px solid var(--mf-line-soft);
}
.mf-bank__row {
  background: var(--mf-surface); padding: 10px 13px;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; flex-wrap: wrap;
}
.mf-bank__row dt { font-size: 12.5px; color: var(--mf-muted); margin: 0; }
.mf-bank__row dd { margin: 0; font-size: 13.5px; font-weight: 600; text-align: right; }
.mf-bank__row--key { background: var(--mf-accent-tint); }
.mf-bank__code { font-family: var(--mf-mono); letter-spacing: 0.03em; word-break: break-all; }
.mf-bank .mf-fineprint { margin: 12px 0 0; }
.mf-relay-error {
  margin: 12px 0 0; padding: 11px 13px;
  border: 1px solid #C0392B; background: #FDECEA;
  font-size: 13px; color: #96271B;
}

.mf-recap-rows { border: 1px solid var(--mf-line-soft); margin-bottom: 18px; }
.mf-recap-row { display: flex; align-items: flex-start; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--mf-line-soft); }
.mf-recap-row:last-child { border-bottom: 0; }
.mf-recap-row__label {
  font-family: var(--mf-mono); font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--mf-muted); width: 90px; flex: none; padding-top: 2px;
}
.mf-recap-row__value { flex: 1; font-size: 13.5px; line-height: 1.55; color: var(--mf-ink); }
.mf-recap-row__edit { font-size: 12.5px; font-weight: 700; flex: none; }

.mf-confirm-lines { border: 1px solid var(--mf-line-soft); }
.mf-confirm-line { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--mf-line-soft); }
.mf-confirm-line:last-child { border-bottom: 0; }
.mf-confirm-line__media {
  position: relative;
  width: 52px; height: 42px; flex: none;
  border: 1px solid var(--mf-line);
  background: repeating-linear-gradient(135deg, #EBEDF0 0 6px, #F8F9FA 6px 12px);
}
.mf-confirm-line__info { flex: 1; min-width: 0; }
.mf-confirm-line__info strong { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.mf-confirm-line__info em { display: block; font-size: 12px; color: var(--mf-muted); font-style: normal; }
.mf-confirm-line__info em.is-sub { color: var(--mf-accent); }
.mf-confirm-line__qty { font-family: var(--mf-mono); font-size: 13px; color: var(--mf-muted); flex: none; }
.mf-confirm-line__total { font-family: var(--mf-mono); font-size: 14px; font-weight: 600; width: 84px; text-align: right; flex: none; }

.mf-legal-note { font-size: 12px; color: var(--mf-muted); line-height: 1.55; margin: 16px 0 0; }

.mf-aside-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin: 0 0 9px; }
.mf-aside-line span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-aside-line span:last-child { font-family: var(--mf-mono); white-space: nowrap; }

/* --- Commande confirmée --------------------------------------------------- */

.mf-complete__banner { background: var(--mf-accent); color: #fff; padding: 30px 32px; }
.mf-complete__banner .mf-eyebrow--light { color: rgba(255, 255, 255, 0.85); margin-bottom: 12px; }
.mf-complete__banner h1 { font-size: 30px; letter-spacing: -0.022em; margin: 0 0 10px; font-weight: 800; }
.mf-complete__banner p { font-size: 15px; line-height: 1.55; margin: 0; opacity: 0.92; max-width: 56ch; }
.mf-complete__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--mf-line); border-bottom: 1px solid var(--mf-line);
}
.mf-complete__cell { background: var(--mf-surface); padding: 20px 22px; }
.mf-complete__cell .mf-eyebrow { margin-bottom: 9px; }
.mf-complete__cell h2 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.mf-complete__cell p { font-size: 13.5px; line-height: 1.5; margin: 0; }
.mf-complete__cell p + .mf-eyebrow { margin-top: 12px; margin-bottom: 7px; }
.mf-complete__cell .mf-muted-line { font-size: 12.5px; color: var(--mf-muted); }
.mf-complete__cell .mf-total { font-family: var(--mf-mono); font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.mf-complete__sub {
  background: var(--mf-accent-tint); border-bottom: 1px solid #DDE4F5;
  padding: 22px 32px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.mf-complete__sub-info { flex: 1; min-width: 240px; }
.mf-complete__sub-info strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.mf-complete__sub-info span { display: block; font-size: 13.5px; color: var(--mf-ink-soft); line-height: 1.5; }
.mf-complete__bank { padding: 22px 32px; border-bottom: 1px solid var(--mf-line-soft); }
.mf-complete__items { padding: 22px 32px; border-bottom: 1px solid var(--mf-line-soft); }
.mf-complete__items .mf-eyebrow { margin-bottom: 14px; }
.mf-complete__actions { padding: 22px 32px; display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Habillage mobile (inerte sur bureau) --------------------------------- */

/* Ces composants ne servent qu'en petit écran (barres collantes, feuille de
   filtres, progression en segments…) : masqués par défaut, le breakpoint
   mobile les active et les met en forme. */
.mf-burger,
.mf-progress-mobile,
.mf-summary-sheet,
.mf-step-card__total,
.mf-cart-bar,
.mf-catalog-bar,
.mf-subscribe-bar,
.mf-filter-sheet__head,
.mf-filter-sheet__foot,
.mf-sheet-backdrop,
.mf-guide-tabs,
.mf-guide-bar,
.mf-stage__toggle { display: none; }

/* Posée sur <body> quand la feuille de filtres est ouverte. */
.mf-no-scroll { overflow: hidden; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1080px) {
  .mf-hero { grid-template-columns: 1fr; gap: 28px; }
  .mf-hero h1 { font-size: 40px; }
  .mf-hero h1.mf-hero__title { font-size: 36px; }
  .mf-subscribe-band { grid-template-columns: 1fr; gap: 32px; }
  .mf-pledge { gap: 32px; }
  .mf-pledge h2 { font-size: 30px; }
  .mf-manuf-hero { grid-template-columns: 1fr; gap: 32px; }
  .mf-manuf-hero h1 { font-size: 36px; }
  .mf-manuf-vow { grid-template-columns: 1fr; gap: 24px; }
  .mf-versus-pair { grid-template-columns: 1fr; }
  .mf-atelier-grid { grid-template-columns: 1fr; }
  .mf-catalog { grid-template-columns: 1fr; }
  .mf-catalog__aside { position: static; }
  .mf-product { grid-template-columns: 1fr; gap: 28px; }
  .mf-cart { grid-template-columns: 1fr; }
  .mf-conf__cards { grid-template-columns: 1fr; }
  .mf-pitch { grid-template-columns: 1fr; padding: 20px; }
  .mf-pitch__claim h2 { font-size: 21px; }

  /* Une colonne : le récapitulatif passe sous les lignes, et l'offre
     d'abonnement se lirait après le bouton « Passer commande », donc trop
     tard. On la remonte juste sous le panier, avant le total. */
  .mf-cart > .mf-panel:not(.mf-cart__aside) { order: 1; }
  .mf-cart > .mf-pitch { order: 2; }
  .mf-cart > .mf-cart__aside { order: 3; }
  .mf-cart > .mf-upsell--need { order: 4; }
  .mf-cart > .mf-pitch { margin-top: 0; }
  .mf-cart__aside { position: static; }
  .mf-subconf { grid-template-columns: 1fr; }
  .mf-checkout { grid-template-columns: 1fr; }
  .mf-checkout__aside { position: static; }
  .mf-complete__grid { grid-template-columns: 1fr; }
  .mf-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .mf-account-commitment { grid-template-columns: 1fr; gap: 20px; }
  .mf-account-commitment__clawback { text-align: left; }
  .mf-footer__cols { grid-template-columns: 1fr 1fr; }
}

/* Mobile (design 402 pt) : cibles tactiles 44–48 px, champs à 16 px pour
   éviter le zoom automatique iOS, et l'action principale toujours sous le
   pouce dans une barre collante. */
@media (max-width: 760px) {
  :root { --mf-gutter: 16px; }

  /* -- Base : grilles empilées, typo resserrée -- */
  .mf-grid--2, .mf-grid--3, .mf-grid--4 { grid-template-columns: 1fr; }
  .mf-stats { grid-template-columns: repeat(2, 1fr); }
  /* Trois cases restent tenables en largeur mobile ; les passer à deux
     laisserait une quatrième case vide, lue comme une donnée manquante. */
  .mf-stats--3 { grid-template-columns: repeat(3, 1fr); }
  .mf-stats--3 > div { padding: 12px 10px; }
  .mf-rule-grid { grid-template-columns: 1fr !important; }
  .mf-steps { grid-template-columns: 1fr; }
  /* Les quatre chiffres restent en damier 2×2 : les empiler donnerait une
     colonne de quatre écrans de haut avant le premier contenu utile. */
  /* Les quatre chiffres restent en damier 2×2 : les empiler donnerait une
     colonne de quatre écrans de haut avant le premier contenu utile. */
  .mf-facts > div { padding: 16px 14px; }
  .mf-facts dt, .mf-facts--dark dt { font-size: 23px; }
  .mf-pledge h2, .mf-manuf-hero h1 { font-size: 27px; }
  .mf-manuf-title, .mf-manuf-head h2 { font-size: 24px; }
  .mf-manuf-rubric { font-size: 13px; }
  .mf-versus__list li { padding: 14px 16px 14px 38px; }
  .mf-versus__list li::before { left: 16px; }
  .mf-versus__head { padding: 16px; }
  .mf-atelier__body { padding: 16px; }
  .mf-manuf-vow h2 { font-size: 26px; }
  .mf-manuf-vow .mf-btn { width: 100%; justify-content: center; }
  .mf-pt-52 { padding-top: 32px; }
  .mf-pb-52 { padding-bottom: 32px; }
  .mf-footer__cols { grid-template-columns: 1fr; }
  .mf-compare { display: block; overflow-x: auto; }
  .mf-page h1, .mf-page__title { font-size: 26px; }

  /* -- Espace client : les onglets deviennent un rail qui défile, les lignes
        se replient, et les commandes s'empilent au lieu de se serrer -- */
  .mf-account h1 { font-size: 28px; }
  .mf-account__nav {
    max-width: none;
    flex-basis: 100%;
    display: flex;
    overflow-x: auto;
    border-left: 0;
    border-right: 0;
  }
  .mf-account__tab {
    flex: 1 0 auto;
    border-bottom: 0;
    border-left: 0;
    border-top: 3px solid transparent;
    justify-content: center;
  }
  .mf-account__tab.is-active { border-left-color: transparent; border-top-color: var(--mf-accent); }
  .mf-account__help { display: none; }
  .mf-account-sub { padding: 18px 16px; gap: 14px; }
  .mf-account-sub__facts { gap: 16px; }
  .mf-account-sub__actions { flex: 1 1 100%; }
  .mf-account-sub__actions form, .mf-account-sub__actions .mf-btn { flex: 1; }
  .mf-account-order { grid-template-columns: 1fr; gap: 12px; padding: 18px 16px; }
  .mf-account-order__total { text-align: left; display: flex; align-items: center; gap: 16px; }
  .mf-account-order__total .mf-mono { margin: 0; }
  .mf-account-infos { gap: 16px; }
  .mf-article-group { margin-bottom: 32px; }
  .mf-article__faq, .mf-article__shop, .mf-article__related { margin-top: 32px; }
  .mf-inline-cta { padding: 16px 18px; }
  .mf-inline-cta .mf-btn { width: 100%; justify-content: center; }
  .mf-origin--card {
    bottom: 10px;
    left: -6px;
    gap: 7px;
    padding: 5px 11px 5px 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.11em;
    box-shadow: 0 3px 11px rgb(18 22 26 / 0.16);
  }
  .mf-origin--card .mf-flag { width: 16px; height: 11px; }
  .mf-origin--hero {
    top: 20px;
    left: -8px;
    gap: 10px;
    padding: 9px 17px 9px 13px;
    font-size: 12.5px;
    letter-spacing: 0.13em;
    box-shadow: 0 4px 16px rgb(18 22 26 / 0.18);
  }
  .mf-origin--hero .mf-flag { width: 24px; height: 16px; }

  /* -- Sélecteur : la vignette se réduit pour laisser la ligne respirer -- */
  .mf-reco__body { gap: 12px; padding: 18px 16px; }
  .mf-reco__media { width: 56px; height: 56px; }
  .mf-reco__actions { flex-direction: row; flex: 1 1 100%; }
  .mf-reco__actions form, .mf-reco__actions .mf-btn { flex: 1; }
  .mf-reco__total { padding: 14px 16px; }
  .mf-reco__total form, .mf-reco__total .mf-btn { width: 100%; }
  .mf-variant__buy { flex: 1 1 100%; justify-content: space-between; }

  /* -- Cibles tactiles et champs -- */
  .mf-btn { min-height: 48px; }
  .mf-btn--quiet { min-height: 0; }
  .mf-field input, .mf-field select { font-size: 16px; padding: 13px 12px; }
  .mf-stepper button { width: 44px; height: 44px; }
  .mf-stepper input { font-size: 16px; height: 44px; }
  .mf-option-row .mf-pill, .mf-filter-wrap .mf-pill { padding: 10px 14px; }
  .mf-mode-tabs button { padding: 14px 12px; }

  /* -- Bandeau et en-tête : une ligne qui défile, pas d'empilement -- */
  .mf-topbar__inner { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; gap: 14px; }
  .mf-topbar__spacer { display: none; }
  .mf-header__inner { height: 58px; gap: 10px; }
  .mf-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: -12px;
    flex: none;
    background: none;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--mf-ink);
    cursor: pointer;
  }
  /* Place comptée : sur mobile le panier garde l'icône et le compteur,
     le montant reste sur la page panier. */
  .mf-cart-button { padding: 10px 12px; gap: 8px; }
  .mf-cart-button__total { display: none; }
  /* Le libellé du compte disparaît : l'icône suffit, la place manque. */
  .mf-account-button { width: 38px; height: 38px; padding: 0; margin-right: 0; }
  .mf-search-button { width: 38px; height: 38px; margin-right: 0; }
  .mf-account-button__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* La navigation vit dans le burger : panneau déplié sous l'en-tête. */
  .mf-nav { display: none; }
  .mf-nav.is-open {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--mf-surface);
    border-bottom: 1px solid var(--mf-line);
    box-shadow: 0 14px 34px rgba(18, 22, 26, 0.12);
    padding: 4px 0 8px;
    white-space: normal;
  }
  .mf-nav.is-open a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px var(--mf-gutter);
    font-size: 15px;
    border-bottom: 1px solid var(--mf-line-soft);
  }
  .mf-nav.is-open a:last-child { border-bottom: 0; }

  /* -- Accueil : CTA pleine largeur, besoins en lignes compactes -- */
  .mf-hero { padding-top: 26px; padding-bottom: 30px; }
  .mf-hero h1 { font-size: 30px; }
  .mf-hero h1.mf-hero__title { font-size: 28px; }
  .mf-hero__slogan { font-size: 18px; }
  .mf-hero__actions .mf-btn { width: 100%; }
  .mf-route { padding: 18px; }
  .mf-route__title { font-size: 18px; }
  .mf-need { flex-direction: row; align-items: center; gap: 13px; padding: 14px 16px; }
  .mf-need__media { width: 46px; height: 46px; flex: none; border: 1px solid var(--mf-line); }
  .mf-need__media img { object-position: center; }
  .mf-need__body { padding: 0; flex: 1; min-width: 0; }
  .mf-need__name { font-size: 15.5px; margin-bottom: 3px; }
  .mf-need__tagline { min-height: 0; margin-bottom: 0; font-size: 12.5px; }
  .mf-need__meta { display: none; }
  .mf-subscribe-band { padding-top: 36px; padding-bottom: 36px; }
  .mf-subscribe-band h2 { font-size: 27px; }
  .mf-subscribe-band .mf-row .mf-btn { width: 100%; }

  /* -- Rangée défilante (meilleures ventes) -- */
  .mf-scroll-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-right: calc(var(--mf-gutter) * -1);
    padding-right: var(--mf-gutter);
  }
  .mf-scroll-row > * { width: 176px; flex: none; }

  /* -- Catalogue : rayon pleine largeur, sidebar en feuille remontante -- */
  .mf-shelf-tabs { width: 100%; }
  .mf-shelf-tabs a { flex: 1; justify-content: center; }
  .mf-catalog__aside {
    position: fixed;
    top: auto; /* neutralise le sticky top de la version bureau */
    left: 0; right: 0; bottom: 0;
    z-index: 130;
    max-height: 76dvh;
    overflow: auto;
    overscroll-behavior: contain;
    transform: translateY(105%);
    transition: transform 0.25s ease;
    border: 0;
    border-top: 1px solid #C4CAD0;
    box-shadow: 0 -14px 34px rgba(18, 22, 26, 0.18);
  }
  .mf-catalog__aside.is-open { transform: translateY(0); }
  .mf-filter-sheet__head {
    display: block;
    position: sticky; top: 0; z-index: 2;
    background: var(--mf-surface);
    border-bottom: 1px solid var(--mf-line-soft);
    padding: 10px 16px 12px;
  }
  .mf-filter-sheet__head strong { font-size: 17px; letter-spacing: -0.015em; }
  .mf-filter-sheet__handle {
    display: block;
    width: 44px; height: 4px;
    background: #C4CAD0;
    border-radius: 99px;
    margin: 0 auto 12px;
  }
  .mf-filter-sheet__foot {
    display: block;
    position: sticky; bottom: 0; z-index: 2;
    background: var(--mf-surface);
    border-top: 1px solid var(--mf-line-soft);
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  }
  .mf-sheet-backdrop {
    display: block;
    position: fixed; inset: 0;
    z-index: 120;
    background: rgba(18, 22, 26, 0.45);
  }
  .mf-catalog-bar {
    display: flex;
    gap: 10px;
    position: sticky; bottom: 0;
    z-index: 40;
    background: var(--mf-canvas);
    margin-top: 12px;
    padding: 10px 0 calc(12px + env(safe-area-inset-bottom));
  }
  .mf-catalog-bar .mf-btn--dark { flex: 1; }

  /* -- Fiche produit : prix + « Ajouter au panier » collants -- */
  .mf-product h1 { font-size: 25px; }
  .mf-buybox__footer {
    position: sticky; bottom: 0;
    z-index: 30;
    background: var(--mf-surface);
    margin: 0 -20px -20px;
    padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--mf-line);
  }
  .mf-buybox__footer input[type="submit"] { flex: 1; }
  .mf-buybox__price { font-size: 22px; }

  /* -- Abonnement : les montages types deviennent un rail défilant, la ligne
        se déplie sur deux niveaux, et le total suit le pouce. -- */
  .mf-subconf__presets .mf-grid--3 {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--mf-gutter));
    padding: 0 var(--mf-gutter);
  }
  .mf-preset { width: 196px; flex: none; }
  .mf-subconf__picker { grid-template-columns: 1fr; }
  /* La vignette et le nom se partagent la première ligne, les réglages
     reprennent toute la largeur en dessous : à 375 pt, les coincer à côté de
     la photo les empilerait un par un sur trois lignes. */
  .mf-subline {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 4px 12px;
    padding: 16px;
  }
  .mf-subline__rank { display: none; }
  .mf-subline__body { display: contents; }
  .mf-media--line { width: 108px; height: 81px; grid-column: 1; grid-row: 1 / span 2; }
  .mf-subline__head, .mf-subline__ref { grid-column: 2; }
  .mf-subline__ref { margin-bottom: 0; }
  .mf-subline__controls, .mf-subline__warn { grid-column: 1 / -1; margin-top: 12px; }
  .mf-subline .mf-cart-line__remove { grid-column: 3; grid-row: 1; align-self: start; }
  .mf-origin--tight { font-size: 8px; letter-spacing: 0.08em; gap: 5px; padding: 4px 7px 4px 6px; }
  .mf-origin--tight .mf-flag { width: 12px; height: 8px; }
  .mf-subline__controls { gap: 16px; }
  .mf-subline__rhythm { min-width: 0; }
  .mf-subline__cost { min-width: 0; }
  .mf-stepper__value { width: 40px; font-size: 16px; }
  .mf-subconf .mf-cart__aside .mf-panel__section:last-child {
    position: sticky; bottom: 0;
    z-index: 30;
    background: var(--mf-surface);
    border-top: 1px solid var(--mf-line);
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* -- Tunnel : segments + récap replié + barre d'action collante -- */
  .mf-checkout-steps { display: none; }
  .mf-progress-mobile { display: block; margin-bottom: 14px; }
  .mf-progress-mobile__track { display: flex; gap: 6px; margin-bottom: 8px; }
  .mf-progress-mobile__track span { flex: 1; height: 3px; background: var(--mf-line); }
  .mf-progress-mobile__track .is-done { background: var(--mf-ink); }
  .mf-progress-mobile__track .is-current { background: var(--mf-accent); }
  .mf-progress-mobile__label {
    margin: 0;
    font-family: var(--mf-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mf-accent-dark);
  }

  .mf-checkout__aside { display: none; }
  .mf-summary-sheet { display: block; margin-bottom: 16px; }
  .mf-summary-sheet > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
  }
  .mf-summary-sheet > summary::-webkit-details-marker { display: none; }
  .mf-summary-sheet[open] > summary { border-bottom: 1px solid var(--mf-line-soft); }
  .mf-summary-sheet__info { flex: 1; min-width: 0; }
  .mf-summary-sheet__info strong { display: block; font-size: 14px; margin-bottom: 3px; }
  .mf-summary-sheet__info em {
    display: block;
    font-size: 12.5px;
    color: var(--mf-muted);
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mf-summary-sheet__total { font-size: 15px; font-weight: 600; flex: none; }
  .mf-summary-sheet__chevron { color: var(--mf-muted); font-size: 12px; flex: none; transition: transform 0.15s; }
  .mf-summary-sheet[open] .mf-summary-sheet__chevron { transform: rotate(180deg); }

  .mf-step-card__head { padding: 18px; }
  .mf-step-card__head h1 { font-size: 20px; }
  .mf-step-card__body { padding: 18px; }
  .mf-step-card__footer {
    position: sticky; bottom: 0;
    z-index: 40;
    background: var(--mf-surface);
    border-top: 1px solid var(--mf-line);
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    flex-wrap: wrap;
    gap: 10px;
  }
  .mf-step-card__footer .mf-flex-1 { display: none; }
  .mf-step-card__total {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: baseline;
    order: 1;
  }
  .mf-step-card__total > span { font-size: 13px; color: var(--mf-muted); }
  .mf-step-card__total strong { font-size: 19px; font-weight: 600; }
  .mf-step-card__footer .mf-btn { order: 2; width: 100%; }
  .mf-step-card__footer .mf-btn--quiet { order: 3; width: 100%; text-align: center; }
  .mf-relay-map { height: 300px; }

  /* Récap de confirmation : libellé + « Modifier » sur la première ligne,
     valeur en dessous (le tableau à trois colonnes ne passe pas). */
  .mf-recap-row { flex-wrap: wrap; gap: 6px 12px; }
  .mf-recap-row__label { flex: 1; width: auto; padding-top: 0; }
  .mf-recap-row__edit { order: 2; }
  .mf-recap-row__value { order: 3; flex: none; width: 100%; }

  /* -- Abonnement : « Souscrire » collant, du premier choix à la FAQ. Celui
        de la colonne s'efface, la barre dit déjà la même chose. -- */
  .mf-subconf__submit { display: none; }
  .mf-subscribe-bar {
    display: block;
    position: sticky; bottom: 0;
    z-index: 40;
    background: var(--mf-surface);
    border-top: 1px solid var(--mf-line);
    margin: 16px calc(var(--mf-gutter) * -1) 0;
    padding: 12px var(--mf-gutter) calc(14px + env(safe-area-inset-bottom));
  }

  /* -- Panier : total + « Passer commande » collants -- */
  .mf-cart-bar {
    display: block;
    position: sticky; bottom: 0;
    z-index: 40;
    background: var(--mf-surface);
    border-top: 1px solid var(--mf-line);
    margin: 16px calc(var(--mf-gutter) * -1) 0;
    padding: 12px var(--mf-gutter) calc(14px + env(safe-area-inset-bottom));
  }
  .mf-cart-bar__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 10px;
  }
  .mf-cart-bar__total > span { font-size: 13px; color: var(--mf-muted); }
  .mf-cart-bar__total strong { font-size: 19px; font-weight: 600; }
  .mf-cart-line { gap: 13px; }
  .mf-cart-line__total { width: auto; }

  /* -- Le guide : trois onglets, un volet visible à la fois -- */
  .mf-guide-tabs {
    display: block;
    position: sticky;
    top: 59px; /* hauteur de l'en-tête collant en petit écran, filet compris */
    z-index: 45;
    background: var(--mf-surface);
    border-bottom: 1px solid var(--mf-line);
  }
  .mf-guide-tabs__inner { display: flex; gap: 4px; }
  .mf-guide-tabs__tab {
    flex: 1;
    min-height: 48px;
    padding: 13px 4px;
    background: none;
    border: 0;
    border-bottom: 2px solid var(--mf-line-soft);
    font-size: 12px;
    font-weight: 600;
    color: var(--mf-faint);
    white-space: nowrap;
    cursor: pointer;
  }
  .mf-guide-tabs__tab[aria-current="true"] {
    color: var(--mf-ink);
    font-weight: 700;
    border-bottom-color: var(--mf-accent);
  }
  .mf-guide[data-guide-tab-value="parcours"] .mf-guide__panel:not([data-guide-key="parcours"]),
  .mf-guide[data-guide-tab-value="problemes"] .mf-guide__panel:not([data-guide-key="problemes"]),
  .mf-guide[data-guide-tab-value="montage"] .mf-guide__panel:not([data-guide-key="montage"]) { display: none; }

  /* Action principale du volet, sous le pouce. Le dernier volet n'en a pas :
     il se termine déjà sur les deux boutons d'abonnement. */
  .mf-guide-bar {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 40;
    margin-top: 18px;
    background: var(--mf-surface);
    border-top: 1px solid var(--mf-line);
    padding: 12px 0 calc(14px + env(safe-area-inset-bottom));
  }

  .mf-guide__section { padding-top: 18px; }
  .mf-guide__head { margin-bottom: 14px; }
  .mf-guide__head h2 {
    font-family: var(--mf-sans);
    font-size: 17px;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--mf-ink);
    font-weight: 700;
  }
  .mf-guide__head p { font-size: 13.5px; }

  .mf-guide-hero { padding-top: 24px; }
  .mf-guide-hero h1 { font-size: 30px; line-height: 1.06; letter-spacing: -0.025em; }
  .mf-guide-hero__lead { font-size: 14px; margin-bottom: 26px; }

  /* Le parcours passe à la verticale : c'est le sens du scroll, et l'ordre
     des étages reste lisible. La conduite est tronçonnée entre les pastilles,
     ce qui la rend indépendante de la longueur des textes. */
  .mf-pipeline { grid-template-columns: 1fr; gap: 0; padding-bottom: 28px; }
  .mf-pipeline::before { display: none; }
  .mf-pipeline__station {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 16px;
    padding-bottom: 22px;
  }
  .mf-pipeline__station:last-child { padding-bottom: 0; }
  .mf-pipeline__station:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 32px;  /* sous la pastille */
    bottom: 0;  /* jusqu'à la pastille suivante */
    width: 4px;
    background: var(--mf-accent);
  }
  .mf-pipeline__station--start::before { background: linear-gradient(180deg, var(--mf-line-dim), var(--mf-accent)); }
  .mf-pipeline__station:nth-last-child(2)::before { background: linear-gradient(180deg, var(--mf-accent), var(--mf-accent-light)); }
  .mf-pipeline__dot { grid-row: 1 / span 3; width: 32px; height: 32px; margin-bottom: 0; }
  .mf-pipeline__tag { margin-bottom: 6px; padding-top: 4px; }
  .mf-pipeline__title { font-size: 17px; margin-bottom: 5px; }
  .mf-pipeline__body { font-size: 13px; }

  /* Le comparatif garde son en-tête : sans lui, deux colonnes de valeurs ne
     disent plus laquelle est la bobinée. */
  .mf-duel { font-size: 12.5px; }
  .mf-duel thead th { padding: 10px 12px; font-size: 10px; letter-spacing: 0.06em; white-space: normal; }
  .mf-duel thead th:first-child { width: 32%; }
  .mf-duel tbody th, .mf-duel td { padding: 10px 12px; font-size: 12.5px; }

  /* Les trois étages deviennent un accordéon : un seul ouvert à la fois. */
  .mf-stages { gap: 10px; }
  .mf-stage__toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 76px;
    padding: 18px;
    background: none;
    border: 0;
    text-align: left;
    color: var(--mf-ink);
    cursor: pointer;
  }
  .mf-stage.is-open .mf-stage__toggle { display: none; }
  .mf-stage__rank {
    display: block;
    font-family: var(--mf-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--mf-accent-dark);
    margin-bottom: 7px;
  }
  .mf-stage__name { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.018em; margin-bottom: 4px; }
  .mf-stage__summary { display: block; font-size: 12.5px; line-height: 1.4; color: var(--mf-muted); }
  .mf-stage__chevron { flex: none; font-size: 15px; color: var(--mf-muted); }

  .mf-stage__panel { display: none; grid-template-columns: 1fr; grid-template-rows: auto; }
  .mf-stage.is-open .mf-stage__panel { display: grid; }
  .mf-stage__side {
    grid-row: 1;
    padding: 18px 18px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--mf-line-soft);
  }
  .mf-stage__side h3 { font-size: 24px; }
  .mf-stage__what { font-size: 13.5px; margin-bottom: 16px; }
  .mf-stage__signs { font-size: 13px; }
  .mf-stage__main { grid-column: 1; grid-row: 2; padding: 16px 18px 0; }
  .mf-stage__cta {
    grid-column: 1;
    grid-row: 3;
    padding: 18px;
    background: var(--mf-surface);
    border-right: 0;
  }
  .mf-stage__options, .mf-stage__options--3 { grid-template-columns: 1fr; }
  .mf-stage__options > * { padding: 15px 16px; }
  .mf-option__name { font-size: 16px; }
  .mf-option__how, .mf-option__when { font-size: 13px; }
  .mf-pitfall { padding-left: 14px; }
  .mf-pitfall p:last-child { font-size: 13px; }

  /* Les six cas en cartes pleine largeur (mf-grid--3 est déjà empilé). */
  .mf-cases { gap: 12px; }
  .mf-case__head { padding: 16px 18px 14px; }
  .mf-case__head h3 { font-size: 18px; }
  .mf-case__head p { font-size: 12.5px; }
  .mf-case__chain { padding: 14px 18px 4px; }
  .mf-case__foot { padding: 0 18px 16px; }

  .mf-outro { grid-template-columns: 1fr; }
  .mf-outro__left { border-right: 0; border-bottom: 1px solid var(--mf-line-soft); }
  .mf-outro__left, .mf-outro__right { padding: 22px 18px; }
  .mf-outro h2 { font-size: 21px; }
  .mf-outro p { font-size: 14px; }

  /* -- Commande traitée : actions collantes en pied -- */
  .mf-complete__banner { padding: 24px 18px; }
  .mf-complete__banner h1 { font-size: 24px; }
  .mf-complete__sub, .mf-complete__items, .mf-complete__bank { padding-left: 18px; padding-right: 18px; }
  .mf-complete__actions {
    position: sticky; bottom: 0;
    z-index: 40;
    background: var(--mf-surface);
    border-top: 1px solid var(--mf-line);
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  }
  .mf-complete__actions .mf-btn { flex: 1; }
}

/* --- Panneau panier ------------------------------------------------------ */

/* Ouvert après un ajout, au-dessus de la page en cours. C'est un <dialog>
   natif : le voile, le piège à focus et la touche Échap viennent du
   navigateur, le CSS ne fait que le poser à droite (feuille basse en
   mobile, cf. le breakpoint plus bas). */
.mf-drawer {
  display: none;
  width: min(420px, 100%);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--mf-surface);
  color: var(--mf-ink);
  box-shadow: -18px 0 48px rgba(18, 22, 26, 0.18);
}

.mf-drawer[open] {
  display: flex;
  flex-direction: column;
  animation: mf-drawer-in 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mf-drawer::backdrop { background: rgba(18, 22, 26, 0.45); }

@keyframes mf-drawer-in {
  from { transform: translateX(28px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.mf-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--mf-line-soft);
}

.mf-drawer__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.mf-drawer__check {
  display: grid;
  place-items: center;
  width: 21px; height: 21px;
  border-radius: 99px;
  background: var(--mf-accent);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
}

.mf-drawer__close {
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--mf-line);
  border-radius: 99px;
  background: var(--mf-surface);
  color: var(--mf-muted);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.mf-drawer__close:hover { color: var(--mf-ink); border-color: var(--mf-line-strong); }

.mf-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
}

.mf-drawer__body > .mf-eyebrow { margin-bottom: 12px; }

.mf-drawer__lines { list-style: none; margin: 0; padding: 0; }

.mf-drawer-line {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--mf-line-soft);
}

.mf-drawer-line:last-child { border-bottom: 0; }

.mf-drawer-line__media {
  position: relative;
  width: 48px; height: 48px;
  border: 1px solid var(--mf-line-soft);
  border-radius: 6px;
  background: var(--mf-placeholder);
}
/* La case du tiroir fait 48 px : la marge de 6 px du packshot y mangerait le
   quart de l'image, on la resserre sans jamais recadrer. */
.mf-drawer-line__media .mf-media__img { padding: 2px; }

.mf-drawer-line__name { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.mf-drawer-line__name a { color: inherit; text-decoration: none; }
.mf-drawer-line__name a:hover { text-decoration: underline; }

.mf-drawer-line__mode {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--mf-muted);
}

.mf-drawer-line__mode.is-sub { color: var(--mf-accent); font-weight: 600; }

.mf-drawer-line__total { font-size: 14px; font-weight: 600; }

.mf-drawer__foot {
  flex: none;
  padding: 16px 22px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mf-line);
  background: var(--mf-canvas-soft);
}

.mf-drawer__foot .mf-summary-total { margin-bottom: 14px; }
.mf-drawer__convert { margin-bottom: 6px; }

.mf-drawer__convert-note {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--mf-muted);
  text-align: center;
}

.mf-drawer__continue {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--mf-muted);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

.mf-drawer__continue:hover { color: var(--mf-ink); text-decoration: underline; }

/* Mobile : le panneau devient une feuille qui remonte du bas, au pouce. */
@media (max-width: 760px) {
  .mf-drawer {
    width: 100%;
    height: auto;
    max-height: 88dvh;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -14px 40px rgba(18, 22, 26, 0.22);
  }
  .mf-drawer[open] { animation-name: mf-drawer-up; }
  .mf-drawer__head, .mf-drawer__body, .mf-drawer__foot { padding-left: 16px; padding-right: 16px; }
}

@keyframes mf-drawer-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* --- Panneau de recherche -------------------------------------------------
   Même dialogue que le panier, un peu plus large : une ligne de résultat porte
   une vignette, un nom sur deux lignes et deux boutons. Le champ est sous le
   titre, hors du cadre Turbo, pour ne pas être remplacé à chaque réponse. */
.mf-drawer--search { width: min(480px, 100%); }

.mf-drawer__search {
  flex: none;
  padding: 14px 22px;
  border-bottom: 1px solid var(--mf-line-soft);
}

.mf-search-form { display: flex; gap: 8px; }

/* 16 px : en dessous, iOS zoome sur le champ au focus. */
.mf-search-form__input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--mf-line-strong);
  border-radius: 0;
  background: var(--mf-surface);
  color: var(--mf-ink);
  font: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
.mf-search-form__input:focus { outline: 2px solid var(--mf-accent); outline-offset: -1px; }

.mf-search-form__submit {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border: 0;
  background: var(--mf-ink);
  color: #fff;
  cursor: pointer;
}
.mf-search-form__submit:hover { background: var(--mf-accent); }

.mf-search-hint {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mf-muted);
}

.mf-search-results__count { margin-bottom: 8px; }

.mf-search-hits { list-style: none; margin: 0; padding: 0; }

.mf-search-hit {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mf-line-soft);
}
.mf-search-hit:last-child { border-bottom: 0; }

.mf-search-hit__media { display: block; }

.mf-search-hit__ref {
  margin: 0 0 3px;
  font-family: var(--mf-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--mf-muted);
}
.mf-search-hit__badge { color: var(--mf-accent); font-weight: 600; }

.mf-search-hit__name { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.mf-search-hit__name a { color: inherit; text-decoration: none; }
.mf-search-hit__name a:hover { text-decoration: underline; }

.mf-search-hit__spec { margin: 3px 0 0; font-size: 12px; line-height: 1.4; color: var(--mf-muted); }

.mf-search-hit__price { margin: 6px 0 0; font-size: 12.5px; color: var(--mf-ink-soft); }
.mf-search-hit__price strong { font-size: 14px; color: var(--mf-ink); }
.mf-search-hit__price .is-sub { color: var(--mf-accent); font-weight: 600; }

.mf-search-hit__actions { grid-column: 2; display: flex; gap: 8px; }
.mf-search-hit__actions form { margin: 0; }

.mf-search-results__more {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mf-muted);
}

.mf-search-empty {
  margin: 0 0 20px;
  padding: 16px;
  border: 1px dashed var(--mf-line-strong);
}
.mf-search-empty p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; }
.mf-search-empty p:last-child { margin-bottom: 0; }
.mf-search-empty__links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.mf-search-empty__links a { color: var(--mf-accent); font-weight: 600; }

/* Page de recherche autonome : le formulaire et la liste gardent une largeur
   de lecture, la grille du site n'a rien à y faire. */
.mf-search-page .mf-search-form { max-width: 560px; margin-bottom: 28px; }
.mf-search-page .mf-search-results { display: block; max-width: 720px; }

/* Mobile : plein écran, glissé depuis la droite comme sur bureau. Une feuille
   basse laisserait le clavier manger les résultats. */
@media (max-width: 760px) {
  .mf-drawer--search {
    width: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .mf-drawer--search[open] { animation-name: mf-drawer-in; }
  .mf-drawer__search { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mf-drawer[open] { animation: none; }
}

/* --- Avis clients -------------------------------------------------------- */

.mf-stars { display: inline-flex; gap: 1px; font-size: 16px; line-height: 1; color: var(--mf-line-strong); }
.mf-stars span.is-on { color: var(--mf-accent); }
.mf-stars--lg { font-size: 22px; }

.mf-reviews { margin-top: 56px; }
.mf-reviews__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.mf-reviews__head h2 { font-size: 26px; letter-spacing: -0.02em; margin: 0; font-weight: 800; }
.mf-reviews__policy { font-size: 13.5px; }
.mf-reviews__summary {
  display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center;
  border: 1px solid var(--mf-line); background: var(--mf-surface); padding: 24px; margin-bottom: 18px;
}
.mf-reviews__average { font-family: var(--mf-mono); font-size: 44px; font-weight: 600; margin: 0 0 6px; line-height: 1; }
.mf-reviews__average span { font-size: 16px; color: var(--mf-muted); }
.mf-reviews__count { font-size: 13px; color: var(--mf-muted); margin: 8px 0 0; }
.mf-reviews__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mf-reviews__bars li {
  display: grid; grid-template-columns: 84px 1fr 32px; align-items: center; gap: 10px;
  font-family: var(--mf-mono); font-size: 12px; color: var(--mf-muted); white-space: nowrap;
}
.mf-reviews__bars li span:last-child { text-align: right; }
.mf-reviews__bar { display: block; height: 8px; background: var(--mf-wash); position: relative; }
.mf-reviews__bar i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--mf-accent); }
.mf-reviews__list { display: grid; gap: 12px; }

.mf-review { border: 1px solid var(--mf-line); background: var(--mf-surface); padding: 20px 22px; }
.mf-review__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.mf-review__meta { margin: 0; font-size: 13px; color: var(--mf-muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mf-review__meta strong { color: var(--mf-ink); }
.mf-review__body { font-size: 14.5px; line-height: 1.6; color: var(--mf-ink-soft); margin: 0 0 10px; }
.mf-review__photos { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.mf-review__photos img { width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--mf-line); display: block; }
.mf-review__reply { border-left: 3px solid var(--mf-accent); background: var(--mf-accent-tint); padding: 12px 16px; margin-top: 12px; }
.mf-review__reply p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--mf-ink-soft); }
.mf-review__reply .mf-eyebrow { margin-bottom: 6px; }

/* Formulaire d'avis (page ouverte par le jeton de l'e-mail). */
.mf-review-form { border: 1px solid var(--mf-line); background: var(--mf-surface); margin-bottom: 18px; }
.mf-review-form__product { display: flex; gap: 16px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--mf-line-soft); }
.mf-review-form__product h2 { font-size: 19px; margin: 4px 0 0; font-weight: 700; letter-spacing: -0.01em; }
.mf-review-form__state { font-size: 12.5px; color: var(--mf-accent-dark); margin: 4px 0 0; }
.mf-review-form__form { padding: 22px; }
.mf-review-form__photos { list-style: none; margin: 0 0 14px; padding: 0; display: flex; gap: 8px; }
.mf-review-form__photos img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--mf-line); display: block; }
.mf-field textarea {
  width: 100%; border: 1px solid var(--mf-line); padding: 11px 12px; font-size: 14px;
  font-family: var(--mf-sans); color: var(--mf-ink); background: #fff; resize: vertical; min-height: 96px;
}
.mf-field textarea:focus { outline: 2px solid var(--mf-accent); outline-offset: -1px; }
.mf-field input[type="file"] { padding: 9px 12px; font-size: 13px; }

/* Les étoiles sont des boutons radio. Les libellés sont dans l'ordre 5 → 1 et
   affichés en sens inverse : `input:checked ~ label` allume alors toutes les
   étoiles à gauche de celle qui est cochée, sans script. */
.mf-star-pick { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; position: relative; }
.mf-star-pick legend { font-size: 12px; font-weight: 600; color: var(--mf-ink-soft); margin-bottom: 6px; padding: 0; }
.mf-star-pick__row { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.mf-star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mf-star-pick label { font-size: 36px; line-height: 1; color: var(--mf-line-strong); cursor: pointer; transition: color 0.1s; }
.mf-star-pick input:checked ~ label,
.mf-star-pick__row:hover label,
.mf-star-pick label:hover ~ label { color: var(--mf-accent); }
.mf-star-pick__row:hover label:not(:hover):not(:hover ~ label) { color: var(--mf-line-strong); }
.mf-star-pick__row:hover label:hover,
.mf-star-pick__row:hover label:hover ~ label { color: var(--mf-accent); }
.mf-star-pick input:focus-visible + label { outline: 2px solid var(--mf-accent); outline-offset: 2px; }
.mf-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mf-account-order__review { display: inline-block; margin-top: 8px; font-size: 12.5px; }

@media (max-width: 760px) {
  .mf-reviews__summary { grid-template-columns: 1fr; }
  .mf-review-form__form { padding: 18px; }
}

/* Confirmation en tête de la carte, une fois l'avis déposé. */
.mf-review-form.is-done { border-color: var(--mf-accent); }
.mf-review-form__done {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--mf-accent-tint); border-bottom: 1px solid var(--mf-accent-wash);
  padding: 16px 22px;
}
.mf-review-form__done.is-pending { background: var(--mf-canvas-soft); border-bottom-color: var(--mf-line-soft); }
.mf-review-form__check {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mf-accent); color: #fff; font-size: 15px; font-weight: 700;
}
.mf-review-form__done.is-pending .mf-review-form__check { background: var(--mf-muted); }
.mf-review-form__done-title { font-size: 15px; font-weight: 700; margin: 3px 0 6px; color: var(--mf-ink); }
.mf-review-form__done-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--mf-muted); margin: 0 0 4px; }
.mf-review-form__done-hint { font-size: 12.5px; color: var(--mf-muted); margin: 0; }