/* ============================================================================
   Landing MultiPost+ dédiée (multipost.zic.fi + alias post / posts /
   multiposts) — portage CSS du template React « ZIC MultiPost » (21 sept
   2026). Préfixe `mpl-` (DOM + classes), tokens `--mpl-*` sur
   html.zh-multipost-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.

   Mapping template → tokens : V.purple → --zh-purple, V.purpleB →
   --zh-purple-b, V.text → --zh-text, V.muted → --zh-muted, V.bg1/3 →
   --zh-bg1/3, V.hero → --zh-hero, V.line → --mpl-line, V.pink → --mpl-pink.
   Jamais color-mix : les alphas du template (`44` sur la bordure des jours
   planifiés, `AA` sur l'icône des modules) sont rendus par des rgba() ou des
   pseudo-éléments. Couleur d'un réseau en variable INLINE `--mpl-net` (chips,
   aperçus, cartes réseaux, points de la semaine, disques du crosspost) ;
   couleur d'un module en `--mpl-mod` (cartes du rail).

   Simulateur (héro) : carte « verre » sombre (rgba blanc 7 % + blur) pour
   l'éditeur, aperçus = cartes BLANCHES 224 px sur un rail scroll-snap.
   Contraste (WCAG AA 4,5:1, calculé verre COMPRIS sur #6d28d9, le stop le
   plus clair du dégradé, où vit le simulateur — l'éditeur entier sur
   mobile) : blanc 100 % pour le contenu ; libellés secondaires en --mpl-sec
   (blanc 88 % : 5,2:1 sur le verre, 4,9:1 sur le bouton média, 4,5:1 à son
   survol — 72 % ne faisait que 4,0:1 une fois le verre composé) ; chips
   pressées = blanc sur la couleur du réseau assombrie d'un voile noir 14 %
   (YouTube 5,2:1, Bluesky 5,2, Facebook 5,4, Instagram 5,6 — les marques
   nues font 4,0-4,3) ; hashtags des aperçus en encre --mpl-ink-* pour ces
   4 marques (≥ 5,3:1 sur blanc). Sur les cartes blanches, --zh-muted #6b54a8
   fait 5,4:1. Médias des aperçus : `aspect-ratio` + repli padding-top sous
   `@supports not` (Safari/iOS < 15, Chrome < 88) et longhands top/right/
   bottom/left (jamais `inset`, Safari < 14.1) sur les img / placeholders.

   Empilement (racine) : flèches des aperçus 2 (contexte de .mpl-prev-wrap) <
   footer fixe 90 (landing-home.css) < nav / FAB chat 100 < menus 120-140 <
   overlays modules 1500-4500 < toast 5000. Aucun autre z-index ≥ 100 ici. Le
   héro n'a AUCUN overflow:hidden (le halo vit dans .mpl-hero-bg) : le
   scroll-margin de #composer et les ombres des cartes ne sont pas clippés.

   Chrome re-scopé (3 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
   (`--mpl-ft-h`, mesuré par landing-multipost-page.js `syncFixedOffsets()`),
   FAB chat au-dessus du footer, FAB masqué dock ouvert (`body.zh-fl-open`).
   Aucune barre de suivi ici (contrairement à la page ticket). Le
   `svg{height:auto}` de mobile.css écrase les attributs : chaque svg est
   dimensionné par classe.
   ============================================================================ */

