/* =========================================================
   ELSASS PERFORMANCE — DARK / BEIGE THEME (Option A)
   - Dark mode épuré + accent Beige
   - 3e couleur : Teal (valide / discret / eco)
   - Version CLEAN (sans doublons / sans hacks contradictoires)
========================================================= */

/* =============== THEME =============== */
:root {
  --bg: #0B0F14;
  --bg2: #0E1420;

  --panel: #121A28;
  --panel2: #0F1726;

  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .14);

  --text: #FFFFFF;
  --soft: #C9CFDA;
  --muted: #8E96A6;

  /* Accent beige (principal) */
  --accent: #D8C7A6;
  --accent2: #E7DBC2;
  --accent3: #BFAE8E;

  /* Option A : teal */
  --teal: #57C7A6;
  --teal2: #76E0C1;

  --shadow: 0 30px 90px rgba(0, 0, 0, .65);
  --shadow2: 0 18px 60px rgba(0, 0, 0, .50);

  --radius: 18px;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* Fond global très discret */
.page-bg {
  position: relative;
  overflow-x: hidden;
}

.page-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(255, 255, 255, .035), transparent 60%),
    radial-gradient(820px 560px at 85% 20%, rgba(216, 199, 166, .08), transparent 65%),
    radial-gradient(780px 520px at 10% 60%, rgba(87, 199, 166, .045), transparent 62%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  opacity: .95;
  z-index: -1;
}

.red {
  color: var(--accent) !important;
}

/* ================= TOPBAR ================= */
.topbar {
  font-size: .82rem;
  color: rgba(255, 255, 255, .78);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: rgba(0, 0, 0, .25);
  backdrop-filter: blur(10px);
}

.topbar .dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--accent);
  display: inline-block;
  margin-right: .45rem;
  box-shadow: 0 0 0 4px rgba(216, 199, 166, .12);
}

/* ================= NAV ================= */
.navbar {
  background: rgba(0, 0, 0, .25);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  backdrop-filter: blur(12px);
}

.navbar-logo {
  height: 42px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  transition: all .2s ease;
}

@media (max-width: 991px) {
  .navbar-logo {
    height: 36px;
  }
}

.nav-link {
  color: rgba(255, 255, 255, .82) !important;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: .92rem;
  padding: .55rem .85rem !important;
  border-radius: 12px;
}

.nav-link:hover {
  background: rgba(255, 255, 255, .06);
}

.nav-link.active {
  color: #fff !important;
  background: rgba(216, 199, 166, .10);
  border: 1px solid rgba(216, 199, 166, .20);
}

/* ================= BUTTONS ================= */
.btn {
  border-radius: 12px;
  font-weight: 950;
  padding: .75rem 1.05rem;
}

.btn-main {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
  color: #0B0F14;
  box-shadow: 0 15px 40px rgba(216, 199, 166, .18);
}

.btn-main:hover {
  filter: brightness(1.03);
  color: #0B0F14;
}

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .20);
  color: #fff;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

/* variante ghost pour fonds clairs */
.btn-ghost--dark {
  border: 1px solid rgba(11, 15, 20, .18) !important;
  background: rgba(255, 255, 255, .65) !important;
  color: #0B0F14 !important;
}

.btn-ghost--dark:hover {
  background: rgba(11, 15, 20, .04) !important;
}

/* ================= HERO ================= */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 540px at 70% 15%, rgba(216, 199, 166, .16), transparent 60%),
    linear-gradient(90deg, rgba(11, 15, 20, .96), rgba(11, 15, 20, .60)),
    url("./img/int_audi.jpg");
  background-size: cover;
  background-position: right center;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* ✅ VERSION PROPRE : on réserve de la place pour le widget */
.hero--extended {
  padding: 100px 0 190px; /* plus d'air en bas */
}

/* contenu du hero */
.hero-content {
  padding: 0 0 30px;
  position: relative;
  z-index: 2;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(216, 199, 166, .12);
  border: 1px solid rgba(216, 199, 166, .22);
  color: rgba(231, 219, 194, .92);
  font-weight: 950;
  letter-spacing: .08em;
  font-size: .72rem;
  text-transform: uppercase;
}

.hero h1 {
  margin: 14px 0 12px;
  font-weight: 1100;
  letter-spacing: -.03em;
  line-height: 1.02;
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  text-transform: uppercase;
}

.hero p {
  color: rgba(255, 255, 255, .78);
  font-weight: 650;
  max-width: 720px;
}

@media (max-width: 991px) {
  .hero--extended {
    padding: 54px 0 230px;
  }

  .hero-content {
    padding-bottom: 20px;
  }
}

/* ✅ On neutralise l'ancien .hero-sim (au cas où) */
.hero-sim {
  all: unset;
}

/* ================= WIDGET DANS HERO (ABSOLUTE) ================= */
.hero-sim--absolute {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -105px; /* overlap */
  z-index: 50;
  padding: 0;
  margin: 0;
}

#sim-widget .container {
  display: flex;
  justify-content: center;
}

/* carte widget */
#sim-widget .glass {
  width: min(1140px, 100%);
  border-radius: 30px;
  overflow: hidden;
  padding-bottom: 28px;
  background: linear-gradient(180deg, rgba(10, 14, 22, .95), rgba(8, 12, 18, .98));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 140px rgba(0, 0, 0, .65);
  position: relative;
}

/* top line */
#sim-widget .glass::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(216, 199, 166, .90), transparent);
}

/* option : arrondir un peu les champs dans le widget */
#sim-widget .form-select,
#sim-widget .form-control {
  border-radius: 14px;
}

/* ================= SECTIONS (bands) ================= */
.band {
  padding: 80px 0;
  position: relative;
}

.band--dark {
  background: transparent;
}

/* section light */
.band--light {
  background:
    radial-gradient(900px 520px at 15% 10%, rgba(216, 199, 166, .20), transparent 60%),
    radial-gradient(900px 520px at 85% 30%, rgba(87, 199, 166, .10), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F5F1E7 100%);
  border-top: 1px solid rgba(17, 22, 30, .08);
  border-bottom: 1px solid rgba(17, 22, 30, .08);
}

/* ✅ uniquement la 1ère section light après le hero (STATS) */
header.hero + section.band--light {
  margin-top: 0 !important;
}

/* petit fondu sous le hero (effet premium) */
header.hero + section.band--light::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -90px;
  height: 90px;
  background: linear-gradient(180deg, rgba(11, 15, 20, 0.0), rgba(11, 15, 20, 0.08), rgba(11, 15, 20, 0.0));
  pointer-events: none;
}

@media (max-width: 991px) {
  .hero-sim--absolute {
    bottom: -120px;
  }

  header.hero + section.band--light {
    padding-top: 240px;
  }

  #sim-widget .glass {
    border-radius: 24px;
  }
}

/* ================= TITRES ================= */
.section-title {
  font-weight: 1100;
  letter-spacing: -.02em;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  margin: 0 0 10px;
  color: #fff;
}

.section-sub {
  color: rgba(255, 255, 255, .72);
  font-weight: 650;
  max-width: 820px;
  margin: 0;
}

.section-title--dark {
  color: #0B0F14 !important;
}

.section-sub--dark {
  color: rgba(11, 15, 20, .72) !important;
}

.divider {
  height: 1px;
  background: rgba(255, 255, 255, .10);
  margin: 18px 0 0;
}

/* ================= PILLS ================= */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border-radius: 999px;
  padding: .35rem .7rem;
  background: rgba(216, 199, 166, .12);
  border: 1px solid rgba(216, 199, 166, .22);
  color: rgba(231, 219, 194, .95);
  font-weight: 950;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.pill--soft {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .85);
}

.band--light .pill--soft {
  background: rgba(11, 15, 20, .06);
  border: 1px solid rgba(11, 15, 20, .10);
  color: rgba(11, 15, 20, .70);
}

/* ================= BLOCS DARK (glass) ================= */
.glass {
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(255, 255, 255, .055), transparent 60%),
    radial-gradient(900px 520px at 85% 40%, rgba(216, 199, 166, .07), transparent 65%),
    linear-gradient(180deg, rgba(18, 26, 40, .94), rgba(10, 14, 22, .94));
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 22px;
  box-shadow: var(--shadow2);
  overflow: hidden;
}

.glass-topline {
  border-top: 2px solid rgba(216, 199, 166, .55);
}

.glass .p {
  padding: 28px;
}

/* ================= LIGHT WRAP ================= */
.light-wrap {
  padding: 0;
}

/* ================= FEATURES ================= */
.feature {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  padding: 18px;
  height: 100%;
}

.feature h5 {
  margin: 0 0 8px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: 1.05rem;
  color: #fff;
}

.feature p {
  margin: 0;
  color: rgba(255, 255, 255, .74);
  font-weight: 650;
}

.ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(216, 199, 166, .12);
  border: 1px solid rgba(216, 199, 166, .22);
  margin-bottom: 12px;
}

.ico i {
  font-size: 1.2rem;
  color: rgba(231, 219, 194, .95);
}

.feature--light {
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(17, 22, 30, .10);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .10);
}

.feature--light h5 {
  color: #0B0F14;
}

.feature--light p {
  color: rgba(11, 15, 20, .72);
}

.ico--light {
  background: rgba(216, 199, 166, .22);
  border: 1px solid rgba(216, 199, 166, .30);
}

.ico--light i {
  color: #0B0F14;
}

/* ================= BULLETS ================= */
.bullet {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .12);
}

.bullet:last-child {
  border-bottom: 0;
}

.bullet i {
  color: var(--teal);
  font-size: 1.1rem;
  margin-top: 2px;
}

