/* ============================================================
   GOLDEOR — CTA Final + Countdown
   cta-final.css
   ============================================================ */

.cta-final {
  position: relative;
  overflow: hidden;
}

/* Glow central */
.cta-final::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(107,84,151,0.3) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.cta-final__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}


.cta-final__title {
  font-size: clamp(30px, 5vw, 60px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -1px;
}

.cta-final__title .line-white {
  display: block;
  background: var(--heading-silver);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-final__title .line-gradient {
  display: block;
  background: linear-gradient(135deg, #F5C88A 0%, #ECA0C0 35%, #C4A8E8 65%, #A0B8F0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-final__subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

/* Countdown */
.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.countdown__item {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--border-radius-sm);
  padding: 20px 24px;
  min-width: 90px;
  text-align: center;
}

.countdown__value {
  font-size: 36px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  display: block;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

.countdown__label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 6px;
  display: block;
}

.countdown__sep {
  font-size: 28px;
  font-weight: 300;
  color: rgba(255,255,255,0.2);
  align-self: flex-start;
  padding-top: 20px;
  line-height: 1;
}

/* ── Offre pricing ────────────────────────────────────────── */

.cta-final__offer {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-card);
  padding: 40px;
  margin-bottom: 32px;
  text-align: left;

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(8, 6, 12, 0.92), rgba(8, 6, 12, 0.92)) padding-box,
    linear-gradient(135deg,
      rgba(255,255,255,0.70) 0%, rgba(200,200,230,0.25) 25%,
      rgba(120,120,160,0.08) 50%, rgba(200,200,230,0.20) 75%,
      rgba(255,255,255,0.65) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 6px 28px rgba(0, 0, 0, 0.40);
}

/* Lueur orange-rouge — haut gauche */
.cta-final__offer::before {
  content: '';
  position: absolute;
  top: -70px;
  left: -70px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(220, 75, 20, 0.46) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* Lueur bleu-violet — bas droite */
.cta-final__offer::after {
  content: '';
  position: absolute;
  bottom: -70px;
  right: -70px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(40, 100, 255, 0.42) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.cta-final__offer > * {
  position: relative;
  z-index: 1;
}

.cta-final__offer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 40px;
  align-items: center;
}

/* Séparateur vertical 80 % */
.cta-final__offer-divider {
  width: 1px;
  height: 80%;
  align-self: center;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.14) 20%,
    rgba(255, 255, 255, 0.14) 80%,
    transparent 100%
  );
}

.cta-final__offer-includes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cta-final__offer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
}

.cta-final__offer-item-icon {
  color: var(--accent-cyan);
  font-size: 14px;
  flex-shrink: 0;
}

.cta-final__offer-pricing {
  text-align: center;
}

.cta-final__offer-original {
  font-size: 15px;
  color: #ff5050;
  text-decoration: line-through;
  text-decoration-color: #ff5050;
  margin-bottom: 8px;
  font-weight: 600;
}

.cta-final__offer-price {
  font-size: 60px;
  font-weight: 800;
  background: linear-gradient(135deg, #F5C88A 0%, #ECA0C0 35%, #C4A8E8 65%, #A0B8F0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 6px;
}

.cta-final__offer-fcfa {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
  background: var(--heading-silver);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-final__offer-note {
  font-size: 12px;
  color: var(--text-muted);
}

/* CTA button */
.cta-final__btn {
  font-size: 18px !important;
  padding: 20px 56px !important;
  margin-bottom: 16px;
}

.cta-final__guarantee {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Mobile */
@media (max-width: 768px) {
  .cta-final__offer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cta-final__offer-divider {
    width: 80%;
    height: 1px;
    align-self: auto;
    margin: 0 auto;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(255, 255, 255, 0.14) 20%,
      rgba(255, 255, 255, 0.14) 80%,
      transparent 100%
    );
  }

  .cta-final__offer-pricing {
    padding-top: 8px;
  }

  .countdown__item {
    min-width: 70px;
    padding: 14px 16px;
  }

  .countdown__value {
    font-size: 28px;
  }

  .countdown__sep {
    display: none;
  }

  .cta-final__btn {
    font-size: 16px !important;
    padding: 16px 36px !important;
    width: 100%;
  }
}