/* ============================================== BASE.CSS — Design System "Dark Navy / Or Souverain" Palette : #0a192f (navy) × #bc9c22 (or) × #8899f0 (lavande) Typographie : Space Grotesk (titres) + Inter (corps) + JetBrains Mono (labels) ============================================== */ /* ----------------------------------------------- IMPORT GOOGLE FONTS (fallback si non injecté dans ) ----------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* ----------------------------------------------- VARIABLES GLOBALES ----------------------------------------------- */ :root { /* === FONDS === */ --color-bg: #0a192f; --color-bg-alt: #0c1d38; --color-bg-card: #102040; --color-surface: #162b4a; --color-surface-2: #1c3255; /* === OR — Accent principal === */ --color-gold: #bc9c22; --color-gold-light: #d4b13c; --color-gold-pale: #e8cc6a; --color-gold-dim: rgba(188, 156, 34, 0.10); --color-gold-border: rgba(188, 156, 34, 0.22); --color-gold-glow: rgba(188, 156, 34, 0.06); /* === LAVANDE — Accent secondaire (badges, tags) === */ --color-lavender: #8899f0; --color-lavender-dim: rgba(136, 153, 240, 0.10); --color-lavender-border: rgba(136, 153, 240, 0.20); /* === Compatibilité avec l'ancien système CSS === */ --color-accent: var(--color-gold); --color-accent-dim: var(--color-gold-dim); --color-accent-hover: var(--color-gold-light); /* === TEXTE === */ --color-text: #e6f1ff; --color-text-muted: #a8b2d8; --color-text-subtle: #4a6080; /* === BORDURES === */ --color-border: rgba(168, 178, 216, 0.07); --color-border-mid: rgba(168, 178, 216, 0.12); --color-border-hover: rgba(188, 156, 34, 0.28); /* === TYPOGRAPHIE === */ --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-sans: 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; /* Échelle typographique — basée sur 1rem = 16px */ --text-xs: 0.6875rem; /* 11px — micro labels */ --text-sm: 0.8125rem; /* 13px — labels, tags */ --text-base: 1rem; /* 16px — corps */ --text-md: 1.0625rem; /* 17px — corps large */ --text-lg: 1.1875rem; /* 19px — intro, sous-titres */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.75rem; /* 28px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ --text-5xl: 4rem; /* 64px */ --text-hero: 5.5rem; /* 88px — nom hero */ /* Poids */ --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* Hauteurs de ligne */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.65; --leading-relaxed: 1.75; --leading-loose: 1.85; /* Letter spacing */ --tracking-tight: -0.03em; --tracking-snug: -0.02em; --tracking-normal: -0.01em; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.12em; /* === ESPACEMENTS — Grille 8pt === */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* === LAYOUT === */ --container-max: 1120px; --container-pad: 2rem; /* === BORDURES / COINS === */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* === OMBRES === */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); --shadow-gold: 0 0 24px rgba(188, 156, 34, 0.14); /* === TRANSITIONS === */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 260ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 420ms cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 320ms cubic-bezier(0.34, 1.56, 0.64, 1); /* === Z-INDEX === */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-nav: 100; --z-modal: 200; /* === NAV === */ --nav-height: 68px; } /* ----------------------------------------------- RESET MODERNE ----------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 1.5rem); -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, video, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: var(--radius-sm); } /* ----------------------------------------------- TYPOGRAPHIE — BASE ----------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); color: var(--color-text); } h1 { font-size: clamp(var(--text-4xl), 7vw, var(--text-hero)); } h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl)); } h3 { font-size: clamp(var(--text-lg), 2.5vw, var(--text-xl)); } h4 { font-size: var(--text-md); } p { line-height: var(--leading-relaxed); color: var(--color-text-muted); } p + p { margin-top: var(--space-4); } strong { font-weight: var(--weight-semi); color: var(--color-text); } code { font-family: var(--font-mono); font-size: 0.88em; background: var(--color-surface); padding: 0.1em 0.45em; border-radius: var(--radius-sm); color: var(--color-gold-light); border: 1px solid var(--color-border-mid); } /* ----------------------------------------------- CONTENEUR ----------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* ----------------------------------------------- SECTION — base commune ----------------------------------------------- */ .section { padding-block: var(--space-32); position: relative; overflow: hidden; } .section--alt { background-color: var(--color-bg-alt); } .section__header { margin-bottom: var(--space-16); } /* Tag de section — monospace, or, uppercase */ .section__tag { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-4); } /* Trait or avant le tag */ .section__tag::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--color-gold); opacity: 0.7; } .section__title { font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl)); letter-spacing: var(--tracking-snug); margin-bottom: var(--space-5); } .section__intro { font-size: var(--text-lg); max-width: 58ch; color: var(--color-text-muted); line-height: var(--leading-loose); } /* ----------------------------------------------- SCROLLBAR ----------------------------------------------- */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--color-bg); } ::-webkit-scrollbar-thumb { background: var(--color-surface-2); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-gold-border); } /* ----------------------------------------------- SÉLECTION ----------------------------------------------- */ ::selection { background: var(--color-gold); color: var(--color-bg); } /* ----------------------------------------------- RESPONSIVE ----------------------------------------------- */ @media (max-width: 768px) { :root { --container-pad: 1.25rem; --nav-height: 60px; } .section { padding-block: var(--space-20); } }