html.zh-multipost-page {
  --mpl-line: #dcd2f5;
  --mpl-pink: #e1306c;
  /* Texte rose des tags « Crosspost » (5,0:1 sur #ffe4e9 ; #e1306c n'y ferait
     que 3,4:1). */
  --mpl-pink-d: #be185d;
  --mpl-shade: #fafafc;
  --mpl-glass: rgba(255, 255, 255, 0.07);
  --mpl-glass-line: rgba(255, 255, 255, 0.16);
  /* Texte secondaire sur le verre (libellés, compteur, aides, chips et
     boutons non pressés, aperçu vide) : blanc 88 % = 5,2:1 sur le verre
     composé au-dessus de #6d28d9, 4,9:1 sur le bouton média (voile blanc
     4 %), 4,5:1 à son survol (8 %). */
  --mpl-sec: rgba(255, 255, 255, 0.88);
  /* Vert « image importée » : bordure --mpl-ok, nom du fichier --mpl-ok-t
     (#bbf7d0 : 4,9:1 sur le bouton média teinté vert ; #86efac n'y faisait
     que 4,2:1). */
  --mpl-ok: #4ade80;
  --mpl-ok-t: #bbf7d0;
  /* Encre des hashtags des aperçus (texte à la couleur du réseau sur carte
     blanche, 11,5 px) : 4 marques trop claires sur blanc (YouTube #FF0000
     4,0:1, Bluesky #0A7AFF 4,0, Facebook #1877F2 4,2, Instagram #E1306C 4,3)
     → variantes assombries ≥ 5,3:1. LinkedIn #0A66C2 (5,7:1) et TikTok
     (violet --zh-purple, 5,5:1) gardent leur couleur. */
  --mpl-ink-youtube: #cc0000;
  --mpl-ink-bluesky: #0868d8;
  --mpl-ink-facebook: #1466d6;
  --mpl-ink-instagram: #c81e5c;
  --mpl-nav-h: 62px;
  --mpl-ft-h: 67px;
  /* Décalage de scroll des ancres #reseaux / #programmer / #comment /
     #modules : la nav fixe + 18 px d'air. */
  --mpl-anchor: calc(var(--mpl-nav-h) + 18px);
  color-scheme: light;
  scroll-behavior: smooth;
}
@media (max-width: 768px) {
  html.zh-multipost-page {
    --mpl-nav-h: 60px;
    --mpl-ft-h: calc(43px + env(safe-area-inset-bottom, 0px));
  }
}

body.zh-multipost-page {
  font-family: "DM Sans", sans-serif;
  color: var(--zh-text);
  background: var(--zh-bg1);
  overflow-x: hidden;
}
.mpl-root {
  display: block;
  min-width: 0;
}
.mpl-root input,
.mpl-root textarea,
.mpl-root 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. Scopée à la page et
   au toast — jamais globale (les overlays de modules gèrent leur `hidden`). */
.mpl-root [hidden],
.mpl-toast[hidden],
.mpl-toast [hidden] {
  display: none !important;
}

.mpl-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;
}

/* ── 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-multipost-page .zh-page {
  padding-bottom: var(--mpl-ft-h);
  background: linear-gradient(#0f0722, #0f0722) no-repeat bottom / 100% var(--mpl-ft-h);
}
/* FAB chat au-dessus du footer (desktop 67 + 11 = 78 px, comme la home ; ≤768
   --mpl-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-multipost-page .zic-chat-fab-wrap {
  bottom: calc(var(--mpl-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-multipost-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-multipost-page.zh-fl-open .zic-chat-fab-wrap * {
  pointer-events: none;
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes mpl-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mpl-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes mpl-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@keyframes mpl-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* ── Primitives partagées ────────────────────────────────────────────────── */
.mpl-section-in {
  max-width: 1100px;
  margin: 0 auto;
}
.mpl-section-head {
  margin-bottom: 34px;
}
.mpl-section-head--center {
  text-align: center;
}
.mpl-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;
}
.mpl-kicker .zh-chip-ic svg {
  width: 13px;
  height: 13px;
}
/* Le titre de #comment est un h2 stylé kicker (un seul niveau de titre). */
.mpl-kicker--h2 {
  line-height: 1.4;
}
.mpl-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;
}
.mpl-sub {
  font-size: 14.5px;
  color: var(--zh-muted);
  line-height: 1.6;
  margin: 8px 0 0;
  max-width: 560px;
}
.mpl-section-head--center .mpl-sub {
  margin-left: auto;
  margin-right: auto;
}
/* Libellés du simulateur (sur le verre sombre) : 11 px capitales. Le
   template les met à 55 % (≈ 3,2:1 sur #6d28d9) ; 72 % ne faisait que 4,0:1
   une fois le verre composé → --mpl-sec (88 %, 5,2:1), idem compteur, aide
   média, mention démo, chips et boutons non pressés, aperçu vide. */
.mpl-lbl {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--mpl-sec);
}
/* Flèche ronde (rail des modules, blanche) ; les flèches des aperçus la
   redéfinissent en sombre + absolue (voir Aperçus). */
