/* ============================================================ TDN Typography — Semantic Layer (Phase 3 — étape 3.1) Source canonique : .claude/audits/titres-home-audit.md (Phase 2, validée 2026-05-29) Arbitrage Morgan C9 : couche sémantique au-dessus des tokens primitifs. Les patterns consomment ces vars (migration finale étape 3.6). Convention de nommage : --tdn-- Direction "moins gras + plus class" (arbitrage Morgan 2026-05-29) : - Titres H1/H2/H3 + hero Home : font-weight medium 500 (élégant éditorial) - Eyebrows : font-weight bold 700 (sobre mais lisible sur petit) - Caption uppercase (12px) : font-weight medium 500 - Body courant : weight 400 / Body lead : weight 500 (inchangés, déjà sobres) - hero-home garde capitalize 92px en weight 500 → magazine éditorial luxe Slots exposés : hero-home Hero éditorial Home (signature 92px medium capitalize) hero-page Hero pages internes (sobre 82px regular) hero-subtitle Sous-titre hero pages internes (20px max) hero-subtitle-home Sous-titre hero Home (24px signature) h2 Display H2 standard (clamp 36-60px medium) — référence majoritaire h2-lg Display H2 large (clamp 36-72px medium — cards-quad, manifesto humain) h2-sm Display H2 petit (clamp 28-48px medium — quote-founders) h2-card-up Mini titre carte CTA uppercase (signature cta-cards-double) h3 Titre carte standard (24px medium) h3-lg Titre carte large (clamp 24-36px medium — expertises item) h3-portrait Titre portrait capitalize (28px medium — founder-name, team-name) eyebrow Eyebrow standard light bg (16px bold ls wider pink-200) eyebrow-mini Mini eyebrow dark bg (12px bold ls wider pink-100) eyebrow-pill Eyebrow format pill (14px bold ls pill — case-study badge, realisations filter) body-subtitle Grand sous-titre section (24px regular) body-lead Body lead premium (18px medium) body Body standard (16px regular) caption-role Caption portrait role (18px medium capitalize — protect outlier signature) caption-role-up Caption role uppercase (12px medium ls wider) Outliers signature Home protégés (NE PAS migrer sur ces vars en étape 3.6) : - tdn-testimonials__quote : weight 700 voulu (signature témoignage) - tdn-quote-founders__founder-role : weight 500 (caption-role est dérivé de cet outlier, OK) - tdn-expertises-list__eyebrow-text : 14px ls 0.18em (outlier Home assumé) - tdn-cta-cards-double__title : uppercase (couvert par h2-card-up) - tdn-section-intro__title : line-height 0.855 (signature, garder valeur brute) ============================================================ */ :root { /* ---------- HERO ---------- */ --tdn-hero-home-family : var(--tdn-font-family-brand); --tdn-hero-home-weight : var(--tdn-font-weight-medium); --tdn-hero-home-size : clamp(56px, 7vw, 92px); --tdn-hero-home-lh : 1; --tdn-hero-home-ls : var(--tdn-letter-spacing-display); --tdn-hero-home-tt : none; --tdn-hero-page-family : var(--tdn-font-family-brand); --tdn-hero-page-weight : var(--tdn-font-weight-regular); --tdn-hero-page-size : clamp(40px, 5.7vw, 82px); --tdn-hero-page-lh : 1; --tdn-hero-page-ls : -0.073em; --tdn-hero-page-tt : none; --tdn-hero-subtitle-family : var(--tdn-font-family-brand); --tdn-hero-subtitle-weight : var(--tdn-font-weight-regular); --tdn-hero-subtitle-size : clamp(16px, 1.4vw, 20px); --tdn-hero-subtitle-lh : 1.4; --tdn-hero-subtitle-home-family : var(--tdn-font-family-brand); --tdn-hero-subtitle-home-weight : var(--tdn-font-weight-regular); --tdn-hero-subtitle-home-size : 24px; --tdn-hero-subtitle-home-lh : 1.5; --tdn-hero-subtitle-home-ls : -0.72px; /* ---------- H2 DISPLAY ---------- */ --tdn-h2-family : var(--tdn-font-family-brand); --tdn-h2-weight : var(--tdn-font-weight-medium); --tdn-h2-size : clamp(36px, 4.5vw, 60px); --tdn-h2-lh : 1.2; --tdn-h2-ls : var(--tdn-letter-spacing-tight); --tdn-h2-tt : none; --tdn-h2-lg-family : var(--tdn-font-family-brand); --tdn-h2-lg-weight : var(--tdn-font-weight-medium); --tdn-h2-lg-size : clamp(36px, 6vw, 72px); --tdn-h2-lg-lh : 1.2; --tdn-h2-lg-ls : var(--tdn-letter-spacing-tight); --tdn-h2-lg-tt : none; --tdn-h2-sm-family : var(--tdn-font-family-brand); --tdn-h2-sm-weight : var(--tdn-font-weight-medium); --tdn-h2-sm-size : clamp(28px, 4vw, 48px); --tdn-h2-sm-lh : 1.1; --tdn-h2-sm-ls : normal; --tdn-h2-sm-tt : none; --tdn-h2-card-up-family : var(--tdn-font-family-brand); --tdn-h2-card-up-weight : var(--tdn-font-weight-medium); --tdn-h2-card-up-size : clamp(24px, 2.5vw, 32px); --tdn-h2-card-up-lh : 1.5; --tdn-h2-card-up-ls : -1.28px; --tdn-h2-card-up-tt : uppercase; /* ---------- H3 / CARDS / PORTRAITS ---------- */ --tdn-h3-family : var(--tdn-font-family-brand); --tdn-h3-weight : var(--tdn-font-weight-medium); --tdn-h3-size : 24px; --tdn-h3-lh : 1.2; --tdn-h3-ls : -0.03em; --tdn-h3-tt : none; --tdn-h3-lg-family : var(--tdn-font-family-brand); --tdn-h3-lg-weight : var(--tdn-font-weight-medium); --tdn-h3-lg-size : clamp(24px, 3vw, 36px); --tdn-h3-lg-lh : 1.1; --tdn-h3-lg-ls : -0.03em; --tdn-h3-lg-tt : none; --tdn-h3-portrait-family : var(--tdn-font-family-brand); --tdn-h3-portrait-weight : var(--tdn-font-weight-medium); --tdn-h3-portrait-size : 28px; --tdn-h3-portrait-lh : 1; --tdn-h3-portrait-ls : -0.03em; --tdn-h3-portrait-tt : capitalize; /* ---------- EYEBROW ---------- */ --tdn-eyebrow-family : var(--tdn-font-family-brand); --tdn-eyebrow-weight : var(--tdn-font-weight-bold); --tdn-eyebrow-size : 16px; --tdn-eyebrow-lh : 1; --tdn-eyebrow-ls : var(--tdn-letter-spacing-wider); --tdn-eyebrow-tt : uppercase; --tdn-eyebrow-mini-family : var(--tdn-font-family-brand); --tdn-eyebrow-mini-weight : var(--tdn-font-weight-bold); --tdn-eyebrow-mini-size : 12px; --tdn-eyebrow-mini-lh : 1; --tdn-eyebrow-mini-ls : var(--tdn-letter-spacing-wider); --tdn-eyebrow-mini-tt : uppercase; --tdn-eyebrow-pill-family : var(--tdn-font-family-brand); --tdn-eyebrow-pill-weight : var(--tdn-font-weight-bold); --tdn-eyebrow-pill-size : 14px; --tdn-eyebrow-pill-lh : 1.4; --tdn-eyebrow-pill-ls : var(--tdn-letter-spacing-pill); --tdn-eyebrow-pill-tt : uppercase; /* ---------- BODY / SUBTITLE ---------- */ --tdn-body-subtitle-family : var(--tdn-font-family-brand); --tdn-body-subtitle-weight : var(--tdn-font-weight-regular); --tdn-body-subtitle-size : 24px; --tdn-body-subtitle-lh : 1.5; --tdn-body-lead-family : var(--tdn-font-family-brand); --tdn-body-lead-weight : var(--tdn-font-weight-medium); --tdn-body-lead-size : 18px; --tdn-body-lead-lh : 1.5; --tdn-body-family : var(--tdn-font-family-brand); --tdn-body-weight : var(--tdn-font-weight-regular); --tdn-body-size : 16px; --tdn-body-lh : 1.5; /* ---------- BUTTONS / CTA ---------- */ /* Tous les labels CTA du site consomment ce poids (retour Morgan 2026-05-29 : CTA en semibold 600) */ --tdn-button-weight : var(--tdn-font-weight-semibold); /* ---------- CAPTION / ROLES ---------- */ --tdn-caption-role-family : var(--tdn-font-family-brand); --tdn-caption-role-weight : var(--tdn-font-weight-medium); --tdn-caption-role-size : 18px; --tdn-caption-role-lh : 1; --tdn-caption-role-ls : -0.03em; --tdn-caption-role-tt : capitalize; --tdn-caption-role-up-family : var(--tdn-font-family-brand); --tdn-caption-role-up-weight : var(--tdn-font-weight-medium); --tdn-caption-role-up-size : 12px; --tdn-caption-role-up-lh : 1.4; --tdn-caption-role-up-ls : var(--tdn-letter-spacing-wider); --tdn-caption-role-up-tt : uppercase; }