/* ==========================================================================
   Epsylon Tools — CTA EPSYLON
   Composant visuel partagé pour les CTA vers epsylon-cie.fr
   Utilisé dans les outils du paquet "funnel" (facture, devis, TVA…)
   ========================================================================== */

.epsylon-cta {
  margin: 40px 0 20px;
  padding: 28px 28px;
  background: linear-gradient(135deg, var(--glow), var(--glow2));
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

.epsylon-cta::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--glow2) 0%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}

.epsylon-cta .ec-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  position: relative;
}

.epsylon-cta .ec-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.epsylon-cta .ec-badge .dot {
  width: 6px; height: 6px;
  background: #22c55e;
  border-radius: 50%;
  animation: ec-pulse 2s ease infinite;
}
@keyframes ec-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.epsylon-cta h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 10px;
  position: relative;
}

.epsylon-cta p {
  color: var(--text2);
  font-size: .94rem;
  line-height: 1.65;
  margin-bottom: 18px;
  position: relative;
  max-width: 640px;
}

.epsylon-cta p strong {
  color: var(--text);
  font-weight: 600;
}

.epsylon-cta .ec-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}

.epsylon-cta .ec-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  transition: all .18s cubic-bezier(.4,0,.2,1);
  border: none;
  cursor: pointer;
}
.epsylon-cta .ec-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.3);
}
.epsylon-cta .ec-btn::after {
  content: '→';
  display: inline-block;
  transition: transform .18s;
  font-weight: 400;
}
.epsylon-cta .ec-btn:hover::after {
  transform: translateX(3px);
}

.epsylon-cta .ec-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: .88rem;
  transition: color .15s;
}
.epsylon-cta .ec-link:hover { color: var(--accent2); }

.epsylon-cta .ec-features {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: .8rem;
  color: var(--text2);
  position: relative;
}
.epsylon-cta .ec-features span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.epsylon-cta .ec-features span::before {
  content: '✓';
  color: #22c55e;
  font-weight: 700;
}

/* Variante "atelier" : bord violet au lieu de cyan */
.epsylon-cta.atelier {
  border-color: var(--accent2);
  background: linear-gradient(135deg, var(--glow2), var(--glow));
}

/* Mobile */
@media (max-width: 600px) {
  .epsylon-cta { padding: 22px 20px; margin: 32px 0 16px; }
  .epsylon-cta h3 { font-size: 1.1rem; }
  .epsylon-cta p { font-size: .88rem; }
  .epsylon-cta .ec-btn { width: 100%; justify-content: center; }
  .epsylon-cta .ec-actions { flex-direction: column; align-items: stretch; }
  .epsylon-cta .ec-link { text-align: center; }
}