.mpl-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--mpl-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, background 0.15s;
}
.mpl-arrow svg {
  width: 16px;
  height: 16px;
}
.mpl-arrow:hover {
  border-color: var(--zh-purple);
  color: var(--zh-purple);
}
/* Carte survolable (= .how-card du template) : cartes réseaux, programmer,
   étapes. Bordure lavande au survol (le template force `!important`). */
.mpl-card-hover {
  transition: transform 0.18s, box-shadow 0.22s, border-color 0.18s;
}
@media (hover: hover) {
  .mpl-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(31, 19, 64, 0.35);
    border-color: #c4b5fd;
  }
}
/* Focus clavier sur le verre sombre : anneau blanc (le violet de mobile.css
   se perd sur le dégradé). */
.mpl-editor button:focus-visible,
.mpl-text:focus-visible,
.mpl-schedule:focus-visible,
.mpl-arrow--prev:focus-visible,
.mpl-arrow--next:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── Héro ────────────────────────────────────────────────────────────────── */
.mpl-hero {
  position: relative;
  background: var(--zh-hero);
  padding: calc(var(--mpl-nav-h) + 50px) 36px 56px;
  color: #fff;
}
.mpl-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.mpl-hero-halo {
  position: absolute;
  top: -130px;
  right: -110px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 139, 245, 0.34), transparent 70%);
}
.mpl-hero-in {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
}
.mpl-hero-copy {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.mpl-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);
}
.mpl-hero-badge .zh-chip-ic svg {
  width: 12px;
  height: 12px;
}
.mpl-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;
}
.mpl-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çus ───────────────────────────────── */
.mpl-composer {
  margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(320px, 1fr);
  gap: 22px;
  align-items: start;
  scroll-margin-top: 90px;
}

/* Carte « verre » de l'éditeur. */
.mpl-editor {
  min-width: 0;
  background: var(--mpl-glass);
  border: 1px solid var(--mpl-glass-line);
  border-radius: 20px;
  padding: 20px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.mpl-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.mpl-count {
  font-size: 11.5px;
  color: var(--mpl-sec);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mpl-text {
  display: block;
  width: 100%;
  resize: none;
  padding: 14px 15px;
  border-radius: 14px;
  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.55;
  outline: none;
  transition: border-color 0.15s;
}
.mpl-text::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.mpl-text:focus {
  border-color: rgba(255, 255, 255, 0.45);
}

/* Import d'image : bouton pointillé pleine largeur (clic + drag-drop). */
.mpl-media {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.mpl-media:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
}
/* Fichier survolant la zone (dragover). */
.mpl-media.is-drag {
  border-style: solid;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.14);
}
/* Image posée : vert. */
.mpl-media.is-set {
  border-color: var(--mpl-ok);
  background: rgba(74, 222, 128, 0.08);
}
.mpl-media-thumb {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--zh-bg3);
}
/* Longhands top/right/bottom/left plutôt que `inset` (Safari < 14.1,
   Chrome < 87 l'ignorent : l'img resterait en position statique, sous le
   ::before du repli sans `aspect-ratio` des aperçus → clippée). */
.mpl-media-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Placeholder dégradé (aucune image tierce) : vignette de l'éditeur ET
   médias des aperçus. Il suit l'img dans le DOM → masqué dès qu'elle est
   affichée (le JS ne fait que retirer `hidden`). */