.bullet span {
  color: rgba(255, 255, 255, .78);
  font-weight: 700;
}

.bullet--dark {
  border-bottom: 1px dashed rgba(11, 15, 20, .14);
}

.bullet--dark span {
  color: rgba(11, 15, 20, .78);
}

/* ================= STATS ================= */
.stats-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 40px 50px;
  border-radius: 22px;
}

.stats-wrap--light {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF7EF 100%);
  border: 1px solid rgba(17, 22, 30, .10);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .12);
}

.stat-box {
  text-align: center;
  flex: 1;
}

.stat-number {
  font-size: 2.4rem;
  font-weight: 1100;
  letter-spacing: -.02em;
  color: #0B0F14;
}

.stat-label {
  margin-top: 6px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(11, 15, 20, .65);
}

.stat-sep {
  width: 1px;
  height: 64px;
  background: linear-gradient(180deg, transparent, rgba(11, 15, 20, .14), transparent);
}

@media (max-width: 991px) {
  .stats-wrap {
    flex-direction: column;
    gap: 26px;
    padding: 32px;
  }

  .stat-sep {
    display: none;
  }
}

/* ================= CTA STRIP ================= */
.band--cta {
  padding: 90px 0;
  background:
    radial-gradient(1200px 700px at 20% 30%, rgba(216, 199, 166, .14), transparent 60%),
    radial-gradient(1200px 700px at 85% 55%, rgba(87, 199, 166, .08), transparent 62%),
    linear-gradient(135deg, rgba(9, 13, 20, .92) 0%, rgba(7, 16, 26, .92) 45%, rgba(12, 10, 18, .92) 100%);
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.cta-strip {
  border-radius: 22px;
  padding: 42px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.cta-title {
  margin: 0 0 10px;
  font-weight: 1100;
  letter-spacing: -.02em;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.05;
}

.cta-red {
  color: var(--accent);
}

.cta-sub {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-weight: 650;
  max-width: 720px;
}

.cta-right {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 991px) {
  .cta-strip {
    padding: 28px;
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-right {
    width: 100%;
  }
}

/* ================= REVIEWS ================= */
.review {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  padding: 18px;
  height: 100%;
}

.stars {
  color: var(--accent2);
  font-weight: 1000;
}

.review p {
  color: rgba(255, 255, 255, .78);
  font-weight: 650;
}

.review .who {
  color: rgba(255, 255, 255, .75);
  font-weight: 900;
}

.review .badgeG {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
  border-radius: 999px;
  padding: .25rem .55rem;
  color: rgba(255, 255, 255, .85);
  font-weight: 900;
  font-size: .82rem;
}

/* ================= ACCORDION (Bootstrap) ================= */
.accordion-item {
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(17, 22, 30, .10) !important;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .08);
}

.accordion-button {
  background: rgba(255, 255, 255, .92) !important;
  color: rgba(11, 15, 20, .86) !important;
  font-weight: 950;
}

.accordion-button:not(.collapsed) {
  background: rgba(216, 199, 166, .18) !important;
}

.accordion-body {
  background: rgba(255, 255, 255, .92);
  color: rgba(11, 15, 20, .76);
  font-weight: 650;
}

/* ================= FOOTER ================= */
footer {
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .18);
}

footer .muted {
  color: rgba(255, 255, 255, .65);
  font-weight: 650;
}

footer a {
  color: rgba(255, 255, 255, .80);
  text-decoration: none;
  font-weight: 750;
}

footer a:hover {
  color: #fff;
}

/* =========================================================
   SIMULATEUR DANS LA SECTION STATS (PROPRE)
========================================================= */
.sim-in-stats {
  display: flex;
  justify-content: center;
  margin-top: -140px;   /* remonte dans le hero visuellement */
  margin-bottom: 26px;  /* espace avant la carte stats */
  position: relative;
  z-index: 5;
}

/* la card widget */
.sim-in-stats .glass {
  width: min(1140px, 100%);
  border-radius: 30px !important;
  overflow: hidden;
  padding-bottom: 26px !important;

  background: linear-gradient(180deg, rgba(10, 14, 22, .94), rgba(8, 12, 18, .98)) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 40px 140px rgba(0, 0, 0, .55) !important;
  position: relative;
}

/* top line beige */
.sim-in-stats .glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(216, 199, 166, .90), transparent);
}

/* sur la section claire : on laisse visible le widget */
.band--light {
  overflow: visible;
  position: relative;
  z-index: 1;
}

/* mobile */
@media (max-width: 991px) {
  .sim-in-stats {
    margin-top: -110px;
    margin-bottom: 18px;
  }

  .sim-in-stats .glass {
    border-radius: 24px !important;
  }
}

