/* ============================================================ base.css — reset, jetons, typographie, utilitaires Les polices sont chargees par dans le , pas par @import ici : un @import serialise les requetes (HTML -> CSS -> Google Fonts -> woff2) au lieu de les paralleliser. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---------- Jetons : thème clair (défaut) ---------- */ :root { --bg: #ffffff; --surface: #f7f8fa; --surface-2: #eff1f5; --text: #0d1117; --text-muted: #5b6472; /* L'accent et le logo partagent le même rouge : identité unifiée. */ --accent: #dc2626; --accent-hover: #b91c1c; --accent-soft: rgba(220, 38, 38, 0.08); --accent-contrast: #ffffff; --border: rgba(13, 17, 23, 0.08); --border-strong: rgba(13, 17, 23, 0.16); --logo-red: #dc2626; --shadow-sm: 0 1px 2px rgba(13, 17, 23, 0.06), 0 1px 3px rgba(13, 17, 23, 0.04); --shadow-md: 0 4px 12px rgba(13, 17, 23, 0.07), 0 2px 4px rgba(13, 17, 23, 0.04); --shadow-lg: 0 12px 32px rgba(13, 17, 23, 0.1), 0 4px 8px rgba(13, 17, 23, 0.05); --font-display: "Sora", system-ui, -apple-system, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* Échelle fluide : remplace le hack html{font-size:62.5%} de l'ancien site */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --fs-sm: clamp(0.875rem, 0.84rem + 0.17vw, 0.9375rem); --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --fs-lg: clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem); --fs-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); --fs-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); --fs-3xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem); --fs-4xl: clamp(2.75rem, 2rem + 3.4vw, 4.75rem); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --radius-sm: 0.5rem; --radius: 0.875rem; --radius-lg: 1.25rem; --radius-full: 999px; /* Conteneur fluide entre deux bornes, sans point de rupture : - plancher 1200 px : en dessous, 92vw gaspillerait de la place sur mobile, ou chaque pixel compte ; - 92vw au milieu : un ecran de 1600 px laissait 400 px vides ; - plafond 1760 px : au-dela, les lignes deviennent trop longues pour que l'oeil retrouve le debut de la suivante. */ --container: min(1760px, max(1200px, 92vw)); --header-h: 72px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Jetons : thème sombre ---------- L'accent s'eclaircit : le rouge profond du mode clair passerait mal sur fond noir. */ [data-theme="dark"] { --bg: #0b0d12; --surface: #12151c; --surface-2: #1a1f29; --text: #e8eaf0; --text-muted: #9aa3b2; --accent: #f05252; --accent-hover: #ff7b7b; --accent-soft: rgba(240, 82, 82, 0.14); --accent-contrast: #0b0d12; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.18); --logo-red: #f05252; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); } /* ---------- Éléments ---------- */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } button, input, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* ---------- Utilitaires ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); } .section { padding-block: var(--space-24); } .section--surface { background: var(--surface); } .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3); } .section-title { font-size: var(--fs-3xl); margin-bottom: var(--space-4); } .section-title span { color: var(--accent); } .section-lead { font-size: var(--fs-lg); color: var(--text-muted); max-width: 60ch; margin-bottom: var(--space-16); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 999; padding: var(--space-3) var(--space-4); background: var(--accent); color: var(--accent-contrast); border-radius: var(--radius-sm); transform: translateY(-200%); transition: transform 0.2s var(--ease-out); } .skip-link:focus { transform: translateY(0); } /* ---------- Mouvement réduit ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }