/* ============================================================================
   Landing MultiShop+ dédiée (multishop.zic.fi + alias multishops) — portage
   CSS du gabarit React « ZIC MultiShop » (23 sept 2026 : `App()`,
   `ShopBuilder`, `BuyPreview`). Préfixe `msl-` (DOM + classes), tokens
   `--msl-*` sur html.zh-multishop-page. Chargé APRÈS landing-home.css (nav /
   footer fixe / launcher « + » / tokens --zh-* / .zh-chip-ic / .zh-chrono) et
   auth-modal.css, AVANT les CSS de modules. Même architecture que
   landing-multipost-page.css (chrome re-scopé, bloc miroir du FAB chat
   mobile, rail des modules, toast).

   Mapping gabarit → tokens : V.purple → --zh-purple, V.text → --zh-text,
   V.muted → --zh-muted, V.bg1/3 → --zh-bg1/3, V.hero → --zh-hero, V.line →
   --msl-line, #E11D48 (CTA, barres d'étape, bouton « Acheter ») →
   --msl-red, #F59E0B / #B45309 / #FEF3C7 (halo, kickers, pastilles
   d'étape, état vide) → --msl-amber / --msl-amber-d / --msl-amber-l,
   #16A34A / #15803D / #F1FBF5 (MoMo, paiement, « Côté créateur ») →
   --msl-green / --msl-green-d / --msl-green-l.

   Couleur d'un TYPE de produit en variables INLINE (jamais définies ici) :
   `--msl-k` (couleur vive : pastille, voile du type coché, dégradé des
   vignettes), `--msl-k-ink` (foncée : badges et textes sur blanc, ≥ 5:1),
   `--msl-k-tint` (claire : texte sur le verre sombre ET bordure 2 px du
   type coché, ≥ 3,3:1 sur le verre — la couleur vive n'y faisait que
   1,1-2,9:1 pour « numérique » / « billetterie »). Posées en SSR sur
   #builder / chaque radio / chaque carte « Ce que tu vends » / la carte de
   la simulation d'achat, puis mises à jour par landing-multishop-page.js
   (`style.setProperty`). `--msl-dot` = pastille d'un opérateur Mobile
   Money, `--msl-mod` = couleur d'un module du rail. Jamais color-mix : les
   alphas du gabarit (`k.c + '33'` du type coché, `k.c + '1A'` de l'icône des
   cartes, `AA` de l'icône des modules) sont rendus par un pseudo-élément à
   opacité fixe.

   Simulateur (héro) : éditeur = carte « verre » sombre (blanc 7 % + blur
   12 px), aperçu = carte BLANCHE « boutique ». Contraste WCAG AA (4,5:1)
   calculé verre COMPRIS sur #6d28d9, le stop le plus clair du dégradé :
   libellés secondaires --msl-sec (blanc 88 % : 5,2:1), placeholder blanc
   60 %, ligne « how » sur un encart sombre (noir 22 %, comme les champs)
   pour que la teinte du type y passe (≥ 4,6:1 ; sur le voile blanc 6 % du
   gabarit l'ambre clair ne faisait que 4,3), erreurs #ffe4e6 (5,2:1).
   Sur blanc : --zh-muted 6,1:1, badges blancs sur --msl-k-ink 5,0-7,1:1,
   ambre des kickers #b45309 5,0:1, #92400e sur --zh-bg3 6,1:1, « Découvrir »
   des modules en --zh-purple 7,1:1 (la couleur du module ne garde que la
   flèche). Bouton « Payer » : #15803d (blanc 5,0:1) au lieu du #16a34a du
   gabarit (3,3:1). Éléments d'interface (WCAG 1.4.11, 3:1) : bordure du
   numéro Mobile Money et segments d'étape inactifs en --msl-line-d
   (3,7:1 ; --msl-line ne fait que 1,4:1), bordure du créneau coché en
   --msl-sky-d (5,9:1).

   Empilement (racine) : footer fixe 90 (landing-home.css) < nav / FAB chat
   100 < menus 120-140 < simulation d'achat `.msl-buy` 1400 < overlays des
   modules 1500-4500 (le CTA de la simulation la ferme avant d'ouvrir la
   popup MultiShop+) < toast 5000. Aucun autre z-index ≥ 100 ici. Le héro
   n'a AUCUN overflow:hidden (les halos vivent dans .msl-hero-bg) : le
   scroll-margin de #builder et l'ombre de la carte boutique ne sont pas
   clippés.

   Chrome re-scopé (règles de landing-home.css scopées body.zh-home-page, que
   cette page n'a PAS) : réserve basse `.zh-page` = footer fixe
   (`--msl-ft-h`, mesuré par `syncFixedOffsets()`), FAB chat au-dessus du
   footer, FAB masqué dock ouvert (`body.zh-fl-open`), verrou de scroll de la
   simulation (`body.msl-lock`). Le `svg{height:auto}` / `img{height:auto}`
   de mobile.css écrase les attributs : chaque svg et chaque img est
   dimensionné par classe. Survols sous `@media (hover: hover)` (pas d'état
   collant au doigt), mouvement neutralisé sous prefers-reduced-motion.

   Nav et footer FIXES réservés par `scroll-padding-top` / `-bottom` sur
   html.zh-multishop-page (WCAG 2.4.11 : un champ focalisé au clavier, un
   `scrollIntoView` ou une ancre ne finissent jamais sous l'une ou l'autre) ;
   les `scroll-margin-top` des ancres ne portent donc plus que l'air
   au-delà de la nav (`--msl-anchor` 18 px, #builder 28 / 92 px).
   ============================================================================ */

html.zh-multishop-page {
  --msl-line: #dcd2f5;
  /* Trait d'interface qui DOIT se voir sur blanc (WCAG 1.4.11, 3:1) :
     bordure du numéro Mobile Money, segments d'étape inactifs — 3,7:1
     (--msl-line, 1,4:1, reste pour les séparateurs décoratifs). */
  --msl-line-d: #8b7bb8;
  --msl-shade: #fafafc;
  --msl-glass: rgba(255, 255, 255, 0.07);
  --msl-glass-line: rgba(255, 255, 255, 0.16);
  /* Texte secondaire sur le verre (libellés, adresse, aides, mention démo,
     ligne « how ») : blanc 88 % = 5,2:1 sur le verre composé au-dessus de
     #6d28d9 (le gabarit met 50-55 % ≈ 3:1). */
  --msl-sec: rgba(255, 255, 255, 0.88);
  /* Vert « photo ajoutée » : bordure --msl-ok, libellé --msl-ok-t (4,9:1
     sur le bouton photo teinté vert). */
  --msl-ok: #4ade80;
  --msl-ok-t: #bbf7d0;
  /* Mobile Money / paiement : fond --msl-green-l, texte --msl-green-d
     (4,7:1), bouton « Payer » plein --msl-green-d (blanc 5,0:1). */
  --msl-green: #16a34a;
  --msl-green-d: #15803d;
  --msl-green-l: #f1fbf5;
  --msl-green-t: #dcfce7;
  /* CTA rouges (4,7:1 blanc ; survol 6,3:1). */
  --msl-red: #e11d48;
  --msl-red-h: #be123c;
  /* Ambre MultiShop+ : vif (halo, pastilles), foncé (texte sur blanc 5,0:1,
     sur --msl-amber-l 4,5:1), encre (texte sur --zh-bg3 6,1:1). */
  --msl-amber: #f59e0b;
  --msl-amber-d: #b45309;
  --msl-amber-ink: #92400e;
  --msl-amber-l: #fef3c7;
  /* Créneaux (famille service) : bleu ciel du gabarit, texte 5,5:1. */
  --msl-sky: #0ea5e9;
  --msl-sky-d: #0369a1;
  --msl-sky-l: #eff8ff;
  --msl-nav-h: 62px;
  --msl-ft-h: 67px;
  /* Air des ancres #vendre / #importer / #comment / #modules AU-DELÀ de la
     nav fixe (déjà réservée par scroll-padding-top ci-dessous) : sections à
     nav + 18 px, comme avant. */
  --msl-anchor: 18px;
  color-scheme: light;
  scroll-behavior: smooth;
  /* Nav et footer fixes réservés pour TOUT défilement programmatique
     (focus clavier, scrollIntoView, ancres) : un champ focalisé ne finit
     plus caché sous la nav (WCAG 2.4.11). `--msl-nav-h` 62 / 60 px et
     `--msl-ft-h` (mesuré par syncFixedOffsets) résolus sur cet élément. */
  scroll-padding-top: var(--msl-nav-h);
  scroll-padding-bottom: var(--msl-ft-h);
}
@media (max-width: 768px) {
  html.zh-multishop-page {
    --msl-nav-h: 60px;
    --msl-ft-h: calc(43px + env(safe-area-inset-bottom, 0px));
  }
}

body.zh-multishop-page {
  font-family: "DM Sans", sans-serif;
  color: var(--zh-text);
  background: var(--zh-bg1);
  overflow-x: hidden;
}
.msl-root {
  display: block;
  min-width: 0;
}
.msl-root input,
.msl-root button,
.msl-buy input,
.msl-buy button {
  font-family: "DM Sans", sans-serif;
}

/* Garde `hidden` : plusieurs éléments ont un display de classe (flex / grid /
   inline-flex) qui l'emporterait sur le display:none UA (6 emplacements de
   l'aperçu, grille, pied de total, étapes et blocs de la simulation, spinner,
   input fichier…). Scopée à la page, à la simulation et au toast — jamais
   globale (les overlays de modules gèrent leur `hidden`). */
.msl-root [hidden],
.msl-toast[hidden],
.msl-toast [hidden],
.msl-buy[hidden],
.msl-buy [hidden] {
  display: none !important;
}

.msl-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Fieldsets (types, paiement affiché, créneaux, moyen de paiement,
   opérateurs) : aucune bordure UA, et `min-width: 0` — le `min-width:
   min-content` UA d'un fieldset élargirait la colonne (scroll horizontal). */
.msl-kinds-set,
.msl-pay,
.msl-buy-slots,
.msl-buy-methods,
.msl-buy-ops {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
/* Écart sous la légende en padding (la marge basse d'un <legend> est
   ignorée par certains moteurs). */
.msl-kinds-set > legend,
.msl-buy-slots > legend,
.msl-buy-methods > legend,
.msl-buy-ops > legend {
  margin-bottom: 0;
  padding: 0 0 10px;
}
.msl-buy-slots > legend,
.msl-buy-methods > legend,
.msl-buy-ops > legend {
  padding-bottom: 8px;
}
/* Radios natives (types, MoMo/Carte, créneaux, moyen de paiement,
   opérateurs) : retirées visuellement mais focusables ; la boîte sœur
   (`+ .msl-*-box` / `+ .msl-pill-txt`) porte l'état coché et l'anneau de
   focus. Le label parent est `position: relative`. */
.msl-kind-input,
.msl-pay-input,
.msl-pill-input,
.msl-method-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Chrome re-scopé ─────────────────────────────────────────────────────── */
/* Réserve basse = footer fixe ; fond sombre limité à la réserve (pas de bande
   claire entre la dernière section et le footer). */
body.zh-multishop-page .zh-page {
  padding-bottom: var(--msl-ft-h);
  background: linear-gradient(#0f0722, #0f0722) no-repeat bottom / 100% var(--msl-ft-h);
}
/* FAB chat au-dessus du footer (desktop 67 + 11 = 78 px, comme la home ; ≤768
   --msl-ft-h porte déjà la safe-area). Spécificité (0,1,2) >
   `.zic-chat-fab-wrap` (0,1,0) de landing-chat-fab.css, chargé après. */
body.zh-multishop-page .zic-chat-fab-wrap {
  bottom: calc(var(--msl-ft-h) + 11px);
}
/* FAB masqué pendant que le dock « + » est ouvert (z 100 > footer 90) ; les
   boutons du wrap remettent pointer-events:auto → règle descendante. */
body.zh-multishop-page.zh-fl-open .zic-chat-fab-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
body.zh-multishop-page.zh-fl-open .zic-chat-fab-wrap * {
  pointer-events: none;
}
/* Simulation d'achat ouverte : la page ne défile plus sous la modale (classe
   posée / retirée par `lockBody()` / `unlockBody()`). */
body.zh-multishop-page.msl-lock {
  overflow: hidden;
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes msl-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes msl-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes msl-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@keyframes msl-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Nouvel article dans l'aperçu (`.msl-item.is-new`) et pastille ✓ de la
   confirmation. */
@keyframes msl-pop {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }
  60% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Simulation d'achat en feuille basse (≤ 480 px). */
@keyframes msl-sheet {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* ── Primitives partagées ────────────────────────────────────────────────── */
.msl-section-in {
  max-width: 1100px;
  margin: 0 auto;
}
.msl-section-head {
  margin-bottom: 34px;
}
.msl-section-head--center {
  text-align: center;
}
.msl-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--zh-purple);
  margin: 0;
}
.msl-kicker .zh-chip-ic svg {
  width: 13px;
  height: 13px;
}
/* Ambre du gabarit (#B45309) sur blanc (#vendre, 5,0:1) ; encre plus
   foncée sur le fond lavande de #comment (6,1:1). */
.msl-kicker--amber {
  color: var(--msl-amber-d);
}
.msl-kicker--amber-ink {
  color: var(--msl-amber-ink);
}
.msl-h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing: -1.1px;
  line-height: 1.15;
  color: var(--zh-text);
  margin: 10px 0 0;
}
.msl-sub {
  font-size: 14.5px;
  color: var(--zh-muted);
  line-height: 1.6;
  margin: 8px 0 0;
  max-width: 560px;
}
/* Libellés du simulateur (sur le verre sombre) : 11 px capitales,
   --msl-sec (le gabarit met 55 % ≈ 3:1). */
.msl-lbl {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--msl-sec);
  margin-bottom: 8px;
}
/* Libellés de la simulation d'achat (sur blanc). */
.msl-buy-lbl {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--zh-muted);
  margin-bottom: 8px;
}
/* Messages d'erreur : rose très clair sur le verre (5,2:1), rouge foncé sur
   blanc (6,3:1). */
