/* =============================================
   CTA seul & Texte + CTA — Landing Sylius
   Bouton partagé par les deux sections ; le texte de "Texte + CTA" suit
   la même police/taille/couleur par défaut que le reste de la landing
   (Enjeux, Expertise, Comparatif, Image + Texte : Manrope, 22px desktop /
   18px tablette-mobile, --color-gray-medium) — modifiable section par
   section via le champ, qui reste un simple textarea.
   ============================================= */

.flexible-cta-seul,
.flexible-texte-cta {
    /* Horizontal déplacé sur .inner (cf. ci-dessous) : le padding doit vivre
       sur l'inner comme les autres sections, pas sur le wrapper de section. */
    padding: 60px 0;
}

/* 1 à 3 boutons : une rangée centrée avec retour à la ligne automatique
   s'adapte au nombre sans réglage différent selon qu'il y en a 1, 2 ou 3. */
.flexible-cta-seul__inner {
    max-width: 1100px;
    margin: 0 auto;
    /* Même gouttière que les autres sections sans image (--flexible-noimg-pad-x,
       cf. flexible-landing.css) ; max-width volontairement plus étroit que le
       partagé --flexible-noimg-max-width (1500px) — une rangée de boutons
       centrée n'a pas besoin d'être aussi large qu'un bloc de texte. */
    padding: 0 var(--flexible-noimg-pad-x);
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.flexible-cta-seul__inner--align-gauche {
    justify-content: flex-start;
}

.flexible-cta-seul__inner--align-droite {
    justify-content: flex-end;
}

/* Choix BO (cta_seul_cta_disposition) : boutons empilés en colonne plutôt
   qu'en ligne avec retour à la ligne automatique. Classes chaînées (cf. le
   même principe que .flexible-texte-cta__inner--etire ci-dessous) pour
   l'emporter sur la règle de base à spécificité égale. */
.flexible-cta-seul__inner.flexible-cta-seul__inner--disposition-colonne {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.flexible-texte-cta__inner {
    max-width: 900px;
    margin: 0 auto;
    /* Idem : même gouttière partagée, max-width propre au contenu (un texte
       centré de 1500px de large serait illisible — sauf en mode étiré
       ci-dessous, choix explicite de l'éditeur). */
    padding: 0 var(--flexible-noimg-pad-x);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

/* Choix BO (texte_cta_align) : "Étiré" fait prendre au texte toute la largeur
   de la section (comme hero/enjeux/expertise) plutôt que le bloc resserré à
   900px par défaut. Classes chaînées (.inner.inner--etire) pour l'emporter
   sur la règle ci-dessus à spécificité égale, indépendamment de l'ordre dans
   le fichier (cf. le bug déjà rencontré sur expertise). Les boutons restent
   centrés dans les deux modes : seule la largeur/alignement du texte change. */
.flexible-texte-cta__inner.flexible-texte-cta__inner--etire {
    max-width: var(--flexible-noimg-max-width);
    align-items: flex-start;
    text-align: left;
}

.flexible-texte-cta__inner--etire .flexible-texte-cta__ctas {
    width: 100%;
    justify-content: center;
}

/* 0 à 3 boutons sous le texte : même principe que .flexible-cta-seul__inner
   (rangée centrée, retour à la ligne automatique). */
.flexible-texte-cta__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* Choix BO (texte_cta_cta_disposition) : même principe que
   .flexible-cta-seul__inner--disposition-colonne ci-dessus. */
.flexible-texte-cta__ctas.flexible-texte-cta__ctas--disposition-colonne {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.flexible-texte-cta__texte {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.6;
    color: var(--color-gray-medium);
}

.flexible-texte-cta__texte .flexible-text-blue {
    color: var(--color-blue);
}

/* Bouton partagé */
.flexible-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--color-blue);
    color: var(--color-white);
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 32px;
    border-radius: var(--radius-btn);
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

/* Jauges BO hauteur/largeur (cf. cyllene_acf_cta_size_fields +
   cyllene_cta_button_style) : --cta-h/--cta-w sont des variables CSS posées
   en inline par le template, inertes tant que ces classes ne les consomment
   pas. box-sizing:border-box + padding vertical à 0 pour --sized-h : sinon
   le padding de 14px ci-dessus s'ajouterait par-dessus la hauteur choisie et
   la dépasserait. */
.flexible-cta-btn.flexible-cta-btn--sized-h {
    height: var(--cta-h);
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
}

.flexible-cta-btn.flexible-cta-btn--sized-w {
    width: var(--cta-w);
    max-width: 100%;
}

.flexible-cta-btn::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    -webkit-mask: url('../../assets/arrow-right.svg') no-repeat center / contain;
    mask: url('../../assets/arrow-right.svg') no-repeat center / contain;
    background-color: var(--color-white);
}

.flexible-cta-btn:hover {
    background-color: var(--color-blue-hover);
    color: var(--color-white);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 102, 255, 0.4);
}

/* Tablette */
@media (max-width: 1024px) {
    .flexible-texte-cta__texte {
        font-size: 18px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .flexible-cta-seul,
    .flexible-texte-cta {
        /* Horizontal porté par .inner (clamp fluide, descend déjà à 24px min) */
        padding: 40px 0;
    }

    .flexible-texte-cta__texte {
        font-size: 16px;
    }

    .flexible-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 14px;
    }

    /* Confort tactile avant tout : une jauge largeur/hauteur choisie pour le
       desktop (ex. bouton à 33% pour 3 boutons en ligne) resterait minuscule
       sur un écran de 375px si on ne la neutralisait pas explicitement ici. */
    .flexible-cta-btn.flexible-cta-btn--sized-w {
        width: 100%;
    }

    .flexible-cta-btn.flexible-cta-btn--sized-h {
        height: auto;
        padding-top: 14px;
        padding-bottom: 14px;
    }
}