/**
 * typography.css — Typographie globale
 * Hors-Champ Studio 3.0
 *
 * Source : reset.css (section RESET STYLES DES TITRES) du thème Kadence-child-2.0
 * Toutes les valeurs référencent les tokens de tokens.css
 */

/* ──────────────────────────────────────────────
   TITRES
────────────────────────────────────────────── */

h1 {
    font-family: var(--font-serif) !important;
    font-size: var(--text-4xl) !important;      /* 4em / 64px */
    font-weight: var(--weight-regular) !important;
    line-height: var(--leading-tight) !important;
    letter-spacing: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

h2 {
    font-family: var(--font-sans) !important;
    font-size: var(--text-3xl) !important;      /* 3em / 48px */
    font-weight: var(--weight-medium) !important;
    line-height: var(--leading-tight) !important;
    letter-spacing: var(--tracking-tight) !important;
    text-wrap: balance;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

h3 {
    font-family: var(--font-sans) !important;
    font-size: var(--text-lg) !important;       /* 1.5em / 24px */
    font-weight: var(--weight-semi) !important;
    line-height: 1.4em !important;
    letter-spacing: var(--tracking-tight) !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

h4 {
    font-family: var(--font-serif) !important;
    font-size: 1.2em !important;
    font-weight: var(--weight-medium) !important;
    line-height: 1.4 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

h5 {
    font-family: var(--font-sans) !important;
    font-size: var(--text-base) !important;     /* 1em / 16px */
    font-weight: var(--weight-regular) !important;
    line-height: var(--leading-normal) !important;
    letter-spacing: var(--tracking-tight) !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

h6 {
    font-family: var(--font-sans) !important;
    font-size: var(--text-base) !important;     /* 16px */
    font-weight: var(--weight-medium) !important;
    line-height: var(--leading-normal) !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* ──────────────────────────────────────────────
   CORPS DE TEXTE
────────────────────────────────────────────── */

p {
    font-family: var(--font-sans) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--weight-regular) !important;
    line-height: 1.5em !important;
    margin-bottom: 0 !important;
    text-wrap: pretty;
}

span {
    font-family: var(--font-sans) !important;
    font-size: var(--text-base) !important;
    font-weight: var(--weight-regular) !important;
    line-height: var(--leading-tight) !important;
    letter-spacing: var(--tracking-tight) !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ──────────────────────────────────────────────
   TYPO RESPONSIVE — TABLETTES (≤ 1024px)
────────────────────────────────────────────── */

@media screen and (max-width: 1024px) {
    h1 { font-size: var(--text-3xl) !important; }   /* 3em / 48px */
    h2 { font-size: var(--text-2xl) !important; }   /* 2.5em / 40px */
    h3 { font-size: 1.3em !important; }
    h4 { font-size: 1.1em !important; }
}

/* ──────────────────────────────────────────────
   TYPO RESPONSIVE — SMARTPHONES (≤ 768px)
────────────────────────────────────────────── */

@media screen and (max-width: 768px) {
    h1 { font-size: var(--text-2xl) !important; }   /* 2.5em / 40px */
    h2 { font-size: var(--text-xl) !important; }    /* 2em / 32px */
    h3 { font-size: 1.25em !important; }
    h4 { font-size: 1.1em !important; }
    h5 { font-size: 0.95em !important; }

    p, span {
        font-size: 0.95em !important;
        line-height: var(--leading-relaxed) !important;
    }
}

/* ──────────────────────────────────────────────
   TYPO RESPONSIVE — PETITS SMARTPHONES (≤ 480px)
────────────────────────────────────────────── */

@media screen and (max-width: 480px) {
    h1 { font-size: var(--text-xl) !important; }    /* 2em / 32px */
    h2 { font-size: 1.75em !important; }
    h3 { font-size: 1.15em !important; }
    h4 { font-size: var(--text-base) !important; }
}