/* =========================================================
   SIM BAR (FULL WIDTH sous le hero)
========================================================= */
.sim-bar {
  position: relative;
  margin-top: 0;
  padding: 55px 0 70px;
  width: 100%;

  /* fond "widget" pleine largeur */
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(255, 255, 255, .06), transparent 55%),
    radial-gradient(1200px 700px at 85% 40%, rgba(216, 199, 166, .10), transparent 60%),
    linear-gradient(180deg, rgba(10, 14, 22, .98), rgba(8, 12, 18, .98));
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* on centre le widget à l'intérieur */
.sim-bar .container {
  display: flex;
  justify-content: center;
}

/* carte widget améliorée */
.sim-bar .glass {
  width: min(1140px, 100%);
  border-radius: 28px !important;
  overflow: hidden;
  padding-bottom: 22px !important;

  background: linear-gradient(180deg, rgba(15, 20, 30, .85), rgba(10, 14, 22, .92)) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .60) !important;
  position: relative;
}

/* top line premium */
.sim-bar .glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(216, 199, 166, .9), transparent);
}

/* =========================================================
   AMÉLIORATIONS UI DANS LE WIDGET (sans toucher widget.php)
========================================================= */

/* titres plus nets */
.sim-bar .glass h2,
.sim-bar .glass h3 {
  letter-spacing: -.01em;
}

/* labels */
.sim-bar .glass label {
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  color: rgba(255, 255, 255, .70);
}

/* selects / inputs */
.sim-bar .glass select,
.sim-bar .glass input {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
}

/* focus clean */
.sim-bar .glass select:focus,
.sim-bar .glass input:focus {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(216, 199, 166, .25), 0 10px 25px rgba(0, 0, 0, .18) !important;
  border-color: rgba(216, 199, 166, .55) !important;
}

/* bouton reset (si c'est un button/link) */
.sim-bar .glass .btn,
.sim-bar .glass button {
  border-radius: 14px !important;
}

/* mobile */
@media (max-width: 991px) {
  .sim-bar {
    padding: 40px 0 55px;
  }

  .sim-bar .glass {
    border-radius: 22px !important;
  }
}

/* ===== REVIEWS BAND ===== */
.reviews-band {
  position: relative;
  padding: 110px 0 95px;
  overflow: hidden; /* IMPORTANT : cache bien les côtés */
}

.reviews-bg {
  position: absolute;
  inset: 0;
  background: url("./img/rs3.jpg") center/cover no-repeat;
  z-index: 0;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.03);
}

.reviews-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 500px at 50% 25%, rgba(0, 0, 0, .25), rgba(0, 0, 0, .72)),
    linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .75));
}

.reviews-inner {
  position: relative;
  z-index: 2;
}

/* ===== HEAD CENTERED ===== */
.reviews-head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 38px;
}

.reviews-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  font-weight: 900;
  letter-spacing: .12em;
  font-size: .72rem;
}

.g-dot {
  width: 18px;
  height: 18px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  background: rgba(231, 207, 163, .18);
  border: 1px solid rgba(231, 207, 163, .30);
  color: #e7cfa3;
  font-weight: 1000;
  font-size: .8rem;
}

.reviews-title {
  margin: 14px 0 10px;
  font-weight: 1100;
  letter-spacing: -.02em;
  text-transform: uppercase;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  color: #fff;
}

.reviews-accent {
  color: #e7cfa3;
}

.reviews-rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .9);
  font-weight: 800;
}

.reviews-rating .stars {
  color: #f5c85c;
  letter-spacing: .12em;
}

.rating-text {
  opacity: .9;
}

/* ===== MARQUEE ===== */
.reviews-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.reviews-track {
  display: flex;
  width: max-content; /* ok car on va animer en px exact */
  will-change: transform;
}

.reviews-row {
  display: flex;
  gap: 22px;     /* ✅ marge constante */
  padding: 0 22px; /* ✅ évite cut aux extrémités */
  align-items: stretch;
}

/* fades */
.reviews-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 5;
  pointer-events: none;
}

.reviews-fade-left {
  left: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .70), rgba(0, 0, 0, 0));
}

.reviews-fade-right {
  right: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, .70), rgba(0, 0, 0, 0));
}

/* ===== CARD ===== */
.review-card {
  width: 320px;
  flex: 0 0 auto;
  border-radius: 18px;
  padding: 18px 18px 16px;
  background: rgba(16, 20, 28, .72);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .45);
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.card-stars {
  color: #f5c85c;
  letter-spacing: .08em;
  font-weight: 1000;
}

.card-badge {
  font-size: .75rem;
  font-weight: 900;
  color: rgba(255, 255, 255, .85);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
}

.card-text {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .90);
  font-weight: 700;
  line-height: 1.35;
  font-size: .95rem;
}

.card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.card-avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(231, 207, 163, .18);
  border: 1px solid rgba(231, 207, 163, .25);
  color: #e7cfa3;
  font-weight: 1000;
}

