/* css/components/cta.css
   Composant CTA final partagé — utilisé sur toutes les pages avec une
   section .cta-final (accueil, à propos, services, réalisations, cas
   clients, recrutement). */

.cta-final {
    background: var(--color-white);
    padding: 0 0 clamp(64px, 9vw, 120px);
}

.cta-final > .container {
    padding-top: 100px;
}

.cta-card {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(135deg, #1d3f71, #12233f);
    border: 1px solid color-mix(in srgb, var(--color-blue-light) 20%, transparent);
    padding: clamp(40px, 6vw, 72px);
    box-shadow: 0 30px 80px color-mix(in srgb, var(--color-bg-main) 25%, transparent);
}

.cta-glow {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-orange) 28%, transparent), transparent 65%);
    filter: blur(30px);
    top: -120px;
    right: -60px;
}

.cta-inner {
    position: relative;
}

.cta-inner h2 {
    font-family: var(--font-primary);
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--color-white);
    margin-bottom: var(--space-3);
}

.cta-inner p {
    color: var(--color-text-secondary);
    max-width: 560px;
    margin: 0 auto var(--space-6) auto;
}

/* Le bouton .btn reste défini par chaque page (base réutilisée par
   d'autres boutons hors CTA) ; ici on aligne uniquement sa typographie
   dans le contexte du CTA sur la page de référence (services.html). */
.cta-final .btn {
    font-size: var(--text-base);
    letter-spacing: normal;
    text-transform: none;
}

.btn-white {
    background: var(--gradient-orange);
    color: var(--color-white);
    box-shadow: var(--shadow-orange);
}

.btn-white:hover {
    background: var(--gradient-orange);
    color: var(--color-white);
    transform: translateY(-2px);
}