/* =============================================
   Intro + CTA — Landing
   ============================================= */

/* Fond TRANSPARENT (pas blanc) : c'est ce qui laisse apparaître le blob en
   dessous, exactement comme .flexible-trajectoires. Un fond blanc opaque le
   masquerait entièrement quelle que soit son opacité à lui. Pas d'overflow:
   hidden non plus, pour qu'il puisse déborder visuellement jusque dans la
   section suivante (.flexible-equipe) — seul .flexible-landing (overflow:
   clip) borne réellement le débordement, comme pour le blob global. */
.flexible-intro-cta {
    position: relative;
    background: transparent;
    padding: 64px 20px;
}

/* Fond décoratif (même principe que .flexible-landing__bkg / .flexible-project__bkg :
   bkg.svg en fondu diagonal). Volontairement grand et positionné en z-index
   négatif pour rester visible depuis le texte jusqu'à descendre sur la
   grille de cartes de la section "Sur place" qui suit. */
.flexible-intro-cta__bkg {
    position: absolute;
    top: -8%;
    left: -12%;
    width: 1300px;
    max-width: 90%;
    height: 1500px;
    /* cover (pas auto) : l'image source (~1.08:1) n'est pas assez haute pour
       descendre naturellement sur toute cette hauteur sans se déformer. */
    object-fit: cover;
    object-position: top;
    opacity: 0.45;
    pointer-events: none;
    z-index: -1;
    -webkit-mask-image: linear-gradient(to bottom right, black 40%, transparent 78%);
    mask-image: linear-gradient(to bottom right, black 40%, transparent 78%);
}

.flexible-intro-cta__inner {
    position: relative;
    z-index: 1;
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Rendu "iso" avec la saisie : le champ ACF est un textarea brut passé dans
   nl2br() (pas un wysiwyg TinyMCE, qui réinterprète les retours à la ligne
   en paragraphes avec leur propre marge). Chaque Entrée devient un <br> —
   correspondance 1:1 avec ce qui est tapé dans le BO, y compris les lignes
   vides entre "paragraphes". */
.flexible-intro-cta__texte {
    width: 100%;
    text-align: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--color-navy);
}

/* Classe à utiliser dans le WYSIWYG (onglet Texte) pour passer un mot/groupe
   de mots en bleu, ex. <span class="flexible-text-blue">Sylius</span>.
   Réutilisable dans toute autre section (non scopée à .flexible-intro-cta). */
.flexible-text-blue {
    color: var(--color-blue);
    font-weight: 700;
}

.flexible-intro-cta__cta {
    display: flex;
    justify-content: center;
}

/* Bouton identique au CTA du Hero (même principe : fond bleu, radius du
   thème, flèche en masque SVG) — seul le contenu change. */
.flexible-intro-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;
    transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}

.flexible-intro-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-intro-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-intro-cta {
        padding: 56px 24px;
    }

    .flexible-intro-cta__texte {
        font-size: 18px;
    }
}

/* ── Mobile ─────────────────────────────────── */

@media (max-width: 640px) {
    .flexible-intro-cta {
        padding: 40px 20px;
    }

    .flexible-intro-cta__bkg {
        display: none;
    }

    .flexible-intro-cta__inner {
        gap: 28px;
    }

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

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