:root{ --bg:#141A24; --surface:#1D2530; --surface-2:#28313F; --border:#333E4F; --border-soft:#232B37; --text:#EAF1FB; --text-2:#8FA0BA; --text-3:#5C6C85; --accent:#5FA8FF; --accent-dim:#1D3454; --good:#4FBE9C; --good-dim:#153230; --warn:#E0A94D; --warn-dim:#332711; --bad:#E2665A; --bad-dim:#34201D; --rail-w:64px; --radius:10px; font-family:'Inter', system-ui, sans-serif; } /* ---------- Thème clair ---------- */ :root[data-theme="light"]{ --bg:#F4F6FA; --surface:#FFFFFF; --surface-2:#EEF2F8; --border:#DCE3ED; --border-soft:#E7ECF3; --text:#182233; --text-2:#5B6B82; --text-3:#93A1B5; --accent:#2F7DE1; --accent-dim:#E3EFFE; --good:#1F9C7A; --good-dim:#E3F7F0; --warn:#B9791F; --warn-dim:#FBF0DC; --bad:#D1453A; --bad-dim:#FBE7E5; } *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html,body{ margin:0; padding:0; } body{ background:var(--bg); color:var(--text); min-height:100vh; -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; } h1,h2,h3{ font-family:'Inter', sans-serif; margin:0; letter-spacing:-0.01em; } p{ margin:0; } button{ font-family:inherit; } .num{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; } /* ---------- App shell ---------- */ .app{ display:flex; min-height:100vh; } /* ---------- Left icon rail ---------- */ .rail{ position:fixed; top:0; left:0; /* Chaîne de secours, du moins fiable au plus fiable : 1) 100vh : viewport "plein écran théorique" (vieux navigateurs) 2) 100dvh : viewport dynamique (s'ajuste à la barre d'adresse mobile) 3) --vh (calculée en JS, voir le