@charset "UTF-8";

/**
 * 02-typography.css
 * ------------------------------------------------------------------
 * Styles typographiques : titres d'affichage, étiquettes (eyebrow),
 * lede (sous-titre d'introduction). Toutes les tailles utilisent
 * clamp() pour la fluidité (CSS Values 4).
 * ------------------------------------------------------------------
 */

/* ------ Titres d'affichage ------ */
.h-display {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}

.h-hero {
    font-size: clamp(56px, 9vw, 132px);
}

.h-section {
    font-size: clamp(40px, 6vw, 80px);
}

.h-card {
    font-size: clamp(26px, 3vw, 36px);
}

/* ------ Étiquette préfixe (eyebrow) ------ */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--marine-soft);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

/* ------ Lede : paragraphe d'introduction ------ */
.lede {
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.45;
    color: var(--ink-soft);
    max-width: 56ch;
}