.mpl-media-ph {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  background: linear-gradient(135deg, #7b3ff2 0%, #a855f7 48%, #ec4899 100%);
}
.mpl-media-img:not([hidden]) + .mpl-media-ph,
.mpl-prev-img:not([hidden]) + .mpl-media-ph {
  display: none;
}
.mpl-media-txt {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.mpl-media-name {
  display: block;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mpl-media.is-set .mpl-media-name {
  color: var(--mpl-ok-t);
}
.mpl-media-hint {
  display: block;
  color: var(--mpl-sec);
  font-weight: 400;
}

/* Réseaux : pilules (chip pressée = fond à la couleur du réseau). */
.mpl-nets-block {
  margin-top: 16px;
}
.mpl-lbl--nets {
  margin-bottom: 9px;
}
.mpl-nets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.mpl-net {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 12px 7px 8px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: var(--mpl-sec);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mpl-net:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
/* Pressée : fond à la couleur INLINE du réseau (source unique, --mpl-net)
   assombrie d'un voile noir 14 % — `background-image` déclarée APRÈS le
   raccourci — pour que le libellé blanc 12,5 px gras passe 4,5:1 (YouTube
   #FF0000 → 5,2:1, Bluesky #0A7AFF → 5,2, Facebook #1877F2 → 5,4, Instagram
   #E1306C → 5,6 ; nues elles font 4,0-4,3). La bordure garde la marque pure
   (liseré 1 px à peine plus clair). */
.mpl-net[aria-pressed="true"] {
  border-color: var(--mpl-net);
  background: var(--mpl-net);
  background-image: linear-gradient(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.14));
  color: #fff;
}
.mpl-net-ic {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mpl-net[aria-pressed="true"] .mpl-net-ic {
  background: rgba(255, 255, 255, 0.22);
}
.mpl-net-ic svg {
  width: 11px;
  height: 11px;
}

/* Maintenant / Programmer + date. */
.mpl-when {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.mpl-when-btn {
  flex: 1;
  min-height: 40px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: var(--mpl-sec);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mpl-when-btn:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.mpl-when-btn[aria-pressed="true"] {
  border-color: #fff;
  background: #fff;
  color: #1f1340;
}
.mpl-schedule {
  display: block;
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  font-size: 13.5px;
  outline: none;
  color-scheme: dark;
}

/* Publier : bouton blanc ; désactivé = voile ; occupé = spinner à droite. */
.mpl-publish {
  position: relative;
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  padding: 14px 44px 14px 20px;
  border-radius: 12px;
  border: none;
  background: #fff;
  color: #1f1340;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.mpl-publish:hover {
  background: #f3eefe;
}
/* Désactivé : volontairement voilé (composant inactif, hors exigence de
   contraste WCAG) — pas --mpl-sec ici. */
.mpl-publish:disabled {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.72);
  cursor: not-allowed;
}
.mpl-publish.is-busy {
  cursor: wait;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.85);
}
.mpl-publish.is-busy::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(31, 19, 64, 0.18);
  border-top-color: var(--zh-purple);
  transform: translateY(-50%);
  animation: mpl-spin 0.8s linear infinite;
}
.mpl-demo-hint {
  font-size: 11.5px;
  color: var(--mpl-sec);
  text-align: center;
  margin: 8px 0 0;
}

/* ── Aperçus en direct (rail scroll-snap de cartes blanches 224 px) ──────── */
.mpl-previews {
  min-width: 0;
}
.mpl-lbl--live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.mpl-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mpl-ok);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
  animation: mpl-pulse 2s ease-in-out infinite;
}
.mpl-prev-empty {
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 18px;
  padding: 40px 20px;
  text-align: center;
  color: var(--mpl-sec);
  font-size: 14px;
}
.mpl-prev-wrap {
  position: relative;
}
/* Flèches sombres à cheval sur le rail (z 2 dans le contexte du wrap) ;
   masquées quand ≤ 2 cartes sont visibles (data-count posé par le JS). */
.mpl-arrow--prev,
.mpl-arrow--next {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(10, 4, 22, 0.7);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mpl-arrow--prev {
  left: -8px;
}
.mpl-arrow--next {
  right: -8px;
}
.mpl-arrow--prev:hover,
.mpl-arrow--next:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(10, 4, 22, 0.86);
  color: #fff;
}
.mpl-prev-wrap[data-count="0"] .mpl-arrow,
.mpl-prev-wrap[data-count="1"] .mpl-arrow,
.mpl-prev-wrap[data-count="2"] .mpl-arrow {
  display: none;
}
.mpl-prev-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 2px 2px 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.mpl-prev-rail::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}
.mpl-prev {
  flex: 0 0 224px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  overflow: hidden;
  color: var(--zh-text);
  animation: mpl-fade 0.25s ease;
}
.mpl-prev-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--mpl-line);
}
.mpl-prev-logo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mpl-net);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mpl-prev-logo svg {
  width: 11px;
  height: 11px;
}
.mpl-prev-name {
  flex: 1;
  min-width: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mpl-prev-ratio {
  font-size: 10.5px;
  color: var(--zh-muted);
  white-space: nowrap;
}
.mpl-prev-author {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 0;
  min-width: 0;
}
.mpl-prev-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}
.mpl-prev-avatar--ph {
  background: linear-gradient(135deg, #7b3ff2, #ec4899);
}
.mpl-prev-handle {
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Titre (YouTube seulement). */
.mpl-prev-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.35;
  padding: 8px 12px 0;
  overflow-wrap: anywhere;
}
/* Média : ratio du réseau, 150 px de haut max. Le 16:9 (YouTube) est en
   pleine largeur, à cru, comme une miniature. */
.mpl-prev-media {
  position: relative;
  margin: 9px 12px 0;
  border-radius: 10px;
  overflow: hidden;
  max-height: 150px;
  background: var(--zh-bg3);
}
.mpl-prev-media--tall {
  aspect-ratio: 9 / 16;
  width: 84px;
}
.mpl-prev-media--wide {
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}
.mpl-prev-media--45 {
  aspect-ratio: 4 / 5;
  width: 120px;
}
.mpl-prev-media--11 {
  aspect-ratio: 1 / 1;
  width: 150px;
}
.mpl-prev-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Repli sans `aspect-ratio` (Safari/iOS < 15, Chrome < 88) : l'img et le
   placeholder sont absolus, la boîte n'aurait AUCUNE hauteur et l'image
   importée n'apparaîtrait dans aucun aperçu. Un ::before en bloc porte un
   padding-top proportionnel à la largeur — même géométrie que le ratio :
   9:16 → 149 px sur 84, 16:9 → 125 px sur une carte de 224, 4:5 → 150 px
   sur 120, 1:1 → 150 px ; le max-height 150 px continue de plafonner. */
@supports not (aspect-ratio: 1 / 1) {
  .mpl-prev-media::before {
    content: "";
    display: block;
  }
  .mpl-prev-media--tall::before {
    padding-top: 177.78%;
  }
  .mpl-prev-media--wide::before {
    padding-top: 56.25%;
  }
  .mpl-prev-media--45::before {
    padding-top: 125%;
  }
  .mpl-prev-media--11::before {
    padding-top: 100%;
  }
}
.mpl-prev-body {
  font-size: 12px;
  line-height: 1.5;
  padding: 9px 12px 4px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.mpl-prev-tags {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mpl-net);
  padding: 0 12px 11px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* TikTok (#111) : hashtags violets, comme le template. */
.mpl-prev[data-key="tiktok"] .mpl-prev-tags {
  color: var(--zh-purple);
}
/* Encre assombrie pour les 4 marques < 4,5:1 sur blanc (tokens --mpl-ink-*,
   ≥ 5,3:1) ; LinkedIn garde --mpl-net (5,7:1). Le disque du logo, lui,
   reste à la couleur nue (icône, pas du texte). */
.mpl-prev[data-key="youtube"] .mpl-prev-tags {
  color: var(--mpl-ink-youtube);
}
.mpl-prev[data-key="bluesky"] .mpl-prev-tags {
  color: var(--mpl-ink-bluesky);
}
.mpl-prev[data-key="facebook"] .mpl-prev-tags {
  color: var(--mpl-ink-facebook);
}
.mpl-prev[data-key="instagram"] .mpl-prev-tags {
  color: var(--mpl-ink-instagram);
}
.mpl-prev-tags:empty {
  padding-bottom: 6px;
}
.mpl-prev-count {
  margin-top: auto;
  padding: 7px 12px 10px;
  font-size: 10.5px;
  color: var(--zh-muted);
  border-top: 1px solid var(--mpl-line);
  font-variant-numeric: tabular-nums;
}

/* ── Six réseaux, un seul geste (#reseaux) ───────────────────────────────── */
.mpl-networks {
  background: #fff;
  padding: 64px 36px;
  scroll-margin-top: var(--mpl-anchor);
}
.mpl-net-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.mpl-net-card {
  min-width: 0;
  border: 1px solid var(--mpl-line);
  border-radius: 16px;
  padding: 18px 16px;
  text-align: center;
  background: #fff;
}
.mpl-net-disc {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--mpl-net);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mpl-net-disc svg {
  width: 21px;
  height: 21px;
}
.mpl-net-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--zh-text);
  margin: 11px 0 0;
}
.mpl-net-tip {
  font-size: 12px;
  color: var(--zh-muted);
  line-height: 1.45;
  margin: 4px 0 0;
}
.mpl-networks-more {
  text-align: center;
  margin: 22px 0 0;
  font-size: 13.5px;
  color: var(--zh-muted);
}

/* ── Programmer + Crosspost (#programmer) ────────────────────────────────── */
.mpl-programmer {
  background: var(--zh-bg1);
  padding: 64px 36px;
  scroll-margin-top: var(--mpl-anchor);
}
.mpl-prog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}
.mpl-prog-card {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--mpl-line);
  border-radius: 20px;
  padding: 26px 28px;
}
.mpl-tag {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 100px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.mpl-tag--purple {
  background: #ede9fe;
  color: var(--zh-purple);
}
.mpl-tag--pink {
  background: #ffe4e9;
  color: var(--mpl-pink-d);
}
.mpl-prog-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;
}
.mpl-prog-p {
  font-size: 14px;
  color: var(--zh-muted);
  line-height: 1.6;
  margin: 9px 0 0;
}
/* Semaine : 7 cases, jours planifiés (.is-on) teintés + points réseaux. */
.mpl-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 18px;
}
.mpl-day {
  border-radius: 10px;
  background: var(--mpl-shade);
  border: 1px solid var(--mpl-line);
  padding: 9px 0 8px;
  text-align: center;
  min-width: 0;
}
.mpl-day.is-on {
  background: #f5f1fe;
  border-color: rgba(109, 40, 217, 0.27);
}
.mpl-day-l {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--zh-muted);
}
.mpl-day-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  margin-top: 6px;
  padding: 0 3px;
}
.mpl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mpl-net);
}
/* Crosspost : Instagram → flèche → 5 disques empilés. */
.mpl-cross {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--mpl-shade);
  border: 1px solid var(--mpl-line);
}
.mpl-cross-src {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mpl-net);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mpl-cross-src svg {
  width: 18px;
  height: 18px;
}
.mpl-cross-arrow {
  width: 26px;
  height: 14px;
  color: var(--zh-purple);
  flex-shrink: 0;
}
.mpl-cross-stack {
  display: flex;
  min-width: 0;
}
.mpl-cross-disc {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mpl-net);
  color: #fff;
  border: 2px solid #fff;
  margin-left: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mpl-cross-disc:first-child {
  margin-left: 0;
}
.mpl-cross-disc svg {
  width: 13px;
  height: 13px;
}

