/**
 * Styles pour la Section CTA Bannière
 */

 .cta-banner-section {
    /* Rôle structurel, peut avoir des marges externes */
    margin-bottom: var(--space-6, 2rem); /* Exemple d'espacement entre sections */
}

/* La div intérieure porte les styles visuels */
.cta-banner-inner {
    border-radius: var(--border-radius-xl, 24px); 
    padding: var(--space-9, 3rem); /* Padding ajusté */
    transition: background-color var(--transition-duration-default, 0.2s) var(--transition-timing-default, ease-in-out);
    /* Le background-color est défini par les variantes */
}

/* Utilisation de Flexbox pour aligner texte et bouton */
.cta-banner-content {
    display: flex;
    align-items: center; /* Alignement vertical au centre */
    justify-content: space-between; /* Espace maximal entre texte et bouton */
    gap: var(--space-6, 2rem); /* Espace entre texte et bouton si l'espace manque */
    flex-wrap: wrap; /* Permet au bouton de passer en dessous sur petit écran */
    flex-shrink: 0; /* Empêche le bouton de rétrécir */
}

.cta-banner-text {
    flex: 1; /* Permet au texte de prendre l'espace disponible */
    min-width: 250px; /* Empêche le texte de devenir trop écrasé */
}


.cta-banner-subtitle {
    /* La couleur sera définie par la variante */
    margin: 0;
    /* max-width: 450px; /* Suppression de la limite de largeur */
}

.cta-banner-action {
    flex-shrink: 0; /* Empêche le bouton de rétrécir */
}



/* -- Variante Light -- */
.cta-banner-inner.cta-banner--light {
    background-color: var(--color-light);
}

.cta-banner-inner.cta-banner--light .cta-banner-text .title-200,
.cta-banner-inner.cta-banner--light .cta-banner-text .cta-banner-subtitle {
    color: var(--color-text-default); /* Texte foncé sur fond clair */
}


/* -- Variante Primaire (Vert Clair) -- */
.cta-banner-inner.cta-banner--primary {
    background-color: var(--primary);
}

.cta-banner-inner.cta-banner--primary .cta-banner-text .title-200,
.cta-banner-inner.cta-banner--primary .cta-banner-text .cta-banner-subtitle {
    color: var(--color-text-default); /* Texte foncé sur fond clair */
}
/* Bouton: btn-primary par défaut */



/* -- Variante Secondary -- */
.cta-banner-inner.cta-banner--secondary {
    background-color: var(--secondary);
}

.cta-banner-inner.cta-banner--secondary .cta-banner-text .title-200 {
    color: var(--color-text-inverted, var(--white));
}

.cta-banner-inner.cta-banner--secondary .cta-banner-text .cta-banner-subtitle {
    color: var(--color-text-inverted-muted, rgba(255, 255, 255, 0.8));
}
/* Bouton: btn-secondary recommandé */


/* -- Variante tertiary -- */
.cta-banner-inner.cta-banner--tertiary {
    background-color: var(--tertiary);
}

.cta-banner-inner.cta-banner--tertiary .cta-banner-text .title-200,
.cta-banner-inner.cta-banner--tertiary .cta-banner-text .cta-banner-subtitle {
    color: var(--color-text-default, var(--gray-900));
}
/* Bouton: btn-primary par défaut */


/* -- Variante Dark -- */
.cta-banner-inner.cta-banner--dark {
    background-color: var(--color-dark);
}

.cta-banner-inner.cta-banner--dark .cta-banner-text .title-200,
.cta-banner-inner.cta-banner--dark .cta-banner-text .cta-banner-subtitle {
    color: var(--color-text-inverted);
}
/* Bouton: btn-primary par défaut */


/* --- Responsive --- */
@media (max-width: 640px) {
    .cta-banner-content {
        flex-direction: column; /* Empiler texte et bouton */
        align-items: flex-start; /* Aligner à gauche */
        text-align: left; /* S'assurer que le texte est aligné à gauche */
    }

    .cta-banner-action {
        margin-top: var(--space-5, 1.5rem);
        width: 100%; /* Optionnel: bouton pleine largeur */
    }
    .cta-banner-action .btn {
         width: 100%; /* Optionnel: bouton pleine largeur */
    }
    
    /* Ajuster le padding de l'inner sur mobile */
    .cta-banner-inner {
        padding: var(--space-5, 1.5rem); /* Padding ajusté pour mobile */
    }
}