/* Article visual blocks.
   Hex values mirror the theme SCSS tokens ($color-dark, $color-dark-light,
   $color-accent-1, $color-accent-2, $color-bg-base, $color-bg-light,
   $color-bg-grey). Keep in sync with scss/theme/_variables.scss.
   Body font is inherited from the theme; --vm-title matches its heading font. */
.prose {
  --vm-dark: #282120;
  --vm-darker: #1c1817;
  --vm-teal-light: #d9edee;
  --vm-teal-deep: #4e6d6e;
  --vm-orange: #fe6038;
  --vm-orange-soft: #feb49a;
  --vm-light: #f9f9f6;
  --vm-light-warm: #f8f8f1;
  --vm-grey: #e5e6e2;
  --vm-muted: #584c4c;
  --vm-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --vm-title: 'Space Grotesk', sans-serif;
}

.vm-cout,
.vm-diag,
.vm-router,
.vm-bots,
.vm-heberg,
.vm-images,
.vm-cache,
.vm-bdd,
.vm-modules,
.vm-theme,
.vm-erreurs,
.vm-plan,
.vm-conclusion,
.vm-sources {
  border-radius: 20px;
  padding: 40px 36px;
  margin: 32px 0;
}

/* Each surface declares its own text colours so children can just read
   var(--vm-fg). Avoids one override rule per child on every dark variant. */

/* Dark */
.vm-cout,
.vm-router,
.vm-heberg,
.vm-cache,
.vm-bdd,
.vm-theme,
.vm-erreurs,
.vm-conclusion,
.vm-cout__zone,
.vm-diag__card--main,
.vm-heberg__col--before,
.vm-heberg__note,
.vm-cache__layer--native,
.vm-bdd__terminal,
.vm-bdd__warn,
.vm-modules__scenario,
.vm-theme__vitals,
.vm-theme__checklist,
.vm-erreurs__item,
.vm-plan__branch--server,
.vm-bots {
  --vm-fg: var(--vm-light);
  --vm-fg-soft: var(--vm-light-warm);
  --vm-fg-label: var(--vm-teal-light);
  --vm-hairline: rgba(249, 249, 246, 0.08);
  --vm-inset: rgba(249, 249, 246, 0.06);
}

/* Teal */
.vm-heberg__col--after,
.vm-cache__layer--full,
.vm-theme__hb,
.vm-erreurs__item--highlighted,
.vm-conclusion__cta,
.vm-plan__branch--front {
  --vm-fg: var(--vm-light);
  --vm-fg-soft: var(--vm-light-warm);
  --vm-fg-label: var(--vm-light-warm);
  --vm-hairline: rgba(249, 249, 246, 0.16);
  --vm-inset: rgba(249, 249, 246, 0.12);
}

/* Light */
.vm-diag,
.vm-images,
.vm-modules,
.vm-plan,
.vm-sources,
.vm-diag__card--secondary,
.vm-diag__remind,
.vm-images__action,
.vm-modules__audit,
.vm-modules__footer {
  --vm-fg: var(--vm-dark);
  --vm-fg-soft: var(--vm-muted);
  --vm-fg-label: var(--vm-teal-deep);
  --vm-hairline: rgba(40, 33, 32, 0.09);
  --vm-inset: rgba(40, 33, 32, 0.04);
}

.vm-cout,
.vm-cache,
.vm-theme,
.vm-erreurs,
.vm-conclusion,
.vm-router,
.vm-bots {
  background: var(--vm-dark);
}

.vm-heberg,
.vm-bdd {
  background: var(--vm-darker);
}

.vm-diag,
.vm-images,
.vm-modules,
.vm-plan {
  background: var(--vm-light-warm);
}

.vm-heberg__col--before,
.vm-diag__card--main,
.vm-modules__scenario,
.vm-bdd__terminal,
.vm-bdd__warn,
.vm-heberg__note {
  background: var(--vm-dark);
}

.vm-cout__zone,
.vm-cache__layer--native,
.vm-theme__vitals,
.vm-theme__checklist,
.vm-erreurs__item,
.vm-bdd__terminal-bar,
.vm-plan__branch--server {
  background: var(--vm-darker);
}

