/* ═══════════════════════════════════════════════════════════
   MyBatteryHealth — Inscription Pro : surcouche couleurs 2026
   Chargée APRÈS styles-register.css, qui reste inchangé.
   Aligne le parcours d'inscription sur le site vitrine :
   Inter, fond blanc, vert #00b862 en accent (le rouge reste
   réservé au logo).
   Pour revenir en arrière : retirer la balise <link> du template.
   ═══════════════════════════════════════════════════════════ */

:root {
  --mbh-g:      #00b862;
  --mbh-g-dark: #009e53;
  --mbh-g-deep: #007a40;
  --mbh-g-soft: #e9f7f0;
  --mbh-ink:    #14181d;
  --mbh-ink2:   #5c6672;
  --mbh-ink3:   #8d97a3;
  --mbh-line:   #e7eaee;
}

/* ── Typographie ── */
body, html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--mbh-ink);
  -webkit-font-smoothing: antialiased;
}
.stepIndicator { color: var(--mbh-ink2); letter-spacing: .04em; }
.stepTitle { color: var(--mbh-ink); font-weight: 800; letter-spacing: -0.025em; }

/* ── Coches d'avantages ── */
.checkmark-group--icon { color: var(--mbh-g); }

/* ── Sélecteur d'offres ── */
.planGrid__planLabel {
  background: #fff;
  color: var(--mbh-ink);
  border: 1.5px solid var(--mbh-line);
  font-weight: 700;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.planGrid__planChoice:hover .planGrid__planLabel {
  border-color: var(--mbh-g);
}
.planGrid__planInput:checked + .planGrid__planLabel {
  background: var(--mbh-g);
  border-color: var(--mbh-g);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(0,184,98,.8);
}
.planGrid__planInput:active + .planGrid__planLabel,
.planGrid__planInput:focus-visible + .planGrid__planLabel {
  box-shadow: 0 0 0 3px rgba(0,184,98,.28);
}
.planGrid__planLabel:after { border-top-color: var(--mbh-g); }

/* ── Tableau des offres ── */
.planGrid__featureCell { color: var(--mbh-ink); fill: var(--mbh-ink); }
.planGrid__cell:not(.planGrid__featureCell) { color: var(--mbh-ink2); fill: var(--mbh-ink2); }
.planGrid__cell.planGrid__cell--isSelected:not(.planGrid__featureCell) {
  color: var(--mbh-ink);
  fill: var(--mbh-g);
  font-weight: 700;
  background: rgba(0,184,98,.06);
}
.planGrid__featureTableRow--planPrice .planGrid__cell--isSelected:not(.planGrid__featureCell) {
  color: var(--mbh-g-deep);
}
.planGrid__cell--isSelected .planGrid__planMaxScreenCountLabel {
  border-color: var(--mbh-g);
  color: var(--mbh-g-deep);
}

/* ── Boutons (Continuer, et étapes suivantes si elles chargent ce fichier) ── */
.mbh-btn-solid.mbh-btn-primary,
.mbh-btn-twotone.mbh-btn-primary {
  background-color: var(--mbh-g);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 10px 24px -12px rgba(0,184,98,.8);
}
.mbh-btn-solid.mbh-btn-primary:hover,
.mbh-btn-twotone.mbh-btn-primary:hover { background-color: var(--mbh-g-dark); }
.mbh-btn-solid.mbh-btn-primary:active,
.mbh-btn-twotone.mbh-btn-primary:active { background-color: var(--mbh-g-deep); }
.mbh-btn-outline.mbh-btn-primary { color: var(--mbh-g-dark); }
.mbh-btn-outline-red-border { border-color: var(--mbh-g); }

/* ── Liens ── */
a { color: var(--mbh-g-dark); }
a:hover { color: var(--mbh-g-deep); }

/* ── Étapes 2 et 3 : récapitulatif d'offre et champs ── */
.orderInfoItem__button { color: var(--mbh-g-dark); font-weight: 600; }
.orderInfoItem__button:hover { color: var(--mbh-g-deep); }
.form-control:focus {
  border-color: var(--mbh-g);
  box-shadow: 0 0 0 .2rem rgba(0,184,98,.22);
}

/* ── Mentions ── */
.planGrid__disclaimer { color: var(--mbh-ink3); }