.card-name {
  font-weight: 950;
  color: #fff;
  font-size: .92rem;
}

.card-sub {
  color: rgba(255, 255, 255, .65);
  font-weight: 750;
  font-size: .78rem;
}

/* CTA */
.reviews-cta {
  margin-top: 34px;
  text-align: center;
}

.reviews-link {
  display: inline-block;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .18em;
  font-size: .74rem;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .25);
}

.reviews-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .06);
}

@media (max-width: 991px) {
  .review-card {
    width: 280px;
  }

  .reviews-fade {
    width: 70px;
  }
}

/* =========================================================
   BAND BACKGROUND — pour "Nos prestations"
   Usage:
   <section class="band band--dark band-bg" style="--band-bg:url('../img/xxx.png');">
========================================================= */
.band-bg {
  position: relative;
  overflow: hidden;
}

.band-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--band-bg) center / cover no-repeat;
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.05);
}

/* overlay: on voit l'image mais le contenu reste clean */
.band-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 520px at 50% 15%, rgba(0, 0, 0, .20), rgba(0, 0, 0, .62)),
    linear-gradient(180deg, rgba(0, 0, 0, .40), rgba(0, 0, 0, .65));
}

/* IMPORTANT : tout le contenu au-dessus */
.band-bg > .container {
  position: relative;
  z-index: 2;
}

/* Optionnel: si ton .glass est trop sombre, tu peux le rendre un poil + lisible */
.band-bg .glass {
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(255, 255, 255, .06), transparent 60%),
    radial-gradient(900px 520px at 85% 40%, rgba(216, 199, 166, .07), transparent 65%),
    linear-gradient(180deg, rgba(18, 26, 40, .88), rgba(10, 14, 22, .90));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}

/* =========================================================
   FAQ PREMIUM — FIX IMAGE + LISIBILITE (A COLLER EN BAS)
========================================================= */
.faq-premium.band-bg::after {
  background:
    radial-gradient(1000px 520px at 50% 30%, rgba(0, 0, 0, .20), rgba(0, 0, 0, .68) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .72)) !important;
}

.faq-premium::before {
  content: none !important;
}

.faq-premium .faq-shell {
  border-radius: 24px;
  padding: 30px;
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(255, 255, 255, .06), transparent 60%),
    linear-gradient(180deg, rgba(18, 26, 40, .78), rgba(10, 14, 22, .72));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 90px rgba(0, 0, 0, .55);
  backdrop-filter: blur(10px);
}

.faq-premium .faq-shell .section-title {
  color: rgba(255, 255, 255, .96);
}

.faq-premium .faq-shell .section-sub {
  color: rgba(255, 255, 255, .72);
}

.faq-premium .accordion-faq2 .accordion-item {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: none !important;
}

.faq-premium .accordion-faq2 .accordion-item + .accordion-item {
  margin-top: 12px;
}

.faq-premium .accordion-faq2 .accordion-button {
  background: rgba(255, 255, 255, .06) !important;
  color: rgba(255, 255, 255, .92) !important;
  font-weight: 950 !important;
  padding: 16px 16px !important;
  box-shadow: none !important;
  border: none !important;
}

.faq-premium .accordion-faq2 .accordion-button.collapsed {
  background: rgba(255, 255, 255, .04) !important;
}

.faq-premium .accordion-faq2 .accordion-button:hover {
  background: rgba(255, 255, 255, .08) !important;
}

.faq-premium .accordion-faq2 .accordion-button::after {
  filter: invert(1);
  opacity: .9;
}

.faq-premium .accordion-faq2 .accordion-body {
  background: transparent !important;
  color: rgba(255, 255, 255, .78) !important;
  font-weight: 650 !important;
  padding: 0 16px 16px 16px !important;
  line-height: 1.6;
}

.faq-premium .divider {
  background: rgba(255, 255, 255, .12) !important;
}

@media (max-width: 991px) {
  .faq-premium .faq-shell {
    padding: 18px;
  }
}

/* =========================================================
   FIX: FAQ band-bg trop sombre (laisse voir l'image)
========================================================= */
#faq.band-bg::before {
  filter: saturate(1.08) contrast(1.08) brightness(.78) !important;
  transform: scale(1.02) !important;
}

#faq.band-bg::after {
  background:
    radial-gradient(900px 520px at 50% 25%, rgba(0, 0, 0, .10), rgba(0, 0, 0, .42) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .46)) !important;
}

#faq .faq-shell {
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(255, 255, 255, .07), transparent 60%),
    linear-gradient(180deg, rgba(18, 26, 40, .72), rgba(10, 14, 22, .66)) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: 0 24px 90px rgba(0, 0, 0, .55) !important;
}

#faq .faq-shell {
  position: relative;
}

#faq .faq-shell::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(600px 220px at 25% 0%, rgba(216, 199, 166, .10), transparent 60%);
  opacity: .9;
}

