/**
 * Mock hero consultant — portefeuille Léo (landing-consultant.html)
 */
.mkt-hero-consult-mock.product-shell {
  border-radius: 20px;
  border: 1px solid rgba(28, 26, 20, 0.08);
  background: #fff;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(28, 26, 20, 0.04),
    0 8px 32px rgba(28, 26, 20, 0.08),
    0 24px 64px rgba(28, 26, 20, 0.06);
}

.mkt-hero-consult-mock .shell-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f7f5f0;
  border-bottom: 1px solid rgba(28, 26, 20, 0.06);
}

.mkt-hero-consult-mock .shell-dots {
  display: flex;
  gap: 5px;
}

.mkt-hero-consult-mock .shell-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(28, 26, 20, 0.12);
}

.mkt-hero-consult-mock .shell-title {
  flex: 1;
  font-size: 11px;
  color: #6b6560;
}

.mkt-hero-consult-mock .shell-live {
  font-size: 10px;
  font-weight: 600;
  color: #1b4fcc;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mkt-hero-consult-mock .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1b4fcc;
}

.mkt-hero-consult-mock .shell-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(28, 26, 20, 0.06);
}

.mkt-hero-consult-mock .shell-appbrand {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
}

.mkt-hero-consult-mock .shell-appmeta {
  font-size: 11px;
  color: #6b6560;
}

.mkt-hero-consult-mock .shell-toolbar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(28, 26, 20, 0.05);
}

.mkt-hero-consult-mock .shell-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(27, 79, 204, 0.1);
  color: #1b4fcc;
}

.mkt-hero-consult-mock .shell-chip.muted {
  background: rgba(28, 26, 20, 0.04);
  color: #6b6560;
}

.mkt-hero-consult-mock .shell-body {
  padding: 14px;
}

.mkt-hero-consult-mock .hero-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.mkt-hero-consult-mock .hero-kpi {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(28, 26, 20, 0.06);
}

.mkt-hero-consult-mock .hero-kpi.ring-crit {
  background: linear-gradient(145deg, #fff8f7, #fef4f3);
}

.mkt-hero-consult-mock .hero-kpi.ring-ok {
  background: linear-gradient(145deg, #f6f9ff, #eef3ff);
}

.mkt-hero-consult-mock .hero-kpi-val {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  line-height: 1;
}

.mkt-hero-consult-mock .hero-kpi.ring-crit .hero-kpi-val { color: #c8392a; }
.mkt-hero-consult-mock .hero-kpi.ring-ok .hero-kpi-val { color: #1b4fcc; }

.mkt-hero-consult-mock .hero-kpi-lbl {
  font-size: 10px;
  color: #6b6560;
  line-height: 1.3;
}

.mkt-hero-consult-mock .pf-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mkt-hero-consult-mock .pf-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(28, 26, 20, 0.06);
}

.mkt-hero-consult-mock .pf-row.selected {
  background: rgba(27, 79, 204, 0.04);
  border-color: rgba(27, 79, 204, 0.15);
}

.mkt-hero-consult-mock .pf-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}

.mkt-hero-consult-mock .pf-avatar.crit { background: #c8392a; }
.mkt-hero-consult-mock .pf-avatar.warn { background: #c97a00; }
.mkt-hero-consult-mock .pf-avatar.ok { background: #0b8a42; }

.mkt-hero-consult-mock .pf-row-title {
  font-size: 12px;
  font-weight: 600;
}

.mkt-hero-consult-mock .pf-row-sub {
  font-size: 10px;
  color: #6b6560;
}

.mkt-hero-consult-mock .pf-pill {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
}

.mkt-hero-consult-mock .pf-pill.crit { background: rgba(200, 57, 42, 0.1); color: #c8392a; }
.mkt-hero-consult-mock .pf-pill.warn { background: rgba(201, 122, 0, 0.12); color: #c97a00; }
.mkt-hero-consult-mock .pf-pill.ok { background: rgba(11, 138, 66, 0.1); color: #0b8a42; }

@media (max-width: 768px) {
  .mkt-hero-consult-mock .pf-row {
    grid-template-columns: auto 1fr auto;
  }

  .mkt-hero-consult-mock .pf-score-ring {
    display: none;
  }
}