/* ========================================================================== Feuille de style commune — design system « Vélo Itinéraires » Palette, typographie et composants repris de la maquette beta (voir DESIGN_TOKENS.md). Les identifiants et classes utilisés par le JS (#stats, .stat-card, #settings, #actions, .hint, .profile-*, waypoint-*, …) sont conservés tels quels : seul l'habillage change. ========================================================================== */ :root { --bg: #F4F7F5; --surface: #FFFFFF; --surface-2: #EDF2EF; --ink: #14201C; --ink-2: #55635E; --ink-3: #647169; --line: #DCE4E0; --line-2: #C4D0CB; --pine: #2C5740; --pine-hi: #3B7154; --pine-wash: #E5EDE8; --sun: #9E5E09; --sun-wash: #FDF1DF; /* Bleu-ardoise, même famille de ton que le bleu déjà utilisé pour le plat et les descentes dans le profil altimétrique (profile.js) : liens et états "info" plutôt qu'un bleu vif qui jurerait avec le vert de marque. */ --lake: #2B6C93; --lake-wash: #E7F1F6; --danger: #B00020; --danger-wash: #FDECEE; --g-flat: #4E9A5A; --g-roll: #8CB13C; --g-climb: #E0B32E; --g-steep: #E08A2E; --g-wall: #D3492E; --shadow-sm: 0 1px 2px rgba(20, 32, 28, 0.05); --shadow-md: 0 2px 4px rgba(20, 32, 28, 0.05), 0 12px 28px -16px rgba(20, 32, 28, 0.25); --display: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif; --body: "Avenir Next", "Segoe UI", system-ui, sans-serif; --data: ui-monospace, "SF Mono", Menlo, monospace; --rail-width: 320px; --rail-gutter: 352px; /* --rail-width + 2 × 16px de marge */ } /* Thème sombre disponible mais non automatique : le profil altimétrique est dessiné en SVG avec des gris fixes côté profile.js, illisibles sur fond sombre. On garde donc les jetons prêts (data-theme="dark" sur ) sans suivre prefers-color-scheme tant que le SVG n'est pas passé aux variables. */ :root[data-theme="dark"] { --bg: #0F1613; --surface: #18221E; --surface-2: #212D28; --ink: #EAF0ED; --ink-2: #A3B1AC; --ink-3: #889692; --line: #2A3833; --line-2: #3A4A44; --pine: #35C4A2; --pine-hi: #4FD8B6; --pine-wash: #14332B; --sun: #F5B44E; --sun-wash: #33280F; --lake: #6FC1E8; --lake-wash: #12313E; --danger: #E2846C; --danger-wash: #3A251F; --g-flat: #5CB169; --g-roll: #9CC24A; --g-climb: #EBC13F; --g-steep: #EB9A40; --g-wall: #E15A3D; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px -16px rgba(0, 0, 0, 0.7); /* Pas de bloc @media (prefers-color-scheme: dark) ici, volontairement : voir la note plus haut sur le profil altimétrique (SVG à gris fixes). */ } * { box-sizing: border-box; } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } html { color-scheme: light dark; } html, body { margin: 0; height: 100%; font-family: var(--body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2 { margin: 0; text-wrap: balance; } button, input, select, textarea { font-family: inherit; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; border-radius: 4px; }