/* =========================================================
   FORCE FAQ BACKGROUND (gagne contre band-bg-premium)
========================================================= */
section#faq.band-bg {
  position: relative !important;
  overflow: hidden !important;
}

section#faq.band-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;

  background-image: var(--band-bg) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;

  transform: scale(1.03) !important;
  filter: saturate(1.10) contrast(1.08) brightness(.82) !important;
  opacity: 1 !important;
}

section#faq.band-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;

  background:
    radial-gradient(1000px 520px at 50% 25%, rgba(0, 0, 0, .10), rgba(0, 0, 0, .45) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .50)) !important;
}

section#faq.band-bg > .container {
  position: relative !important;
  z-index: 2 !important;
}

section#faq .faq-shell {
  background: linear-gradient(180deg, rgba(18, 26, 40, .70), rgba(10, 14, 22, .62)) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: 0 24px 90px rgba(0, 0, 0, .55) !important;
  backdrop-filter: blur(10px) !important;
}

/* =========================================================
   FLEXFUEL — AVANTAGES (NEO)
========================================================= */
.e85-neo {
  max-width: 1180px;
  margin: 0 auto;
}

.e85-neo-visual {
  position: relative;
  min-height: 420px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(17, 22, 30, .10);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .12);
  background: var(--e85-img) center/cover no-repeat;
}

.e85-neo-visual-ov {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 40% 25%, rgba(0, 0, 0, .05), rgba(0, 0, 0, .55)),
    linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .60));
}

.e85-neo-badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  z-index: 2;
}

.e85-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-weight: 900;
  letter-spacing: .10em;
  font-size: .70rem;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.e85-badge--soft {
  background: rgba(216, 199, 166, .18);
  border-color: rgba(216, 199, 166, .26);
  color: rgba(255, 255, 255, .95);
}

.e85-neo-quote {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  padding: 18px;
  border-radius: 18px;
  background: rgba(10, 12, 16, .45);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
}

.e85-neo-pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border-radius: 999px;
  padding: .35rem .7rem;
  background: rgba(216, 199, 166, .16);
  border: 1px solid rgba(216, 199, 166, .26);
  color: rgba(255, 255, 255, .92);
  font-weight: 950;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .10em;
}

.e85-neo-quote h3 {
  margin: 10px 0 6px;
  color: #fff;
  font-weight: 1100;
  letter-spacing: -.02em;
  text-transform: uppercase;
  font-size: 1.25rem;
}

.e85-neo-quote p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-weight: 650;
}

/* Right content */
.e85-neo-content {
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(17, 22, 30, .10);
  border-radius: 22px;
  padding: 26px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, .10);
}

.e85-neo-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 8px;
}

.e85-step {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(11, 15, 20, .08);
}

.e85-step::before {
  content: "";
  position: absolute;
  left: 28px;
  top: -14px;
  bottom: -14px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(11, 15, 20, .12), transparent);
  opacity: .9;
}

.e85-step:last-child::before {
  display: none;
}

.e85-step-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(216, 199, 166, .22);
  border: 1px solid rgba(216, 199, 166, .30);
  flex: 0 0 auto;
}

.e85-step-ico i {
  font-size: 1.2rem;
  color: #0B0F14;
}

.e85-step-title {
  font-weight: 1100;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #0B0F14;
  margin-top: 2px;
}

.e85-step-text {
  margin-top: 4px;
  color: rgba(11, 15, 20, .72);
  font-weight: 650;
  line-height: 1.45;
}

.e85-neo-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 991px) {
  .e85-neo-visual {
    min-height: 360px;
  }

  .e85-neo-content {
    padding: 18px;
  }

  .e85-neo-cta .btn {
    width: 100%;
  }

  .e85-step::before {
    left: 26px;
  }
}

/* Supprime les traits sous les items à droite (FlexFuel) */
.e85-step {
  border-bottom: none !important;
}

.e85-step::before {
  display: none !important;
}

/* Force la colonne image à prendre la hauteur de la colonne droite */
.e85-neo-visual {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Assure que la row garde la même hauteur */
#avantages .row {
  align-items: stretch;
}

.e85-neo-visual {
  box-shadow: 0 30px 90px rgba(0, 0, 0, .25);
}

/* ======================================================
   GLOBAL TABS DESIGN (remplace le bleu Bootstrap)
====================================================== */
.nav-pills .nav-link {
  background: rgba(255, 255, 255, .06) !important;
  color: rgba(255, 255, 255, .85) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 999px !important;
  padding: .55rem 1rem !important;
  font-weight: 800 !important;
  transition: all .2s ease;
}

.nav-pills .nav-link:hover {
  background: rgba(216, 199, 166, .18) !important;
  border-color: rgba(216, 199, 166, .35) !important;
  color: #fff !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: rgba(216, 199, 166, .28) !important;
  border-color: rgba(216, 199, 166, .45) !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25) !important;
}

