/* Bande CTA pleine largeur — fond teal, boutons pill (outline + terracotta) */

.cta-band {
    padding: clamp(2.75rem, 6vw, 4rem) 0;
    background: linear-gradient(
        165deg,
        var(--color-primary-dark, #102a2c) 0%,
        var(--color-primary, #0a4548) 55%,
        var(--color-primary-light, #147a7f) 100%
    );
}

.cta-band__inner {
    max-width: 42rem;
    margin-inline: auto;
}

.cta-band__title {
    margin: 0 0 1rem;
    font-family: var(--font-heading);
    font-size: clamp(1.65rem, 3.5vw, 2.35rem);
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    text-wrap: balance;
}

.cta-band__description {
    margin: 0 auto 1.75rem;
    max-width: 38rem;
    font-size: clamp(1rem, 1.8vw, 1.08rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem 1rem;
}

.cta-band__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.85rem 1.35rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.25;
    text-align: center;
    border: 2px solid transparent;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.cta-band__btn:focus-visible {
    outline: 3px solid var(--color-accent, #e8b923);
    outline-offset: 3px;
}

.cta-band__btn--outline {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.72);
}

.cta-band__btn--outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    transform: translateY(-1px);
}

.cta-band__btn--solid {
    color: #fff;
    background: var(--color-secondary-brand, #d36b42);
    border-color: var(--color-secondary-brand, #d36b42);
    box-shadow: 0 8px 22px rgba(10, 27, 29, 0.18);
}

.cta-band__btn--solid:hover {
    background: var(--color-secondary, #b85d38);
    border-color: var(--color-secondary, #b85d38);
    transform: translateY(-1px);
}

@media (max-width: 720px) {
    .cta-band__actions {
        flex-direction: column;
        align-items: stretch;
        max-width: 22rem;
        margin-inline: auto;
    }

    .cta-band__btn {
        width: 100%;
    }
}

/* ── Variante avec image de fond — même style que les sections "Engagement" ─────
   Photo + voile teal (rgba) pour conserver un texte blanc parfaitement lisible. */
#ej-inscription-cta.cta-band {
    position: relative;
    background-color: var(--color-primary-dark, #102a2c);
    background-image:
        linear-gradient(135deg, rgba(9, 38, 42, 0.88), rgba(10, 69, 72, 0.72)),
        url('/images/poles/enfance-jeunesse/galerie/mercredis-vacances-collectif.webp');
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    padding-block: clamp(3.5rem, 8vw, 5.5rem);
}