.vm-heberg__col--after,
.vm-cache__layer--full,
.vm-theme__hb,
.vm-erreurs__item--highlighted,
.vm-conclusion__cta,
.vm-plan__branch--front {
  background: var(--vm-teal-deep);
}

.vm-diag__card--secondary,
.vm-images__action,
.vm-modules__audit,
.vm-sources {
  background: var(--vm-light);
  border: 1px solid var(--vm-hairline);
}

.vm-diag__remind,
.vm-modules__footer {
  background: var(--vm-grey);
}

.vm-cout__surtitle,
.vm-cout__zone-label,
.vm-heberg__col-label,
.vm-diag__card-role,
.vm-modules__scenario-label,
.vm-modules__audit-label,
.vm-theme__checklist-title,
.vm-bots__label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vm-fg-label);
  margin: 0 0 14px;
}

.vm-cout__surtitle {
  margin-bottom: 8px;
}

.vm-cout__zone--perte .vm-cout__zone-label {
  color: var(--vm-orange-soft);
}

.vm-cout__title,
.vm-diag__title,
.vm-router__title,
.vm-images__title,
.vm-modules__title,
.vm-erreurs__title,
.vm-plan__title {
  font-family: var(--vm-title);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--vm-fg);
  margin: 0;
}

.vm-cout__metric-value,
.vm-heberg__col-ttfb,
.vm-bdd__impact-value,
.vm-erreurs__item-num {
  font-family: var(--vm-title);
  font-weight: 700;
  line-height: 1.1;
  color: var(--vm-fg);
  margin: 0;
}

.vm-diag__subtitle,
.vm-router__subtitle,
.vm-plan__subtitle,
.vm-heberg__col-verdict,
.vm-images__action-note,
.vm-cout__source {
  font-size: 14px;
  color: var(--vm-fg-soft);
  margin: 0;
}

.vm-cout__metric-desc,
.vm-diag__card-detail,
.vm-heberg__col-desc,
.vm-heberg__note-text,
.vm-diag__remind-text,
.vm-bdd__warn-text,
.vm-bots__text,
.vm-plan__branch-verdict,
.vm-modules__audit-step,
.vm-modules__footer-text,
.vm-theme__hb-desc,
.vm-theme__vitals-stat,
.vm-erreurs__item-fix {
  font-size: 15px;
  line-height: 1.55;
  color: var(--vm-fg-soft);
  margin: 0;
}

.vm-diag__card-name,
.vm-images__action-name,
.vm-cache__layer-label,
.vm-theme__vitals-title,
.vm-erreurs__item-mistake,
.vm-plan__branch-label {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--vm-fg);
  margin: 0 0 6px;
}

.vm-cout__body,
.vm-cout__metrics,
.vm-diag__grid,
.vm-heberg__compare,
.vm-images__actions,
.vm-cache__layers,
.vm-modules__body,
.vm-theme__top,
.vm-theme__checks,
.vm-plan__branches,
.vm-bots__cmds {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.vm-diag__side,
.vm-heberg__stack,
.vm-cache__checks,
.vm-modules__pile,
.vm-erreurs__list,
.vm-router__lines,
.vm-plan__branch-steps,
.vm-bots__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vm-cout__zone,
.vm-diag__card,
.vm-cache__layer,
.vm-modules__scenario,
.vm-modules__audit,
.vm-theme__hb,
.vm-theme__vitals,
.vm-theme__checklist,
.vm-bdd__terminal,
.vm-plan__branch {
  border-radius: 12px;
  padding: 24px 20px;
  min-width: 0;
}

.vm-cout__footer,
.vm-diag__remind,
.vm-heberg__note,
.vm-bdd__warn,
.vm-modules__footer {
  border-radius: 10px;
  padding: 16px 20px;
}

.vm-heberg__stack-item,
.vm-cache__check,
.vm-modules__pile-item,
.vm-theme__check-item,
.vm-plan__branch-step,
.vm-bots__cmd,
.vm-bots__step {
  font-size: 14px;
  line-height: 1.4;
  color: var(--vm-fg-soft);
  background: var(--vm-inset);
  border-radius: 6px;
  padding: 9px 12px;
  margin: 0;
  min-width: 0;
}

.vm-cout__header,
.vm-diag__top,
.vm-router__header,
.vm-images__header,
.vm-modules__header,
.vm-theme__top,
.vm-erreurs__header,
.vm-plan__header {
  margin-bottom: 24px;
}

.vm-cout__body {
  margin-bottom: 24px;
}

.vm-cout__zone {
  flex: 1 1 280px;
}

.vm-cout__zone--gain {
  border: 1px solid rgba(78, 109, 110, 0.35);
}

.vm-cout__zone--perte {
  border: 1px solid rgba(254, 96, 56, 0.25);
}

.vm-cout__metrics {
  gap: 20px;
}

.vm-cout__metric {
  flex: 1 1 100px;
  min-width: 0;
}

.vm-cout__metric-value {
  font-size: 32px;
  margin-bottom: 4px;
}

.vm-cout__source {
  margin-top: 14px;
  font-size: 12px;
}

.vm-cout__footer {
  background: rgba(254, 96, 56, 0.08);
}

.vm-cout__footer-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--vm-orange-soft);
  margin: 0;
}

