/* ─── Zekast UI mockups for marketing pages ─────────────────────────
   Recreate the look of the actual Zekast plugin admin UI in pure HTML+CSS
   so marketing pages can illustrate features with realistic fake data —
   no empty-state screenshots, no real customer data exposed, no PNG
   weight. Each mockup is scoped under its own `.mockup-*` namespace
   and uses neutral system fonts (not Zekast's brand fonts) to match
   the WP-admin look visitors will actually see.
   ────────────────────────────────────────────────────────────────── */


/* ─── Subscribers list (used in /features/monetisation s05) ───────── */

.mockup-subs {
  background: #f3f4f7;
  border-radius: 14px;
  padding: 32px 32px 30px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin-top: 32px;  /* Stack below the section-body text */
  /* Defuse all interactivity — this is an illustration, not a working
     UI. Visitors must not be tempted to click on the (fake) podcast
     names, the Export CSV button, or the per-row Renvoyer buttons.
     scroll inside the table-card stays available on narrow viewports. */
  pointer-events: none;
}

.mockup-subs__title {
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 20px;
  color: #0a0d13;
  letter-spacing: -0.01em;
}

.mockup-subs__filterbar {
  background: #fff;
  border-radius: 10px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  flex-wrap: wrap;
}

.mockup-subs__filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mockup-subs__filter > label {
  color: #4a4d54;
  font-weight: 500;
  font-size: 11px;
}
.mockup-subs__select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #d6d8de;
  border-radius: 6px;
  padding: 4px 8px 4px 10px;
  font-size: 11px;
  color: #1a1d24;
  cursor: default;
}
.mockup-subs__select::after {
  content: "▾";
  font-size: 9px;
  color: #888;
  margin-left: 2px;
}

.mockup-subs__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #2c3340;
  color: #1a1d24;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: default;
  font-family: inherit;
}
.mockup-subs__btn svg { display: block; }

.mockup-subs__count {
  margin-left: auto;
  color: #6b6e75;
  font-size: 11px;
}

.mockup-subs__table-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.mockup-subs table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  /* table-layout: auto (default) — let columns size to their content
     now that we have the full wrap width to work with. Avoids the
     forced narrow columns of `fixed` that wrapped buttons + truncated
     emails when the mockup lived inside the half-width grid column. */
}
.mockup-subs thead th {
  text-align: left;
  font-weight: 600;
  color: #1a1d24;
  padding: 14px 16px;
  border-bottom: 1px solid #ebedf0;
  font-size: 11px;
  background: #fafbfc;
  white-space: nowrap;
}
.mockup-subs thead th:last-child { text-align: right; }
.mockup-subs tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid #f1f2f4;
  vertical-align: middle;
}
.mockup-subs tbody tr:last-child td { border-bottom: 0; }
.mockup-subs tbody td:last-child { text-align: right; }

.mockup-subs__email {
  color: #1a1d24;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup-subs__link {
  color: #2755e5;
  text-decoration: none;
}

.mockup-subs__date {
  color: #4a4d54;
  font-variant-numeric: tabular-nums;
}

