/* assets/css/typography.css — Eneryon redesign v2
 * Web fonts self-hosted + base typography rules + utilities
 * Référence : spec §4.1, §4.2, §4.2.bis (affinements #1, #3, #4, #5)
 */

/* ═══ Web fonts ═══ */
@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/newsreader-roman-var.woff2") format("woff2-variations"),
         url("/assets/fonts/newsreader-roman-var.woff2") format("woff2");
}
@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/newsreader-italic-var.woff2") format("woff2-variations"),
         url("/assets/fonts/newsreader-italic-var.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* ═══ Base ═══ */
html { font-size: 16px; }
body {
    font-family: var(--ff-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ═══ Headings (Newsreader, weight 500 — affinement #5) ═══ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-serif);
    color: var(--c-ink);
    margin: 0;
    letter-spacing: var(--ls-tight);
    font-weight: 500;
}
h1 {
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display); /* affinement #3 : -1.4px */
}
h2 {
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-h2); /* -1.0px */
}
h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); }

/* Italique accent uniquement sur fragments de titres */
h1 em, h2 em, h3 em {
    font-style: italic;
    color: var(--c-accent);
    font-weight: 500;
}

/* ═══ Body ═══ */
p { margin: 0; }
.lede {
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    color: var(--c-text);
    max-width: 720px; /* lisibilité — ~65 chars/ligne */
}

/* ═══ Liens ═══ */
a {
    color: var(--c-ink);
    text-decoration: underline;
    text-decoration-color: var(--c-accent);
    text-underline-offset: 3px;
}
a:hover { color: var(--c-accent); }

/* ═══ Utility .key — highlight inline (signature E3) ═══ */
.key {
    font-family: var(--ff-serif);
    font-style: italic;
    font-weight: 600;
    color: var(--c-accent);
    font-feature-settings: "tnum"; /* affinement #1 : tabular numerals */
}

/* ═══ Utility .accent ═══ */
.accent { color: var(--c-accent); }

/* ═══ Utility .meta-strip ═══ */
.meta-strip {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    font-weight: 500;
}

/* ═══ Utility .section-tag (composant 13) ═══ */
.section-tag {
    display: block;
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--c-accent);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
    margin-bottom: var(--space-3);
}
.section-tag::before { content: "— "; }

/* ═══ Source line ═══ */
.section-sources {
    font-family: var(--ff-mono);
    font-size: var(--fs-xs);
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    margin-top: var(--space-3);
}

/* ═══ Selection ═══ */
::selection { background: var(--c-accent-soft); color: var(--c-ink); }