/* ============================================================ Tokens — couleurs, typo, espacements, breakpoints, radii Source : prototype phase 1 (claude-design) ============================================================ */ :root { /* --- Brand --- */ --marine: #01315f; --marine-deep: #001f3f; --duck: #127ea5; --duck-tint: #e8f3f8; /* --- Neutrals (subtle cool tint) --- */ --bg: #ffffff; --bg-soft: #f6f8fa; --bg-tint: #eef3f7; --ink: #0c1c2e; --ink-2: #475569; --ink-3: #6b7a8d; --hairline: rgba(1, 49, 95, 0.12); --hairline-strong: rgba(1, 49, 95, 0.22); /* --- Type --- */ --font-display: "Aller", system-ui, sans-serif; --font-body: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif; /* --- Espacements (default) --- */ --gap-xs: 0.5rem; --gap-s: 1rem; --gap-m: 1.75rem; --gap-l: 3rem; --gap-xl: 5.5rem; --gap-xxl: 8rem; --pad-section-y: 6.5rem; --pad-block-y: 4rem; --pad-card: 1.75rem; /* --- Radii --- */ --radius-s: 4px; --radius-m: 8px; --radius-l: 14px; /* --- Cards (default = border) --- */ --card-bg: #ffffff; --card-border: 1px solid var(--hairline-strong); --card-shadow: none; /* --- Layout --- */ --maxw: 1240px; --maxw-narrow: 880px; /* --- Hauteurs des barres fixes en haut de page --- */ /* Utilisé par .topbar, .header et .hero-home (calc viewport - barres) */ --topbar-h: 38px; --header-h: 60px; } /* Density compact (par défaut sur ) */ [data-density="compact"] { --gap-s: 0.75rem; --gap-m: 1.25rem; --gap-l: 2rem; --gap-xl: 3.75rem; --gap-xxl: 5.5rem; --pad-section-y: 4.25rem; --pad-block-y: 2.5rem; --pad-card: 1.25rem; }