/* ============================================================ THEME.CSS — Variables de thème ToolsAgency / Kinethix Appliqué via data-theme="light" (défaut) sur data-theme="dark" disponible — activé par session utilisateur ============================================================ */ /* ── THÈME CLAIR (défaut) ────────────────────────────────── */ [data-theme="light"], :root { /* Couleurs principales Kinethix */ --color-primary: #1A75FF; --color-primary-hover: #0D5FCC; --color-primary-light: #E8F1FF; --color-accent: #F5C400; /* étoile jaune */ /* Surfaces */ --color-bg: #F4F7FB; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-border: #DCE3F0; --color-border-focus: #1A75FF; /* Texte */ --color-text: #0A1628; --color-text-secondary: #4A5568; --color-text-muted: #8896B3; --color-text-inverse: #FFFFFF; /* États */ --color-success: #16A34A; --color-success-bg: #F0FDF4; --color-error: #DC2626; --color-error-bg: #FEF2F2; --color-warning: #D97706; --color-warning-bg: #FFFBEB; --color-info: #0284C7; --color-info-bg: #F0F9FF; /* Ombres */ --shadow-sm: 0 1px 3px rgba(10, 22, 40, 0.08); --shadow-md: 0 4px 16px rgba(10, 22, 40, 0.10); --shadow-lg: 0 8px 32px rgba(10, 22, 40, 0.12); --shadow-card: 0 2px 8px rgba(26, 117, 255, 0.08); /* Inputs */ --input-bg: #FFFFFF; --input-border: #DCE3F0; --input-text: #0A1628; --input-placeholder:#8896B3; /* Navbar / header interne */ --nav-bg: #0A1628; --nav-text: #FFFFFF; --nav-accent: #1A75FF; } /* ── THÈME SOMBRE ────────────────────────────────────────── */ [data-theme="dark"] { --color-primary: #4D9FFF; --color-primary-hover: #6AAFFF; --color-primary-light: #0D1F3C; --color-accent: #F5C400; --color-bg: #0A0F1A; --color-surface: #111827; --color-surface-raised: #1A2336; --color-border: #1E2D45; --color-border-focus: #4D9FFF; --color-text: #E8EDF5; --color-text-secondary: #9AACCB; --color-text-muted: #5A7499; --color-text-inverse: #0A0F1A; --color-success: #22C55E; --color-success-bg: #052E16; --color-error: #F87171; --color-error-bg: #1F0707; --color-warning: #FCD34D; --color-warning-bg: #1C0F00; --color-info: #38BDF8; --color-info-bg: #031220; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3); --input-bg: #1A2336; --input-border: #1E2D45; --input-text: #E8EDF5; --input-placeholder:#5A7499; --nav-bg: #060C16; --nav-text: #E8EDF5; --nav-accent: #4D9FFF; } /* ── BASE GLOBALE ────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background-color: var(--color-bg); color: var(--color-text); line-height: 1.6; min-height: 100vh; transition: background-color 0.2s ease, color 0.2s ease; } /* ── TYPOGRAPHIE ─────────────────────────────────────────── */ h1, h2, h3, h4 { color: var(--color-text); font-weight: 600; line-height: 1.3; } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-hover); } /* ── COMPOSANTS DE BASE ──────────────────────────────────── */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-card); padding: 2rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.5rem; border-radius: 8px; font-size: 0.9375rem; font-weight: 500; cursor: pointer; border: none; transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--color-primary); color: var(--color-text-inverse); box-shadow: 0 2px 8px rgba(26, 117, 255, 0.25); } .btn-primary:hover { background: var(--color-primary-hover); box-shadow: 0 4px 12px rgba(26, 117, 255, 0.35); color: var(--color-text-inverse); } .btn-full { width: 100%; } /* ── FORMULAIRES ─────────────────────────────────────────── */ .form-group { margin-bottom: 1.25rem; } .form-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 0.375rem; } .form-input { width: 100%; padding: 0.625rem 0.875rem; background: var(--input-bg); border: 1.5px solid var(--input-border); border-radius: 8px; color: var(--input-text); font-size: 0.9375rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; outline: none; } .form-input::placeholder { color: var(--input-placeholder); } .form-input:focus { border-color: var(--color-border-focus); box-shadow: 0 0 0 3px rgba(26, 117, 255, 0.12); } /* ── ALERTES ─────────────────────────────────────────────── */ .alert { padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.9rem; margin-bottom: 1.25rem; border-left: 3px solid; } .alert-error { background: var(--color-error-bg); color: var(--color-error); border-color: var(--color-error); } .alert-success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success); } .alert-info { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info); } .alert-warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning); } /* ── UTILITAIRES ─────────────────────────────────────────── */ .text-center { text-align: center; } .text-muted { color: var(--color-text-muted); font-size: 0.875rem; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; }