/* ========================================
   HERO ACCUEIL PREMIUM
======================================== */

.hero {
  position: relative;

  padding: 150px 0 115px;

  text-align: center;

  overflow: hidden;
}

.hero::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at top left,
      rgba(176, 138, 74, .13),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F1F3F5 100%
    );

  z-index: -2;
}

.hero::after {
  content: "";

  position: absolute;
  left: 50%;
  bottom: 0;

  width: min(880px, 80%);
  height: 1px;

  transform: translateX(-50%);

  background: linear-gradient(
    90deg,
    transparent,
    var(--color-accent),
    transparent
  );

  opacity: .7;
}

.hero h1 {
  max-width: 1080px;
  margin: 0 auto 30px;
}

.hero-subtitle {
  max-width: 860px;
  margin: 0 auto;

  font-size: clamp(1.12rem, 1.6vw, 1.3rem);
}

/* ========================================
   TRUST STRIP PREMIUM
======================================== */

.trust-strip {
  position: relative;

  background: var(--color-primary);

  padding: 22px 0;

  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.trust-strip::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    var(--color-accent),
    transparent
  );
}

.trust-strip-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;

  flex-wrap: wrap;
}

.trust-strip-inner span {
  position: relative;

  color: rgba(255,255,255,.88);

  font-size: .86rem;
  font-weight: 800;

  padding: 9px 16px 9px 34px;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;

  background: rgba(255,255,255,.04);
}

.trust-strip-inner span::before {
  content: "✓";

  position: absolute;
  left: 14px;
  top: 50%;

  transform: translateY(-50%);

  color: var(--color-accent);

  font-size: .85rem;
  font-weight: 900;
}

/* ========================================
   PREUVES CONCRÈTES
======================================== */

.section:first-of-type .cards-grid .card {
  border-top: 4px solid var(--color-accent);
}

.section:first-of-type .cards-grid .card h3 {
  font-size: 1.42rem;
}

/* ========================================
   COMMENT ÇA FONCTIONNE
======================================== */

.cards-grid .badge {
  margin-bottom: 18px;

  background: rgba(176, 138, 74, .12);
  color: var(--color-accent);
}

.cards-grid .card .badge + h3 {
  margin-top: 8px;
}

/* ========================================
   MARQUE BLANCHE
======================================== */

.grid-2 .card .check-list {
  margin-top: 24px;
}

.grid-2 .card {
  border-top: 4px solid var(--color-primary);
}

/* ========================================
   VALEUR DU PORTEFEUILLE
======================================== */

.split .cards-grid {
  margin-top: 0;
}

/* ========================================
   CTA FINAL PREMIUM
======================================== */

.cta-box .cards-grid {
  margin: 42px 0;
}

.cta-box .card {
  text-align: center;
  padding: 24px;

  border-color: rgba(255,255,255,.18);
}

.cta-box .card h3 {
  font-size: 1.05rem;
}

.cta-box .small-note {
  margin-top: 28px;

  color: rgba(255,255,255,.7);
  opacity: 1;
}

/* ========================================
   SECTIONS PREMIUM
======================================== */

.cta-box {
  text-align: center;
}

.cta-box h2 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.cta-box p {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;

  margin-top: 40px;
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 992px) {

  .hero {
    padding: 105px 0 85px;
  }

  .trust-strip-inner {
    justify-content: center;
  }

}

@media (max-width: 768px) {

  .hero {
    padding: 90px 0 70px;
  }

  .trust-strip-inner {
    justify-content: flex-start;
  }

  .trust-strip-inner span {
    width: 100%;
    text-align: left;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }

}