.msl-err {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #ffe4e6;
  margin: 6px 0 0;
}
.msl-err--light {
  color: var(--msl-red-h);
}
/* Flèche ronde du rail des modules (44 px : cible tactile). */
.msl-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--msl-line);
  background: #fff;
  color: var(--zh-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.msl-arrow svg {
  width: 16px;
  height: 16px;
}
/* Carte survolable (= .how-card du gabarit) : types, import/encaisser,
   étapes. Bordure lavande au survol (le gabarit force `!important`). */
.msl-card-hover {
  transition: transform 0.18s, box-shadow 0.22s, border-color 0.18s;
}
@media (hover: hover) {
  .msl-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(31, 19, 64, 0.35);
    border-color: #c4b5fd;
  }
  .msl-arrow:hover {
    border-color: var(--zh-purple);
    color: var(--zh-purple);
  }
}
/* Tags des cartes « Importer & encaisser ». */
.msl-tag {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 100px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.msl-tag--amber {
  background: var(--msl-amber-l);
  color: var(--msl-amber-d);
}
.msl-tag--green {
  background: var(--msl-green-t);
  color: var(--msl-green-d);
}
/* Puces (plateformes d'import, moyens de paiement) : informatives. */
.msl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.msl-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 13px;
  border-radius: 100px;
  border: 1px solid var(--msl-line);
  background: var(--msl-shade);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--zh-text);
}
.msl-chip--pay {
  border-color: rgba(22, 163, 74, 0.3);
  background: var(--msl-green-l);
  color: var(--msl-green-d);
}
.msl-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--msl-dot, var(--msl-green));
  box-shadow: 0 0 0 2px #fff;
}
/* Pilules radio de la simulation (créneaux --sky, opérateurs --green). */
.msl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.msl-pill {
  position: relative;
  display: inline-flex;
  min-width: 0;
  cursor: pointer;
}
.msl-pill-txt {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 100px;
  border: 1px solid var(--msl-line);
  background: #fff;
  color: var(--zh-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
/* Créneau coché : bordure bleu FONCÉ (5,9:1 sur blanc, 5,5:1 sur le fond
   bleuté) — le bleu vif du gabarit ne faisait que 2,8:1 (WCAG 1.4.11). */
.msl-pill--sky .msl-pill-input:checked + .msl-pill-txt {
  border-color: var(--msl-sky-d);
  background: var(--msl-sky-l);
  color: var(--msl-sky-d);
}
.msl-pill--green .msl-pill-input:checked + .msl-pill-txt {
  border-color: var(--msl-green);
  background: var(--msl-green-l);
  color: var(--msl-green-d);
}
.msl-pill-input:focus-visible + .msl-pill-txt {
  outline: 2px solid var(--zh-purple);
  outline-offset: 2px;
}
/* Boutons de la simulation d'achat. */
.msl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 12px;
  border: none;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.msl-btn--red {
  background: var(--msl-red);
  color: #fff;
}
.msl-btn--green {
  background: var(--msl-green-d);
  color: #fff;
}
.msl-btn--ghost {
  border: 1px solid var(--msl-line);
  background: #fff;
  color: var(--zh-text);
}
.msl-btn--block {
  display: flex;
  width: 100%;
  min-height: 50px;
  margin-top: 14px;
  padding: 13px 16px;
  font-size: 15px;
}
/* Inactif : le JS pose `aria-disabled="true"` (jamais `disabled` : le bouton
   reste focalisable et un clic sur un numéro incomplet affiche l'erreur).
   « Payer » inactif = gris vert lisible (5,3:1), à la place du blanc sur
   #cbd5d1 du gabarit (1,5:1). */
.msl-btn:disabled,
.msl-btn[aria-disabled="true"] {
  cursor: not-allowed;
}
.msl-btn:disabled {
  opacity: 0.55;
}
.msl-btn--green[aria-disabled="true"] {
  background: #e5ebe8;
  color: #56625d;
}
/* Paiement en cours (`is-busy` + `aria-busy`, aria-disabled aussi) : reste
   vert plein avec le spinner, curseur d'attente. */
.msl-btn.is-busy,
.msl-btn[aria-busy="true"] {
  cursor: wait;
  opacity: 1;
}
.msl-btn--green.is-busy,
.msl-btn--green[aria-busy="true"] {
  background: var(--msl-green-d);
  color: #fff;
}
.msl-btn-arrow {
  white-space: nowrap;
}
@media (hover: hover) {
  .msl-btn--red:hover {
    background: var(--msl-red-h);
  }
  .msl-btn--green:not([aria-disabled="true"]):hover {
    background: #166534;
  }
  .msl-btn--ghost:hover {
    border-color: #c4b5fd;
    background: var(--msl-shade);
  }
  .msl-pill:hover .msl-pill-input:not(:checked) + .msl-pill-txt {
    border-color: #c4b5fd;
  }
}
/* Spinner du bouton « Payer » (1,3 s de faux traitement). */
.msl-spin {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: msl-spin 0.8s linear infinite;
}

/* ── CTA rouge (pilule + chrono) ─────────────────────────────────────────── */
/* « Ouvrir ma boutique — gratuit » (#comment, 56 px) et « Ouvrir pour de
   vrai → » (pied de la carte boutique, variante --sm 44 px). Câblés par
   `bindCtas` → popup MultiShop+ (jamais data-zic-open-multishop). */
.msl-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 8px 8px 30px;
  border-radius: 100px;
  border: none;
  background: var(--msl-red);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 34px -12px rgba(225, 29, 72, 0.55);
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
@media (hover: hover) {
  .msl-cta:hover {
    background: var(--msl-red-h);
    transform: translateY(-1px);
    box-shadow: 0 18px 38px -12px rgba(225, 29, 72, 0.65);
  }
}
.msl-cta:active {
  transform: translateY(0);
}
.msl-cta:focus-visible {
  outline: 2px solid var(--zh-purple);
  outline-offset: 3px;
}
.msl-cta-txt {
  min-width: 0;
}
.msl-cta-arrow {
  white-space: nowrap;
}
.msl-cta-chrono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}
.msl-cta-chrono .zh-chrono svg {
  width: 28px;
  height: 28px;
}
.msl-cta--sm {
  gap: 9px;
  min-height: 44px;
  padding: 6px 6px 6px 16px;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(225, 29, 72, 0.55);
}
.msl-cta--sm .msl-cta-chrono {
  width: 32px;
  height: 32px;
}
.msl-cta--sm .msl-cta-chrono .zh-chrono svg {
  width: 22px;
  height: 22px;
}

/* ── Héro ────────────────────────────────────────────────────────────────── */
.msl-hero {
  position: relative;
  background: var(--zh-hero);
  padding: calc(var(--msl-nav-h) + 50px) 36px 56px;
  color: #fff;
}
/* Longhands top/right/bottom/left plutôt que `inset` (Safari < 14.1). */
.msl-hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Halo ambre du gabarit (haut-droite) + halo lavande discret (bas-gauche,
   derrière l'éditeur) pour la profondeur. */
.msl-hero-halo {
  position: absolute;
  top: -130px;
  right: -110px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.28), transparent 70%);
}
.msl-hero-halo--b {
  top: auto;
  right: auto;
  bottom: -190px;
  left: -160px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(167, 139, 245, 0.22), transparent 70%);
}
.msl-hero-in {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
}
.msl-hero-copy {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.msl-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px 6px 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.msl-hero-badge .zh-chip-ic svg {
  width: 12px;
  height: 12px;
}
.msl-hero-h1 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 50px);
  letter-spacing: -1.8px;
  line-height: 1.08;
  color: #fff;
  margin: 18px 0 0;
}
.msl-hero-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  max-width: 560px;
  margin: 14px auto 0;
}

/* ── Simulateur : grille éditeur | aperçu ────────────────────────────────── */
.msl-builder {
  margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  /* Ancre « Essayer » : nav (scroll-padding-top, 62 px) + 28 px = 90 px. */
  scroll-margin-top: 28px;
}