/* ── Comment ça marche (#comment) ────────────────────────────────────────── */
.mpl-how {
  background: var(--zh-bg3);
  border-top: 1px solid var(--mpl-line);
  padding: 66px 36px;
  scroll-margin-top: var(--mpl-anchor);
}
.mpl-how .mpl-section-head {
  margin-bottom: 40px;
}
.mpl-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.mpl-step {
  min-width: 0;
  display: flex;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--mpl-line);
  border-radius: 16px;
  padding: 20px;
}
.mpl-step-n {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  background: #ede9fe;
  color: var(--zh-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: 13.5px;
}
.mpl-step-txt {
  min-width: 0;
}
.mpl-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;
}
.mpl-step-p {
  font-size: 13.5px;
  color: var(--zh-muted);
  line-height: 1.55;
  margin: 5px 0 0;
}
/* CTA pilule violette + chrono (même geste que « Publier »). */
.mpl-how-cta {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}
.mpl-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 8px 8px 30px;
  border-radius: 100px;
  border: none;
  background: var(--zh-purple);
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 34px -12px rgba(123, 63, 242, 0.6);
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.mpl-cta:hover {
  background: var(--zh-purple-b);
  transform: translateY(-1px);
  box-shadow: 0 18px 38px -12px rgba(123, 63, 242, 0.7);
}
.mpl-cta:disabled,
.mpl-cta.is-busy {
  cursor: wait;
  opacity: 0.8;
  transform: none;
}
.mpl-cta-txt {
  min-width: 0;
}
.mpl-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;
}
.mpl-cta-chrono .zh-chrono svg {
  width: 28px;
  height: 28px;
}

