/* Bande d'appel a l'action : un seul point de conversion par page.
   Disposition horizontale, volontairement basse : le message tient sur deux
   lignes a gauche, le bouton se tient a droite. Sur mobile, tout s'empile et
   se centre. Les boutons eux-memes sont definis dans ui.css. */

.cta-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    /* Les trois lignes (titre, phrase, adresse) sont declarees
       EXPLICITEMENT : sans cela, le `grid-row: 1 / -1` du bouton ne trouve
       pas de derniere ligne a atteindre et retombe sur la premiere, ce qui
       le collait en haut au lieu de le centrer. */
    grid-template-rows: repeat(3, auto);
    column-gap: 34px;
    align-items: center;
    margin: 48px auto 24px;
    padding: 20px 26px;
    border-radius: var(--r-lg);
    text-align: left;
    box-shadow: var(--shadow-2);
    background:
        radial-gradient(115% 150% at 6% 0%, rgba(90, 166, 255, 0.2) 0%, rgba(90, 166, 255, 0) 60%),
        linear-gradient(135deg, #0C2851 0%, #0A2145 58%, #081B39 100%);
}

.cta-band h2 {
    grid-column: 1;
    margin: 0 0 3px;
    text-align: left;
    font-size: 1.14em;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #FFFFFF;
}

.cta-band > p {
    grid-column: 1;
    margin: 0;
    /* Pas de max-width : la colonne de la grille borne deja la ligne, et une
       limite plus etroite ferait repasser la phrase sur deux lignes. */
    color: #AFC5E4;
    font-size: 0.93em;
    line-height: 1.55;
}

/* Le bouton occupe la colonne de droite sur toute la hauteur. */
.cta-band p:has(.cta-button) {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    max-width: none;
}

/* Ligne de repli : le texte et la pastille « copier » sont alignes par leur
   milieu et non par la ligne de base, sinon la pastille (plus haute que le
   texte) flotte legerement bas. Le defaut se voyait surtout en anglais. */
.cta-band .cta-alt {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    color: #7E96BC;
    font-size: 0.86em;
}

.cta-band noscript {
    grid-column: 1;
}

.cta-band .cta-alt a,
.cta-band .cta-alt .email-link {
    color: #6FB0FF;
    font-weight: 500;
}

.cta-band .cta-alt .email-link {
    pointer-events: none;
    cursor: default;
}

@media (max-width: 720px) {
    .cta-band {
        grid-template-columns: 1fr;
        row-gap: 14px;
        text-align: center;
        padding: 26px 20px 24px;
    }

    .cta-band h2,
    .cta-band > p {
        text-align: center;
        max-width: none;
    }

    .cta-band p:has(.cta-button) {
        grid-column: 1;
        grid-row: auto;
    }

    .cta-band .cta-alt {
        justify-content: center;
        margin-top: 0;
    }
}