/* En-tête de section (composant SectionHeader) : libellé, titre et, sur ordinateur, texte d'introduction à droite. */

.section-header {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

@media (min-width: 960px) {
    .section-header {
        grid-template-columns: 1.1fr 1fr;
        align-items: end;
        gap: var(--space-16);
        margin-bottom: var(--space-12);
    }
}

.section-header__title {
    margin-top: var(--space-3);
    font-size: clamp(var(--text-2xl), 2.4vw + 1rem, var(--text-4xl));
    line-height: var(--leading-tight);
}

.section-header__lead {
    font: var(--type-body-lg);
    color: var(--text-secondary);
}

.section--inverse .section-header__lead {
    color: var(--steel-300);
}