/* Carte « verre » de l'éditeur. */
.msl-editor {
  min-width: 0;
  background: var(--msl-glass);
  border: 1px solid var(--msl-glass-line);
  border-radius: 20px;
  padding: 20px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 60px -40px rgba(10, 4, 30, 0.6);
}
/* Focus clavier sur le verre sombre : anneau blanc (le violet de mobile.css
   se perd sur le dégradé). */
.msl-editor button:focus-visible,
.msl-kind-input:focus-visible + .msl-kind-box {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Champs sombres : hauteur fixe 46 px (le prix et le bouton photo côte à
   côte restent alignés), 14,5 px desktop / 16 px ≤ 768 (zoom iOS). */
.msl-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  font-size: 14.5px;
  line-height: 1.3;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.msl-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}
.msl-input:focus {
  outline: none;
  border-color: #fff;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.msl-input[aria-invalid="true"] {
  border-color: #fda4af;
  box-shadow: 0 0 0 3px rgba(253, 164, 175, 0.22);
}
.msl-input--shop {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15px;
}
.msl-address {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--msl-sec);
  margin: 6px 0 16px;
  overflow-wrap: anywhere;
}
.msl-address-url {
  color: #fff;
  font-weight: 700;
}

/* Types de produit : 4 radios en grille 2 × 2 (type coché = bordure et voile
   20 % à la couleur du type, par ::before — jamais color-mix). */
.msl-kinds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.msl-kind {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}
.msl-kind-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.2;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.msl-kind-box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--msl-k);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
/* Type coché (WCAG 1.4.11 / 1.4.1) : trait de 2 px (bordure + anneau
   EXTÉRIEUR de 1 px) en `--msl-k-tint`, ≥ 3,3:1 contre le verre dehors
   comme contre le voile dedans (pire cas #6d28d9) — un indice qui ne dépend
   plus de la teinte (la couleur vive `--msl-k` faisait 1,1-2,9:1). Anneau
   extérieur et non `inset` : un inset serait peint SOUS le voile `::before`
   (2,7:1 pour « numérique » / « billetterie »). Le voile garde la teinte. */
.msl-kind-input:checked + .msl-kind-box {
  border-color: var(--msl-k-tint);
  box-shadow: 0 0 0 1px var(--msl-k-tint);
}
.msl-kind-input:checked + .msl-kind-box::before {
  opacity: 0.2;
}
/* Pastille et libellé positionnés : peints APRÈS le ::before (ordre de
   l'arbre), donc au-dessus du voile sans z-index. */
.msl-kind-ic {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  flex-shrink: 0;
  background: var(--msl-k);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.msl-kind-ic svg {
  width: 12px;
  height: 12px;
}
.msl-kind-name {
  position: relative;
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (hover: hover) {
  .msl-kind:hover .msl-kind-input:not(:checked) + .msl-kind-box {
    border-color: rgba(255, 255, 255, 0.45);
  }
}

/* Nom / prix / photo. */
.msl-field {
  min-width: 0;
  margin-top: 16px;
}
.msl-row2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  margin-top: 12px;
}
.msl-row2 .msl-field {
  margin-top: 0;
}
/* Prix : « € » posé DANS le champ (à droite) → l'état aria-invalid du champ
   colore bien toute la boîte. */
.msl-price {
  position: relative;
}
.msl-input--price {
  padding-right: 34px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.msl-price-cur {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--msl-sec);
  font-weight: 700;
  font-size: 15px;
  pointer-events: none;
}
/* Photo : bouton pointillé (clic → input fichier, glisser-déposer). */
.msl-photo {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.03);
  color: var(--msl-sec);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
/* Fichier survolant la zone (dragover). */
.msl-photo.is-drag {
  border-style: solid;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.14);
}
/* Photo posée : vert. */
.msl-photo.is-set {
  border-color: var(--msl-ok);
  background: rgba(74, 222, 128, 0.08);
}
.msl-photo-thumb {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--msl-k);
}
/* Longhands (jamais `inset`) + height explicite (mobile.css force
   `img { height: auto }`). */
.msl-photo-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Vignette par défaut : dégradé du type + son icône (aucune image tierce),
   masquée dès que la photo importée qui la précède est affichée. */
.msl-photo-ph {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--msl-k) 0%, var(--msl-k-ink) 100%);
}
.msl-photo-ph svg {
  width: 14px;
  height: 14px;
}
.msl-photo-img:not([hidden]) + .msl-photo-ph {
  display: none;
}
.msl-photo-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msl-photo.is-set .msl-photo-name {
  color: var(--msl-ok-t);
}
@media (hover: hover) {
  .msl-photo:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }
  .msl-photo.is-set:hover {
    border-color: var(--msl-ok);
    background: rgba(74, 222, 128, 0.12);
  }
}

/* Ligne « Produits physiques · Tu expédies… » : encart sombre (noir 22 %,
   comme les champs) pour que la teinte claire du type passe 4,5:1. */
.msl-how-line {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 12px;
  line-height: 1.45;
  color: var(--msl-sec);
  overflow-wrap: anywhere;
}
.msl-how-kind {
  color: var(--msl-k-tint);
  font-weight: 700;
}

/* « + Ajouter à ma boutique » : bouton blanc, « + » dans une pastille à
   l'encre du type. */
.msl-add {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  background: #fff;
  color: #1f1340;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  cursor: pointer;
  box-shadow: 0 12px 28px -14px rgba(10, 4, 30, 0.6);
  transition: background 0.2s, transform 0.12s;
}
.msl-add:active {
  transform: scale(0.99);
}
.msl-add-plus {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--msl-k-ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
@media (hover: hover) {
  .msl-add:hover {
    background: #f3eefe;
  }
}
.msl-demo-hint {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--msl-sec);
  text-align: center;
  margin: 8px 0 0;
}

/* ── Aperçu : la boutique en direct ──────────────────────────────────────── */
.msl-preview {
  min-width: 0;
}
.msl-lbl--live {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.msl-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--msl-ok);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
  animation: msl-pulse 2s ease-in-out infinite;
}
.msl-shop {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  overflow: hidden;
  color: var(--zh-text);
  box-shadow: 0 30px 60px -30px rgba(10, 4, 30, 0.55);
}
.msl-shop-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--msl-line);
}
.msl-shop-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
  object-fit: cover;
}
.msl-shop-av--ph {
  background: linear-gradient(135deg, #7b3ff2, #ec4899);
}
.msl-shop-id {
  flex: 1;
  min-width: 0;
}
.msl-shop-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: var(--zh-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msl-shop-name.is-placeholder {
  color: var(--zh-muted);
}
.msl-shop-meta {
  margin-top: 1px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--zh-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
/* MoMo / Carte : mini-pilules 28 px, zone tactile 44 px par ::after
   (centrée sur la pilule, contenue dans le padding de l'en-tête). */
.msl-pay {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.msl-pay-opt {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.msl-pay-box {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid var(--msl-line);
  background: #fff;
  color: var(--zh-muted);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.msl-pay-box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  min-width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.msl-pay-input:checked + .msl-pay-box {
  border-color: var(--msl-green);
  background: var(--msl-green-l);
  color: var(--msl-green-d);
}
.msl-pay-input:focus-visible + .msl-pay-box {
  outline: 2px solid var(--zh-purple);
  outline-offset: 2px;
}
@media (hover: hover) {
  .msl-pay-opt:hover .msl-pay-input:not(:checked) + .msl-pay-box {
    border-color: #c4b5fd;
    color: var(--zh-text);
  }
}

/* Boutique vide : 2 sous-titres, « à gauche » en 2 colonnes, « ci-dessus »
   ≤ 900 px (bascule 100 % CSS). */
.msl-empty {
  padding: 46px 20px;
  text-align: center;
}
.msl-empty-ic {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  margin: 0 auto;
  background: var(--msl-amber-l);
  color: var(--msl-amber-d);
  display: flex;
  align-items: center;
  justify-content: center;
}
.msl-empty-ic svg {
  width: 24px;
  height: 24px;
}
.msl-empty-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--zh-text);
  margin-top: 12px;
}
.msl-empty-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--zh-muted);
  margin: 4px auto 0;
  max-width: 320px;
}
.msl-empty-sub--stacked {
  display: none;
}

/* Grille des 6 emplacements (plus récent d'abord). */
.msl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 14px;
}
.msl-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--msl-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Posée par le JS sur l'article qui vient d'être ajouté. */
.msl-item.is-new {
  animation: msl-pop 0.32s ease both;
}
@media (hover: hover) {
  .msl-item:hover {
    border-color: #c4b5fd;
    box-shadow: 0 14px 30px -22px rgba(31, 19, 64, 0.45);
  }
}
.msl-item-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--zh-bg3);
}
.msl-item-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Vignette par défaut : dégradé du type de l'article (`--msl-k*` posées par
   le JS sur l'article) + son icône. */
