/* ═══════════════════════════════════════════════════════════════
   Réglo Pro — B2B skin (Phase 0 "one system, many skins").
   -----------------------------------------------------------------
   NOT a new stylesheet — it re-skins the SAME components by overriding
   the shared design tokens under `body.brand-pro`. Every existing card,
   button, hero and section restyles automatically. The consumer site is
   untouched (it never carries `.brand-pro`).

   Tone: corporate. The playful solar-gold CTA becomes confident deep
   forest green; the discreet French blue is promoted to the professional
   accent (eyebrows, links); surfaces run a touch cooler.
   ═══════════════════════════════════════════════════════════════ */

body.brand-pro {
  /* CTA — solid, confident green instead of the consumer gold gradient */
  --cta-grad: linear-gradient(135deg, #0e8a5f, #0a6b4a);
  --cta-ink: #ffffff;
  --shadow-glow: 0 0 0 1px rgb(14 138 95 / 0.28), 0 10px 40px rgb(10 107 74 / 0.22);

  /* Interactive accent — professional French blue */
  --accent: #26407f;
  --accent-deep: #1c2f60;
  --accent-soft: rgb(38 64 127 / 0.1);
  --accent-text: #26407f;

  /* Cooler "corporate daylight" surfaces */
  --bg: #f3f5f4;
  --bg-raised: #eaeeec;
  --surface-2: #e3e9e4;
}

/* Eyebrow reads a little more formal in the pro context. */
body.brand-pro .eyebrow {
  letter-spacing: 0.12em;
}

/* ── Small B2B-only layout helpers (used by pages/business.php) ── */

/* Responsive value-prop grid (auto-fit, so it needs no media queries). */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.biz-card {
  padding: 22px;
}

.biz-card h3 {
  margin: 0 0 6px;
}

.biz-card p {
  margin: 0;
  color: var(--ink-soft);
}

/* Hero CTA row (primary + ghost side by side, wrapping on mobile). */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

/* Trust strip under the hero. */
.biz-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

.biz-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink-soft);
}

.biz-trust li::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

/* Contact block — call fallback shown beside the lead form. */
.biz-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

/* Two-column split: pitch + call on the left, the lead form on the right.
   Single column on narrow screens (form drops under the pitch). */
.biz-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

@media (min-width: 920px) {
  .biz-contact-grid {
    grid-template-columns: 1fr 1.05fr;
    gap: 48px;
  }
}

/* The form sits in a raised card so it reads as the primary action. */
.biz-form-card {
  padding: clamp(20px, 2vw, 32px);
}

/* ── Pro comparator (pages/business-offers.php) ── */

/* Energy toggle + consumption input sit on one row, wrapping on mobile. */
.biz-offers-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 28px;
  margin-top: 20px;
}

/* Segmented electricity / gas control (reuses the shared .chip skin). */
.chip-group {
  display: inline-flex;
  gap: 8px;
}

.biz-offers-kwh {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.biz-offers-kwh label {
  flex-basis: 100%;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.biz-offers-kwh input {
  width: 160px;
}

/* Advisor nudge under the ranked list. */
.biz-offers-help {
  border-color: transparent;
  background: var(--accent-soft);
}

/* Partner recruitment band on the Entreprises landing: text + CTA, side by
   side on wide screens, stacked on mobile. */
.biz-partner-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  background: var(--accent-soft);
  border-color: transparent;
}