/* =========================== HABS - Typography System Conforme Brand Book v1.0 - Mars 2026 =========================== */ /* =========================== FONT IMPORTS Loaded via tags in HTML for better performance =========================== */ /* =========================== TYPOGRAPHY VARIABLES =========================== */ :root { /* Font Families */ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-code: 'JetBrains Mono', 'Courier New', monospace; /* Font Sizes - Inter */ --font-size-hero: 3.5rem; /* 56px - Headline 1 */ --font-size-h1: 2.75rem; /* 44px */ --font-size-h2: 2.25rem; /* 36px - Headline 2 */ --font-size-h3: 1.75rem; /* 28px - Headline 3 */ --font-size-h4: 1.25rem; /* 20px */ --font-size-body: 1rem; /* 16px - Body Copy */ --font-size-small: 0.875rem; /* 14px - Tech/Label */ --font-size-tiny: 0.75rem; /* 12px - 12-14px Jetbrains Mono */ /* Font Weights - Inter */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; /* Semibold / Medium */ --font-weight-bold: 700; --font-weight-extrabold: 800; /* Bold / Semibold */ /* Font Weights - JetBrains Mono */ --font-mono-regular: 400; --font-mono-medium: 500; --font-mono-semibold: 600; --font-mono-bold: 700; /* Line Heights */ --line-height-tight: 1.2; /* Titres */ --line-height-normal: 1.5; /* Body */ --line-height-relaxed: 1.7; /* Paragraphs */ --line-height-code: 1.6; /* Code blocks */ /* Letter Spacing */ --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.05em; --letter-spacing-wider: 0.1em; } /* =========================== BASE TYPOGRAPHY - INTER =========================== */ body { font-family: var(--font-primary); font-size: var(--font-size-body); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headlines - Inter */ h1, .h1, .hero-title { font-family: var(--font-primary); font-size: var(--font-size-hero); font-weight: var(--font-weight-extrabold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); } h2, .h2, .section-title { font-family: var(--font-primary); font-size: var(--font-size-h2); font-weight: var(--font-weight-extrabold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); } h3, .h3 { font-family: var(--font-primary); font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); } h4, .h4 { font-family: var(--font-primary); font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); } /* Body Text - Inter */ p, .body-text { font-family: var(--font-primary); font-size: var(--font-size-body); font-weight: var(--font-weight-regular); line-height: var(--line-height-relaxed); } /* Labels & Tech Text - Inter Semibold/Medium */ .section-label, .hero-label, label, .label { font-family: var(--font-primary); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; } /* =========================== DATA & CODE - JETBRAINS MONO =========================== */ /* Code blocks */ code, pre, .code { font-family: var(--font-code); font-size: var(--font-size-tiny); font-weight: var(--font-mono-regular); line-height: var(--line-height-code); letter-spacing: 0; } /* Data displays - Stats, metrics, numbers */ .stat-number, .data-number, .metric-value { font-family: var(--font-code); font-weight: var(--font-mono-bold); letter-spacing: -0.02em; } /* Technical labels - Version numbers, IDs, codes */ .tech-label, .version-label, .code-label { font-family: var(--font-code); font-size: var(--font-size-tiny); font-weight: var(--font-mono-medium); text-transform: uppercase; letter-spacing: 0.05em; } /* Cognitive Load indicator (from image) */ .cognitive-load, .load-indicator { font-family: var(--font-code); font-size: var(--font-size-tiny); font-weight: var(--font-mono-regular); color: var(--color-accent); } /* Footer metadata - Series info, dates */ .footer-meta, .confidential-label { font-family: var(--font-code); font-size: var(--font-size-tiny); font-weight: var(--font-mono-regular); } /* =========================== UTILITY CLASSES =========================== */ /* Font Family Utilities */ .font-inter { font-family: var(--font-primary); } .font-mono { font-family: var(--font-code); } /* Weight Utilities - Inter */ .font-light { font-weight: var(--font-weight-light); } .font-regular { font-weight: var(--font-weight-regular); } .font-medium { font-weight: var(--font-weight-medium); } .font-semibold { font-weight: var(--font-weight-semibold); } .font-bold { font-weight: var(--font-weight-bold); } .font-extrabold { font-weight: var(--font-weight-extrabold); } /* Size Utilities */ .text-hero { font-size: var(--font-size-hero); } .text-h1 { font-size: var(--font-size-h1); } .text-h2 { font-size: var(--font-size-h2); } .text-h3 { font-size: var(--font-size-h3); } .text-h4 { font-size: var(--font-size-h4); } .text-body { font-size: var(--font-size-body); } .text-small { font-size: var(--font-size-small); } .text-tiny { font-size: var(--font-size-tiny); } /* Line Height Utilities */ .leading-tight { line-height: var(--line-height-tight); } .leading-normal { line-height: var(--line-height-normal); } .leading-relaxed { line-height: var(--line-height-relaxed); } /* Letter Spacing Utilities */ .tracking-tight { letter-spacing: var(--letter-spacing-tight); } .tracking-normal { letter-spacing: var(--letter-spacing-normal); } .tracking-wide { letter-spacing: var(--letter-spacing-wide); } .tracking-wider { letter-spacing: var(--letter-spacing-wider); } /* =========================== SPECIAL CASES =========================== */ /* Button text - Inter Medium */ button, .button, .btn, .cta-button { font-family: var(--font-primary); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); } /* Navigation - Inter Medium uppercase */ .nav-menu a { font-family: var(--font-primary); font-weight: var(--font-weight-medium); font-size: var(--font-size-small); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; } /* Logo - Inter Extrabold */ .logo { font-family: var(--font-primary); font-weight: var(--font-weight-extrabold); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; } /* Quotes & Highlights */ blockquote, .quote, .highlight-text { font-family: var(--font-primary); font-weight: var(--font-weight-medium); font-style: normal; /* Pas d'italique selon la charte */ } /* =========================== RESPONSIVE TYPOGRAPHY =========================== */ @media (max-width: 1024px) { :root { --font-size-hero: 3rem; /* 48px */ --font-size-h1: 2.5rem; /* 40px */ --font-size-h2: 2rem; /* 32px */ --font-size-h3: 1.5rem; /* 24px */ } } @media (max-width: 768px) { :root { --font-size-hero: 2.5rem; /* 40px */ --font-size-h1: 2rem; /* 32px */ --font-size-h2: 1.75rem; /* 28px */ --font-size-h3: 1.25rem; /* 20px */ --font-size-body: 1rem; /* 16px - maintenu */ } } /* =========================== ACCESSIBILITY =========================== */ /* Maintain minimum contrast ratios */ .text-secondary { color: var(--color-secondary); /* #9BA3B4 - WCAG AA compliant */ } .text-tertiary { color: var(--color-tertiary); /* #6B7280 - Use for less critical info */ } /* Focus states */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Selection */ ::selection { background: var(--color-accent); color: var(--color-primary); } /* =========================== PRINT STYLES =========================== */ @media print { body { font-family: var(--font-primary); color: #000; } code, pre { font-family: var(--font-code); } }