.vm-diag__title {
  margin-bottom: 6px;
}

.vm-diag__grid {
  margin-bottom: 20px;
}

.vm-diag__card--main {
  flex: 1 1 300px;
}

.vm-diag__side {
  flex: 1 1 260px;
  gap: 16px;
}

.vm-diag__card--secondary {
  flex: 1 1 auto;
}

.vm-diag__card-role {
  font-size: 12px;
  margin-bottom: 12px;
}

.vm-heberg__compare {
  gap: 4px;
  margin-bottom: 20px;
}

.vm-heberg__col {
  flex: 1 1 260px;
  min-width: 0;
  border-radius: 12px;
  padding: 28px 24px;
}

.vm-heberg__col-ttfb {
  font-size: 28px;
  margin-bottom: 12px;
}

.vm-heberg__col--before .vm-heberg__col-ttfb {
  color: var(--vm-orange-soft);
}

.vm-heberg__col-desc {
  margin-bottom: 12px;
}

.vm-heberg__stack {
  gap: 6px;
  margin-top: 4px;
}

.vm-heberg__stack-item {
  font-family: var(--vm-mono);
}

.vm-images__actions {
  gap: 10px;
}

.vm-images__action {
  flex: 1 1 150px;
  min-width: 0;
  border-radius: 10px;
  padding: 16px 14px;
}

.vm-images__action-name {
  font-size: 16px;
}

.vm-images__action-gain {
  font-size: 14px;
  font-weight: 600;
  color: var(--vm-fg-label);
  margin: 0 0 4px;
}

.vm-cache__intro {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--vm-hairline);
}

.vm-cache__intro-text {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--vm-fg);
  margin: 0;
}

.vm-cache__layer {
  flex: 1 1 280px;
}

.vm-cache__layer--native {
  border: 1px solid rgba(78, 109, 110, 0.25);
}

.vm-cache__layer-label {
  margin-bottom: 4px;
}

.vm-cache__layer-scope {
  font-size: 13px;
  font-weight: 500;
  color: var(--vm-fg-label);
  margin: 0 0 16px;
}

.vm-bdd__terminal {
  overflow: hidden;
  margin-bottom: 20px;
  padding: 0;
}

.vm-bdd__terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
}

.vm-bdd__terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.vm-bdd__terminal-dot--r {
  background: var(--vm-orange);
}

.vm-bdd__terminal-dot--y {
  background: var(--vm-orange-soft);
}

.vm-bdd__terminal-dot--g {
  background: var(--vm-teal-deep);
}

.vm-bdd__terminal-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--vm-fg-label);
  margin-left: 8px;
}

.vm-bdd__terminal-body {
  padding: 20px;
}

.vm-bdd__line,
.vm-router__line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  margin: 0;
  border-bottom: 1px solid var(--vm-hairline);
}

.vm-router__line:last-child,
.vm-bdd__line:last-child {
  border-bottom: none;
}

.vm-bdd__table-name {
  font-family: var(--vm-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--vm-fg);
}

.vm-bdd__table-risk {
  font-size: 14px;
  color: var(--vm-orange-soft);
}

.vm-bdd__impact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  padding: 0 4px;
}

