/* Design system partagé — dashboard + login. Thème sombre par défaut, clair via [data-theme="light"] sur (basculé et mémorisé par assets/dashboard.js). */ :root { --bg: #070a09; --bg-elevated: #0d1310; --surface: rgba(255, 255, 255, 0.035); --surface-hover: rgba(255, 255, 255, 0.065); --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.18); --text: #f5f7f6; --text-dim: rgba(245, 247, 246, 0.58); --text-faint: rgba(245, 247, 246, 0.34); --accent: #22c55e; --accent-strong: #16a34a; --accent-dim: rgba(34, 197, 94, 0.14); --accent-text: #04240f; --danger: #f87171; --danger-dim: rgba(239, 68, 68, 0.12); --warning: #fbbf24; --warning-dim: rgba(251, 191, 36, 0.14); --info: #60a5fa; --info-dim: rgba(96, 165, 250, 0.14); --radius-sm: 8px; --radius: 13px; --radius-lg: 20px; --shadow: 0 24px 70px rgba(0, 0, 0, 0.5); --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.3); --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --sidebar-w: 236px; } :root[data-theme="light"] { --bg: #f2f5f3; --bg-elevated: #ffffff; --surface: rgba(13, 19, 16, 0.03); --surface-hover: rgba(13, 19, 16, 0.055); --border: rgba(13, 19, 16, 0.09); --border-strong: rgba(13, 19, 16, 0.18); --text: #0d1310; --text-dim: rgba(13, 19, 16, 0.62); --text-faint: rgba(13, 19, 16, 0.4); --accent-dim: rgba(34, 197, 94, 0.12); --danger-dim: rgba(239, 68, 68, 0.1); --warning-dim: rgba(217, 158, 4, 0.14); --info-dim: rgba(59, 130, 246, 0.12); --shadow: 0 24px 60px rgba(15, 23, 20, 0.12); --shadow-sm: 0 6px 18px rgba(15, 23, 20, 0.08); } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100vh; color-scheme: dark; } :root[data-theme="light"] body { color-scheme: light; } body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } a { color: inherit; } ::selection { background: var(--accent-dim); color: var(--text); } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } /* Boutons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s, filter 0.15s, transform 0.05s; white-space: nowrap; } .btn:hover { background: var(--surface-hover); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--accent-text); border-color: transparent; } .btn-primary:hover { filter: brightness(1.08); background: var(--accent); } .btn-danger { background: var(--danger-dim); border-color: rgba(239, 68, 68, 0.35); color: var(--danger); } .btn-danger:hover { background: rgba(239, 68, 68, 0.2); } .btn-block { width: 100%; } .btn-sm { padding: 6px 11px; font-size: 11.5px; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .icon-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); } .icon-btn.danger:hover { color: var(--danger); border-color: rgba(239, 68, 68, 0.35); background: var(--danger-dim); } .icon-btn svg { width: 15px; height: 15px; } /* Inputs */ .field { width: 100%; } .field label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; } .field input, .field textarea { width: 100%; padding: 10px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 13.5px; font-family: inherit; outline: none; transition: border-color 0.15s, background 0.15s; } .field textarea { resize: vertical; min-height: 76px; } .field input:focus, .field textarea:focus { border-color: var(--accent); background: var(--surface-hover); } .field + .field { margin-top: 14px; } .field .hint { font-size: 11px; color: var(--text-faint); margin-top: 5px; } .search { position: relative; display: flex; align-items: center; } .search svg { position: absolute; left: 12px; width: 14px; height: 14px; color: var(--text-faint); pointer-events: none; } .search input { width: 100%; padding: 9px 13px 9px 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12.5px; font-family: inherit; outline: none; transition: border-color 0.15s; } .search input:focus { border-color: var(--accent); } /* Badges */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.connecte { background: var(--accent-dim); color: #34d17a; } .badge.en_attente_scan { background: var(--warning-dim); color: var(--warning); } .badge.deconnecte, .badge.demarrage { background: var(--surface); color: var(--text-faint); } /* Layout app */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--bg-elevated); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 22px 16px; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; } .brand .mark { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand .mark svg { width: 18px; height: 18px; } .brand strong { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.2; } .brand span { display: block; font-size: 10.5px; color: var(--text-faint); margin-top: 1px; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); cursor: pointer; border: 1px solid transparent; transition: background 0.15s, color 0.15s; } .nav-item svg { width: 15px; height: 15px; flex-shrink: 0; } .nav-item.active { background: var(--accent-dim); color: var(--accent); font-weight: 800; } .nav-item:not(.active):hover { background: var(--surface); color: var(--text); } .sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 8px; } .theme-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); font-size: 11.5px; font-weight: 700; color: var(--text-dim); cursor: pointer; } .theme-toggle svg { width: 14px; height: 14px; } .main { flex: 1; min-width: 0; padding: 26px 34px 60px; max-width: 1240px; } .topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; } .topbar h1 { font-size: 20px; font-weight: 800; margin: 0; } .topbar p { font-size: 12px; color: var(--text-faint); margin: 4px 0 0; } .topbar-right { display: flex; align-items: center; gap: 10px; } /* Stats */ .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; } .stat-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; display: flex; align-items: center; gap: 13px; } .stat-card .icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-card .icon svg { width: 18px; height: 18px; } .stat-card .value { font-size: 20px; font-weight: 800; line-height: 1.1; } .stat-card .label { font-size: 11px; color: var(--text-faint); margin-top: 2px; font-weight: 600; } .stat-card.accent .icon { background: var(--accent-dim); color: var(--accent); } .stat-card.warning .icon { background: var(--warning-dim); color: var(--warning); } .stat-card.info .icon { background: var(--info-dim); color: var(--info); } .stat-card.muted .icon { background: var(--surface); color: var(--text-dim); } /* Toolbar (filtres + recherche) */ .toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 11.5px; font-weight: 700; color: var(--text-dim); cursor: pointer; transition: all 0.15s; } .chip:hover { background: var(--surface-hover); } .chip.active { background: var(--accent); color: var(--accent-text); border-color: transparent; } .toolbar-right { display: flex; align-items: center; gap: 10px; } /* Grille de cartes */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px; } .card { border-radius: var(--radius-lg); padding: 18px; background: var(--bg-elevated); border: 1px solid var(--border); transition: border-color 0.15s, transform 0.15s; } .card:hover { border-color: var(--border-strong); } .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .card-id { display: flex; align-items: center; gap: 11px; min-width: 0; } .card-text { min-width: 0; } .card .label { font-weight: 800; font-size: 14.5px; margin: 0 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card .phone { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); margin: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card .phone svg { width: 12px; height: 12px; flex-shrink: 0; } /* Avatar (logo du numéro, ou repli avec l'initiale) */ .avatar { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-fallback { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: var(--accent-text); background: linear-gradient(135deg, var(--accent), var(--accent-strong)); } /* Upload de logo (modales Ajouter / Modifier) */ .logo-upload { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; } .logo-upload .preview { width: 58px; height: 58px; border-radius: 15px; overflow: hidden; flex-shrink: 0; background: var(--surface); border: 1px dashed var(--border-strong); color: var(--text-faint); display: flex; align-items: center; justify-content: center; } .logo-upload .preview svg { width: 20px; height: 20px; } .logo-upload .preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .logo-upload .upload-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .logo-upload input[type="file"] { display: none; } .logo-upload .hint { font-size: 11px; color: var(--text-faint); } .card-meta { display: flex; gap: 14px; margin: 13px 0; padding: 11px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .card-meta .item { flex: 1; } .card-meta .item .n { font-size: 15px; font-weight: 800; } .card-meta .item .l { font-size: 10px; color: var(--text-faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; } .card .actions { display: flex; gap: 6px; margin-top: 12px; } .card .apikey { font-family: var(--font-mono); font-size: 10.5px; background: var(--surface); border: 1px dashed var(--border-strong); padding: 8px 10px; border-radius: 8px; word-break: break-all; color: var(--text-faint); margin-top: 10px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background 0.15s; } .card .apikey:hover { background: var(--surface-hover); color: var(--text-dim); } .card .apikey svg { width: 12px; height: 12px; flex-shrink: 0; } .vide { text-align: center; padding: 70px 20px; color: var(--text-faint); grid-column: 1 / -1; } .vide svg { width: 40px; height: 40px; margin-bottom: 12px; opacity: 0.5; } .vide p { margin: 4px 0 0; font-size: 12.5px; } /* Skeleton loading */ .skeleton { border-radius: var(--radius-lg); background: var(--bg-elevated); border: 1px solid var(--border); padding: 18px; height: 168px; position: relative; overflow: hidden; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--surface-hover), transparent); transform: translateX(-100%); animation: shimmer 1.4s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } /* Modales */ .modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; animation: fadeIn 0.15s ease; } .modal { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 26px; width: 380px; max-width: 100%; box-shadow: var(--shadow); animation: pop 0.18s ease; } .modal.modal-lg { width: 420px; } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .modal h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; } .modal p.sub { font-size: 11.5px; color: var(--text-faint); margin: 0 0 18px; } .modal .close { cursor: pointer; color: var(--text-faint); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; } .modal .close:hover { background: var(--surface); color: var(--text); } .modal img.qr-img { width: 230px; height: 230px; background: #fff; padding: 10px; border-radius: 10px; display: block; margin: 0 auto; } .modal .qr-zone { text-align: center; } .modal .qr-hint { font-size: 11px; color: var(--text-faint); margin-top: 14px; text-align: center; } .modal .actions { display: flex; gap: 8px; margin-top: 18px; } .modal .actions .btn { flex: 1; } .modal .result { margin-top: 12px; font-size: 12px; padding: 9px 11px; border-radius: 8px; display: none; } .modal .result.ok { display: block; background: var(--accent-dim); color: #34d17a; } .modal .result.err { display: block; background: var(--danger-dim); color: var(--danger); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: none; } } /* Toasts */ .toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; max-width: 320px; } .toast { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 11px; padding: 12px 14px; font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 9px; animation: slideIn 0.2s ease; } .toast svg { width: 15px; height: 15px; flex-shrink: 0; } .toast.ok { color: #34d17a; border-color: rgba(34, 197, 94, 0.35); } .toast.err { color: var(--danger); border-color: rgba(239, 68, 68, 0.35); } .toast.info { color: var(--info); border-color: rgba(96, 165, 250, 0.35); } @keyframes slideIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } } /* Responsive */ @media (max-width: 860px) { .app { flex-direction: column; } .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; padding: 14px 18px; overflow-x: auto; } .brand { padding: 0 14px 0 0; } .nav { flex-direction: row; } .sidebar-footer { margin-top: 0; margin-left: auto; flex-direction: row; } .main { padding: 20px 16px 50px; } } /* ---- Page de connexion ---- */ .login-shell { display: flex; min-height: 100vh; } .login-brand { flex: 1.1; display: flex; flex-direction: column; justify-content: center; padding: 60px; background: radial-gradient(900px 500px at 15% 0%, rgba(34, 197, 94, 0.14), transparent 60%), var(--bg-elevated); border-right: 1px solid var(--border); } .login-brand .mark { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; } .login-brand .mark svg { width: 24px; height: 24px; } .login-brand h2 { font-size: 26px; font-weight: 800; margin: 0 0 12px; max-width: 420px; line-height: 1.3; } .login-brand p.pitch { font-size: 13.5px; color: var(--text-dim); max-width: 400px; line-height: 1.6; margin: 0 0 30px; } .login-features { display: flex; flex-direction: column; gap: 14px; } .login-features .f { display: flex; align-items: flex-start; gap: 11px; font-size: 12.5px; color: var(--text-dim); } .login-features .f .ico { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .login-features .f .ico svg { width: 13px; height: 13px; } .login-features .f strong { color: var(--text); display: block; font-size: 12.5px; margin-bottom: 1px; } .login-form-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; position: relative; } .login-card { width: 360px; max-width: 100%; } .login-card h1 { font-size: 19px; font-weight: 800; margin: 0 0 6px; } .login-card p.sub { color: var(--text-faint); font-size: 12px; margin: 0 0 26px; } .pw-field { position: relative; } .pw-field .toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--text-faint); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; } .pw-field .toggle:hover { color: var(--text); background: var(--surface); } .pw-field .toggle svg { width: 15px; height: 15px; } .pw-field input { padding-right: 40px; } .erreur { color: var(--danger); font-size: 12px; margin-top: 12px; min-height: 14px; display: flex; align-items: center; gap: 6px; } .erreur svg { width: 13px; height: 13px; flex-shrink: 0; } .login-theme-toggle { position: absolute; top: 24px; right: 24px; } @media (max-width: 760px) { .login-shell { flex-direction: column; } .login-brand { border-right: none; border-bottom: 1px solid var(--border); padding: 40px 28px; } .login-features { display: none; } } /* ---- Page de pairage publique (lien partagé, sans authentification) ---- */ .pair-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(900px 500px at 50% -10%, rgba(34, 197, 94, 0.1), transparent 60%), var(--bg); } .pair-card { width: 400px; max-width: 100%; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 32px; text-align: center; box-shadow: var(--shadow); } .pair-card .mark { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .pair-card .mark svg { width: 22px; height: 22px; } .pair-card h1 { font-size: 16px; font-weight: 800; margin: 0 0 6px; } .pair-card p.sub { font-size: 12.5px; color: var(--text-faint); margin: 0 0 22px; min-height: 16px; } .pair-card .qr-box { min-height: 250px; display: flex; align-items: center; justify-content: center; } .pair-card .qr-box img { width: 230px; height: 230px; background: #fff; padding: 10px; border-radius: 10px; } .pair-card .qr-box p { font-size: 12px; color: var(--text-faint); } .status-msg { font-size: 13.5px; font-weight: 800; } .status-msg.ok { color: #34d17a; } .status-msg.err { color: var(--danger); } .pair-card .steps { text-align: left; font-size: 11.5px; color: var(--text-dim); margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); line-height: 1.7; } .pair-card .steps strong { color: var(--text); } /* ---- Confirmation de connexion réussie (checkmark animé "premium") ---- */ /* Utilisé à la fois par la modale du tableau de bord (déclenchée par le polling) et par la * page de pairage publique, une fois le QR scanné avec succès. */ .sweet-modal { text-align: center; } .sweet-modal h3 { font-size: 17px; margin-bottom: 6px; } .sweet-check-circle { width: 84px; height: 84px; border-radius: 50%; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; margin: 4px auto 18px; animation: sweetPulse 1.8s ease-out infinite; } .sweet-check-circle svg { width: 40px; height: 40px; } .sweet-check-circle svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: sweetDraw 0.5s ease-out 0.2s forwards; } @keyframes sweetDraw { to { stroke-dashoffset: 0; } } @keyframes sweetPulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); } 70% { box-shadow: 0 0 0 18px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }