/* Bande finale d'appel à l'action (partiel public/_cta_band.html.twig) : texte à gauche, bouton à
   droite en grand écran. En fond, sur le côté droit, un dessin au trait (sujet de la page) sous un halo
   champagne : bien plus grand que le bouton, rogné par la section et très estompé, pour se lire comme une
   texture ; à la taille du bouton, il semblait cadré autour de lui (utilisateur, 26/09/2026). */
.cta-band {
    overflow: hidden;
    border-top: 1px solid var(--rule);
}

.cta-band__art {
    position: absolute;
    top: 50%;
    right: -10rem;
    z-index: -1;
    width: min(52rem, 65vw);
    height: auto;
    translate: 0 -46%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--color-champagne) 7%, transparent), transparent);
    fill: none;
    stroke: color-mix(in srgb, var(--color-champagne) 11%, transparent);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.cta-band__dash {
    stroke-dasharray: 2 10;
}

.cta-band__inner {
    position: relative;
    display: grid;
    gap: var(--space-6);
    justify-items: start;
}

.cta-band h2 {
    max-width: 44rem;
    text-wrap: balance;
}

.cta-band .text-lead {
    max-width: var(--measure);
}

@media (min-width: 56rem) {
    /* Le bouton au milieu de sa zone, en largeur comme en hauteur, et non collé au bord droit. */
    .cta-band__inner {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--space-9);
    }

    .cta-band__inner > .btn {
        justify-self: center;
    }
}

/* Mobile et tablette (bouton sous le texte) : tout centré (utilisateur, 25/09/2026). */
@media (max-width: 55.99rem) {
    /* Bouton centré sous le texte : pas de vide à habiter, le dessin le chargerait. */
    .cta-band__art {
        display: none;
    }

    .cta-band__inner {
        justify-items: center;
        text-align: center;
    }

    .cta-band h2,
    .cta-band .text-lead {
        margin-inline: auto;
    }
}