/* Disposition "Bloc" de section_cta.inc.php — bandeau compact façon
   Maquette_Utah.html (.contact/.contact-box/.contact-intro/.benefits/.benefit),
   classes propres au projet (préfixe uw-cta-bloc-), valeurs et breakpoints
   copiés à l'identique. Chargé uniquement quand cette disposition est active
   (voir assets_register.inc.php).
   Fond fixe (var(--night), déjà défini dans uw-core.css) : élément de design
   ponctuel de la maquette, pas une couleur configurable côté client.
   .benefit svg (maquette) -> <i> FontAwesome ici : pas d'équivalent SVG
   backoffice-configurable pour cette icône décorative. */

.uw-cta-bloc-section {
    padding: 100px 0;
}

.uw-cta-bloc {
    display: flex;
    align-items: center;
    gap: 27px;

    border-radius: 20px;
    padding: 31px;

    background: radial-gradient(ellipse at right, #16202e, var(--night, #0a111c));

    color: #fff;
}

.uw-cta-bloc-intro {
    flex: 1.8;
}

.uw-cta-bloc-intro h2 {
    color: #fff;

    font-size: 28px;
}

.uw-cta-bloc-intro p {
    margin-top: 12px;
    max-width: 400px;

    color: #d9dde4;

    font-size: 15px; /* texte courant 15px / 1.7 (maquette), avant 13px */
    line-height: 1.7;
}

.uw-cta-bloc-benefits {
    display: flex;
    gap: 23px;

    flex: 2;
}

.uw-cta-bloc-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.uw-cta-bloc-benefit i {
    width: 25px;
    height: 25px;
    line-height: 25px;

    color: var(--couleur);

    font-size: 21px;
    text-align: center;
}

.uw-cta-bloc-benefit strong {
    display: block;

    font-size: 11px;
    white-space: nowrap;
}

.uw-cta-bloc-benefit small {
    display: block;

    color: #aeb6c3;

    font-size: 10px;
    white-space: nowrap;
}

.uw-cta-bloc-btn {
    gap: 13px;

    font-size: 12px;
    white-space: nowrap;
}


@media (max-width: 1150px) {
    .uw-cta-bloc {
        flex-wrap: wrap;
    }

    .uw-cta-bloc-intro {
        flex-basis: 100%;
    }
}

@media (max-width: 800px) {
    .uw-cta-bloc {
        padding: 26px;
    }

    .uw-cta-bloc-benefits {
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .uw-cta-bloc-benefits {
        flex-direction: column;
        gap: 18px;
    }

    .uw-cta-bloc-benefit strong {
        font-size: 12px;
    }

    .uw-cta-bloc-benefit small {
        font-size: 11px;
    }

    .uw-cta-bloc-intro h2 {
        font-size: 25px;
    }

    .uw-cta-bloc-btn {
        padding: 14px;
    }
}