/* ════════════════════════════════════════════════════════════════════════════ Cashlab UI — design system partagé (charte unique) Consommé par Sales Studio, Presales Studio et Admin. Une seule source de vérité pour les couleurs, la typographie, le header et les composants. Police attendue via Google Fonts dans le (DM Sans + Playfair). ════════════════════════════════════════════════════════════════════════════ */ :root { --night: #0A1628; --night-2: #0F172A; --night-3: #14213D; --gold: #C8A960; --gold-deep: #B8942E; --gold-soft: rgba(200,169,96,0.14); --gold-line: rgba(200,169,96,0.32); --ivory: #F8F5EE; --paper: #FFFFFF; --surface: #FFFFFF; --bg: #F4F1E9; --ink: #0F172A; --ink-soft: #475569; --muted: #64748B; --rule: #E2E8F0; --rule-soft: #EDE7D8; --primary: var(--night); --accent: var(--gold); --text: var(--ink); --border: var(--rule); --success: #047857; --danger: #B91C1C; --warning: #B45309; --radius: 14px; --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-serif: 'Playfair Display', 'Times New Roman', Georgia, serif; --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 0 0 1px rgba(15,23,42,.04); --shadow-md: 0 4px 16px -4px rgba(15,23,42,.08), 0 0 0 1px rgba(15,23,42,.05); --shadow-lg: 0 24px 64px -16px rgba(10,22,40,.18), 0 0 0 1px rgba(15,23,42,.04); --shadow-gold: 0 1px 0 0 rgba(255,255,255,.18) inset, 0 8px 24px -8px rgba(184,148,46,.45); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-display); font-size: 15px; line-height: 1.55; background: var(--bg); color: var(--ink); min-height: 100vh; -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; } /* ── Header ─────────────────────────────────────────────────────────────────── */ header { background: var(--night); color: #fff; height: 68px; display: flex; align-items: center; gap: 18px; padding: 0 32px; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(200,169,96,.18); box-shadow: 0 1px 0 0 rgba(255,255,255,.04) inset, 0 8px 24px -16px rgba(0,0,0,.6); } .logo-icon { width: auto; height: 22px; display: flex; align-items: center; } .logo-icon img { height: 22px; width: auto; display: block; } .logo-text { font-size: 20px; font-weight: 800; letter-spacing: -.5px; color: #fff; } .logo-text .lab { font-weight: 400; opacity: .85; } .logo-text .dot { color: var(--gold); } .logo-tag { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); background: transparent; border: 1px solid var(--gold-line); padding: 5px 10px; border-radius: 2px; } .header-right, .header-spacer { margin-left: auto; } .header-right { display: flex; align-items: center; gap: 10px; } .btn-header { background: transparent; color: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.14); padding: 8px 16px; border-radius: 6px; font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: .02em; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: all .18s ease; } .btn-header:hover { background: rgba(200,169,96,.1); color: #fff; border-color: var(--gold-line); } .btn-header.active-nav, .btn-header.active { background: var(--gold); color: var(--night); border-color: var(--gold); font-weight: 600; } /* Pastille utilisateur */ .user-pill, #user-badge { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 6px 6px 6px 14px; font-family: var(--font-display); font-size: 12px; color: rgba(255,255,255,.7); display: inline-flex; align-items: center; gap: 10px; } /* Icône de déconnexion dans la pastille (identique au Sales Studio) */ .user-pill a, #user-badge a { color: var(--gold); text-decoration: none; font-size: 13px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(200,169,96,.12); transition: all .2s ease; } .user-pill a:hover, #user-badge a:hover { background: var(--gold); color: var(--night); } /* ── Boutons ────────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 26px; border-radius: 8px; font-family: var(--font-display); font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; cursor: pointer; border: 1px solid transparent; transition: all .2s ease; text-decoration: none; } .btn-primary, .btn-gold { background: var(--gold); color: var(--night); box-shadow: var(--shadow-gold); border-color: var(--gold); } .btn-primary:hover, .btn-gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); } .btn-navy { background: var(--night); color: #fff; border-color: var(--night); } .btn-navy:hover { background: var(--night-3); } .btn-outline { background: transparent; border: 1.5px solid var(--rule); color: var(--ink); } .btn-outline:hover { border-color: var(--gold); } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ── Carte + utilitaires ─────────────────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-md); } .hidden { display: none !important; } @media (max-width: 720px) { header { padding: 0 16px; gap: 12px; height: 60px; } .logo-tag { display: none; } .btn-header { padding: 7px 12px; font-size: 12px; } }