/* ============================================================
   Mon Énergie — Charte UI partagée (accueil + simulateur)
   Variables CSS + utilitaires. NE PAS redéfinir --bs-primary.
   ============================================================ */

:root {
  /* Couleurs de marque */
  --me-navy:   #1e3a5f;   /* Primaire : confiance, titres, fonds hero */
  --me-navy-2: #2a4a73;   /* Variante claire navy */
  --me-orange: #E87500;   /* Accent : CTA, montants clés, reste à charge */
  --me-orange-2:#ff8c1a;  /* Orange hover */
  --me-green:  #2e9e6f;   /* Succès : aides / économies */
  --me-blue:   #3b82a6;   /* Info secondaire */
  --me-bg:     #f5f7fa;   /* Fond clair sections */
  --me-ink:    #1f2937;   /* Texte principal */
  --me-muted:  #6b7280;   /* Texte secondaire */
  --me-border: #e5e9f0;

  /* Rayons & ombres */
  --me-radius:    1rem;
  --me-radius-sm: .65rem;
  --me-pill:      999px;
  --me-shadow:    0 .5rem 1.25rem rgba(30,58,95,.10);
  --me-shadow-sm: 0 .15rem .5rem rgba(30,58,95,.08);
}

/* ── Hero ───────────────────────────────────────────────── */
.me-hero {
  background: linear-gradient(135deg, var(--me-navy) 0%, var(--me-navy-2) 60%, #16314f 100%);
  position: relative;
  overflow: hidden;
}
.me-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(232,117,0,.18) 0%, transparent 45%);
  pointer-events: none;
}
.me-hero-cta { position: relative; z-index: 2; }

/* ── CTA / boutons ──────────────────────────────────────── */
.me-btn-orange {
  background: var(--me-orange);
  color: #fff;
  border: none;
  border-radius: var(--me-pill);
  font-weight: 800;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.me-btn-orange:hover { background: var(--me-orange-2); color:#fff; transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(232,117,0,.35); }

.me-btn-navy {
  background: var(--me-navy);
  color: #fff;
  border: none;
  border-radius: var(--me-pill);
  font-weight: 800;
  transition: background .2s ease, transform .15s ease;
}
.me-btn-navy:hover { background: var(--me-navy-2); color:#fff; transform: translateY(-2px); }

.me-btn-outline-light {
  border: 2px solid rgba(255,255,255,.85);
  color: #fff;
  border-radius: var(--me-pill);
  font-weight: 800;
  background: transparent;
  transition: background .2s ease, transform .15s ease;
}
.me-btn-outline-light:hover { background: rgba(255,255,255,.14); color:#fff; transform: translateY(-2px); }

/* ── Cartes ─────────────────────────────────────────────── */
.me-card {
  background: #fff;
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius);
  box-shadow: var(--me-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.me-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--me-shadow);
}

/* ── Badges icônes colorés ──────────────────────────────── */
.me-icon-badge {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.me-icon-badge.sm { width: 40px; height: 40px; font-size: 1rem; }
.me-icon-badge.lg { width: 72px; height: 72px; font-size: 1.8rem; }
.me-bg-navy   { background: rgba(30,58,95,.12);  color: var(--me-navy); }
.me-bg-orange { background: rgba(232,117,0,.14); color: var(--me-orange); }
.me-bg-green  { background: rgba(46,158,111,.14); color: var(--me-green); }
.me-bg-blue   { background: rgba(59,130,166,.14); color: var(--me-blue); }

/* ── Bandeau chiffres-clés ──────────────────────────────── */
.me-stats-strip {
  background: #fff;
  border-bottom: 1px solid var(--me-border);
}
.me-stat .me-stat-num {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--me-orange);
  line-height: 1.1;
}
.me-stat .me-stat-label {
  font-size: .72rem;
  color: var(--me-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}

/* ── Titres de section ──────────────────────────────────── */
.me-section-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--me-orange);
  margin-bottom: .5rem;
}

/* ── Timeline (3 étapes) ────────────────────────────────── */
.me-timeline { position: relative; }
.me-timeline::before {
  content: "";
  position: absolute;
  top: 40px; left: 12%; right: 12%;
  height: 3px;
  background: linear-gradient(90deg, var(--me-orange), var(--me-navy));
  opacity: .25;
  z-index: 0;
}

/* ── Lien de carte (toute la carte cliquable visuellement) ─ */
.me-tile-link { color: inherit; text-decoration: none; }
.me-tile-link:hover { color: inherit; }

/* ── Récap simulateur ───────────────────────────────────── */
.me-recap {
  background: linear-gradient(135deg, var(--me-navy), var(--me-navy-2));
  color: #fff;
  border-radius: var(--me-radius);
  box-shadow: var(--me-shadow);
}
.me-recap .me-recap-val { font-size: 1.5rem; font-weight: 900; color: var(--me-orange); }

/* ── Sticky CTA simulateur ──────────────────────────────── */
.me-sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 1030;
}

/* ── Info-bulle (tooltips) ──────────────────────────────── */
.me-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  font-size: .65rem; font-weight: 700;
  color: var(--me-muted);
  border: 1px solid var(--me-border);
  border-radius: 50%;
  cursor: help;
}

/* ── Utilitaires couleur texte ──────────────────────────── */
.me-text-navy   { color: var(--me-navy) !important; }
.me-text-orange { color: var(--me-orange) !important; }
.me-text-green  { color: var(--me-green) !important; }
.me-bg-soft     { background: var(--me-bg) !important; }