/* ========================================================================== Newo — Tokens de design partagés Chargé avant les feuilles de style propres à chaque module (auth, dashboard…) ========================================================================== */ :root { /* Couleurs */ --navy-950: #0a0f1c; --navy-900: #0f1626; --navy-800: #16213a; --navy-700: #202d49; --navy-600: #34405e; --amber: #ffb020; --amber-soft: #ffcf7a; --cyan: #38e1c6; --fog: #8a93a6; --fog-dim: #5c6680; --white: #f4f6fb; --danger: #ff6b6b; --danger-bg: rgba(255, 107, 107, 0.1); --success: #38e1c6; --success-bg: rgba(56, 225, 198, 0.1); /* Texte sur fond ambre (boutons, badges) : reste toujours sombre, quel que soit le thème — ne bascule jamais avec --navy-950. */ --on-accent: #0a0f1c; /* Typographie */ --font-display: "Space Grotesk", "Segoe UI", sans-serif; --font-body: "Inter", "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "Consolas", monospace; /* Rayon / ombres */ --radius-lg: 20px; --radius-md: 12px; --radius-sm: 8px; --shadow-card: 0 20px 60px -20px rgba(0, 0, 0, 0.6); } /* ========================================================================== Mode jour — activé via Mêmes noms de variables, valeurs inversées. --on-accent ne change jamais. ========================================================================== */ html[data-theme="light"] { --navy-950: #f7f8fb; --navy-900: #ffffff; --navy-800: #eef1f6; --navy-700: #dde1ea; --navy-600: #c5cbd9; --amber: #f2960a; --amber-soft: #ffcf7a; --cyan: #0e9c86; --fog: #57606f; --fog-dim: #838da0; --white: #101828; --danger: #e0504f; --danger-bg: rgba(224, 80, 79, 0.1); --success: #0e9c86; --success-bg: rgba(14, 156, 134, 0.1); --shadow-card: 0 16px 40px -18px rgba(20, 25, 40, 0.18); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: var(--font-body); background: var(--navy-950); color: var(--white); transition: background-color 0.2s ease, color 0.2s ease; -webkit-font-smoothing: antialiased; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Logo Newo : hauteur cohérente partout, largeur automatique (wordmark) */ .brand-logo-img { height: 30px; width: auto; display: block; } /* ---------------------------------------------------------------------- */ /* Mur de blocage par abonnement — partagé entre toutes les pages */ /* protégées (voir assets/js/subscription-gate.js) */ /* ---------------------------------------------------------------------- */ .subscription-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 50vh; max-width: 440px; margin: 4vh auto; padding: 20px; } .subscription-gate-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 176, 32, 0.18), rgba(255, 176, 32, 0.06)); border: 1px solid rgba(255, 176, 32, 0.35); display: grid; place-content: center; color: var(--amber); margin-bottom: 20px; } .subscription-gate-icon svg { width: 30px; height: 30px; } .subscription-gate h2 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin: 0 0 10px; } .subscription-gate p { color: var(--fog); font-size: 0.92rem; line-height: 1.6; margin: 0 0 24px; } /* Bouton autonome (ne dépend pas de dashboard.css) pour le CTA du mur */ .subscription-gate .btn-primary { border: none; border-radius: var(--radius-sm); padding: 10px 18px; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--on-accent); background: linear-gradient(90deg, var(--amber-soft), var(--amber)); cursor: pointer; white-space: nowrap; } .subscription-gate .btn-primary:hover { filter: brightness(1.05); } /* ---------------------------------------------------------------------- */ /* Bascule mode jour / nuit */ /* ---------------------------------------------------------------------- */ .theme-toggle-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--navy-700); background: var(--navy-900); color: var(--fog); cursor: pointer; display: grid; place-content: center; flex-shrink: 0; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .theme-toggle-btn:hover { color: var(--amber); border-color: var(--navy-600); } .theme-toggle-btn svg { width: 18px; height: 18px; } .theme-toggle-sidebar-wrap { display: flex; justify-content: center; padding: 10px 0; border-top: 1px solid var(--navy-800); } .theme-toggle-floating { position: fixed; top: 18px; right: 18px; z-index: 40; } @media (max-width: 480px) { .theme-toggle-floating { top: 12px; right: 12px; } } /* Garantit que l'attribut [hidden] cache toujours l'élément, même si une règle CSS lui donne par ailleurs un display explicite (ex: display:flex sur .track-shell) — sans cette règle, [hidden] seul peut être annulé par une déclaration display plus spécifique, et l'élément reste visible. */ [hidden] { display: none !important; }