/*
 * Typographie - imports Google Fonts + styles de tete.
 *
 * Pairing editorial :
 *  - Fraunces (serif, variable : SOFT, WONK, opsz, wght) : reservee aux
 *    titres display (hero, ponctuations editoriales). Caractere luxe,
 *    italiques puissants, optical size integre.
 *  - Bricolage Grotesque (sans, variable : wght, wdth, opsz) : partout
 *    ailleurs - body, H2-H6, kickers, meta, UI.
 *
 * Deux familles seulement, aucune convergence vers Inter/Manrope/Poppins.
 * Le contraste serif-italique / grotesque-regular donne le caractere
 * "editorial premium" signature.
 */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,200..900,0..100,0..1;1,9..144,200..900,0..100,0..1&display=swap');

:root {
    --font-sans:    "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
    --font-display: "Fraunces", "Didot", "Bodoni 72", Georgia, serif;
}

/* Classes utilitaires typographiques */

.t-kicker {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
}

/* Signature : numerotation de section en fuchsia */
.t-kicker__number {
    color: var(--color-accent);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

/* Display : Fraunces, typo editoriale signature */
.t-display {
    font-family: var(--font-display);
    font-size: var(--fs-5xl);
    font-weight: 320;
    font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
    letter-spacing: -0.035em;
    line-height: 0.9;
    text-wrap: balance;
}

.t-hero {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 340;
    font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
    letter-spacing: -0.03em;
    line-height: 0.96;
    text-wrap: balance;
}

/* Emphase italique Fraunces - pour les mots cles (ex: "sur mesure") */
.t-em {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
    font-weight: 300;
}

.t-h2 {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-regular);
    font-variation-settings: "wght" 420, "wdth" 98;
    letter-spacing: var(--tracking-tight);
    line-height: 0.96;
    text-wrap: balance;
}

.t-h3 {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-medium);
    letter-spacing: -0.025em;
    line-height: 1.05;
    text-wrap: balance;
}

.t-h4 {
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.t-body {
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    letter-spacing: var(--tracking-normal);
    text-wrap: pretty;
}

.t-body-lg {
    font-size: var(--fs-lg);
    line-height: 1.55;
    letter-spacing: -0.01em;
}

.t-meta {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.t-small {
    font-size: var(--fs-xs);
    color: var(--color-text-subtle);
    line-height: 1.4;
}

/* Chiffres tabulaires pour alignement colonne */
.t-tabular {
    font-variant-numeric: tabular-nums;
}

/* Balancement automatique des titres sur navigateurs modernes */
h1, h2, h3, .t-display, .t-hero, .t-h2 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}