.msl-item-ph {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(135deg, var(--msl-k) 0%, var(--msl-k-ink) 100%);
}
.msl-item-ph svg {
  width: 30px;
  height: 30px;
}
.msl-item-img:not([hidden]) + .msl-item-ph {
  display: none;
}
/* Badge court (Physique / Numérique / Service / Billet) : blanc sur l'encre
   du type (5,0-7,1:1 ; la couleur vive du gabarit tombait à 2,1:1). */
.msl-item-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--msl-k-ink);
  color: #fff;
  font-weight: 700;
  font-size: 9.5px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msl-item-badge:empty {
  display: none;
}
.msl-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 9px 11px 11px;
}
.msl-item-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--zh-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.msl-item-sub {
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--zh-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msl-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}
.msl-item-price {
  min-width: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--zh-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* `margin-left: auto` : si un prix long (1 234,50 €) fait passer le bouton à
   la ligne dans `.msl-item-foot`, il reste calé à DROITE comme sur les
   vignettes voisines (sans effet ≤ 768 : pied en colonne, bouton 100 %). */
.msl-item-buy {
  flex-shrink: 0;
  margin-left: auto;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  background: var(--msl-red);
  color: #fff;
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}
@media (hover: hover) {
  .msl-item-buy:hover {
    background: var(--msl-red-h);
  }
}
/* Cap de 6 articles atteint. */
.msl-limit {
  margin: 0 14px 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--msl-amber-l);
  color: var(--msl-amber-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}
/* Pied : total si chaque article se vend une fois + CTA rouge. */
.msl-shop-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--msl-line);
  background: var(--msl-shade);
}
.msl-shop-total {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--zh-muted);
}
.msl-shop-total strong {
  color: var(--zh-text);
  font-weight: 700;
  white-space: nowrap;
}

/* ── Ce que tu vends (#vendre) ───────────────────────────────────────────── */
.msl-sell {
  background: #fff;
  padding: 64px 36px;
  scroll-margin-top: var(--msl-anchor);
}
.msl-kind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.msl-kind-card {
  min-width: 0;
  border: 1px solid var(--msl-line);
  border-radius: 18px;
  padding: 22px 20px;
  background: #fff;
}
/* Pastille : voile 10 % de la couleur du type (::before) + icône vive. */
.msl-kind-card-ic {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: var(--msl-k);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.msl-kind-card-ic::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--msl-k);
  opacity: 0.1;
}
.msl-kind-card-ic svg {
  position: relative;
  width: 22px;
  height: 22px;
}
.msl-kind-card-txt {
  min-width: 0;
}
.msl-kind-card-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--zh-text);
  margin: 13px 0 0;
}
.msl-kind-card-ex {
  font-size: 13px;
  line-height: 1.5;
  color: var(--zh-muted);
  margin: 5px 0 0;
}
.msl-kind-card-how {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--msl-k-ink);
  margin: 12px 0 0;
}
@media (hover: hover) {
  .msl-kind-card.msl-card-hover:hover {
    border-color: var(--msl-k);
  }
}

/* ── Importer & encaisser (#importer) ────────────────────────────────────── */
.msl-import {
  background: var(--zh-bg1);
  padding: 64px 36px;
  scroll-margin-top: var(--msl-anchor);
}
.msl-import-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}
.msl-imp-card {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--msl-line);
  border-radius: 20px;
  padding: 26px 28px;
}
.msl-imp-h3 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.5px;
  line-height: 1.25;
  color: var(--zh-text);
  margin: 13px 0 0;
}
.msl-imp-p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--zh-muted);
  margin: 9px 0 0;
}

/* ── Comment ça marche (#comment) ────────────────────────────────────────── */
.msl-how {
  background: var(--zh-bg3);
  border-top: 1px solid var(--msl-line);
  padding: 66px 36px;
  scroll-margin-top: var(--msl-anchor);
}
.msl-how .msl-section-head {
  margin-bottom: 40px;
}
.msl-how .msl-h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -1.2px;
  margin-top: 12px;
}
.msl-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.msl-step {
  min-width: 0;
  display: flex;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--msl-line);
  border-radius: 16px;
  padding: 20px;
}
.msl-step-n {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  background: var(--msl-amber-l);
  color: var(--msl-amber-d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 13.5px;
}
.msl-step-txt {
  min-width: 0;
}
.msl-step-h {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--zh-text);
  margin: 0;
}
.msl-step-p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--zh-muted);
  margin: 5px 0 0;
}
.msl-how-cta {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

/* ── Le reste de ZIC (#modules, rail scroll-snap) ────────────────────────── */
.msl-mods {
  background: #fff;
  border-top: 1px solid var(--msl-line);
  padding: 66px 0 108px;
  scroll-margin-top: var(--msl-anchor);
}
.msl-mods-head {
  max-width: 1200px;
  margin: 0 auto 26px;
  padding: 0 36px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.msl-mods-copy {
  min-width: 0;
}
.msl-mods-copy .msl-h2 {
  font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: -1px;
}
.msl-mods-arrows {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.msl-mods-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 36px 8px;
  scroll-snap-type: x proximity;
  scroll-padding-left: 36px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.msl-mods-rail::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}
.msl-mod {
  flex: 0 0 258px;
  scroll-snap-align: start;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--msl-line);
  border-radius: 18px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  color: var(--zh-text);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.msl-mod:focus-visible {
  border-color: var(--msl-mod);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px var(--msl-mod);
  color: var(--zh-text);
}
@media (hover: hover) {
  .msl-mod:hover {
    border-color: var(--msl-mod);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px var(--msl-mod);
    color: var(--zh-text);
  }
}
/* Icône : couleur du module + voile blanc en dégradé (::before, peint AVANT
   le svg positionné : aucun z-index). */
.msl-mod-ic {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--msl-mod);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px -12px var(--msl-mod);
  overflow: hidden;
}
.msl-mod-ic::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.3));
}
.msl-mod-ic svg {
  position: relative;
  width: 23px;
  height: 23px;
}
.msl-mod-name {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.4px;
  margin-top: 15px;
}
.msl-mod-desc {
  display: block;
  font-size: 13px;
  color: var(--zh-muted);
  line-height: 1.5;
  margin-top: 6px;
  flex: 1;
}
/* « Découvrir » fait partie du nom du lien : texte en violet (7,1:1 sur
   blanc) ; la couleur du module (2,2-4,7:1) ne garde que la flèche
   décorative (aria-hidden, trait currentColor). */
