/* ========================================================================== HopCall — socle de marque La seule source de vérité des couleurs, de la typo et des rayons. Importé par le site vitrine, le back-office et les pages d'authentification. Deux thèmes : clair (vitrine) et sombre (back-office, login). Le thème se choisit avec l'attribut data-theme sur ; sans attribut, on suit la préférence système. ========================================================================== */ :root { /* --- Marque (invariants, quel que soit le thème) --- */ --accent: #EE5F3C; --accent-ink: #FFFFFF; --accent-soft: rgba(238, 95, 60, .12); --accent-line: rgba(238, 95, 60, .35); --navy: #1E2A44; /* --- États --- */ --green: #17A87B; --red: #C0392B; --amber: #D9862B; /* --- Typo --- */ --sans: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, monospace; /* --- Formes --- */ --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-pill: 999px; --ease: cubic-bezier(.22, .8, .3, 1); /* --- Surfaces : thème clair par défaut --- */ --bg: #F7F5F0; --surface: #FFFFFF; --surface-2: #F1EDE4; --ink: #1E2A44; --muted: #7A7668; --faint: #A19C8D; --line: #E7E2D8; --line-strong: #D6CFC0; --shadow: 0 20px 50px -28px rgba(30, 42, 68, .28); } /* Thème sombre — explicite (data-theme) ou hérité du système. */ :root[data-theme="dark"] { --bg: #10131C; --surface: #1A1F2C; --surface-2: #232939; --ink: #F2F0EA; --muted: #9BA0AE; --faint: #6B7180; --line: #2A3040; --line-strong: #3A4256; --shadow: 0 24px 60px -24px rgba(0, 0, 0, .7); --accent-soft: rgba(238, 95, 60, .16); --accent-line: rgba(238, 95, 60, .45); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #10131C; --surface: #1A1F2C; --surface-2: #232939; --ink: #F2F0EA; --muted: #9BA0AE; --faint: #6B7180; --line: #2A3040; --line-strong: #3A4256; --shadow: 0 24px 60px -24px rgba(0, 0, 0, .7); --accent-soft: rgba(238, 95, 60, .16); --accent-line: rgba(238, 95, 60, .45); } } * { box-sizing: border-box; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent); color: var(--accent-ink); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------- le logotype -- « Hop » en accent, « Call » en encre, le point final en accent. Une seule règle, réutilisée partout (nav, login, footer, e-mails). -------------------------------------------------------------------- */ .hc-logo { font-family: var(--sans); font-weight: 800; letter-spacing: -.04em; color: var(--ink); text-decoration: none; white-space: nowrap; } .hc-logo .hop, .hc-logo .dot { color: var(--accent); } /* Sur fond navy, l'encre du logo doit passer au blanc. */ .on-navy .hc-logo { color: #fff; }