/**
 * Text Intro — Introduction textuelle
 *
 * Titre h2 centre + paragraphes. Barre d'accent optionnelle (orange).
 * Reproduit l'espacement et la typographie WordPress.
 */

/* =============================================================================
   Layout
   ============================================================================= */
.text-intro {
    padding: var(--space-2xl) 0;
}

.text-intro__inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* =============================================================================
   Accent bar
   ============================================================================= */
.text-intro__accent-bar {
    width: 60px;
    height: 4px;
    background-color: var(--color-bleu);
    border-radius: 2px;
    margin: 0 auto var(--space-xl);
}

/* =============================================================================
   Title
   ============================================================================= */
.text-intro__title {
    font-size: clamp(25px, 1.563rem + ((1vw - 3.2px) * 1.769), 42px);
    font-weight: 500;
    color: var(--color-bleu);
    line-height: 1.2;
    margin-bottom: var(--space-lg);
}

.text-intro__title--orange {
    color: var(--color-bleu);
}

.text-intro__title--massive {
    font-size: clamp(42px, 2.625rem + 3vw, 86px);
    font-weight: 500;
}

/* =============================================================================
   Body paragraphs
   ============================================================================= */
.text-intro__body {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: #444;
}

.text-intro__body p + p {
    margin-top: var(--space-md);
}

/* =============================================================================
   Accent variant — optional orange top border on section
   ============================================================================= */
.text-intro--accent {
    border-top: none; /* accent bar is internal, not a border */
}

/* =============================================================================
   Decorative circle background (motif WordPress)
   ============================================================================= */
.text-intro.has-circle-bg {
    position: relative;
    overflow: hidden;
}

.text-intro.has-circle-bg .text-intro__inner {
    position: relative;
    z-index: 1;
}

.text-intro .circle-bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: min(50vw, 750px);
    pointer-events: none;
    color: #fcfbf2;
}

.text-intro .circle-bg svg {
    width: 100%;
    height: auto;
    display: block;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 768px) {
    .text-intro {
        padding: var(--space-xl) 0;
    }

    .text-intro__inner {
        text-align: left;
    }

    .text-intro__accent-bar {
        margin-left: 0;
    }
}

@media (min-width: 1024px) {
    .text-intro__body {
        font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
    }
}