/* ── Le reste de ZIC (#modules, rail scroll-snap) ────────────────────────── */
.mpl-mods {
  background: #fff;
  border-top: 1px solid var(--mpl-line);
  padding: 66px 0 108px;
  scroll-margin-top: var(--mpl-anchor);
}
.mpl-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;
}
.mpl-mods-copy {
  min-width: 0;
}
.mpl-mods-copy .mpl-h2 {
  font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: -1px;
}
.mpl-mods-arrows {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.mpl-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;
}
.mpl-mods-rail::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}
.mpl-mod {
  flex: 0 0 258px;
  scroll-snap-align: start;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--mpl-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;
}
.mpl-mod:hover,
.mpl-mod:focus-visible {
  border-color: var(--mpl-mod);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px var(--mpl-mod);
  color: var(--zh-text);
}
/* Icône : dégradé couleur → couleur éclaircie (voile blanc, pas d'alpha hex). */
.mpl-mod-ic {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--mpl-mod);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px -12px var(--mpl-mod);
  overflow: hidden;
}
.mpl-mod-ic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.3));
}
.mpl-mod-ic svg {
  position: relative;
  z-index: 1;
  width: 23px;
  height: 23px;
}
.mpl-mod-name {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.4px;
  margin-top: 15px;
}
.mpl-mod-desc {
  display: block;
  font-size: 13px;
  color: var(--zh-muted);
  line-height: 1.5;
  margin-top: 6px;
  flex: 1;
}
.mpl-mod-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--mpl-mod);
  margin-top: 16px;
}
.mpl-mod-cta svg {
  width: 13px;
  height: 13px;
}