.vm-bdd__impact-value {
  font-size: 32px;
  color: var(--vm-teal-light);
}

.vm-bdd__impact-label {
  font-size: 16px;
  color: var(--vm-light-warm);
  margin: 0;
}

.vm-modules__body {
  margin-bottom: 20px;
}

.vm-modules__scenario {
  flex: 1 1 240px;
}

.vm-modules__pile {
  gap: 4px;
  margin-bottom: 16px;
}

.vm-modules__scenario-result {
  font-size: 18px;
  font-weight: 700;
  color: var(--vm-orange);
  margin: 0;
}

.vm-modules__audit {
  flex: 1 1 280px;
}

.vm-modules__audit-step {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--vm-hairline);
}

.vm-modules__audit-step:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.vm-modules__footer-text {
  font-weight: 500;
}

.vm-theme__hb {
  flex: 2 1 300px;
}

.vm-theme__hb-name {
  font-family: var(--vm-title);
  font-size: 24px;
  font-weight: 700;
  color: var(--vm-fg);
  margin: 0 0 4px;
}

.vm-theme__hb-since {
  font-size: 13px;
  font-weight: 500;
  color: var(--vm-fg-label);
  margin: 0 0 12px;
}

.vm-theme__vitals {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vm-theme__vitals-title {
  font-size: 16px;
  margin-bottom: 10px;
}

.vm-theme__vitals-stat {
  color: var(--vm-orange-soft);
}

.vm-theme__checks {
  gap: 8px;
}

.vm-theme__check-item {
  flex: 1 1 260px;
  padding: 10px 14px;
}

.vm-erreurs__item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  border-radius: 10px;
  padding: 18px;
}

.vm-erreurs__item-num {
  flex: 0 0 32px;
  font-size: 24px;
  color: var(--vm-fg-label);
}

.vm-erreurs__item-mistake {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 16px;
  margin: 0;
}

.vm-erreurs__item-fix {
  flex: 2 1 260px;
  min-width: 0;
  font-size: 14px;
}

.vm-plan__title {
  margin-bottom: 6px;
}

.vm-plan__branch {
  flex: 1 1 280px;
}

.vm-plan__branch-label {
  margin-bottom: 8px;
}

.vm-plan__branch-verdict {
  margin-bottom: 16px;
}

.vm-plan__branch-step {
  font-family: var(--vm-mono);
}

.vm-router__symptom {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--vm-fg);
  margin: 0;
}

.vm-router__cause {
  font-size: 15px;
  line-height: 1.45;
  color: var(--vm-fg-label);
  margin: 0;
}

/* Three stacked beats separated by a hairline, no nested cards. */
.vm-bots__row + .vm-bots__row {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--vm-hairline);
}

.vm-bots__signal {
  font-family: var(--vm-title);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--vm-orange);
  margin: 0 0 12px;
}

.vm-bots__cmds {
  gap: 8px;
}

.vm-bots__cmd {
  font-family: var(--vm-mono);
  flex: 0 0 auto;
}

.vm-niveau {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 5px 13px;
  margin: 0 0 20px;
}

.vm-niveau--autonome {
  background: var(--vm-teal-deep);
  color: var(--vm-light);
}

.vm-niveau--technique {
  background: var(--vm-grey);
  color: var(--vm-muted);
}

.vm-niveau--dev {
  background: var(--vm-dark);
  color: var(--vm-orange-soft);
}

.vm-conclusion__content {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--vm-hairline);
}

.vm-conclusion__text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--vm-fg);
  margin: 0;
}

.vm-conclusion__cta {
  border-radius: 12px;
  padding: 20px;
}

.vm-conclusion__cta-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--vm-fg);
  margin: 0;
}

.vm-sources {
  border-radius: 14px;
  padding: 18px 18px 10px;
}

.vm-sources__title {
  font-family: var(--vm-title);
  font-size: 18px;
  font-weight: 700;
  color: var(--vm-fg);
  margin: 0 0 10px;
}

.vm-sources__list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
}

.vm-sources__item {
  font-size: 14px;
  color: var(--vm-fg);
  margin-bottom: 4px;
}

.vm-sources__item a {
  color: var(--vm-teal-deep);
  text-decoration: underline;
}