.nav-pills .nav-link:focus,
.nav-pills .nav-link:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(216, 199, 166, .25) !important;
}

.nav-pills .stage-badge {
  display: inline-flex;
  align-items: center;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .15);
  margin-right: .45rem;
  font-weight: 900;
  font-size: .7rem;
}

.nav-pills .nav-link.active .stage-badge {
  background: rgba(0, 0, 0, .35);
  border-color: rgba(255, 255, 255, .25);
}

/* SEO Pack (bloc bas de page) */
.seo-pack {
  padding: 34px 34px;
}

.seo-links {
  width: 100%;
  max-width: 520px;
}

.seo-ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.seo-ul li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.seo-ul li:last-child {
  border-bottom: 0;
}

.seo-ul a {
  text-decoration: none;
  font-weight: 600;
}

.seo-ul a:hover {
  text-decoration: underline;
}

@media (max-width: 991px) {
  .seo-pack {
    padding: 26px 18px;
  }

  .seo-links {
    max-width: 100%;
  }
}

/* Zones couvertes (sous les 3 cards) */
.coverage {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 16px;
}

.coverage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: .8rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.coverage-text {
  color: rgba(255, 255, 255, 0.75);
  font-size: .95rem;
  line-height: 1.4;
}

.section-sub--dark {
  color: rgba(255, 255, 255, 0.75);
}

.section-title {
  letter-spacing: .3px;
}

.section-title span {
  color: #d9c39a;
}

/* =========================================================
   WHY SECTION FIX
========================================================= */
.why-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.why-ico {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  margin-bottom: 0 !important;
  flex: 0 0 auto;
}

.band--light .why-card .h5,
.band--light .why-card h3 {
  color: #0B0F14 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 1100;
}

.band--light .why-card p {
  color: rgba(11, 15, 20, .72) !important;
  font-weight: 650;
}

.band--light .coverage {
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(17, 22, 30, .10);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .08);
  border-radius: 18px;
  padding: 14px 16px;
}

.band--light .coverage-pill {
  background: rgba(216, 199, 166, .22);
  border: 1px solid rgba(216, 199, 166, .30);
  color: #0B0F14;
  font-weight: 950;
}

.band--light .coverage-text {
  color: rgba(11, 15, 20, .70);
  font-weight: 650;
}

.band--light .coverage-text strong {
  color: #0B0F14;
}

/* =========================================================
   PROCESS SECTION FIX
========================================================= */
.process-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.process-ico {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  margin-bottom: 0 !important;
  flex: 0 0 auto;
}

.band--light .process-card .h5,
.band--light .process-card h3 {
  color: #0B0F14 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 1100;
}

.band--light .process-card p {
  color: rgba(11, 15, 20, .72) !important;
  font-weight: 650;
}

/* =========================================================
   ESSENTIEL + FAQ HOME FIX
========================================================= */
.essentiel-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.essentiel-ico {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  margin-bottom: 0 !important;
  flex: 0 0 auto;
}

.band--light .essentiel-card .h5,
.band--light .essentiel-card h3 {
  color: #0B0F14 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 1100;
}

.band--light .essentiel-card p {
  color: rgba(11, 15, 20, .72) !important;
  font-weight: 650;
}

.faqhome-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.faqhome-ico {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  margin-bottom: 0 !important;
  flex: 0 0 auto;
}

.band--light .faqhome-card .h5,
.band--light .faqhome-card h3 {
  color: #0B0F14 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 1100;
}

.faqhome-sub {
  color: rgba(11, 15, 20, .68);
  font-weight: 650;
  margin-top: 4px;
}

/* ==========================================
   LIENS HERO / TEXTE SEO
========================================== */
.band--light a,
.hero a {
  color: #d8c29a; /* doré soft */
  text-decoration: none;
  font-weight: 600;
  transition: color .2s ease, text-decoration .2s ease;
}

.band--light a:hover,
.hero a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.band--light p a {
  color: #cbb78f;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.band--light p a:hover {
  color: #ffffff;
}