/* Pills — Plan + Statut. */
.mockup-subs__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.mockup-subs__pill--free    { background: #ebedf0; color: #4a4d54; }
.mockup-subs__pill--premium { background: #fce2e6; color: #c8426a; }
.mockup-subs__pill--actif   { background: #dcfce7; color: #166534; }
.mockup-subs__pill--annule  { background: #fee2e2; color: #991b1b; }
.mockup-subs__pill--suspendu{ background: #fef3c7; color: #92400e; }

/* Renvoyer button — outlined per-row action. */
.mockup-subs__btn-resend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid #2c3340;
  color: #1a1d24;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 500;
  cursor: default;
}

/* Narrow widths : let the table scroll horizontally inside the card
   rather than breaking the layout. */
@media (max-width: 760px) {
  .mockup-subs { padding: 20px; }
  .mockup-subs__table-card {
    overflow-x: auto;
    /* Re-enable horizontal scroll inside the card — pointer-events is
       cut on the parent .mockup-subs but scrolling on a child needs
       pointer events back on. */
    pointer-events: auto;
  }
  .mockup-subs table { min-width: 540px; }
  .mockup-subs__filterbar { gap: 10px; }
  .mockup-subs__count { margin-left: 0; flex-basis: 100%; }
}


/* ─── Distribution dashboard (used in /features/distribution s01) ───── */

.mockup-dist {
  background: #f3f4f7;
  border-radius: 14px;
  padding: 32px 32px 28px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin-top: 32px;
  pointer-events: none;
}

.mockup-dist__title {
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 8px;
  color: #0a0d13;
  letter-spacing: -0.01em;
}
.mockup-dist__intro {
  margin: 0 0 20px;
  color: #4a4d54;
  max-width: 70ch;
  font-size: 12.5px;
}

.mockup-dist__table-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.mockup-dist table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.mockup-dist thead th {
  text-align: left;
  font-weight: 600;
  color: #1a1d24;
  padding: 14px 18px;
  border-bottom: 1px solid #ebedf0;
  font-size: 11.5px;
  background: #fafbfc;
  white-space: nowrap;
}
.mockup-dist thead th:last-child { text-align: right; }
.mockup-dist tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid #f1f2f4;
  vertical-align: middle;
}
.mockup-dist tbody tr:last-child td { border-bottom: 0; }
.mockup-dist tbody tr:nth-child(odd) td { background: #fafbfc; }
.mockup-dist tbody td:last-child { text-align: right; }

/* Cover + name cluster */
.mockup-dist__pod {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mockup-dist__cover {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.mockup-dist__cover--cafe   { background: #f0708a; }
.mockup-dist__cover--quartier { background: #2b6178; }
.mockup-dist__cover--bestof { background: #1e3a8a; }
.mockup-dist__cover--avant  { background: #c8426a; }
.mockup-dist__pod-meta { min-width: 0; }
.mockup-dist__pod-name {
  display: block;
  font-weight: 600;
  color: #2755e5;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup-dist__pod-feed {
  display: block;
  margin-top: 2px;
  color: #6b6e75;
  font-size: 11px;
  white-space: nowrap;
}
.mockup-dist__pod-feed::after { content: " ↗"; font-size: 9px; }

/* Type pill (Podcast / Mix) */
.mockup-dist__type {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: #ebedf0;
  color: #4a4d54;
}
.mockup-dist__type--mix { background: #fce2e6; color: #c8426a; }

/* Statut RSS badge */
.mockup-dist__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.mockup-dist__status--ready { background: #dcfce7; color: #166534; }
.mockup-dist__status--off   { background: #ebedf0; color: #4a4d54; }

/* Présence plateformes : counter + row of 10 platform circles */
.mockup-dist__presence {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mockup-dist__count {
  font-weight: 600;
  color: #1a1d24;
  font-size: 12px;
  white-space: nowrap;
}
.mockup-dist__count--off { color: #6b6e75; }
.mockup-dist__platforms {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
}
.mockup-dist__plat {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  opacity: 0.28;
  filter: grayscale(1);
}
.mockup-dist__plat.is-on {
  opacity: 1;
  filter: none;
}
.mockup-dist__plat--apple    { background: #1a1d24; }
.mockup-dist__plat--spotify  { background: #1db954; }
.mockup-dist__plat--amazon   { background: #ff9900; color: #1a1d24; }
.mockup-dist__plat--deezer   { background: #ef5466; }
.mockup-dist__plat--youtube  { background: #ff0000; }
.mockup-dist__plat--iheart   { background: #cc0000; }
.mockup-dist__plat--pi       { background: #e85f7c; }
.mockup-dist__plat--castbox  { background: #f56122; }
.mockup-dist__plat--overcast { background: #fc7e0f; }
.mockup-dist__plat--pocket   { background: #f43e37; }

/* Configurer action button */
.mockup-dist__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid #2c3340;
  color: #1a1d24;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: default;
}

.mockup-dist__footer {
  margin: 18px 0 0;
  color: #6b6e75;
  font-size: 11.5px;
  max-width: 80ch;
}

@media (max-width: 900px) {
  .mockup-dist { padding: 20px; }
  .mockup-dist__table-card { overflow-x: auto; pointer-events: auto; }
  .mockup-dist table { min-width: 760px; }
}


/* ─── Stats Free columns (used in /features/statistiques s01) ───────
   Compact mockup of the wp-admin "Épisodes" list with the 2 native
   Zekast columns "Lectures" + "Auditeurs uniques" highlighted. Stays
   in the section 2-col grid (illu side), not full-width. */

.mockup-stats-free {
  background: #f3f4f7;
  border-radius: 12px;
  padding: 22px 22px 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
  font-size: 12px;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mockup-stats-free__crumb {
  font-size: 10.5px;
  color: #6b6e75;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}
.mockup-stats-free__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
  color: #0a0d13;
}
.mockup-stats-free__table-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
.mockup-stats-free table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.mockup-stats-free thead th {
  text-align: left;
  font-weight: 600;
  color: #1a1d24;
  padding: 10px 12px;
  border-bottom: 1px solid #ebedf0;
  font-size: 10.5px;
  background: #fafbfc;
  white-space: nowrap;
}
.mockup-stats-free thead th.is-hl {
  background: #fce2e6;
  color: #c8426a;
}
.mockup-stats-free tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f2f4;
}
.mockup-stats-free tbody tr:last-child td { border-bottom: 0; }
.mockup-stats-free tbody td.is-hl {
  background: #fffafb;
  color: #c8426a;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mockup-stats-free td:first-child,
.mockup-stats-free th:first-child { padding-left: 14px; }
.mockup-stats-free td:last-child,
.mockup-stats-free th:last-child { padding-right: 14px; text-align: right; }
.mockup-stats-free__ep {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mockup-stats-free__cover {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 9px;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.mockup-stats-free__cover--cafe     { background: #f0708a; }
.mockup-stats-free__cover--quartier { background: #2b6178; }
.mockup-stats-free__ep-title {
  color: #2755e5;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  min-width: 0;
}


/* ─── Stats Pro dashboard (used in /features/statistiques s02) ──────
   Full-width stacked mockup of the Pro analytics dashboard. Covers :
   header strip → KPI cards row → 2 main charts → audience 3-cards.
   Skips Actions rapides / État du flux (admin utility, not analytics).
   Bar charts are pure CSS divs with width % — no JS, no SVG library. */

.mockup-stats-pro {
  background: #f3f4f7;
  border-radius: 14px;
  padding: 28px 28px 32px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
  font-size: 12.5px;
  line-height: 1.45;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin-top: 32px;
}

/* Header strip — title + version meta + Add feed button */
.mockup-stats-pro__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.mockup-stats-pro__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: #0a0d13;
  letter-spacing: -0.01em;
}
.mockup-stats-pro__sub {
  font-size: 11.5px;
  color: #6b6e75;
  margin: 4px 0 0;
}
.mockup-stats-pro__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #1a1d24;
  color: #fff;
  border: 1px solid #1a1d24;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* KPI strip — row of equal-size cards, one optionally highlighted */
.mockup-stats-pro__kpi-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.mockup-stats-pro__kpi {
  background: #fff;
  border-radius: 10px;
  padding: 14px 14px 13px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mockup-stats-pro__kpi.is-hl {
  background: #0a0d13;
  color: #fff;
}
.mockup-stats-pro__kpi-icon {
  width: 18px;
  height: 18px;
  color: #4a4d54;
  margin-bottom: 6px;
}
.mockup-stats-pro__kpi.is-hl .mockup-stats-pro__kpi-icon { color: #fff; opacity: 0.7; }
.mockup-stats-pro__kpi-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: #0a0d13;
}
.mockup-stats-pro__kpi.is-hl .mockup-stats-pro__kpi-num { color: #fff; }
.mockup-stats-pro__kpi-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6e75;
  margin-top: 2px;
}
.mockup-stats-pro__kpi.is-hl .mockup-stats-pro__kpi-label { color: #c8cad0; }

/* Generic card used inside the Pro dashboard. */
.mockup-stats-pro__card {
  background: #fff;
  border-radius: 10px;
  padding: 18px 20px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.mockup-stats-pro__card-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: #0a0d13;
}

/* ── Détail des épisodes — full-width section.
   Matches the real-admin look the user shared : header strip, violet
   KPI bar (X LECTURES / Y AUDITEURS / Z ÉPISODES AFFICHÉS), legend, and
   stacked two-tone horizontal bars (dark Lectures + grey Auditeurs
   uniques) with a numbered axis below. */
.mockup-stats-pro__details {
  margin-bottom: 22px;
}
.mockup-stats-pro__details-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.mockup-stats-pro__details-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #d6d8de;
  border-radius: 6px;
  padding: 4px 12px 4px 10px;
  font-size: 11px;
  color: #1a1d24;
}
.mockup-stats-pro__details-pill::after {
  content: "▾";
  font-size: 9px;
  color: #888;
  margin-left: 2px;
}
.mockup-stats-pro__details-kpis {
  background: #fce2e6;
  border-radius: 8px;
  padding: 16px 22px;
  display: flex;
  gap: 44px;
  margin-bottom: 16px;
}
.mockup-stats-pro__details-kpi-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mockup-stats-pro__details-kpi-num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #0a0d13;
  font-variant-numeric: tabular-nums;
}
.mockup-stats-pro__details-kpi-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c8426a;
}
.mockup-stats-pro__details-chart {
  background: #fff;
  border-radius: 10px;
  padding: 18px 22px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.mockup-stats-pro__legend {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-bottom: 16px;
  font-size: 11px;
  color: #4a4d54;
}
.mockup-stats-pro__legend-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.mockup-stats-pro__legend-dot::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--dot-color);
}

.mockup-stats-pro__details-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.mockup-stats-pro__details-label {
  color: #4a4d54;
  text-align: right;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup-stats-pro__details-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mockup-stats-pro__details-fill {
  height: 8px;
  border-radius: 2px;
  min-width: 2px;
}
.mockup-stats-pro__details-fill--main { background: #0a0d13; }
.mockup-stats-pro__details-fill--alt  { background: #d6d8de; }

.mockup-stats-pro__details-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-left: 194px;  /* aligns with bars (label col + gap) */
  font-size: 10px;
  color: #6b6e75;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
  .mockup-stats-pro__details-row { grid-template-columns: 140px 1fr; }
  .mockup-stats-pro__details-axis { padding-left: 154px; }
}

/* Audience cards — 3 cards side by side */
.mockup-stats-pro__aud-head {
  margin: 4px 0 14px;
}
.mockup-stats-pro__aud-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #0a0d13;
}
.mockup-stats-pro__aud-sub {
  font-size: 11px;
  color: #6b6e75;
  margin: 0;
}
.mockup-stats-pro__aud-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mockup-stats-pro__aud-card-label {
  font-size: 11px;
  font-weight: 600;
  color: #4a4d54;
  margin: 0 0 10px;
}
.mockup-stats-pro__aud-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mockup-stats-pro__aud-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #1a1d24;
}
.mockup-stats-pro__aud-name {
  width: 88px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #4a4d54;
}
.mockup-stats-pro__aud-bar {
  flex: 1;
  height: 8px;
  background: #ebedf0;
  border-radius: 999px;
  overflow: hidden;
}
.mockup-stats-pro__aud-bar > span {
  display: block;
  height: 100%;
  background: #c8426a;
  border-radius: 999px;
}
.mockup-stats-pro__aud-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #1a1d24;
  font-size: 10.5px;
  width: 34px;
  text-align: right;
}

@media (max-width: 1100px) {
  .mockup-stats-pro__kpi-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .mockup-stats-pro { padding: 20px; }
  .mockup-stats-pro__head { flex-direction: column; gap: 12px; }
  .mockup-stats-pro__kpi-row { grid-template-columns: repeat(2, 1fr); }
  .mockup-stats-pro__aud-row { grid-template-columns: 1fr; }
  .mockup-stats-pro__details-row { grid-template-columns: 100px 1fr; }
  .mockup-stats-pro__details-axis { padding-left: 114px; }
  .mockup-stats-pro__details-kpis { flex-wrap: wrap; gap: 18px; }
}


/* ─── Picker modal (used in /features/mixes s01) ──────────────────
   Reproduces the « Choisir les épisodes » modal of the Zekast Console
   (the central UI for composing a Mix). 3-col layout :
   filter podcasts | episodes in mix | episodes to add. Drag handles,
   cover thumbs colour-coded by podcast, ✓ Ajouté / + Ajouter chips. */

.mockup-picker {
  background: #fff;
  border-radius: 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.06);
  margin-top: 32px;
  pointer-events: none;
  overflow: hidden;
  border: 1px solid #ebedf0;
}

/* Top bar — Zekast logo + close button (mimics the Console modal chrome) */
.mockup-picker__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid #ebedf0;
}
.mockup-picker__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  color: #1a1d24;
}
.mockup-picker__brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #f0708a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}
.mockup-picker__close {
  font-size: 18px;
  color: #6b6e75;
  line-height: 1;
  padding: 4px 6px;
}

/* Body : sidebar + main 3-col panel */
.mockup-picker__body {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 480px;
}

/* Sidebar — sections (Choisir les épisodes / Infos / Diffuser) */
.mockup-picker__nav {
  background: #fafbfc;
  border-right: 1px solid #ebedf0;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mockup-picker__nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  color: #4a4d54;
  font-weight: 500;
}
.mockup-picker__nav-item.is-active {
  background: #1a1d24;
  color: #fff;
}
.mockup-picker__nav-icon {
  font-size: 14px;
  display: inline-block;
}

/* Main : title + 3-col grid */
.mockup-picker__main {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mockup-picker__main-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 18px;
  color: #0a0d13;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mockup-picker__cols {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

/* Col 1 — Filtre par podcast */
.mockup-picker__col-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6e75;
  margin: 0 0 10px;
}
.mockup-picker__filter-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mockup-picker__filter-item {
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: #4a4d54;
}
.mockup-picker__filter-item.is-active {
  background: #1a1d24;
  color: #fff;
  font-weight: 600;
}

/* Col 2 — In this mix (current selection, draggable) */
.mockup-picker__inmix-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.mockup-picker__inmix-count {
  font-size: 12.5px;
  font-weight: 600;
  color: #0a0d13;
}
.mockup-picker__inmix-count-meta {
  font-weight: 400;
  color: #6b6e75;
}
.mockup-picker__inmix-list,
.mockup-picker__add-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mockup-picker__inmix-item {
  display: grid;
  grid-template-columns: 14px 32px 1fr 16px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #ebedf0;
  border-radius: 8px;
  background: #fff;
}
.mockup-picker__drag {
  color: #c8cad0;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -1px;
}
.mockup-picker__remove {
  color: #6b6e75;
  font-size: 14px;
  line-height: 1;
}
.mockup-picker__cover {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 9px;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.mockup-picker__cover--cafe     { background: #f0708a; }
.mockup-picker__cover--quartier { background: #2b6178; }
.mockup-picker__cover--bestof   { background: #1e3a8a; }
.mockup-picker__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mockup-picker__title {
  font-size: 12px;
  font-weight: 500;
  color: #1a1d24;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup-picker__sub {
  font-size: 10.5px;
  color: #6b6e75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sort/select pill */
.mockup-picker__select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #d6d8de;
  border-radius: 6px;
  padding: 5px 8px 5px 10px;
  font-size: 10.5px;
  color: #1a1d24;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup-picker__select::after {
  content: "▾";
  font-size: 9px;
  color: #888;
  margin-left: 2px;
  flex-shrink: 0;
}

/* Col 3 — Ajouter des épisodes (available episodes + search) */
.mockup-picker__add-head {
  margin-bottom: 12px;
}
.mockup-picker__add-title {
  font-size: 13px;
  font-weight: 600;
  color: #0a0d13;
  margin: 0 0 10px;
}
.mockup-picker__add-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.mockup-picker__search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #d6d8de;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: #9da0a8;
  min-width: 0;
}
.mockup-picker__search::before {
  content: "🔍";
  font-size: 10px;
  opacity: 0.6;
}
.mockup-picker__add-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #ebedf0;
  border-radius: 8px;
  background: #fff;
}
.mockup-picker__add-item.is-added {
  border-color: #1f9d55;
  background: #f0fdf4;
}
.mockup-picker__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}
.mockup-picker__chip--add {
  background: #fff;
  border: 1px solid #d6d8de;
  color: #1a1d24;
}
.mockup-picker__chip--added {
  background: #1f9d55;
  color: #fff;
}

/* Footer — counts + actions */
.mockup-picker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid #ebedf0;
  background: #fafbfc;
}
.mockup-picker__count {
  font-size: 11.5px;
  color: #6b6e75;
}
.mockup-picker__actions {
  display: flex;
  gap: 8px;
}
.mockup-picker__btn-cancel {
  background: transparent;
  border: 0;
  color: #6b6e75;
  font-size: 12.5px;
  padding: 8px 12px;
  font-family: inherit;
}
.mockup-picker__btn-apply {
  background: #c8cad0;
  border: 0;
  color: #6b6e75;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: inherit;
}

@media (max-width: 1000px) {
  .mockup-picker__cols { grid-template-columns: 160px 1fr 1fr; gap: 12px; }
  .mockup-picker__body { grid-template-columns: 180px 1fr; }
}
@media (max-width: 760px) {
  .mockup-picker__body { grid-template-columns: 1fr; }
  .mockup-picker__nav { flex-direction: row; gap: 8px; overflow-x: auto; pointer-events: auto; }
  .mockup-picker__cols { grid-template-columns: 1fr; }
  .mockup-picker__filter-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .mockup-picker__main { padding: 16px; }
}
@media (max-width: 600px) {
  /* At 390px, the 3 nav labels ("Choisir les épisodes", "Infos de
     publication", "Diffuser") are too long to fit even with scroll —
     they wrap inside the chip and break the layout. Smaller chips +
     compact labels by shrinking font + tightening padding. The icon
     stays so the visual hierarchy survives. */
  .mockup-picker__top { padding: 10px 14px; }
  .mockup-picker__nav-item {
    padding: 8px 10px;
    font-size: 11px;
    /* Allow inner text to truncate inside its chip rather than wrap onto
       multiple lines and balloon the chip height. */
    white-space: nowrap;
  }
  .mockup-picker__nav-icon { font-size: 12px; }
  .mockup-picker__main { padding: 14px; }
  .mockup-picker__main-title { font-size: 14px; gap: 6px; }
  /* 2 cols instead of 3 — at 390px, each filter pill in a 3-col grid
     is ≤100px, which crams "Les Voix du Quartier" into 3 lines. */
  .mockup-picker__filter-list { grid-template-columns: repeat(2, 1fr); }
  .mockup-picker__filter-item { font-size: 11px; padding: 6px 8px; }
  .mockup-picker__inmix-item { padding: 8px 10px; gap: 8px; }
  .mockup-picker__inmix-item .mockup-picker__title { font-size: 11.5px; }
  .mockup-picker__inmix-item .mockup-picker__sub { font-size: 10px; }
  .mockup-picker__add-item { padding: 8px 10px; gap: 8px; }
  .mockup-picker__add-item .mockup-picker__title { font-size: 11.5px; }
  .mockup-picker__add-item .mockup-picker__sub { font-size: 10px; }
  /* Footer buttons cluster better when stacked end-aligned at narrow widths. */
  .mockup-picker__footer { padding: 10px 14px; gap: 10px; }
  .mockup-picker__btn-cancel, .mockup-picker__btn-apply {
    padding: 7px 12px;
    font-size: 11.5px;
  }
}


/* ─── Stripe paywall (used in /features/monetisation s02) ──────────
   Front-end visitor view of a premium episode : cover + title + meta
   + player with teaser preview indicator + paywall card with lock icon
   + CTA. Stays in the section 2-col grid (illu_left). */

.mockup-paywall {
  background: #fff;
  border-radius: 14px;
  padding: 24px 24px 22px;
  font-family: var(--f-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
  color: #1a1d24;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  border: 1px solid #ebedf0;
  pointer-events: none;
}

/* Episode hero — cover + title cluster */
.mockup-paywall__hero {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  margin-bottom: 18px;
  align-items: center;
}
.mockup-paywall__cover {
  width: 92px;
  height: 92px;
  border-radius: 8px;
  background: #f0708a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.mockup-paywall__crumb {
  font-size: 10.5px;
  color: #6b6e75;
  margin: 0 0 4px;
  letter-spacing: 0.04em;
}
.mockup-paywall__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #0a0d13;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.mockup-paywall__meta {
  font-size: 11.5px;
  color: #6b6e75;
}

/* Player area — minimalist : play button + progress bar with teaser cap */
.mockup-paywall__player {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #fafbfc;
  border: 1px solid #ebedf0;
  border-radius: 10px;
  margin-bottom: 14px;
}
.mockup-paywall__play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1a1d24;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.mockup-paywall__progress-wrap {
  flex: 1;
  min-width: 0;
}
.mockup-paywall__progress {
  height: 4px;
  background: #ebedf0;
  border-radius: 999px;
  position: relative;
  margin: 6px 0 8px;
}
.mockup-paywall__progress-teaser {
  position: absolute;
  top: -3px; bottom: -3px;
  left: 0; width: 18%;
  background: #1a1d24;
  border-radius: 999px;
}
.mockup-paywall__progress-cap {
  position: absolute;
  top: -6px;
  left: 18%;
  width: 2px; height: 16px;
  background: #f0708a;
}
.mockup-paywall__time {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #6b6e75;
  font-variant-numeric: tabular-nums;
}
.mockup-paywall__teaser-badge {
  background: #fce2e6;
  color: #c8426a;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Paywall card — lock + title + desc + CTA + price line */
.mockup-paywall__card {
  background: #f0708a;
  color: #fff;
  border-radius: 12px;
  padding: 24px 22px;
  text-align: center;
}
.mockup-paywall__lock {
  font-size: 28px;
  margin-bottom: 10px;
  opacity: 0.9;
}
.mockup-paywall__card-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.mockup-paywall__card-desc {
  font-size: 12.5px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
.mockup-paywall__cta {
  display: inline-block;
  background: #fff;
  color: #c8426a;
  font-weight: 700;
  font-size: 13px;
  padding: 11px 22px;
  border-radius: 8px;
  text-decoration: none;
}
.mockup-paywall__price {
  margin: 14px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}


/* ─── Bunny config wizard (used in /features/hosting s01) ──────────
   Admin wizard with two side-by-side states : BEFORE (paste key +
   click) and AFTER (success ✓ + premium-signing-ready badge). Two
   cards inside a single mockup container. */

.mockup-bunny {
  background: #f3f4f7;
  border-radius: 14px;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
  font-size: 12.5px;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mockup-bunny__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.mockup-bunny__card {
  background: #fff;
  border-radius: 10px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.mockup-bunny__stage {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6e75;
  margin: 0 0 12px;
}
.mockup-bunny__stage-num {
  display: inline-block;
  width: 18px; height: 18px;
  background: #ebedf0;
  border-radius: 50%;
  text-align: center;
  line-height: 18px;
  margin-right: 6px;
  color: #1a1d24;
}
.mockup-bunny__heading {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #0a0d13;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mockup-bunny__desc {
  font-size: 11.5px;
  color: #6b6e75;
  margin: 0 0 14px;
}
.mockup-bunny__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mockup-bunny__input {
  flex: 1 1 200px;
  min-width: 0;
  background: #fff;
  border: 1px solid #d6d8de;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: #1a1d24;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}
.mockup-bunny__input--filled {
  color: #1a1d24;
  background: #fafbfc;
}
.mockup-bunny__btn {
  background: #f0708a;
  color: #fff;
  border: 0;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mockup-bunny__success-msg {
  background: #f0fdf4;
  border: 1px solid #1f9d55;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  color: #166534;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.mockup-bunny__success-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: #166534;
}
.mockup-bunny__success-list li::before {
  content: "✓ ";
  font-weight: 700;
}
.mockup-bunny__ready {
  background: #fdf0f2;
  border: 1px solid #ffc2cf;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #c8426a;
}
.mockup-bunny__ready-icon {
  font-size: 16px;
}
.mockup-bunny__ready-strong {
  font-weight: 700;
  display: block;
  font-size: 12.5px;
  margin-bottom: 2px;
}

@media (max-width: 760px) {
  .mockup-bunny { padding: 16px; }
  .mockup-bunny__cards { grid-template-columns: 1fr; }
}


/* ─── Embed metabox (used in /features/embed s01) ──────────────────
   Wp-admin style meta-box for embedding an episode : description text,
   info-box about the native block, textarea with the iframe snippet,
   action buttons (Copier + Preview), and a small embed preview thumb
   to the right. */

.mockup-embed {
  background: #f3f4f7;
  border-radius: 14px;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
  font-size: 12.5px;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mockup-embed__panel {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
.mockup-embed__panel-head {
  padding: 12px 16px;
  background: #fafbfc;
  border-bottom: 1px solid #ebedf0;
  font-size: 12.5px;
  font-weight: 600;
  color: #1a1d24;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mockup-embed__body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 18px;
  padding: 18px 18px 16px;
}
.mockup-embed__form {
  min-width: 0;
}
.mockup-embed__desc {
  font-size: 11.5px;
  color: #50575e;
  margin: 0 0 10px;
}
.mockup-embed__info {
  background: #f6f7f7;
  border-left: 3px solid #2271b1;
  padding: 8px 12px;
  font-size: 11px;
  color: #50575e;
  line-height: 1.5;
  margin: 0 0 10px;
}
.mockup-embed__info code {
  background: rgba(0,0,0,0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px;
}
.mockup-embed__snippet {
  width: 100%;
  background: #fbfbfc;
  border: 1px solid #d6d8de;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.5;
  color: #1a1d24;
  resize: none;
  display: block;
  min-height: 64px;
  white-space: pre-wrap;
  word-break: break-all;
}
.mockup-embed__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.mockup-embed__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid #2c3340;
  color: #1a1d24;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
}
.mockup-embed__btn--link {
  border-color: transparent;
  color: #2271b1;
}
.mockup-embed__preview {
  background: #fafbfc;
  border: 1px solid #ebedf0;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mockup-embed__preview-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6e75;
}
.mockup-embed__preview-frame {
  background: #fff;
  border: 1px solid #d6d8de;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mockup-embed__preview-cover {
  width: 44px; height: 44px;
  border-radius: 5px;
  background: #f0708a;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #fff;
  font-weight: 700;
}
.mockup-embed__preview-meta { min-width: 0; flex: 1; }
.mockup-embed__preview-title {
  font-size: 11px;
  font-weight: 600;
  color: #1a1d24;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup-embed__preview-sub {
  font-size: 9.5px;
  color: #6b6e75;
}
.mockup-embed__preview-play {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #1a1d24;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
}
.mockup-embed__preview-progress {
  height: 3px;
  background: #ebedf0;
  border-radius: 999px;
  margin: 4px 0 0;
}
.mockup-embed__preview-progress > span {
  display: block;
  height: 100%;
  width: 32%;
  background: #1a1d24;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .mockup-embed__body { grid-template-columns: 1fr; }
}


/* ─── Flow schema — shared by money flow, data flow, etc. ──────────
   Horizontal "node → node → node" diagram with labelled arrows. Used
   on /features/monetisation s01 (money flow), /features/statistiques
   s04 (data flow), and any future "A → B → C" schema. */

.mockup-flow {
  background: #f3f4f7;
  border-radius: 14px;
  padding: 36px 28px 30px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mockup-flow__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mockup-flow__node {
  background: #fff;
  border: 1px solid #ebedf0;
  border-radius: 10px;
  padding: 16px 18px 14px;
  text-align: center;
  min-width: 130px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.mockup-flow__node--accent {
  background: #f0708a;
  color: #fff;
  border-color: transparent;
}
.mockup-flow__node-icon {
  font-size: 22px;
  margin-bottom: 6px;
  display: block;
}
.mockup-flow__node-label {
  font-size: 12px;
  font-weight: 700;
  color: #0a0d13;
  line-height: 1.2;
}
.mockup-flow__node--accent .mockup-flow__node-label { color: #fff; }
.mockup-flow__node-sub {
  font-size: 10.5px;
  color: #6b6e75;
  margin-top: 3px;
}
.mockup-flow__node--accent .mockup-flow__node-sub { color: rgba(255,255,255,0.8); }
.mockup-flow__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 80px;
}
.mockup-flow__arrow-label {
  font-size: 10px;
  color: #4a4d54;
  white-space: nowrap;
  font-weight: 600;
}
.mockup-flow__arrow-line {
  color: #c8cad0;
  font-size: 20px;
  letter-spacing: -2px;
}
.mockup-flow__annotation {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.mockup-flow__annotation-pill {
  background: #fce2e6;
  color: #c8426a;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mockup-flow__annotation-pill--quiet {
  background: #f3f4f7;
  color: #6b6e75;
  font-weight: 500;
}

@media (max-width: 760px) {
  .mockup-flow { padding: 20px 16px; }
  .mockup-flow__row { flex-direction: column; gap: 8px; }
  .mockup-flow__arrow { flex-direction: row; }
  .mockup-flow__arrow-line { transform: rotate(90deg); }
}

/* Branch group — vertical stack of nodes inside a horizontal __row,
   used when one stage produces multiple outputs (e.g. import → podcast
   created + episodes created). */
.mockup-flow__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Vertical layout — fan-in/fan-out schemas. Stack multiple rows
   vertically with arrows between rows pointing down. */
.mockup-flow--vertical { padding: 32px 24px 26px; }
.mockup-flow--vertical .mockup-flow__row { margin: 0 auto; }
.mockup-flow__down-arrow {
  display: flex;
  justify-content: center;
  margin: 6px 0;
  color: #c8cad0;
  font-size: 22px;
  line-height: 1;
}
.mockup-flow__down-arrows {
  display: flex;
  justify-content: space-around;
  margin: 6px auto;
  max-width: 480px;
  color: #c8cad0;
  font-size: 22px;
  line-height: 1;
}


/* ─── Credits per plan (used in /features/transcriptions s03) ──────
   3 cards horizontal showing how many transcription credits each plan
   ships per month. Each card : plan name (small) + big number + label
   + footer note. Center card visually highlighted (most common plan). */

.mockup-credits {
  background: #f3f4f7;
  border-radius: 14px;
  padding: 28px 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mockup-credits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.mockup-credits__card {
  background: #fff;
  border: 1px solid #ebedf0;
  border-radius: 12px;
  padding: 20px 18px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mockup-credits__card--accent {
  background: #f0708a;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 20px -8px rgba(110, 70, 255, 0.4);
}
.mockup-credits__plan {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6e75;
}
.mockup-credits__card--accent .mockup-credits__plan { color: rgba(255,255,255,0.8); }
.mockup-credits__num {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0a0d13;
  font-variant-numeric: tabular-nums;
}
.mockup-credits__card--accent .mockup-credits__num { color: #fff; }
.mockup-credits__label {
  font-size: 11px;
  color: #4a4d54;
}
.mockup-credits__card--accent .mockup-credits__label { color: rgba(255,255,255,0.85); }
.mockup-credits__notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.mockup-credits__note {
  font-size: 11px;
  color: #6b6e75;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #ebedf0;
  border-radius: 999px;
  padding: 5px 12px;
}
.mockup-credits__note-icon { color: #c8426a; font-weight: 700; }

@media (max-width: 760px) {
  .mockup-credits__grid { grid-template-columns: 1fr; }
}


/* ─── Standalone quota banner (used in /features/hosting s04) ──────
   Minimal wrapper around 2 horizontal gauges + last-update timestamp,
   without the surrounding card/title of the managed-hosting card.
   Stays in 2-col grid. */

.mockup-quota-banner {
  background: #fff;
  border-radius: 12px;
  padding: 20px 22px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  border: 1px solid #ebedf0;
}
.mockup-quota-banner__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mockup-quota-banner__title {
  font-size: 13px;
  font-weight: 700;
  color: #0a0d13;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mockup-quota-banner__updated {
  font-size: 10.5px;
  color: #6b6e75;
}
.mockup-quota-banner__rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Reuses .mockup-hosting-card__quota-* classes for the gauge rows
   to avoid duplicating CSS — see managed-card mockup above. */


/* ─── Layout / embed showcases (visual mini-previews) ──────────────
   Shared family for any mockup that displays multiple layout / embed
   variants as labelled mini-cards in a grid. Used by :
   - design-layouts-free  (4 Free catalog layouts)
   - design-layouts-starter (5 Starter+ catalog layouts)
   - design-mobile-drawers (3 mobile drawers)
   - embed-variants (Classic / Split iframe variants)
   - embed-theming (light / dark / custom-color)
   ────────────────────────────────────────────────────────────────── */

.mockup-layouts {
  background: #f3f4f7;
  border-radius: 14px;
  padding: 28px 24px 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mockup-layouts__grid {
  display: grid;
  gap: 14px;
}
.mockup-layouts__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.mockup-layouts__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.mockup-layouts__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.mockup-layouts__grid--cols-5 { grid-template-columns: repeat(5, 1fr); }

.mockup-layouts__card {
  background: #fff;
  border: 1px solid #ebedf0;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.mockup-layouts__preview {
  background: #fafbfc;
  border-radius: 6px;
  height: 110px;
  padding: 10px;
  overflow: hidden;
  position: relative;
}
.mockup-layouts__label {
  font-size: 10.5px;
  font-weight: 600;
  color: #1a1d24;
  text-align: center;
  letter-spacing: 0.02em;
}
.mockup-layouts__tier {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c8426a;
  text-align: center;
}
.mockup-layouts__tier--free { color: #166534; }

/* Reusable mini visual primitives for layouts */
.ml-cover {
  background: #f0708a;
  border-radius: 3px;
}
/* Neutral fill — used for the "other" slots in layout previews where
   only the structure matters, not the podcast variety. Matches the
   design system reference (one violet primary + grey placeholders). */
.ml-cover--neutral { background: #d6d8de; border-radius: 3px; }
/* Soft violet tint — for secondary slots needing a bit more identity
   than pure grey but staying on-brand. */
.ml-cover--tint { background: #ff9bb0; border-radius: 3px; }
/* Legacy aliases — kept so picker / subscribers / distribution that
   genuinely need a 2e or 3e podcast colour still have variants
   (teal + orange) without forcing brown back. */
.ml-cover--alt { background: #2b6178; }
.ml-cover--alt2 { background: #c8426a; }
.ml-cover--alt3 { background: #1e3a8a; }
.ml-line {
  background: #d6d8de;
  border-radius: 2px;
  height: 4px;
}
.ml-line--short { width: 50%; }
.ml-line--mid { width: 70%; }
.ml-line--full { width: 100%; }
.ml-line--dark { background: #6b6e75; }
.ml-progress {
  background: #ebedf0;
  border-radius: 999px;
  height: 3px;
  overflow: hidden;
}
.ml-progress > span {
  display: block;
  height: 100%;
  background: #c8426a;
  border-radius: 999px;
}
.ml-play {
  background: #1a1d24;
  color: #fff;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  flex-shrink: 0;
}

/* Layout preview compositions (each rebuilt to look like the real layout) */

/* Card Grid : 2×2 mini-tiles */
.ml-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  height: 100%;
}
.ml-card-grid > div {
  background: #fff;
  border-radius: 4px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid #ebedf0;
}
.ml-card-grid .ml-cover-sq {
  width: 100%;
  aspect-ratio: 1.4 / 1;
  border-radius: 3px;
  background: #f0708a;
}

/* List Standard : vertical list with cover + 2 lines */
.ml-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 100%;
  justify-content: center;
}
.ml-list-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ml-list-row > .ml-cover { width: 22px; height: 22px; flex-shrink: 0; }
.ml-list-row > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }

/* List Progress : like list standard + progress bar */
.ml-list-progress .ml-list-row > div { gap: 2px; }

/* Classic Player : single big player */
.ml-classic {
  background: #fff;
  border: 1px solid #ebedf0;
  border-radius: 6px;
  padding: 10px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ml-classic .ml-cover { width: 48px; height: 48px; flex-shrink: 0; }
.ml-classic > div:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Spotlight : featured big + 2 small */
.ml-spotlight {
  display: grid;
  grid-template-columns: 50% 1fr;
  gap: 6px;
  height: 100%;
}
.ml-spotlight__big {
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ebedf0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ml-spotlight__big > .ml-cover { width: 100%; flex: 1; min-height: 30px; }
.ml-spotlight__side { display: flex; flex-direction: column; gap: 4px; justify-content: space-between; }
.ml-spotlight__side > div {
  background: #fff;
  border-radius: 3px;
  border: 1px solid #ebedf0;
  padding: 3px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.ml-spotlight__side > div > .ml-cover { width: 16px; height: 16px; flex-shrink: 0; }

/* Mosaic : asymmetric grid */
.ml-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  height: 100%;
}
.ml-mosaic > div {
  background: #f0708a;
  border-radius: 3px;
}
.ml-mosaic > div:nth-child(1) { grid-row: span 2; background: #2b6178; }
.ml-mosaic > div:nth-child(3) { background: #c8426a; }
.ml-mosaic > div:nth-child(5) { background: #1e3a8a; }

/* List Compact : thin rows */
.ml-compact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  justify-content: center;
}
.ml-compact-row {
  background: #fff;
  border-radius: 3px;
  border: 1px solid #ebedf0;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ml-compact-row > .ml-cover { width: 14px; height: 14px; flex-shrink: 0; }
.ml-compact-row > .ml-line { flex: 1; }

/* Table : tabular layout */
.ml-table {
  background: #fff;
  border: 1px solid #ebedf0;
  border-radius: 4px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ml-table-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.5fr;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-bottom: 1px solid #f1f2f4;
}
.ml-table-row:last-child { border-bottom: 0; }
.ml-table-row:first-child { background: #fafbfc; }
.ml-table-row > div { display: flex; align-items: center; gap: 4px; }

/* Split Player : 50/50 player + list */
.ml-split {
  display: grid;
  grid-template-columns: 45% 1fr;
  gap: 6px;
  height: 100%;
}
.ml-split__player {
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ebedf0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ml-split__player > .ml-cover { width: 100%; flex: 1; min-height: 30px; }
.ml-split__list { display: flex; flex-direction: column; gap: 4px; }
.ml-split__list > div {
  background: #fff;
  border-radius: 3px;
  border: 1px solid #ebedf0;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.ml-split__list > div > .ml-line { flex: 1; }


/* ─── Phone frame (mobile mockups) ──────────────────────────────────
   Lightweight CSS phone frame used by drawers (design-mobile-drawers),
   PWA install prompt, PWA offline, PWA lockscreen. Width 260 px,
   aspect 9:19, rounded corners, subtle notch.
   ────────────────────────────────────────────────────────────────── */

.mockup-phone {
  width: 240px;
  background: #1a1d24;
  border-radius: 28px;
  padding: 10px;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}
.mockup-phone__screen {
  background: #fff;
  border-radius: 20px;
  aspect-ratio: 9 / 18;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
  font-size: 11px;
}
.mockup-phone__notch {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 18px;
  background: #1a1d24;
  border-radius: 999px;
  z-index: 10;
}
.mockup-phone__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 16px 0;
  font-size: 9px;
  font-weight: 600;
  color: #1a1d24;
  height: 24px;
}

.mockup-phones-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 0;
}


/* ─── Hero blocks editorial mockup (used in /features/design heroes) ─
   Reproduces the REAL Zekast hero v3 pattern : full-bleed banner with
   the cover used both as a heavily blurred + darkened background AND
   as a sharp foreground square, with white editorial text on top.
   Shows 2 hero examples side-by-side : Podcast hero (with Abonner +
   Dernier épisode CTAs) and Episode hero (with Lire CTA + date),
   each in its own brand colour to demonstrate auto-adaptation.
   ────────────────────────────────────────────────────────────────── */

.mockup-heros {
  background: #f3f4f7;
  border-radius: 14px;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Each hero = a full-bleed banner card. The blurred « cover background »
   is faked with a soft multi-stop radial gradient that matches the
   foreground cover's brand colour, layered under a dark overlay. */
.mockup-heros__hero {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  min-height: 220px;
  color: #fff;
  display: flex;
  align-items: stretch;
}
/* Flat solid background per variant — no gradients, no overlay. The
   bg colour is dark enough to keep white text legible on its own. */

/* Variant : violet (Zekast brand default) */
.mockup-heros__hero--violet { background: #c8426a; }
/* Variant : deep blue navy (shows how the hero adapts to a cool
   brand colour, distinct from the violet primary) */
.mockup-heros__hero--blue { background: #1e3a8a; }

.mockup-heros__inner {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 26px;
  padding: 28px;
  align-items: center;
  width: 100%;
}

/* Foreground sharp cover (square, ~140px) */
.mockup-heros__cover {
  width: 140px;
  height: 140px;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.4);
}
.mockup-heros__cover--violet {
  background: #f0708a;
}
.mockup-heros__cover--blue {
  background: #2563eb;
}

.mockup-heros__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.mockup-heros__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.mockup-heros__eyebrow-sep {
  margin: 0 8px;
  opacity: 0.6;
}
.mockup-heros__title {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.mockup-heros__desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
  max-width: 42ch;
  margin: 0;
}
.mockup-heros__actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.mockup-heros__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
}
.mockup-heros__btn--primary {
  background: #fff;
  color: #1a1d24;
  border-color: transparent;
}
.mockup-heros__date {
  margin: 4px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 760px) {
  .mockup-heros { padding: 14px; }
  .mockup-heros__hero { min-height: 0; }
  .mockup-heros__inner {
    grid-template-columns: 80px 1fr;
    gap: 16px;
    padding: 18px;
  }
  .mockup-heros__cover { width: 80px; height: 80px; }
  .mockup-heros__title { font-size: 18px; }
  .mockup-heros__desc { font-size: 11px; max-width: 100%; }
  .mockup-heros__btn { padding: 6px 12px; font-size: 10.5px; }
}

@media (max-width: 760px) {
  .mockup-layouts__grid--cols-4,
  .mockup-layouts__grid--cols-5 { grid-template-columns: repeat(2, 1fr); }
  .mockup-heros__pair { grid-template-columns: 1fr; }
  .mockup-heros__label-row { grid-template-columns: 1fr; }
}


/* ─── Email magic-link (used in /features/monetisation s03) ────────
   Mock of a mobile email client (subject + sender + body + CTA). #}
   Compact, fits the 2-col grid. */

.mockup-email {
  background: #f3f4f7;
  border-radius: 14px;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mockup-email__app {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  max-width: 420px;
  margin: 0 auto;
}
.mockup-email__app-bar {
  background: #fafbfc;
  border-bottom: 1px solid #ebedf0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mockup-email__app-back {
  color: #6b6e75;
  font-size: 14px;
}
.mockup-email__app-label {
  font-size: 11px;
  font-weight: 600;
  color: #1a1d24;
  flex: 1;
}
.mockup-email__app-action {
  color: #6b6e75;
  font-size: 14px;
}
.mockup-email__head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid #ebedf0;
}
.mockup-email__subject {
  font-size: 15px;
  font-weight: 700;
  color: #0a0d13;
  margin: 0 0 8px;
  line-height: 1.3;
}
.mockup-email__from {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #4a4d54;
}
.mockup-email__avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #f0708a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.mockup-email__from-meta { display: flex; flex-direction: column; }
.mockup-email__from-name { font-weight: 600; color: #1a1d24; }
.mockup-email__from-addr { font-size: 10.5px; color: #6b6e75; }
.mockup-email__body {
  padding: 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #1a1d24;
}
.mockup-email__body p { margin: 0 0 12px; }
.mockup-email__cta {
  display: inline-block;
  background: #f0708a;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 11px 22px;
  border-radius: 8px;
  text-decoration: none;
  margin: 8px 0;
}
.mockup-email__hint {
  font-size: 10.5px;
  color: #6b6e75;
  margin-top: 14px;
}


/* ─── Manage feeds table (used in /features/import-rss s05) ────────
   Admin page listing imported RSS feeds with their sync schedule,
   last import status and quick actions. Similar pattern to subscribers
   list but with feed-specific columns. Full-width stacked. */

.mockup-feeds {
  background: #f3f4f7;
  border-radius: 14px;
  padding: 32px 32px 30px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
  font-size: 12.5px;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin-top: 32px;
}
.mockup-feeds__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.mockup-feeds__title {
  font-weight: 700;
  font-size: 22px;
  margin: 0;
  color: #0a0d13;
  letter-spacing: -0.01em;
}
.mockup-feeds__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #1a1d24;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.mockup-feeds__table-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}
.mockup-feeds table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.mockup-feeds thead th {
  text-align: left;
  font-weight: 600;
  color: #1a1d24;
  padding: 14px 18px;
  border-bottom: 1px solid #ebedf0;
  font-size: 11px;
  background: #fafbfc;
  white-space: nowrap;
}
.mockup-feeds thead th:last-child { text-align: right; }
.mockup-feeds tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid #f1f2f4;
  vertical-align: middle;
}
.mockup-feeds tbody tr:last-child td { border-bottom: 0; }
.mockup-feeds tbody td:last-child { text-align: right; }
.mockup-feeds__feed {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mockup-feeds__cover {
  width: 36px; height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 10px;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.mockup-feeds__feed-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mockup-feeds__feed-name {
  font-weight: 600;
  color: #1a1d24;
  font-size: 12.5px;
}
.mockup-feeds__feed-url {
  font-size: 10.5px;
  color: #6b6e75;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.mockup-feeds__sched {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ebedf0;
  color: #4a4d54;
  font-size: 11px;
  font-weight: 500;
}
.mockup-feeds__last {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}
.mockup-feeds__last--ok    { color: #166534; }
.mockup-feeds__last--warn  { color: #92400e; }
.mockup-feeds__count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #1a1d24;
}
.mockup-feeds__actions {
  display: inline-flex;
  gap: 6px;
}
.mockup-feeds__btn-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid #2c3340;
  color: #1a1d24;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 500;
}

@media (max-width: 900px) {
  .mockup-feeds { padding: 20px; }
  .mockup-feeds__table-card { overflow-x: auto; pointer-events: auto; }
  .mockup-feeds table { min-width: 720px; }
}


/* ─── Hosting managed card (used in /features/hosting s02) ─────────
   Replicates the « Hébergement Zekast » admin card : title + Starter
   badge + Actif pill + 2 quota jauges + last-update timestamp. Sits
   in the section 2-col grid (illu_left). */

.mockup-hosting-card {
  background: #f3f4f7;
  border-radius: 14px;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mockup-hosting-card__card {
  background: #fff;
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.mockup-hosting-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.mockup-hosting-card__title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: #0a0d13;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mockup-hosting-card__title-icon { font-size: 18px; }
.mockup-hosting-card__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.mockup-hosting-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
}
.mockup-hosting-card__pill--plan { background: #fce2e6; color: #c8426a; }
.mockup-hosting-card__pill--on   { background: #dcfce7; color: #166534; }
.mockup-hosting-card__desc {
  font-size: 11.5px;
  color: #6b6e75;
  margin: 0 0 18px;
}
.mockup-hosting-card__quotas {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mockup-hosting-card__quota-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 12px;
}
.mockup-hosting-card__quota-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #1a1d24;
}
.mockup-hosting-card__quota-bar {
  height: 8px;
  background: #ebedf0;
  border-radius: 999px;
  overflow: hidden;
}
.mockup-hosting-card__quota-bar > span {
  display: block;
  height: 100%;
  background: #f0708a;
  border-radius: 999px;
}
.mockup-hosting-card__quota-val {
  font-size: 11px;
  color: #4a4d54;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mockup-hosting-card__footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f1f2f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: #6b6e75;
}

@media (max-width: 600px) {
  .mockup-hosting-card { padding: 16px; }
  .mockup-hosting-card__quota-row { grid-template-columns: 1fr; gap: 4px; }
}


/* ─── Phone label (cap below screen, e.g. "Android · Chrome") ─────── */
.mockup-phone__label {
  margin: 8px 0 0;
  text-align: center;
  font-size: 11px;
  color: #6b6e75;
  letter-spacing: 0.3px;
  font-weight: 500;
}


/* ─── PWA install prompt mockup ──────────────────────────────────────
   Two phones side-by-side : Android Chrome banner (bottom card with
   icon + name + Install button) and iOS Safari hint (dark bottom bar
   with "Add to Home Screen" instruction). Both anchored at the BOTTOM
   of the phone screen, with a faux page content visible above so the
   floating UI reads as an overlay on a real site.
   ────────────────────────────────────────────────────────────────── */

.mockup-pwa-prompt__page {
  flex: 1;
  padding: 14px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mockup-pwa-prompt__page-bar {
  height: 16px;
  background: #ebedf0;
  border-radius: 4px;
  width: 60%;
  margin-bottom: 6px;
}
.mockup-pwa-prompt__page-line {
  height: 5px;
  background: #ebedf0;
  border-radius: 2px;
}
.mockup-pwa-prompt__page-line--full { width: 95%; }
.mockup-pwa-prompt__page-line--mid  { width: 70%; }
.mockup-pwa-prompt__page-line--short { width: 45%; }
.mockup-pwa-prompt__page-cover {
  width: 100%;
  height: 60px;
  background: #d6d8de;
  border-radius: 5px;
  margin: 6px 0;
}

/* Android Chrome banner — pinned to the bottom of the phone screen */
.mockup-pwa-prompt__banner {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.25),
              0 1px 0 rgba(0, 0, 0, 0.04);
  padding: 10px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.mockup-pwa-prompt__banner-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: #f0708a;
  color: #fff;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3px;
}
.mockup-pwa-prompt__banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mockup-pwa-prompt__banner-title {
  font-size: 11px;
  font-weight: 600;
  color: #1a1d24;
  line-height: 1.2;
}
.mockup-pwa-prompt__banner-desc {
  font-size: 9px;
  color: #6b6e75;
  line-height: 1.3;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mockup-pwa-prompt__banner-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mockup-pwa-prompt__banner-install {
  background: #f0708a;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.mockup-pwa-prompt__banner-close {
  color: #6b6e75;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}

/* iOS Safari hint — dark bar at the bottom */
.mockup-pwa-prompt__ios {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 42px;
  background: #1a1d24;
  color: #fff;
  border-radius: 12px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 16px -3px rgba(0, 0, 0, 0.35);
}
.mockup-pwa-prompt__ios-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: #f0708a;
  color: #fff;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 9px;
}
.mockup-pwa-prompt__ios-text {
  flex: 1;
  margin: 0;
  font-size: 9.5px;
  line-height: 1.35;
}
.mockup-pwa-prompt__ios-text strong {
  font-weight: 600;
}
.mockup-pwa-prompt__ios-share {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  padding: 1px 5px;
  border-radius: 4px;
  margin: 0 2px;
  font-size: 10px;
}
.mockup-pwa-prompt__ios-close {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  line-height: 1;
  padding: 0 2px;
}

/* Faux Safari bottom toolbar (visual cue for iOS) */
.mockup-pwa-prompt__safari-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 32px;
  background: rgba(245, 246, 248, 0.92);
  backdrop-filter: blur(4px);
  border-top: 0.5px solid #d6d8de;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 13px;
  color: #6b6e75;
}
.mockup-pwa-prompt__safari-share {
  background: rgba(0, 0, 0, 0.06);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 12px;
}


/* ─── PWA offline mockup ─────────────────────────────────────────────
   Phone in airplane mode (✈ in status bar) showing the installed
   Zekast PWA in standalone (no browser chrome). Episode list with
   per-item availability badges, one episode currently playing in a
   pinned mini-player at the bottom.
   ────────────────────────────────────────────────────────────────── */

.mockup-pwa-offline__header {
  padding: 8px 14px;
  border-bottom: 1px solid #ebedf0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.mockup-pwa-offline__brand {
  font-weight: 600;
  font-size: 12px;
  color: #1a1d24;
}
.mockup-pwa-offline__menu {
  color: #6b6e75;
  font-size: 14px;
  line-height: 1;
}
.mockup-pwa-offline__notice {
  background: #1e3a8a;
  color: #fff;
  padding: 7px 14px;
  font-size: 9.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  letter-spacing: 0.1px;
}
.mockup-pwa-offline__notice-icon {
  font-size: 11px;
}
.mockup-pwa-offline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow: hidden;
}
.mockup-pwa-offline__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-bottom: 1px solid #f1f2f4;
  background: #fff;
}
.mockup-pwa-offline__item--playing {
  background: #fdf0f2;
}
.mockup-pwa-offline__item--disabled {
  opacity: 0.55;
}
.mockup-pwa-offline__cover {
  width: 32px;
  height: 32px;
  background: #f0708a;
  color: #fff;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 9px;
  flex-shrink: 0;
}
.mockup-pwa-offline__cover--muted {
  background: #d6d8de;
  color: #6b6e75;
}
.mockup-pwa-offline__item-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mockup-pwa-offline__item-title {
  font-size: 10.5px;
  font-weight: 500;
  color: #1a1d24;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mockup-pwa-offline__item-sub {
  font-size: 9px;
  color: #6b6e75;
  margin-top: 2px;
}
.mockup-pwa-offline__item-sub--muted {
  font-style: italic;
}
.mockup-pwa-offline__item-badge {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}
.mockup-pwa-offline__item-badge--playing {
  background: #f0708a;
  color: #fff;
}
.mockup-pwa-offline__item-badge--ok {
  background: #166534;
  color: #fff;
}
.mockup-pwa-offline__item-badge--off {
  background: #ebedf0;
  color: #6b6e75;
}
.mockup-pwa-offline__player {
  background: #1a1d24;
  color: #fff;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid #2c3340;
}
.mockup-pwa-offline__player-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mockup-pwa-offline__player-title {
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mockup-pwa-offline__player-progress {
  margin-top: 4px;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1px;
}
.mockup-pwa-offline__player-progress-fill {
  display: block;
  width: 38%;
  height: 100%;
  background: #fff;
  border-radius: 1px;
}
.mockup-pwa-offline__player-btn {
  font-size: 13px;
  line-height: 1;
  color: #fff;
  flex-shrink: 0;
  padding-left: 4px;
}


/* ─── PWA lockscreen mockup ──────────────────────────────────────────
   iOS lockscreen with a "Now Playing" notification fed by the
   navigator.mediaSession API (see zekast-frontend.js l.240+). Big
   centred clock + a translucent card with cover, title, artist,
   progress and transport. Dark wallpaper-style background for realism.
   ────────────────────────────────────────────────────────────────── */

.mockup-pwa-lock__screen {
  background: #0a0d13;
  color: #fff;
}
.mockup-pwa-lock__status {
  color: #fff;
}
.mockup-pwa-lock__clock {
  padding-top: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.mockup-pwa-lock__time {
  font-size: 56px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -1.5px;
  color: #fff;
}
.mockup-pwa-lock__date {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.2px;
}

.mockup-pwa-lock__np {
  margin: 26px 10px 0;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  padding: 11px 12px 12px;
  border: 0.5px solid rgba(255, 255, 255, 0.12);
}
.mockup-pwa-lock__np-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 9px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 10px;
}
.mockup-pwa-lock__np-app-icon {
  width: 17px;
  height: 17px;
  background: #f0708a;
  color: #fff;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 7px;
  flex-shrink: 0;
}
.mockup-pwa-lock__np-app-name {
  flex: 1;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.mockup-pwa-lock__np-time {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.65);
}

.mockup-pwa-lock__np-body {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 11px;
}
.mockup-pwa-lock__np-cover {
  width: 52px;
  height: 52px;
  background: #f0708a;
  color: #fff;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.4);
}
.mockup-pwa-lock__np-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mockup-pwa-lock__np-title {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.mockup-pwa-lock__np-artist {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2px;
}

.mockup-pwa-lock__np-progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 1.5px;
  overflow: hidden;
}
.mockup-pwa-lock__np-progress-fill {
  display: block;
  width: 37%;
  height: 100%;
  background: #fff;
  border-radius: 1.5px;
}
.mockup-pwa-lock__np-times {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.mockup-pwa-lock__np-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 12px;
}
.mockup-pwa-lock__np-btn {
  font-size: 22px;
  line-height: 1;
  color: #fff;
}
.mockup-pwa-lock__np-btn--play {
  font-size: 28px;
}

.mockup-pwa-lock__home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 2px;
}


/* ─── PWA splash config mockup ───────────────────────────────────────
   Admin Settings → tab PWA, with form on the left (name, short name,
   description, theme colour, background colour, icon upload) and a
   live preview of the splash screen on a phone shell on the right.
   ────────────────────────────────────────────────────────────────── */

.mockup-pwa-config {
  background: #f0f0f1;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: #1d2327;
  font-size: 12px;
}
.mockup-pwa-config__wp-bar {
  background: #fff;
  border-bottom: 1px solid #c3c4c7;
  padding: 12px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mockup-pwa-config__wp-title {
  font-size: 16px;
  font-weight: 400;
  color: #1d2327;
}
.mockup-pwa-config__wp-tabs {
  display: flex;
  gap: 0;
}
.mockup-pwa-config__wp-tab {
  padding: 6px 14px;
  border: 1px solid transparent;
  border-bottom: 0;
  font-size: 12px;
  color: #2271b1;
  position: relative;
  top: 1px;
  background: transparent;
}
.mockup-pwa-config__wp-tab--active {
  background: #f0f0f1;
  border-color: #c3c4c7;
  color: #1d2327;
  font-weight: 600;
}

.mockup-pwa-config__body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  padding: 18px;
  background: #f0f0f1;
}
.mockup-pwa-config__form {
  background: #fff;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mockup-pwa-config__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mockup-pwa-config__label {
  font-weight: 600;
  font-size: 12px;
  color: #1d2327;
}
.mockup-pwa-config__input {
  border: 1px solid #8c8f94;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 12px;
  background: #fff;
  color: #1d2327;
  display: block;
  min-height: 22px;
}
.mockup-pwa-config__input--short {
  max-width: 200px;
}
.mockup-pwa-config__input--textarea {
  min-height: 50px;
  line-height: 1.4;
}
.mockup-pwa-config__help {
  font-size: 11px;
  color: #646970;
  font-style: italic;
}
.mockup-pwa-config__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mockup-pwa-config__color {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #8c8f94;
  border-radius: 4px;
  padding: 4px 8px;
  background: #fff;
}
.mockup-pwa-config__color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  flex-shrink: 0;
}
.mockup-pwa-config__color-swatch--bordered {
  border: 1px solid #d6d8de;
}
.mockup-pwa-config__color-hex {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #1d2327;
}
.mockup-pwa-config__icons {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mockup-pwa-config__icon {
  background: #f0708a;
  color: #fff;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.mockup-pwa-config__icon--192 { width: 44px; height: 44px; }
.mockup-pwa-config__icon--512 { width: 64px; height: 64px; font-size: 14px; }
.mockup-pwa-config__icon-btn {
  background: #f6f7f7;
  border: 1px solid #2271b1;
  color: #2271b1;
  padding: 4px 12px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 400;
}
.mockup-pwa-config__actions {
  margin-top: 4px;
}
.mockup-pwa-config__save {
  background: #2271b1;
  color: #fff;
  padding: 6px 14px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 400;
}

.mockup-pwa-config__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.mockup-pwa-config__preview-label {
  margin: 0;
  font-size: 11px;
  color: #646970;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.mockup-pwa-config__preview-screen {
  background: #ffffff;
}
.mockup-pwa-config__splash {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 30px;
}
.mockup-pwa-config__splash-icon {
  width: 76px;
  height: 76px;
  background: #f0708a;
  color: #fff;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  box-shadow: 0 6px 16px -4px rgba(110, 70, 255, 0.4);
}
.mockup-pwa-config__splash-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1a1d24;
}
.mockup-pwa-config__splash-loader {
  display: flex;
  gap: 6px;
}
.mockup-pwa-config__splash-loader span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #f0708a;
  opacity: 0.4;
}
.mockup-pwa-config__splash-loader span:nth-child(2) { opacity: 0.7; }
.mockup-pwa-config__splash-loader span:nth-child(3) { opacity: 1; }

@media (max-width: 700px) {
  .mockup-pwa-config__body { grid-template-columns: 1fr; }
}


/* ─── Transcript (front) mockup ──────────────────────────────────────
   Episode page front-side : episode card head (cover + meta) + player
   + open disclosure block showing the transcription text. Text fades
   at the bottom with a "Read more" CTA, hinting at length.
   ────────────────────────────────────────────────────────────────── */

.mockup-transcript-front {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #ebedf0;
  padding: 22px 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
}
.mockup-transcript-front__head {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid #f1f2f4;
}
.mockup-transcript-front__cover {
  width: 64px;
  height: 64px;
  background: #f0708a;
  color: #fff;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  flex-shrink: 0;
}
.mockup-transcript-front__head-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mockup-transcript-front__podcast {
  font-size: 11px;
  color: #6b6e75;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.mockup-transcript-front__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a1d24;
  line-height: 1.2;
}
.mockup-transcript-front__date {
  font-size: 12px;
  color: #6b6e75;
  margin-top: 2px;
}

.mockup-transcript-front__player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #f3f4f7;
  border-radius: 10px;
  margin-top: 16px;
}
.mockup-transcript-front__player-btn {
  width: 30px;
  height: 30px;
  background: #1a1d24;
  color: #fff;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.mockup-transcript-front__player-time {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #6b6e75;
}
.mockup-transcript-front__player-progress {
  flex: 1;
  height: 4px;
  background: #d6d8de;
  border-radius: 2px;
  overflow: hidden;
}
.mockup-transcript-front__player-progress-fill {
  display: block;
  width: 37%;
  height: 100%;
  background: #1a1d24;
}
.mockup-transcript-front__player-speed {
  font-size: 11px;
  font-weight: 600;
  color: #6b6e75;
  padding: 3px 7px;
  border: 1px solid #d6d8de;
  border-radius: 4px;
}

.mockup-transcript-front__details {
  margin-top: 22px;
  border: 1px solid #ebedf0;
  border-radius: 10px;
  background: #fafbfc;
  overflow: hidden;
}
.mockup-transcript-front__details-head {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #ebedf0;
  background: #fff;
}
.mockup-transcript-front__details-arrow {
  color: #6b6e75;
  font-size: 10px;
}
.mockup-transcript-front__details-title {
  font-weight: 600;
  font-size: 13px;
  color: #1a1d24;
  flex: 1;
}
.mockup-transcript-front__details-meta {
  font-size: 11px;
  color: #6b6e75;
}
.mockup-transcript-front__text {
  padding: 18px 20px 8px;
  position: relative;
}
.mockup-transcript-front__text p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #2c3340;
}
.mockup-transcript-front__text p strong {
  color: #f0708a;
  font-weight: 600;
}
.mockup-transcript-front__text-fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 100%);
}
.mockup-transcript-front__more {
  padding: 0 20px 18px;
}
.mockup-transcript-front__more-btn {
  display: inline-block;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid #d6d8de;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #1a1d24;
}

@media (max-width: 600px) {
  .mockup-transcript-front { padding: 16px; }
  .mockup-transcript-front__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mockup-transcript-front__title { font-size: 15px; }
}


/* ─── Transcript Whisper admin mockup ────────────────────────────────
   WP meta-box "Transcript" mid-generation : disabled "Generating…"
   button with spinner, live status with step counter, 4-step progress
   list (file check / split / Whisper / cleanup) — step 3 active, with
   a small credit usage hint at the bottom.
   ────────────────────────────────────────────────────────────────── */

.mockup-whisper {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: #1d2327;
  font-size: 13px;
}
.mockup-whisper__metabox {
  background: #fff;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  overflow: hidden;
}
.mockup-whisper__metabox-head {
  padding: 10px 14px;
  border-bottom: 1px solid #dcdcde;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}
.mockup-whisper__metabox-title {
  font-weight: 600;
  font-size: 13px;
  color: #1d2327;
}
.mockup-whisper__metabox-handle {
  color: #646970;
  font-size: 11px;
}
.mockup-whisper__metabox-body {
  padding: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mockup-whisper__intro {
  margin: 0;
  font-size: 12px;
  color: #50575e;
}
.mockup-whisper__textarea {
  border: 1px solid #8c8f94;
  border-radius: 4px;
  padding: 14px;
  background: #fff;
  min-height: 90px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #50575e;
  position: relative;
}
.mockup-whisper__textarea-placeholder {
  display: block;
  color: #a7aaad;
  font-style: italic;
  line-height: 1.5;
}
.mockup-whisper__toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mockup-whisper__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f6f7f7;
  border: 1px solid #8c8f94;
  color: #50575e;
  padding: 5px 12px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 400;
}
.mockup-whisper__btn--running {
  opacity: 0.7;
}
.mockup-whisper__spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #d6d8de;
  border-top-color: #f0708a;
  border-radius: 999px;
}
.mockup-whisper__status {
  font-size: 12px;
  color: #50575e;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mockup-whisper__status-step {
  background: #f3f4f7;
  color: #1a1d24;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.mockup-whisper__steps {
  display: flex;
  flex-direction: column;
  border: 1px solid #f1f2f4;
  border-radius: 6px;
  overflow: hidden;
}
.mockup-whisper__step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #f1f2f4;
  font-size: 12px;
  color: #50575e;
}
.mockup-whisper__step:last-child { border-bottom: 0; }
.mockup-whisper__step--done { color: #1d2327; background: #f6fafd; }
.mockup-whisper__step--active { background: #fdf0f2; color: #1a1d24; font-weight: 500; }
.mockup-whisper__step-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  background: #ebedf0;
  color: #6b6e75;
  flex-shrink: 0;
}
.mockup-whisper__step--done .mockup-whisper__step-icon {
  background: #166534;
  color: #fff;
}
.mockup-whisper__step-icon--spin {
  border: 2px solid #d6d8de;
  border-top-color: #f0708a;
  background: transparent;
}
.mockup-whisper__step-label {
  flex: 1;
}
.mockup-whisper__step-meta {
  font-size: 11px;
  color: #6b6e75;
  font-variant-numeric: tabular-nums;
}
.mockup-whisper__note {
  margin: 0;
  font-size: 11.5px;
  color: #50575e;
  display: flex;
  align-items: center;
  gap: 7px;
}
.mockup-whisper__note span[aria-hidden] {
  color: #166534;
  font-size: 12px;
}


/* ─── Mix public page mockup ─────────────────────────────────────────
   Public landing of a Mix : hero (cover + meta + CTAs) + RSS block
   (copyable URL + platform links) + ordered episode list (numbered,
   episodes from multiple podcasts visible via cover colour).
   ────────────────────────────────────────────────────────────────── */

.mockup-mix-public {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #ebedf0;
  padding: 26px 28px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  color: #1a1d24;
}

.mockup-mix-public__hero {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.mockup-mix-public__cover {
  width: 130px;
  height: 130px;
  background: #1e3a8a;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 8px 20px -6px rgba(30, 58, 138, 0.45);
}
.mockup-mix-public__cover-mark {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.mockup-mix-public__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.mockup-mix-public__eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b6e75;
}
.mockup-mix-public__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: #1a1d24;
  letter-spacing: -0.5px;
}
.mockup-mix-public__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #2c3340;
  max-width: 480px;
}
.mockup-mix-public__cta {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.mockup-mix-public__play-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0708a;
  color: #fff;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.mockup-mix-public__share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #1a1d24;
  border: 1px solid #d6d8de;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}

.mockup-mix-public__rss {
  margin-top: 24px;
  background: #f3f4f7;
  border-radius: 12px;
  padding: 16px 18px;
}
.mockup-mix-public__rss-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.mockup-mix-public__rss-icon {
  font-size: 14px;
}
.mockup-mix-public__rss-title {
  font-weight: 600;
  font-size: 13px;
  color: #1a1d24;
}
.mockup-mix-public__rss-url {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border: 1px solid #d6d8de;
  border-radius: 8px;
  overflow: hidden;
  /* Without this, the URL child's `flex: 1 + min-width: auto`
     defaults bubble the unbroken monospace URL length up to the
     parent — which then forces the whole mockup wider than the
     viewport on mobile. */
  min-width: 0;
}
.mockup-mix-public__rss-url-value {
  flex: 1;
  /* Explicit min-width: 0 so the ellipsis CAN engage. The default
     `min-width: auto` on flex items prevents shrinking below the
     intrinsic content width (the full unbroken URL string). */
  min-width: 0;
  padding: 9px 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #1a1d24;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup-mix-public__rss-copy {
  padding: 9px 14px;
  background: #1a1d24;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.mockup-mix-public__rss-platforms {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.mockup-mix-public__rss-plat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid #ebedf0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #1a1d24;
}
.mockup-mix-public__rss-plat-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}
.mockup-mix-public__rss-plat-icon--apple   { background: #f0708a; }
.mockup-mix-public__rss-plat-icon--spotify { background: #1db954; }
.mockup-mix-public__rss-plat-icon--overcast { background: #fc7d39; }

.mockup-mix-public__episodes {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid #f1f2f4;
}
.mockup-mix-public__ep {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid #f1f2f4;
}
.mockup-mix-public__ep-num {
  width: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #6b6e75;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.mockup-mix-public__ep-cover {
  width: 40px;
  height: 40px;
  color: #fff;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 10px;
  flex-shrink: 0;
}
.mockup-mix-public__ep-cover--cafe     { background: #f0708a; }
.mockup-mix-public__ep-cover--quartier { background: #2b6178; }
.mockup-mix-public__ep-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mockup-mix-public__ep-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #1a1d24;
  line-height: 1.3;
  /* Episode titles have spaces ("Comment faire face au burn-out") so
     they wrap naturally at word boundaries — no break-word needed.
     The min-width: 0 on the parent .mockup-mix-public__ep-meta is
     what actually lets the flex item shrink and the title wrap. */
}
.mockup-mix-public__ep-sub {
  font-size: 11.5px;
  color: #6b6e75;
}
.mockup-mix-public__ep-play {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #f3f4f7;
  color: #1a1d24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .mockup-mix-public { padding: 18px 14px; }
  .mockup-mix-public__hero { flex-direction: column; gap: 14px; }
  .mockup-mix-public__cover { width: 100px; height: 100px; }
  .mockup-mix-public__title { font-size: 22px; }
  /* Smaller copy button so the URL gets more room before truncating. */
  .mockup-mix-public__rss { padding: 14px; }
  .mockup-mix-public__rss-copy { padding: 9px 10px; font-size: 11px; }
  .mockup-mix-public__rss-url-value { padding: 9px 10px; font-size: 11px; }
  /* Force chips to stack on the narrowest screens — at 390px even
     2 chips per row push the 3rd off-screen because each chip is
     ~120px and gap 12px ≈ 372px > content width. Column layout +
     small gap = always-visible, always-readable. */
  .mockup-mix-public__rss-platforms { gap: 8px; }
  .mockup-mix-public__rss-plat { font-size: 11.5px; padding: 5px 10px; }
  /* Tighter episode row padding so the play button stays inside. */
  .mockup-mix-public__ep { gap: 10px; padding: 12px 2px; }
  .mockup-mix-public__ep-cover { width: 36px; height: 36px; }
  .mockup-mix-public__ep-title { font-size: 12.5px; }
  .mockup-mix-public__ep-sub { font-size: 11px; }
  .mockup-mix-public__ep-play { width: 28px; height: 28px; }
}


/* ─── Mobile sweep — gap-fillers for mockup families that didn't yet
   ─── have a 600px breakpoint ──────────────────────────────────────
   Each block here covers a specific family that the original 760px /
   900px / 1100px breakpoints leave too wide on iPhone-class screens.
   Pulling these into one block keeps the discovery story for the next
   editor : "these are the families I didn't tune individually because
   the fix was the same shape — pad less, grid down to 1 col, shrink
   display type by ~20 %." */

@media (max-width: 600px) {
  /* Embed theming / variants — 3-col preview grid was tight at 390px
     (each card ≤100px wide → device-frame illustrations lost their
     shape). Drop to 1 column ; the cards are tall and lecturey, so
     stacking reads naturally. */
  .mockup-layouts__grid--cols-3 { grid-template-columns: 1fr; gap: 14px; }

  /* Padding sweep — every mockup container with 24-32px desktop
     padding loses ~10 % of usable width on a 390px screen. Bring
     them down to 16-18px. */
  .mockup-subs { padding: 18px; }
  .mockup-subs__title { font-size: 17px; }
  .mockup-dist { padding: 18px; }
  .mockup-bunny__sub-card { padding: 16px; }
  .mockup-embed { padding: 18px; }
  .mockup-paywall { padding: 18px; }
  .mockup-stripe-paywall { padding: 18px; }
  .mockup-flow { padding: 18px; }
  .mockup-email { padding: 18px; }
  .mockup-feeds { padding: 18px; }
  .mockup-heros { padding: 10px; gap: 12px; }
  .mockup-heros__inner { grid-template-columns: 64px 1fr; gap: 12px; padding: 14px; }
  .mockup-heros__cover { width: 64px; height: 64px; }
  .mockup-heros__title { font-size: 16px; }
  .mockup-heros__actions { flex-wrap: wrap; gap: 6px; }

  /* Whisper admin meta-box — the steps list at 390px has the meta
     column (~80px) plus the icon (18px) plus the label, which combined
     get tight. Drop the meta to a smaller font + allow it to truncate
     instead of pushing the label. */
  .mockup-whisper__metabox-body { padding: 14px; gap: 12px; }
  .mockup-whisper__step { padding: 8px 10px; gap: 10px; }
  .mockup-whisper__step-meta {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
  }
  .mockup-whisper__toolbar { gap: 10px; }

  /* PWA splash config — the WP admin tab nav had 4 tabs that ran off
     the right edge. Allow horizontal scroll on the tab row to keep
     the visual story (active tab = PWA) intact without truncation. */
  .mockup-pwa-config__wp-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 1px; }
  .mockup-pwa-config__wp-tab { white-space: nowrap; flex-shrink: 0; }
  /* Form / preview grid already collapses at 700px ; tighten the
     padding on the inner form card. */
  .mockup-pwa-config__form { padding: 14px 16px; gap: 14px; }
  .mockup-pwa-config__body { padding: 14px; gap: 14px; }

  /* PWA install prompt + offline + lockscreen — the side-by-side
     phones row got cramped when 2 phones at 240px each tried to fit
     on 390px. Allow wrapping so they stack vertically. */
  .mockup-phones-row { gap: 14px; }
}