:root {

    --font-size-eyebrow: calc(12px + (14 - 12) * ((100vw - 320px) / (1920 - 320)));
    --font-size-title: calc(25px + (45 - 25) * ((100vw - 320px) / (1920 - 320)));

}

/* ============================================================
   Section Heading — styles partagés entre tous les blocs
   qui affichent un en-tête : eyebrow + titre + description.
   Chargé via le handle 'hello-child-section-heading'.
   ============================================================ */

.section-heading {
    font-family: var(--primary-font), sans-serif;
    margin-bottom: var(--gap-xl);
    text-align: center;
}

.section-heading__eyebrow {
    font-size: var(--font-size-eyebrow);
    font-weight: 500;
    color: var(--color-secondary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 12px;
}

.section-heading__title {
    font-size: var(--font-size-title);
    font-weight: 200;
    color: var(--color-primary);
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0 0 var(--gap-s);
}

/* La partie italique du titre est dans un <em> */

.section-heading__title em {
    font-style: italic;
    font-weight: 400;
}

/* [highlight]...[/highlight] → couleur primaire */
.section-heading__title-highlight {
    color: var(--color-primary);
}

.section-heading__description {
    font-size: 1rem;
    line-height: 1.65;
    max-width: 640px;
    margin: 0 auto;
    opacity: 0.75;
}

.section-heading--left {
    text-align: left;
}

.section-heading--left .section-heading__description {
    margin: 0;
}