.msl-mod-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--zh-purple);
  margin-top: 16px;
}
.msl-mod-cta svg {
  width: 13px;
  height: 13px;
  color: var(--msl-mod);
}

/* ── Simulation d'achat « vue fan » (#msl-buy) ───────────────────────────── */
/* z 1400 : au-dessus de la nav / du FAB (100), SOUS les popups de modules
   (1500) ; fermée par son CTA avant l'ouverture de la popup MultiShop+. */
.msl-buy {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overscroll-behavior: contain;
}
.msl-buy-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(11, 4, 25, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: msl-fade 0.2s ease;
}
/* Carte : défile seule (sans entraîner la page), peinte au-dessus du fond
   par l'ordre de l'arbre (aucun z-index). */
.msl-buy-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.6);
  color: var(--zh-text);
  animation: msl-rise 0.24s ease;
}
/* La carte reçoit le focus à l'ouverture (tabindex -1) : pas d'anneau sur
   le conteneur du dialogue. */
.msl-buy-card:focus {
  outline: none;
}
.msl-buy-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--msl-line);
}
.msl-buy-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
  object-fit: cover;
}
.msl-buy-av--ph {
  background: linear-gradient(135deg, #7b3ff2, #ec4899);
}
.msl-buy-who {
  flex: 1;
  min-width: 0;
}
.msl-buy-shop {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--zh-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msl-buy-mode {
  font-size: 11px;
  line-height: 1.4;
  color: var(--zh-muted);
}
.msl-buy-steps {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
/* Segments « à venir » visibles (3,7:1 sur la carte blanche, WCAG 1.4.11) :
   le total d'étapes se lit sans le texte réservé aux lecteurs d'écran. */
.msl-buy-bar {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: var(--msl-line-d);
  transition: background 0.2s;
}
.msl-buy-bar.is-on {
  background: var(--msl-red);
}
.msl-buy-x {
  width: 36px;
  height: 36px;
  margin-left: 6px;
  padding: 0;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--msl-line);
  background: #fff;
  color: var(--zh-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.msl-buy-x svg {
  width: 14px;
  height: 14px;
}
@media (hover: hover) {
  .msl-buy-x:hover {
    border-color: #c4b5fd;
    color: var(--zh-text);
  }
}

/* Étape 1 : récapitulatif (média 16:9 à fond perdu, puis corps). */
.msl-buy-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--zh-bg3);
}
.msl-buy-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.msl-buy-ph {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(135deg, var(--msl-k) 0%, var(--msl-k-ink) 100%);
}
.msl-buy-ph svg {
  width: 40px;
  height: 40px;
}
.msl-buy-img:not([hidden]) + .msl-buy-ph {
  display: none;
}
.msl-buy-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  max-width: calc(100% - 20px);
  padding: 4px 9px;
  border-radius: 100px;
  background: var(--msl-k-ink);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msl-buy-badge:empty {
  display: none;
}
/* Repli sans `aspect-ratio` (Safari/iOS < 15, Chrome < 88) : l'img et le
   placeholder sont absolus, la boîte n'aurait AUCUNE hauteur → un ::before
   en bloc porte un padding-top proportionnel (1:1 → 100 %, 16:9 →
   56,25 %). */
@supports not (aspect-ratio: 1 / 1) {
  .msl-item-media::before,
  .msl-buy-media::before {
    content: "";
    display: block;
  }
  .msl-item-media::before {
    padding-top: 100%;
  }
  .msl-buy-media::before {
    padding-top: 56.25%;
  }
}
.msl-buy-body {
  padding: 16px 18px 18px;
}
.msl-buy-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.4px;
  line-height: 1.2;
  color: var(--zh-text);
  margin: 0;
  overflow-wrap: anywhere;
}
.msl-buy-sub {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--zh-muted);
  margin: 4px 0 0;
}
.msl-buy-slots {
  margin-top: 14px;
}
.msl-buy-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.msl-buy-qty .msl-buy-lbl {
  margin-bottom: 0;
}
.msl-stepper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid var(--msl-line);
  border-radius: 10px;
  overflow: hidden;
}
.msl-stepper-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: #fff;
  color: var(--zh-text);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
/* Borne atteinte (1 ou 9) : `aria-disabled="true"` posé par le JS. */
.msl-stepper-btn:disabled,
.msl-stepper-btn[aria-disabled="true"] {
  color: rgba(26, 10, 61, 0.3);
  cursor: not-allowed;
}
.msl-stepper-btn:focus-visible {
  outline-offset: -2px;
}
.msl-stepper-val {
  display: block;
  min-width: 34px;
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--zh-text);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .msl-stepper-btn:not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--msl-shade);
    color: var(--zh-purple);
  }
}
.msl-buy-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--msl-line);
}
.msl-buy-total-l {
  font-size: 13px;
  color: var(--zh-muted);
}
.msl-buy-total-v {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--zh-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Étape 2 : paiement (Mobile Money ou carte de démonstration). */
.msl-buy-step[data-msl-buy-step="2"] {
  padding: 18px 18px 20px;
}
.msl-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.msl-method {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}
.msl-method-box {
  display: block;
  height: 100%;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1.5px solid var(--msl-line);
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.msl-method-t {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  color: var(--zh-text);
}
.msl-method-s {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--zh-muted);
}
.msl-method-input:checked + .msl-method-box {
  border-color: var(--msl-green);
  background: var(--msl-green-l);
}
.msl-method-input:focus-visible + .msl-method-box {
  outline: 2px solid var(--zh-purple);
  outline-offset: 2px;
}
@media (hover: hover) {
  .msl-method:hover .msl-method-input:not(:checked) + .msl-method-box {
    border-color: #c4b5fd;
  }
}
.msl-buy-momo,
.msl-buy-cardbox {
  margin-top: 14px;
}
.msl-buy-ops {
  margin-bottom: 14px;
}
.msl-buy-ops .msl-pills {
  gap: 6px;
}
/* Numéro Mobile Money (vide à l'ouverture) : sa bordure est le seul contour
   de la zone de saisie → --msl-line-d (3,7:1 sur blanc, WCAG 1.4.11) ;
   placeholder (format attendu) en --zh-muted (6,1:1). */
.msl-buy-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid var(--msl-line-d);
  background: #fff;
  color: var(--zh-text);
  font-size: 14.5px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.msl-buy-input::placeholder {
  color: var(--zh-muted);
  opacity: 1;
}
.msl-buy-input:focus {
  outline: none;
  border-color: var(--zh-purple);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.15);
}
.msl-buy-input[aria-invalid="true"] {
  border-color: var(--msl-red);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.14);
}
.msl-buy-hint {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--zh-muted);
  margin: 7px 0 0;
}
/* Carte de démonstration : des `div` statiques (jamais d'input carte). */
.msl-fake-card {
  display: grid;
  gap: 8px;
}
.msl-fake-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.msl-fake-field {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid var(--msl-line);
  background: var(--msl-shade);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  color: var(--zh-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msl-fake-field--num {
  letter-spacing: 0.06em;
}
.msl-buy-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.msl-buy-actions .msl-btn {
  flex: 1 1 0;
  min-width: 0;
}
.msl-buy-actions .msl-btn--green {
  flex-grow: 1.6;
}
.msl-buy-actions .msl-btn--red {
  flex-grow: 1.3;
}

/* Étape 3 : confirmation + « Côté créateur ». */
.msl-buy-step--done {
  padding: 30px 22px 22px;
  text-align: center;
}
.msl-buy-ok {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin: 0 auto;
  background: var(--msl-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px -14px rgba(22, 163, 74, 0.7);
  animation: msl-pop 0.36s ease both;
}
.msl-buy-ok svg {
  width: 28px;
  height: 28px;
}
.msl-buy-done {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.5px;
  line-height: 1.25;
  color: var(--zh-text);
  margin: 14px 0 0;
  overflow-wrap: anywhere;
}
/* Cible du focus programmatique (tabindex -1) : pas d'anneau. */
.msl-buy-done:focus {
  outline: none;
}
.msl-buy-done-sub {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--zh-muted);
  margin: 8px 0 0;
  overflow-wrap: anywhere;
}
.msl-buy-creator {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: 13px;
  background: var(--msl-green-l);
  border: 1px solid rgba(22, 163, 74, 0.3);
  text-align: left;
}
.msl-buy-creator-t {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--msl-green-d);
}
.msl-buy-creator-p {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--zh-text);
}
.msl-buy-creator-p strong {
  font-weight: 700;
  white-space: nowrap;
}
/* Pas de `height: 100dvh` partout : repli 100vh ci-dessus. Placé AVANT le
   responsive (la feuille basse ≤ 480 le surcharge). */
