/* ==================================================
   BLOC — CTA EN BANDE

   Une seule action en fin de page. Le fond couvre toute
   la largeur : pas de carte posée dedans, c'est la bande
   elle-même. Mesures relevées sur la maquette.
================================================== */

.cta_bande {
    padding: 56px 0;
}

.cta_bande--jaune     { background: var(--v-fond-alerte-douce); }
.cta_bande--turquoise { background: var(--v-fond-section); }

.cta_bande > .container {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: var(--v-contenu);
    padding-left: 64px;
    padding-right: 64px;
}

.cta_bande__icone {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--v-radius-pill);
    background: var(--v-blanc);
    font-size: 1.625rem;
    /* L'icône reprend l'orange d'action : c'est le seul point vif de
       la bande, il doit désigner le geste attendu. */
    color: var(--v-action-cta);
}

.cta_bande__texte {
    flex: 1 1 auto;
}

.cta_bande__titre {
    margin: 0 0 10px;
    font-size: 1.875rem;
    color: var(--v-texte-titre);
}

.cta_bande__accroche {
    margin: 0;
    font-family: var(--v-font-corps);
    font-size: 0.9375rem;
    line-height: var(--v-lh-corps);
    color: var(--v-texte-meta);
}

/* Une seule action : le bouton est plus généreux qu'ailleurs. */
.cta_bande__bouton {
    flex: 0 0 auto;
    padding: 16px 26px;
    font-size: 0.9375rem;
}

@media (max-width: 991px) {
    .cta_bande > .container {
        padding-left: var(--v-gouttiere);
        padding-right: var(--v-gouttiere);
    }
}

@media (max-width: 767px) {
    .cta_bande {
        padding: 40px 0;
    }
    .cta_bande > .container {
        flex-wrap: wrap;
        gap: 20px;
        padding-left: var(--v-gouttiere-mobile);
        padding-right: var(--v-gouttiere-mobile);
    }
    .cta_bande__titre { font-size: 1.5rem; }
}