/* 0.1. Variables globales (:root) */:root{--color-background:#0b1a22;--color-header:#111111;--color-accent:#775c31;--color-accent-light:#917041;--color-text:#ffffff;--color-text-secondary:#c0c0c0;--header-height:60px;--max-width:1200px;--text-scale:1;--z-index-header:1000;--z-index-pagination:990;--z-index-search:9999;--z-index-scroll-top:1010;--mobile-menu-extra:0px;--pagination-bar-height:61px;/* Chanfreins (coins coupés en diagonale) */ --cut-xs:6px;--cut-sm:8px;--cut-md:12px;--cut-lg:16px;/* Couleur énergie (animations interactives) */ --color-energy:rgba(24,180,255,0.8);/* ─────────────────────────────────────────────────────────── Design tokens (Phase 1 — harmonisation design system) Non consommés par les composants existants à ce stade. Les composants y seront migrés progressivement (Phases 2+). ─────────────────────────────────────────────────────────── */ /* Spacing scale (multiples de 4px) */ --space-2xs:0.25rem;/* 4px */ --space-xs:0.5rem;/* 8px */ --space-sm:0.75rem;/* 12px */ --space-md:1rem;/* 16px */ --space-lg:1.5rem;/* 24px */ --space-xl:2rem;/* 32px */ --space-2xl:3rem;/* 48px */ --space-3xl:4rem;/* 64px */ /* Typography scale (clamp pour adaptation fluide) */ --font-xs:clamp(0.7rem,0.65rem + 0.2vw,0.75rem);--font-sm:clamp(0.8rem,0.75rem + 0.25vw,0.875rem);--font-md:clamp(0.9rem,0.85rem + 0.3vw,1rem);--font-lg:clamp(1rem,0.95rem + 0.4vw,1.125rem);--font-xl:clamp(1.15rem,1.05rem + 0.6vw,1.35rem);--font-2xl:clamp(1.4rem,1.25rem + 1vw,1.75rem);--font-3xl:clamp(1.75rem,1.5rem + 1.5vw,2.25rem);--line-tight:1.3;--line-base:1.55;--line-loose:1.75;/* Border radius (arrondi classique) */ --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px;/* Shadows (3 niveaux d'élévation + halos) */ --shadow-1:0 1px 2px rgba(0,0,0,0.18),0 1px 3px rgba(0,0,0,0.12);--shadow-2:0 4px 8px rgba(0,0,0,0.20),0 2px 4px rgba(0,0,0,0.10);--shadow-3:0 24px 80px rgba(0,0,0,0.22),inset 0 1px 0 rgba(255,255,255,0.04);--shadow-glow-accent:0 0 24px rgba(119,92,49,0.35);--shadow-glow-energy:0 0 18px rgba(24,180,255,0.45);/* Surfaces (tokens prêts à l'emploi) */ --surface-base:var(--color-background);--surface-elevated:#142736;--surface-floating-bg:rgba(255,255,255,0.035);--surface-floating-border:rgba(255,255,255,0.08);--surface-chamfered-border:var(--color-accent);/* Transitions */ --ease-out:cubic-bezier(0.22,1,0.36,1);--ease-in-out:cubic-bezier(0.65,0,0.35,1);--dur-fast:0.15s;--dur-base:0.25s;--dur-slow:0.4s;/* Container scale (utilisé par .tt-container — Phase 2) */ --container-narrow:720px;/* lecture éditoriale */ --container-default:1200px;/* défaut,aligné sur --max-width */ --container-wide:1440px;/* board / messages */ --container-fluid:96vw;/* full-width avec respiration */ /* Breakpoints (référence — utilisés en @media) --bp-xs:380px --bp-sm:480px --bp-md:768px --bp-lg:991.98px --bp-xl:1200px --bp-2xl:1440px --bp-3xl:1920px --bp-4k:2560px --bp-uw:3440px */}