/* ── Toast (au-dessus du FAB chat desktop : footer + 11 + 58 + 13) ───────── */
.mpl-toast {
  position: fixed;
  right: 22px;
  bottom: calc(var(--mpl-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: mpl-rise 0.26s ease both;
}
.mpl-toast-ic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #dcfce7;
  color: #15803d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
.mpl-toast--err .mpl-toast-ic {
  background: #ffe4e6;
  color: #e11d48;
}
.mpl-toast-msg {
  flex: 1;
  min-width: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .mpl-hero {
    padding-left: 24px;
    padding-right: 24px;
  }
  .mpl-networks,
  .mpl-programmer,
  .mpl-how {
    padding-left: 24px;
    padding-right: 24px;
  }
}
/* Tablette : simulateur sur UNE colonne (éditeur puis aperçus). */
@media (max-width: 900px) {
  .mpl-composer {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}
@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. */
  .mpl-hero {
    padding: calc(152px + env(safe-area-inset-top, 0px)) 16px 40px;
  }
  .mpl-hero-h1 {
    letter-spacing: -1.2px;
  }
  .mpl-hero-sub {
    font-size: 15px;
  }
  .mpl-composer {
    margin-top: 26px;
  }
  .mpl-editor {
    padding: 16px;
    border-radius: 18px;
  }
  /* iOS Safari zoome la page au focus de tout champ texte dont la font-size
     est < 16 px (et ne revient pas en arrière) : 16 px sur le textarea et la
     date, comme `.zic-auth-input` (auth-modal.css). Tailles desktop
     (14,5 / 13,5 px) inchangées. */
  .mpl-text,
  .mpl-schedule {
    font-size: 16px;
  }
  /* Cibles tactiles ≥ 44 px. */
  .mpl-media,
  .mpl-net,
  .mpl-when-btn,
  .mpl-schedule,
  .mpl-publish {
    min-height: 44px;
  }
  /* Rail des aperçus au doigt : flèches inutiles (elles chevauchaient les
     bords des cartes à −8 px). */
  .mpl-arrow--prev,
  .mpl-arrow--next {
    display: none;
  }
  .mpl-networks,
  .mpl-programmer,
  .mpl-how {
    padding: 48px 16px;
  }
  .mpl-section-head,
  .mpl-how .mpl-section-head {
    margin-bottom: 24px;
  }
  /* 6 cartes = 2 rangées de 3 (l'auto-fit laissait 4 + 2 orphelines à 768). */
  .mpl-net-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .mpl-prog-card {
    padding: 22px 20px;
  }
  .mpl-step {
    padding: 18px 16px;
  }
  .mpl-mods {
    padding: 48px 0 72px;
  }
  .mpl-mods-head {
    padding: 0 16px;
    margin-bottom: 18px;
  }
  .mpl-mods-arrows {
    display: none;
  }
  .mpl-mods-rail {
    padding: 4px 16px 8px;
    scroll-padding-left: 16px;
    gap: 12px;
  }
  .mpl-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 (même valeur
     que landing-multishop-page.css). */
  .mpl-toast {
    bottom: calc(var(--mpl-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-multipost-page — ce fichier partagé n'est pas touché (patron des
     règles de chrome re-scopées). Le test tests/test_multipost_landing_css.py
     (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 sorti du
     viewport (body.zh-hero-out, posé par landing-multipost-page.js — même
     observateur que landing-home.js, mais sur .mpl-hero-copy : la section
     .mpl-hero contient tout le simulateur) : seule la pastille disparaît, le bouton reste en
     haut à droite EXACTEMENT comme la home (aucun repli bas : pas de barre
     sticky ici). */
  body.zh-multipost-page .zic-chat-fab-wrap {
    top: calc(98px + env(safe-area-inset-top, 0px));
    bottom: auto;
    width: 300px;
    height: 46px;
  }
  body.zh-multipost-page .zic-chat-fab-clip {
    display: block;
    right: 23px;
  }
  body.zh-multipost-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-multipost-page .zic-chat-fab-pill-title {
    color: #fff;
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 12.5px;
  }
  body.zh-multipost-page .zic-chat-fab-pill-sub {
    display: none;
  }
  body.zh-multipost-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-multipost-page .zic-chat-fab-av:first-child {
    margin-left: 0;
  }
  body.zh-multipost-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-multipost-page .zic-chat-fab-icon svg {
    width: 21px;
    height: 21px;
  }
  body.zh-multipost-page .zic-chat-fab-ring {
    animation-duration: 2.2s;
  }
  body.zh-multipost-page .zic-chat-fab-badge {
    min-width: 18px;
    height: 18px;
    top: -4px;
    right: -4px;
    border-color: #1a0840;
    line-height: 14px;
  }
  body.zh-multipost-page.zh-hero-out .zic-chat-fab-clip {
    display: none;
  }
}
@media (max-width: 480px) {
  .mpl-hero {
    padding-bottom: 32px;
  }
  .mpl-hero-h1 {
    font-size: 30px;
  }
  .mpl-composer {
    scroll-margin-top: 70px;
  }
  /* Cartes d'aperçu : une carte + l'amorce de la suivante à 375 px (343 px
     utiles). */
  .mpl-prev {
    flex-basis: 212px;
  }
  .mpl-net-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mpl-prog-card {
    padding: 20px 16px;
  }
  .mpl-prog-h3 {
    font-size: 18px;
  }
  .mpl-week {
    gap: 4px;
  }
  /* « Écrire mon premier post — gratuit » + chrono dans 343 px : pilule plus
     compacte, le libellé peut passer sur 2 lignes. */
  .mpl-cta {
    font-size: 14.5px;
    gap: 10px;
    padding: 7px 7px 7px 20px;
    max-width: 100%;
  }
  .mpl-toast {
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

/* ── Mouvement réduit ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.zh-multipost-page {
    scroll-behavior: auto;
  }
  .mpl-prev-rail,
  .mpl-mods-rail {
    scroll-behavior: auto;
  }
  .mpl-card-hover,
  .mpl-card-hover:hover,
  .mpl-mod,
  .mpl-mod:hover,
  .mpl-cta,
  .mpl-cta:hover {
    transform: none !important;
    transition: none !important;
  }
  .mpl-prev,
  .mpl-toast,
  .mpl-live-dot {
    animation: none !important;
  }
  .mpl-publish.is-busy::after {
    animation-duration: 1.6s;
  }
}