/* FIX bouton hero (lisibilité + contraste) */
.hero .btn-main {
  opacity: 1 !important;
  color: #111 !important;
  background: linear-gradient(135deg, #e6d2a3, #cbb07a);
  font-weight: 700;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

.hero .btn-main:hover {
  background: linear-gradient(135deg, #f0ddb0, #d6bc85);
  color: #000;
  transform: translateY(-1px);
}

/* ===== FIX BOUTONS DANS SECTIONS CLAIRES ===== */
.band--light .btn-main,
.band--light .btn-main:visited {
  opacity: 1 !important;
  color: #111 !important;
  background: linear-gradient(135deg, #e6d2a3, #cbb07a);
  border: none;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

.band--light .btn-main:hover {
  background: linear-gradient(135deg, #f0ddb0, #d6bc85);
  color: #000;
  transform: translateY(-1px);
}

/* ===== LIENS TEXTE (SEO / CONTENU) ===== */
.band--light a,
.band--dark a {
  color: #d8c29a;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.band--light a:hover,
.band--dark a:hover {
  color: #ffffff;
}

/* =========================================================
   FIX BTN-MAIN (lisible partout, même sur dark + images)
========================================================= */
.btn-main {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  color: #0B0F14 !important;
  background: linear-gradient(135deg, #e6d2a3, #cbb07a) !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35) !important;
}

.btn-main:hover {
  background: linear-gradient(135deg, #f1dfb3, #d9bf86) !important;
  color: #06080b !important;
  transform: translateY(-1px);
}

.btn-main i,
.btn-main span {
  opacity: 1 !important;
  color: inherit !important;
}

/* =========================================================
   LIENS THEME (dark vs light) — propre & cohérent
========================================================= */

/* Liens dans sections DARK */
.band--dark a,
.band-bg a,
.hero a,
.glass a {
  color: rgba(231, 219, 194, .95) !important; /* doré clair */
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 650;
}

.band--dark a:hover,
.band-bg a:hover,
.hero a:hover,
.glass a:hover {
  color: #ffffff !important;
}

/* Liens dans sections LIGHT */
.band--light a {
  color: rgba(11, 15, 20, .82) !important; /* noir soft */
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 650;
}

.band--light a:hover {
  color: #0B0F14 !important;
}

/* =========================================================
   ✅ FIX FINAL (NE CASSE RIEN)
   - Empêche ".hero a { ... !important }" d'écraser le texte du bouton
   - Ne touche pas aux autres liens hero
========================================================= */
.hero .btn-main,
.hero .btn-main:visited,
.hero .btn-main:hover,
.hero .btn-main:active {
  color: #0B0F14 !important;
  text-decoration: none !important;
}

.hero .btn-main i,
.hero .btn-main span,
.hero .btn-main * {
  color: inherit !important;
  opacity: 1 !important;
}
/* =========================================================
   FIX GLOBAL — Boutons beiges (.btn-main) = texte NOIR partout
   - Empêche les styles de liens (a) de forcer une couleur claire
   - S'applique au hero, cards, glass, etc.
========================================================= */

/* Le bouton lui-même */
.btn-main,
a.btn-main,
button.btn-main,
.btn.btn-main {
  color: #0B0F14 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Tout le contenu à l'intérieur (icônes / span / svg) */
.btn-main * ,
a.btn-main * ,
button.btn-main * {
  color: #0B0F14 !important;
  opacity: 1 !important;
}

/* Hover / focus / active restent noirs aussi */
.btn-main:hover,
.btn-main:focus,
.btn-main:active,
a.btn-main:hover,
a.btn-main:focus,
a.btn-main:active {
  color: #0B0F14 !important;
  text-decoration: none !important;
}

/* Si tu utilises des SVG d'icônes */
.btn-main svg,
a.btn-main svg,
button.btn-main svg {
  fill: #0B0F14 !important;
  stroke: #0B0F14 !important;
}

/* ===============================
   FIX HERO MOBILE (spacing)
   - marge latérale dans le hero
   - moins de vide sous le hero
================================ */
@media (max-width: 575.98px) {

  /* 1) Redonne de l’air à gauche/droite sur le hero */
  .hero .hero-content{
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 18px !important;
  }

  /* 2) Réduit la "réserve" sous le hero */
  .hero--extended{
    padding: 54px 0 130px !important; /* avant: 54px 0 230px */
  }

  /* 3) Réduit la "réserve" au dessus de la 1ère section (widget overlap) */
  header.hero + section.band--light{
    padding-top: 170px !important; /* avant: 240px */
  }
}
/* ======================================
   FIX ESPACE TROP GRAND SOUS HERO (MOBILE)
====================================== */
@media (max-width: 575.98px) {

  /* réduit fortement la section blanche */
  header.hero + section.band--light {
    padding-top: 80px !important;
    padding-bottom: 60px !important;
  }

  /* évite que le widget pousse trop bas */
  .sim-in-stats {
    margin-top: -50px !important;
    margin-bottom: 10px !important;
  }
}

/* =========================================================
   FIX E85 VISUAL MOBILE (height qui saute à 0)
========================================================= */
@media (max-width: 991px) {
  #avantages .e85-neo-visual{
    height: 320px !important;     /* force une hauteur visible */
    min-height: 320px !important; /* évite min-height:100% */
  }
}

/* ===============================
   NAVBAR FIXED + EFFECT ON SCROLL
================================ */
#siteHeader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: background .25s ease, box-shadow .25s ease;
}

#siteHeader.is-scrolled{
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

#siteHeader.is-scrolled .topbar,
#siteHeader.is-scrolled .navbar{
  background: rgba(0,0,0,.55);
}