@supports (height: 100dvh) {
  .msl-buy-card {
    max-height: calc(100dvh - 40px);
  }
}

/* ── Toast (au-dessus du FAB chat desktop : footer + 11 + 58 + 13) ───────── */
.msl-toast {
  position: fixed;
  right: 22px;
  bottom: calc(var(--msl-ft-h) + 82px);
  z-index: 5000;
  max-width: 330px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 44px -18px rgba(31, 19, 64, 0.42);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  color: var(--zh-text);
  line-height: 1.45;
  animation: msl-rise 0.26s ease both;
}
.msl-toast-ic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--msl-green-t);
  color: var(--msl-green-d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
.msl-toast--err .msl-toast-ic {
  background: #ffe4e6;
  color: var(--msl-red);
}
/* `toast(msg, "ok")` (API window.LandingMultishopPage.toast) : pastille verte
   explicite, identique au repos. */
.msl-toast--ok .msl-toast-ic {
  background: var(--msl-green-t);
  color: var(--msl-green-d);
}
.msl-toast-msg {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .msl-hero {
    padding-left: 24px;
    padding-right: 24px;
  }
  .msl-sell,
  .msl-import,
  .msl-how {
    padding-left: 24px;
    padding-right: 24px;
  }
  .msl-builder {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  }
  /* 4 cartes « Ce que tu vends » sur une ligne jusqu'à 901 px (l'auto-fit
     230 px laissait 3 + 1 orpheline entre ~770 et ~1010 px) ; 2 × 2 ≤ 900. */
  .msl-kind-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Tablette : simulateur sur UNE colonne (éditeur puis aperçu), centré et
   plafonné pour ne pas s'étirer sur 850 px. */
@media (max-width: 900px) {
  .msl-builder {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
  .msl-empty-sub--side {
    display: none;
  }
  .msl-empty-sub--stacked {
    display: block;
  }
  .msl-kind-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 3 étapes : liste d'une colonne (l'auto-fit laissait 2 + 1 orpheline). */
  .msl-steps {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin: 0 auto;
  }
  /* Révélation du nouvel article (revealNewItem, block « nearest ») : le bas
     de la carte s'arrête au-dessus de la partie du « + » qui dépasse du
     footer fixe (≈ 46 px + air) — le footer lui-même est déjà réservé par
     le scroll-padding-bottom de html.zh-multishop-page. Le bouton
     « Acheter » reste touchable. */
  .msl-item {
    scroll-margin-bottom: 56px;
  }
}
/* Éditeur pleine largeur assez large : les 4 types sur une ligne. */
@media (min-width: 641px) and (max-width: 900px) {
  .msl-kinds {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  /* 152 px en haut comme le héro de la home (landing-home.css) : la nav + le
     FAB chat ancré en haut à droite sous elle (top 98 px + 46 px, bloc
     « FAB chat mobile » ci-dessous) — le badge démarre dessous. */
  .msl-hero {
    padding: calc(152px + env(safe-area-inset-top, 0px)) 16px 40px;
  }
  .msl-hero-h1 {
    letter-spacing: -1.2px;
  }
  .msl-hero-sub {
    font-size: 15px;
  }
  /* Ancre « Essayer » : le simulateur démarre sous le FAB chat (même
     réserve de 152 px que le héro = nav 60 px en scroll-padding-top +
     92 px), jamais dessous. */
  .msl-builder {
    margin-top: 26px;
    scroll-margin-top: 92px;
  }
  .msl-editor {
    padding: 16px;
    border-radius: 18px;
  }
  /* iOS Safari zoome la page au focus de tout champ dont la font-size est
     < 16 px (et ne revient pas en arrière) : 16 px sur les champs du
     simulateur et le numéro Mobile Money, comme `.zic-auth-input`
     (auth-modal.css). Tailles desktop (14,5 / 15 px) inchangées. */
  .msl-input,
  .msl-input--shop,
  .msl-input--price,
  .msl-buy-input {
    font-size: 16px;
  }
  /* Cibles tactiles ≥ 44 px. */
  .msl-add,
  .msl-photo,
  .msl-kind-box,
  .msl-btn,
  .msl-pill,
  .msl-pill-txt,
  .msl-item-buy {
    min-height: 44px;
  }
  .msl-stepper-btn,
  .msl-buy-x {
    width: 44px;
    height: 44px;
  }
  .msl-sell,
  .msl-import,
  .msl-how {
    padding: 48px 16px;
  }
  .msl-section-head,
  .msl-how .msl-section-head {
    margin-bottom: 24px;
  }
  /* Aperçu : 2 colonnes d'articles ; le pied d'article empile prix puis
     bouton pleine largeur (44 px). */
  .msl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
  }
  .msl-item-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .msl-item-buy {
    width: 100%;
    border-radius: 10px;
    font-size: 12px;
  }
  .msl-kind-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .msl-imp-card {
    padding: 22px 20px;
  }
  .msl-step {
    padding: 18px 16px;
  }
  .msl-mods {
    padding: 48px 0 72px;
  }
  .msl-mods-head {
    padding: 0 16px;
    margin-bottom: 18px;
  }
  .msl-mods-arrows {
    display: none;
  }
  .msl-mods-rail {
    padding: 4px 16px 8px;
    scroll-padding-left: 16px;
    gap: 12px;
  }
  .msl-mod {
    flex-basis: 232px;
    padding: 18px 18px 16px;
  }
  /* FAB chat mobile en haut à droite (bloc ci-dessous) : le toast descend
     en bas, mais AU-DESSUS de la partie du « + » qui dépasse du footer fixe
     (≈ 46 px) — il ne recouvre plus le lanceur pendant 3,5 s. */
  .msl-toast {
    bottom: calc(var(--msl-ft-h) + 52px);
  }

  /* ── FAB chat mobile : MÊME position et MÊME animation que la home ──────
     Miroir déclaration pour déclaration du bloc « Home uniquement (D4) » de
     landing-chat-fab.css (@media ≤768, sélecteurs body.zh-home-page) re-scopé
     body.zh-multishop-page — ce fichier partagé n'est pas touché (patron des
     règles de chrome re-scopées, copie du bloc de
     landing-multipost-page.css). Le test du lot F (miroir de
     MultipostFabMobileMirrorTest) interdit toute dérive entre les deux
     blocs : modifier la home = recopier ici. Wrap en haut à droite sous la
     nav (top 98 px + safe-area), pastille « verre » 46 px (cycle 7 s de la
     règle générique), anneau 2,2 s, badge 18 px. Bloc titre du héro
     (.msl-hero-copy : badge, h1, sous-titre) sorti de l'écran
     (body.zh-hero-out, posé par bindHeroOut() de landing-multishop-page.js
     — même observateur que landing-home.js, mais sur le bloc titre et non
     sur .msl-hero, qui contient tout le simulateur : la pastille ne passe
     jamais sur la carte boutique blanche ni sur MoMo / Carte) : seule la
     pastille disparaît, le bouton reste en haut à droite EXACTEMENT comme
     la home (aucun repli bas : pas de barre sticky ici). AUCUNE autre
     règle body.zh-multishop-page dans les blocs ≤768 (le verrou compare
     les ensembles de sélecteurs). */
  body.zh-multishop-page .zic-chat-fab-wrap {
    top: calc(98px + env(safe-area-inset-top, 0px));
    bottom: auto;
    width: 300px;
    height: 46px;
  }
  body.zh-multishop-page .zic-chat-fab-clip {
    display: block;
    right: 23px;
  }
  body.zh-multishop-page .zic-chat-fab-pill {
    height: 46px;
    top: 10px;
    gap: 8px;
    padding: 0 34px 0 8px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-right: none;
    box-shadow: none;
  }
  body.zh-multishop-page .zic-chat-fab-pill-title {
    color: #fff;
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 12.5px;
  }
  body.zh-multishop-page .zic-chat-fab-pill-sub {
    display: none;
  }
  body.zh-multishop-page .zic-chat-fab-av {
    width: 26px;
    height: 26px;
    border-color: rgba(20, 8, 64, 0.9);
    margin-left: -8px;
    font-size: 10px;
    font-weight: 700;
  }
  body.zh-multishop-page .zic-chat-fab-av:first-child {
    margin-left: 0;
  }
  body.zh-multishop-page .zic-chat-fab {
    width: 46px;
    height: 46px;
    border: none;
    box-shadow:
      0 10px 28px -8px rgba(123, 63, 242, 0.7),
      0 0 0 4px rgba(168, 85, 247, 0.22);
  }
  body.zh-multishop-page .zic-chat-fab-icon svg {
    width: 21px;
    height: 21px;
  }
  body.zh-multishop-page .zic-chat-fab-ring {
    animation-duration: 2.2s;
  }
  body.zh-multishop-page .zic-chat-fab-badge {
    min-width: 18px;
    height: 18px;
    top: -4px;
    right: -4px;
    border-color: #1a0840;
    line-height: 14px;
  }
  body.zh-multishop-page.zh-hero-out .zic-chat-fab-clip {
    display: none;
  }
}
/* Grande tablette portrait / petit écran (561-768 px) : 2 colonnes
   d'articles donneraient des vignettes de 320 px (3 rangées très hautes) →
   3 colonnes. Bloc séparé (≤768 reste la règle des téléphones). */
@media (min-width: 561px) and (max-width: 768px) {
  .msl-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .msl-hero {
    padding-bottom: 32px;
  }
  .msl-hero-h1 {
    font-size: 30px;
  }
  /* « Photo ajoutée ✓ » : 2 lignes plutôt qu'une ellipse qui mange le ✓
     (≤ 375 px en FR, ≤ 360 px en EN) ; le bouton (44-46 px) contient
     2 × 15 px sans changer de hauteur. */
  .msl-photo-name {
    white-space: normal;
    line-height: 1.25;
  }
  /* En-tête de la carte boutique : MoMo / Carte passent sous le nom (aligné
     sur le texte, après l'avatar 34 + 10). */
  .msl-shop-head {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .msl-pay {
    flex-basis: 100%;
    padding-left: 44px;
  }
  /* Pied de la carte boutique : total puis CTA pleine largeur. */
  .msl-shop-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  /* CTA pleine largeur, libellé à gauche et chrono à droite ; le libellé
     peut passer sur 2 lignes. */
  .msl-cta {
    width: 100%;
    justify-content: space-between;
    font-size: 14.5px;
    gap: 10px;
    padding: 7px 7px 7px 20px;
  }
  .msl-cta--sm {
    font-size: 13.5px;
    padding: 6px 6px 6px 18px;
    white-space: normal;
  }
  .msl-kind-grid,
  .msl-import-grid,
  .msl-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .msl-imp-card {
    padding: 20px 16px;
  }
  .msl-imp-h3 {
    font-size: 18px;
  }
  .msl-kind-card {
    padding: 18px 16px;
  }
  /* Simulation d'achat en feuille basse (safe-area iOS). */
  .msl-buy {
    align-items: flex-end;
    padding: 0;
  }
  .msl-buy-card {
    max-width: none;
    max-height: calc(100% - 24px);
    border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: msl-sheet 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .msl-buy-head {
    padding: 12px 16px;
  }
  /* Média plus plat (187 px à 375) : ratio 2:1 plutôt qu'un max-height (un
     max-height sur une boîte à `aspect-ratio` est reporté sur sa LARGEUR →
     média de 320 px et bande blanche à droite). */
  .msl-buy-media {
    aspect-ratio: 2 / 1;
  }
  .msl-buy-body {
    padding: 14px 16px 16px;
  }
  .msl-buy-step[data-msl-buy-step="2"] {
    padding: 16px 16px 18px;
  }
  .msl-buy-step--done {
    padding: 26px 16px 18px;
  }
  /* Confirmation : CTA rouge au-dessus, « Retour à la boutique » dessous,
     tous deux pleine largeur. */
  .msl-buy-step--done .msl-buy-actions {
    flex-direction: column-reverse;
  }
  .msl-buy-step--done .msl-buy-actions .msl-btn {
    flex: none;
    width: 100%;
  }
  .msl-toast {
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

/* ── Mouvement réduit ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.zh-multishop-page {
    scroll-behavior: auto;
  }
  .msl-mods-rail {
    scroll-behavior: auto;
  }
  .msl-card-hover,
  .msl-card-hover:hover,
  .msl-mod,
  .msl-mod:hover,
  .msl-mod:focus-visible,
  .msl-cta,
  .msl-cta:hover,
  .msl-add,
  .msl-add:active {
    transform: none !important;
    transition: none !important;
  }
  .msl-item.is-new,
  .msl-live-dot,
  .msl-buy-backdrop,
  .msl-buy-card,
  .msl-buy-ok,
  .msl-toast {
    animation: none !important;
  }
  /* Le spinner reste un indicateur d'activité : ralenti, pas figé (le
     `* { animation-duration: 0.01ms !important }` de mobile.css l'arrêterait
     après un tour — spécificité de classe > `*`). */
  .msl-spin {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }
}